MODUL-1149: Ameliorer slide transition (#1088)

* MODUL-1149 - Améliorer slide-transition * MODUL-1149 - Revue de code * MODUL-1149 - Update snapshot
ulaval · Jul 31, 2019 · e9e5c31 · e9e5c31
1 parent 9618026
commit e9e5c31
Show file tree

Hide file tree

Showing 15 changed files with 360 additions and 31 deletions.
diff --git a/src/components/character-count/__snapshots__/character-count.spec.ts.snap b/src/components/character-count/__snapshots__/character-count.spec.ts.snap
@@ -4,7 +4,7 @@ exports[`MCharacterCount should render correctly 1`] = `<div class="m-character-
 
 exports[`MCharacterCount should render correctly when maxLength prop is set 1`] = `
 <div class="m-character-count">
-  <div aria-hidden="true" name="m--is" class="m-character-count__wrap"><span>20</span>/40</div>
+  <div aria-hidden="true" name="m--is" css="true" class="m-character-count__wrap"><span>20</span>/40</div>
 </div>
 `;
 

diff --git a/src/components/character-count/character-count.html b/src/components/character-count/character-count.html
@@ -1,5 +1,5 @@
 <div class="m-character-count">
-    <m-accordion-transition :transition="transition">
+    <m-accordion-transition :disabled="!transition">
         <div v-if="hasCounter"
              class="m-character-count__wrap"
              aria-hidden="true"><span>{{ valueLength }}</span>/{{ maxLength }}</div>

diff --git a/src/components/menu/menu-item/menu-item.html b/src/components/menu/menu-item/menu-item.html
@@ -42,7 +42,7 @@
                 ref="plus"
                 v-if="group"></m-plus>
     </span>
-    <m-accordion-transition :transition="isAnimReady"
+    <m-accordion-transition :disabled="!isAnimReady"
                             ref="transition">
         <ul :id="ariaControls"
             class="m-menu-item__group"

diff --git a/...nents/transitions/accordion-transition/__snapshots__/accordion-transition.stories.ts.snap b/...nents/transitions/accordion-transition/__snapshots__/accordion-transition.stories.ts.snap
@@ -0,0 +1,66 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots components|m-accordion-transition Accordion example 1`] = `
+<div>
+  <div>
+    <button
+      class="m-button m--is-skin-primary"
+      type="button"
+    >
+      <!---->
+       
+      <!---->
+       
+      <span
+        class="m-button__text"
+      >
+        
+                    Close accordion
+                 
+        <!---->
+      </span>
+       
+      <!---->
+       
+      <!---->
+    </button>
+     
+    <button
+      class="m-button m-u--margin-left m--is-skin-secondary"
+      type="button"
+    >
+      <!---->
+       
+      <!---->
+       
+      <span
+        class="m-button__text"
+      >
+        
+                    Disabled transition
+                 
+        <!---->
+      </span>
+       
+      <!---->
+       
+      <!---->
+    </button>
+  </div>
+   
+  <div>
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipisicing elit. A laudantium odio ipsum, quae quos cum dolor, omnis perferendis, veritatis deleniti iusto consectetur? Impedit tempora quam ab laborum maiores sapiente earum?
+    </p>
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipisicing elit. A laudantium odio ipsum, quae quos cum dolor, omnis perferendis, veritatis deleniti iusto consectetur? Impedit tempora quam ab laborum maiores sapiente earum?
+    </p>
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipisicing elit. A laudantium odio ipsum, quae quos cum dolor, omnis perferendis, veritatis deleniti iusto consectetur? Impedit tempora quam ab laborum maiores sapiente earum?
+    </p>
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipisicing elit. A laudantium odio ipsum, quae quos cum dolor, omnis perferendis, veritatis deleniti iusto consectetur? Impedit tempora quam ab laborum maiores sapiente earum?
+    </p>
+  </div>
+</div>
+`;
diff --git a/src/components/transitions/accordion-transition/accordion-transition.html b/src/components/transitions/accordion-transition/accordion-transition.html
@@ -1,4 +1,5 @@
 <transition name="m--is"
+            :css="!disabled"
             @before-enter="beforeEnter"
             @enter="enter"
             @after-enter="afterEnter"

diff --git a/src/components/transitions/accordion-transition/accordion-transition.stories.ts b/src/components/transitions/accordion-transition/accordion-transition.stories.ts
@@ -0,0 +1,46 @@
+import { storiesOf } from '@storybook/vue';
+import Vue from 'vue';
+import { componentsHierarchyRootSeparator } from '../../../../conf/storybook/utils';
+import { MButtonSkin } from '../../button/button';
+import { ACCORDION_TRANSITION_NAME } from '../../component-names';
+import AccordionTransitionPlugin from './accordion-transition';
+
+Vue.use(AccordionTransitionPlugin);
+
+storiesOf(`${componentsHierarchyRootSeparator}${ACCORDION_TRANSITION_NAME}`, module)
+    .add('Accordion example', () => ({
+        data: () => ({
+            open: true,
+            disabledTransition: false,
+            buttonSkin: MButtonSkin.Secondary
+        }),
+        methods: {
+            toggleOpen(): void {
+                let _this: any = this as any;
+                _this.open = !_this.open;
+            },
+            toggleDisabledTransition(): void {
+                let _this: any = this as any;
+                _this.disabledTransition = !_this.disabledTransition;
+            }
+        },
+        template: `
+        <div>
+            <div>
+                <m-button @click="toggleOpen()">
+                    {{open ? 'Close' : 'Open'}} accordion
+                </m-button>
+                <m-button class="m-u--margin-left"
+                          :skin="buttonSkin"
+                          @click="toggleDisabledTransition()">
+                    {{disabledTransition ? 'Enabled' : 'Disabled'}} transition
+                </m-button>
+            </div>
+            <m-accordion-transition :disabled="disabledTransition">
+                <div v-if="open">
+                    <p v-for="index in 4"
+                       :key="index">Lorem ipsum dolor sit amet, consectetur adipisicing elit. A laudantium odio ipsum, quae quos cum dolor, omnis perferendis, veritatis deleniti iusto consectetur? Impedit tempora quam ab laborum maiores sapiente earum?</p>
+                </div>
+            </m-accordion-transition>
+        </div>`
+    }));
diff --git a/src/components/transitions/accordion-transition/accordion-transition.ts b/src/components/transitions/accordion-transition/accordion-transition.ts
@@ -15,14 +15,14 @@ export class MAccordionTransition extends ModulVue {
     public heightDelta: number;
 
     @Prop({ default: true })
-    public transition: boolean;
+    public disabled: boolean;
 
     public setClassHasTransition(el: HTMLElement): void {
         if (!el.classList.contains(ACCORDION_TRANSITION_NAME)) {
             el.classList.add(ACCORDION_TRANSITION_NAME);
         }
 
-        if (this.transition) {
+        if (!this.disabled) {
             el.classList.add(CLASS_HAS_TRANSITION);
         } else if (el.classList.contains(CLASS_HAS_TRANSITION)) {
             el.classList.remove(CLASS_HAS_TRANSITION);

diff --git a/src/components/transitions/slide-transition/__snapshots__/slide-transition.stories.ts.snap b/src/components/transitions/slide-transition/__snapshots__/slide-transition.stories.ts.snap
@@ -0,0 +1,142 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots components|m-slide-transition Tabs example 1`] = `
+<div>
+  <m-navbar
+    selected="1"
+    skin="tab-light"
+  >
+    <m-navbar-item
+      value="1"
+    >
+      
+                    Tab 1
+                
+    </m-navbar-item>
+    <m-navbar-item
+      value="2"
+    >
+      
+                    Tab 2
+                
+    </m-navbar-item>
+    <m-navbar-item
+      value="3"
+    >
+      
+                    Tab 3
+                
+    </m-navbar-item>
+    <m-navbar-item
+      value="4"
+    >
+      
+                    Tab 4
+                
+    </m-navbar-item>
+    <m-navbar-item
+      value="5"
+    >
+      
+                    Tab 5
+                
+    </m-navbar-item>
+    <m-navbar-item
+      value="6"
+    >
+      
+                    Tab 6
+                
+    </m-navbar-item>
+    <m-navbar-item
+      value="7"
+    >
+      
+                    Tab 7
+                
+    </m-navbar-item>
+  </m-navbar>
+   
+  <div
+    class="m-slide-transition m--is-left-to-right-transition"
+  >
+    <div
+      class="m-u--margin-top"
+    >
+      <h3
+        class="m-u--no-margin"
+      >
+        Tab 1
+      </h3>
+       
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit. A laudantium odio ipsum, quae quos cum dolor, omnis perferendis, veritatis deleniti iusto consectetur? Impedit tempora quam ab laborum maiores sapiente earum?
+      </p>
+    </div>
+  </div>
+   
+  <div
+    class="m-u--margin-top--m"
+  >
+    <button
+      class="m-button m--is-skin-primary"
+      type="button"
+    >
+      <!---->
+       
+      <!---->
+       
+      <span
+        class="m-button__text"
+      >
+        Add tab 
+        <!---->
+      </span>
+       
+      <!---->
+       
+      <!---->
+    </button>
+     
+    <button
+      class="m-button m-u--margin-left m--is-skin-secondary"
+      type="button"
+    >
+      <!---->
+       
+      <!---->
+       
+      <span
+        class="m-button__text"
+      >
+        Delete tab 
+        <!---->
+      </span>
+       
+      <!---->
+       
+      <!---->
+    </button>
+     
+    <button
+      class="m-button m-u--margin-left m--is-skin-secondary"
+      type="button"
+    >
+      <!---->
+       
+      <!---->
+       
+      <span
+        class="m-button__text"
+      >
+        Disabled transition 
+        <!---->
+      </span>
+       
+      <!---->
+       
+      <!---->
+    </button>
+  </div>
+</div>
+`;
diff --git a/src/components/transitions/slide-transition/slide-transition.html b/src/components/transitions/slide-transition/slide-transition.html
@@ -1,6 +1,7 @@
 <div class="m-slide-transition"
      :class="{'m--is-left-to-right-transition': isLeftToRight}">
     <transition :name="transitionName"
+                :css="!disabled"
                 @enter="transitionEnter"
                 @after-enter="transitionAfterEnter"
                 @before-leave="transitionBeforeLeave"

diff --git a/src/components/transitions/slide-transition/slide-transition.sandbox.html b/src/components/transitions/slide-transition/slide-transition.sandbox.html
@@ -4,21 +4,23 @@ <h2 class="m-u--no-margin">Slide transition</h2>
                         :direction="direction">
         <div v-if="model === 1"
              key="1">
-            <h3>Étape 1</h3>
+            <h3 class="m-u--no-margin">Étape 1</h3>
             <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A laudantium odio ipsum, quae quos cum dolor, omnis perferendis, veritatis deleniti iusto consectetur? Impedit tempora quam ab laborum maiores sapiente earum?</p>
             <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A laudantium odio ipsum, quae quos cum dolor, omnis perferendis, veritatis deleniti iusto consectetur? Impedit tempora quam ab laborum maiores sapiente earum?</p>
             <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A laudantium odio ipsum, quae quos cum dolor, omnis perferendis, veritatis deleniti iusto consectetur? Impedit tempora quam ab laborum maiores sapiente earum?</p>
             <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A laudantium odio ipsum, quae quos cum dolor, omnis perferendis, veritatis deleniti iusto consectetur? Impedit tempora quam ab laborum maiores sapiente earum?</p>
         </div>
         <div v-if="model === 2"
              key="2">
-            <h3 style="color: red;">Étape 2</h3>
+            <h3 class="m-u--no-margin"
+                style="color: red;">Étape 2</h3>
             <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A laudantium odio ipsum, quae quos cum dolor, omnis perferendis, veritatis deleniti iusto consectetur? Impedit tempora quam ab laborum maiores sapiente earum?</p>
             <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A laudantium odio ipsum, quae quos cum dolor, omnis perferendis, veritatis deleniti iusto consectetur? Impedit tempora quam ab laborum maiores sapiente earum?</p>
         </div>
         <div v-if="model === 3"
              key="3">
-            <h3 style="color: blue;">Étape 3</h3>
+            <h3 class="m-u--no-margin"
+                style="color: blue;">Étape 3</h3>
             <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A laudantium odio ipsum, quae quos cum dolor, omnis perferendis, veritatis deleniti iusto consectetur? Impedit tempora quam ab laborum maiores sapiente earum?</p>
             <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A laudantium odio ipsum, quae quos cum dolor, omnis perferendis, veritatis deleniti iusto consectetur? Impedit tempora quam ab laborum maiores sapiente earum?</p>
             <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A laudantium odio ipsum, quae quos cum dolor, omnis perferendis, veritatis deleniti iusto consectetur? Impedit tempora quam ab laborum maiores sapiente earum?</p>

diff --git a/src/components/transitions/slide-transition/slide-transition.scss b/src/components/transitions/slide-transition/slide-transition.scss
@@ -4,6 +4,18 @@
     position: relative;
     transition: height $m-transition-duration--l ease;
 
+    &.m--is-left-to-right-transition > {
+        .m--is-enter {
+            transform: translate3d(-110%, 0, 0);
+        }
+
+        .m--is-leave-to {
+            transform: translate3d(110%, 0, 0);
+        }
+    }
+}
+
+.m-slide-transition > {
     .m--is-enter-active,
     .m--is-leave-active {
         cursor: not-allowed;
@@ -27,14 +39,4 @@
         transition: transform $m-transition-duration--l ease, opacity $m-transition-duration--l ease;
         position: absolute;
     }
-
-    &.m--is-left-to-right-transition {
-        .m--is-enter {
-            transform: translate3d(-110%, 0, 0);
-        }
-
-        .m--is-leave-to {
-            transform: translate3d(110%, 0, 0);
-        }
-    }
 }