From d16f13db2d9df58fe3e03cf2e994b2dfdbfc88cd Mon Sep 17 00:00:00 2001 From: Davide Mininni Date: Wed, 27 Sep 2023 18:46:08 +0200 Subject: [PATCH] feat: add color prop --- src/components.d.ts | 8 ++ .../sbb-loading-indicator/readme.md | 11 ++- .../sbb-loading-indicator.custom.d.ts | 1 + .../sbb-loading-indicator.spec.ts | 92 ++++++++++++++++++- .../sbb-loading-indicator.tsx | 4 + 5 files changed, 109 insertions(+), 7 deletions(-) diff --git a/src/components.d.ts b/src/components.d.ts index 6a88e9880b1..34f040f6639 100644 --- 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 index 3b7275bcb99..e7a5abbe519 100644 --- 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 index 5adaf25ad10..f31546fa76a 100644 --- 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 index 81805599103..9cfc6f64aab 100644 --- 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(` - + + + + + + + + + + + + + + + + + + `); + }); + + it('renders with variant `window` and color smoke', async () => { + const { root } = await newSpecPage({ + components: [SbbLoadingIndicator], + html: '', + }); + + expect(root).toEqualHtml(` + + + + + + + + + + + + + + + + + + `); + }); + + it('renders with variant `window` and color white', async () => { + const { root } = await newSpecPage({ + components: [SbbLoadingIndicator], + html: '', + }); + + expect(root).toEqualHtml(` + @@ -36,7 +90,41 @@ describe('sbb-loading-indicator', () => { }); expect(root).toEqualHtml(` - + + + + + + + + `); + }); + + it('renders with variant `circle` and color smoke', async () => { + const { root } = await newSpecPage({ + components: [SbbLoadingIndicator], + html: '', + }); + + expect(root).toEqualHtml(` + + + + + + + + `); + }); + + it('renders with variant `circle` and color white', async () => { + const { root } = await newSpecPage({ + components: [SbbLoadingIndicator], + html: '', + }); + + expect(root).toEqualHtml(` + diff --git a/src/components/sbb-loading-indicator/sbb-loading-indicator.tsx b/src/components/sbb-loading-indicator/sbb-loading-indicator.tsx index da1b65397d8..66bf8daef8e 100644 --- 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;