@hyphen/hyphen-components 2.16.3 → 2.18.0

package/dist/lib/tokens.d.ts

@@ -7,7 +7,7 @@ export declare const BREAKPOINTS: Breakpoint[];
 export declare const BASE_COLOR_OPTIONS: ("black" | "white" | "magenta" | "primary-50" | "primary-100" | "primary-200" | "primary-300" | "primary-400" | "primary-500" | "primary-600" | "primary-700" | "primary-800" | "primary-900" | "green-50" | "green-100" | "green-200" | "green-300" | "green-400" | "green-500" | "green-600" | "green-700" | "green-800" | "green-900" | "blue-50" | "blue-100" | "blue-200" | "blue-300" | "blue-400" | "blue-500" | "blue-600" | "blue-700" | "blue-800" | "blue-900" | "purple-50" | "purple-100" | "purple-200" | "purple-300" | "purple-400" | "purple-500" | "purple-600" | "purple-700" | "purple-800" | "purple-900" | "yellow-50" | "yellow-100" | "yellow-200" | "yellow-300" | "yellow-400" | "yellow-500" | "yellow-600" | "yellow-700" | "yellow-800" | "yellow-900" | "red-50" | "red-100" | "red-200" | "red-300" | "red-400" | "red-500" | "red-600" | "red-700" | "red-800" | "red-900" | "grey-50" | "grey-100" | "grey-200" | "grey-300" | "grey-400" | "grey-500" | "grey-600" | "grey-700" | "grey-800" | "grey-900")[];
 export declare const BASE_COLOR_NAMES: ("black" | "white" | "magenta" | "primary" | "green" | "blue" | "purple" | "yellow" | "red" | "grey")[];
 export declare const FONT_COLOR_OPTIONS: ("info" | "base" | "white" | "grey" | "secondary" | "tertiary" | "inverse" | "disabled" | "success" | "success-disabled" | "warn" | "warn-disabled" | "danger" | "danger-input" | "danger-disabled" | "button-primary" | "button-primary-hover" | "button-primary-active" | "button-secondary" | "button-secondary-hover" | "button-secondary-active" | "button-tertiary" | "button-tertiary-hover" | "button-tertiary-active" | "button-danger" | "button-danger-hover" | "button-danger-active" | "toast" | "toast-error" | "placeholder" | "brand-yellow" | "brand-orange" | "brand-magenta" | "brand-dark-grey" | "brand-cyan" | "brand-pink" | "brand-light-purple" | "brand-medium-purple" | "brand-dark-purple")[];
-export declare const BACKGROUND_COLOR_OPTIONS: ("info" | "white" | "primary" | "secondary" | "tertiary" | "inverse" | "disabled" | "success" | "danger" | "button-primary" | "button-primary-hover" | "button-primary-active" | "button-secondary" | "button-secondary-hover" | "button-secondary-active" | "button-tertiary" | "button-tertiary-hover" | "button-tertiary-active" | "button-danger" | "button-danger-hover" | "button-danger-active" | "toast" | "toast-error" | "brand-yellow" | "brand-orange" | "brand-magenta" | "brand-dark-grey" | "brand-cyan" | "brand-pink" | "brand-light-purple" | "brand-medium-purple" | "brand-dark-purple" | "error" | "warning" | "transparent" | "brand-gradient" | "brand-gradient-purple" | "brand-gradient-cyan" | "chart-1" | "chart-2" | "chart-3")[];
+export declare const BACKGROUND_COLOR_OPTIONS: ("info" | "white" | "primary" | "secondary" | "tertiary" | "inverse" | "disabled" | "success" | "danger" | "button-primary" | "button-primary-hover" | "button-primary-active" | "button-secondary" | "button-secondary-hover" | "button-secondary-active" | "button-tertiary" | "button-tertiary-hover" | "button-tertiary-active" | "button-danger" | "button-danger-hover" | "button-danger-active" | "toast" | "toast-error" | "brand-yellow" | "brand-orange" | "brand-magenta" | "brand-dark-grey" | "brand-cyan" | "brand-pink" | "brand-light-purple" | "brand-medium-purple" | "brand-dark-purple" | "error" | "warning" | "transparent" | "brand-gradient" | "brand-gradient-reverse" | "brand-gradient-purple" | "brand-gradient-purple-reverse" | "brand-gradient-cyan" | "brand-gradient-cyan-reverse" | "chart-1" | "chart-2" | "chart-3")[];
 export declare const BORDER_COLOR_OPTIONS: ("info" | "inverse" | "danger" | "button-secondary" | "button-secondary-hover" | "button-secondary-active" | "button-tertiary" | "button-tertiary-hover" | "button-tertiary-active" | "toast" | "toast-error" | "brand-yellow" | "brand-orange" | "brand-magenta" | "brand-dark-grey" | "brand-cyan" | "brand-pink" | "brand-light-purple" | "brand-medium-purple" | "brand-dark-purple" | "warning" | "default" | "subtle" | "hover" | "active")[];
 export declare const FONT_SIZE_OPTIONS: ("xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "base" | "2xs" | "4xl" | "5xl" | "6xl" | "7xl")[];
 export declare const FONT_FAMILY_OPTIONS: ("monospace" | "body" | "brand")[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hyphen/hyphen-components",
-  "version": "2.16.3",
+  "version": "2.18.0",
   "license": "MIT",
   "author": {
     "name": "@hyphen"
@@ -119,7 +119,7 @@
     "@rollup/rollup-linux-x64-gnu": "^4.21.2"
   },
   "dependencies": {
-    "@hyphen/hyphen-design-tokens": "^4.10.0",
+    "@hyphen/hyphen-design-tokens": "^4.11.0",
     "@popperjs/core": "^2.11.8",
     "@types/react-modal": "^3.16.3",
     "classnames": "^2.5.1",

package/src/components/Button/Button.mdx

@@ -49,6 +49,13 @@ Use a combination of `tertiary-*` variant and a named icon to make an icon a but
 
 <Canvas of={Stories.IconButton} />
 
+## Shadow
+
+
+Set the `shadow` prop with a [shadow token](?path=/docs/foundation-design-tokens--docs#box-shadow) to set the outer shadow of the box.
+
+<Canvas of={Stories.Shadow} />
+
 ## Loading
 
 Setting the `isLoading` prop to true will replace the button text with loading indicator and disable the button to prevent unintended submissions.

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

@@ -110,8 +110,24 @@ export const Disabled = () => (
   </Box>
 );
 
+export const Shadow = () => (
+  <Box direction="row" gap="sm">
+    <Button variant="secondary" shadow="xs">
+      xs shadow
+    </Button>
+    <Button variant="secondary" shadow="sm">
+      sm shadow
+    </Button>
+    <Button variant="secondary" shadow="md">
+      md shadow
+    </Button>
+  </Box>
+);
+
 export const Anchor = () => (
-  <Button as="a" href="https://ux.hyphen.ai" target="_blank">
-    I'm an anchor tag
-  </Button>
+  <Box direction="row" gap="sm">
+    <Button as="a" href="https://ux.hyphen.ai" target="_blank">
+      I'm an anchor tag
+    </Button>
+  </Box>
 );