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

package/src/primitives/Flex.tsx

@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-import { styleProps, isntStyleProp } from './style-props'
+import { isntStyleProp, styleProps } from './style-props'
 
 import type { PrimitiveComponent } from './types'
 

package/src/primitives/ForeignObject.tsx

@@ -1,69 +1,28 @@
-import styled from 'styled-components'
+import type { ReactElement, ReactNode } from 'react'
 
-import { styleProps, isntStyleProp } from './style-props'
-
-import type { ComponentProps } from 'react'
-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
+export interface ForeignObjectProps {
+  width: string | number
+  height: string | number
+  x: string | number
+  y: string | number
+  children?: ReactNode
 }
 
-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,
-    })
-  }}
-`
+export const ForeignObject = ({
+  width,
+  height,
+  x,
+  y,
+  children,
+}: ForeignObjectProps): ReactElement => {
+  return (
+    <foreignObject x={x} y={y} width={width} height={height}>
+      {children}
+    </foreignObject>
+  )
+}

package/src/primitives/Link.tsx

@@ -1,10 +1,10 @@
 import styled from 'styled-components'
 
-import { styleProps, isntStyleProp } from './style-props'
 import { CURSOR_POINTER } from '../styles'
+import { isntStyleProp, styleProps } from './style-props'
 
 import type { ComponentProps } from 'react'
-import type { StyleProps, PrimitiveComponent } from './types'
+import type { PrimitiveComponent, StyleProps } from './types'
 
 export interface LinkProps extends StyleProps {
   /** render link with target="_blank" */

package/src/primitives/README.md

@@ -14,7 +14,6 @@ Style props will pass their value directly into CSS, but for safety, try to use
 
 ```js static
 import { Box, C_DARK_GRAY, C_WHITE } from '@opentrons/components'
-
 const GrayBox = () => <Box color={C_WHITE} backgroundColor={C_DARK_GRAY} />
 ```
 
@@ -31,12 +30,11 @@ const GrayBox = () => <Box color={C_WHITE} backgroundColor={C_DARK_GRAY} />
 
 ```js static
 import {
-  Text,
   FONT_SIZE_HEADER,
   FONT_WEIGHT_SEMIBOLD,
   LINE_HEIGHT_TITLE,
+  Text,
 } from '@opentrons/components'
-
 const Heading = () => (
   <Text
     fontSize={FONT_SIZE_HEADER}
@@ -66,8 +64,7 @@ const Heading = () => (
 | `paddingLeft`   | `padding-left`                     |
 
 ```js static
-import { Box, SPACING_AUTO, SPACING_3 } from '@opentrons/components'
-
+import { Box, SPACING_3, SPACING_AUTO } from '@opentrons/components'
 const Heading = () => <Box marginX={SPACING_AUTO} paddingY={SPACING_3} />
 ```
 
@@ -88,11 +85,10 @@ Note: If you specify both of a shorthand prop and the explicit prop (e.g. `margi
 
 ```js static
 import {
-  Box,
-  BORDER_SOLID_LIGHT,
   BORDER_RADIUS_DEFAULT,
+  BORDER_SOLID_LIGHT,
+  Box,
 } from '@opentrons/components'
-
 const Heading = () => (
   <Box border={BORDER_SOLID_LIGHT} borderRadius={BORDER_RADIUS_DEFAULT} />
 )
@@ -110,11 +106,10 @@ const Heading = () => (
 
 ```js static
 import {
-  Flex,
   ALIGN_ITEMS_CENTER,
+  Flex,
   JUSTIFY_CONTENT_CENTER,
 } from '@opentrons/components'
-
 const Heading = () => (
   <Flex
     alignItems={ALIGN_ITEMS_CENTER}
@@ -140,8 +135,7 @@ const Heading = () => (
 | `overflowY` | `overflow-y`         |
 
 ```js static
-import { Box, SIZE_4, OVERFLOW_HIDDEN } from '@opentrons/components'
-
+import { Box, OVERFLOW_HIDDEN, SIZE_4 } from '@opentrons/components'
 const Heading = () => <Box size={SIZE_4} overflow={OVERFLOW_HIDDEN} />
 ```
 
@@ -158,7 +152,6 @@ const Heading = () => <Box size={SIZE_4} overflow={OVERFLOW_HIDDEN} />
 
 ```js static
 import { Box, POSITION_ABSOLUTE } from '@opentrons/components'
-
 const Fill = () => (
   <Box position={POSITION_ABSOLUTE} top={0} right={0} bottom={0} left={0} />
 )
@@ -175,10 +168,8 @@ If you find yourself in a place where...
 
 ```js static
 import styled from 'styled-components'
-import { styleProps, isntStyleProp, C_DARK_GRAY } from '@opentrons/components'
-
+import { C_DARK_GRAY, isntStyleProp, styleProps } from '@opentrons/components'
 import type { PrimitiveComponent } from '@opentrons/components'
-
 export const Gray: PrimitiveComponent<'div'> = styled.div.withConfig({
   shouldForwardProp: isntStyleProp,
 })`

package/src/primitives/Svg.stories.tsx

@@ -1,7 +1,7 @@
-import type * as React from 'react'
 import { Svg as SvgComponent } from './Svg'
 
-import type { Story, Meta } from '@storybook/react'
+import type { Meta, Story } from '@storybook/react'
+import type * as React from 'react'
 
 export default {
   title: 'Library/Atoms/Svg',

package/src/primitives/Svg.tsx

@@ -1,9 +1,9 @@
 import styled from 'styled-components'
 
-import { styleProps, isntStyleProp } from './style-props'
+import { isntStyleProp, styleProps } from './style-props'
 
 import type { ComponentProps } from 'react'
-import type { StyleProps, PrimitiveComponent } from './types'
+import type { PrimitiveComponent, StyleProps } from './types'
 
 export interface SvgProps extends StyleProps {
   /** attach a width attribute to the <svg> element */

package/src/primitives/Text.stories.tsx

@@ -1,7 +1,7 @@
-import type * as React from 'react'
 import { Text as TextComponent } from './Text'
 
-import type { Story, Meta } from '@storybook/react'
+import type { Meta, Story } from '@storybook/react'
+import type * as React from 'react'
 
 export default {
   title: 'Library/Atoms/Text',

package/src/primitives/Text.tsx

@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-import { styleProps, isntStyleProp } from './style-props'
+import { isntStyleProp, styleProps } from './style-props'
 
 import type { PrimitiveComponent } from './types'
 

package/src/primitives/__tests__/Box.test.tsx

@@ -1,4 +1,5 @@
 import { describe, it } from 'vitest'
+
 describe('Box primitive component', () => {
   it.todo('replace deprecated enzyme test')
 })

package/src/primitives/__tests__/Btn.test.tsx

@@ -1,4 +1,5 @@
 import { describe, it } from 'vitest'
+
 describe('Btn primitive component', () => {
   it.todo('replace deprecated enzyme test')
 })

package/src/primitives/__tests__/Flex.test.tsx

@@ -1,4 +1,5 @@
 import { describe, it } from 'vitest'
+
 describe('Flex primitive component', () => {
   it.todo('replace deprecated enzyme test')
 })

package/src/primitives/__tests__/Link.test.tsx

@@ -1,4 +1,5 @@
 import { describe, it } from 'vitest'
+
 describe('Link primitive component', () => {
   it.todo('replace deprecated enzyme test')
 })

package/src/primitives/__tests__/Svg.test.tsx

@@ -1,4 +1,5 @@
 import { describe, it } from 'vitest'
+
 describe('Svg primitive component', () => {
   it.todo('replace deprecated enzyme test')
 })

package/src/primitives/__tests__/Text.test.tsx

@@ -1,4 +1,5 @@
 import { describe, it } from 'vitest'
+
 describe('Text primitive component', () => {
   it.todo('replace deprecated enzyme test')
 })

package/src/primitives/__tests__/primitives.test.tsx

@@ -1,4 +1,5 @@
 import { describe, it } from 'vitest'
+
 describe('primitive components with style props', () => {
   it.todo('replace deprecated enzyme test')
 })

package/src/primitives/__tests__/style-props.test.tsx

@@ -1,4 +1,5 @@
 import { describe, it } from 'vitest'
+
 describe('style props', () => {
   it.todo('replace deprecated enzyme test')
 })

package/src/primitives/style-props.ts

@@ -3,9 +3,8 @@
 
 import pick from 'lodash/pick'
 
-import type * as Types from './types'
-
 import type { CSSObject } from 'styled-components'
+import type * as Types from './types'
 
 type Text = string | number
 
@@ -65,6 +64,7 @@ const FLEXBOX_PROPS = [
 
 const GRID_PROPS = [
   'columnGap',
+  'rowGap',
   'gridGap',
   'gridTemplateAreas',
   'gridTemplateRows',

package/src/primitives/types.ts

@@ -1,6 +1,6 @@
 // known style types
+import type { CSSProperties, StyledComponent } from 'styled-components'
 import type { ComponentType } from 'react'
-import type { StyledComponent, CSSProperties } from 'styled-components'
 
 export interface ColorProps {
   color?: string

package/src/slotmap/OT2SlotMap.tsx

@@ -1,4 +1,5 @@
 import cx from 'classnames'
+
 import { Icon } from '../icons'
 import styles from './styles.module.css'
 

package/src/slotmap/__tests__/OT2SlotMap.test.tsx

@@ -1,4 +1,5 @@
 import { describe, it } from 'vitest'
+
 describe('SlotMap', () => {
   it.todo('replace deprecated enzyme test')
 })

package/src/slotmap/styles.module.css

@@ -1,8 +1,8 @@
 @import '../index.module.css';
 
 .slot_rect {
-  stroke: var(--c-med-gray);
   fill: none;
+  stroke: var(--c-med-gray);
 }
 
 .slot_occupied {

package/src/structure/LabeledValue.stories.tsx

@@ -1,7 +1,7 @@
-import type * as React from 'react'
 import { LabeledValue as LabeledValueComponent } from './LabeledValue'
 
-import type { Story, Meta } from '@storybook/react'
+import type { Meta, Story } from '@storybook/react'
+import type * as React from 'react'
 
 export default {
   title: 'Library/Molecules/Labeled Value',

package/src/structure/Pill.module.css

@@ -1,9 +1,9 @@
 @import '../index.module.css';
 
 .pill {
+  padding: 0.5em;
   border-radius: var(--bd-radius-pill);
   color: var(--c-white);
-  padding: 0.5em;
 }
 
 .pill:empty::before {

package/src/structure/Splash.module.css

@@ -10,7 +10,7 @@
     position: absolute;
     top: 50%;
     left: 50%;
-    transform: translate(-50%, -50%);
     max-height: 100%;
+    transform: translate(-50%, -50%);
   }
 }

package/src/structure/Splash.stories.tsx

@@ -1,8 +1,9 @@
-import type * as React from 'react'
-import { Splash as SplashComponent } from './Splash'
 import { Box } from '@opentrons/components'
 
-import type { Story, Meta } from '@storybook/react'
+import { Splash as SplashComponent } from './Splash'
+
+import type { Meta, Story } from '@storybook/react'
+import type * as React from 'react'
 
 export default {
   title: 'Library/Molecules/Splash',

package/src/structure/TitleBar.stories.tsx

@@ -1,8 +1,9 @@
-import type * as React from 'react'
+import { Icon, SIZE_1, Text } from '@opentrons/components'
+
 import { TitleBar } from './TitleBar'
-import { Text, Icon, SIZE_1 } from '@opentrons/components'
 
-import type { Story, Meta } from '@storybook/react'
+import type { Meta, Story } from '@storybook/react'
+import type * as React from 'react'
 
 export default {
   title: 'Library/Molecules/TitleBar',

package/src/structure/index.ts

@@ -1,7 +1,5 @@
 // structure components
-
-export * from './TitleBar'
-export * from './Card'
-export * from './Splash'
 export * from './LabeledValue'
 export * from './Pill'
+export * from './Splash'
+export * from './TitleBar'

package/src/structure/structure.module.css

@@ -3,10 +3,10 @@
 
 .title_bar {
   display: flex;
-  align-items: center;
   height: 3rem;
-  text-transform: uppercase;
+  align-items: center;
   background-color: var(--c-dark-gray);
+  text-transform: uppercase;
 }
 
 .title_bar,
@@ -17,8 +17,8 @@
 .title,
 .subtitle,
 .separator {
-  font-size: var(--fs-header);
   margin: 0;
+  font-size: var(--fs-header);
 }
 
 .title,
@@ -27,11 +27,11 @@
 }
 
 .title {
-  white-space: nowrap; /* from legacy --truncate */
   overflow: hidden; /* from legacy --truncate */
-  text-overflow: ellipsis; /* from legacy --truncate */
   min-width: 0; /* from legacy --truncate */
   padding: 0 1.5rem;
+  text-overflow: ellipsis; /* from legacy --truncate */
+  white-space: nowrap; /* from legacy --truncate */
 }
 
 .subtitle {
@@ -56,10 +56,10 @@
   display: inline-block;
   width: 50%;
   padding: 0.25rem 0;
-  font-size: var(--fs-huge);
-  opacity: 0.2;
   background-color: var(--c-med-gray);
   color: white;
+  font-size: var(--fs-huge);
+  opacity: 0.2;
   text-transform: uppercase;
 }
 
@@ -76,20 +76,20 @@
 }
 
 .disabled {
-  pointer-events: none;
   background-color: transparent;
+  pointer-events: none;
 
   & * {
+    background-color: transparent;
     color: var(--c-font-disabled);
     fill: var(--c-font-disabled);
-    background-color: transparent;
   }
 }
 
 .labeled_value {
+  color: var(--c-font-dark); /* from legacy --font-body-1-dark */
   font-size: var(--fs-body-1); /* from legacy --font-body-1-dark */
   font-weight: var(--fw-regular); /* from legacy --font-body-1-dark */
-  color: var(--c-font-dark); /* from legacy --font-body-1-dark */
   line-height: 1.5;
 
   & svg {
@@ -98,9 +98,9 @@
 }
 
 .labeled_value_label {
-  font-weight: var(--fw-semibold);
   margin-top: 0;
   margin-bottom: 0.25rem;
+  font-weight: var(--fw-semibold);
 }
 
 .labeled_value_value {

package/src/styles/colors.module.css

@@ -1,3 +1,4 @@
+/* ToDo this file will be removed once the labware library, designer, and creator are updated */
 :root {
   /* ot brand */
   --c-mustard: #ffd252;