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

package/src/structure/structure.module.css

@@ -1,114 +0,0 @@
-/* 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

@@ -1,20 +0,0 @@
-@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

@@ -1,16 +0,0 @@
-// 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

@@ -1,57 +0,0 @@
-: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

@@ -1,58 +0,0 @@
-// 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

@@ -1,12 +0,0 @@
-// 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

@@ -1,39 +0,0 @@
-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

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

package/src/styles/index.ts

@@ -1,8 +0,0 @@
-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

@@ -1,31 +0,0 @@
-// 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

@@ -1,5 +0,0 @@
-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

@@ -1,11 +0,0 @@
-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

@@ -1,22 +0,0 @@
-: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

@@ -1,90 +0,0 @@
-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

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

package/src/testing/utils/matchers.ts

@@ -1,32 +0,0 @@
-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

@@ -1,59 +0,0 @@
-// render using targetted component using @testing-library/react
-// with wrapping providers for i18next and redux
-
-import { I18nextProvider } from 'react-i18next'
-import { QueryClient, QueryClientProvider } from 'react-query'
-import { Provider } from 'react-redux'
-import { render } from '@testing-library/react'
-import { createStore } from 'redux'
-import { vi } from 'vitest'
-
-import type { RenderOptions, RenderResult } from '@testing-library/react'
-import type { PreloadedState, Store } from 'redux'
-import type {
-  ComponentProps,
-  ComponentType,
-  PropsWithChildren,
-  ReactElement,
-} from 'react'
-
-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]
-}