feat(component/loader): add the new Loader component

adeo · Mar 15, 2022 · 0f1c718 · 0f1c718
1 parent 40b3448
commit 0f1c718
Show file tree

Hide file tree

Showing 23 changed files with 570 additions and 32 deletions.
diff --git a/packages/styles/components/_c.layer.scss b/packages/styles/components/_c.layer.scss
@@ -212,6 +212,6 @@
   }
 
   &-overlay {
-    @include set-dialog-overlay();
+    @include set-page-overlay();
   }
 }
diff --git a/packages/styles/components/_c.loader.scss b/packages/styles/components/_c.loader.scss
@@ -0,0 +1,78 @@
+// .mc-spinner
+.mc-loader {
+  $parent: get-parent-selector(&);
+
+  @include set-loader-size($loader-default-size, $parent);
+  @include set-loader-theme($loader-default-theme, $parent);
+
+  align-items: center;
+  display: inline-flex;
+  flex-direction: column;
+
+  &__spinner {
+    &:not(:only-child) {
+      margin-bottom: $mu100;
+    }
+  }
+
+  &__icon {
+    animation: rotate-loader $animation-duration-loader linear infinite;
+    transform-origin: center;
+  }
+
+  &__path {
+    fill: none;
+    stroke-dashoffset: 0;
+    stroke-linecap: round;
+    stroke-dasharray: 1, 200;
+    stroke-dashoffset: 0;
+    animation: animate-dash-loader $animation-duration-loader ease-in-out
+      infinite;
+  }
+
+  &__text {
+    @include set-font-scale("05", "m");
+
+    color: $color-font-lightest;
+  }
+
+  @each $size, $props in $loader-sizes {
+    &--#{$size} {
+      @if ($size != "m") {
+        @include set-loader-size($props, $parent);
+      }
+    }
+  }
+
+  @each $theme, $color in $loader-theme {
+    &--#{$theme} {
+      @if ($theme != "primary") {
+        @include set-loader-theme($color, $parent);
+      }
+    }
+  }
+}
+
+@keyframes rotate-loader {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(270deg);
+  }
+}
+
+@keyframes animate-dash-loader {
+  0% {
+    stroke-dasharray: 1, 200;
+    stroke-dashoffset: 0;
+  }
+  50% {
+    stroke-dasharray: 89, 200;
+    stroke-dashoffset: -35px;
+  }
+  100% {
+    stroke-dasharray: 89, 200;
+    stroke-dashoffset: -124px;
+  }
+}
diff --git a/packages/styles/components/_c.modal.scss b/packages/styles/components/_c.modal.scss
@@ -23,9 +23,7 @@
     opacity: 0;
     position: relative;
     transform: translateY(-25%);
-    transition:
-      visibility 0s linear 0.4s,
-      transform 0.4s ease,
+    transition: visibility 0s linear 0.4s, transform 0.4s ease,
       opacity 0.4s ease;
     visibility: hidden;
     width: 100%;
@@ -53,9 +51,7 @@
       opacity: 1;
       pointer-events: all;
       transform: translateY(0);
-      transition:
-        visibility 0s linear 0s,
-        transform 0.4s ease,
+      transition: visibility 0s linear 0s, transform 0.4s ease,
         opacity 0.4s ease;
       visibility: visible;
     }
@@ -101,8 +97,7 @@
     flex-shrink: 0;
     height: $mu200;
     width: $mu200;
-    background:
-      transparent
+    background: transparent
       url(inline-icons("control-cross-32", $color-grey-500)) no-repeat;
     background-size: contain;
 
@@ -190,6 +185,6 @@
   }
 
   &-overlay {
-    @include set-dialog-overlay();
+    @include set-page-overlay();
   }
 }
diff --git a/packages/styles/components/_c.overlay.scss b/packages/styles/components/_c.overlay.scss
@@ -0,0 +1,11 @@
+.mc-overlay {
+  @include set-page-overlay();
+}
+
+.mc-overlay-loader {
+  @include set-page-overlay($background-color-overlay-loader, false);
+
+  align-items: center;
+  display: flex;
+  justify-content: center;
+}
diff --git a/packages/styles/settings-tools/_all-settings.scss b/packages/styles/settings-tools/_all-settings.scss
@@ -44,3 +44,5 @@
 @import "./_s.badges";
 @import "./_s.datatable";
 @import "./_s.visually-hidden";
+@import "./_s.overlay";
+@import "./_s.loader";
diff --git a/packages/styles/settings-tools/_s.loader.scss b/packages/styles/settings-tools/_s.loader.scss
@@ -0,0 +1,50 @@
+$loader-sizes: (
+  "s": (
+    "height": $mu150,
+    "stroke-width": 4,
+    "width": $mu150,
+  ),
+  "m": (
+    "height": $mu200,
+    "stroke-width": 4,
+    "width": $mu200,
+  ),
+  "l": (
+    "height": $mu400,
+    "stroke-width": 8,
+    "width": $mu400,
+  ),
+);
+
+$loader-theme: (
+  "dark": $color-grey-900,
+  "light": $color-grey-000,
+  "primary": $color-primary-01-600,
+);
+
+$animation-duration-loader: 2s;
+$loader-default-size: map-get($loader-sizes, "m");
+$loader-default-theme: map-get($loader-theme, "primary");
+
+@mixin set-loader-size($props, $parent) {
+  $height-spinner-loader: map-get($props, "height");
+  $width-spinner-loader: map-get($props, "width");
+  $stroke-width-loader: map-get($props, "stroke-width");
+
+  #{$parent} {
+    &__spinner {
+      height: $height-spinner-loader;
+      width: $width-spinner-loader;
+    }
+
+    &__path {
+      stroke-width: $stroke-width-loader;
+    }
+  }
+}
+
+@mixin set-loader-theme($color-loader, $parent) {
+  #{$parent}__path {
+    stroke: $color-loader;
+  }
+}
diff --git a/packages/styles/settings-tools/_s.modal.scss b/packages/styles/settings-tools/_s.modal.scss
@@ -9,25 +9,3 @@
   top: 0;
   z-index: 1999999999; // Position the dialog above the MOpinion element
 }
-
-@mixin set-dialog-overlay() {
-  background-color: mt-rgba($color-grey-900, 0.7);
-  bottom: 0;
-  cursor: pointer;
-  filter: blur(1px);
-  left: 0;
-  opacity: 0;
-  position: fixed;
-  pointer-events: none;
-  right: 0;
-  top: 0;
-  transition: opacity 0.4s ease, visibility 0ms 0.4s;
-  z-index: 1999999998;
-
-  &.is-visible {
-    opacity: 1;
-    pointer-events: all;
-    transition: opacity 0.4s ease, visibility 0ms;
-    visibility: visible;
-  }
-}
diff --git a/packages/styles/settings-tools/_s.overlay.scss b/packages/styles/settings-tools/_s.overlay.scss
@@ -0,0 +1,31 @@
+$z-index-page-overlay: 1999999998;
+
+$background-overlay-theme: (
+  "lm": $color-grey-900,
+  "adeo": $color-secondary-blue-100,
+);
+
+$background-color-overlay-loader: map-get($background-overlay-theme, $preset);
+
+/// The mixin set-page-overlay() defines the styles
+/// of an overlay element that apply to all the space on a page
+@mixin set-page-overlay($background-color: $color-grey-900, $blur: true) {
+  background-color: mt-rgba($background-color, 0.7);
+  cursor: pointer;
+  @if $blur {
+    filter: blur(1px);
+  }
+  inset: 0;
+  opacity: 0;
+  position: fixed;
+  pointer-events: none;
+  transition: opacity 0.4s ease, visibility 0ms 0.4s;
+  z-index: $z-index-page-overlay;
+
+  &.is-visible {
+    opacity: 1;
+    pointer-events: all;
+    transition: opacity 0.4s ease, visibility 0ms;
+    visibility: visible;
+  }
+}
diff --git a/src/docs/Components/Loader/code.mdx b/src/docs/Components/Loader/code.mdx
@@ -0,0 +1,71 @@
+---
+title: 'Code'
+order: 2
+---
+
+## Import
+
+```scss
+@import 'settings-tools/all-settings';
+@include import-font-families();
+@import 'components/c.loader';
+```
+
+## Usage
+
+The creation of a **Loader** component in your code is done using the following HTML structure:
+
+```html
+<div class="mc-loader">
+  <svg
+    class="mc-loader__icon"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 32 32"
+  >
+    <circle class="mc-loader__path" cx="50%" cy="50%" r="9" />
+  </svg>
+</div>
+```
+
+<Preview path="default" nude />
+
+## Variations
+
+### Available sizes
+
+You can use any of the three sizes available using the following modifiers:
+
+- **small** : `mc-loader--s`
+- **medium** : this is the default style so you don't need to add a modifier class
+- **large** : `mc-loader--l`
+
+<Preview path="sizes" />
+
+<Highlight theme="warning">
+  Depending on the size you use, please take care to update the attributes of
+  the SVG element in the loader. See below for more information.
+</Highlight>
+
+#### Update svg attributes
+
+Depending on the size, the attributes differ.
+
+There are two attributes that you should pay particular attention to: `viewBox` & `r`.
+
+The values of these attributes change according to the size used, as follows:
+
+| Size  | **viewBox** attribute | **r** attribute |
+| ----- | --------------------- | --------------- |
+| **s** | `viewBox="0 0 24 24"` | `r="6"`         |
+| **m** | `viewBox="0 0 32 32"` | `r="9"`         |
+| **l** | `viewBox="0 0 64 64"` | `r="19"`        |
+
+### Available themes
+
+Depending on your context, you can use one of these three available theme colours by using the following modifiers:
+
+- **dark** : `mc-loader--dark`
+- **light** : `mc-loader--light`
+- **primary** : this is the default color theme so you don't need to add a modifier class
+
+<Preview path="themes" />
diff --git a/src/docs/Components/Loader/index.mdx b/src/docs/Components/Loader/index.mdx
@@ -0,0 +1,21 @@
+---
+title: 'Loader'
+order: 1
+description: '(WIP)'
+status:
+  figma: 'ready'
+  scss: 'ready'
+---
+
+> Definition (WIP)
+
+<Preview path="default" nude />
+
+## Variations
+
+## do's and don't
+
+when and how should I use and not use the pattern
+
+<HintItem>Always...</HintItem>
+<HintItem dont="true">Never...</HintItem>
diff --git a/src/docs/Components/Loader/overlay.mdx b/src/docs/Components/Loader/overlay.mdx
@@ -0,0 +1,51 @@
+---
+title: 'Overlay loader'
+order: 3
+---
+
+## Import
+
+```scss
+@import 'settings-tools/all-settings';
+@include import-font-families();
+@import 'components/c.overlay';
+@import 'components/c.loader';
+```
+
+## Usage
+
+The creation of an **Overlay Loader** in your code is done using the following HTML structure:
+
+```html
+<div class="mc-overlay-loader" tabindex="-1" role="dialog">
+  <div class="mc-loader mc-loader--l mc-loader--light">
+    <span class="mc-loader__spinner">
+      <svg
+        class="mc-loader__icon"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 64 64"
+      >
+        <circle class="mc-loader__path" cx="50%" cy="50%" r="19" />
+      </svg>
+    </span>
+  </div>
+</div>
+```
+
+<Preview path="overlay" />
+
+## Variations
+
+### With loader text
+
+You have the possibility, if you wish, to insert a complementary text to the loader, in order to give more information to the user.
+
+<Preview path="overlay-text" />
+
+## Behaviour
+
+### On opening
+
+During the loading time, in order to make the **Overlay Loader** visible, you just have to apply the class `is-visible` on the `.mc-overlay-loader` element.
+
+<Preview path="opening" nude />