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

package/src/atoms/Toast/__tests__/Toast.test.tsx

@@ -1,8 +1,11 @@
-import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
 import '@testing-library/jest-dom/vitest'
+
 import { act, fireEvent, screen } from '@testing-library/react'
-import { renderWithProviders } from '../../../testing/utils'
+
 import { Toast, TOAST_ANIMATION_DURATION } from '..'
+import { renderWithProviders } from '../../../testing/utils'
 
 import type { ComponentProps } from 'react'
 

package/src/atoms/Toast/index.tsx

@@ -1,11 +1,9 @@
 import { useState } from 'react'
 import { css } from 'styled-components'
 
-import { Btn, Flex, Link } from '../../primitives'
-import { Icon } from '../../icons'
 import { BORDERS, COLORS } from '../../helix-design-system'
-import { SPACING, TYPOGRAPHY } from '../../ui-style-constants'
-import { truncateString } from '../../utils'
+import { Icon } from '../../icons'
+import { Btn, Flex, Link } from '../../primitives'
 import {
   ALIGN_CENTER,
   DIRECTION_COLUMN,
@@ -13,14 +11,17 @@ import {
   JUSTIFY_SPACE_BETWEEN,
   NO_WRAP,
 } from '../../styles'
-import { LegacyStyledText } from '../StyledText'
+import { SPACING, TYPOGRAPHY } from '../../ui-style-constants'
+import { truncateString } from '../../utils'
+import { StyledText } from '../StyledText'
+
 import type {
   DefaultTheme,
   FlattenSimpleInterpolation,
   ThemedCssFunction,
 } from 'styled-components'
-import type { StyleProps } from '../../primitives'
 import type { IconName, IconProps } from '../../icons'
+import type { StyleProps } from '../../primitives'
 
 export const SUCCESS_TOAST: 'success' = 'success'
 export const WARNING_TOAST: 'warning' = 'warning'
@@ -185,20 +186,6 @@ export function Toast(props: ToastProps): JSX.Element {
 
   const ODD_ANIMATION_NONE = css``
 
-  const TEXT_STYLE = css`
-    color: ${COLORS.black90};
-    font-size: ${showODDStyle ? TYPOGRAPHY.fontSize22 : TYPOGRAPHY.fontSizeP};
-    font-weight: ${showODDStyle
-      ? TYPOGRAPHY.fontWeightSemiBold
-      : TYPOGRAPHY.fontWeightRegular};
-    line-height: ${showODDStyle
-      ? TYPOGRAPHY.lineHeight28
-      : TYPOGRAPHY.lineHeight20};
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  `
-
   let oddAnimation: FlattenSimpleInterpolation | ThemedCssFunction<DefaultTheme>
 
   if (isClosed) {
@@ -346,19 +333,9 @@ export function Toast(props: ToastProps): JSX.Element {
           width={showODDStyle ? 'auto' : '100%'}
         >
           {headingText.length > 0 ? (
-            <LegacyStyledText
-              color={COLORS.black90}
-              fontSize={
-                showODDStyle ? TYPOGRAPHY.fontSize22 : TYPOGRAPHY.fontSizeP
-              }
-              fontWeight={
-                showODDStyle
-                  ? TYPOGRAPHY.fontWeightBold
-                  : TYPOGRAPHY.fontWeightSemiBold
-              }
-              lineHeight={
-                showODDStyle ? TYPOGRAPHY.lineHeight28 : TYPOGRAPHY.lineHeight20
-              }
+            <StyledText
+              oddStyle="bodyTextSemiBold"
+              desktopStyle="bodyDefaultRegular"
               marginRight={showODDStyle ? SPACING.spacing4 : undefined}
               maxWidth={showODDStyle ? '30.375rem' : 'auto'}
               overflow="hidden"
@@ -366,59 +343,77 @@ export function Toast(props: ToastProps): JSX.Element {
               whiteSpace={NO_WRAP}
             >
               {headingText}
-            </LegacyStyledText>
+            </StyledText>
           ) : null}
           <Flex alignItems={ALIGN_CENTER}>
-            <LegacyStyledText css={TEXT_STYLE}>{message}</LegacyStyledText>
-            {linkText != null ? (
-              <Link
-                role="button"
-                onClick={() => {
-                  onLinkClick()
-                  onCloseHandler()
-                }}
-                css={TEXT_STYLE}
-                marginLeft={SPACING.spacing4}
-                marginRight={SPACING.spacing8}
-                textDecoration={TYPOGRAPHY.textDecorationUnderline}
-              >
-                {linkText}
-              </Link>
-            ) : null}
+            <StyledText
+              oddStyle="bodyTextSemiBold"
+              desktopStyle="bodyDefaultRegular"
+              overflow="hidden"
+              text-overflow="ellipsis"
+              white-space="nowrap"
+            >
+              {message}
+            </StyledText>
           </Flex>
         </Flex>
       </Flex>
-      {closeText ? (
-        <Link
-          role="button"
-          onClick={() => {
-            onCloseHandler()
-          }}
-          padding={`${SPACING.spacing16} ${SPACING.spacing24}`}
-        >
-          <LegacyStyledText
-            color={COLORS.black90}
-            fontSize={
-              showODDStyle ? TYPOGRAPHY.fontSize22 : TYPOGRAPHY.fontSizeP
-            }
-            fontWeight={
-              showODDStyle
-                ? TYPOGRAPHY.fontWeightSemiBold
-                : TYPOGRAPHY.fontWeightRegular
-            }
-            lineHeight={
-              showODDStyle ? TYPOGRAPHY.lineHeight28 : TYPOGRAPHY.lineHeight20
-            }
-            textDecoration={
-              showODDStyle ? 'none' : TYPOGRAPHY.textDecorationUnderline
-            }
-            textTransform={TYPOGRAPHY.textTransformCapitalize}
-            whiteSpace={NO_WRAP}
+
+      <Flex alignItems={ALIGN_CENTER}>
+        {linkText ? (
+          <Link
+            role="button"
+            onClick={() => {
+              onLinkClick()
+              onCloseHandler()
+            }}
+            marginLeft={SPACING.spacing4}
+            marginRight={SPACING.spacing8}
           >
-            {closeText}
-          </LegacyStyledText>
-        </Link>
-      ) : null}
+            <StyledText
+              fontSize={
+                showODDStyle ? TYPOGRAPHY.fontSize22 : TYPOGRAPHY.fontSizeP
+              }
+              fontWeight={
+                showODDStyle
+                  ? TYPOGRAPHY.fontWeightSemiBold
+                  : TYPOGRAPHY.fontWeightRegular
+              }
+              lineHeight={
+                showODDStyle ? TYPOGRAPHY.lineHeight28 : TYPOGRAPHY.lineHeight20
+              }
+              textDecoration={
+                showODDStyle ? 'none' : TYPOGRAPHY.textDecorationUnderline
+              }
+              textTransform={TYPOGRAPHY.textTransformCapitalize}
+              whiteSpace={NO_WRAP}
+            >
+              {linkText}
+            </StyledText>
+          </Link>
+        ) : null}
+        {closeText ? (
+          <Link
+            role="button"
+            onClick={() => {
+              onCloseHandler()
+            }}
+            padding={`${SPACING.spacing16} ${SPACING.spacing24}`}
+          >
+            <StyledText
+              oddStyle="bodyTextSemiBold"
+              desktopStyle="bodyDefaultRegular"
+              textDecoration={
+                showODDStyle ? 'none' : TYPOGRAPHY.textDecorationUnderline
+              }
+              textTransform={TYPOGRAPHY.textTransformCapitalize}
+              whiteSpace={NO_WRAP}
+            >
+              {closeText}
+            </StyledText>
+          </Link>
+        ) : null}
+      </Flex>
       {!closeText && closeButton ? (
         <Btn
           onClick={() => {

package/src/atoms/ToggleGroup/ToggleGroup.stories.tsx

@@ -1,5 +1,7 @@
 import * as React from 'react'
+
 import { ToggleGroup as ToggleGroupComponent } from './index'
+
 import type { Meta, StoryObj } from '@storybook/react'
 
 const meta: Meta<typeof ToggleGroupComponent> = {

package/src/atoms/ToggleGroup/__tests__/ToggleGroup.test.tsx

@@ -1,5 +1,6 @@
-import { describe, it, expect, vi } from 'vitest'
 import { fireEvent, screen } from '@testing-library/react'
+import { describe, expect, it, vi } from 'vitest'
+
 import { renderWithProviders } from '../../../testing/utils'
 import { ToggleGroup } from '../index'
 

package/src/atoms/ToggleGroup/index.tsx

@@ -1,7 +1,8 @@
 import { css } from 'styled-components'
+
+import { PrimaryButton } from '../../atoms/buttons/PrimaryButton'
 import { BORDERS, COLORS } from '../../helix-design-system'
 import { Flex } from '../../primitives'
-import { PrimaryButton } from '../../atoms/buttons/PrimaryButton'
 import { spacing8 } from '../../ui-style-constants/spacing'
 import { StyledText } from '../StyledText'
 

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

@@ -1,17 +1,18 @@
 import * as React from 'react'
+
+import { COLORS } from '../../helix-design-system'
 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 { TYPOGRAPHY } from '../../ui-style-constants'
+import { PrimaryButton } from '../buttons'
 import { Tooltip } from './index'
-import type { Story, Meta } from '@storybook/react'
+
+import type { Meta, Story } from '@storybook/react'
 
 export default {
   title: 'App/Atoms/Tooltip',

package/src/atoms/Tooltip/__tests__/Tooltip.test.tsx

@@ -1,14 +1,15 @@
-import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
 import '@testing-library/jest-dom/vitest'
+
 import { screen } from '@testing-library/react'
 
+import { Tooltip } from '..'
 import { COLORS } from '../../../helix-design-system'
-import { TOOLTIP_TOP } from '../../../tooltips'
-import { SPACING } from '../../../ui-style-constants'
 import { POSITION_ABSOLUTE } from '../../../styles'
-
 import { renderWithProviders } from '../../../testing/utils'
-import { Tooltip } from '..'
+import { TOOLTIP_TOP } from '../../../tooltips'
+import { SPACING } from '../../../ui-style-constants'
 
 import type { ComponentProps, ReactNode } from 'react'
 

package/src/atoms/Tooltip/index.tsx

@@ -1,11 +1,11 @@
 import { COLORS } from '../../helix-design-system'
-import { TYPOGRAPHY } from '../../ui-style-constants'
-import { LegacyTooltip } from '../../tooltips'
 import { FLEX_MAX_CONTENT } from '../../styles'
+import { LegacyTooltip } from '../../tooltips'
+import { TYPOGRAPHY } from '../../ui-style-constants'
 
 import type { ReactNode } from 'react'
-import type { UseTooltipResultTooltipProps } from '../../tooltips'
 import type { StyleProps } from '../../primitives'
+import type { UseTooltipResultTooltipProps } from '../../tooltips'
 
 export interface TooltipProps extends StyleProps {
   children: ReactNode

package/src/atoms/buttons/AlertPrimaryButton.tsx

@@ -1,7 +1,8 @@
 import styled from 'styled-components'
-import { TYPOGRAPHY, SPACING } from '../../ui-style-constants'
+
 import { BORDERS, COLORS } from '../../helix-design-system'
 import { NewAlertPrimaryBtn, styleProps } from '../../primitives'
+import { SPACING, TYPOGRAPHY } from '../../ui-style-constants'
 
 export const AlertPrimaryButton = styled(NewAlertPrimaryBtn)`
   background-color: ${COLORS.red50};

package/src/atoms/buttons/AltPrimaryButton.tsx

@@ -1,8 +1,8 @@
 import styled from 'styled-components'
 
+import { PrimaryButton } from '../..'
 import { COLORS } from '../../helix-design-system'
 import { styleProps } from '../../primitives'
-import { PrimaryButton } from '../..'
 
 export const AltPrimaryButton = styled(PrimaryButton)`
   background-color: ${COLORS.grey30};

package/src/atoms/buttons/BasicButton.tsx

@@ -0,0 +1,100 @@
+import styled from 'styled-components'
+
+import { COLORS } from '../../helix-design-system'
+import { Icon } from '../../icons'
+import { Flex } from '../../primitives'
+import { ALIGN_CENTER } from '../../styles'
+import { CURSOR_NOT_ALLOWED, CURSOR_POINTER } from '../../styles/cursor'
+import { SPACING, TYPOGRAPHY } from '../../ui-style-constants'
+import { StyledText } from '../StyledText/StyledText'
+
+import type { MouseEvent } from 'react'
+import type { IconName } from '../../icons'
+
+interface BasicButtonProps {
+  children: string // Content of basic button
+  onClick: (event: MouseEvent<HTMLButtonElement>) => void // Function to handle button click events
+  isDisabled?: boolean // Optional prop to control button aria-disabled
+  underLine?: boolean // Optional prop to control underline styling
+  tabIndex?: number // Optional prop for tab index
+  iconName?: IconName // Optional prop for icon
+}
+
+export function BasicButton({
+  children,
+  onClick,
+  isDisabled = false,
+  underLine = false,
+  tabIndex = 0,
+  iconName,
+  ...props
+}: BasicButtonProps): JSX.Element {
+  const handleButtonClick = (event: MouseEvent<HTMLButtonElement>): void => {
+    if (isDisabled) {
+      event.preventDefault()
+      return
+    }
+    if (onClick != null) {
+      onClick(event)
+    }
+  }
+
+  return (
+    <StyledButton
+      data-testid={`basic_button_${children}`}
+      onClick={handleButtonClick}
+      aria-disabled={isDisabled}
+      underLine={underLine}
+      tabIndex={tabIndex}
+      {...props}
+    >
+      {iconName != null ? (
+        <Flex alignItems={ALIGN_CENTER} gap={SPACING.spacing8}>
+          <Icon
+            name={iconName}
+            size="1.25rem"
+            data-testid={`basic_button_${iconName}`}
+          />
+          <StyledText desktopStyle="bodyDefaultRegular">{children}</StyledText>
+        </Flex>
+      ) : (
+        <StyledText desktopStyle="bodyDefaultRegular">{children}</StyledText>
+      )}
+    </StyledButton>
+  )
+}
+
+const StyledButton = styled.button<{
+  underLine?: boolean
+  'aria-disabled'?: boolean
+}>`
+  background: none;
+  border: none;
+  padding: ${SPACING.spacing4};
+
+  color: ${props => (props['aria-disabled'] ? COLORS.grey40 : COLORS.black90)};
+  cursor: ${props =>
+    props['aria-disabled'] ? CURSOR_NOT_ALLOWED : CURSOR_POINTER};
+
+  text-decoration: ${props =>
+    props.underLine ? TYPOGRAPHY.textDecorationUnderline : 'none'};
+
+  ${props =>
+    !props['aria-disabled']
+      ? `
+        &:hover {
+          color: ${COLORS.blue50};
+        }
+
+        &:focus-visible {
+          color: ${COLORS.blue50};
+          outline: 2px solid ${COLORS.blue50};
+          outline-offset: ${SPACING.spacing4};
+        }
+      `
+      : undefined}
+
+  &[aria-disabled="true"] {
+    outline: none;
+  }
+`

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

@@ -1,5 +1,6 @@
 import { Box } from '../../primitives'
 import { EmptySelectorButton as EmptySelectorButtonComponent } from './EmptySelectorButton'
+
 import type { Meta, StoryObj } from '@storybook/react'
 
 const meta: Meta<typeof EmptySelectorButtonComponent> = {

package/src/atoms/buttons/EmptySelectorButton.tsx

@@ -1,5 +1,6 @@
 import styled from 'styled-components'
-import { Flex } from '../../primitives'
+
+import { BORDERS, COLORS } from '../../helix-design-system'
 import {
   ALIGN_CENTER,
   CURSOR_DEFAULT,
@@ -10,8 +11,10 @@ import {
   SPACING,
   StyledText,
 } from '../../index'
-import { BORDERS, COLORS } from '../../helix-design-system'
+import { Flex } from '../../primitives'
+
 import type { IconName } from '../../index'
+
 interface EmptySelectorButtonProps {
   onClick: () => void
   text: string
@@ -27,7 +30,11 @@ export function EmptySelectorButton(
   const { onClick, text, iconName, textAlignment, disabled = false } = props
 
   return (
-    <StyledButton onClick={onClick} disabled={disabled}>
+    <StyledButton
+      onClick={onClick}
+      disabled={disabled}
+      data-testid="EmptySelectorButton_click"
+    >
       <Flex
         gridGap={SPACING.spacing4}
         padding={SPACING.spacing12}

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

@@ -1,7 +1,7 @@
+import { COLORS } from '../../helix-design-system'
 import { ICON_DATA_BY_NAME } from '../../icons'
-import { SPACING } from '../../ui-style-constants'
 import { Box, STYLE_PROPS } from '../../primitives'
-import { COLORS } from '../../helix-design-system'
+import { SPACING } from '../../ui-style-constants'
 import { LargeButton } from './LargeButton'
 
 import type { Meta, StoryObj } from '@storybook/react'

package/src/atoms/buttons/LargeButton.tsx

@@ -1,9 +1,5 @@
 import { css } from 'styled-components'
 
-import { Btn } from '../../primitives'
-import { BORDERS, COLORS } from '../../helix-design-system'
-import { RESPONSIVENESS, SPACING, TYPOGRAPHY } from '../../ui-style-constants'
-import { StyledText } from '../StyledText'
 import {
   ALIGN_CENTER,
   ALIGN_FLEX_START,
@@ -13,11 +9,15 @@ import {
   DISPLAY_FLEX,
   JUSTIFY_SPACE_BETWEEN,
 } from '../..'
+import { BORDERS, COLORS } from '../../helix-design-system'
 import { Icon } from '../../icons'
+import { Btn } from '../../primitives'
+import { RESPONSIVENESS, SPACING, TYPOGRAPHY } from '../../ui-style-constants'
+import { StyledText } from '../StyledText'
 
 import type { ReactNode } from 'react'
-import type { StyleProps } from '../../primitives'
 import type { IconName } from '../../icons'
+import type { StyleProps } from '../../primitives'
 
 type LargeButtonTypes =
   | 'primary'

package/src/atoms/buttons/PrimaryButton.tsx

@@ -1,7 +1,8 @@
 import styled from 'styled-components'
-import { TYPOGRAPHY, SPACING } from '../../ui-style-constants'
+
 import { BORDERS, COLORS } from '../../helix-design-system'
 import { NewPrimaryBtn, styleProps } from '../../primitives'
+import { SPACING, TYPOGRAPHY } from '../../ui-style-constants'
 
 export const PrimaryButton = styled(NewPrimaryBtn)`
   background-color: ${COLORS.blue50};
@@ -11,7 +12,9 @@ export const PrimaryButton = styled(NewPrimaryBtn)`
   padding-right: ${SPACING.spacing16};
   line-height: ${TYPOGRAPHY.lineHeight20};
   text-transform: ${TYPOGRAPHY.textTransformNone};
-  ${TYPOGRAPHY.pSemiBold}
+  font-size: ${TYPOGRAPHY.fontSizeH3};
+  font-weight: ${TYPOGRAPHY.fontWeightSemiBold};
+  line-height: ${TYPOGRAPHY.lineHeight20};
 
   ${styleProps}
 
@@ -22,7 +25,8 @@ export const PrimaryButton = styled(NewPrimaryBtn)`
   }
 
   &:focus-visible {
-    box-shadow: 0 0 0 3px ${COLORS.yellow50};
+    outline: 2px solid ${COLORS.blue50};
+    outline-offset: 0.25rem;
   }
 
   &:active {

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

@@ -1,8 +1,9 @@
 import { action } from '@storybook/addon-actions'
 
+import { ICON_DATA_BY_NAME } from '../../icons/icon-data'
 import { VIEWPORT } from '../../ui-style-constants'
 import { RadioButton as RadioButtonComponent } from './RadioButton'
-import { ICON_DATA_BY_NAME } from '../../icons/icon-data'
+
 import type { Meta, StoryObj } from '@storybook/react'
 
 const meta: Meta<typeof RadioButtonComponent> = {