@hyphen/hyphen-components 2.9.0

package/src/components/Button/Button.mdx

@@ -0,0 +1,71 @@
+import { Meta, Story, Canvas, ArgTypes } from '@storybook/addon-docs';
+import { Button } from './Button';
+import { Box } from '../Box/Box';
+
+import * as Stories from './Button.stories';
+
+<Meta of={Stories} />
+
+# Button
+
+Buttons are used as triggers for actions.
+They are used in forms, toolbars, modal dialogs and as stand-alone action triggers.
+Actions almost always occur on the same page.
+
+<Canvas isExpanded of={Stories.Default} />
+
+## Props
+
+<ArgTypes of={Button} />
+
+## Variants
+
+The `variant` prop determines which color visual weight to render.
+
+<Canvas of={Stories.Variants} />
+
+## Sizes
+
+Set the size of the button to `xs`, `sm`, `md` or `lg`. `md` is the default size. The button also takes a `ResponsiveProp` object
+so it can have different sizes at different breakpoints.
+
+<Canvas of={Stories.Sizes} />
+
+## Full Width
+
+Use the `fullWidth` prop to allow the button to grow to its container's full width.
+
+<Canvas of={Stories.FullWidth} />
+
+## Icons
+
+Add an icon to the left or right inside the Button using the `iconPrefix` and `iconSuffix` props respectively.
+
+<Canvas of={Stories.Icons} />
+
+## Icon Button
+
+Use a combination of `tertiary-*` variant and a named icon to make an icon a button. Be sure to include an `aria-label` for screen readers to know what action the button will perform when pressed.
+
+<Canvas of={Stories.IconButton} />
+
+## Loading
+
+Setting the `isLoading` prop to true will replace the button text with loading indicator and disable the button to prevent unintended submissions.
+The width of the button will remain consistent to prevent content from shifting.
+
+<Canvas of={Stories.Loading} />
+
+## Disabled
+
+Use for actions that aren’t currently available, such as immediately after a form submission.
+The interface should make it clear why the button is disabled and what needs to be done to enable it.
+
+<Canvas of={Stories.Disabled} />
+
+## As an Anchor
+
+You can render an anchor tag with the style of a button by using the `as` prop. You
+can render buttons as one of `button`, `a`, and `input`.
+
+<Canvas of={Stories.Anchor} />

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

@@ -0,0 +1,312 @@
+@import '@hyphen/hyphen-design-tokens/build/scss/variables';
+
+:root {
+  --button-box-shadow-focus: 0 0 0 4px var(--color-base-primary-200);
+  --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);
+}
+
+@mixin size-sm {
+  border-radius: var(--INTERNAL_form-control-size-sm-border-radius);
+  padding: var(--INTERNAL_form-control-size-sm-padding) var(--size-spacing-md);
+  min-height: 32px;
+  font-size: var(--INTERNAL_form-control-size-sm-font-size);
+  letter-spacing: 0.2px;
+  height: 32px;
+}
+
+%size-sm {
+  @include size-sm;
+}
+
+.size-sm {
+  @extend %size-sm;
+}
+
+@mixin size-md {
+  border-radius: var(
+    --button-size-md-border-radius,
+    var(--INTERNAL_form-control-size-md-border-radius)
+  );
+  padding: calc(
+      var(
+          --button-size-md-padding-vertical,
+          var(--INTERNAL_form-control-size-md-padding)
+        ) - 1px
+    )
+    calc(
+      (var(--button-size-md-padding-horizontal, var(--size-spacing-xl))) - 1px
+    );
+  font-size: var(
+    --button-size-md-font-size,
+    var(--INTERNAL_form-control-size-md-font-size)
+  );
+  letter-spacing: 0.2px;
+  height: 40px;
+}
+
+%size-md {
+  @include size-md;
+}
+
+.size-md {
+  @extend %size-md;
+}
+
+@mixin size-lg {
+  border-radius: var(
+    --button-size-lg-border-radius,
+    var(--INTERNAL_form-control-size-lg-border-radius)
+  );
+  padding: var(
+      --button-size-lg-padding-vertical,
+      var(--INTERNAL_form-control-size-lg-padding)
+    )
+    var(--button-size-lg-padding-horizontal, var(--size-spacing-2xl));
+  min-height: 55px;
+  letter-spacing: 1px;
+  font-size: var(
+    --button-size-lg-font-size,
+    var(--INTERNAL_form-control-size-lg-font-size)
+  );
+  height: 55px;
+}
+
+%size-lg {
+  @include size-lg;
+}
+
+.size-lg {
+  @extend %size-lg;
+}
+
+.button {
+  border: 1px solid transparent;
+  cursor: pointer;
+  background-color: transparent;
+  padding: 0;
+  color: inherit;
+  line-height: 1;
+  font-family: var(--assets-font-family-body);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  transition-duration: 0.1s;
+  transition-property: background-color, border, box-shadow, color;
+  transition-timing-function: cubic-bezier(0.67, 0.83, 0.67);
+  text-align: center;
+  text-decoration: none;
+  font-weight: var(--size-font-weight-semi-bold);
+
+  &:hover {
+    text-decoration: none;
+  }
+
+  &:disabled {
+    opacity: 0.45;
+    cursor: not-allowed;
+  }
+
+  &.primary {
+    background-color: var(--color-background-button-primary);
+    color: var(--color-font-button-primary);
+
+    &:not(:disabled):hover {
+      background-color: var(--color-background-button-primary-hover);
+      color: var(--color-font-button-primary-hover);
+    }
+
+    &:not(:disabled):active {
+      background-color: var(--color-background-button-primary-active);
+      color: var(--color-font-button-primary-active);
+    }
+
+    &:focus {
+      outline: 0;
+      box-shadow: var(--button-box-shadow-focus);
+    }
+
+    // Show focus styles on keyboard focus.
+    &:focus-visible {
+      outline: 0;
+      box-shadow: var(--button-box-shadow-focus);
+    }
+
+    // Hide focus styles if they are not needed, for example,
+    // when an element receives focus via the mouse.
+    &:focus:not(:focus-visible) {
+      outline: 0;
+      box-shadow: none;
+    }
+  }
+
+  &.secondary {
+    background-color: var(--color-background-button-secondary);
+    border: 1px solid;
+    border-color: var(--color-border-button-secondary);
+    color: var(--color-font-button-secondary);
+
+    &:not(:disabled):hover {
+      background-color: var(--color-background-button-secondary-hover);
+      border-color: var(--color-border-button-secondary-hover);
+      color: var(--color-font-button-secondary-hover);
+    }
+
+    &:not(:disabled):active {
+      background-color: var(--color-background-button-secondary-active);
+      border-color: var(--color-border-button-secondary-active);
+      color: var(--color-font-button-secondary-active);
+    }
+
+    &:focus {
+      outline: 0;
+      box-shadow: var(--button-box-shadow-focus);
+    }
+
+    // Show focus styles on keyboard focus.
+    &:focus-visible {
+      outline: 0;
+      box-shadow: var(--button-box-shadow-focus);
+    }
+
+    &:focus:not(:focus-visible) {
+      outline: 0;
+      box-shadow: none;
+    }
+  }
+
+  &.tertiary {
+    background-color: var(--color-background-button-tertiary);
+    color: var(--color-font-button-tertiary);
+
+    &:not(:disabled):hover {
+      background-color: var(--color-background-button-tertiary-hover);
+      border-color: var(--color-border-button-tertiary-hover);
+      color: var(--color-font-button-tertiary-hover);
+    }
+
+    &:not(:disabled):active {
+      background-color: var(--color-background-button-tertiary-active);
+      border-color: var(--color-border-button-tertiary-active);
+      color: var(--color-font-button-tertiary-active);
+    }
+
+    &:focus {
+      outline: 0;
+      box-shadow: var(--button-box-shadow-focus);
+    }
+
+    // Show focus styles on keyboard focus.
+    &:focus-visible {
+      outline: 0;
+      box-shadow: var(--button-box-shadow-focus);
+    }
+
+    &:focus:not(:focus-visible) {
+      outline: 0;
+      box-shadow: none;
+    }
+  }
+
+  &.danger {
+    background-color: var(--color-background-button-danger);
+    color: var(--color-font-button-danger);
+
+    &:not(:disabled):hover {
+      background-color: var(--color-background-button-danger-hover);
+      color: var(--color-font-button-danger-hover);
+    }
+
+    &:not(:disabled):active {
+      background-color: var(--color-background-button-danger-active);
+      color: var(--color-font-button-danger-active);
+    }
+
+    &:focus {
+      outline: 0;
+      box-shadow: var(--button-danger-box-shadow-focus);
+    }
+
+    &:focus-visible {
+      outline: 0;
+      box-shadow: var(--button-danger-box-shadow-focus);
+    }
+
+    &:focus:not(:focus-visible) {
+      outline: 0;
+      box-shadow: none;
+    }
+  }
+
+  &.size-sm {
+    @extend %size-sm;
+  }
+
+  &.size-md {
+    @extend %size-md;
+  }
+
+  &.size-lg {
+    @extend %size-lg;
+  }
+
+  @media (min-width: $size-breakpoint-tablet) {
+    &.size-sm-tablet {
+      @include size-sm;
+    }
+
+    &.size-md-tablet {
+      @include size-md;
+    }
+
+    &.size-lg-tablet {
+      @include size-lg;
+    }
+  }
+
+  @media (min-width: $size-breakpoint-desktop) {
+    &.size-sm-desktop {
+      @include size-sm;
+    }
+
+    &.size-md-desktop {
+      @include size-md;
+    }
+
+    &.size-lg-desktop {
+      @include size-lg;
+    }
+  }
+
+  @media (min-width: $size-breakpoint-hd) {
+    &.size-sm-hd {
+      @include size-sm;
+    }
+
+    &.size-md-hd {
+      @include size-md;
+    }
+
+    &.size-lg-hd {
+      @include size-lg;
+    }
+  }
+
+  &.loading {
+    .label {
+      visibility: hidden;
+    }
+  }
+
+  &.full-width {
+    width: 100%;
+  }
+}
+
+.spinner-wrapper {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}

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

@@ -0,0 +1,117 @@
+import React from 'react';
+import { Box } from '../Box/Box';
+import { Button } from './Button';
+import type { Meta } from '@storybook/react';
+import { allModes } from '../../modes';
+
+const meta: Meta<typeof Button> = {
+  title: 'Components/Button',
+  component: Button,
+  parameters: {
+    chromatic: {
+      modes: {
+        light: allModes['light'],
+        dark: allModes['dark'],
+      },
+    },
+  },
+};
+
+export default meta;
+
+export const Default = () => (
+  <Button onClick={() => alert('clicked')}>Button</Button>
+);
+
+export const Variants = () => (
+  <Box gap="md" style={{ backgroundColor: 'var(--background-primary)' }}>
+    <Box gap="sm" direction="row" alignItems="flex-start">
+      <Button variant="primary">Primary</Button>
+      <Button variant="secondary">Secondary</Button>
+      <Button variant="tertiary">Tertiary</Button>
+      <Button variant="danger">Danger</Button>
+    </Box>
+  </Box>
+);
+
+export const Sizes = () => (
+  <Box gap="sm" direction="row" alignItems="flex-start">
+    <Button variant="primary" size="sm">
+      Label
+    </Button>
+    <Button variant="primary" size="md">
+      Label
+    </Button>
+    <Button variant="primary" size="lg">
+      Label
+    </Button>
+    <Button
+      variant="primary"
+      size={{
+        base: 'sm',
+        tablet: 'md',
+        desktop: 'lg',
+        hd: 'lg',
+      }}
+    >
+      Label
+    </Button>
+  </Box>
+);
+
+export const FullWidth = () => (
+  <Button variant="primary" fullWidth>
+    Full Width
+  </Button>
+);
+
+export const Icons = () => (
+  <Box direction="row" gap="xs" alignItems="flex-start">
+    <Button variant="primary" iconPrefix="mail">
+      Email
+    </Button>
+    <Button variant="secondary" iconSuffix="chat">
+      Chat Now
+    </Button>
+  </Box>
+);
+
+export const IconButton = () => (
+  <>
+    <Button variant="tertiary" iconPrefix="add" aria-label="add" />
+    <Button variant="tertiary" iconPrefix="dots" aria-label="open menu" />
+    <Button variant="danger" iconPrefix="trash" aria-label="remove" />
+  </>
+);
+
+export const Loading = () => (
+  <Box direction="row" gap="sm">
+    <Button isLoading>Primary Loading</Button>
+    <Button variant="secondary" isLoading>
+      Secondary Loading
+    </Button>
+    <Button variant="tertiary" isLoading>
+      Tertiary Loading
+    </Button>
+  </Box>
+);
+
+export const Disabled = () => (
+  <Box direction="row" gap="sm">
+    <Button variant="primary" isDisabled>
+      Primary Disabled
+    </Button>
+    <Button variant="secondary" isDisabled>
+      Secondary Disabled
+    </Button>
+    <Button variant="tertiary" isDisabled>
+      Tertiary Disabled
+    </Button>
+  </Box>
+);
+
+export const Anchor = () => (
+  <Button as="a" href="https://ux.hyphen.ai" target="_blank">
+    I'm an anchor tag
+  </Button>
+);