feat(spinner): add xs size

Signed-off-by: astagnol <[email protected]>
ovh · Oct 14, 2024 · 2c7e82e · 2c7e82e
1 parent c05238d
commit 2c7e82e
Show file tree

Hide file tree

Showing 6 changed files with 30 additions and 1 deletion.
diff --git a/packages/ods/src/components/spinner/src/components/ods-spinner/ods-spinner.scss b/packages/ods/src/components/spinner/src/components/ods-spinner/ods-spinner.scss
@@ -1,3 +1,4 @@
+$spinner-size-xs: 16px;
 $spinner-size-sm: 24px;
 $spinner-size-md: 48px;
 $spinner-size-lg: 80px;
@@ -10,6 +11,10 @@ $spinner-size-lg: 80px;
   &__container {
     height: 100%;
 
+    &--xs {
+      height: $spinner-size-xs;
+    }
+
     &--sm {
       height: $spinner-size-sm;
     }

diff --git a/packages/ods/src/components/spinner/src/constants/spinner-size.ts b/packages/ods/src/components/spinner/src/constants/spinner-size.ts
@@ -1,4 +1,5 @@
 enum ODS_SPINNER_SIZE {
+  xs = 'xs',
   sm = 'sm',
   md = 'md',
   lg = 'lg',

diff --git a/packages/ods/src/components/spinner/src/index.html b/packages/ods/src/components/spinner/src/index.html
@@ -32,6 +32,7 @@ <h3>In grid container</h3>
   <div>
     <h3>Sizes</h3>
 
+    <ods-spinner size="xs"></ods-spinner>
     <ods-spinner size="sm"></ods-spinner>
     <ods-spinner size="md"></ods-spinner>
     <ods-spinner size="lg"></ods-spinner>

diff --git a/packages/ods/src/components/spinner/tests/rendering/ods-spinner.e2e.ts b/packages/ods/src/components/spinner/tests/rendering/ods-spinner.e2e.ts
@@ -40,17 +40,22 @@ describe('ods-spinner rendering', () => {
   });
 
   describe('sizes', () => {
-    it('should respect increase order (sm < md < lg)', async() => {
+    it('should respect increase order (xs < sm < md < lg)', async() => {
       await setup(`
+        <ods-spinner size="${ODS_SPINNER_SIZE.xs}"></ods-spinner>
         <ods-spinner size="${ODS_SPINNER_SIZE.sm}"></ods-spinner>
         <ods-spinner size="${ODS_SPINNER_SIZE.md}"></ods-spinner>
         <ods-spinner size="${ODS_SPINNER_SIZE.lg}"></ods-spinner>
       `);
 
+      const xsSpinner = await page.find(`ods-spinner[size=${ODS_SPINNER_SIZE.xs}]`);
       const smSpinner = await page.find(`ods-spinner[size=${ODS_SPINNER_SIZE.sm}]`);
       const mdSpinner = await page.find(`ods-spinner[size=${ODS_SPINNER_SIZE.md}]`);
       const lgSpinner = await page.find(`ods-spinner[size=${ODS_SPINNER_SIZE.lg}]`);
 
+      const xsSpinnerStyle = await xsSpinner.getComputedStyle();
+      const xsSpinnerHeight = parseInt(xsSpinnerStyle.getPropertyValue('height'), 10);
+
       const smSpinnerStyle = await smSpinner.getComputedStyle();
       const smSpinnerHeight = parseInt(smSpinnerStyle.getPropertyValue('height'), 10);
 
@@ -60,10 +65,16 @@ describe('ods-spinner rendering', () => {
       const lgSpinnerStyle = await lgSpinner.getComputedStyle();
       const lgSpinnerHeight = parseInt(lgSpinnerStyle.getPropertyValue('height'), 10);
 
+      expect(xsSpinnerHeight).toBeLessThan(smSpinnerHeight);
+      expect(xsSpinnerHeight).toBeLessThan(mdSpinnerHeight);
+      expect(xsSpinnerHeight).toBeLessThan(lgSpinnerHeight);
       expect(smSpinnerHeight).toBeLessThan(mdSpinnerHeight);
       expect(smSpinnerHeight).toBeLessThan(lgSpinnerHeight);
+      expect(smSpinnerHeight).toBeGreaterThan(xsSpinnerHeight);
       expect(mdSpinnerHeight).toBeLessThan(lgSpinnerHeight);
+      expect(mdSpinnerHeight).toBeGreaterThan(xsSpinnerHeight);
       expect(mdSpinnerHeight).toBeGreaterThan(smSpinnerHeight);
+      expect(lgSpinnerHeight).toBeGreaterThan(xsSpinnerHeight);
       expect(lgSpinnerHeight).toBeGreaterThan(smSpinnerHeight);
       expect(lgSpinnerHeight).toBeGreaterThan(mdSpinnerHeight);
     });

diff --git a/packages/ods/src/components/spinner/tests/rendering/ods-spinner.spec.ts b/packages/ods/src/components/spinner/tests/rendering/ods-spinner.spec.ts
@@ -66,20 +66,30 @@ describe('ods-spinner rendering', () => {
       });
 
       it('should render with unique size class if set', async() => {
+        await setup(`<ods-spinner size="${ODS_SPINNER_SIZE.xs}"></ods-spinner>`);
+
+        expect(container?.classList.contains('ods-spinner__container--xs')).toBe(true);
+        expect(container?.classList.contains('ods-spinner__container--sm')).toBe(false);
+        expect(container?.classList.contains('ods-spinner__container--md')).toBe(false);
+        expect(container?.classList.contains('ods-spinner__container--lg')).toBe(false);
+
         await setup(`<ods-spinner size="${ODS_SPINNER_SIZE.sm}"></ods-spinner>`);
 
+        expect(container?.classList.contains('ods-spinner__container--xs')).toBe(false);
         expect(container?.classList.contains('ods-spinner__container--sm')).toBe(true);
         expect(container?.classList.contains('ods-spinner__container--md')).toBe(false);
         expect(container?.classList.contains('ods-spinner__container--lg')).toBe(false);
 
         await setup(`<ods-spinner size="${ODS_SPINNER_SIZE.md}"></ods-spinner>`);
 
+        expect(container?.classList.contains('ods-spinner__container--xs')).toBe(false);
         expect(container?.classList.contains('ods-spinner__container--sm')).toBe(false);
         expect(container?.classList.contains('ods-spinner__container--md')).toBe(true);
         expect(container?.classList.contains('ods-spinner__container--lg')).toBe(false);
 
         await setup(`<ods-spinner size="${ODS_SPINNER_SIZE.lg}"></ods-spinner>`);
 
+        expect(container?.classList.contains('ods-spinner__container--xs')).toBe(false);
         expect(container?.classList.contains('ods-spinner__container--sm')).toBe(false);
         expect(container?.classList.contains('ods-spinner__container--md')).toBe(false);
         expect(container?.classList.contains('ods-spinner__container--lg')).toBe(true);

diff --git a/packages/storybook/stories/components/spinner/spinner.stories.ts b/packages/storybook/stories/components/spinner/spinner.stories.ts
@@ -88,6 +88,7 @@ export const Color: StoryObj = {
 export const Size: StoryObj = {
   tags: ['isHidden'],
   render: () => html`
+<ods-spinner size="xs"></ods-spinner>
 <ods-spinner size="sm"></ods-spinner>
 <ods-spinner size="md"></ods-spinner>
 <ods-spinner size="lg"></ods-spinner>