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

package/src/structure/structure.module.css

@@ -0,0 +1,114 @@
+/* TitleBar styles */
+@import '../index.module.css';
+
+.title_bar {
+  display: flex;
+  align-items: center;
+  height: 3rem;
+  text-transform: uppercase;
+  background-color: var(--c-dark-gray);
+}
+
+.title_bar,
+.title_bar a {
+  color: white;
+}
+
+.title,
+.subtitle,
+.separator {
+  font-size: var(--fs-header);
+  margin: 0;
+}
+
+.title,
+.separator {
+  font-weight: var(--fw-semibold);
+}
+
+.title {
+  white-space: nowrap; /* from legacy --truncate */
+  overflow: hidden; /* from legacy --truncate */
+  text-overflow: ellipsis; /* from legacy --truncate */
+  min-width: 0; /* from legacy --truncate */
+  padding: 0 1.5rem;
+}
+
+.subtitle {
+  padding: 0 1.5rem;
+  font-weight: normal;
+}
+
+.title.right {
+  margin-left: auto;
+}
+
+.title_button {
+  flex: none;
+}
+
+.page_tabs {
+  width: 100%;
+  text-align: center;
+}
+
+.tab_link {
+  display: inline-block;
+  width: 50%;
+  padding: 0.25rem 0;
+  font-size: var(--fs-huge);
+  opacity: 0.2;
+  background-color: var(--c-med-gray);
+  color: white;
+  text-transform: uppercase;
+}
+
+.active_tab_link {
+  opacity: 1;
+}
+
+.tab_title {
+  font-weight: normal;
+}
+
+.active_tab_link .tab_title {
+  font-weight: var(--fw-bold);
+}
+
+.disabled {
+  pointer-events: none;
+  background-color: transparent;
+
+  & * {
+    color: var(--c-font-disabled);
+    fill: var(--c-font-disabled);
+    background-color: transparent;
+  }
+}
+
+.labeled_value {
+  font-size: var(--fs-body-1); /* from legacy --font-body-1-dark */
+  font-weight: var(--fw-regular); /* from legacy --font-body-1-dark */
+  color: var(--c-font-dark); /* from legacy --font-body-1-dark */
+  line-height: 1.5;
+
+  & svg {
+    height: var(--fs-body-2);
+  }
+}
+
+.labeled_value_label {
+  font-weight: var(--fw-semibold);
+  margin-top: 0;
+  margin-bottom: 0.25rem;
+}
+
+.labeled_value_value {
+  margin: 0;
+}
+
+.right_node {
+  display: flex;
+  justify-content: flex-end;
+  margin-left: auto;
+}

package/src/styles/borders.module.css

@@ -0,0 +1,20 @@
+@import './colors.module.css';
+
+:root {
+  /* borders */
+  --bd-radius-default: 2px;
+  --bd-radius-form-field: 3px;
+  --bd-radius-pill: 12px;
+  --bd-width-default: 1px;
+  --bd-light: var(--bd-width-default) solid var(--c-light-gray);
+
+  /* dropshadows */
+
+  /* TODO: Ian 2018-07-26 consolidate all shadows here (eg from buttons) */
+  --shadow-lvl-1:
+    0 1px 3px 0 rgba(0, 0, 0, 0.1),
+    0 1px 2px 0 rgba(0, 0, 0, 0.2);
+  --shadow-lvl-2:
+    0 3px 6px 0 rgba(0, 0, 0, 0.13),
+    0 3px 6px 0 rgba(0, 0, 0, 0.23);
+}

package/src/styles/borders.ts

@@ -0,0 +1,16 @@
+// border style constants
+import { C_LIGHT_GRAY, C_MED_GRAY } from './colors'
+
+export const BORDER_WIDTH_DEFAULT = '1px'
+
+export const BORDER_RADIUS_DEFAULT = '2px'
+export const BORDER_RADIUS_1 = '5px'
+
+export const BORDER_STYLE_NONE = 'none'
+export const BORDER_STYLE_SOLID = 'solid'
+
+export const BORDER_SOLID_LIGHT = `${BORDER_WIDTH_DEFAULT} ${BORDER_STYLE_SOLID} ${C_LIGHT_GRAY}`
+export const BORDER_SOLID_MEDIUM = `${BORDER_WIDTH_DEFAULT} ${BORDER_STYLE_SOLID} ${C_MED_GRAY}`
+
+export const SHADOW_LIGHT =
+  '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.2)'

package/src/styles/colors.module.css

@@ -0,0 +1,57 @@
+:root {
+  /* ot brand */
+  --c-mustard: #ffd252;
+  --c-blue: #006cfa;
+  --c-light-blue: color-mod(var(--c-blue) lightness(85%));
+
+  /*
+   * grays
+   * TODO(mc, 2019-03-22): align with style guide
+   */
+  --c-near-black: #a4a4a4; /* style guide: n/a */
+  --c-dark-gray: #4a4a4a; /* style guide: near-black */
+  --c-charcoal: #979797;
+  --c-med-gray: #9b9b9b; /* style guide: n/a */
+  --c-light-gray: #e5e2e2; /* style guide: smoke, should be e6e6e6 */
+  --c-lightest-gray: #ededed; /* style guide: n/a */
+
+  /*
+   * background colors
+   * TODO(mc, 2019-03-22): combine with colors
+   */
+  --c-bg-dark: #4a4a4a;
+  --c-bg-light: #fafafa;
+  --c-bg-selected: #f0f3ff;
+  --c-bg-hover: #f1f1f1;
+  --c-bg-success: #b6febc;
+
+  /* general UI */
+  --c-highlight: #5fd8ee;
+  --c-selected-dark: #00c3e6;
+  --c-warning-dark: #9e5e00;
+  --c-warning: #e28200;
+  --c-warning-light: #ffd58f;
+  --c-error-dark: #ac0505;
+  --c-error: #d12929;
+  --c-error-light: #ffc0c0;
+  --c-success: #60b120;
+  --c-blue-enabled: #006cfa;
+  --c-light-grey-hover: #c6c6c6;
+
+  /* Misc */
+  --c-selection-overlay: color-mod(var(--c-highlight) alpha(0.3));
+  --c-plate-bg: #ccc;
+  --c-white: #fff;
+  --c-black: #000;
+  --c-green: #7ed321;
+  --c-red: #f00000;
+  --c-orange: #f5a623;
+
+  --transition-color: {
+    transition: color 0.15s ease-in-out;
+  }
+
+  --transition-background-color: {
+    transition: background-color 0.15s ease-in-out;
+  }
+}

package/src/styles/colors.ts

@@ -0,0 +1,58 @@
+// gray scale
+export const C_BLACK = '#000000'
+export const C_DARK_GRAY = '#4a4a4a'
+export const C_MED_DARK_GRAY = '#6c6c6c'
+export const C_MED_GRAY = '#9b9b9b'
+export const C_SILVER_GRAY = '#e3e3e3'
+export const C_MED_LIGHT_GRAY = '#d2d2d2'
+export const C_LIGHT_GRAY = '#e6e6e6'
+export const C_BRIGHT_GRAY = '#f8f8f8'
+export const C_HARBOR_GRAY = '#8a8c8e'
+export const C_NEAR_WHITE = '#fafafa'
+export const C_WHITE = '#ffffff'
+export const C_TRANSPARENT = 'transparent'
+export const C_DARK_BLACK = '#16212d'
+
+// brand colors
+export const C_BLUE = '#006cfa'
+export const C_MINT = '#00bfa8'
+export const C_AQUAMARINE = '#eefff8'
+export const C_POWDER_BLUE = '#f1f8ff'
+export const C_SKY_BLUE = '#accfff80'
+export const C_BLUE_PRESSED = '#0050b8'
+
+// colors by usage
+// TODO(mc, 2020-10-08): s/COLOR_/C_
+export const COLOR_WARNING = '#e28200'
+export const COLOR_WARNING_LIGHT = '#ffd58f'
+export const COLOR_WARNING_DARK = '#9e5e00'
+export const COLOR_ERROR = '#d12929'
+export const COLOR_SUCCESS = '#60b120'
+export const C_DISABLED = '#9c9c9c'
+export const C_SELECTED_DARK = '#00c3e6'
+export const C_BG_SELECTED = '#f0f3ff'
+export const C_ERROR_DARK = '#ac0505'
+export const C_ERROR_LIGHT = '#ffc0c0'
+
+// overlays
+export const OVERLAY_WHITE_10 = 'rgba(255, 255, 255, 0.1)'
+export const OVERLAY_WHITE_20 = 'rgba(255, 255, 255, 0.2)'
+
+// used to set aside further subsections of cards beyond
+// what can be distinguished with a border
+export const OVERLAY_LIGHT_GRAY_50 = 'rgba(230, 230, 230, 0.4)'
+
+// used as default BaseModal overlay color
+export const OVERLAY_GRAY_90 = 'rgba(127, 127, 127, 0.9)'
+
+// darkest modal overlay used
+export const OVERLAY_BLACK_90 = 'rgba(0, 0, 0, 0.9)'
+
+// 80 percent opacity overlay
+export const OVERLAY_BLACK_80 = 'rgba(0, 0, 0, 0.8)'
+
+// opacities
+export const OPACITY_DISABLED = 0.3
+
+// TODO(isk: 3/2/20): Rename to be more generic (e.g. not FONT)
+export const C_FONT_DISABLED = '#9c9c9c'

package/src/styles/cursor.ts

@@ -0,0 +1,12 @@
+// cursor
+// https://developer.mozilla.org/en-US/docs/Web/CSS/cursor#keyword
+export const CURSOR_AUTO = 'auto'
+export const CURSOR_CROSSHAIR = 'crosshair'
+export const CURSOR_DEFAULT = 'default'
+export const CURSOR_GRAB = 'grab'
+export const CURSOR_GRABBING = 'grabbing'
+export const CURSOR_HELP = 'help'
+export const CURSOR_NOT_ALLOWED = 'not-allowed'
+export const CURSOR_POINTER = 'pointer'
+export const CURSOR_ZOOM_IN = 'zoom-in'
+export const CURSOR_WAIT = 'wait'

package/src/styles/flexbox.ts

@@ -0,0 +1,39 @@
+export const FLEX_NONE = 'none'
+export const FLEX_AUTO = 'auto'
+export const FLEX_MIN_CONTENT = 'min-content'
+export const FLEX_MAX_CONTENT = 'max-content'
+
+export const ALIGN_NORMAL = 'normal'
+export const ALIGN_START = 'start'
+export const ALIGN_END = 'end'
+export const ALIGN_FLEX_START = 'flex-start'
+export const ALIGN_FLEX_END = 'flex-end'
+export const ALIGN_CENTER = 'center'
+export const ALIGN_BASELINE = 'baseline'
+export const ALIGN_STRETCH = 'stretch'
+
+export const JUSTIFY_NORMAL = 'normal'
+export const JUSTIFY_START = 'start'
+export const JUSTIFY_END = 'end'
+export const JUSTIFY_FLEX_START = 'flex-start'
+export const JUSTIFY_FLEX_END = 'flex-end'
+export const JUSTIFY_CENTER = 'center'
+export const JUSTIFY_SPACE_BETWEEN = 'space-between'
+export const JUSTIFY_SPACE_AROUND = 'space-around'
+export const JUSTIFY_SPACE_EVENLY = 'space-evenly'
+export const JUSTIFY_STRETCH = 'stretch'
+
+export const DIRECTION_ROW = 'row'
+export const DIRECTION_ROW_REVERSE = 'row-reverse'
+export const DIRECTION_COLUMN = 'column'
+export const DIRECTION_COLUMN_REVERSE = 'column-reverse'
+
+export const WRAP = 'wrap'
+export const NO_WRAP = 'nowrap'
+export const WRAP_REVERSE = 'wrap-reverse'
+
+export const WHITE_SPACE_NORMAL = 'normal'
+export const WHITE_SPACE_PRE = 'pre'
+export const WHITE_SPACE_PRE_WRAP = 'pre-wrap'
+export const WHITE_SPACE_PRE_LINE = 'pre-line'
+export const WHITE_SPACE_BREAK_SPACES = 'break-spaces'

package/src/styles/index.module.css

@@ -0,0 +1,8 @@
+.clickable {
+  cursor: pointer;
+}
+
+.rotated {
+  transform-origin: center;
+  transform: rotate(180deg);
+}

package/src/styles/index.ts

@@ -0,0 +1,8 @@
+export * from './borders'
+export * from './colors'
+export * from './cursor'
+export * from './flexbox'
+export * from './layout'
+export * from './position'
+export * from './spacing'
+export * from './typography'

package/src/styles/layout.ts

@@ -0,0 +1,31 @@
+// display
+export const DISPLAY_NONE = 'none'
+export const DISPLAY_INLINE = 'inline'
+export const DISPLAY_BLOCK = 'block'
+export const DISPLAY_INLINE_BLOCK = 'inline-block'
+export const DISPLAY_FLEX = 'flex'
+export const DISPLAY_TABLE = 'table'
+export const DISPLAY_TABLE_ROW = 'table-row'
+export const DISPLAY_TABLE_CELL = 'table-cell'
+export const DISPLAY_GRID = 'grid'
+
+// powers-of-two size scale
+export const SIZE_AUTO = 'auto'
+export const SIZE_1 = '1rem'
+export const SIZE_2 = '2rem'
+export const SIZE_3 = '4rem'
+export const SIZE_4 = '8rem'
+export const SIZE_5 = '16rem'
+export const SIZE_6 = '32rem'
+
+// overflow
+export const OVERFLOW_VISIBLE = 'visible'
+export const OVERFLOW_HIDDEN = 'hidden'
+export const OVERFLOW_CLIP = 'clip'
+export const OVERFLOW_SCROLL = 'scroll'
+export const OVERFLOW_AUTO = 'auto'
+
+// overflow wrap
+export const OVERFLOW_WRAP_ANYWHERE = 'anywhere'
+export const OVERFLOW_WRAP_BREAK_WORD = 'break-word'
+export const OVERFLOW_WRAP_NORMAL = 'normal'

package/src/styles/position.ts

@@ -0,0 +1,5 @@
+export const POSITION_STATIC: 'static' = 'static'
+export const POSITION_RELATIVE: 'relative' = 'relative'
+export const POSITION_ABSOLUTE: 'absolute' = 'absolute'
+export const POSITION_FIXED: 'fixed' = 'fixed'
+export const POSITION_STICKY: 'sticky' = 'sticky'

package/src/styles/spacing.ts

@@ -0,0 +1,11 @@
+export const SPACING_AUTO = 'auto'
+
+// powers-of-two spacing scale
+export const SPACING_1 = '0.25rem'
+export const SPACING_2 = '0.5rem'
+export const SPACING_3 = '1rem'
+export const SPACING_4 = '2rem'
+export const SPACING_5 = '4rem'
+export const SPACING_6 = '8rem'
+export const SPACING_7 = '16rem'
+export const SPACING_8 = '32rem'

package/src/styles/typography.module.css

@@ -0,0 +1,22 @@
+:root {
+  --c-font-dark: #4a4a4a;
+  --c-font-icon: #6f6f6f;
+  --c-font-light: white;
+  --c-font-disabled: #9c9c9c;
+  --fs-huge: 3rem;
+  --fs-header: 1.125rem;
+  --fs-default: 1rem;
+  --fs-body-2: 0.875rem;
+  --fs-body-1: 0.75rem;
+  --fs-caption: 0.625rem;
+  --fs-tiny: 0.325rem;
+  --fs-micro: 0.2rem;
+  --fw-bold: 800;
+  --fw-semibold: 600;
+  --fw-regular: 400;
+  --fw-light: 300;
+  --ff-code: Consolas, monaco, monospace;
+  --lh-solid: 1;
+  --lh-title: 1.25;
+  --lh-copy: 1.5;
+}

package/src/styles/typography.ts

@@ -0,0 +1,90 @@
+import { css } from 'styled-components'
+
+import { C_DARK_GRAY, C_WHITE } from './colors'
+
+import type { FlattenSimpleInterpolation } from 'styled-components'
+
+// font size values
+export const FONT_SIZE_HUGE = '3rem'
+export const FONT_SIZE_BIG = '1.5rem'
+export const FONT_SIZE_HEADER = '1.125rem'
+export const FONT_SIZE_DEFAULT = '1rem'
+export const FONT_SIZE_BODY_2 = '0.875rem'
+export const FONT_SIZE_BODY_1 = '0.75rem'
+export const FONT_SIZE_CAPTION = '0.625rem'
+export const FONT_SIZE_TINY = '0.325rem'
+export const FONT_SIZE_MICRO = '0.2rem'
+export const FONT_SIZE_INHERIT = 'inherit'
+
+// line height values
+export const LINE_HEIGHT_SOLID = 1
+export const LINE_HEIGHT_TITLE = 1.25
+export const LINE_HEIGHT_COPY = 1.5
+
+// font weight values
+export const FONT_WEIGHT_LIGHT = 300
+export const FONT_WEIGHT_REGULAR = 400
+export const FONT_WEIGHT_SEMIBOLD = 600
+export const FONT_WEIGHT_BOLD = 800
+
+// font style values
+export const FONT_STYLE_NORMAL = 'normal'
+export const FONT_STYLE_ITALIC = 'italic'
+
+// text align
+export const TEXT_ALIGN_LEFT = 'left'
+export const TEXT_ALIGN_CENTER = 'center'
+export const TEXT_ALIGN_RIGHT = 'right'
+export const TEXT_ALIGN_JUSTIFY = 'justify'
+
+// text transform
+export const TEXT_TRANSFORM_NONE = 'none'
+export const TEXT_TRANSFORM_CAPITALIZE = 'capitalize'
+export const TEXT_TRANSFORM_UPPERCASE = 'uppercase'
+export const TEXT_TRANSFORM_LOWERCASE = 'lowercase'
+
+// text decoration
+export const TEXT_DECORATION_UNDERLINE = 'underline'
+
+// font property sets
+export const FONT_HEADER_DARK: FlattenSimpleInterpolation = css`
+  font-size: ${FONT_SIZE_HEADER};
+  font-weight: ${FONT_WEIGHT_SEMIBOLD};
+  color: ${C_DARK_GRAY};
+`
+
+export const FONT_HEADER_THIN: FlattenSimpleInterpolation = css`
+  font-size: ${FONT_SIZE_HEADER};
+  font-weight: ${FONT_WEIGHT_REGULAR};
+  color: ${C_DARK_GRAY};
+`
+
+export const FONT_BODY_1_DARK: FlattenSimpleInterpolation = css`
+  font-size: ${FONT_SIZE_BODY_1};
+  font-weight: ${FONT_WEIGHT_REGULAR};
+  color: ${C_DARK_GRAY};
+`
+
+export const FONT_BODY_1_LIGHT: FlattenSimpleInterpolation = css`
+  font-size: ${FONT_SIZE_BODY_1};
+  font-weight: ${FONT_WEIGHT_REGULAR};
+  color: ${C_WHITE};
+`
+
+export const FONT_BODY_2_DARK: FlattenSimpleInterpolation = css`
+  font-size: ${FONT_SIZE_BODY_2};
+  font-weight: ${FONT_WEIGHT_REGULAR};
+  color: ${C_DARK_GRAY};
+`
+
+export const FONT_BODY_1_DARK_SEMIBOLD: FlattenSimpleInterpolation = css`
+  font-size: ${FONT_SIZE_BODY_1};
+  font-weight: ${FONT_WEIGHT_SEMIBOLD};
+  color: ${C_DARK_GRAY};
+`
+
+export const FONT_HUGE_DARK_SEMIBOLD: FlattenSimpleInterpolation = css`
+  font-size: ${FONT_SIZE_HUGE};
+  font-weight: ${FONT_WEIGHT_SEMIBOLD};
+  color: ${C_DARK_GRAY};
+`

package/src/testing/utils/index.ts

@@ -0,0 +1,2 @@
+export * from './renderWithProviders'
+export * from './matchers'

package/src/testing/utils/matchers.ts

@@ -0,0 +1,31 @@
+import { when } from 'vitest-when'
+import type { Matcher } from '@testing-library/react'
+
+// these are needed because under the hood react calls components with two arguments (props and some second argument nobody seems to know)
+// https://github.com/timkindberg/jest-when/issues/66
+// use partialComponentPropsMatcher to only verify the props you pass into partialComponentPropsMatcher
+export const partialComponentPropsMatcher = (argsToMatch: unknown): any =>
+  // @ts-expect-error(sa, 2021-08-03): when.allArgs not part of type definition yet for jest-when
+  when.allArgs((args, equals) =>
+    equals(args[0], expect.objectContaining(argsToMatch))
+  )
+
+// Match things like <p>Some <strong>nested</strong> text</p>
+// Use with either string match: getByText(nestedTextMatcher("Some nested text"))
+// or regexp: getByText(nestedTextMatcher(/Some nested text/))
+export const nestedTextMatcher = (textMatch: string | RegExp): Matcher => (
+  content,
+  node
+) => {
+  const hasText = (n: typeof node): boolean => {
+    if (n == null || n.textContent === null) return false
+    return typeof textMatch === 'string'
+      ? Boolean(n?.textContent.match(textMatch))
+      : textMatch.test(n.textContent)
+  }
+  const nodeHasText = hasText(node)
+  const childrenDontHaveText =
+    node != null && Array.from(node.children).every(child => !hasText(child))
+
+  return nodeHasText && childrenDontHaveText
+}

package/src/testing/utils/renderWithProviders.tsx

@@ -0,0 +1,59 @@
+// render using targetted component using @testing-library/react
+// with wrapping providers for i18next and redux
+
+import { QueryClient, QueryClientProvider } from 'react-query'
+import { I18nextProvider } from 'react-i18next'
+import { Provider } from 'react-redux'
+import { vi } from 'vitest'
+import { render } from '@testing-library/react'
+import { createStore } from 'redux'
+
+import type {
+  ComponentProps,
+  ComponentType,
+  PropsWithChildren,
+  ReactElement,
+} from 'react'
+import type { RenderResult, RenderOptions } from '@testing-library/react'
+import type { PreloadedState, Store } from 'redux'
+
+export interface RenderWithProvidersOptions<State> extends RenderOptions {
+  initialState?: State
+  i18nInstance: ComponentProps<typeof I18nextProvider>['i18n']
+}
+
+export function renderWithProviders<State>(
+  Component: ReactElement,
+  options?: RenderWithProvidersOptions<State>
+): [RenderResult, Store<State>] {
+  // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+  const { initialState = {}, i18nInstance = null } = options || {}
+
+  const store: Store<State> = createStore(
+    vi.fn(),
+    initialState as PreloadedState<State>
+  )
+  store.dispatch = vi.fn()
+  store.getState = vi.fn(() => initialState) as () => State
+
+  const queryClient = new QueryClient()
+
+  const ProviderWrapper: ComponentType<PropsWithChildren<{}>> = ({
+    children,
+  }) => {
+    const BaseWrapper = (
+      <QueryClientProvider client={queryClient}>
+        <Provider store={store}>{children}</Provider>
+      </QueryClientProvider>
+    )
+    if (i18nInstance != null) {
+      return (
+        <I18nextProvider i18n={i18nInstance}>{BaseWrapper}</I18nextProvider>
+      )
+    } else {
+      return BaseWrapper
+    }
+  }
+
+  return [render(Component, { wrapper: ProviderWrapper }), store]
+}