feat: add color prop

sbb-design-systems · Sep 27, 2023 · d16f13d · d16f13d
1 parent 4c22e58
commit d16f13d
Show file tree

Hide file tree

Showing 5 changed files with 109 additions and 7 deletions.
diff --git a/src/components.d.ts b/src/components.d.ts
@@ -1024,6 +1024,10 @@ export namespace Components {
         "titleLevel"?: InterfaceTitleAttributes['level'];
     }
     interface SbbLoadingIndicator {
+        /**
+          * Color variant.
+         */
+        "color": InterfaceSbbLoadingIndicatorAttributes['color'];
         /**
           * Whether the animation is enabled.
          */
@@ -3810,6 +3814,10 @@ declare namespace LocalJSX {
         "titleLevel"?: InterfaceTitleAttributes['level'];
     }
     interface SbbLoadingIndicator {
+        /**
+          * Color variant.
+         */
+        "color"?: InterfaceSbbLoadingIndicatorAttributes['color'];
         /**
           * Whether the animation is enabled.
          */

diff --git a/src/components/sbb-loading-indicator/readme.md b/src/components/sbb-loading-indicator/readme.md
@@ -44,11 +44,12 @@ and then append the `sbb-loading-indicator` on it after giving it the correct `a
 
 ## Properties
 
-| Property           | Attribute           | Description                                                                                       | Type                   | Default     |
-| ------------------ | ------------------- | ------------------------------------------------------------------------------------------------- | ---------------------- | ----------- |
-| `disableAnimation` | `disable-animation` | Whether the animation is enabled.                                                                 | `boolean`              | `false`     |
-| `size`             | `size`              | Size variant, either s or m.                                                                      | `"l" \| "s"`           | `'s'`       |
-| `variant`          | `variant`           | Variant of the loading indicator; `circle` is meant to be used inline, while `window` as overlay. | `"circle" \| "window"` | `undefined` |
+| Property           | Attribute           | Description                                                                                       | Type                              | Default     |
+| ------------------ | ------------------- | ------------------------------------------------------------------------------------------------- | --------------------------------- | ----------- |
+| `color`            | `color`             | Color variant.                                                                                    | `"default" \| "smoke" \| "white"` | `'default'` |
+| `disableAnimation` | `disable-animation` | Whether the animation is enabled.                                                                 | `boolean`                         | `false`     |
+| `size`             | `size`              | Size variant, either s or m.                                                                      | `"l" \| "s"`                      | `'s'`       |
+| `variant`          | `variant`           | Variant of the loading indicator; `circle` is meant to be used inline, while `window` as overlay. | `"circle" \| "window"`            | `undefined` |
 
 
 ----------------------------------------------

diff --git a/src/components/sbb-loading-indicator/sbb-loading-indicator.custom.d.ts b/src/components/sbb-loading-indicator/sbb-loading-indicator.custom.d.ts
@@ -1,4 +1,5 @@
 export interface InterfaceSbbLoadingIndicatorAttributes {
   variant: 'window' | 'circle';
   size: 's' | 'l';
+  color: 'default' | 'smoke' | 'white';
 }
diff --git a/src/components/sbb-loading-indicator/sbb-loading-indicator.spec.ts b/src/components/sbb-loading-indicator/sbb-loading-indicator.spec.ts
@@ -9,7 +9,61 @@ describe('sbb-loading-indicator', () => {
     });
 
     expect(root).toEqualHtml(`
-      <sbb-loading-indicator variant="window" size="m" role="progressbar" aria-busy='true'>
+      <sbb-loading-indicator variant="window" size="m" color="default" role="progressbar" aria-busy='true'>
+        <mock:shadow-root>
+          <span class="sbb-loading-indicator">
+            <span class="sbb-loading-indicator__animated-element">
+              <span>
+                <span>
+                  <span></span>
+                  <span></span>
+                  <span></span>
+                  <span></span>
+                  <span></span>
+                </span>
+              </span>
+            </span>
+          </span>
+        </mock:shadow-root>
+      </sbb-loading-indicator>
+    `);
+  });
+
+  it('renders with variant `window` and color smoke', async () => {
+    const { root } = await newSpecPage({
+      components: [SbbLoadingIndicator],
+      html: '<sbb-loading-indicator variant="window" size="m" color="smoke"/>',
+    });
+
+    expect(root).toEqualHtml(`
+      <sbb-loading-indicator variant="window" size="m" color="smoke" role="progressbar" aria-busy='true'>
+        <mock:shadow-root>
+          <span class="sbb-loading-indicator">
+            <span class="sbb-loading-indicator__animated-element">
+              <span>
+                <span>
+                  <span></span>
+                  <span></span>
+                  <span></span>
+                  <span></span>
+                  <span></span>
+                </span>
+              </span>
+            </span>
+          </span>
+        </mock:shadow-root>
+      </sbb-loading-indicator>
+    `);
+  });
+
+  it('renders with variant `window` and color white', async () => {
+    const { root } = await newSpecPage({
+      components: [SbbLoadingIndicator],
+      html: '<sbb-loading-indicator variant="window" size="m" color="white"/>',
+    });
+
+    expect(root).toEqualHtml(`
+      <sbb-loading-indicator variant="window" size="m" color="white" role="progressbar" aria-busy='true'>
         <mock:shadow-root>
           <span class="sbb-loading-indicator">
             <span class="sbb-loading-indicator__animated-element">
@@ -36,7 +90,41 @@ describe('sbb-loading-indicator', () => {
     });
 
     expect(root).toEqualHtml(`
-      <sbb-loading-indicator variant="circle" size="s" role="progressbar" aria-busy="true">
+      <sbb-loading-indicator variant="circle" size="s" color="default" role="progressbar" aria-busy="true">
+        <mock:shadow-root>
+          <span class="sbb-loading-indicator">
+            <span class="sbb-loading-indicator__animated-element"></span>
+          </span>
+        </mock:shadow-root>
+      </sbb-loading-indicator>
+    `);
+  });
+
+  it('renders with variant `circle` and color smoke', async () => {
+    const { root } = await newSpecPage({
+      components: [SbbLoadingIndicator],
+      html: '<sbb-loading-indicator variant="circle" color="smoke"/>',
+    });
+
+    expect(root).toEqualHtml(`
+      <sbb-loading-indicator variant="circle" color="smoke" size="s" role="progressbar" aria-busy="true">
+        <mock:shadow-root>
+          <span class="sbb-loading-indicator">
+            <span class="sbb-loading-indicator__animated-element"></span>
+          </span>
+        </mock:shadow-root>
+      </sbb-loading-indicator>
+    `);
+  });
+
+  it('renders with variant `circle` and color white', async () => {
+    const { root } = await newSpecPage({
+      components: [SbbLoadingIndicator],
+      html: '<sbb-loading-indicator variant="circle" color="white"/>',
+    });
+
+    expect(root).toEqualHtml(`
+      <sbb-loading-indicator variant="circle" color="white" size="s" role="progressbar" aria-busy="true">
         <mock:shadow-root>
           <span class="sbb-loading-indicator">
             <span class="sbb-loading-indicator__animated-element"></span>

diff --git a/src/components/sbb-loading-indicator/sbb-loading-indicator.tsx b/src/components/sbb-loading-indicator/sbb-loading-indicator.tsx
@@ -13,6 +13,10 @@ export class SbbLoadingIndicator implements ComponentInterface {
   /** Size variant, either s or m. */
   @Prop({ reflect: true }) public size: InterfaceSbbLoadingIndicatorAttributes['size'] = 's';
 
+  /** Color variant. */
+  @Prop({ reflect: true }) public color: InterfaceSbbLoadingIndicatorAttributes['color'] =
+    'default';
+
   /** Whether the animation is enabled. */
   @Prop({ reflect: true }) public disableAnimation = false;