feat(button): add variant (#791)

* feat(button): add variant * feat(button): fix lint * feat(button): fix lint * feat(button): fix lint * feat(button): add hover style
kronostechnologies · Jun 4, 2024 · 69ee4f8 · 69ee4f8
1 parent 329cc3e
commit 69ee4f8
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 1 deletion.
diff --git a/packages/react/src/components/buttons/abstract-button.tsx b/packages/react/src/components/buttons/abstract-button.tsx
@@ -75,7 +75,13 @@ export const AbstractButton = forwardRef<HTMLButtonElement, PropsWithChildren<Ab
 
 AbstractButton.displayName = 'AbstractButton';
 
-export type ButtonType = 'primary' | 'secondary' | 'tertiary' | 'destructive' | 'destructive-secondary';
+export type ButtonType =
+    | 'primary'
+    | 'secondary'
+    | 'tertiary'
+    | 'destructive'
+    | 'destructive-secondary'
+    | 'destructive-tertiary';
 
 export interface ButtonTypeStyles {
     buttonType: ButtonType;
@@ -209,6 +215,34 @@ const getDestructiveSecondaryButtonStyles: (props: ButtonTypeStyles) => FlattenI
     }
 `;
 
+const getDestructiveTertiaryButtonStyles: (props: ButtonTypeStyles) => FlattenInterpolation<ThemeProps<Theme>> = ({
+    theme,
+}) => css`
+    background-color: transparent;
+    border-color: transparent;
+    color: ${theme.notifications['alert-2.1']};
+
+    &:hover,
+    &[aria-expanded='true'] {
+        /* TODO change colors when updating thematization */
+        background-color: #faeae9;
+        border-color: transparent;
+        color: #7b1a15;
+    }
+
+    &:disabled {
+        color: #f99d99;
+
+        &,
+        &:focus,
+        &:hover {
+            /* TODO change colors when updating thematization */
+            background-color: transparent;
+            border-color: transparent;
+        }
+    }
+`;
+
 export const getButtonTypeStyles: (props: ButtonTypeStyles) => FlattenInterpolation<ThemeProps<Theme>> = (props) => css`
     ${focus(props, true)};
     ${() => {
@@ -223,6 +257,8 @@ export const getButtonTypeStyles: (props: ButtonTypeStyles) => FlattenInterpolat
                 return getDestructiveButtonStyles(props);
             case 'destructive-secondary':
                 return getDestructiveSecondaryButtonStyles(props);
+            case 'destructive-tertiary':
+                return getDestructiveTertiaryButtonStyles(props);
         }
     }}
 `;
diff --git a/packages/storybook/stories/buttons.stories.tsx b/packages/storybook/stories/buttons.stories.tsx
@@ -24,6 +24,7 @@ export const Buttons: Story = () => (
         <Button label="Tertiary" buttonType="tertiary" />
         <Button label="Destructive" buttonType="destructive" />
         <Button label="Destructive-Secondary" buttonType="destructive-secondary" />
+        <Button label="Destructive-Tertiary" buttonType="destructive-tertiary" />
     </>
 );
 
@@ -34,6 +35,7 @@ export const Disabled: Story = () => (
         <Button label="Tertiary" buttonType="tertiary" disabled />
         <Button label="Destructive" buttonType="destructive" disabled />
         <Button label="Destructive-Secondary" buttonType="destructive-secondary" disabled />
+        <Button label="Destructive-Tertiary" buttonType="destructive-tertiary" disabled />
     </>
 );
 
@@ -44,6 +46,7 @@ export const Inverted: Story = () => (
         <Button label="Tertiary" buttonType="tertiary" inverted />
         <Button label="Destructive" buttonType="destructive" inverted />
         <Button label="Destructive-Secondary" buttonType="destructive-secondary" inverted />
+        <Button label="Destructive-Tertiary" buttonType="destructive-tertiary" inverted />
     </InvertedBackground>
 );
 export const InvertedDisabled: Story = () => (
@@ -53,6 +56,7 @@ export const InvertedDisabled: Story = () => (
         <Button label="Tertiary" buttonType="tertiary" inverted disabled />
         <Button label="Destructive" buttonType="destructive" inverted disabled />
         <Button label="Destructive-Secondary" buttonType="destructive-secondary" inverted disabled />
+        <Button label="Destructive-Tertiary" buttonType="destructive-tertiary" inverted disabled />
     </InvertedBackground>
 );
 
@@ -92,6 +96,11 @@ export const WithIcons: Story = () => (
             Destructive Secondary
             <ChevronDownIcon />
         </Button>
+        <Button buttonType="destructive-tertiary">
+            <PlusIcon />
+            Destructive Tertiary
+            <ChevronDownIcon />
+        </Button>
     </>
 );
 
@@ -102,5 +111,6 @@ export const Small: Story = () => (
         <Button label="Tertiary" buttonType="tertiary" size="small" />
         <Button label="Destructive" buttonType="destructive" size="small" />
         <Button label="Destructive-Secondary" buttonType="destructive-secondary" size="small" />
+        <Button label="Destructive-Tertiary" buttonType="destructive-tertiary" size="small" />
     </>
 );
diff --git a/packages/storybook/stories/icon-button.stories.tsx b/packages/storybook/stories/icon-button.stories.tsx
@@ -15,13 +15,15 @@ export const IconButtons: Story = () => (
         <IconButton label="map" buttonType="tertiary" iconName="mapPin" />
         <IconButton label="Delete" buttonType="destructive" iconName="x" />
         <IconButton label="Delete" buttonType="destructive-secondary" iconName="x" />
+        <IconButton label="Delete" buttonType="destructive-tertiary" iconName="x" />
     </>
 );
 
 export const Inverted: Story = () => (
     <InvertedBackground>
         <IconButton label="Delete" buttonType="destructive" iconName="x" inverted />
         <IconButton label="Delete" buttonType="destructive-secondary" iconName="x" inverted />
+        <IconButton label="Delete" buttonType="destructive-tertiary" iconName="x" inverted />
     </InvertedBackground>
 );
 
@@ -32,6 +34,7 @@ export const Disabled: Story = () => (
         <IconButton label="map" buttonType="tertiary" iconName="mapPin" disabled />
         <IconButton label="Delete" buttonType="destructive" iconName="x" disabled />
         <IconButton label="Delete" buttonType="destructive-secondary" iconName="x" disabled />
+        <IconButton label="Delete" buttonType="destructive-tertiary" iconName="x" disabled />
     </>
 );
 
@@ -52,5 +55,6 @@ export const Small: Story = () => (
         <IconButton label="map" buttonType="tertiary" iconName="mapPin" size="small" />
         <IconButton label="Delete" buttonType="destructive" iconName="x" size="small" />
         <IconButton label="Delete" buttonType="destructive-secondary" iconName="x" size="small" />
+        <IconButton label="Delete" buttonType="destructive-tertiary" iconName="x" size="small" />
     </>
 );