Range slider

.gitignore

@@ -1,2 +1,5 @@
 dist
-node_modules
+node_modules
+
+# VS code local settings
+/.vscode

.npmrc

@@ -0,0 +1 @@
+legacy-peer-deps=true

.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"
 />
 

package.json

@@ -28,14 +28,14 @@
     "@rollup/plugin-commonjs": "^22.0.1",
     "@rollup/plugin-node-resolve": "^13.3.0",
     "@rollup/plugin-typescript": "^8.3.3",
-    "@storybook/addon-actions": "^6.5.9",
-    "@storybook/addon-essentials": "^6.5.9",
-    "@storybook/addon-interactions": "^6.5.9",
-    "@storybook/addon-links": "^6.5.9",
-    "@storybook/builder-webpack5": "^6.5.9",
-    "@storybook/manager-webpack5": "^6.5.9",
-    "@storybook/react": "^6.5.9",
-    "@storybook/storybook-deployer": "^2.8.12",
+    "@storybook/addon-actions": "^6.5.15",
+    "@storybook/addon-essentials": "^6.5.15",
+    "@storybook/addon-interactions": "^6.5.15",
+    "@storybook/addon-links": "^6.5.15",
+    "@storybook/builder-webpack5": "^6.5.15",
+    "@storybook/manager-webpack5": "^6.5.15",
+    "@storybook/react": "^6.5.15",
+    "@storybook/storybook-deployer": "^2.8.16",
     "@storybook/testing-library": "^0.0.13",
     "@types/react": "^18.0.15",
     "babel-loader": "^8.2.5",

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;
   }
-}
+}

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;
   }
-}
+}

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;
   }
-}
+}

src/components/Button/Button.tsx

@@ -63,8 +63,8 @@ const Button = ({
         <Icon
           name={icon}
           color="currentColor"
-          size={24}
-          classProp={text ? 'margin-right-10' : ''}
+          size={22}
+          classProp={text ? 'mr-10' : ''}
         />
       ) : (
         ''
@@ -76,8 +76,8 @@ const Button = ({
         <Icon
           name={icon}
           color="currentColor"
-          size={24}
-          classProp={text ? 'margin-left-10' : ''}
+          size={22}
+          classProp={text ? 'ml-10' : ''}
         />
       ) : (
         ''

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);
@@ -7,6 +7,10 @@
   align-items: center;
   position: relative;
   cursor: pointer;
+  &,
+  & * {
+    box-sizing: border-box;
+  }
 
   /* Hide the browser's default checkbox */
   input {
@@ -65,8 +69,8 @@
     content: '';
     position: absolute;
     display: none;
-    left: 8px;
-    top: 3px;
+    left: 6px;
+    top: 1px;
     width: 5px;
     height: 11px;
     border: solid $color-text-reverse;

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;
-}
+}

src/components/Crumb/Crumb.module.scss

@@ -0,0 +1,25 @@
+@use '../../styles/core/boilerplate.scss'as *;
+
+.top_right {
+  position: fixed;
+  top: 5px;
+  right: 5px;
+}
+
+.top_left {
+  position: fixed;
+  top: 5px;
+  left: 5px;
+}
+
+.bottom_right {
+  position: fixed;
+  bottom: 5px;
+  right: 5px;
+}
+
+.bottom_left {
+  position: fixed;
+  bottom: 5px;
+  left: 5px;
+}

src/components/Crumb/Crumb.tsx

@@ -0,0 +1,174 @@
+import React, { useState, forwardRef, useImperativeHandle } from 'react';
+import styles from './Crumb.module.scss';
+import CrumbMessage from './CrumbMessage';
+import { IconT } from '../Icon';
+
+export type CrumbPropsT = {
+  classProp?: string;
+};
+
+export type CrumbInterfaceT = {
+  dispatchCrumb: Function;
+};
+
+export enum CrumbTypesE {
+  NEUTRAL = 'neutral',
+  SUCCESS = 'success',
+  ERROR = 'error',
+  INFO = 'info',
+  WARNING = 'warning',
+}
+
+export enum CrumbLocationE {
+  TOP_RIGHT = 'top_right',
+  TOP_LEFT = 'top_left',
+  BOTTOM_RIGHT = 'bottom_right',
+  BOTTOM_LEFT = 'bottom_left',
+}
+
+export type NewCrumbT = {
+  description: string;
+  duration?: number;
+  autoClose?: boolean;
+  type?: CrumbTypesE;
+  location?: CrumbLocationE;
+  pauseOnHover?: boolean;
+  hasIcon?: boolean;
+  icon?: IconT;
+};
+
+export interface CrumbI extends NewCrumbT {
+  id: string;
+}
+
+const Crumb = forwardRef(({ classProp = '' }: CrumbPropsT, ref) => {
+  const [topRightCrumbs, setTopRightCrumbs] = useState<CrumbI[]>([]);
+  const [topLeftCrumbs, setTopLeftCrumbs] = useState<CrumbI[]>([]);
+  const [bottomRightCrumbs, setBottomRightCrumbs] = useState<CrumbI[]>([]);
+  const [bottomLeftCrumbs, setBottomLeftCrumbs] = useState<CrumbI[]>([]);
+  /**
+   * Exposed Component API
+   */
+  useImperativeHandle(ref, (): CrumbInterfaceT => {
+    return {
+      dispatchCrumb: dispatchCrumb,
+    };
+  });
+
+  /**
+   * Dispatch Crumb
+   * @param newCrumb
+   */
+  const dispatchCrumb = (newCrumb: NewCrumbT) => {
+    // Give Crumb an ID
+    const crumb = {
+      ...newCrumb,
+      id: String(Date.now()),
+    };
+
+    switch (crumb.location) {
+      case CrumbLocationE.TOP_RIGHT:
+        setTopRightCrumbs((crumbs) => [crumb, ...crumbs]);
+        break;
+
+      case CrumbLocationE.TOP_LEFT:
+        setTopLeftCrumbs((crumbs) => [crumb, ...crumbs]);
+        break;
+
+      case CrumbLocationE.BOTTOM_RIGHT:
+        setBottomRightCrumbs((crumbs) => [crumb, ...crumbs]);
+        break;
+
+      case CrumbLocationE.BOTTOM_LEFT:
+        setBottomLeftCrumbs((crumbs) => [crumb, ...crumbs]);
+        break;
+
+      default:
+        setTopRightCrumbs((crumbs) => [crumb, ...crumbs]);
+        break;
+    }
+  };
+
+  /**
+   * Filter Out Crumb
+   * @param crumbs
+   * @param id
+   * @returns  CrumbI[]
+   */
+  const filterCrumbs = (crumbs: CrumbI[], id: string) =>
+    crumbs.filter((crumb) => crumb.id != id);
+
+  /**
+   * Remove Crumb form state
+   * @param id
+   * @param location
+   */
+  const selfDestruct = (id: string, location: CrumbLocationE) => {
+    switch (location) {
+      case CrumbLocationE.TOP_RIGHT:
+        setTopRightCrumbs((state) => filterCrumbs(state, id));
+        break;
+
+      case CrumbLocationE.TOP_LEFT:
+        setTopLeftCrumbs((state) => filterCrumbs(state, id));
+        break;
+
+      case CrumbLocationE.BOTTOM_RIGHT:
+        setBottomRightCrumbs((state) => filterCrumbs(state, id));
+        break;
+
+      case CrumbLocationE.BOTTOM_LEFT:
+        setBottomLeftCrumbs((state) => filterCrumbs(state, id));
+        break;
+
+      // Default to Top Right
+      default:
+        setTopRightCrumbs((state) => filterCrumbs(state, id));
+        break;
+    }
+  };
+
+  /**
+   * Get Crumb JSX
+   * @param crumb
+   * @returns JSX
+   */
+  const renderCrumb = (crumb: CrumbI) => {
+    return (
+      <CrumbMessage selfDestruct={selfDestruct} key={crumb.id} {...crumb} />
+    );
+  };
+
+  return (
+    <div id="lily_crumb" className={classProp}>
+      {/* TOP RIGHT  */}
+      {Boolean(topRightCrumbs.length) && (
+        <div className={styles.top_right}>
+          {topRightCrumbs.map(renderCrumb)}
+        </div>
+      )}
+
+      {/* TOP LEFT  */}
+      {Boolean(topLeftCrumbs.length) && (
+        <div className={styles.top_left}>{topLeftCrumbs.map(renderCrumb)}</div>
+      )}
+
+      {/* BOTTOM RIGHT  */}
+      {Boolean(bottomRightCrumbs.length) && (
+        <div className={styles.bottom_right}>
+          {bottomRightCrumbs.map(renderCrumb)}
+        </div>
+      )}
+
+      {/* BOTTOM LEFT  */}
+      {Boolean(bottomLeftCrumbs.length) && (
+        <div className={styles.bottom_left}>
+          {bottomLeftCrumbs.map(renderCrumb)}
+        </div>
+      )}
+    </div>
+  );
+});
+
+Crumb.displayName = 'Crumb';
+export default Crumb;