feat(loader) - Add Loader component and remove Spinner component

.changeset/nine-gifts-learn.md

@@ -0,0 +1,10 @@
+---
+"@stackoverflow/stacks": minor
+"@stackoverflow/stacks-svelte": minor
+---
+
+Update Loader (formerly known as Spinner) component to SHINE designs
+
+BREAKING CHANGES:
+
+- Spinner component has been replace with the Loader component

MIGRATION_GUIDE.md

@@ -67,6 +67,9 @@
 - `s-input__xl` removed
 - **Nested inputs** html will require slight tweaking on consumers' side
 
+#### Loader
+- `Spinner` component replaced with new `Loader` component
+
 #### Menu
 
 The menu component has been updated to use new class names and structure. The following changes are breaking:

packages/stacks-classic/lib/components/spinner/spinner.a11y.test.ts → packages/stacks-classic/lib/components/loader/loader.a11y.test.ts

@@ -1,11 +1,11 @@
 import { runA11yTests } from "../../test/a11y-test-utils";
 import "../../index";
 
-describe("spinner", () => {
+describe("loading", () => {
     runA11yTests({
-        baseClass: "s-spinner",
+        baseClass: "s-loading",
         modifiers: {
-            primary: ["xs", "sm", "md", "lg"],
+            primary: ["sm", "lg"],
         },
         children: {
             default: `<div class="v-visible-sr">Loading…</div>`,

packages/stacks-classic/lib/components/loader/loader.less

@@ -0,0 +1,82 @@
+.s-loader--block {
+    // BASE COMPONENT-SPECIFIC CUSTOM PROPERTIES
+    --_ld-size: var(--su-static24);
+    --_ld-block-size: calc(var(--su-static4) + var(--su-static1));
+    --_ld-bg: var(--black-600);
+    --_ld-secondary-bg: var(--black-200);
+    --_ld-block-shadow-gap: calc((var(--su-static1) + var(--su-static4)) / 2);
+
+    // MODIFIERS
+    &&__sm {
+        --_ld-size: var(--su-static16);
+        --_ld-block-size: calc((var(--su-static6) + var(--su-static1)) / 2);
+        --_ld-block-shadow-gap: calc((var(--su-static6) + var(--su-static1)) / 4);
+    }
+    &&__lg {
+        --_ld-size: var(--su-static48);
+        --_ld-block-size: var(--su-static8);
+    }
+
+    // CHILD ELEMENTS
+    &:before {
+        animation: loader-block-animation 1.5s cubic-bezier(1, 1, 0, 1) infinite;
+        background-color: var(--_ld-secondary-bg);
+        box-shadow: calc(-1 * var(--_ld-block-size) - var(--_ld-block-shadow-gap)) 0 0 0 var(--_ld-secondary-bg),
+                    calc(var(--_ld-block-size) + var(--_ld-block-shadow-gap)) 0 0 0 var(--_ld-secondary-bg);
+        content: "";
+        display: block;
+        height: var(--_ld-block-size);
+        left: 50%;
+        position: absolute;
+        top: 50%;
+        transform: translate(-50%, -50%);
+        width: var(--_ld-block-size);
+    }
+
+    height: var(--_ld-size);
+    position: relative;
+    width: var(--_ld-size);
+}
+
+@keyframes loader-block-animation {
+    0% {
+        background-color: var(--_ld-secondary-bg);
+        box-shadow: calc(-1 * var(--_ld-block-size) - var(--_ld-block-shadow-gap)) 0 0 0 var(--_ld-secondary-bg),
+                    calc(var(--_ld-block-size) + var(--_ld-block-shadow-gap)) 0 0 0 var(--_ld-secondary-bg);
+        transform: translate(-50%, -50%);
+    }
+    16.667% {
+        box-shadow: calc(-1 * var(--_ld-block-size) - var(--_ld-block-shadow-gap)) -5px 0 0 var(--_ld-bg),
+                    calc(var(--_ld-block-size) + var(--_ld-block-shadow-gap)) 0 0 0 var(--_ld-secondary-bg);
+        transform: translate(-50%, -50%);
+    }
+    33.333% {
+        background-color: var(--_ld-secondary-bg);
+        box-shadow: calc(-1 * var(--_ld-block-size) - var(--_ld-block-shadow-gap)) 0 0 0 var(--_ld-secondary-bg),
+                    calc(var(--_ld-block-size) + var(--_ld-block-shadow-gap)) 0 0 0 var(--_ld-secondary-bg);
+        transform: translate(-50%, -50%);
+    }
+    50% {
+        background-color: var(--_ld-bg);
+        box-shadow: calc(-1 * var(--_ld-block-size) - var(--_ld-block-shadow-gap)) 5px 0 0 var(--_ld-secondary-bg),
+                    calc(var(--_ld-block-size) + var(--_ld-block-shadow-gap)) 5px 0 0 var(--_ld-secondary-bg);
+        transform: translate(-50%, calc(-50% - 5px));
+    }
+    66.667% {
+        background-color: var(--_ld-secondary-bg);
+        box-shadow: calc(-1 * var(--_ld-block-size) - var(--_ld-block-shadow-gap)) 0 0 0 var(--_ld-secondary-bg),
+                    calc(var(--_ld-block-size) + var(--_ld-block-shadow-gap)) 0 0 0 var(--_ld-secondary-bg);
+        transform: translate(-50%, -50%);
+    }
+    83.333% {
+        box-shadow: calc(-1 * var(--_ld-block-size) - var(--_ld-block-shadow-gap)) 0 0 0 var(--_ld-secondary-bg),
+                    calc(var(--_ld-block-size) + var(--_ld-block-shadow-gap)) -5px 0 0 var(--_ld-bg);
+        transform: translate(-50%, -50%);
+    }
+    100% {
+        background-color: var(--_ld-secondary-bg);
+        box-shadow: calc(-1 * var(--_ld-block-size) - var(--_ld-block-shadow-gap)) 0 0 0 var(--_ld-secondary-bg),
+                    calc(var(--_ld-block-size) + var(--_ld-block-shadow-gap)) 0 0 0 var(--_ld-secondary-bg);
+        transform: translate(-50%, -50%);
+    }
+}

packages/stacks-classic/lib/components/spinner/spinner.visual.test.ts → packages/stacks-classic/lib/components/loader/loader.visual.test.ts

@@ -6,12 +6,12 @@ import "../../index";
 const template = ({ component, testid }: any) => html`
     <div class="d-inline-block p8" data-testid="${testid}">${component}</div>
 `;
-describe("spinner", () => {
+describe("loading", () => {
     // default, sizes
     runVisualTests({
-        baseClass: "s-spinner",
+        baseClass: "s-loading",
         modifiers: {
-            primary: ["xs", "sm", "md", "lg"],
+            primary: ["sm", "lg"],
         },
         children: {
             default: `<div class="v-visible-sr">Loading…</div>`,
@@ -20,7 +20,7 @@ describe("spinner", () => {
     });
     // applied font color
     runVisualTests({
-        baseClass: "s-spinner",
+        baseClass: "s-loading",
         modifiers: {
             global: ["fc-theme-primary"],
         },

packages/stacks-classic/lib/stacks-static.less

@@ -42,7 +42,7 @@
 @import "components/prose/prose.less";
 @import "components/select/select.less";
 @import "components/sidebar-widget/sidebar-widget.less";
-@import "components/spinner/spinner.less";
+@import "components/loader/loader.less";
 @import "components/table/table.less";
 @import "components/table-container/table-container.less";
 @import "components/tag/tag.less";

packages/stacks-docs/_data/loader.json

@@ -0,0 +1,19 @@
+{
+  "loader": [
+    {
+      "class": ".s-loader--block",
+      "applies": "N/A",
+      "description": "Base block loading style that displays three animated squares"
+    },
+    {
+      "class": ".s-loader--block__sm",
+      "applies": ".s-loader--block",
+      "description": "A small style for compact layouts"
+    },
+    {
+      "class": ".s-loader--block__lg",
+      "applies": ".s-loader--block",
+      "description": "A large style for the largest layouts"
+    }
+  ]
+}

packages/stacks-docs/_data/site-navigation.json

@@ -286,6 +286,10 @@
               "title": "Link previews",
               "url": "/product/components/link-previews/"
             },
+            {
+              "title": "Loader",
+              "url": "/product/components/loader/"
+            },
             {
               "title": "Menus",
               "url": "/product/components/menus/",
@@ -336,10 +340,6 @@
               "title": "Sidebar widgets",
               "url": "/product/components/sidebar-widgets/"
             },
-            {
-              "title": "Spinner",
-              "url": "/product/components/spinner/"
-            },
             {
               "title": "Tables",
               "url": "/product/components/tables/"