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

package/src/atoms/Tooltip/Tooltip.stories.tsx

@@ -0,0 +1,99 @@
+import * as React from 'react'
+import { Flex, Link } from '../../primitives'
+import { ALIGN_CENTER, JUSTIFY_CENTER } from '../../styles'
+import { TYPOGRAPHY } from '../../ui-style-constants'
+import { COLORS } from '../../helix-design-system'
+import { PrimaryButton } from '../buttons'
+import {
+  TOOLTIP_AUTO,
+  TOOLTIP_TOP_START,
+  useHoverTooltip,
+} from '../../tooltips'
+
+import { Tooltip } from './index'
+import type { Story, Meta } from '@storybook/react'
+
+export default {
+  title: 'App/Atoms/Tooltip',
+  decorators: [
+    Story => (
+      <Flex
+        justifyContent={JUSTIFY_CENTER}
+        alignItems={ALIGN_CENTER}
+        height="8rem"
+        width="100%"
+        backgroundColor={COLORS.grey10}
+      >
+        <Story />
+      </Flex>
+    ),
+  ],
+} as Meta
+
+// WithHover: Disabled button with tooltip app's general use case
+const WithHoverTemplate: Story<React.ComponentProps<typeof Tooltip>> = args => {
+  const { key, children, placement } = args
+  const [targetProps, tooltipProps] = useHoverTooltip({ placement })
+  return (
+    <>
+      <PrimaryButton disabled={true} {...targetProps}>
+        Hover me
+      </PrimaryButton>
+      <Tooltip key={key} tooltipProps={tooltipProps}>
+        {children}
+      </Tooltip>
+    </>
+  )
+}
+
+export const WithHoverTooltip = WithHoverTemplate.bind({})
+WithHoverTooltip.args = {
+  key: 'tooltipKey',
+  children: 'tooltip text',
+  placement: TOOLTIP_AUTO,
+}
+
+const WithClickTemplate: Story<React.ComponentProps<typeof Tooltip>> = args => {
+  const { key, children, width, placement } = args
+  const [showToolTip, setShowToolTip] = React.useState<boolean>(false)
+  const [targetProps, tooltipProps] = useHoverTooltip({
+    placement,
+  })
+
+  const handleCopy = async (): Promise<void> => {
+    setShowToolTip(true)
+  }
+
+  React.useEffect(() => {
+    const timer = setTimeout(() => {
+      setShowToolTip(false)
+    }, 2000)
+    return () => {
+      clearTimeout(timer)
+    }
+  }, [showToolTip])
+
+  return (
+    <Link
+      fontSize={TYPOGRAPHY.fontSizeP}
+      onClick={handleCopy}
+      role="button"
+      {...targetProps}
+    >
+      Click me
+      {showToolTip && (
+        <Tooltip key={key} width={width} tooltipProps={tooltipProps}>
+          {children}
+        </Tooltip>
+      )}
+    </Link>
+  )
+}
+
+export const WithClickTooltip = WithClickTemplate.bind({})
+WithClickTooltip.args = {
+  key: 'tooltipKey',
+  children: 'tooltip text',
+  width: '5rem',
+  placement: TOOLTIP_TOP_START,
+}

package/src/atoms/Tooltip/index.tsx

@@ -0,0 +1,38 @@
+import type * as React from 'react'
+
+import { COLORS } from '../../helix-design-system'
+import { TYPOGRAPHY } from '../../ui-style-constants'
+import { LegacyTooltip } from '../../tooltips'
+import { FLEX_MAX_CONTENT } from '../../styles'
+
+import type { UseTooltipResultTooltipProps } from '../../tooltips'
+import type { StyleProps } from '../../primitives'
+
+export interface TooltipProps extends StyleProps {
+  children: React.ReactNode
+  tooltipProps: UseTooltipResultTooltipProps & { visible: boolean }
+  key?: string
+}
+
+export function Tooltip(props: TooltipProps): JSX.Element {
+  const {
+    children,
+    tooltipProps,
+    width = FLEX_MAX_CONTENT,
+    maxWidth = '8.75rem',
+    ...styleProps
+  } = props
+
+  return (
+    <LegacyTooltip
+      {...tooltipProps}
+      backgroundColor={COLORS.black90}
+      fontSize={TYPOGRAPHY.fontSizeCaption}
+      width={width}
+      maxWidth={maxWidth}
+      {...styleProps}
+    >
+      {children}
+    </LegacyTooltip>
+  )
+}

package/src/atoms/buttons/AlertPrimaryButton.tsx

@@ -0,0 +1,26 @@
+import styled from 'styled-components'
+import { TYPOGRAPHY, SPACING } from '../../ui-style-constants'
+import { BORDERS, COLORS } from '../../helix-design-system'
+import { NewAlertPrimaryBtn, styleProps } from '../../primitives'
+
+export const AlertPrimaryButton = styled(NewAlertPrimaryBtn)`
+  background-color: ${COLORS.red50};
+  border-radius: ${BORDERS.borderRadius8};
+  padding-left: ${SPACING.spacing16};
+  padding-right: ${SPACING.spacing16};
+  text-transform: ${TYPOGRAPHY.textTransformNone};
+  box-shadow: 0 0 0;
+  ${TYPOGRAPHY.pSemiBold}
+
+  ${styleProps}
+
+  &:hover {
+    box-shadow: 0 0 0;
+    background-color: ${COLORS.red55};
+  }
+
+  &:disabled {
+    background-color: ${COLORS.grey30};
+    color: ${COLORS.grey40};
+  }
+`

package/src/atoms/buttons/AltPrimaryButton.tsx

@@ -0,0 +1,31 @@
+import styled from 'styled-components'
+
+import { COLORS } from '../../helix-design-system'
+import { styleProps } from '../../primitives'
+import { PrimaryButton } from '../..'
+
+export const AltPrimaryButton = styled(PrimaryButton)`
+  background-color: ${COLORS.grey30};
+  color: ${COLORS.black90};
+
+  ${styleProps}
+
+  &:focus {
+    background-color: ${COLORS.grey35};
+    box-shadow: none;
+  }
+
+  &:active {
+    background-color: ${COLORS.grey40};
+  }
+
+  &:hover {
+    box-shadow: 0 0 0;
+    background-color: ${COLORS.grey35};
+  }
+
+  &:disabled {
+    background-color: ${COLORS.grey30};
+    color: ${COLORS.grey40};
+  }
+`

package/src/atoms/buttons/EmptySelectorButton.stories.tsx

@@ -0,0 +1,36 @@
+import { Box } from '../../primitives'
+import { EmptySelectorButton as EmptySelectorButtonComponent } from './EmptySelectorButton'
+import type { Meta, StoryObj } from '@storybook/react'
+
+const meta: Meta<typeof EmptySelectorButtonComponent> = {
+  title: 'Library/Atoms/Buttons/EmptySelectorButton',
+  component: EmptySelectorButtonComponent,
+  argTypes: {
+    textAlignment: {
+      controls: {
+        type: 'select',
+        options: ['left', 'middle'],
+      },
+      defaultValue: 'left',
+    },
+  },
+  decorators: [
+    (Story, context) => (
+      <Box width="39.25rem" height="8.5rem">
+        <Story id="content" />
+      </Box>
+    ),
+  ],
+}
+export default meta
+
+type Story = StoryObj<typeof EmptySelectorButtonComponent>
+
+export const EmptySelectorButton: Story = {
+  args: {
+    text: 'mock text',
+    iconName: 'plus',
+    textAlignment: 'left',
+    onClick: () => {},
+  },
+}

package/src/atoms/buttons/EmptySelectorButton.tsx

@@ -0,0 +1,83 @@
+import styled from 'styled-components'
+import { Flex } from '../../primitives'
+import {
+  ALIGN_CENTER,
+  CURSOR_DEFAULT,
+  CURSOR_POINTER,
+  FLEX_MAX_CONTENT,
+  Icon,
+  JUSTIFY_CENTER,
+  JUSTIFY_START,
+  SPACING,
+  StyledText,
+} from '../../index'
+import { BORDERS, COLORS } from '../../helix-design-system'
+import type { IconName } from '../../index'
+interface EmptySelectorButtonProps {
+  onClick: () => void
+  text: string
+  textAlignment: 'left' | 'middle'
+  iconName?: IconName
+  disabled?: boolean
+}
+
+//  used for helix and Opentrons Ai
+export function EmptySelectorButton(
+  props: EmptySelectorButtonProps
+): JSX.Element {
+  const { onClick, text, iconName, textAlignment, disabled = false } = props
+
+  return (
+    <StyledButton onClick={onClick} disabled={disabled}>
+      <Flex
+        gridGap={SPACING.spacing4}
+        padding={SPACING.spacing12}
+        color={disabled ? COLORS.grey40 : COLORS.black90}
+        border={`2px dashed ${disabled ? COLORS.grey40 : COLORS.blue50}`}
+        borderRadius={BORDERS.borderRadius8}
+        width="100%"
+        height="100%"
+        alignItems={ALIGN_CENTER}
+        data-testid="EmptySelectorButton_container"
+        justifyContent={
+          textAlignment === 'middle' ? JUSTIFY_CENTER : JUSTIFY_START
+        }
+      >
+        {iconName != null ? (
+          <Icon
+            name={iconName}
+            size="1.25rem"
+            data-testid={`EmptySelectorButton_${iconName}`}
+          />
+        ) : null}
+        <StyledText desktopStyle="bodyDefaultSemiBold">{text}</StyledText>
+      </Flex>
+    </StyledButton>
+  )
+}
+
+interface ButtonProps {
+  disabled: boolean
+}
+
+const StyledButton = styled.button<ButtonProps>`
+  border: none;
+  width: ${FLEX_MAX_CONTENT};
+  height: ${FLEX_MAX_CONTENT};
+  cursor: ${CURSOR_POINTER};
+  background-color: ${COLORS.blue30};
+  border-radius: ${BORDERS.borderRadius8};
+
+  &:focus-visible {
+    outline: 2px solid ${COLORS.white};
+    box-shadow: 0 0 0 4px ${COLORS.blue50};
+    border-radius: ${BORDERS.borderRadius8};
+  }
+  &:hover {
+    background-color: ${COLORS.blue35};
+  }
+  &:disabled {
+    background-color: ${COLORS.grey20};
+    cursor: ${CURSOR_DEFAULT};
+  }
+`

package/src/atoms/buttons/LargeButton.stories.tsx

@@ -0,0 +1,99 @@
+import { ICON_DATA_BY_NAME } from '../../icons'
+import { SPACING } from '../../ui-style-constants'
+import { Box } from '../../primitives'
+import { COLORS } from '../../helix-design-system'
+import { LargeButton } from './LargeButton'
+
+import type { Meta, StoryObj } from '@storybook/react'
+
+const meta: Meta<typeof LargeButton> = {
+  title: 'Library/Atoms/Buttons/LargeButton',
+  component: LargeButton,
+  argTypes: {
+    onClick: { action: 'clicked' },
+    iconName: {
+      control: {
+        type: 'select',
+      },
+      options: Object.keys(ICON_DATA_BY_NAME),
+    },
+  },
+  parameters: {
+    viewport: {
+      defaultViewport: 'Touchscreen',
+    },
+    pseudo: {
+      rootSelector: '#content',
+    },
+  },
+  decorators: [
+    (Story, context) => (
+      <Box
+        width={'fit-content'}
+        padding={SPACING.spacing32}
+        backgroundColor={
+          ['alertStroke', 'alertAlt'].includes(context.args.buttonType)
+            ? COLORS.black90
+            : COLORS.white
+        }
+      >
+        <Story id={'content'} />
+      </Box>
+    ),
+  ],
+}
+
+export default meta
+
+type Story = StoryObj<typeof LargeButton>
+
+export const Primary: Story = {
+  args: {
+    buttonText: 'Button text',
+    disabled: false,
+    iconName: 'play-round-corners',
+  },
+}
+export const Secondary: Story = {
+  args: {
+    buttonText: 'Button text',
+    buttonType: 'secondary',
+    disabled: false,
+    iconName: 'build',
+  },
+}
+export const Alert: Story = {
+  args: {
+    buttonText: 'Button text',
+    buttonType: 'alert',
+    disabled: false,
+    iconName: 'reset',
+  },
+}
+
+export const AlertStroke: Story = {
+  args: {
+    buttonType: 'alertStroke',
+    buttonText: 'Button text',
+    disabled: false,
+    iconName: 'ot-alert',
+  },
+}
+
+export const AlertAlt: Story = {
+  args: {
+    buttonType: 'alertAlt',
+    buttonText: 'Button text',
+    disabled: false,
+    iconName: 'ot-check',
+  },
+}
+
+export const Stroke: Story = {
+  args: {
+    buttonType: 'stroke',
+    buttonText: 'Button text',
+    disabled: false,
+    iconName: 'ot-check',
+  },
+}