@hyphen/hyphen-components 7.8.1 → 7.10.0

package/dist/index.d.ts

@@ -427,7 +427,7 @@ interface BadgeProps extends BoxProps {
 }
 declare const Badge: React__default.ForwardRefExoticComponent<Omit<BadgeProps, "ref"> & React__default.RefAttributes<HTMLDivElement>>;
 
-type ButtonVariant = 'primary' | 'secondary' | 'tertiary' | 'danger' | 'link';
+type ButtonVariant = 'primary' | 'secondary' | 'tertiary' | 'danger' | 'success' | 'link';
 type ButtonSize = 'sm' | 'md' | 'lg';
 interface BaseButtonProps {
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hyphen/hyphen-components",
-  "version": "7.8.1",
+  "version": "7.10.0",
   "license": "MIT",
   "author": {
     "name": "@hyphen"
@@ -56,7 +56,7 @@
     "react-select": "^5.10.0",
     "react-select-event": "^5.5.1",
     "uuid": "^11.1.1",
-    "@hyphen/hyphen-design-tokens": "^7.8.1"
+    "@hyphen/hyphen-design-tokens": "^7.10.0"
   },
   "devDependencies": {
     "@babel/core": "^7.27.4",

package/src/components/Button/Button.constants.ts

@@ -5,6 +5,7 @@ export const BUTTON_VARIANTS: ButtonVariant[] = [
   'secondary',
   'tertiary',
   'danger',
+  'success',
 ];
 
 export const BUTTON_SIZES: ButtonSize[] = ['sm', 'md', 'lg'];

package/src/components/Button/Button.module.scss

@@ -3,7 +3,8 @@
 :root {
   --button-box-shadow-focus: 0 0 0 4px var(--color-base-grey-300);
   --button-neutral-box-shadow-focus: 0 0 0 4px var(--color-base-grey-200);
-  --button-danger-box-shadow-focus: 0 0 0 4px var(--color-base-danger-200);
+  --button-danger-box-shadow-focus: 0 0 0 4px var(--color-base-red-200);
+  --button-success-box-shadow-focus: 0 0 0 4px var(--color-base-green-200);
 }
 
 @mixin size-sm {
@@ -245,6 +246,36 @@
     }
   }
 
+  &.success {
+    background-color: var(--color-background-button-success);
+    color: var(--color-font-button-success);
+
+    &:not(:disabled):hover {
+      background-color: var(--color-background-button-success-hover);
+      color: var(--color-font-button-success-hover);
+    }
+
+    &:not(:disabled):active {
+      background-color: var(--color-background-button-success-active);
+      color: var(--color-font-button-success-active);
+    }
+
+    &:focus {
+      outline: 0;
+      box-shadow: var(--button-success-box-shadow-focus);
+    }
+
+    &:focus-visible {
+      outline: 0;
+      box-shadow: var(--button-success-box-shadow-focus);
+    }
+
+    &:focus:not(:focus-visible) {
+      outline: 0;
+      box-shadow: none;
+    }
+  }
+
   &.link {
     display: inline-flex;
     background-color: transparent;

package/src/components/Button/Button.stories.tsx

@@ -11,6 +11,7 @@ const BUTTON_VARIANTS: ButtonVariant[] = [
   'secondary',
   'tertiary',
   'danger',
+  'success',
   'link',
 ];
 const BUTTON_SIZES: ButtonSize[] = ['sm', 'md', 'lg'];

package/src/components/Button/Button.test.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { BUTTON_SIZES, BUTTON_VARIANTS } from './Button.constants';
-import { Button, ButtonVariant } from './Button';
+import { Button } from './Button';
 import { fireEvent, render, screen } from '@testing-library/react';
 
 const renderButton = (props = {}) => render(<Button {...props} />);
@@ -306,6 +306,16 @@ describe('Button', () => {
         const spinnerElement = document.getElementsByClassName('spinner')[0];
         expect(spinnerElement).toBeInTheDocument();
       });
+
+      test('renders the spinning indicator when button is success', () => {
+        renderButton({
+          isLoading: true,
+          variant: 'success',
+          children: 'Button is loading',
+        });
+        const spinnerElement = document.getElementsByClassName('spinner')[0];
+        expect(spinnerElement).toBeInTheDocument();
+      });
     });
 
     describe('Disabled and Loading', () => {
@@ -325,13 +335,7 @@ describe('Button', () => {
         expect(getButton('primary')).toHaveClass('primary');
       });
 
-      const variants: ButtonVariant[] = [
-        'primary',
-        'secondary',
-        'tertiary',
-        'danger',
-      ];
-      variants.forEach((variant) => {
+      BUTTON_VARIANTS.forEach((variant) => {
         test(`renders component with variant: ${variant} when passed`, () => {
           renderButton({ variant, children: variant });
           expect(getButton(variant)).toHaveClass(variant);

package/src/components/Button/Button.tsx

@@ -13,6 +13,7 @@ export type ButtonVariant =
   | 'secondary'
   | 'tertiary'
   | 'danger'
+  | 'success'
   | 'link';
 
 export type ButtonSize = 'sm' | 'md' | 'lg';