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

package/lib/tooltips/HoverTooltip.d.ts

@@ -1,36 +0,0 @@
-import * as React from 'react';
-import type { DeprecatedTooltipProps } from './DeprecatedTooltip';
-interface MouseHandlers {
-    onMouseEnter: () => void;
-    onMouseLeave: () => void;
-}
-export type HoverTooltipHandlers = React.PropsWithRef<MouseHandlers>;
-export type HoverTooltipProps = DeprecatedTooltipProps;
-interface HoverTooltipState {
-    isOpen: boolean;
-}
-/**
- * Tooltip component that triggers on `MouseEnter` and `MouseLeave`. See
- * `Tooltip` for full props list.
- *
- * `props.children` is a function that receives the following props object:
- * ```js
- * type HoverTooltipHandlers = {
- *   ref: React.Ref<*>,
- *   onMouseEnter: (React.MouseEvent) => void,
- *   onMouseLeave: (React.MouseEvent) => void,
- * }
- * ```
- *
- * @deprecated Use `Tooltip` and `useHoverTooltip` instead
- */
-export declare class HoverTooltip extends React.Component<HoverTooltipProps, HoverTooltipState> {
-    openTimeout: number | null;
-    closeTimeout: number | null;
-    constructor(props: HoverTooltipProps);
-    componentWillUnmount(): void;
-    delayedOpen: () => void;
-    delayedClose: () => void;
-    render(): JSX.Element;
-}
-export {};

package/lib/tooltips/LegacyTooltip.d.ts

@@ -1,35 +0,0 @@
-import * as React from 'react';
-import type { CSSProperties } from 'react';
-import type { Placement } from './types';
-import type { StyleProps } from '../primitives';
-export interface LegacyTooltipProps extends StyleProps {
-    /** Whether or not the tooltip should be rendered */
-    visible: boolean;
-    /** Contents of the tooltip */
-    children?: React.ReactNode;
-    /**
-     * Tooltip element ID (provided by useTooltip). Will match
-     * targetProps.aria-describedby
-     */
-    id: string;
-    /** Actual tooltip placement, if known (provided by useTooltip) */
-    placement: Placement | null;
-    /** Inline styles to apply to the tooltip element (provided by useTooltip) */
-    style: CSSProperties;
-    /** React function ref for tooltip's arrow element (provided by useTooltip) */
-    arrowRef: React.RefCallback<HTMLElement | null>;
-    /** Inline styles to apply to arrow element (provided by useTooltip) */
-    arrowStyle: CSSProperties;
-}
-/**
- * Tooltip component that renders based on its `visible` prop. For use with the
- * `useTooltip` and `useHoverTooltip` hooks. See examples in `Tooltip.md`.
- */
-export declare const LegacyTooltip: React.ForwardRefExoticComponent<LegacyTooltipProps & React.RefAttributes<HTMLDivElement>>;
-export interface ArrowProps {
-    placement: Placement | null;
-    arrowRef: React.RefCallback<HTMLElement>;
-    arrowStyle: CSSProperties;
-    backgroundColor: string;
-}
-export declare function Arrow(props: ArrowProps): JSX.Element;

package/lib/tooltips/__tests__/Tooltip.test.d.ts

@@ -1 +0,0 @@
-export {};

package/lib/tooltips/__tests__/useHoverTooltip.test.d.ts

@@ -1 +0,0 @@
-export {};

package/lib/tooltips/__tests__/usePopper.test.d.ts

@@ -1 +0,0 @@
-export {};

package/lib/tooltips/__tests__/useTooltip.test.d.ts

@@ -1 +0,0 @@
-export {};

package/lib/tooltips/constants.d.ts

@@ -1,17 +0,0 @@
-export declare const TOOLTIP_AUTO: 'auto';
-export declare const TOOLTIP_AUTO_START: 'auto-start';
-export declare const TOOLTIP_AUTO_END: 'auto-end';
-export declare const TOOLTIP_TOP: 'top';
-export declare const TOOLTIP_TOP_START: 'top-start';
-export declare const TOOLTIP_TOP_END: 'top-end';
-export declare const TOOLTIP_RIGHT: 'right';
-export declare const TOOLTIP_RIGHT_START: 'right-start';
-export declare const TOOLTIP_RIGHT_END: 'right-end';
-export declare const TOOLTIP_BOTTOM: 'bottom';
-export declare const TOOLTIP_BOTTOM_START: 'bottom-start';
-export declare const TOOLTIP_BOTTOM_END: 'bottom-end';
-export declare const TOOLTIP_LEFT: 'left';
-export declare const TOOLTIP_LEFT_START: 'left-start';
-export declare const TOOLTIP_LEFT_END: 'left-end';
-export declare const TOOLTIP_ABSOLUTE: 'absolute';
-export declare const TOOLTIP_FIXED: 'fixed';

package/lib/tooltips/index.d.ts

@@ -1,8 +0,0 @@
-export * from './DeprecatedTooltip';
-export * from './HoverTooltip';
-export * from './LegacyTooltip';
-export * from './useTooltip';
-export * from './useHoverTooltip';
-export * from './usePopper';
-export * from './constants';
-export * from './types';

package/lib/tooltips/styles.d.ts

@@ -1,12 +0,0 @@
-export declare const INITIAL_TOOLTIP_STYLE: {
-    readonly position: "absolute";
-    readonly left: "0";
-    readonly top: "0";
-    readonly margin: "0";
-};
-export declare const INITIAL_ARROW_STYLE: {
-    readonly position: "absolute";
-};
-export declare const TOOLTIP_OFFSET_PX = 8;
-export declare const ARROW_OFFSET_PX = 4;
-export declare const ARROW_SIZE_PX: number;

package/lib/tooltips/types.d.ts

@@ -1,52 +0,0 @@
-import type { CSSProperties } from 'react';
-import type { Instance, Options, Modifier } from '@popperjs/core/lib/types';
-import type { UseHoverOptions, HoverHandlers } from '../interaction-enhancers';
-export type Placement = Options['placement'];
-export type Strategy = Options['strategy'];
-export type PopperInstance = Instance;
-export type PopperOptions = Options;
-export type PopperModifer<T> = Modifier<T>;
-export type HandleStateUpdate = (placement: Placement, styles: {
-    popper?: CSSProperties;
-    arrow?: CSSProperties;
-}) => void;
-export interface UsePopperOptions {
-    target: Element | null;
-    tooltip: HTMLElement | null;
-    arrow: HTMLElement | null;
-    onStateUpdate: HandleStateUpdate;
-    placement?: Placement | null;
-    strategy?: Strategy | null;
-    offset?: number;
-}
-export type UsePopperResult = Instance | null;
-export interface UseTooltipOptions {
-    placement?: Placement;
-    strategy?: Strategy;
-    offset?: number;
-}
-export interface UseTooltipResultTargetProps {
-    ref: React.RefCallback<Element | null>;
-    'aria-describedby': string;
-}
-export interface UseTooltipResultTooltipProps {
-    id: string;
-    ref: React.RefCallback<HTMLElement | null>;
-    placement: Placement | null;
-    style: CSSProperties;
-    arrowRef: React.RefCallback<HTMLElement | null>;
-    arrowStyle: CSSProperties;
-}
-export type UseTooltipResult = [
-    UseTooltipResultTargetProps,
-    UseTooltipResultTooltipProps
-];
-export type UseHoverTooltipOptions = Partial<UseTooltipOptions & UseHoverOptions>;
-export interface UseHoverTooltipTargetProps extends UseTooltipResultTargetProps, HoverHandlers {
-}
-export type UseHoverTooltipResult = [
-    UseHoverTooltipTargetProps,
-    UseTooltipResultTooltipProps & {
-        visible: boolean;
-    }
-];

package/lib/tooltips/useHoverTooltip.d.ts

@@ -1,24 +0,0 @@
-import type { UseHoverTooltipOptions, UseHoverTooltipResult } from './types';
-/**
- * Hook to position a tooltip component relative to a target component on hover.
- * Adds a default `enterDelay` of 300 ms before the tooltip will show
- *
- * @param {UseHoverTooltipOptions} [options={}] (change default options (see `useTooltip` and `useHover`))
- * @returns {UseHoverTooltipResult}
- * @example
- * ```js
- * import { useHoverTooltip, Tooltip } from '@opentrons/components'
- *
- * export function HelloWorld() {
- *   const [targetProps, tooltipProps] = useHoverTooltip()
- *
- *   return (
- *     <>
- *       <span {...targetProps}>Hello</span>
- *       <Tooltip {...tooltipProps}>World</Tooltip>
- *     </>
- *   )
- * }
- * ```
- */
-export declare function useHoverTooltip(options?: UseHoverTooltipOptions): UseHoverTooltipResult;

package/lib/tooltips/usePopper.d.ts

@@ -1,2 +0,0 @@
-import type { UsePopperOptions, UsePopperResult } from './types';
-export declare function usePopper(options: UsePopperOptions): UsePopperResult;

package/lib/tooltips/useTooltip.d.ts

@@ -1,31 +0,0 @@
-import type { UseTooltipOptions, UseTooltipResult } from './types';
-/**
- * Hook to position a tooltip component relative to a target component
- *
- * @param {UseTooltipOptions} [options={}] (change the default `position`, `strategy`, or `offset` of the tooltip)
- * @returns {UseTooltipResult}
- * @example
- * ```js
- * import {
- *   useTooltip,
- *   Tooltip,
- *   TOOLTIP_TOP,
- *   TOOLTIP_FIXED
- * } from '@opentrons/components'
- *
- * export function HelloWorld() {
- *   const [targetProps, tooltipProps] = useTooltip({
- *     position: TOOLTIP_TOP,
- *     strategy: TOOLTIP_FIXED
- *   })
- *
- *   return (
- *     <>
- *       <span {...targetProps}>Hello</span>
- *       <Tooltip visible={true} {...tooltipProps}>World</Tooltip>
- *     </>
- *   )
- * }
- * ```
- */
-export declare function useTooltip(options?: UseTooltipOptions): UseTooltipResult;

package/lib/ui-style-constants/index.d.ts

@@ -1,4 +0,0 @@
-export * as RESPONSIVENESS from './responsiveness';
-export * as SPACING from './spacing';
-export * as TYPOGRAPHY from './typography';
-export * as VIEWPORT from './viewport';

package/lib/ui-style-constants/responsiveness.d.ts

@@ -1,3 +0,0 @@
-export declare const touchscreenMediaQuerySpecs = "(height: 600px) and (width: 1024px)";
-export declare const isTouchscreenDynamic: () => boolean;
-export declare const isTouchscreen: boolean;

package/lib/ui-style-constants/spacing.d.ts

@@ -1,18 +0,0 @@
-export declare const spacing2: "0.125rem";
-export declare const spacing4: "0.25rem";
-export declare const spacing6: "0.375rem";
-export declare const spacing8: "0.5rem";
-export declare const spacing10: "0.625rem";
-export declare const spacing12: "0.75rem";
-export declare const spacing16: "1rem";
-export declare const spacing20: "1.25rem";
-export declare const spacing24: "1.5rem";
-export declare const spacing32: "2rem";
-export declare const spacing40: "2.5rem";
-export declare const spacing44: "2.75rem";
-export declare const spacing48: "3rem";
-export declare const spacing60: "3.75rem";
-export declare const spacing68: "4.25rem";
-export declare const spacing80: "5rem";
-export declare const spacing120: "7.5rem";
-export declare const spacingAuto: "auto";

package/lib/ui-style-constants/typography.d.ts

@@ -1,71 +0,0 @@
-export declare const fontSize80 = "5rem";
-export declare const fontSize38 = "2.375rem";
-export declare const fontSize32 = "2rem";
-export declare const fontSize28 = "1.75rem";
-export declare const fontSize22 = "1.375rem";
-export declare const fontSize20 = "1.25rem";
-export declare const fontSizeH1 = "1.188rem";
-export declare const fontSizeH2 = "0.9375rem";
-export declare const fontSizeH3 = "0.875rem";
-export declare const fontSizeH4 = "0.813rem";
-export declare const fontSizeH6 = "0.563rem";
-export declare const fontSizeP = "0.8125rem";
-export declare const fontSizeLabel = "0.6875rem";
-export declare const fontSizeCaption = "0.625rem";
-export declare const fontWeightBold = 700;
-export declare const fontWeightSemiBold = 600;
-export declare const fontWeightRegular = 400;
-export declare const fontWeightLight = 300;
-export declare const lineHeight96 = "6rem";
-export declare const lineHeight48 = "3rem";
-export declare const lineHeight42 = "2.625rem";
-export declare const lineHeight36 = "2.25rem";
-export declare const lineHeight28 = "1.75rem";
-export declare const lineHeight24 = "1.5rem";
-export declare const lineHeight20 = "1.25rem";
-export declare const lineHeight18 = "1.125rem";
-export declare const lineHeight16 = "1rem";
-export declare const lineHeight12 = "0.75rem";
-export declare const lineHeightNormal = "normal";
-export declare const fontStyleNormal = "normal";
-export declare const fontStyleItalic = "italic";
-export declare const textTransformNone = "none";
-export declare const textTransformCapitalize = "capitalize";
-export declare const textTransformUppercase = "uppercase";
-export declare const textTransformLowercase = "lowercase";
-export declare const textAlignLeft = "left";
-export declare const textAlignRight = "right";
-export declare const textAlignCenter = "center";
-export declare const textAlignJustify = "justify";
-export declare const textDecorationUnderline = "underline";
-export declare const h1Default: import("styled-components").FlattenSimpleInterpolation;
-export declare const h2Regular: import("styled-components").FlattenSimpleInterpolation;
-export declare const h2SemiBold: import("styled-components").FlattenSimpleInterpolation;
-export declare const h3Regular: import("styled-components").FlattenSimpleInterpolation;
-export declare const h3SemiBold: import("styled-components").FlattenSimpleInterpolation;
-export declare const h6Default: import("styled-components").FlattenSimpleInterpolation;
-export declare const h6SemiBold: import("styled-components").FlattenSimpleInterpolation;
-export declare const pRegular: import("styled-components").FlattenSimpleInterpolation;
-export declare const pSemiBold: import("styled-components").FlattenSimpleInterpolation;
-export declare const labelRegular: import("styled-components").FlattenSimpleInterpolation;
-export declare const labelSemiBold: import("styled-components").FlattenSimpleInterpolation;
-export declare const linkPSemiBold: import("styled-components").FlattenSimpleInterpolation;
-export declare const level1Header: import("styled-components").FlattenSimpleInterpolation;
-export declare const level2HeaderBold: import("styled-components").FlattenSimpleInterpolation;
-export declare const level2HeaderSemiBold: import("styled-components").FlattenSimpleInterpolation;
-export declare const level2HeaderRegular: import("styled-components").FlattenSimpleInterpolation;
-export declare const level3HeaderBold: import("styled-components").FlattenSimpleInterpolation;
-export declare const level3HeaderSemiBold: import("styled-components").FlattenSimpleInterpolation;
-export declare const level3HeaderRegular: import("styled-components").FlattenSimpleInterpolation;
-export declare const level4HeaderBold: import("styled-components").FlattenSimpleInterpolation;
-export declare const level4HeaderSemiBold: import("styled-components").FlattenSimpleInterpolation;
-export declare const level4HeaderRegular: import("styled-components").FlattenSimpleInterpolation;
-export declare const bodyTextBold: import("styled-components").FlattenSimpleInterpolation;
-export declare const bodyTextSemiBold: import("styled-components").FlattenSimpleInterpolation;
-export declare const bodyTextRegular: import("styled-components").FlattenSimpleInterpolation;
-export declare const smallBodyTextBold: import("styled-components").FlattenSimpleInterpolation;
-export declare const smallBodyTextSemiBold: import("styled-components").FlattenSimpleInterpolation;
-export declare const smallBodyTextRegular: import("styled-components").FlattenSimpleInterpolation;
-export declare const darkLinkH4SemiBold: import("styled-components").FlattenSimpleInterpolation;
-export declare const darkLinkLabelSemiBold: import("styled-components").FlattenSimpleInterpolation;
-export declare const darkLinkLabelSemiBoldDisabled: import("styled-components").FlattenSimpleInterpolation;

package/lib/ui-style-constants/viewport.d.ts

@@ -1,15 +0,0 @@
-export declare const touchScreenViewport: {
-    viewport: {
-        viewports: {
-            onDeviceDisplay: {
-                name: string;
-                type: string;
-                styles: {
-                    width: string;
-                    height: string;
-                };
-            };
-        };
-        defaultViewport: string;
-    };
-};

package/lib/utils.d.ts

@@ -1,15 +0,0 @@
-export declare const humanizeLabwareType: (labwareType: string) => string;
-export declare const wellNameSplit: (wellName: string) => [string, string];
-/**
- * Truncate a long string to display it
- * @example
- * truncateString('Illumina DNA Prep with Enrichment: Part 1 - Tagmentation, Clean Up, Amplify Tagmlo1234567ted', 88, 66);
- * Illumina DNA Prep with Enrichment: Part 1 - Tagmentation, Clean Up...fy Tagmlo1234567ted
- *
- * @param {string} text - A string param
- * @param {number} maxLength - A maximum length of display
- * @param {number} breakPoint - Optional A point to insert three dots
- *
- * @returns {string} Returns the truncated string
- */
-export declare function truncateString(text: string, maxLength: number, breakPoint?: number): string;

package/src/__tests__/utils.test.ts

@@ -1,27 +0,0 @@
-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/alerts.module.css

@@ -1,103 +0,0 @@
-@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/atoms/Checkbox/__tests__/Checkbox.test.tsx

@@ -1,55 +0,0 @@
-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()
-  })
-})