@opentrons/components 0.1.6-alpha.9 → 0.1.7-alpha.0

package/src/alerts/AlertItem.tsx

@@ -0,0 +1,85 @@
+import cx from 'classnames'
+import { Icon } from '../icons'
+import { IconButton } from '../buttons'
+import styles from './alerts.module.css'
+
+import type { ReactNode } from 'react'
+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: ReactNode
+  /** Alert message body contents */
+  children?: 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/assets/localization/en/index.ts

@@ -0,0 +1,8 @@
+import protocol_command_text from './protocol_command_text.json'
+
+// i18n files needed for unit testing. this is the quick fix for now until we figure out
+// one source of truth for sharing the protocol_command_text
+// translation across multiple projects
+export const en = {
+  protocol_command_text,
+}

package/src/assets/localization/en/protocol_command_text.json

@@ -0,0 +1,102 @@
+{
+  "absorbance_reader_close_lid": "Closing Absorbance Reader lid",
+  "absorbance_reader_initialize": "Initializing Absorbance Reader to perform {{mode}} measurement at {{wavelengths}}",
+  "absorbance_reader_open_lid": "Opening Absorbance Reader lid",
+  "absorbance_reader_read": "Reading plate in Absorbance Reader",
+  "adapter_in_mod_in_slot": "{{adapter}} on {{module}} in Slot {{slot}}",
+  "adapter_in_slot": "{{adapter}} in Slot {{slot}}",
+  "air_gap_in_place": "Air gapping {{volume}} µL",
+  "all_nozzles": "all nozzles",
+  "aspirate": "Aspirating {{volume}} µL from well {{well_name}} of {{labware}} in {{labware_location}} at {{flow_rate}} µL/sec",
+  "aspirate_in_place": "Aspirating {{volume}} µL in place at {{flow_rate}} µL/sec ",
+  "blowout": "Blowing out at well {{well_name}} of {{labware}} in {{labware_location}} at {{flow_rate}} µL/sec",
+  "blowout_in_place": "Blowing out in place at {{flow_rate}} µL/sec",
+  "closing_tc_lid": "Closing Thermocycler lid",
+  "column_layout": "column layout",
+  "comment": "Comment",
+  "configure_for_volume": "Configure {{pipette}} to aspirate {{volume}} µL",
+  "configure_nozzle_layout": "Configure {{pipette}} to use {{layout}}",
+  "confirm_and_resume": "Confirm and resume",
+  "deactivate_hs_shake": "Deactivating shaker",
+  "deactivate_temperature_module": "Deactivating Temperature Module",
+  "deactivating_hs_heater": "Deactivating heater",
+  "deactivating_tc_block": "Deactivating Thermocycler block",
+  "deactivating_tc_lid": "Deactivating Thermocycler lid",
+  "degrees_c": "{{temp}}°C",
+  "detect_liquid_presence": "Detecting liquid presence in well {{well_name}} of {{labware}} in {{labware_location}}",
+  "disengaging_magnetic_module": "Disengaging Magnetic Module",
+  "dispense": "Dispensing {{volume}} µL into well {{well_name}} of {{labware}} in {{labware_location}} at {{flow_rate}} µL/sec",
+  "dispense_in_place": "Dispensing {{volume}} µL in place at {{flow_rate}} µL/sec",
+  "dispense_push_out": "Dispensing {{volume}} µL into well {{well_name}} of {{labware}} in {{labware_location}} at {{flow_rate}} µL/sec and pushing out {{push_out_volume}} µL",
+  "drop_tip": "Dropping tip in {{well_name}} of {{labware}}",
+  "drop_tip_in_place": "Dropping tip in place",
+  "dropping_tip_in_trash": "Dropping tip in {{trash}}",
+  "engaging_magnetic_module": "Engaging Magnetic Module",
+  "fixed_trash": "Fixed Trash",
+  "get_next_tip": "Calculating position of the next available tip",
+  "home_gantry": "Homing all gantry, pipette, and plunger axes",
+  "in_location": "in {{location}}",
+  "latching_hs_latch": "Latching labware on Heater-Shaker",
+  "left": "Left",
+  "load_labware_to_display_location": "Load {{labware}} {{display_location}}",
+  "load_liquid_class": "Loading {{liquidClassDisplayName}} Liquid Class",
+  "load_liquids_info_protocol_setup": "Load {{liquid}} into {{labware}}",
+  "load_module_protocol_setup": "Load {{module}} in Slot {{slot_name}}",
+  "load_pipette_protocol_setup": "Load {{pipette_name}} in {{mount_name}} Mount",
+  "module_in_slot": "{{module}} in Slot {{slot_name}}",
+  "module_in_slot_plural": "{{module}}",
+  "move_labware": "Move Labware",
+  "move_labware_manually": "Manually move {{labware}} from {{old_location}} to {{new_location}}",
+  "move_labware_on": "Move labware on {{robot_name}}",
+  "move_labware_using_gripper": "Moving {{labware}} using gripper from {{old_location}} to {{new_location}}",
+  "move_relative": "Moving {{distance}} mm along {{axis}} axis",
+  "move_to_addressable_area": "Moving to {{addressable_area}}",
+  "move_to_addressable_area_drop_tip": "Moving to {{addressable_area}}",
+  "move_to_coordinates": "Moving to (X: {{x}}, Y: {{y}}, Z: {{z}})",
+  "move_to_slot": "Moving to Slot {{slot_name}}",
+  "move_to_well": "Moving to well {{well_name}} of {{labware}} in {{labware_location}}",
+  "multiple": "multiple",
+  "notes": "notes",
+  "off_deck": "off deck",
+  "offdeck": "offdeck",
+  "on_location": "on {{location}}",
+  "opening_tc_lid": "Opening Thermocycler lid",
+  "pause": "Pause",
+  "pause_on": "Pause on {{robot_name}}",
+  "partial_layout": "partial layout",
+  "pickup_tip": "Picking up tip(s) from {{well_range}} of {{labware}} in {{labware_location}}",
+  "prepare_to_aspirate": "Preparing {{pipette}} to aspirate",
+  "reloading_labware": "Reloading {{labware}}",
+  "return_tip": "Returning tip to {{well_name}} of {{labware}} in {{labware_location}}",
+  "right": "Right",
+  "row_layout": "row layout",
+  "save_position": "Saving position",
+  "set_and_await_hs_shake": "Setting Heater-Shaker to shake at {{rpm}} rpm and waiting until reached",
+  "setting_hs_temp": "Setting Target Temperature of Heater-Shaker to {{temp}}",
+  "setting_temperature_module_temp": "Setting Temperature Module to {{temp}} (rounded to nearest integer)",
+  "setting_thermocycler_block_temp": "Setting Thermocycler block temperature to {{temp}} with hold time of {{hold_time_seconds}} seconds after target reached",
+  "setting_thermocycler_lid_temp": "Setting Thermocycler lid temperature to {{temp}}",
+  "single": "single",
+  "single_nozzle_layout": "single nozzle layout",
+  "slot": "Slot {{slot_name}}",
+  "target_temperature": "target temperature",
+  "tc_awaiting_for_duration": "Waiting for Thermocycler profile to complete",
+  "tc_run_profile_steps": "Temperature: {{celsius}}°C, hold time: {{duration}}",
+  "tc_starting_extended_profile": "Running thermocycler profile with {{elementCount}} total steps and cycles:",
+  "tc_starting_extended_profile_cycle": "{{repetitions}} repetitions of the following steps:",
+  "tc_starting_profile": "Running thermocycler profile with {{stepCount}} steps:",
+  "touch_tip": "Touching tip",
+  "trash_bin": "Trash Bin",
+  "trash_bin_in_slot": "Trash Bin in {{slot_name}}",
+  "turning_rail_lights_off": "Turning rail lights off",
+  "turning_rail_lights_on": "Turning rail lights on",
+  "unlatching_hs_latch": "Unlatching labware on Heater-Shaker",
+  "wait_for_duration": "Pausing for {{seconds}} seconds. {{message}}",
+  "wait_for_resume": "Pausing protocol",
+  "waiting_for_hs_to_reach": "Waiting for Heater-Shaker to reach target temperature",
+  "waiting_for_tc_block_to_reach": "Waiting for Thermocycler block to reach target temperature and holding for specified time",
+  "waiting_for_tc_lid_to_reach": "Waiting for Thermocycler lid to reach target temperature",
+  "waiting_to_reach_temp_module": "Waiting for Temperature Module to reach {{temp}}",
+  "waste_chute": "Waste Chute",
+  "with_reference_of": "with reference of {{wavelength}} nm"
+}

package/src/assets/localization/index.ts

@@ -0,0 +1,7 @@
+import { en } from './en'
+import { zh } from './zh'
+
+export const resources = {
+  en,
+  zh,
+}

package/src/assets/localization/zh/index.ts

@@ -0,0 +1,8 @@
+import protocol_command_text from './protocol_command_text.json'
+
+// i18n files needed for unit testing. this is the quick fix for now until we figure out
+// one source of truth for sharing the protocol_command_text
+// translation across multiple projects
+export const zh = {
+  protocol_command_text,
+}

package/src/assets/localization/zh/protocol_command_text.json

@@ -0,0 +1,80 @@
+{
+  "adapter_in_mod_in_slot": "{{adapter}}在{{slot}}的{{module}}上",
+  "adapter_in_slot": "{{adapter}}在{{slot}}上",
+  "aspirate": "从{{labware_location}}的{{labware}}的{{well_name}}孔中以{{flow_rate}}µL/秒的速度吸液{{volume}}µL",
+  "aspirate_in_place": "在原位以{{flow_rate}}µL/秒的速度吸液{{volume}}µL",
+  "blowout": "在{{labware_location}}的{{labware}}的{{well_name}}孔中以{{flow_rate}}µL/秒的速度排空",
+  "blowout_in_place": "在原位以{{flow_rate}}µL/秒的速度排空",
+  "closing_tc_lid": "关闭热循环仪热盖",
+  "comment": "解释",
+  "configure_for_volume": "配置{{pipette}}以吸液{{volume}}µL",
+  "configure_nozzle_layout": "配置{{pipette}}以使用{{amount}}个通道",
+  "confirm_and_resume": "确认并继续",
+  "deactivate_hs_shake": "停用震荡功能",
+  "deactivate_temperature_module": "停用温控模块",
+  "deactivating_hs_heater": "停用加热功能",
+  "deactivating_tc_block": "停用热循环仪温控功能",
+  "deactivating_tc_lid": "停用热循环仪热盖功能",
+  "degrees_c": "{{temp}}°C",
+  "detect_liquid_presence": "正在检测{{labware}}在{{labware_location}}中的{{well_name}}孔中的液体存在",
+  "disengaging_magnetic_module": "下降磁力架模块",
+  "dispense_push_out": "以{{flow_rate}}µL/秒的速度将{{volume}}µL 排液至{{labware_location}}的{{labware}}的{{well_name}}孔中，并推出{{push_out_volume}}µL",
+  "dispense": "以{{flow_rate}}µL/秒的速度将{{volume}}µL 排液至{{labware_location}}的{{labware}}的{{well_name}}孔中",
+  "dispense_in_place": "在原位以{{flow_rate}}µL/秒的速度排液{{volume}}µL",
+  "drop_tip": "将吸头丢入{{labware}}的{{well_name}}孔中",
+  "drop_tip_in_place": "在原位丢弃吸头",
+  "engaging_magnetic_module": "抬升磁力架模块",
+  "fixed_trash": "垃圾桶",
+  "home_gantry": "复位所有龙门架、移液器和柱塞轴",
+  "latching_hs_latch": "在热震荡模块上锁定实验耗材",
+  "left": "左",
+  "load_liquids_info_protocol_setup": "将{{liquid}}加载到{{labware}}中",
+  "load_module_protocol_setup": "在甲板槽{{slot_name}}中加载模块{{module}}",
+  "load_pipette_protocol_setup": "在{{mount_name}}支架上加载{{pipette_name}}",
+  "module_in_slot_plural": "{{module}}",
+  "module_in_slot": "{{module}}在{{slot_name}}号板位",
+  "move_labware_manually": "手动将{{labware}}从{{old_location}}移动到{{new_location}}",
+  "move_labware_on": "在{{robot_name}}上移动实验耗材",
+  "move_labware_using_gripper": "使用转板抓手将{{labware}}从{{old_location}}移动到{{new_location}}",
+  "move_labware": "移动实验耗材",
+  "move_relative": "沿{{axis}}轴移动{{distance}}毫米",
+  "move_to_coordinates": "移动到 (X:{{x}}, Y:{{y}}, Z:{{z}})",
+  "move_to_slot": "移动到{{slot_name}}号板位",
+  "move_to_well": "移动到{{labware_location}}的{{labware}}的{{well_name}}孔",
+  "move_to_addressable_area": "移动到{{addressable_area}}",
+  "move_to_addressable_area_drop_tip": "移动到{{addressable_area}}",
+  "notes": "备注",
+  "off_deck": "甲板外",
+  "offdeck": "甲板外",
+  "opening_tc_lid": "打开热循环仪热盖",
+  "pause_on": "在{{robot_name}}上暂停",
+  "pause": "暂停",
+  "pickup_tip": "从{{labware_location}}的{{labware}}的{{well_range}}孔中拾取吸头",
+  "prepare_to_aspirate": "准备使用{{pipette}}吸液",
+  "reloading_labware": "正在重新加载{{labware}}",
+  "return_tip": "将吸头返回到{{labware_location}}的{{labware}}的{{well_name}}孔中",
+  "right": "右",
+  "save_position": "保存位置",
+  "set_and_await_hs_shake": "设置热震荡模块以{{rpm}}rpm 震动并等待达到该转速",
+  "setting_hs_temp": "将热震荡模块的目标温度设置为{{temp}}",
+  "setting_temperature_module_temp": "将温控模块设置为{{temp}}（四舍五入到最接近的整数）",
+  "setting_thermocycler_block_temp": "将热循环仪加热块温度设置为{{temp}}，并在达到目标后保持{{hold_time_seconds}}秒",
+  "setting_thermocycler_lid_temp": "将热循环仪热盖温度设置为{{temp}}",
+  "slot": "板位{{slot_name}}",
+  "target_temperature": "目标温度",
+  "tc_awaiting_for_duration": "等待热循环仪程序完成",
+  "tc_run_profile_steps": "温度：{{celsius}}°C，时间：{{seconds}}秒",
+  "tc_starting_profile": "热循环仪开始进行由以下步骤组成的{{repetitions}}次循环：",
+  "trash_bin_in_slot": "垃圾桶在{{slot_name}}",
+  "touch_tip": "吸头接触内壁",
+  "turning_rail_lights_off": "正在关闭导轨灯",
+  "turning_rail_lights_on": "正在打开导轨灯",
+  "unlatching_hs_latch": "解锁热震荡模块上的实验耗材",
+  "wait_for_duration": "暂停{{seconds}}秒。{{message}}",
+  "wait_for_resume": "暂停协议",
+  "waiting_for_hs_to_reach": "等待热震荡模块达到目标温度",
+  "waiting_for_tc_block_to_reach": "等待热循环仪加热块达到目标温度并保持指定时间",
+  "waiting_for_tc_lid_to_reach": "等待热循环仪热盖达到目标温度",
+  "waiting_to_reach_temp_module": "等待温控模块达到{{temp}}",
+  "waste_chute": "外置垃圾槽"
+}

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: 'Helix/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,56 @@
+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 '..'
+
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof Checkbox>) => {
+  return renderWithProviders(<Checkbox {...props} />)[0]
+}
+
+describe('Checkbox', () => {
+  let props: 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()
+  })
+})

package/src/atoms/Checkbox/index.tsx

@@ -0,0 +1,133 @@
+import { css } from 'styled-components'
+import { COLORS, BORDERS } from '../../helix-design-system'
+import { Flex } from '../../primitives'
+import { Icon } from '../../icons'
+import {
+  ALIGN_CENTER,
+  CURSOR_AUTO,
+  CURSOR_DEFAULT,
+  CURSOR_POINTER,
+  DIRECTION_ROW,
+  FLEX_MAX_CONTENT,
+  JUSTIFY_SPACE_BETWEEN,
+} from '../../styles'
+import { RESPONSIVENESS, SPACING } from '../../ui-style-constants'
+import { StyledText } from '../StyledText'
+
+import type { MouseEventHandler } from 'react'
+
+export interface CheckboxProps {
+  /** checkbox is checked if value is true */
+  isChecked: boolean
+  /** label text that describes the option */
+  labelText: string
+  /** callback click/tap handler */
+  onClick: MouseEventHandler
+  /** html tabindex property */
+  tabIndex?: number
+  /** if disabled is true, mouse events will not trigger onClick callback */
+  disabled?: boolean
+  /** optional borderRadius type */
+  type?: 'round' | 'neutral'
+  /** optional width for helix */
+  width?: string
+}
+export function Checkbox(props: CheckboxProps): JSX.Element {
+  const {
+    isChecked,
+    labelText,
+    onClick,
+    tabIndex = 0,
+    disabled = false,
+    width = FLEX_MAX_CONTENT,
+    type = 'round',
+  } = props
+
+  const CHECKBOX_STYLE = css`
+    width: ${width};
+    grid-gap: ${SPACING.spacing12};
+    border: none;
+    align-items: ${ALIGN_CENTER};
+    flex-direction: ${DIRECTION_ROW};
+    color: ${isChecked ? COLORS.white : COLORS.black90};
+    background-color: ${isChecked ? COLORS.blue50 : COLORS.blue30};
+    border-radius: ${type === 'round'
+      ? BORDERS.borderRadiusFull
+      : BORDERS.borderRadius8};
+    padding: ${SPACING.spacing12} ${SPACING.spacing16};
+    justify-content: ${JUSTIFY_SPACE_BETWEEN};
+    cursor: ${CURSOR_POINTER};
+
+    &:active {
+      background-color: ${isChecked ? COLORS.blue55 : COLORS.blue40};
+    }
+    &:focus-visible {
+      background-color: ${isChecked ? COLORS.blue50 : COLORS.blue35};
+      outline: 3px ${BORDERS.styleSolid} ${COLORS.blue50};
+      outline-offset: 2px;
+    }
+    &:disabled {
+      background-color: ${COLORS.grey30};
+      color: ${COLORS.grey40};
+      cursor: ${CURSOR_DEFAULT};
+    }
+    &:disabled:hover {
+      background-color: ${COLORS.grey30}; /* Prevent hover from overriding */
+    }
+    &:hover {
+      background-color: ${isChecked ? COLORS.blue55 : COLORS.blue35};
+    }
+
+    @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+      padding: ${SPACING.spacing20};
+      border-radius: ${BORDERS.borderRadius16};
+      width: 100%;
+      cursor: ${CURSOR_AUTO};
+    }
+  `
+
+  return (
+    <Flex
+      as="button"
+      role="checkbox"
+      onClick={onClick}
+      tabIndex={tabIndex}
+      disabled={disabled}
+      css={CHECKBOX_STYLE}
+    >
+      <StyledText desktopStyle="bodyDefaultRegular" oddStyle="bodyTextSemiBold">
+        {labelText}
+      </StyledText>
+      <Check isChecked={isChecked} disabled={disabled} />
+    </Flex>
+  )
+}
+
+interface CheckProps {
+  isChecked: boolean
+  color?: string
+  disabled?: boolean
+}
+export function Check(props: CheckProps): JSX.Element {
+  const { isChecked, color = COLORS.white, disabled = false } = props
+  return isChecked ? (
+    <Flex css={CHECK_STYLE}>
+      <Icon name="ot-checkbox" color={color} />
+    </Flex>
+  ) : (
+    <Flex
+      css={CHECK_STYLE}
+      border={`2px solid ${disabled ? COLORS.grey40 : COLORS.black90}`}
+      borderRadius={BORDERS.borderRadius4}
+    />
+  )
+}
+
+const CHECK_STYLE = css`
+  width: 1rem;
+  height: 1rem;
+  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+    width: 1.75rem;
+    height: 1.75rem;
+  }
+`

package/src/atoms/CheckboxField/CheckboxField.stories.tsx

@@ -0,0 +1,30 @@
+import * as React from 'react'
+import { CheckboxField as CheckboxFieldComponent } from './index'
+
+import type { Story, Meta } from '@storybook/react'
+
+export default {
+  title: 'Library/Atoms/Checkbox Field',
+  component: CheckboxFieldComponent,
+} as Meta
+
+const Template: Story<
+  React.ComponentProps<typeof CheckboxFieldComponent>
+> = args => {
+  const [isChecked, setIsChecked] = React.useState<boolean>(false)
+  return (
+    <CheckboxFieldComponent
+      {...args}
+      onChange={e => {
+        setIsChecked(!isChecked)
+        args.onChange(e)
+      }}
+      value={isChecked}
+    />
+  )
+}
+export const CheckboxField = Template.bind({})
+CheckboxField.args = {
+  label: 'Remember this setting?',
+  isIndeterminate: false,
+}