@opentrons/components 0.1.6-alpha.15 → 0.1.6-alpha.17

package/lib/atoms/Checkbox/index.d.ts

@@ -19,6 +19,7 @@ export declare function Checkbox(props: CheckboxProps): JSX.Element;
 interface CheckProps {
     isChecked: boolean;
     color?: string;
+    disabled?: boolean;
 }
 export declare function Check(props: CheckProps): JSX.Element;
 export {};

package/lib/atoms/InputField/index.d.ts

@@ -1,5 +1,5 @@
-import * as React from 'react';
 import { TYPOGRAPHY } from '../../ui-style-constants';
+import type { ChangeEventHandler, FocusEvent, MouseEvent, ReactNode } from 'react';
 import type { IconName } from '../../icons';
 export declare const INPUT_TYPE_NUMBER: "number";
 export declare const LEGACY_INPUT_TYPE_TEXT: "text";
@@ -8,7 +8,7 @@ export interface InputFieldProps {
     /** field is disabled if value is true */
     disabled?: boolean;
     /** change handler */
-    onChange?: React.ChangeEventHandler<HTMLInputElement>;
+    onChange?: ChangeEventHandler<HTMLInputElement>;
     /** name of field in form */
     name?: string;
     /** optional ID of <input> element */
@@ -16,7 +16,7 @@ export interface InputFieldProps {
     /** placeholder text */
     placeholder?: string;
     /** optional suffix component, appears to the right of input text */
-    units?: React.ReactNode;
+    units?: ReactNode;
     /** current value of text in box, defaults to '' */
     value?: string | number | null;
     /** if included, InputField will use error style and display error instead of caption */
@@ -30,11 +30,11 @@ export interface InputFieldProps {
     /** optional input type (default "text") */
     type?: typeof LEGACY_INPUT_TYPE_TEXT | typeof LEGACY_INPUT_TYPE_PASSWORD | typeof INPUT_TYPE_NUMBER;
     /** mouse click handler */
-    onClick?: (event: React.MouseEvent<HTMLInputElement>) => unknown;
+    onClick?: (event: MouseEvent<HTMLInputElement>) => unknown;
     /** focus handler */
-    onFocus?: (event: React.FocusEvent<HTMLInputElement>) => unknown;
+    onFocus?: (event: FocusEvent<HTMLInputElement>) => unknown;
     /** blur handler */
-    onBlur?: (event: React.FocusEvent<HTMLInputElement>) => unknown;
+    onBlur?: (event: FocusEvent<HTMLInputElement>) => unknown;
     /** makes input field read-only */
     readOnly?: boolean;
     /** html tabindex property */
@@ -44,8 +44,8 @@ export interface InputFieldProps {
     /** if true, clear out value and add '-' placeholder */
     isIndeterminate?: boolean;
     /** if input type is number, these are the min and max values */
-    max?: number;
-    min?: number;
+    max?: number | string;
+    min?: number | string;
     /** horizontal text alignment for title, input, and (sub)captions */
     textAlign?: typeof TYPOGRAPHY.textAlignLeft | typeof TYPOGRAPHY.textAlignCenter;
     /** small or medium input field height, relevant only */
@@ -65,4 +65,4 @@ export interface InputFieldProps {
     /** optional prop to override input field padding */
     padding?: string;
 }
-export declare const InputField: React.ForwardRefExoticComponent<Omit<InputFieldProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+export declare const InputField: import("react").ForwardRefExoticComponent<Omit<InputFieldProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;

package/lib/atoms/ListItem/ListItemChildren/ListItemCustomize.d.ts

@@ -8,8 +8,8 @@ interface ListItemCustomizeProps {
     label?: string;
     dropdown?: DropdownMenuProps;
     tag?: TagProps;
-    /** temporary prop for dropdown menu  */
-    forceDirection?: boolean;
+    /** optional placement of the menu */
+    menuPlacement?: 'auto' | 'top' | 'bottom';
 }
 export declare function ListItemCustomize(props: ListItemCustomizeProps): JSX.Element;
 export {};

package/lib/atoms/ListItem/ListItemChildren/ListItemDescriptor.d.ts

@@ -2,6 +2,7 @@ interface ListItemDescriptorProps {
     type: 'default' | 'large';
     description: JSX.Element;
     content: JSX.Element;
+    changeFlexDirection?: boolean;
 }
 export declare const ListItemDescriptor: (props: ListItemDescriptorProps) => JSX.Element;
 export {};

package/lib/atoms/ListItem/index.d.ts

@@ -1,7 +1,7 @@
 import type * as React from 'react';
 import type { StyleProps } from '../../primitives';
 export * from './ListItemChildren';
-export type ListItemType = 'error' | 'noActive' | 'success' | 'warning';
+export type ListItemType = 'error' | 'noActive' | 'success' | 'warning' | 'unavailable';
 interface ListItemProps extends StyleProps {
     /** ListItem state type */
     type: ListItemType;

package/lib/atoms/Tag/index.d.ts

@@ -9,5 +9,6 @@ export interface TagProps {
     iconPosition?: 'left' | 'right';
     /** Tagicon */
     iconName?: IconName;
+    shrinkToContent?: boolean;
 }
 export declare function Tag(props: TagProps): JSX.Element;

package/lib/hardware-sim/BaseDeck/BaseDeck.d.ts

@@ -1,5 +1,5 @@
-import * as React from 'react';
 import { Module } from '../Module';
+import type { ComponentProps, ReactNode } from 'react';
 import type { Svg } from '../../primitives';
 import type { DeckConfiguration, LabwareDefinition2, LabwareLocation, ModuleLocation, ModuleModel, RobotType } from '@opentrons/shared-data';
 import type { WellFill, WellGroup } from '../Labware';
@@ -9,7 +9,7 @@ export interface LabwareOnDeck {
     wellFill?: WellFill;
     missingTips?: WellGroup;
     /** generic prop to render self-positioned children for each labware */
-    labwareChildren?: React.ReactNode;
+    labwareChildren?: ReactNode;
     onLabwareClick?: () => void;
     highlight?: boolean;
     highlightShadow?: boolean;
@@ -20,9 +20,9 @@ export interface ModuleOnDeck {
     moduleLocation: ModuleLocation;
     nestedLabwareDef?: LabwareDefinition2 | null;
     nestedLabwareWellFill?: WellFill;
-    innerProps?: React.ComponentProps<typeof Module>['innerProps'];
+    innerProps?: ComponentProps<typeof Module>['innerProps'];
     /** generic prop to render self-positioned children for each module */
-    moduleChildren?: React.ReactNode;
+    moduleChildren?: ReactNode;
     onLabwareClick?: () => void;
     highlightLabware?: boolean;
     highlightShadowLabware?: boolean;
@@ -38,12 +38,12 @@ interface BaseDeckProps {
     lightFill?: string;
     mediumFill?: string;
     darkFill?: string;
-    children?: React.ReactNode;
+    children?: ReactNode;
     showSlotLabels?: boolean;
     /** whether to make wrapping svg tag animatable via @react-spring/web, defaults to false */
     animatedSVG?: boolean;
     /** extra props to pass to svg tag */
-    svgProps?: React.ComponentProps<typeof Svg>;
+    svgProps?: ComponentProps<typeof Svg>;
 }
 export declare function BaseDeck(props: BaseDeckProps): JSX.Element;
 export {};

package/lib/hardware-sim/Deck/RobotCoordsText.d.ts

@@ -3,6 +3,7 @@ export interface RobotCoordsTextProps extends React.ComponentProps<'text'> {
     x: number;
     y: number;
     children?: React.ReactNode;
+    canHighlight?: boolean;
 }
 /** SVG text reflected to use take robot coordinates as props */
 export declare function RobotCoordsText(props: RobotCoordsTextProps): JSX.Element;

package/lib/hardware-sim/Deck/RobotWorkSpace.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import type { ReactNode } from 'react';
 import type { StyleProps } from '../../primitives';
 import type { DeckDefinition, DeckSlot } from '@opentrons/shared-data';
 export interface RobotWorkSpaceRenderProps {
@@ -13,7 +13,7 @@ export interface RobotWorkSpaceRenderProps {
 export interface RobotWorkSpaceProps extends StyleProps {
     deckDef?: DeckDefinition;
     viewBox?: string | null;
-    children?: (props: RobotWorkSpaceRenderProps) => React.ReactNode;
+    children?: (props: RobotWorkSpaceRenderProps) => ReactNode;
     deckLayerBlocklist?: string[];
     showDeckLayers?: boolean;
     id?: string;

package/lib/hooks/useMenuHandleClickOutside.d.ts

@@ -1,9 +1,9 @@
-import * as React from 'react';
+import type { Dispatch, MouseEventHandler, SetStateAction } from 'react';
 interface MenuHandleClickOutside {
     menuOverlay: JSX.Element;
-    handleOverflowClick: React.MouseEventHandler<HTMLButtonElement>;
+    handleOverflowClick: MouseEventHandler<HTMLButtonElement>;
     showOverflowMenu: boolean;
-    setShowOverflowMenu: React.Dispatch<React.SetStateAction<boolean>>;
+    setShowOverflowMenu: Dispatch<SetStateAction<boolean>>;
 }
 export declare function useMenuHandleClickOutside(): MenuHandleClickOutside;
 export {};

package/lib/molecules/DropdownMenu/index.d.ts

@@ -35,7 +35,7 @@ export interface DropdownMenuProps {
     onBlur?: React.FocusEventHandler<HTMLButtonElement>;
     /** optional disabled */
     disabled?: boolean;
-    /** force direction for pd after release this will be fixed and remove */
-    forceDirection?: boolean;
+    /** optional placement of the menu */
+    menuPlacement?: 'auto' | 'top' | 'bottom';
 }
 export declare function DropdownMenu(props: DropdownMenuProps): JSX.Element;

package/lib/molecules/InfoScreen/index.d.ts

@@ -1,6 +1,8 @@
 interface InfoScreenProps {
     content: string;
+    subContent?: string;
     backgroundColor?: string;
+    height?: string;
 }
-export declare function InfoScreen({ content, backgroundColor, }: InfoScreenProps): JSX.Element;
+export declare function InfoScreen({ content, subContent, backgroundColor, height, }: InfoScreenProps): JSX.Element;
 export {};

package/lib/organisms/Toolbox/index.d.ts

@@ -1,4 +1,3 @@
-import * as React from 'react';
 export interface ToolboxProps {
     title: JSX.Element;
     children: React.ReactNode;
@@ -12,6 +11,7 @@ export interface ToolboxProps {
     closeButton?: JSX.Element;
     side?: 'left' | 'right';
     horizontalSide?: 'top' | 'bottom';
+    titlePadding?: string;
     childrenPadding?: string;
     subHeader?: JSX.Element | null;
     secondaryHeaderButton?: JSX.Element;

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@opentrons/components",
-  "version": "0.1.6-alpha.15",
+  "version": "0.1.6-alpha.17",
   "description": "React components library for Opentrons' projects",
   "source": "src/index.ts",
   "types": "lib/index.d.ts",
   "style": "src/index.module.css",
-  "main": "lib/index.mjs",
+  "main": "src/index.ts",
   "module": "src/index.ts",
   "repository": {
     "type": "git",
@@ -19,11 +19,10 @@
   "homepage": "https://github.com/Opentrons/opentrons#readme",
   "peerDependencies": {
     "react": "18.2.0",
-    "react-dom": "18.2.0",
-    "styled-components": "5.3.6"
+    "react-dom": "18.2.0"
   },
   "dependencies": {
-    "@opentrons/shared-data": "0.1.6-alpha.15",
+    "@opentrons/shared-data": "0.1.6-alpha.17",
     "@popperjs/core": "2.1.1",
     "@react-spring/types": "9.6.1",
     "@react-spring/web": "9.6.1",
@@ -38,7 +37,8 @@
     "react-popper": "1.0.0",
     "react-remove-scroll": "2.4.3",
     "react-select": "5.4.0",
-    "redux": "4.0.5"
+    "redux": "4.0.5",
+    "styled-components": "5.3.6"
   },
   "devDependencies": {
     "react-redux": "8.1.2"

package/src/__mocks__/file.js

@@ -0,0 +1,10 @@
+// File transformer for Jest
+// Makes asset filenames appear in snapshots
+// see https://facebook.github.io/jest/docs/en/webpack.html
+const path = require('path')
+
+module.exports = {
+  process(src, filename, config, options) {
+    return 'module.exports = ' + JSON.stringify(path.basename(filename))
+  },
+}

package/src/__tests__/utils.test.ts

@@ -0,0 +1,27 @@
+import { describe, it, expect } from 'vitest'
+import { truncateString } from '../utils'
+
+describe('truncateString', () => {
+  it('when an input string less than max length, return the original input', () => {
+    // Note (kj:05/03/2023) the max length and breakPoints are the same as what we use for the Desktop app
+    const str = 'opentrons-dev'
+    const result = truncateString(str, 80, 65)
+    expect(result).toEqual(str)
+  })
+
+  it('when an input string is more than 80 characters, return the truncated string', () => {
+    const str = `Lorem Ipsum Is Simply Dummy Text Of The Printing And Typesetting Industry. Lorem Ipsum Has Been The Industry's Standard Dummy Text Ever Since The 1500s, When An Unknown Printer Took A Galley Of Type And Scrambled It To Make A Type Specimen Book.Py`
+    const result = truncateString(str, 80, 65)
+    const truncatedStr =
+      'Lorem Ipsum Is Simply Dummy Text Of The Printing And Typesetting ...imen Book.Py'
+    expect(result).toEqual(truncatedStr)
+  })
+
+  it('when an input string is more than 80 characters without specifying the break point, return the truncated string', () => {
+    const str = `Lorem Ipsum Is Simply Dummy Text Of The Printing And Typesetting Industry. Lorem Ipsum Has Been The Industry's Standard Dummy Text Ever Since The 1500s, When An Unknown Printer Took A Galley Of Type And Scrambled It To Make A Type Specimen Book.Py`
+    const result = truncateString(str, 80)
+    const truncatedStr =
+      'Lorem Ipsum Is Simply Dummy Text Of The Printing And Typesetting Industry. Lo...'
+    expect(result).toEqual(truncatedStr)
+  })
+})

package/src/alerts/AlertItem.stories.tsx

@@ -0,0 +1,49 @@
+import type * as React from 'react'
+import { AlertItem } from './AlertItem'
+
+import type { Story, Meta } from '@storybook/react'
+
+export default {
+  title: 'Library/Molecules/AlertItem',
+  component: AlertItem,
+  argTypes: { onCloseClick: { action: 'clicked' } },
+} as Meta
+
+const Template: Story<React.ComponentProps<typeof AlertItem>> = args => (
+  <AlertItem {...args} />
+)
+
+export const Basic = Template.bind({})
+Basic.args = {
+  type: 'success',
+  title: 'good job!',
+}
+
+export const OverriddenIcon = Template.bind({})
+OverriddenIcon.args = {
+  type: 'info',
+  title: 'Alert with overridden icon',
+  icon: { name: 'pause-circle' },
+}
+
+export const Stackable: Story<
+  React.ComponentProps<typeof AlertItem>
+> = args => (
+  <div>
+    <Template {...args} type="warning" title={'Warning with close button'} />
+    <Template
+      {...args}
+      onCloseClick={undefined}
+      type="warning"
+      title={'Warning with no close button'}
+    />
+    <Template {...args} type="warning" title={'Warning with no children'} />
+    <Template
+      {...args}
+      type="warning"
+      title={'Warning with React Node children'}
+    >
+      <p>Some additional info</p>
+    </Template>
+  </div>
+)

package/src/alerts/AlertItem.tsx

@@ -0,0 +1,85 @@
+import type * as React from 'react'
+import cx from 'classnames'
+import { Icon } from '../icons'
+import { IconButton } from '../buttons'
+import styles from './alerts.module.css'
+
+import type { IconProps } from '../icons'
+
+export type AlertType = 'success' | 'warning' | 'error' | 'info'
+
+export interface AlertItemProps {
+  /** name constant of the icon to display */
+  type: AlertType
+  /** title/main message of colored alert bar */
+  title: React.ReactNode
+  /** Alert message body contents */
+  children?: React.ReactNode
+  /** Additional class name */
+  className?: string
+  /** optional handler to show close button/clear alert  */
+  onCloseClick?: () => unknown
+  /** Override the default Alert Icon */
+  icon?: IconProps
+}
+
+/**
+ * Alert overlay,
+ * change style and icon by using type 'success' 'warning' 'error'
+ */
+
+const ALERT_PROPS_BY_TYPE: Record<
+  AlertType,
+  { icon: IconProps; className: string }
+> = {
+  success: {
+    icon: { name: 'check-circle' },
+    className: styles.success,
+  },
+  error: {
+    icon: { name: 'alert-circle' },
+    className: styles.error,
+  },
+  warning: {
+    icon: { name: 'alert-circle' },
+    className: styles.warning,
+  },
+  info: {
+    icon: { name: 'information' },
+    className: styles.info,
+  },
+}
+
+/**
+ * @deprecated Use 'Banner' instead
+ */
+
+export function AlertItem(props: AlertItemProps): JSX.Element {
+  const alertProps = ALERT_PROPS_BY_TYPE[props.type]
+  const icon = props.icon ? props.icon : alertProps.icon
+  const className = cx(styles.alert, alertProps.className, props.className)
+
+  const iconProps = {
+    ...icon,
+    className: styles.icon,
+  }
+
+  return (
+    <div className={className}>
+      <div className={styles.title_bar}>
+        <Icon {...iconProps} />
+        <span className={styles.title} data-testid="alert_item_title">
+          {props.title}
+        </span>
+        {props.onCloseClick && (
+          <IconButton
+            name="close"
+            onClick={props.onCloseClick}
+            className={styles.close}
+          />
+        )}
+      </div>
+      {props.children && <div className={styles.message}>{props.children}</div>}
+    </div>
+  )
+}

package/src/alerts/alerts.module.css

@@ -0,0 +1,103 @@
+@import '../index.module.css';
+
+.alert {
+  font-size: var(--fs-body-2);
+  font-weight: var(--fw-regular);
+}
+
+.alert:not(:first-of-type) {
+  border-top: none;
+}
+
+.title_bar {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0.5rem 1rem;
+  font-weight: var(--fw-semibold);
+}
+
+.title {
+  width: 100%;
+}
+
+.success {
+  border: 1px solid var(--c-success);
+
+  & > .title_bar {
+    background-color: var(--c-bg-success);
+    color: var(--c-success);
+
+    & svg {
+      color: var(--c-success);
+    }
+  }
+}
+
+.info {
+  border: 1px solid var(--c-highlight);
+
+  & > .title_bar {
+    background-color: var(--c-bg-selected);
+    color: var(--c-selected-dark);
+
+    & svg {
+      color: var(--c-highlight);
+    }
+  }
+}
+
+.warning {
+  border: 1px solid var(--c-warning);
+
+  & > .title_bar {
+    background-color: var(--c-warning-light);
+    color: var(--c-warning-dark);
+
+    & svg {
+      fill: var(--c-warning);
+    }
+  }
+}
+
+.error {
+  border: 1px solid var(--c-error);
+
+  & > .title_bar {
+    background-color: var(--c-error-light);
+    color: var(--c-error-dark);
+
+    & svg {
+      fill: var(--c-error);
+    }
+  }
+}
+
+.message {
+  padding: 1rem 3rem;
+  background-color: white;
+
+  & a {
+    text-decoration: underline;
+    color: inherit;
+  }
+
+  &:empty {
+    padding: 0;
+  }
+}
+
+.icon {
+  width: 1.5rem;
+  margin-right: 0.5rem;
+}
+
+.close {
+  width: 2rem;
+  padding: 0.125rem;
+
+  &:hover {
+    background-color: rgba(100, 100, 100, 0.1);
+  }
+}

package/src/alerts/index.ts

@@ -0,0 +1,3 @@
+// alert components
+
+export * from './AlertItem'

package/src/atoms/Checkbox/Checkbox.stories.tsx

@@ -0,0 +1,24 @@
+import { Checkbox } from './index'
+
+import type { StoryObj, Meta } from '@storybook/react'
+
+const meta: Meta<typeof Checkbox> = {
+  title: 'Library/Atoms/Checkbox',
+  component: Checkbox,
+}
+
+type Story = StoryObj<typeof Checkbox>
+
+export const Basic: Story = {
+  args: {
+    isChecked: true,
+    labelText: 'Button Text',
+    onClick: () => {
+      console.log('clicked')
+    },
+    tabIndex: 1,
+    disabled: false,
+  },
+}
+
+export default meta

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

@@ -0,0 +1,55 @@
+import type * as React from 'react'
+import { describe, beforeEach, afterEach, vi, expect, it } from 'vitest'
+import { fireEvent, screen } from '@testing-library/react'
+import '@testing-library/jest-dom/vitest'
+import { renderWithProviders } from '../../../testing/utils'
+import { Checkbox } from '..'
+
+const render = (props: React.ComponentProps<typeof Checkbox>) => {
+  return renderWithProviders(<Checkbox {...props} />)[0]
+}
+
+describe('Checkbox', () => {
+  let props: React.ComponentProps<typeof Checkbox>
+
+  beforeEach(() => {
+    props = {
+      onClick: vi.fn(),
+      isChecked: false,
+      labelText: 'fake checkbox label',
+      tabIndex: 1,
+      disabled: false,
+    }
+  })
+
+  afterEach(() => {
+    vi.resetAllMocks()
+  })
+
+  it('renders label with disabled true', () => {
+    props.disabled = true
+    render(props)
+    const checkBoxInput = screen.getByRole('checkbox', {
+      name: 'fake checkbox label',
+    })
+    expect(checkBoxInput).toBeDisabled()
+  })
+
+  it('renders label with correct style - tabIndex 1', () => {
+    props.tabIndex = 1
+    render(props)
+    const checkBoxInput = screen.getByRole('checkbox', {
+      name: 'fake checkbox label',
+    })
+    expect(checkBoxInput).toHaveAttribute('tabindex', '1')
+  })
+
+  it('calls mock function when clicking checkbox', () => {
+    render(props)
+    const checkBoxInput = screen.getByRole('checkbox', {
+      name: 'fake checkbox label',
+    })
+    fireEvent.click(checkBoxInput)
+    expect(props.onClick).toHaveBeenCalled()
+  })
+})