adding toast and tool tip updates.

mozilla · Jan 3, 2023 · d298dbe · d298dbe
1 parent 23c41f1
commit d298dbe
Show file tree

Hide file tree

Showing 32 changed files with 804 additions and 541 deletions.
diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html
@@ -1,10 +1,11 @@
-<link rel="preconnect" href="https://fonts.gstatic.com" />
+<link rel="preconnect" href="https://fonts.googleapis.com" />
 <link
-  href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&display=swap"
-  rel="stylesheet"
+  rel="preconnect"
+  href="https://fonts.gstatic.com"
+  crossOrigin="true"
 />
 <link
-  href="https://fonts.googleapis.com/css2?family=Inter:wght@500;600&family=Space+Grotesk:wght@700&display=swap"
+  href="https://fonts.googleapis.com/css2?family=Inter:wght@500;600;700&family=Space+Grotesk:wght@400;500;700&display=swap"
   rel="stylesheet"
 />
 

diff --git a/src/components/Avatar/Avatar.module.scss b/src/components/Avatar/Avatar.module.scss
@@ -1,4 +1,4 @@
-@use '../../styles/boilerplate.scss'as *;
+@use '../../styles/core/boilerplate.scss'as *;
 
 .avatar {
   position: relative;
@@ -16,4 +16,4 @@
     text-align: center;
     object-fit: cover;
   }
-}
+}
diff --git a/src/components/Badge/Badge.module.scss b/src/components/Badge/Badge.module.scss
@@ -1,14 +1,13 @@
-@use '../../styles/boilerplate.scss'as *;
+@use '../../styles/core/boilerplate.scss'as *;
 
 .badge {
-
   &_primary,
   &_secondary {
     @include primary-font(500);
     @include font-size(14);
     line-height: 18px;
     text-transform: capitalize;
-    letter-spacing: .5px;
+    letter-spacing: 0.5px;
     padding: 5px 12px;
     border-radius: 56px;
     height: 28px;
@@ -23,4 +22,4 @@
     background-color: $color-interaction-secondary;
     color: $color-text-subtle;
   }
-}
+}
diff --git a/src/components/Button/Button.module.scss b/src/components/Button/Button.module.scss
@@ -1,4 +1,4 @@
-@use '../../styles/boilerplate.scss'as *;
+@use '../../styles/core/boilerplate.scss'as *;
 
 @mixin rect_button_base() {
   @include primary-font(600);
@@ -29,7 +29,6 @@
         PRIMARY BUTTONS
 ******************************/
 
-
 /*-------------------------------
   SOLID BUTTON 
 -------------------------------*/
@@ -111,8 +110,6 @@
   }
 }
 
-
-
 /******************************
       SECONDARY BUTTONS
 ******************************/
@@ -198,7 +195,6 @@
   }
 }
 
-
 /*-------------------------------
   SIZES
 -------------------------------*/
@@ -225,4 +221,4 @@
   &_round {
     padding: 12px;
   }
-}
+}
diff --git a/src/components/Checkbox/Checkbox.module.scss b/src/components/Checkbox/Checkbox.module.scss
@@ -1,4 +1,4 @@
-@use '../../styles/boilerplate.scss'as *;
+@use '../../styles/core/boilerplate.scss'as *;
 
 .container {
   @include prefix(user-select, none, webkit ms moz);

diff --git a/src/components/CopyButton/CopyButton.module.scss b/src/components/CopyButton/CopyButton.module.scss
@@ -1,9 +1,9 @@
-@use '../../styles/boilerplate.scss'as *;
+@use '../../styles/core/boilerplate.scss'as *;
 
 .success {
   @include primary-font(500);
   @include font-size(16);
   line-height: 24px;
   color: $color-text-subtle;
   padding: 8px;
-}
+}
diff --git a/src/components/Dropdown/Dropdown.module.scss b/src/components/Dropdown/Dropdown.module.scss
@@ -1,4 +1,4 @@
-@use '../../styles/boilerplate.scss'as *;
+@use '../../styles/core/boilerplate.scss'as *;
 
 .dropdown_wrapper {
   position: relative;

diff --git a/src/components/Input/Input.module.scss b/src/components/Input/Input.module.scss
@@ -1,4 +1,4 @@
-@use '../../styles/boilerplate.scss'as *;
+@use '../../styles/core/boilerplate.scss'as *;
 
 .input {
   &_wrapper {

diff --git a/src/components/ProgressBar/ProgressBar.module.scss b/src/components/ProgressBar/ProgressBar.module.scss
@@ -1,4 +1,4 @@
-@use '../../styles/boilerplate.scss'as *;
+@use '../../styles/core/boilerplate.scss'as *;
 
 .wrapper {
   width: 100%;

diff --git a/src/components/RadioButton/RadioButton.module.scss b/src/components/RadioButton/RadioButton.module.scss
@@ -1,4 +1,4 @@
-@use '../../styles/boilerplate.scss'as *;
+@use '../../styles/core/boilerplate.scss'as *;
 @use '../../styles/tools/functions.scss'as *;
 
 .button {
@@ -7,7 +7,7 @@
     display: flex;
     align-items: center;
 
-    input[type="radio"] {
+    input[type='radio'] {
       @include prefix(appearance, none, webkit ms moz);
       background-color: $color-interaction-primary-alt;
       margin: 0;
@@ -22,13 +22,12 @@
       place-content: center;
     }
 
-
-    input[type="radio"]:hover {
+    input[type='radio']:hover {
       background-color: $color-interaction-primary-alt-hover;
     }
 
-    input[type="radio"]::before {
-      content: "";
+    input[type='radio']::before {
+      content: '';
       width: 14px;
       height: 14px;
       border-radius: 50%;
@@ -39,11 +38,11 @@
       background-color: $color-interaction-primary-alt;
     }
 
-    input[type="radio"]:checked::before {
+    input[type='radio']:checked::before {
       transform: scale(1);
     }
 
-    input[type="radio"]:focus::before {
+    input[type='radio']:focus::before {
       box-shadow: inset 1em 1em $color-interaction-primary-hover;
     }
 
@@ -54,4 +53,4 @@
       margin-left: 16px;
     }
   }
-}
+}
diff --git a/src/components/Select/Select.module.scss b/src/components/Select/Select.module.scss
@@ -1,4 +1,4 @@
-@use '../../styles/boilerplate.scss'as *;
+@use '../../styles/core/boilerplate.scss'as *;
 
 .select {
   &_wrapper {

diff --git a/src/components/Switch/Switch.module.scss b/src/components/Switch/Switch.module.scss
@@ -1,4 +1,4 @@
-@use '../../styles/boilerplate.scss'as *;
+@use '../../styles/core/boilerplate.scss'as *;
 
 .wrapper {
   display: flex;

diff --git a/src/components/TextArea/TextArea.module.scss b/src/components/TextArea/TextArea.module.scss
@@ -1,4 +1,4 @@
-@use '../../styles/boilerplate.scss'as *;
+@use '../../styles/core/boilerplate.scss'as *;
 
 .text_area {
   &_wrapper {

diff --git a/src/components/Toast/Toast.module.scss b/src/components/Toast/Toast.module.scss
@@ -1,4 +1,4 @@
-@use '../../styles/boilerplate.scss'as *;
+@use '../../styles/core/boilerplate.scss'as *;
 
 .top_right {
   position: fixed;

diff --git a/src/components/Toast/ToastMessage.module.scss b/src/components/Toast/ToastMessage.module.scss
@@ -1,4 +1,4 @@
-@use '../../styles/boilerplate.scss'as *;
+@use '../../styles/core/boilerplate.scss'as *;
 
 .wrapper {
   position: absolute;
@@ -22,13 +22,13 @@
   }
 
   &.success {
-    background-color: green;
+    background-color: $color-semantic-success;
   }
   &.error {
-    background-color: red;
+    background-color: $color-semantic-critical;
   }
   &.warn {
-    background-color: #ef6500;
+    background-color: $color-semantic-warning;
   }
   &.plain {
     color: $color-text-main;
@@ -76,5 +76,5 @@
 }
 
 .title {
-  @include h3;
+  @include heading-sm();
 }
diff --git a/src/components/Toast/ToastMessage.tsx b/src/components/Toast/ToastMessage.tsx
@@ -43,6 +43,9 @@ const ToastMessage = ({
   const progressBar = useRef<HTMLDivElement>(null);
   const timeVisible = useRef<number>(0);
 
+  /**
+   * Init Component
+   */
   useEffect(() => {
     setIsVisible(true);
     setIsOpen(true);
@@ -52,6 +55,10 @@ const ToastMessage = ({
     initInterval(timeVisible.current);
   }, []);
 
+  /**
+   * Init intercal for countdown
+   * @param time number
+   */
   const initInterval = (time: number) => {
     const interval = window.setInterval(() => {
       const increment = 10;
@@ -71,28 +78,52 @@ const ToastMessage = ({
     setIntervalId(interval);
   };
 
+  /**
+   * Animate progress bar
+   * @param time
+   * @param duration
+   */
   const animateProgress = (time: number, duration: number) => {
     progressBar.current?.style.setProperty(
       '--progress',
       String(1 - time / duration)
     );
   };
 
+  /**
+   * Mouse Enter
+   */
   const handleMouseEnter = () => {
-    if (!pauseOnHover) return;
+    if (!pauseOnHover || !autoClose) return;
     clearInterval(intervalId);
   };
 
+  /**
+   * Mouse Leave
+   */
   const handleMouseLeave = () => {
-    if (!pauseOnHover) return;
+    if (!pauseOnHover || !autoClose) return;
     initInterval(timeVisible.current);
   };
 
+  /**
+   * On Close
+   */
   const handleClose = useCallback(() => {
     setIsOpen(false);
     clearInterval(intervalId);
   }, []);
 
+  /**
+   * Handle CTA action click
+   */
+  const handleAction = useCallback(() => {
+    typeof callback === 'function' && callback();
+  }, []);
+
+  /**
+   * On fade out complete
+   */
   const handleOnComplete = useCallback(() => {
     if (!isOpen) {
       setIsVisible(false);
@@ -101,10 +132,9 @@ const ToastMessage = ({
     }
   }, [isOpen]);
 
-  const handleAction = useCallback(() => {
-    typeof callback === 'function' && callback();
-  }, []);
-
+  /**
+   * Get button category
+   */
   const ButtonCategory = (): ButtonCategoriesE => {
     let category = ButtonCategoriesE.SECONDARY_CLEAR;
     if (type === ToastTypesE.PLAIN) {
@@ -130,7 +160,7 @@ const ToastMessage = ({
             category={ButtonCategory()}
           />
           <div className={styles.header}>
-            {icon && <Icon name={icon} size={18} />}
+            {icon && <Icon name={icon} size={20} />}
             <div className={styles.title}>{title}</div>
           </div>
           <p>{description}</p>