Bump ODS to v12, update UI & extension config, fix web-config docs

changelog/unreleased/update-ui.md

@@ -0,0 +1,6 @@
+Enhancement: Update UI
+
+Updated the user interface to reflect changes in the ownCloud design system and the web UI that the hello extensions gets rendered into.
+Also updated the web config in the documentation.
+
+https://github.com/owncloud/ocis-hello/pull/130

docs/extensions/hello/running.md

@@ -25,24 +25,25 @@ No matter which way you choose, we need to create a configuration file for ownCl
     "response_type": "code",
     "scope": "openid profile email"
   },
-  "apps": ["files", "media-viewer"],
+  "apps": [
+    "files",
+    "media-viewer",
+    "search"
+  ],
   "external_apps": [
     {
       "id": "settings",
-      "path": "/settings.js"
+      "path": "https://localhost:9200/settings.js"
     },
     {
       "id": "accounts",
-      "path": "/accounts.js"
+      "path": "https://localhost:9200/accounts.js"
     },
     {
       "id": "hello",
-      "path": "/hello.js"
+      "path": "https://localhost:9200/hello.js"
     }
-  ],
-  "options": {
-    "hideSearchBar": true
-  }
+  ]
 }
 
 ```

package.json

@@ -75,6 +75,6 @@
     "not dead"
   ],
   "peerDependencies": {
-    "owncloud-design-system": "^9.3.0"
+    "owncloud-design-system": "^12.0.0"
   }
 }

ui/app.js

@@ -5,25 +5,22 @@ import store from './store'
 const appInfo = {
   name: 'Hello',
   id: 'hello',
-  icon: 'info',
-  isFileEditor: false,
-  extensions: []
+  icon: 'chat-smile',
+  isFileEditor: false
 }
 
 const routes = [
   {
     name: 'hello',
     path: '/',
-    components: {
-      app: App
-    }
+    component: App
   }
 ]
 
 const navItems = [
   {
     name: 'Hello',
-    iconMaterial: appInfo.icon,
+    icon: appInfo.icon,
     route: {
       name: 'hello',
       path: `/${appInfo.id}/`

ui/components/App.vue

@@ -1,18 +1,13 @@
 <template>
-  <div class="uk-flex uk-flex-column uk-flex-middle uk-margin-xlarge-top">
-    <h1>
-      Hello, tell us your name
-    </h1>
-
+  <div class="oc-flex oc-flex-column oc-flex-middle oc-p-l">
+    <h1>Hello, tell us your name</h1>
     <form v-on:submit.prevent="submitName(name)" action="#" method="post">
       <oc-text-input v-model="name" placeholder="Your name" />
-
-      <oc-button variation="primary" class="uk-width-1-1 uk-margin-top">
+      <oc-button variation="primary" class="oc-width-1-1 oc-mt-m">
         Submit
       </oc-button>
     </form>
-
-    <p class="uk-text-lead" v-if="message" v-text="message" />
+    <p class="oc-text-lead" v-if="message" v-text="message" />
   </div>
 </template>
 

ui/tests/acceptance/pageobjects/helloPage.js

@@ -38,7 +38,7 @@ module.exports = {
       locateStrategy: 'xpath'
     },
     helloText: {
-      selector: "//*[@class='uk-text-lead']",
+      selector: "//*[@class='oc-text-lead']",
       locateStrategy: 'xpath'
     }
   }