fix(badge): fix alphabetical order + add color examples in doc

ovh · Jul 29, 2024 · c10fca5 · c10fca5
1 parent defebb4
commit c10fca5
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 37 deletions.
diff --git a/packages/ods/src/components/badge/src/components/ods-badge/ods-badge.scss b/packages/ods/src/components/badge/src/components/ods-badge/ods-badge.scss
@@ -11,32 +11,24 @@
 
     @include badge.ods-badge();
 
-    &--neutral {
-      @include badge.ods-badge-color('neutral');
-    }
-
-    &--information {
-      @include badge.ods-badge-color('information');
-    }
-
-    &--success {
-      @include badge.ods-badge-color('success');
+    &--alpha {
+      @include badge.ods-badge-color('alpha');
     }
 
-    &--warning {
-      @include badge.ods-badge-color('warning');
+    &--beta {
+      @include badge.ods-badge-color('beta');
     }
 
     &--critical {
       @include badge.ods-badge-color('critical');
     }
 
-    &--alpha {
-      @include badge.ods-badge-color('alpha');
+    &--information {
+      @include badge.ods-badge-color('information');
     }
 
-    &--beta {
-      @include badge.ods-badge-color('beta');
+    &--neutral {
+      @include badge.ods-badge-color('neutral');
     }
 
     &--new {
@@ -47,6 +39,14 @@
       @include badge.ods-badge-color('promotion');
     }
 
+    &--success {
+      @include badge.ods-badge-color('success');
+    }
+
+    &--warning {
+      @include badge.ods-badge-color('warning');
+    }
+
     &--round {
       @include badge.ods-badge-shape('round');
     }

diff --git a/packages/ods/src/components/badge/src/constants/badge-color.ts b/packages/ods/src/components/badge/src/constants/badge-color.ts
@@ -1,13 +1,13 @@
 enum ODS_BADGE_COLOR {
-  neutral = 'neutral',
-  information = 'information',
-  success = 'success',
-  warning = 'warning',
-  critical = 'critical',
   alpha = 'alpha',
   beta = 'beta',
+  critical = 'critical',
+  information = 'information',
+  neutral = 'neutral',
   new = 'new',
   promotion = 'promotion',
+  success = 'success',
+  warning = 'warning',
 }
 
 type OdsBadgeColor =`${ODS_BADGE_COLOR}`;

diff --git a/packages/ods/src/style/_badge.scss b/packages/ods/src/style/_badge.scss
@@ -12,33 +12,33 @@ $ods-badge-height-lg: 28px;
 }
 
 @mixin ods-badge-color($color) {
-  @if $color == 'neutral' {
-    background-color: var(--ods-color-neutral-100);
-    color: var(--ods-color-neutral-700);
-  } @else if $color == 'information' {
-    background-color: var(--ods-color-information-100);
-    color: var(--ods-color-information-900);
-  } @else if $color == 'success' {
-    background-color: var(--ods-color-success-100);
-    color: var(--ods-color-success-900);
-  } @else if $color == 'warning' {
-    background-color: var(--ods-color-warning-100);
-    color: var(--ods-color-warning-900);
-  } @else if $color == 'critical' {
-    background-color: var(--ods-color-critical-100);
-    color: var(--ods-color-critical-900);
-  } @else if $color == 'alpha' {
+  @if $color == 'alpha' {
     background-color: var(--ods-color-alpha);
     color: var(--ods-color-primary-900);
   } @else if $color == 'beta' {
     background-color: var(--ods-color-beta);
     color: var(--ods-color-primary-900);
+  } @else if $color == 'critical' {
+    background-color: var(--ods-color-critical-100);
+    color: var(--ods-color-critical-900);
+  } @else if $color == 'information' {
+    background-color: var(--ods-color-information-100);
+    color: var(--ods-color-information-900);
+  } @else if $color == 'neutral' {
+    background-color: var(--ods-color-neutral-100);
+    color: var(--ods-color-neutral-700);
   } @else if $color == 'new' {
     background-color: var(--ods-color-new);
     color: var(--ods-color-primary-900);
   } @else if $color == 'promotion' {
     background-color: var(--ods-color-promotion);
     color: var(--ods-color-neutral-000);
+  } @else if $color == 'success' {
+    background-color: var(--ods-color-success-100);
+    color: var(--ods-color-success-900);
+  } @else if $color == 'warning' {
+    background-color: var(--ods-color-warning-100);
+    color: var(--ods-color-warning-900);
   }
 }
 

diff --git a/packages/storybook/stories/components/badge/badge.stories.ts b/packages/storybook/stories/components/badge/badge.stories.ts
@@ -102,7 +102,13 @@ export const Default: StoryObj = {
 export const Color: StoryObj = {
   tags: ['isHidden'],
   render: () => html`
+<ods-badge color="${ODS_BADGE_COLOR.alpha}" label="Alpha"></ods-badge>
+<ods-badge color="${ODS_BADGE_COLOR.beta}" label="Beta"></ods-badge>
+<ods-badge color="${ODS_BADGE_COLOR.critical}" label="Critical"></ods-badge>
 <ods-badge color="${ODS_BADGE_COLOR.information}" label="Information"></ods-badge>
+<ods-badge color="${ODS_BADGE_COLOR.neutral}" label="Neutral"></ods-badge>
+<ods-badge color="${ODS_BADGE_COLOR.new}" label="New"></ods-badge>
+<ods-badge color="${ODS_BADGE_COLOR.promotion}" label="Promotion"></ods-badge>
 <ods-badge color="${ODS_BADGE_COLOR.success}" label="Success"></ods-badge>
 <ods-badge color="${ODS_BADGE_COLOR.warning}" label="Warning"></ods-badge>
   `,