Added animation, content wrapper and small fixes after review

owncloud · May 11, 2020 · 2aea840 · 2aea840
1 parent 2a7d025
commit 2aea840
Show file tree

Hide file tree

Showing 11 changed files with 194 additions and 125 deletions.
diff --git a/changelog/unreleased/deprecated-application-menu-component b/changelog/unreleased/deprecated-application-menu-component
@@ -1,5 +1,5 @@
 Change: Deprecated application menu component
 
-We've deprecated application menu component in favor of the sidebar component.
+We've deprecated the application menu component in favor of the sidebar component.
 
 https://github.com/owncloud/owncloud-design-system/pull/735
diff --git a/changelog/unreleased/deprecated-application-menu-component copy b/changelog/unreleased/deprecated-application-menu-component copy
@@ -0,0 +1,5 @@
+Enhancement: Created animation section in docs
+
+We've added an animation section in the documentation to show available animations and how to use them.
+
+https://github.com/owncloud/owncloud-design-system/pull/735
diff --git a/config/docs.config.js b/config/docs.config.js
@@ -133,6 +133,13 @@ module.exports = {
       usageMode: "hide",
       sectionDepth: 1,
     },
+    {
+      name: "Animations",
+      content: "../docs/animations.md",
+      exampleMode: "hide",
+      usageMode: "hide",
+      sectionDepth: 1,
+    },
     {
       name: "Use of ARIA",
       content: "../docs/use-of-aria.md",

diff --git a/docs/animations.md b/docs/animations.md
@@ -0,0 +1,8 @@
+## How to use animations
+To see how to use animations, please follow [transitions section of Vue.js documentation](https://vuejs.org/v2/guide/transitions.html). As a name of the transition, it is possible to use any of the following animations.
+
+## Available animations
+| Name           | Description |
+| -------------- | ----------- |
+| fade           | The element fades in  |
+| push-right     | The element slides from the left side and pushes the element to the right. It might be necessary to include a content wrapper with fixed width inside of the element to prevent deformation of the element. |
diff --git a/src/elements/OcSidebar.spec.js b/src/elements/OcSidebar.spec.js
@@ -11,7 +11,7 @@ const defaultProps = {
 }
 
 describe("OcSidebar", () => {
-  it('displays a logo image if its source is  specified', () => {
+  it('displays a logo image if its source is specified', () => {
     const logoSrc = 'https://owncloud.org/wp-content/themes/owncloud/img/owncloud-org-logo.svg'
     const wrapper = shallowMount(Sidebar, {
       propsData: {
@@ -78,6 +78,6 @@ describe("OcSidebar", () => {
 
     wrapper.find('.oc-sidebar-button-close').trigger('click')
     await wrapper.vm.$nextTick()
-    expect(wrapper.emitted().closed).toBeTruthy()
+    expect(wrapper.emitted().close).toBeTruthy()
   })
 })
diff --git a/src/elements/OcSidebar.vue b/src/elements/OcSidebar.vue
@@ -1,45 +1,47 @@
 <template>
   <div :class="$_ocSidebar_classes">
-    <oc-button
-      v-if="fixed"
-      class="oc-sidebar-button-close"
-      variation="raw"
-      @click.native="$_ocSidebar_buttonClose_click" 
-      :aria-label="closeButtonLabel"
-    >
-      <oc-icon name="close" aria-hidden="true" />
-    </oc-button>
-    <router-link to="/" class="oc-sidebar-logo">
-      <oc-img
-        v-if="logoImg"
-        key="logo-image"
-        :src="logoImg"
-        :alt="productName"
-        class="oc-sidebar-logo-img"
-      />
-      <span v-else key="product-name" class="oc-sidebar-logo-text" v-text="productName" />
-    </router-link>
-    <div v-if="$slots.upperContent" class="oc-sidebar-upper-content">
-      <!-- @slot Content above the navigation block -->
-      <slot name="upperContent" />
-    </div>
-    <nav :class="[{ 'uk-margin-bottom' : $slots.footer },  'oc-sidebar-nav']">
-      <ul>
-        <oc-sidebar-nav-item
-          v-for="item in navItems"
-          :key="item.route.path"
-          :icon="item.icon || item.iconMaterial"
-          :active="item.active"
-          :target="item.route.path"
-          class="oc-sidebar-nav-item"
-        >
-          {{ item.name }}
-        </oc-sidebar-nav-item>
-      </ul>
-    </nav>
-    <div v-if="$slots.footer" class="oc-sidebar-footer">
-      <!-- @slot Footer of the sidebar -->
-      <slot name="footer" />
+    <div class="oc-sidebar-content-wrapper">
+      <oc-button
+        v-if="fixed"
+        class="oc-sidebar-button-close"
+        variation="raw"
+        @click.native="$_ocSidebar_buttonClose_click" 
+        :aria-label="closeButtonLabel"
+      >
+        <oc-icon name="close" aria-hidden="true" />
+      </oc-button>
+      <router-link to="/" class="oc-sidebar-logo">
+        <oc-img
+          v-if="logoImg"
+          key="logo-image"
+          :src="logoImg"
+          :alt="productName"
+          class="oc-sidebar-logo-img"
+        />
+        <span v-else key="product-name" class="oc-sidebar-logo-text" v-text="productName" />
+      </router-link>
+      <div v-if="$slots.upperContent" class="oc-sidebar-upper-content">
+        <!-- @slot Content above the navigation block -->
+        <slot name="upperContent" />
+      </div>
+      <nav :class="[{ 'uk-margin-bottom' : $slots.footer },  'oc-sidebar-nav']">
+        <ul>
+          <oc-sidebar-nav-item
+            v-for="item in navItems"
+            :key="item.route.path"
+            :icon="item.icon || item.iconMaterial"
+            :active="item.active"
+            :target="item.route.path"
+            class="oc-sidebar-nav-item"
+          >
+            {{ item.name }}
+          </oc-sidebar-nav-item>
+        </ul>
+      </nav>
+      <div v-if="$slots.footer" class="oc-sidebar-footer">
+        <!-- @slot Footer of the sidebar -->
+        <slot name="footer" />
+      </div>
     </div>
   </div>
 </template>
@@ -90,7 +92,7 @@ export default {
     fixed: {
       type: Boolean,
       required: false,
-      defult: false
+      default: false
     },
     /**
      * Accessibility label of the close button
@@ -119,7 +121,7 @@ export default {
       /**
        * The user clicked on the close button
        */
-      this.$emit("closed")
+      this.$emit("close")
     }
   }
 }
@@ -195,7 +197,7 @@ The navigation block will automatically receive bottom margin in case the `foote
           <strong class="oc-light">Files app</strong>
         </template>
         <template v-slot:footer>
-          <small slot="footer" class="oc-light">
+          <small class="oc-light">
             Made by ownClouders
           </small>
         </template>

diff --git a/src/elements/__snapshots__/OcSidebar.spec.js.snap b/src/elements/__snapshots__/OcSidebar.spec.js.snap
@@ -2,92 +2,100 @@
 
 exports[`OcSidebar Sets fixed position 1`] = `
 <div class="oc-sidebar oc-sidebar-fixed">
-  <oc-button-stub type="button" arialabel="Close sidebar" variation="raw" class="oc-sidebar-button-close">
-    <oc-icon-stub name="close" arialabel="icon" type="span" size="small" variation="system" aria-hidden="true"></oc-icon-stub>
-  </oc-button-stub>
-  <router-link-stub tag="a" to="/" class="oc-sidebar-logo"><span class="oc-sidebar-logo-text">ownCloud</span></router-link-stub>
-  <!---->
-  <nav class="oc-sidebar-nav">
-    <ul>
-      <oc-sidebar-nav-item-stub target="/" icon="home" class="oc-sidebar-nav-item">
-        Home
-      </oc-sidebar-nav-item-stub>
-      <oc-sidebar-nav-item-stub target="/files" icon="folder" class="oc-sidebar-nav-item">
-        All files
-      </oc-sidebar-nav-item-stub>
-      <oc-sidebar-nav-item-stub active="true" target="/shared" icon="share" class="oc-sidebar-nav-item">
-        Shared files
-      </oc-sidebar-nav-item-stub>
-    </ul>
-  </nav>
-  <!---->
+  <div class="oc-sidebar-content-wrapper">
+    <oc-button-stub type="button" arialabel="Close sidebar" variation="raw" class="oc-sidebar-button-close">
+      <oc-icon-stub name="close" arialabel="icon" type="span" size="small" variation="system" aria-hidden="true"></oc-icon-stub>
+    </oc-button-stub>
+    <router-link-stub tag="a" to="/" class="oc-sidebar-logo"><span class="oc-sidebar-logo-text">ownCloud</span></router-link-stub>
+    <!---->
+    <nav class="oc-sidebar-nav">
+      <ul>
+        <oc-sidebar-nav-item-stub target="/" icon="home" class="oc-sidebar-nav-item">
+          Home
+        </oc-sidebar-nav-item-stub>
+        <oc-sidebar-nav-item-stub target="/files" icon="folder" class="oc-sidebar-nav-item">
+          All files
+        </oc-sidebar-nav-item-stub>
+        <oc-sidebar-nav-item-stub active="true" target="/shared" icon="share" class="oc-sidebar-nav-item">
+          Shared files
+        </oc-sidebar-nav-item-stub>
+      </ul>
+    </nav>
+    <!---->
+  </div>
 </div>
 `;
 
-exports[`OcSidebar displays a logo image if its source is  specified 1`] = `
+exports[`OcSidebar displays a logo image if its source is specified 1`] = `
 <div class="oc-sidebar">
-  <!---->
-  <router-link-stub tag="a" to="/" class="oc-sidebar-logo">
-    <oc-img-stub src="https://owncloud.org/wp-content/themes/owncloud/img/owncloud-org-logo.svg" alt="ownCloud" class="oc-sidebar-logo-img"></oc-img-stub>
-  </router-link-stub>
-  <!---->
-  <nav class="oc-sidebar-nav">
-    <ul>
-      <oc-sidebar-nav-item-stub target="/" icon="home" class="oc-sidebar-nav-item">
-        Home
-      </oc-sidebar-nav-item-stub>
-      <oc-sidebar-nav-item-stub target="/files" icon="folder" class="oc-sidebar-nav-item">
-        All files
-      </oc-sidebar-nav-item-stub>
-      <oc-sidebar-nav-item-stub active="true" target="/shared" icon="share" class="oc-sidebar-nav-item">
-        Shared files
-      </oc-sidebar-nav-item-stub>
-    </ul>
-  </nav>
-  <!---->
+  <div class="oc-sidebar-content-wrapper">
+    <!---->
+    <router-link-stub tag="a" to="/" class="oc-sidebar-logo">
+      <oc-img-stub src="https://owncloud.org/wp-content/themes/owncloud/img/owncloud-org-logo.svg" alt="ownCloud" class="oc-sidebar-logo-img"></oc-img-stub>
+    </router-link-stub>
+    <!---->
+    <nav class="oc-sidebar-nav">
+      <ul>
+        <oc-sidebar-nav-item-stub target="/" icon="home" class="oc-sidebar-nav-item">
+          Home
+        </oc-sidebar-nav-item-stub>
+        <oc-sidebar-nav-item-stub target="/files" icon="folder" class="oc-sidebar-nav-item">
+          All files
+        </oc-sidebar-nav-item-stub>
+        <oc-sidebar-nav-item-stub active="true" target="/shared" icon="share" class="oc-sidebar-nav-item">
+          Shared files
+        </oc-sidebar-nav-item-stub>
+      </ul>
+    </nav>
+    <!---->
+  </div>
 </div>
 `;
 
 exports[`OcSidebar displays nav items 1`] = `
 <div class="oc-sidebar">
-  <!---->
-  <router-link-stub tag="a" to="/" class="oc-sidebar-logo"><span class="oc-sidebar-logo-text">ownCloud</span></router-link-stub>
-  <!---->
-  <nav class="oc-sidebar-nav">
-    <ul>
-      <oc-sidebar-nav-item-stub target="/" icon="home" class="oc-sidebar-nav-item">
-        Home
-      </oc-sidebar-nav-item-stub>
-      <oc-sidebar-nav-item-stub target="/files" icon="folder" class="oc-sidebar-nav-item">
-        All files
-      </oc-sidebar-nav-item-stub>
-      <oc-sidebar-nav-item-stub active="true" target="/shared" icon="share" class="oc-sidebar-nav-item">
-        Shared files
-      </oc-sidebar-nav-item-stub>
-    </ul>
-  </nav>
-  <!---->
+  <div class="oc-sidebar-content-wrapper">
+    <!---->
+    <router-link-stub tag="a" to="/" class="oc-sidebar-logo"><span class="oc-sidebar-logo-text">ownCloud</span></router-link-stub>
+    <!---->
+    <nav class="oc-sidebar-nav">
+      <ul>
+        <oc-sidebar-nav-item-stub target="/" icon="home" class="oc-sidebar-nav-item">
+          Home
+        </oc-sidebar-nav-item-stub>
+        <oc-sidebar-nav-item-stub target="/files" icon="folder" class="oc-sidebar-nav-item">
+          All files
+        </oc-sidebar-nav-item-stub>
+        <oc-sidebar-nav-item-stub active="true" target="/shared" icon="share" class="oc-sidebar-nav-item">
+          Shared files
+        </oc-sidebar-nav-item-stub>
+      </ul>
+    </nav>
+    <!---->
+  </div>
 </div>
 `;
 
 exports[`OcSidebar displays upperContent and footer slots 1`] = `
 <div class="oc-sidebar">
-  <!---->
-  <router-link-stub tag="a" to="/" class="oc-sidebar-logo"><span class="oc-sidebar-logo-text">ownCloud</span></router-link-stub>
-  <div class="oc-sidebar-upper-content"><strong class="upper-slot">Files app</strong></div>
-  <nav class="uk-margin-bottom oc-sidebar-nav">
-    <ul>
-      <oc-sidebar-nav-item-stub target="/" icon="home" class="oc-sidebar-nav-item">
-        Home
-      </oc-sidebar-nav-item-stub>
-      <oc-sidebar-nav-item-stub target="/files" icon="folder" class="oc-sidebar-nav-item">
-        All files
-      </oc-sidebar-nav-item-stub>
-      <oc-sidebar-nav-item-stub active="true" target="/shared" icon="share" class="oc-sidebar-nav-item">
-        Shared files
-      </oc-sidebar-nav-item-stub>
-    </ul>
-  </nav>
-  <div class="oc-sidebar-footer"><small slot="footer" class="footer-slot">Made by ownClouders</small></div>
+  <div class="oc-sidebar-content-wrapper">
+    <!---->
+    <router-link-stub tag="a" to="/" class="oc-sidebar-logo"><span class="oc-sidebar-logo-text">ownCloud</span></router-link-stub>
+    <div class="oc-sidebar-upper-content"><strong class="upper-slot">Files app</strong></div>
+    <nav class="uk-margin-bottom oc-sidebar-nav">
+      <ul>
+        <oc-sidebar-nav-item-stub target="/" icon="home" class="oc-sidebar-nav-item">
+          Home
+        </oc-sidebar-nav-item-stub>
+        <oc-sidebar-nav-item-stub target="/files" icon="folder" class="oc-sidebar-nav-item">
+          All files
+        </oc-sidebar-nav-item-stub>
+        <oc-sidebar-nav-item-stub active="true" target="/shared" icon="share" class="oc-sidebar-nav-item">
+          Shared files
+        </oc-sidebar-nav-item-stub>
+      </ul>
+    </nav>
+    <div class="oc-sidebar-footer"><small slot="footer" class="footer-slot">Made by ownClouders</small></div>
+  </div>
 </div>
 `;
diff --git a/src/styles/_owncloud.scss b/src/styles/_owncloud.scss
@@ -15,6 +15,8 @@
 @import "theme/login";
 @import "theme/menu-secondary";
 
+@import "theme/animations.scss";
+
 @import "theme/oc-alert";
 @import "theme/oc-app-container";
 @import "theme/oc-app-menu";

diff --git a/src/styles/theme/_variables.scss b/src/styles/theme/_variables.scss
@@ -20,3 +20,5 @@ $global-danger-background: $danger-background;
 $global-border: #ccd4e0;
 
 $navbar-nav-item-height: 60px;
+
+$transitions-length: 500ms;
diff --git a/src/styles/theme/animations.scss b/src/styles/theme/animations.scss
@@ -0,0 +1,25 @@
+/**
+ * Fade
+ */
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity $transitions-length ease-in-out;
+}
+
+.fade-enter,
+.fade-leave-to {
+  opacity: 0;
+}
+
+/**
+ * Push right
+ */
+.push-right-enter-active,
+.push-right-leave-active {
+  transition: width $transitions-length ease-in-out;
+}
+
+.push-right-enter,
+.push-right-leave-to {
+  width: 0 !important;
+}