@opentrons/components 0.1.6-alpha.16 → 0.1.6-alpha.17

package/src/primitives/Box.tsx

@@ -0,0 +1,17 @@
+import styled from 'styled-components'
+
+import { styleProps, isntStyleProp } from './style-props'
+
+import type { PrimitiveComponent } from './types'
+
+/**
+ * Simple Box atom. Renders a `div` by default and accepts all primitive styling props.
+ *
+ * @component
+ */
+export const Box: PrimitiveComponent<'div'> = styled.div.withConfig({
+  shouldForwardProp: isntStyleProp,
+})`
+  min-width: 0;
+  ${styleProps}
+`

package/src/primitives/Btn.stories.tsx

@@ -0,0 +1,105 @@
+import type * as React from 'react'
+import {
+  PrimaryBtn,
+  SecondaryBtn,
+  NewPrimaryBtn,
+  NewSecondaryBtn,
+  NewAlertPrimaryBtn,
+  NewAlertSecondaryBtn,
+  LightSecondaryBtn,
+  TertiaryBtn,
+} from './Btn'
+import { Box } from './Box'
+
+import type { Story, Meta } from '@storybook/react'
+
+export default {
+  title: 'Library/Atoms/Btn',
+  argTypes: { onClick: { action: 'clicked' } },
+} as Meta
+
+const PrimaryTemplate: Story<
+  React.ComponentProps<typeof PrimaryBtn>
+> = args => <PrimaryBtn {...args} />
+export const Primary = PrimaryTemplate.bind({})
+Primary.args = {
+  children: 'Confirm and Proceed',
+  title: 'primary button title',
+}
+
+const SecondaryTemplate: Story<
+  React.ComponentProps<typeof SecondaryBtn>
+> = args => <SecondaryBtn {...args} />
+export const Secondary = SecondaryTemplate.bind({})
+Secondary.args = {
+  children: 'Cancel',
+  title: 'secondary button title',
+}
+
+const AppPrimaryTemlate: Story<
+  React.ComponentProps<typeof NewPrimaryBtn>
+> = args => <NewPrimaryBtn {...args} />
+export const AppPrimary = AppPrimaryTemlate.bind({})
+AppPrimary.args = {
+  children: 'Confirm and Proceed',
+  title: 'app primary button title',
+}
+
+const AppSecondaryTemlate: Story<
+  React.ComponentProps<typeof NewSecondaryBtn>
+> = args => <NewSecondaryBtn {...args} />
+export const AppSecondary = AppSecondaryTemlate.bind({})
+AppSecondary.args = {
+  children: 'Confirm and Proceed',
+  title: 'app secondary button title',
+}
+
+const AppAlertPrimaryTemlate: Story<
+  React.ComponentProps<typeof NewAlertPrimaryBtn>
+> = args => <NewAlertPrimaryBtn {...args} />
+export const AppAlertPrimary = AppAlertPrimaryTemlate.bind({})
+AppAlertPrimary.args = {
+  children: 'Cancel',
+  title: 'app alert primary button title',
+}
+
+const AppAlertSecondaryTemlate: Story<
+  React.ComponentProps<typeof NewAlertSecondaryBtn>
+> = args => <NewAlertSecondaryBtn {...args} />
+export const AppAlertSecondary = AppAlertSecondaryTemlate.bind({})
+AppAlertSecondary.args = {
+  children: 'Cancel',
+  title: 'app alert secondary button title',
+}
+
+const LightSecondaryTemplate: Story<
+  React.ComponentProps<typeof LightSecondaryBtn>
+> = args => <LightSecondaryBtn {...args} />
+export const LightSecondary = LightSecondaryTemplate.bind({})
+LightSecondary.decorators = [
+  Story => (
+    <Box backgroundColor="black" size="20rem" padding="2rem">
+      <Story />
+    </Box>
+  ),
+]
+LightSecondary.args = {
+  children: 'Cancel',
+  title: 'secondary button title',
+}
+
+const TertiaryTemplate: Story<
+  React.ComponentProps<typeof TertiaryBtn>
+> = args => <TertiaryBtn {...args} />
+TertiaryTemplate.decorators = [
+  Story => (
+    <Box backgroundColor="black" size="20rem" padding="2rem">
+      <Story />
+    </Box>
+  ),
+]
+export const Tertiary = TertiaryTemplate.bind({})
+Tertiary.args = {
+  children: 'Perform Side-Effect',
+  title: 'tertiary button title',
+}

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}
+`