Add statuses to the buttons (#609)

* added statuses to the buttons * format * documentation added --------- Co-authored-by: nowyDEV <[email protected]>
nordcloud · Jun 22, 2023 · d9fb6a1 · d9fb6a1
1 parent df9a045
commit d9fb6a1
Show file tree

Hide file tree

Showing 8 changed files with 138 additions and 37 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@nordcloud/gnui",
   "description": "Nordcloud Design System - a collection of reusable React components used in Nordcloud's SaaS products",
-  "version": "8.8.0",
+  "version": "8.9.0",
   "license": "MIT",
   "repository": {
     "type": "git",

diff --git a/src/components/button/Button.stories.mdx b/src/components/button/Button.stories.mdx
@@ -10,19 +10,20 @@ import { GnuiContainer, FlexContainer } from "../container";
 
 ## Button properties
 
-|   properties | required | type                                                           | description                                                                                                                                                                                                                            |
-| -----------: | :------: | :------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-|     children |  false   | string                                                         | contents inside button element, it should be plain text                                                                                                                                                                                |
-|     severity |  false   | <code>medium</code>, <code>low</code>                          |                                                                                                                                                                                                                                        |
-|         size |  false   | <code>sm</code>, <code>md</code>                               |                                                                                                                                                                                                                                        |
-|         icon |  false   | string                                                         | to get icon names look into <a href="?path=/docs/components-svgicon--size">SVG icon component</a>                                                                                                                                      |
-|    iconRight |  false   | boolean                                                        | place an icon to the right side of button                                                                                                                                                                                              |
-| initialState |  false   | <code>success</code>, <code>error</code>, <code>loading</code> |                                                                                                                                                                                                                                        |
-|        color |  false   | string                                                         | can be used in two ways: as an action colors build with `theme` (`accent`, `danger`, `success`, `warning`, `notification`) or just in HEX/named color formats according to [X11 Colors](https://en.wikipedia.org/wiki/X11_color_names) |
-|     disabled |  false   | boolean                                                        |                                                                                                                                                                                                                                        |
-|       linkTo |  false   | string                                                         | displays button as a link                                                                                                                                                                                                              |
-|      display |  false   | <code>flex</code>, <code>inline-flex</code>                    | you might want to change the display value when using linkTo prop                                                                                                                                                                      |
-|           as |  false   | React.ElementType                                              | any valid HTML element or React component                                                                                                                                                                                              |
+|         properties | required | type                                                           | description                                                                                                                                                                                                                            |
+| -----------------: | :------: | :------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+|           children |  false   | string                                                         | contents inside button element, it should be plain text                                                                                                                                                                                |
+|           severity |  false   | <code>medium</code>, <code>low</code>                          |                                                                                                                                                                                                                                        |
+|               size |  false   | <code>sm</code>, <code>md</code>                               |                                                                                                                                                                                                                                        |
+|               icon |  false   | string                                                         | to get icon names look into <a href="?path=/docs/components-svgicon--size">SVG icon component</a>                                                                                                                                      |
+|          iconRight |  false   | boolean                                                        | place an icon to the right side of button                                                                                                                                                                                              |
+|       initialState |  false   | <code>success</code>, <code>error</code>, <code>loading</code> |                                                                                                                                                                                                                                        |
+|             status |  false   | string                                                         | status: <code>danger</code>, <code>warning</code>, <code>success</code>, <code>notification</code>, <code>discovery</code>, <code>accent</code>                                                                                        |
+|           disabled |  false   | boolean                                                        |                                                                                                                                                                                                                                        |
+|             linkTo |  false   | string                                                         | displays button as a link                                                                                                                                                                                                              |
+|            display |  false   | <code>flex</code>, <code>inline-flex</code>                    | you might want to change the display value when using linkTo prop                                                                                                                                                                      |
+|           asnpm ru |  false   | React.ElementType                                              | any valid HTML element or React component                                                                                                                                                                                              |
+| color - deprecated |  false   | string                                                         | can be used in two ways: as an action colors build with `theme` (`accent`, `danger`, `success`, `warning`, `notification`) or just in HEX/named color formats according to [X11 Colors](https://en.wikipedia.org/wiki/X11_color_names) |
 
 ## default button
 
@@ -105,23 +106,19 @@ import { GnuiContainer, FlexContainer } from "../container";
   </Story>
 </Canvas>
 
-## color
+## Status
 
-> `color`: `string`
+> status: `danger` | `warning` | `success` | `notification` | `discovery` | `accent`
 
 <Canvas>
-  <Story name="color">
+  <Story name="status">
     <FlexContainer justifyContent="space-evenly">
-      <Button color="danger" icon="danger">
-        Danger color
-      </Button>
-      <Button color="danger" icon="danger" severity="medium">
-        Danger color
-      </Button>
-      <Button color="success">Success color</Button>
-      <Button color="warning">Warning color</Button>
-      <Button color="notification">Notification color</Button>
-      <Button color="#FF1493">HEX color</Button>
+      <Button status="danger">danger</Button>
+      <Button status="warning">warning</Button>
+      <Button status="success">success</Button>
+      <Button status="notification">notification</Button>
+      <Button status="discovery">discovery</Button>
+      <Button status="accent">accent</Button>
     </FlexContainer>
   </Story>
 </Canvas>
@@ -195,3 +192,24 @@ import { GnuiContainer, FlexContainer } from "../container";
     </Button>
   </Story>
 </Canvas>
+
+## color - deprecated
+
+> `color`: `string`
+
+<Canvas>
+  <Story name="color">
+    <FlexContainer justifyContent="space-evenly">
+      <Button color="danger" icon="danger">
+        Danger color
+      </Button>
+      <Button color="danger" icon="danger" severity="medium">
+        Danger color
+      </Button>
+      <Button color="success">Success color</Button>
+      <Button color="warning">Warning color</Button>
+      <Button color="notification">Notification color</Button>
+      <Button color="#FF1493">HEX color</Button>
+    </FlexContainer>
+  </Story>
+</Canvas>
diff --git a/src/components/button/Button.tsx b/src/components/button/Button.tsx
@@ -12,10 +12,20 @@ export type ButtonProps<T extends React.ElementType = "button"> =
   React.ComponentProps<T> & {
     children?: React.ReactNode | string;
     severity?: "high" | "low" | "medium";
+    status?:
+      | "accent"
+      | "danger"
+      | "discovery"
+      | "notification"
+      | "success"
+      | "warning";
     size?: "md" | "sm";
     icon?: SVGIconProps["name"];
     iconRight?: boolean;
     initialState?: string;
+    /**
+     * @deprecated The property should not be used
+     */
     color?: SingleColors;
     form?: string;
     select?: boolean;
@@ -108,6 +118,49 @@ const changeSeverity = (severity: string) => {
   }
 };
 
+const changeStatus = (status?: ButtonProps["status"]) => {
+  switch (status) {
+    case "danger":
+      return {
+        default: theme.color.interactive.error,
+        hover: theme.color.interactive.errorHover,
+        active: theme.color.interactive.errorActive,
+      };
+    case "warning":
+      return {
+        default: theme.color.interactive.warning,
+        hover: theme.color.interactive.warningHover,
+        active: theme.color.interactive.warningActive,
+      };
+    case "success":
+      return {
+        default: theme.color.interactive.success,
+        hover: theme.color.interactive.successHover,
+        active: theme.color.interactive.successActive,
+      };
+    case "notification":
+      return {
+        default: theme.color.interactive.info,
+        hover: theme.color.interactive.infoHover,
+        active: theme.color.interactive.infoActive,
+      };
+    case "discovery":
+      return {
+        default: theme.color.interactive.primary,
+        hover: theme.color.interactive.primaryHover,
+        active: theme.color.interactive.primaryActive,
+      };
+    case "accent":
+      return {
+        default: theme.color.interactive.accent,
+        hover: theme.color.interactive.accentHover,
+        active: theme.color.interactive.accentActive,
+      };
+    default:
+      return null;
+  }
+};
+
 const StyledButton = styled.button<ButtonProps<React.ElementType>>`
   background: ${theme.color.interactive.primary};
   white-space: nowrap;
@@ -192,6 +245,18 @@ const StyledButton = styled.button<ButtonProps<React.ElementType>>`
       ${changeSeverity(severity)}
     `}
 
+  ${({ status }) =>
+    status &&
+    css`
+      background: ${changeStatus(status)?.default};
+      &:hover {
+        background: ${changeStatus(status)?.hover};
+      }
+      &:active {
+        background: ${changeStatus(status)?.active};
+      }
+    `}
+
   ${({ size }) =>
     size &&
     css`

diff --git a/src/components/message/Message.stories.mdx b/src/components/message/Message.stories.mdx
@@ -149,15 +149,15 @@ import { Button } from "../button";
             <Button
               size={"md"}
               mt={theme.spacing.spacing04}
-              color="notification"
+              status="notification"
             >
               Action Button
             </Button>
             <Button
               size={"md"}
               mt={theme.spacing.spacing04}
               ml={theme.spacing.spacing04}
-              color="notification"
+              status="notification"
             >
               Action Button 2
             </Button>
@@ -194,14 +194,14 @@ import { Button } from "../button";
             and scrambled it to make a type specimen book.
           </Text>
           <FlexContainer>
-            <Button size={"md"} mt={theme.spacing.spacing04} color="warning">
+            <Button size={"md"} mt={theme.spacing.spacing04} status="warning">
               Action Button
             </Button>
             <Button
               size={"md"}
               mt={theme.spacing.spacing04}
               ml={theme.spacing.spacing04}
-              color="warning"
+              status="warning"
             >
               Action Button 2
             </Button>
@@ -238,14 +238,14 @@ import { Button } from "../button";
             and scrambled it to make a type specimen book.
           </Text>
           <FlexContainer>
-            <Button size={"md"} mt={theme.spacing.spacing04} color="success">
+            <Button size={"md"} mt={theme.spacing.spacing04} status="success">
               Action Button
             </Button>
             <Button
               size={"md"}
               mt={theme.spacing.spacing04}
               ml={theme.spacing.spacing04}
-              color="success"
+              status="success"
             >
               Action Button 2
             </Button>
@@ -282,14 +282,14 @@ import { Button } from "../button";
             and scrambled it to make a type specimen book.
           </Text>
           <FlexContainer>
-            <Button size={"md"} mt={theme.spacing.spacing04} color="danger">
+            <Button size={"md"} mt={theme.spacing.spacing04} status="danger">
               Action Button
             </Button>
             <Button
               size={"md"}
               mt={theme.spacing.spacing04}
               ml={theme.spacing.spacing04}
-              color="danger"
+              status="danger"
             >
               Action Button 2
             </Button>

diff --git a/src/theme/config.ts b/src/theme/config.ts
@@ -53,9 +53,15 @@ export const color = {
     success: "var(--interactive-success)",
     successHover: "var(--interactive-successHover)",
     successActive: "var(--interactive-successActive)",
+    warning: "var(--interactive-warning)",
+    warningHover: "var(--interactive-warningHover)",
+    warningActive: "var(--interactive-warningActive)",
     info: "var(--interactive-info)",
     infoHover: "var(--interactive-infoHover)",
     infoActive: "var(--interactive-infoActive)",
+    accent: "var(--interactive-accent)",
+    accentHover: "var(--interactive-accentHover)",
+    accentActive: "var(--interactive-accentActive)",
     disabled: "var(--interactive-disabled)",
   },
   support: {

diff --git a/src/theme/dark.ts b/src/theme/dark.ts
@@ -46,9 +46,15 @@ const DARK_COLORS = [
   ["--interactive-success", palette.green.green400],
   ["--interactive-successHover", palette.green.green500],
   ["--interactive-successActive", palette.green.green600],
+  ["--interactive-warning", palette.orange.orange400],
+  ["--interactive-warningHover", palette.orange.orange500],
+  ["--interactive-warningActive", palette.orange.orange600],
   ["--interactive-info", palette.blue.blue400],
   ["--interactive-infoHover", palette.blue.blue500],
   ["--interactive-infoActive", palette.blue.blue600],
+  ["--interactive-accent", palette.purple.purple300],
+  ["--interactive-accentHover", palette.purple.purple400],
+  ["--interactive-accentActive", palette.purple.purple500],
   ["--interactive-disabled", palette.darkGrey.darkGrey200],
   ["--support-red", palette.red.red400],
   ["--support-redInverse", palette.red.redTransparent],

diff --git a/src/theme/light.ts b/src/theme/light.ts
@@ -46,9 +46,15 @@ const LIGHT_COLORS = [
   ["--interactive-success", palette.green.green600],
   ["--interactive-successHover", palette.green.green700],
   ["--interactive-successActive", palette.green.green800],
+  ["--interactive-warning", palette.orange.orange600],
+  ["--interactive-warningHover", palette.orange.orange700],
+  ["--interactive-warningActive", palette.orange.orange800],
   ["--interactive-info", palette.blue.blue600],
   ["--interactive-infoHover", palette.blue.blue700],
   ["--interactive-infoActive", palette.blue.blue800],
+  ["--interactive-accent", palette.purple.purple600],
+  ["--interactive-accentHover", palette.purple.purple700],
+  ["--interactive-accentActive", palette.purple.purple800],
   ["--interactive-disabled", palette.grey.grey300],
   ["--support-red", palette.red.red500],
   ["--support-redInverse", palette.red.red100],