@opentrons/components 0.2.0-alpha.4 → 0.3.0-alpha.0

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

@@ -5,6 +5,7 @@ interface ProtocolDeckProps {
     protocolAnalysis: CompletedProtocolAnalysis | ProtocolAnalysisOutput | null;
     /** extra props to pass through to BaseDeck component */
     baseDeckProps?: Partial<ComponentProps<typeof BaseDeck>>;
+    showLabwareLabels?: boolean;
 }
 export declare function ProtocolDeck(props: ProtocolDeckProps): JSX.Element | null;
 export {};

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

@@ -11,6 +11,8 @@ export interface ToolboxProps extends StyleProps {
     closeButton?: JSX.Element;
     titlePadding?: string;
     childrenPadding?: string;
+    /** Optional test id for the scrollable children container. */
+    childrenContainerTestId?: string;
     subHeader?: JSX.Element | null;
     secondaryHeaderButton?: JSX.Element;
 }

package/lib/organisms/index.d.ts

@@ -1,6 +1,7 @@
-export * from './DeckLabelSet';
-export * from './Toolbox';
-export * from './ProtocolTimelineScrubber';
 export * from './CommandText';
+export * from './DeckLabelSet';
 export * from './FixtureOption';
+export * from './LabwareDetailsWithCount';
+export * from './LabwareInfoOverlay';
 export * from './ProtocolDeck';
+export * from './Toolbox';

package/lib/primitives/Box.d.ts

@@ -1,7 +1,3 @@
-import type { PrimitiveComponent } from './types';
-/**
- * Simple Box atom. Renders a `div` by default and accepts all primitive styling props.
- *
- * @component
- */
-export declare const Box: PrimitiveComponent<'div'>;
+import type { ComponentProps, FC } from 'react';
+import type { StyleProps } from './types';
+export declare const Box: FC<ComponentProps<'div'> & StyleProps>;

package/lib/primitives/Btn.d.ts

@@ -1,59 +1,6 @@
-import type { StyledComponent } from 'styled-components';
+import type { ComponentProps, FC } from 'react';
 import type { StyleProps } from './types';
 export declare const BUTTON_TYPE_SUBMIT: 'submit';
 export declare const BUTTON_TYPE_RESET: 'reset';
 export declare const BUTTON_TYPE_BUTTON: 'button';
-/**
- * Button primitive
- *
- * @component
- */
-export declare const Btn: StyledComponent<'button', any, StyleProps, any>;
-/**
- * Primary button variant
- *
- * @component
- */
-export declare const PrimaryBtn: StyledComponent<"button", any, StyleProps, any>;
-/**
- * Secondary button variant
- *
- * @component
- */
-export declare const SecondaryBtn: StyledComponent<"button", any, StyleProps, any>;
-/**
- * New primary button variant used in app
- *
- * @component
- */
-export declare const NewPrimaryBtn: StyledComponent<"button", any, StyleProps, any>;
-/**
- * New secondary button variant used in app
- *
- * @component
- */
-export declare const NewSecondaryBtn: StyledComponent<"button", any, StyleProps, any>;
-/**
- * Red primary button variant used in app
- *
- * @component
- */
-export declare const NewAlertPrimaryBtn: StyledComponent<"button", any, StyleProps, any>;
-/**
- * Red secondary button variant used in app
- *
- * @component
- */
-export declare const NewAlertSecondaryBtn: StyledComponent<"button", any, StyleProps, any>;
-/**
- * Light secondary button variant
- *
- * @component
- */
-export declare const LightSecondaryBtn: StyledComponent<"button", any, StyleProps, any>;
-/**
- * Tertiary button variant
- *
- * @component
- */
-export declare const TertiaryBtn: StyledComponent<"button", any, StyleProps, any>;
+export declare const Btn: FC<ComponentProps<'button'> & StyleProps>;

package/lib/primitives/Buttons/NewPrimaryBtn.d.ts

@@ -0,0 +1,8 @@
+import type { ComponentProps, FC } from 'react';
+import type { StyleProps } from '../types';
+/**
+ * New primary button variant used in app
+ *
+ * @component
+ */
+export declare const NewPrimaryBtn: FC<ComponentProps<'button'> & StyleProps>;

package/lib/primitives/Buttons/NewSecondaryBtn.d.ts

@@ -0,0 +1,8 @@
+import type { ComponentProps, FC } from 'react';
+import type { StyleProps } from '../types';
+/**
+ * New secondary button variant used in app
+ *
+ * @component
+ */
+export declare const NewSecondaryBtn: FC<ComponentProps<'button'> & StyleProps>;

package/lib/primitives/Flex.d.ts

@@ -1,7 +1,3 @@
-import type { PrimitiveComponent } from './types';
-/**
- * Flex primitive
- *
- * @component
- */
-export declare const Flex: PrimitiveComponent<'div'>;
+import type { ComponentProps, FC } from 'react';
+import type { StyleProps } from './types';
+export declare const Flex: FC<ComponentProps<'div'> & StyleProps>;

package/lib/primitives/ForeignObject.d.ts

@@ -1,23 +1,13 @@
-import type { PrimitiveComponent, StyleProps } from './types';
-export interface ForeignObjectProps extends StyleProps {
-    /** attach a width attribute to the <svg> element */
-    svgWidth?: string | number;
-    /** attach a height attribute to the <svg> element */
-    svgHeight?: string | number;
-    /**
-     * internal helper prop to remap width style-prop to CSS
-     * @internal
-     */
-    _cssWidth?: string | number;
-    /**
-     * internal helper prop to remap height style-prop to CSS
-     * @internal
-     */
-    _cssHeight?: string | number;
+import type { ReactElement, ReactNode } from 'react';
+export interface ForeignObjectProps {
+    width: string | number;
+    height: string | number;
+    x: string | number;
+    y: string | number;
+    children?: ReactNode;
 }
 /**
  * Foreign Object styled atomic component
- *
  * @component
  */
-export declare const ForeignObject: PrimitiveComponent<'foreignObject', ForeignObjectProps>;
+export declare const ForeignObject: ({ width, height, x, y, children, }: ForeignObjectProps) => ReactElement;

package/lib/primitives/Link.d.ts

@@ -1,11 +1,7 @@
-import type { PrimitiveComponent, StyleProps } from './types';
+import type { ComponentProps, FC } from 'react';
+import type { StyleProps } from './types';
 export interface LinkProps extends StyleProps {
     /** render link with target="_blank" */
     external?: boolean;
 }
-/**
- * Link primitive
- *
- * @component
- */
-export declare const Link: PrimitiveComponent<'a', LinkProps>;
+export declare const Link: FC<ComponentProps<'a'> & LinkProps>;

package/lib/primitives/Svg.d.ts

@@ -1,23 +1,14 @@
-import type { PrimitiveComponent, StyleProps } from './types';
+import type { ComponentProps, FC } from 'react';
+import type { StyleProps } from './types';
 export interface SvgProps extends StyleProps {
     /** attach a width attribute to the <svg> element */
     svgWidth?: string | number;
     /** attach a height attribute to the <svg> element */
     svgHeight?: string | number;
-    /**
-     * internal helper prop to remap width style-prop to CSS
-     * @internal
-     */
-    _cssWidth?: string | number;
-    /**
-     * internal helper prop to remap height style-prop to CSS
-     * @internal
-     */
-    _cssHeight?: string | number;
 }
 /**
- * SVG primitive
+ * SVG primitive with style props support
  *
  * @component
  */
-export declare const Svg: PrimitiveComponent<'svg', SvgProps>;
+export declare const Svg: FC<ComponentProps<'svg'> & SvgProps>;

package/lib/primitives/Text.d.ts

@@ -1,7 +1,5 @@
-import type { PrimitiveComponent } from './types';
-/**
- * Text primitive
- *
- * @component
- */
-export declare const Text: PrimitiveComponent<'p'>;
+import type { ComponentProps, FC } from 'react';
+import type { StyleProps } from './types';
+export declare const Text: FC<ComponentProps<'p'> & StyleProps & {
+    as?: string;
+}>;

package/lib/primitives/index.d.ts

@@ -6,4 +6,6 @@ export * from './ForeignObject';
 export * from './Link';
 export * from './Svg';
 export * from './Text';
+export * from './Buttons/NewSecondaryBtn';
+export * from './Buttons/NewPrimaryBtn';
 export * from './types';

package/lib/primitives/style-props.d.ts

@@ -1,7 +1,7 @@
-import type { CSSObject } from 'styled-components';
+import type { CSSProperties } from 'react';
 import type * as Types from './types';
 type Text = string | number;
-export declare const STYLE_PROPS: ("filter" | "height" | "width" | "color" | "top" | "bottom" | "left" | "right" | "overflow" | "overflowX" | "overflowY" | "cursor" | "transformOrigin" | "backgroundColor" | "opacity" | "fontSize" | "fontWeight" | "fontStyle" | "lineHeight" | "textAlign" | "textTransform" | "textDecoration" | "margin" | "marginX" | "marginY" | "marginTop" | "marginRight" | "marginBottom" | "marginLeft" | "padding" | "paddingX" | "paddingY" | "paddingTop" | "paddingRight" | "paddingBottom" | "paddingLeft" | "border" | "borderTop" | "borderRight" | "borderBottom" | "borderLeft" | "borderRadius" | "borderWidth" | "borderColor" | "boxShadow" | "flex" | "alignItems" | "alignSelf" | "justifyContent" | "flexDirection" | "flexWrap" | "whiteSpace" | "columnGap" | "gridGap" | "gridTemplateAreas" | "gridTemplateRows" | "gridTemplateColumns" | "gridArea" | "gridRow" | "gridColumn" | "display" | "size" | "minWidth" | "maxWidth" | "minHeight" | "maxHeight" | "wordSpacing" | "overflowWrap" | "position" | "zIndex" | "transform" | "textOverflow" | "flexGrow" | "gap" | "rowGap" | "transition")[];
-export declare const styleProps: (props: Types.StyleProps) => CSSObject;
+export declare const STYLE_PROPS: ("top" | "bottom" | "left" | "right" | "height" | "filter" | "width" | "position" | "overflow" | "overflowX" | "overflowY" | "cursor" | "transformOrigin" | "color" | "backgroundColor" | "opacity" | "fontSize" | "fontWeight" | "fontStyle" | "lineHeight" | "textAlign" | "textTransform" | "textDecoration" | "textOverflow" | "margin" | "marginX" | "marginY" | "marginTop" | "marginRight" | "marginBottom" | "marginLeft" | "padding" | "paddingX" | "paddingY" | "paddingTop" | "paddingRight" | "paddingBottom" | "paddingLeft" | "border" | "borderTop" | "borderRight" | "borderBottom" | "borderLeft" | "borderRadius" | "borderWidth" | "borderColor" | "boxShadow" | "flex" | "alignItems" | "alignSelf" | "alignContent" | "justifyContent" | "justifyItems" | "justifySelf" | "flexDirection" | "flexWrap" | "flexGrow" | "whiteSpace" | "columnGap" | "gridGap" | "gap" | "gridTemplateAreas" | "gridTemplateRows" | "gridTemplateColumns" | "gridArea" | "gridRow" | "gridColumn" | "display" | "visibility" | "size" | "minWidth" | "maxWidth" | "minHeight" | "maxHeight" | "wordSpacing" | "overflowWrap" | "zIndex" | "transform" | "rowGap" | "transition")[];
+export declare const styleProps: (props: Types.StyleProps) => CSSProperties;
 export declare const isntStyleProp: (prop: string | Text) => boolean;
 export {};

package/lib/primitives/types.d.ts

@@ -1,5 +1,4 @@
-import type { CSSProperties, StyledComponent } from 'styled-components';
-import type { ComponentType } from 'react';
+import type { ComponentType, CSSProperties } from 'react';
 export interface ColorProps {
     color?: string;
     backgroundColor?: string;
@@ -13,6 +12,7 @@ export interface TypographyProps {
     textAlign?: string;
     textTransform?: string;
     textDecoration?: string;
+    textOverflow?: string;
 }
 export interface SpacingProps {
     margin?: string | number;
@@ -45,14 +45,20 @@ export interface FlexboxProps {
     flex?: string | number;
     alignItems?: string;
     alignSelf?: string;
+    alignContent?: string;
     justifyContent?: string;
+    justifyItems?: string;
+    justifySelf?: string;
     flexDirection?: string;
     flexWrap?: string;
+    flexShrink?: string | number;
+    flexGrow?: string | number;
     whiteSpace?: string;
 }
 export interface GridProps {
     columnGap?: string | number;
     gridGap?: string | number;
+    gap?: string | number;
     gridTemplateAreas?: string;
     gridTemplateRows?: string;
     gridTemplateColumns?: string;
@@ -62,6 +68,7 @@ export interface GridProps {
 }
 export interface LayoutProps {
     display?: string;
+    visibility?: string;
     size?: string | number;
     width?: string | number;
     minWidth?: string | number;
@@ -93,4 +100,4 @@ export interface TransitionProps {
 export interface StyleProps extends ColorProps, TypographyProps, SpacingProps, BorderProps, FlexboxProps, GridProps, LayoutProps, PositionProps, TransitionProps {
     className?: string;
 }
-export type PrimitiveComponent<Instance extends keyof JSX.IntrinsicElements | ComponentType<any>, Props extends StyleProps = StyleProps> = StyledComponent<Instance, any, Props, any>;
+export type PrimitiveComponent<Instance extends keyof JSX.IntrinsicElements | ComponentType<any>, Props extends StyleProps = StyleProps> = ComponentType<Instance extends keyof JSX.IntrinsicElements ? JSX.IntrinsicElements[Instance] & Props : Instance extends ComponentType<infer P> ? P & Props : Props>;

package/lib/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;
+  align-items: center;
+  justify-content: space-between;
+  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 {
+    color: inherit;
+    text-decoration: underline;
+  }
+
+  &: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/lib/src/atoms/StyledText/placeholderstyledtext.module.css

@@ -0,0 +1,26 @@
+@media not all and (width: 1024px) and (height: 600px) {
+  .heading_small_bold {
+    font-size: 1.125rem;
+    font-weight: var(--font-weight-bold);
+    line-height: var(--line-height-24);
+  }
+
+  .caption_bold {
+    font-size: 0.75rem;
+    font-weight: var(--font-weight-bold);
+  }
+
+  .body_default_semi_bold {
+    font-size: var(--font-size-16);
+    font-weight: var(--font-weight-semi-bold);
+    line-height: var(--line-height-24);
+  }
+}
+
+@media (width: 1024px) and (height: 600px) {
+  .small_body_text_bold {
+    font-size: var(--font-size-20);
+    font-weight: var(--font-weight-bold);
+    line-height: var(--font-height-24);
+  }
+}