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

package/src/organisms/DeckLabelSet/index.tsx

@@ -0,0 +1,69 @@
+import * as React from 'react'
+import styled from 'styled-components'
+import { Box } from '../../primitives'
+import { BORDERS, COLORS } from '../../helix-design-system'
+import { RobotCoordsForeignDiv } from '../../hardware-sim'
+
+import { DeckLabel } from '../../molecules/DeckLabel'
+import { SPACING } from '../../ui-style-constants'
+
+import type { DeckLabelProps } from '../../molecules/DeckLabel'
+
+interface DeckLabelSetProps {
+  deckLabels: DeckLabelProps[]
+  x: number
+  y: number
+  width: number
+  height: number
+}
+
+const DeckLabelSetComponent = (
+  props: DeckLabelSetProps,
+  ref: React.ForwardedRef<HTMLDivElement>
+): JSX.Element => {
+  const { deckLabels, x, y, width, height } = props
+
+  return (
+    <RobotCoordsForeignDiv x={x} y={y}>
+      <StyledBox width={width} height={height} data-testid="DeckLabeSet" />
+      <LabelContainer ref={ref}>
+        {deckLabels.length > 0
+          ? deckLabels.map((deckLabel, index) => (
+              <DeckLabel
+                key={`DeckLabel_${index}`}
+                maxWidth={`calc(${width}px - ${SPACING.spacing16})`}
+                {...deckLabel}
+                isLast={deckLabels.length - 1 === index}
+              />
+            ))
+          : null}
+      </LabelContainer>
+    </RobotCoordsForeignDiv>
+  )
+}
+
+export const DeckLabelSet = React.forwardRef<HTMLDivElement, DeckLabelSetProps>(
+  DeckLabelSetComponent
+)
+
+const StyledBox = styled(Box)`
+  border-radius: ${BORDERS.borderRadius4};
+  border: 1.5px solid ${COLORS.blue50};
+`
+
+const LabelContainer = styled.div`
+  padding-left: ${SPACING.spacing12};
+  & > *:not(:first-child):not(:last-child) {
+    border-bottom-right-radius: ${BORDERS.borderRadius4};
+    border-top-right-radius: ${BORDERS.borderRadius4};
+  }
+
+  & > *:first-child {
+    border-bottom-right-radius: ${BORDERS.borderRadius4};
+  }
+
+  & > *:last-child {
+    border-bottom-left-radius: ${BORDERS.borderRadius4};
+    border-bottom-right-radius: ${BORDERS.borderRadius4};
+  }
+`

package/src/organisms/EndUserAgreementFooter/index.tsx

@@ -0,0 +1,49 @@
+import { StyledText } from '../../atoms'
+import { COLORS } from '../../helix-design-system'
+import { Flex, Link } from '../../primitives'
+import {
+  ALIGN_CENTER,
+  DIRECTION_COLUMN,
+  TEXT_DECORATION_UNDERLINE,
+} from '../../styles'
+import { SPACING } from '../../ui-style-constants'
+
+const PRIVACY_POLICY_URL = 'https://opentrons.com/privacy-policy'
+const EULA_URL = 'https://opentrons.com/eula'
+
+export function EndUserAgreementFooter(): JSX.Element {
+  return (
+    <Flex
+      backgroundColor={COLORS.grey10}
+      padding={SPACING.spacing24}
+      width="100%"
+      alignItems={ALIGN_CENTER}
+      flexDirection={DIRECTION_COLUMN}
+      gridGap={SPACING.spacing8}
+    >
+      <StyledText desktopStyle="captionRegular">
+        By continuing, you agree to the Opentrons{' '}
+        <Link
+          external
+          href={PRIVACY_POLICY_URL}
+          color={COLORS.black90}
+          textDecoration={TEXT_DECORATION_UNDERLINE}
+        >
+          privacy policy
+        </Link>{' '}
+        and{' '}
+        <Link
+          external
+          href={EULA_URL}
+          color={COLORS.black90}
+          textDecoration={TEXT_DECORATION_UNDERLINE}
+        >
+          end user license agreement
+        </Link>
+      </StyledText>
+      <StyledText desktopStyle="captionRegular">
+        Copyright © 2024 Opentrons
+      </StyledText>
+    </Flex>
+  )
+}

package/src/organisms/Toolbox/Toolbox.stories.tsx

@@ -0,0 +1,23 @@
+import { Toolbox as ToolboxComponent } from './index'
+import type { Meta, StoryObj } from '@storybook/react'
+
+const meta: Meta<typeof ToolboxComponent> = {
+  title: 'Library/Organisms/Toolbox',
+  component: ToolboxComponent,
+  decorators: [Story => <Story />],
+}
+
+export default meta
+type Story = StoryObj<typeof ToolboxComponent>
+
+export const Toolbox: Story = {
+  args: {
+    title: 'Header',
+    children: <div>Slot Component: Replace me using the component panel.</div>,
+    confirmButtonText: 'Done',
+    onCloseClick: () => {},
+    titleIconName: 'swap-horizontal',
+    closeButtonText: 'Text link',
+    onConfirmClick: () => {},
+  },
+}

package/src/organisms/Toolbox/index.tsx

@@ -0,0 +1,160 @@
+import { useEffect, useRef, useState } from 'react'
+import { Box, Btn, Flex } from '../../primitives'
+import {
+  ALIGN_CENTER,
+  DIRECTION_COLUMN,
+  JUSTIFY_SPACE_BETWEEN,
+  NO_WRAP,
+  POSITION_FIXED,
+} from '../../styles'
+import { BORDERS, COLORS } from '../../helix-design-system'
+import { SPACING } from '../../ui-style-constants'
+import { PrimaryButton } from '../../atoms'
+import { textDecorationUnderline } from '../../ui-style-constants/typography'
+
+export interface ToolboxProps {
+  title: JSX.Element
+  children: React.ReactNode
+  disableCloseButton?: boolean
+  width?: string
+  height?: string
+  confirmButtonText?: string
+  onConfirmClick?: () => void
+  confirmButton?: JSX.Element
+  onCloseClick?: () => void
+  closeButton?: JSX.Element
+  side?: 'left' | 'right'
+  horizontalSide?: 'top' | 'bottom'
+  titlePadding?: string
+  childrenPadding?: string
+  subHeader?: JSX.Element | null
+  secondaryHeaderButton?: JSX.Element
+  position?: string
+}
+
+export function Toolbox(props: ToolboxProps): JSX.Element {
+  const {
+    title,
+    children,
+    confirmButtonText,
+    onCloseClick,
+    onConfirmClick,
+    closeButton,
+    height = '100%',
+    disableCloseButton = false,
+    width = '19.5rem',
+    side = 'right',
+    horizontalSide = 'bottom',
+    confirmButton,
+    titlePadding = SPACING.spacing16,
+    childrenPadding = SPACING.spacing16,
+    subHeader,
+    secondaryHeaderButton,
+    position = POSITION_FIXED,
+  } = props
+
+  const slideOutRef = useRef<HTMLDivElement>(null)
+  const [isScrolledToBottom, setIsScrolledToBottom] = useState<boolean>(false)
+  const handleScroll = (): void => {
+    if (slideOutRef.current == null) return
+    const { scrollTop, scrollHeight, clientHeight } = slideOutRef.current
+    if (scrollTop + clientHeight === scrollHeight) {
+      setIsScrolledToBottom(true)
+    } else {
+      setIsScrolledToBottom(false)
+    }
+  }
+
+  useEffect(() => {
+    handleScroll()
+  }, [slideOutRef])
+
+  const positionStyles =
+    position === POSITION_FIXED
+      ? {
+          ...(side === 'right' && { right: '0' }),
+          ...(side === 'left' && { left: '0' }),
+          ...(horizontalSide === 'bottom' && { bottom: '0' }),
+          ...(horizontalSide === 'top' && { top: '5rem' }),
+          zIndex: 10,
+        }
+      : {}
+  return (
+    <Flex
+      cursor="auto"
+      backgroundColor={COLORS.white}
+      boxShadow="0px 3px 6px rgba(0, 0, 0, 0.23)"
+      height={height}
+      {...positionStyles}
+      borderRadius={BORDERS.borderRadius8}
+      width={width}
+      flex="0"
+    >
+      <Flex
+        width={width}
+        height="100%"
+        flexDirection={DIRECTION_COLUMN}
+        justifyContent={JUSTIFY_SPACE_BETWEEN}
+      >
+        <Flex
+          padding={titlePadding}
+          flexDirection={DIRECTION_COLUMN}
+          borderBottom={`1px solid ${COLORS.grey30}`}
+        >
+          {subHeader != null ? subHeader : null}
+          <Flex
+            justifyContent={JUSTIFY_SPACE_BETWEEN}
+            alignItems={ALIGN_CENTER}
+            gridGap={SPACING.spacing12}
+          >
+            {title}
+            <Flex gridGap={SPACING.spacing4}>
+              {secondaryHeaderButton != null ? secondaryHeaderButton : null}
+              {onCloseClick != null && closeButton != null ? (
+                <Btn
+                  disabled={disableCloseButton}
+                  onClick={onCloseClick}
+                  textDecoration={textDecorationUnderline}
+                  data-testid="Toolbox_closeButton"
+                  whiteSpace={NO_WRAP}
+                >
+                  {closeButton}
+                </Btn>
+              ) : null}
+            </Flex>
+          </Flex>
+        </Flex>
+        <Box
+          padding={childrenPadding}
+          flex="1 1 auto"
+          overflowY="auto"
+          ref={slideOutRef}
+          onScroll={handleScroll}
+        >
+          {children}
+        </Box>
+        {(onConfirmClick != null && confirmButtonText != null) ||
+        confirmButton != null ? (
+          <Box
+            padding={SPACING.spacing16}
+            boxShadow={isScrolledToBottom ? 'none' : '0px -4px 12px #0000001a'}
+            width="100%"
+            borderTop={`1px solid ${COLORS.grey30}`}
+            alignItems={ALIGN_CENTER}
+          >
+            {onConfirmClick != null && confirmButtonText != null ? (
+              <PrimaryButton
+                width="100%"
+                data-testid="Toolbox_confirmButton"
+                onClick={onConfirmClick}
+              >
+                {confirmButtonText}
+              </PrimaryButton>
+            ) : null}
+            {confirmButton != null ? confirmButton : null}
+          </Box>
+        ) : null}
+      </Flex>
+    </Flex>
+  )
+}

package/src/organisms/index.ts

@@ -0,0 +1,3 @@
+export * from './DeckLabelSet'
+export * from './EndUserAgreementFooter'
+export * from './Toolbox'

package/src/primitives/Box.stories.tsx

@@ -0,0 +1,25 @@
+import { COLORS, BORDERS } 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

@@ -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',
+}