@opentrons/components 0.1.6-alpha.2 → 0.1.6-alpha.21

package/src/primitives/Btn.tsx

@@ -0,0 +1,266 @@
+import styled, { css } from 'styled-components'
+
+import * as Styles from '../styles'
+import { styleProps, isntStyleProp } from './style-props'
+
+import { RESPONSIVENESS } from '../ui-style-constants'
+import type { StyledComponent } from 'styled-components'
+import type { StyleProps } from './types'
+
+export const BUTTON_TYPE_SUBMIT: 'submit' = 'submit'
+export const BUTTON_TYPE_RESET: 'reset' = 'reset'
+export const BUTTON_TYPE_BUTTON: 'button' = 'button'
+
+const BUTTON_BASE_STYLE = css`
+  appearance: none;
+  padding: 0;
+  border-width: 0;
+  border-style: solid;
+  background-color: transparent;
+  cursor: ${Styles.CURSOR_POINTER};
+
+  &:disabled,
+  &.disabled {
+    cursor: ${Styles.CURSOR_DEFAULT};
+  }
+
+  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+    cursor: ${Styles.CURSOR_DEFAULT};
+  }
+`
+
+const BUTTON_VARIANT_STYLE = css`
+  border-color: inherit;
+  border-radius: ${Styles.BORDER_RADIUS_DEFAULT};
+  display: ${Styles.DISPLAY_INLINE_BLOCK};
+  font-size: ${Styles.FONT_SIZE_BODY_2};
+  font-weight: ${Styles.FONT_WEIGHT_SEMIBOLD};
+  line-height: 1.4;
+  padding-left: ${Styles.SPACING_4};
+  padding-right: ${Styles.SPACING_4};
+  padding-top: ${Styles.SPACING_2};
+  padding-bottom: ${Styles.SPACING_2};
+  text-align: ${Styles.TEXT_ALIGN_CENTER};
+  text-transform: ${Styles.TEXT_TRANSFORM_UPPERCASE};
+`
+
+/**
+ * Button primitive
+ *
+ * @component
+ */
+export const Btn: StyledComponent<
+  'button',
+  any,
+  StyleProps,
+  any
+> = styled.button
+  .withConfig({
+    shouldForwardProp: isntStyleProp,
+  })
+  .attrs((props: React.HTMLProps<HTMLButtonElement>) => ({
+    type: props.type ?? BUTTON_TYPE_BUTTON,
+  }))`
+  ${BUTTON_BASE_STYLE}
+  ${styleProps}
+`
+
+/**
+ * Primary button variant
+ *
+ * @component
+ */
+export const PrimaryBtn = styled(Btn)`
+  ${BUTTON_VARIANT_STYLE}
+  background-color: ${Styles.C_DARK_GRAY};
+  color: ${Styles.C_WHITE};
+  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.2);
+
+  &:hover,
+  &:focus {
+    background-color: ${Styles.C_BLACK};
+  }
+
+  &:active {
+    background-color: ${Styles.C_MED_DARK_GRAY};
+  }
+
+  &:disabled,
+  &.disabled {
+    background-color: ${Styles.C_LIGHT_GRAY};
+    color: ${Styles.C_MED_GRAY};
+    box-shadow: none;
+  }
+
+  ${styleProps}
+`
+
+/**
+ * Secondary button variant
+ *
+ * @component
+ */
+export const SecondaryBtn = styled(Btn)`
+  ${BUTTON_VARIANT_STYLE}
+  background-color: ${Styles.C_WHITE};
+  border-width: ${Styles.BORDER_WIDTH_DEFAULT};
+  color: ${Styles.C_DARK_GRAY};
+
+  &:hover,
+  &:focus {
+    background-color: ${Styles.C_LIGHT_GRAY};
+  }
+
+  &:active {
+    background-color: ${Styles.C_MED_LIGHT_GRAY};
+  }
+
+  &:disabled,
+  &.disabled {
+    background-color: ${Styles.C_WHITE};
+    color: ${Styles.C_MED_GRAY};
+  }
+
+  ${styleProps}
+`
+
+/**
+ * New primary button variant used in app
+ *
+ * @component
+ */
+export const NewPrimaryBtn = styled(PrimaryBtn)`
+  background-color: ${Styles.C_BLUE};
+  color: ${Styles.C_WHITE};
+
+  &:hover,
+  &:focus {
+    background-color: ${Styles.C_BLUE};
+    box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.23);
+  }
+
+  &:active {
+    background-color: #004aaa;
+    box-shadow: none;
+  }
+
+  &:disabled,
+  &.disabled {
+    background-color: ${Styles.C_FONT_DISABLED};
+    color: ${Styles.C_WHITE};
+    box-shadow: none;
+  }
+
+  ${styleProps}
+`
+
+/**
+ * New secondary button variant used in app
+ *
+ * @component
+ */
+export const NewSecondaryBtn = styled(SecondaryBtn)`
+  background-color: ${Styles.C_WHITE};
+  color: ${Styles.C_BLUE};
+
+  &:hover,
+  &:focus {
+    border-width: '2px';
+    background-color: ${Styles.C_WHITE};
+    color: ${Styles.C_BLUE};
+    box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.23);
+  }
+
+  &:active {
+    border-width: '2px';
+    background-color: ${Styles.C_WHITE};
+    color: ${Styles.C_BLUE};
+    color: #004aaa;
+    box-shadow: none;
+  }
+
+  &:disabled,
+  &.disabled {
+    border-width: '2px';
+    background-color: ${Styles.C_WHITE};
+    color: ${Styles.C_FONT_DISABLED};
+    box-shadow: none;
+  }
+
+  ${styleProps}
+`
+/**
+ * Red primary button variant used in app
+ *
+ * @component
+ */
+export const NewAlertPrimaryBtn = styled(NewPrimaryBtn)`
+  background-color: ${Styles.C_ERROR_DARK};
+
+  &:hover,
+  &:focus {
+    background-color: ${Styles.C_ERROR_DARK};
+  }
+
+  &:active {
+    background-color: ${Styles.C_ERROR_LIGHT};
+  }
+
+  ${styleProps}
+`
+
+/**
+ * Red secondary button variant used in app
+ *
+ * @component
+ */
+export const NewAlertSecondaryBtn = styled(NewSecondaryBtn)`
+  color: ${Styles.C_ERROR_DARK};
+
+  &:hover,
+  &:focus {
+    color: ${Styles.C_ERROR_DARK};
+  }
+
+  &:active {
+    color: ${Styles.C_ERROR_LIGHT};
+  }
+
+  ${styleProps}
+`
+
+/**
+ * Light secondary button variant
+ *
+ * @component
+ */
+export const LightSecondaryBtn = styled(SecondaryBtn)`
+  background-color: ${Styles.C_TRANSPARENT};
+  color: ${Styles.C_WHITE};
+
+  &:hover,
+  &:focus {
+    background-color: ${Styles.OVERLAY_WHITE_10};
+  }
+
+  &:active {
+    background-color: ${Styles.OVERLAY_WHITE_20};
+  }
+
+  &:disabled,
+  &.disabled {
+    background-color: ${Styles.C_TRANSPARENT};
+    color: ${Styles.C_MED_GRAY};
+  }
+
+  ${styleProps}
+`
+
+/**
+ * Tertiary button variant
+ *
+ * @component
+ */
+export const TertiaryBtn = styled(LightSecondaryBtn)`
+  border-width: 0;
+`

package/src/primitives/Flex.stories.tsx

@@ -0,0 +1,50 @@
+import { BORDERS, COLORS } from '../helix-design-system'
+import { SPACING } from '../ui-style-constants'
+import { DIRECTION_COLUMN, JUSTIFY_SPACE_AROUND } from '../styles'
+import { LegacyStyledText } from '../atoms/StyledText'
+import { Box, Flex as FlexComponent } from '../primitives'
+
+import type { Meta, StoryObj } from '@storybook/react'
+
+const meta: Meta<typeof FlexComponent> = {
+  title: 'Library/Atoms/Flex',
+  component: FlexComponent,
+}
+
+export default meta
+
+type Story = StoryObj<typeof FlexComponent>
+
+export const Flex: Story = {
+  args: {
+    children: [
+      <Box
+        key="1"
+        backgroundColor={COLORS.red60}
+        padding={SPACING.spacing16}
+        borderRadius={BORDERS.borderRadius4}
+      >
+        <LegacyStyledText as="p" color={COLORS.white}>
+          This is a flex child
+        </LegacyStyledText>
+      </Box>,
+      <Box
+        key="2"
+        backgroundColor={COLORS.blue60}
+        padding={SPACING.spacing16}
+        borderRadius={BORDERS.borderRadius4}
+      >
+        <LegacyStyledText as="p" color={COLORS.white}>
+          This is a flex child
+        </LegacyStyledText>
+      </Box>,
+    ],
+    flexDirection: DIRECTION_COLUMN,
+    justifyContent: JUSTIFY_SPACE_AROUND,
+    backgroundColor: 'grey',
+    border: '1px solid black',
+    padding: '1rem',
+    maxWidth: '20rem',
+    height: '10rem',
+  },
+}

package/src/primitives/Flex.tsx

@@ -0,0 +1,17 @@
+import styled from 'styled-components'
+
+import { styleProps, isntStyleProp } from './style-props'
+
+import type { PrimitiveComponent } from './types'
+
+/**
+ * Flex primitive
+ *
+ * @component
+ */
+export const Flex: PrimitiveComponent<'div'> = styled.div.withConfig({
+  shouldForwardProp: isntStyleProp,
+})`
+  display: flex;
+  ${styleProps}
+`

package/src/primitives/ForeignObject.tsx

@@ -0,0 +1,70 @@
+import styled from 'styled-components'
+
+import { styleProps, isntStyleProp } from './style-props'
+
+import type { StyleProps, PrimitiveComponent } from './types'
+
+export interface ForeignObjectProps extends StyleProps {
+  /** attach a width attribute to the <svg> element */
+  svgWidth?: string | number
+  /** attach a height attribute to the <svg> element */
+  svgHeight?: string | number
+  /**
+   * internal helper prop to remap width style-prop to CSS
+   * @internal
+   */
+  _cssWidth?: string | number
+  /**
+   * internal helper prop to remap height style-prop to CSS
+   * @internal
+   */
+  _cssHeight?: string | number
+}
+
+const SVG_PROPS = ['x', 'y', 'svgWidth', 'svgHeight', '_cssWidth', '_cssHeight']
+
+/**
+ * Foreign Object styled atomic component
+ *
+ * @component
+ */
+export const ForeignObject: PrimitiveComponent<
+  'foreignObject',
+  ForeignObjectProps
+> = styled.foreignObject
+  .withConfig({
+    shouldForwardProp: p => {
+      return (
+        // do not forward style-props or Svg-props to the underlying <svg>
+        (isntStyleProp(p) && !SVG_PROPS.includes(p)) ||
+        // unlike other components; allow x, y, width, and height to be forwarded
+        p === 'width' ||
+        p === 'height' ||
+        p === 'x' ||
+        p === 'y'
+      )
+    },
+  })
+  .attrs(
+    (
+      props: ForeignObjectProps
+    ): React.ComponentProps<PrimitiveComponent<'svg'>> => ({
+      // map the explicit svgWidth/Height props to width/height attrs
+      width: props.svgWidth,
+      height: props.svgHeight,
+      // map width and height style props to internal style props
+      _cssWidth: props.width,
+      _cssHeight: props.height,
+    })
+  )`
+  ${(props: Partial<ForeignObjectProps>) => {
+    const { width, height, ...otherProps } = props
+
+    // replace width and height attrs with internal style props
+    return styleProps({
+      ...otherProps,
+      width: otherProps._cssWidth,
+      height: otherProps._cssHeight,
+    })
+  }}
+`

package/src/primitives/Link.stories.tsx

@@ -0,0 +1,27 @@
+import { Link } from './Link'
+
+import type { Meta, StoryObj } from '@storybook/react'
+
+const meta: Meta<typeof Link> = {
+  title: 'Library/Atoms/Link',
+  component: Link,
+}
+
+export default meta
+
+type Story = StoryObj<typeof Link>
+
+export const Basic: Story = {
+  args: {
+    children: 'hello anchor',
+    href: '#',
+  },
+}
+
+export const External: Story = {
+  args: {
+    children: 'hello opentrons',
+    external: true,
+    href: 'https://www.opentrons.com',
+  },
+}

package/src/primitives/Link.tsx

@@ -0,0 +1,32 @@
+import styled from 'styled-components'
+
+import { styleProps, isntStyleProp } from './style-props'
+
+import type { StyleProps, PrimitiveComponent } from './types'
+import { CURSOR_POINTER } from '../styles'
+
+export interface LinkProps extends StyleProps {
+  /** render link with target="_blank" */
+  external?: boolean
+}
+
+/**
+ * Link primitive
+ *
+ * @component
+ */
+export const Link: PrimitiveComponent<'a', LinkProps> = styled.a
+  .withConfig<LinkProps>({
+    shouldForwardProp: p => isntStyleProp(p) && p !== 'external',
+  })
+  .attrs(
+    (props: LinkProps): React.ComponentProps<PrimitiveComponent<'a'>> => {
+      return props.external === true
+        ? { target: '_blank', rel: 'noopener noreferrer' }
+        : { tabIndex: '0' }
+    }
+  )`
+  text-decoration: none;
+  cursor: ${CURSOR_POINTER};
+  ${styleProps}
+`

package/src/primitives/README.md

@@ -0,0 +1,188 @@
+Primitive components are base-level components that apply very little inherent styling (usually CSS resets) and expose simple props to customize styling or behavior at a low level.
+
+## style props
+
+Style props will pass their value directly into CSS, but for safety, try to use the value constants defined in `components/src/styles`.
+
+### color
+
+| prop name         | css property       |
+| ----------------- | ------------------ |
+| `color`           | `color`            |
+| `backgroundColor` | `background-color` |
+| `opacity`         | `opacity`          |
+
+```js static
+import { Box, C_DARK_GRAY, C_WHITE } from '@opentrons/components'
+
+const GrayBox = () => <Box color={C_WHITE} backgroundColor={C_DARK_GRAY} />
+```
+
+### typography
+
+| prop name       | css property     |
+| --------------- | ---------------- |
+| `fontSize`      | `font-size`      |
+| `fontWeight`    | `font-weight`    |
+| `fontStyle`     | `font-style`     |
+| `lineHeight`    | `line-height`    |
+| `textAlign`     | `text-align`     |
+| `textTransform` | `text-transform` |
+
+```js static
+import {
+  Text,
+  FONT_SIZE_HEADER,
+  FONT_WEIGHT_SEMIBOLD,
+  LINE_HEIGHT_TITLE,
+} from '@opentrons/components'
+
+const Heading = () => (
+  <Text
+    fontSize={FONT_SIZE_HEADER}
+    fontWeight={FONT_WEIGHT_SEMIBOLD}
+    lineHeight={LINE_HEIGHT_TITLE}
+  />
+)
+```
+
+### spacing
+
+| prop name       | css property                       |
+| --------------- | ---------------------------------- |
+| `margin`        | `margin`                           |
+| `marginX`       | `margin-left` and `margin-right`   |
+| `marginY`       | `margin-top` and `margin-bottom`   |
+| `marginTop`     | `margin-top`                       |
+| `marginRight`   | `margin-right`                     |
+| `marginBottom`  | `margin-bottom`                    |
+| `marginLeft`    | `margin-left`                      |
+| `padding`       | `padding`                          |
+| `paddingX`      | `padding-left` and `padding-right` |
+| `paddingY`      | `padding-top` and `padding-bottom` |
+| `paddingTop`    | `padding-top`                      |
+| `paddingRight`  | `padding-right`                    |
+| `paddingBottom` | `padding-bottom`                   |
+| `paddingLeft`   | `padding-left`                     |
+
+```js static
+import { Box, SPACING_AUTO, SPACING_3 } from '@opentrons/components'
+
+const Heading = () => <Box marginX={SPACING_AUTO} paddingY={SPACING_3} />
+```
+
+Note: If you specify both of a shorthand prop and the explicit prop (e.g. `marginX` and `marginLeft`), the more explicit prop will be preferred.
+
+### borders
+
+| prop name      | css property    |
+| -------------- | --------------- |
+| `border`       | `border`        |
+| `borderTop`    | `border-top`    |
+| `borderRight`  | `border-right`  |
+| `borderBottom` | `border-bottom` |
+| `borderLeft`   | `border-left`   |
+| `borderRadius` | `border-radius` |
+| `borderWidth`  | `border-width`  |
+| `borderColor`  | `border-color`  |
+
+```js static
+import {
+  Box,
+  BORDER_SOLID_LIGHT,
+  BORDER_RADIUS_DEFAULT,
+} from '@opentrons/components'
+
+const Heading = () => (
+  <Box border={BORDER_SOLID_LIGHT} borderRadius={BORDER_RADIUS_DEFAULT} />
+)
+```
+
+### flexbox
+
+| prop name        | css property      |
+| ---------------- | ----------------- |
+| `flex`           | `flex`            |
+| `alignItems`     | `align-items`     |
+| `justifyContent` | `justify-content` |
+| `flexDirection`  | `flex-direction`  |
+| `flexWrap`       | `flex-wrap`       |
+
+```js static
+import {
+  Flex,
+  ALIGN_ITEMS_CENTER,
+  JUSTIFY_CONTENT_CENTER,
+} from '@opentrons/components'
+
+const Heading = () => (
+  <Flex
+    alignItems={ALIGN_ITEMS_CENTER}
+    justifyContent={JUSTIFY_CONTENT_CENTER}
+  />
+)
+```
+
+### layout
+
+| prop name   | css property         |
+| ----------- | -------------------- |
+| `display`   | `display`            |
+| `size`      | `width` and `height` |
+| `width`     | `width`              |
+| `minWidth`  | `min-width`          |
+| `maxWidth`  | `max-width`          |
+| `height`    | `height`             |
+| `minHeight` | `min-height`         |
+| `maxHeight` | `max-height`         |
+| `overflow`  | `overflow`           |
+| `overflowX` | `overflow-x`         |
+| `overflowY` | `overflow-y`         |
+
+```js static
+import { Box, SIZE_4, OVERFLOW_HIDDEN } from '@opentrons/components'
+
+const Heading = () => <Box size={SIZE_4} overflow={OVERFLOW_HIDDEN} />
+```
+
+### position
+
+| prop name  | css property |
+| ---------- | ------------ |
+| `position` | `position`   |
+| `zIndex`   | `z-index`    |
+| `top`      | `top`        |
+| `right`    | `right`      |
+| `bottom`   | `bottom`     |
+| `left`     | `left`       |
+
+```js static
+import { Box, POSITION_ABSOLUTE } from '@opentrons/components'
+
+const Fill = () => (
+  <Box position={POSITION_ABSOLUTE} top={0} right={0} bottom={0} left={0} />
+)
+```
+
+## creating custom primitives
+
+If you find yourself in a place where...
+
+- You need a primitive that doesn't yet exist, and
+- It doesn't make sense to add that primitive to the library
+
+...you can create your own primitive with the style props above using `styleProps` (to apply the styles based on props) and `isntStyleProp` (to ensure style props don't get passed down to the DOM):
+
+```js static
+import styled from 'styled-components'
+import { styleProps, isntStyleProp, C_DARK_GRAY } from '@opentrons/components'
+
+import type { PrimitiveComponent } from '@opentrons/components'
+
+export const Gray: PrimitiveComponent<'div'> = styled.div.withConfig({
+  shouldForwardProp: isntStyleProp,
+})`
+  color: ${C_DARK_GRAY};
+  ${styleProps}
+`
+```

package/src/primitives/Svg.stories.tsx

@@ -0,0 +1,36 @@
+import type * as React from 'react'
+import { Svg as SvgComponent } from './Svg'
+
+import type { Story, Meta } from '@storybook/react'
+
+export default {
+  title: 'Library/Atoms/Svg',
+} as Meta
+
+const Template: Story<React.ComponentProps<typeof SvgComponent>> = args => (
+  <SvgComponent {...args} />
+)
+export const Svg = Template.bind({})
+Svg.args = {
+  svgWidth: '300',
+  svgHeight: '300',
+  children: [
+    <rect
+      key="rect"
+      height="40"
+      width="40"
+      x="50"
+      y="50"
+      fill="red"
+      stroke="rebeccapurple"
+    />,
+    <circle
+      key="circle"
+      cx="140"
+      cy="140"
+      r="40"
+      fill="green"
+      stroke="black"
+    />,
+  ],
+}