Feat(web-react): Introduce Plain Button #DS-1454

lmc-eu · Nov 19, 2024 · 4cb9ee3 · 4cb9ee3
1 parent fe416c6
commit 4cb9ee3
Show file tree

Hide file tree

Showing 9 changed files with 27 additions and 8 deletions.
diff --git a/packages/web-react/src/components/Button/README.md b/packages/web-react/src/components/Button/README.md
@@ -12,6 +12,7 @@ import { Button } from '@lmc-eu/spirit-web-react';
   <Button color="primary">Click me</Button>
   <Button color="secondary">Click me</Button>
   <Button color="tertiary">Click me</Button>
+  <Button color="plain">Click me</Button>
   <Button color="success">Click me</Button>
   <Button color="informative">Click me</Button>
   <Button color="warning">Click me</Button>

diff --git a/packages/web-react/src/components/Button/__tests__/Button.test.tsx b/packages/web-react/src/components/Button/__tests__/Button.test.tsx
@@ -3,7 +3,7 @@ import { render } from '@testing-library/react';
 import React from 'react';
 import { classNamePrefixProviderTest } from '../../../../tests/providerTests/classNamePrefixProviderTest';
 import {
-  actionColorPropsTest,
+  actionButtonColorPropsTest,
   emotionColorPropsTest,
   sizePropsTest,
 } from '../../../../tests/providerTests/dictionaryPropsTest';
@@ -15,7 +15,7 @@ import Button from '../Button';
 describe('Button', () => {
   classNamePrefixProviderTest(Button, 'Button');
 
-  actionColorPropsTest(Button, 'Button--');
+  actionButtonColorPropsTest(Button, 'Button--');
 
   emotionColorPropsTest(Button, 'Button--');
 

diff --git a/packages/web-react/src/components/Button/__tests__/useButtonStyleProps.test.ts b/packages/web-react/src/components/Button/__tests__/useButtonStyleProps.test.ts
@@ -8,6 +8,7 @@ describe('useButtonStyleProps', () => {
     ['primary', 'medium', false, false, false, false, 'Button Button--primary Button--medium'],
     ['secondary', 'medium', false, false, false, false, 'Button Button--secondary Button--medium'],
     ['tertiary', 'medium', false, false, false, false, 'Button Button--tertiary Button--medium'],
+    ['plain', 'medium', false, false, false, false, 'Button Button--plain Button--medium'],
     ['danger', 'medium', false, false, false, false, 'Button Button--danger Button--medium'],
     ['primary', 'medium', true, false, false, false, 'Button Button--primary Button--medium Button--block'],
     ['primary', 'medium', false, true, false, false, 'Button Button--primary Button--medium Button--disabled'],

diff --git a/packages/web-react/src/components/Button/stories/Button.stories.tsx b/packages/web-react/src/components/Button/stories/Button.stories.tsx
@@ -1,7 +1,7 @@
 import { Markdown } from '@storybook/blocks';
 import type { Meta, StoryObj } from '@storybook/react';
 import React from 'react';
-import { ActionColors, EmotionColors, Sizes } from '../../../constants';
+import { ActionButtonColors, EmotionColors, Sizes } from '../../../constants';
 import { Icon } from '../../Icon';
 import ReadMe from '../README.md';
 import { Button } from '..';
@@ -34,9 +34,9 @@ const meta: Meta<typeof Button> = {
     },
     color: {
       control: 'select',
-      options: [...Object.values(ActionColors), ...Object.values(EmotionColors)],
+      options: [...Object.values(ActionButtonColors), ...Object.values(EmotionColors)],
       table: {
-        defaultValue: { summary: ActionColors.PRIMARY },
+        defaultValue: { summary: ActionButtonColors.PRIMARY },
       },
     },
     isBlock: {
@@ -62,7 +62,7 @@ const meta: Meta<typeof Button> = {
   },
   args: {
     children: 'Click me',
-    color: ActionColors.PRIMARY,
+    color: ActionButtonColors.PRIMARY,
     isBlock: false,
     isDisabled: false,
     isLoading: false,

diff --git a/packages/web-react/src/components/ButtonLink/README.md b/packages/web-react/src/components/ButtonLink/README.md
@@ -10,6 +10,7 @@ import { ButtonLink } from '@lmc-eu/spirit-web-react';
   <ButtonLink color="primary">Click me</ButtonLink>
   <ButtonLink color="secondary">Click me</ButtonLink>
   <ButtonLink color="tertiary">Click me</ButtonLink>
+  <ButtonLink color="plain">Click me</ButtonLink>
   <ButtonLink color="success">Click me</ButtonLink>
   <ButtonLink color="informative">Click me</ButtonLink>
   <ButtonLink color="warning">Click me</ButtonLink>

diff --git a/packages/web-react/src/components/ButtonLink/__tests__/ButtonLink.test.tsx b/packages/web-react/src/components/ButtonLink/__tests__/ButtonLink.test.tsx
@@ -3,7 +3,7 @@ import { render } from '@testing-library/react';
 import React from 'react';
 import { classNamePrefixProviderTest } from '../../../../tests/providerTests/classNamePrefixProviderTest';
 import {
-  actionColorPropsTest,
+  actionButtonColorPropsTest,
   emotionColorPropsTest,
   sizePropsTest,
 } from '../../../../tests/providerTests/dictionaryPropsTest';
@@ -15,7 +15,7 @@ import ButtonLink from '../ButtonLink';
 describe('ButtonLink', () => {
   classNamePrefixProviderTest(ButtonLink, 'Button');
 
-  actionColorPropsTest(ButtonLink, 'Button--');
+  actionButtonColorPropsTest(ButtonLink, 'Button--');
 
   emotionColorPropsTest(ButtonLink, 'Button--');
 

diff --git a/packages/web-react/src/components/ButtonLink/__tests__/useButtonLinkStyleProps.test.ts b/packages/web-react/src/components/ButtonLink/__tests__/useButtonLinkStyleProps.test.ts
@@ -8,6 +8,7 @@ describe('useButtonStyleProps', () => {
     ['primary', 'medium', false, false, false, false, 'Button Button--primary Button--medium'],
     ['secondary', 'medium', false, false, false, false, 'Button Button--secondary Button--medium'],
     ['tertiary', 'medium', false, false, false, false, 'Button Button--tertiary Button--medium'],
+    ['plain', 'medium', false, false, false, false, 'Button Button--plain Button--medium'],
     ['danger', 'medium', false, false, false, false, 'Button Button--danger Button--medium'],
     ['primary', 'medium', true, false, false, false, 'Button Button--primary Button--medium Button--block'],
     ['primary', 'medium', false, true, false, false, 'Button Button--primary Button--medium Button--disabled'],

diff --git a/packages/web-react/src/constants/dictionaries.ts b/packages/web-react/src/constants/dictionaries.ts
@@ -35,6 +35,7 @@ export const ActionButtonColors = {
   PRIMARY: 'primary',
   SECONDARY: 'secondary',
   TERTIARY: 'tertiary',
+  PLAIN: 'plain',
 } as const;
 
 export const ActionLinkColors = {

diff --git a/packages/web-react/tests/providerTests/dictionaryPropsTest.tsx b/packages/web-react/tests/providerTests/dictionaryPropsTest.tsx
@@ -1,6 +1,8 @@
 import { render, waitFor } from '@testing-library/react';
 import React, { ComponentType } from 'react';
 import {
+  ActionButtonColorsDictionaryType,
+  ActionButtonColors,
   ActionColorsDictionaryType,
   ActionColors,
   ActionLinkColorsDictionaryType,
@@ -54,6 +56,18 @@ export const actionColorPropsTest = (Component: ComponentType<any>, prefix: stri
   });
 };
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const actionButtonColorPropsTest = (Component: ComponentType<any>, prefix: string, testId?: string) => {
+  it.each([Object.values(ActionButtonColors)])('should render action color %s', async (color) => {
+    const dom = render(<Component color={color as ActionButtonColorsDictionaryType<string>} />);
+
+    await waitFor(() => {
+      const element = getElement(dom, testId);
+      expect(element).toHaveClass(`${prefix}${color}`);
+    });
+  });
+};
+
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export const actionLinkColorPropsTest = (Component: ComponentType<any>, prefix: string, testId?: string) => {
   it.each([Object.values(ActionLinkColors)])('should render action link color %s', async (color) => {