@opentrons/components 0.1.7-alpha.1 → 0.2.0-alpha.1

package/src/primitives/Box.stories.tsx

@@ -1,25 +0,0 @@
-import { BORDERS, COLORS } from '../helix-design-system'
-import { SPACING } from '../ui-style-constants'
-import { Box as BoxComponent } from './Box'
-
-import type { Meta, StoryObj } from '@storybook/react'
-
-const meta: Meta<typeof BoxComponent> = {
-  title: 'Library/Atoms/Box',
-  component: BoxComponent,
-}
-
-export default meta
-
-type Story = StoryObj<typeof BoxComponent>
-
-export const Box: Story = {
-  args: {
-    children:
-      'This is a simple box atom that accepts all primitive styling props.',
-    backgroundColor: COLORS.grey60,
-    border: `1px ${BORDERS.styleSolid} black`,
-    padding: SPACING.spacing16,
-    maxWidth: '20rem',
-  },
-}

package/src/primitives/Box.tsx

@@ -1,17 +0,0 @@
-import styled from 'styled-components'
-
-import { isntStyleProp, styleProps } 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

@@ -1,105 +0,0 @@
-import { Box } from './Box'
-import {
-  LightSecondaryBtn,
-  NewAlertPrimaryBtn,
-  NewAlertSecondaryBtn,
-  NewPrimaryBtn,
-  NewSecondaryBtn,
-  PrimaryBtn,
-  SecondaryBtn,
-  TertiaryBtn,
-} from './Btn'
-
-import type { Meta, Story } from '@storybook/react'
-import type * as React from '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

@@ -1,267 +0,0 @@
-import styled, { css } from 'styled-components'
-
-import * as Styles from '../styles'
-import { RESPONSIVENESS } from '../ui-style-constants'
-import { isntStyleProp, styleProps } from './style-props'
-
-import type { StyledComponent } from 'styled-components'
-import type { HTMLProps } from 'react'
-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: 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

@@ -1,50 +0,0 @@
-import { LegacyStyledText } from '../atoms/StyledText'
-import { BORDERS, COLORS } from '../helix-design-system'
-import { Box, Flex as FlexComponent } from '../primitives'
-import { DIRECTION_COLUMN, JUSTIFY_SPACE_AROUND } from '../styles'
-import { SPACING } from '../ui-style-constants'
-
-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

@@ -1,17 +0,0 @@
-import styled from 'styled-components'
-
-import { isntStyleProp, styleProps } 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

@@ -1,69 +0,0 @@
-import styled from 'styled-components'
-
-import { isntStyleProp, styleProps } from './style-props'
-
-import type { ComponentProps } from 'react'
-import type { PrimitiveComponent, StyleProps } 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): 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

@@ -1,27 +0,0 @@
-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

@@ -1,33 +0,0 @@
-import styled from 'styled-components'
-
-import { CURSOR_POINTER } from '../styles'
-import { isntStyleProp, styleProps } from './style-props'
-
-import type { ComponentProps } from 'react'
-import type { PrimitiveComponent, StyleProps } from './types'
-
-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): ComponentProps<PrimitiveComponent<'a'>> => {
-      return props.external === true
-        ? { target: '_blank', rel: 'noopener noreferrer' }
-        : { tabIndex: '0' }
-    }
-  )`
-  text-decoration: none;
-  cursor: ${CURSOR_POINTER};
-  ${styleProps}
-`