Renamed Tag colors

digdir · Oct 5, 2023 · 3a15b2c · 3a15b2c
1 parent 049a7d8
commit 3a15b2c
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 13 deletions.
diff --git a/packages/react/src/components/Tag/Tag.module.css b/packages/react/src/components/Tag/Tag.module.css
@@ -64,19 +64,19 @@
   --fdsc-tag-text: var(--fds-semantic-text-danger-on_danger_subtle);
 }
 
-.outlined.primary {
+.outlined.first {
   --fdsc-tag-border: var(--fds-semantic-surface-first-dark);
   --fdsc-tag-background: var(--fds-semantic-surface-first-light);
   --fdsc-tag-text: var(--fds-semantic-text-neutral-default);
 }
 
-.outlined.secondary {
+.outlined.second {
   --fdsc-tag-border: var(--fds-semantic-surface-second-dark);
   --fdsc-tag-background: var(--fds-semantic-surface-second-light);
   --fdsc-tag-text: var(--fds-semantic-text-neutral-default);
 }
 
-.outlined.tertiary {
+.outlined.third {
   --fdsc-tag-border: var(--fds-semantic-surface-third-dark);
   --fdsc-tag-background: var(--fds-semantic-surface-third-light);
   --fdsc-tag-text: var(--fds-semantic-text-neutral-default);
@@ -112,19 +112,19 @@
   --fdsc-tag-text: var(--fds-semantic-text-danger-on_danger);
 }
 
-.filled.primary {
+.filled.first {
   --fdsc-tag-border: var(--fds-semantic-surface-first-dark);
   --fdsc-tag-background: var(--fds-semantic-surface-first-dark);
   --fdsc-tag-text: var(--fds-semantic-text-neutral-on_inverted);
 }
 
-.filled.secondary {
+.filled.second {
   --fdsc-tag-border: var(--fds-semantic-surface-second-dark);
   --fdsc-tag-background: var(--fds-semantic-surface-second-dark);
   --fdsc-tag-text: var(--fds-semantic-text-neutral-on_inverted);
 }
 
-.filled.tertiary {
+.filled.third {
   --fdsc-tag-border: var(--fds-semantic-surface-third-dark);
   --fdsc-tag-background: var(--fds-semantic-surface-third-dark);
   --fdsc-tag-text: var(--fds-semantic-text-neutral-on_inverted);

diff --git a/packages/react/src/components/Tag/Tag.stories.tsx b/packages/react/src/components/Tag/Tag.stories.tsx
@@ -69,9 +69,9 @@ const colors: TagProps['color'][] = [
   'warning',
   'danger',
   'info',
-  'primary',
-  'secondary',
-  'tertiary',
+  'first',
+  'second',
+  'third',
 ];
 
 export const Colors: StoryFn<typeof Tag> = ({ ...rest }): JSX.Element => {

diff --git a/packages/react/src/components/Tag/Tag.test.tsx b/packages/react/src/components/Tag/Tag.test.tsx
@@ -37,9 +37,9 @@ describe('Tag', () => {
       expect(screen.getByText('Beta')).toHaveClass('outlined');
     });
 
-    test('should render color primary', (): void => {
-      render(<Tag color='primary'>Beta</Tag>);
-      expect(screen.getByText('Beta')).toHaveClass('primary');
+    test('should render color first', (): void => {
+      render(<Tag color='first'>Beta</Tag>);
+      expect(screen.getByText('Beta')).toHaveClass('first');
     });
 
     test('should have custom className', () => {

diff --git a/packages/react/src/components/Tag/Tag.tsx b/packages/react/src/components/Tag/Tag.tsx
@@ -7,7 +7,7 @@ import { Paragraph } from '../Typography';
 
 import classes from './Tag.module.css';
 
-type BrandColor = 'primary' | 'secondary' | 'tertiary';
+type BrandColor = 'first' | 'second' | 'third';
 type VariantColor = 'neutral' | 'success' | 'warning' | 'danger' | 'info';
 type Size = Exclude<ParagraphProps['size'], 'large'>;