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

package/src/lists/TitledList.tsx

@@ -1,154 +0,0 @@
-// TitledList component
-import { Children } from 'react'
-import cx from 'classnames'
-
-import { LegacyStyledText } from '../atoms'
-import { COLORS } from '../helix-design-system'
-import { Icon } from '../icons'
-import styles from './lists.module.css'
-
-import type { MouseEvent, ReactNode } from 'react'
-import type { IconName, IconProps } from '../icons'
-
-// TODO(bc, 2021-03-31): reconsider whether this belongs in components library
-// it is bloated with application specific functionality
-
-export interface TitledListProps {
-  /** id attribute */
-  id?: string
-  /** text of title */
-  title: string
-  /** optional icon left of the title */
-  iconName?: IconName | null | undefined
-  /** props passed down to icon (`className` and `name` are ignored) */
-  iconProps?: Omit<IconProps, 'name'>
-  /** optional data test id for the container */
-  'data-test'?: string
-  // TODO(mc, 2018-01-25): enforce <li> children requirement with flow
-  /** children must all be `<li>` */
-  children?: ReactNode
-  /** additional classnames */
-  className?: string
-  /** component with descriptive text about the list */
-  description?: ReactNode
-  /** optional click action (on title div, not children) */
-  onClick?: (event: MouseEvent) => unknown
-  /** optional right click action (on wrapping div) */
-  onContextMenu?: (event: MouseEvent) => unknown
-  /** optional mouseEnter action */
-  onMouseEnter?: (event: MouseEvent) => unknown
-  /** optional mouseLeave action */
-  onMouseLeave?: (event: MouseEvent) => unknown
-  /** caret click action; if defined, list is expandable and carat is visible */
-  onCollapseToggle?: (event: MouseEvent) => unknown
-  /** collapse the list if true (false by default) */
-  collapsed?: boolean
-  /** set to true when TitledList is selected (eg, user clicked it) */
-  selected?: boolean
-  /** set to true when TitledList is hovered (but not when its contents are hovered) */
-  hovered?: boolean
-  /** disables the whole TitledList if true */
-  disabled?: boolean
-  /** appear disabled, but preserve collapsibility */
-  inert?: boolean
-}
-
-/**
- * An ordered list with optional title, icon, and description.
- */
-export function TitledList(props: TitledListProps): JSX.Element {
-  const {
-    id,
-    iconName,
-    disabled,
-    inert,
-    'data-test': dataTest,
-    onCollapseToggle,
-    iconProps,
-    onMouseEnter,
-    onMouseLeave,
-    onContextMenu,
-  } = props
-  const collapsible = onCollapseToggle != null
-
-  const onClick = !disabled ? props.onClick : undefined
-
-  // clicking on the carat will not call props.onClick,
-  // so prevent bubbling up if there is an onCollapseToggle fn
-  const handleCollapseToggle = (e: MouseEvent): void => {
-    if (onCollapseToggle && !disabled) {
-      e.stopPropagation()
-      onCollapseToggle(e)
-    }
-  }
-
-  const hasValidChildren = Children.toArray(props.children).some(child => child)
-
-  const className = cx(styles.titled_list, props.className, {
-    [styles.disabled]: disabled || inert,
-    [styles.titled_list_selected]: !disabled && props.selected,
-    [styles.hover_border]: !disabled && props.hovered,
-  })
-  // @ts-expect-error(sa, 2021-6-23): cast value to boolean
-  const titleBarClass = cx(styles.titled_list_title_bar, {
-    [styles.clickable]: props.onClick,
-  })
-
-  const iconClass = cx(
-    styles.title_bar_icon,
-    styles.icon_left_of_title,
-    iconProps && iconProps.className
-  )
-
-  let textColor = ''
-  if (disabled) {
-    //  the below hex code is for our legacy --c-font-disabled to match other text colors
-    textColor = '#9c9c9c'
-  } else if (props.selected && !disabled) {
-    //  the below hex code is for our legacy --c-highlight to match other text colors
-    textColor = '#5fd8ee'
-  }
-
-  return (
-    <div
-      id={id}
-      className={className}
-      data-test={dataTest}
-      {...{ onMouseEnter, onMouseLeave, onContextMenu }}
-    >
-      <div onClick={onClick} className={titleBarClass}>
-        {iconName && (
-          <Icon {...iconProps} className={iconClass} name={iconName} />
-        )}
-        <LegacyStyledText
-          as="h3"
-          backgroundColor={COLORS.white}
-          color={textColor}
-        >
-          {props.title}
-        </LegacyStyledText>
-        {collapsible && (
-          <div
-            onClick={handleCollapseToggle}
-            className={styles.title_bar_carat}
-          >
-            <Icon
-              className={styles.title_bar_icon}
-              name={
-                props.selected
-                  ? 'chevron-right'
-                  : props.collapsed
-                  ? 'chevron-down'
-                  : 'chevron-up'
-              }
-            />
-          </div>
-        )}
-      </div>
-      {!props.collapsed && props.description}
-      {!props.collapsed && hasValidChildren && (
-        <ol className={styles.list}>{props.children}</ol>
-      )}
-    </div>
-  )
-}

package/src/structure/Card.stories.tsx

@@ -1,29 +0,0 @@
-import { Box, SIZE_4, SPACING_3, Text } from '@opentrons/components'
-
-import { Card as CardComponent } from './Card'
-
-import type { Meta, Story } from '@storybook/react'
-import type * as React from 'react'
-
-export default {
-  title: 'Library/Molecules/Card',
-} as Meta
-
-const Template: Story<React.ComponentProps<typeof CardComponent>> = args => (
-  <CardComponent {...args} />
-)
-export const Card = Template.bind({})
-Card.args = {
-  title: 'Main Title Goes Here',
-  disabled: false,
-  children: (
-    <>
-      <Box size={SIZE_4} padding={SPACING_3}>
-        <Text>Some text contents</Text>
-      </Box>
-      <Box size={SIZE_4} padding={SPACING_3}>
-        <Text>Some more text contents</Text>
-      </Box>
-    </>
-  ),
-}

package/src/structure/Card.tsx

@@ -1,65 +0,0 @@
-// Card component with drop shadow
-import styled, { css } from 'styled-components'
-
-import { isntStyleProp, styleProps } from '../primitives'
-import * as styles from '../styles'
-
-import type { ReactNode } from 'react'
-import type { PrimitiveComponent, StyleProps } from '../primitives'
-
-export interface CardProps extends StyleProps {
-  /** Title for card, all cards should receive a title. */
-  title?: ReactNode
-  /** Card contents */
-  children?: ReactNode
-  /** If card can not be used, gray it out and remove pointer events */
-  disabled?: boolean
-  /** Additional class names */
-  className?: string
-}
-
-/**
- * Renders a basic card element with a white background, dropshadow, and zero padding.
- *
- * Titles and other children handle their own styles and layout.
- */
-export function Card(props: CardProps): JSX.Element {
-  const { title, children, className, disabled, ...styleProps } = props
-
-  return (
-    <Section disabled={disabled} className={className} {...styleProps}>
-      {title && <Title className={className}>{title}</Title>}
-      {children}
-    </Section>
-  )
-}
-
-const Section: PrimitiveComponent<'section'> = styled.section.withConfig({
-  shouldForwardProp: isntStyleProp,
-})`
-  font-size: ${styles.FONT_SIZE_BODY_2};
-  position: relative;
-  overflow: visible;
-  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.33);
-  ${({ disabled }) =>
-    disabled &&
-    css`
-      pointer-events: none;
-      background-color: transparent;
-
-      & * {
-        color: ${styles.C_FONT_DISABLED};
-        fill: ${styles.C_FONT_DISABLED};
-        background-color: transparent;
-      }
-    `}
-  ${styleProps}
-`
-
-const Title = styled.h3`
-  ${styles.FONT_HEADER_DARK}
-  font-weight: ${styles.FONT_WEIGHT_REGULAR};
-  margin: 0;
-  padding: ${styles.SPACING_3} ${styles.SPACING_3} 0;
-  text-transform: capitalize;
-`