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

package/src/legacy-hardware-sim/ModuleItem.module.css

@@ -1,20 +1,20 @@
 @import '@opentrons/components/styles';
 
 .module {
-  color: var(--c-black);
-  background-color: var(--c-black);
-  opacity: 0.9;
-  border-radius: 6px;
+  display: flex;
   width: 100%;
   height: 100%;
-  display: flex;
+  border-radius: 6px;
+  background-color: var(--c-black);
+  color: var(--c-black);
+  opacity: 0.9;
 }
 
 .module_review_icon {
-  color: var(--c-white);
-  margin: 0 0.25rem 0 0;
-  height: 12px;
   width: 12px;
+  height: 12px;
+  margin: 0 0.25rem 0 0;
+  color: var(--c-white);
 }
 
 .module_review_icon_missing {
@@ -26,13 +26,13 @@
 }
 
 .module_review_text {
+  margin-bottom: 0.75rem;
+  color: var(--c-white);
   fill: currentColor;
   font-size: 0.55rem;
   font-weight: var(--fw-semibold);
-  color: var(--c-white);
   text-transform: capitalize;
   white-space: pre;
-  margin-bottom: 0.75rem;
 }
 
 .module_name_overlay {
@@ -43,21 +43,21 @@
 .module_connect_info_wrapper {
   display: flex;
   flex-direction: row;
-  font-size: 0.5rem;
   color: var(--c-white);
+  font-size: 0.5rem;
 }
 
 .module_port_text {
-  fill: currentColor;
   color: var(--c-white);
+  fill: currentColor;
   font-size: 0.65rem;
   font-weight: var(--fw-semibold);
   text-transform: uppercase;
 }
 
 .module_port_text_na {
-  fill: currentColor;
   color: var(--c-med-gray);
+  fill: currentColor;
   font-size: 0.65rem;
   font-weight: var(--fw-semibold);
   text-transform: uppercase;
@@ -66,24 +66,24 @@
 .module_wrapper {
   display: flex;
   width: 100%;
-  padding: 1.15rem;
-  justify-content: center;
   flex-direction: column;
   align-items: flex-end;
+  justify-content: center;
+  padding: 1.15rem;
 }
 
 .flipped_module_wrapper {
   display: flex;
   width: 100%;
-  padding: 1.15rem;
-  justify-content: center;
   flex-direction: column;
   align-items: flex-start;
+  justify-content: center;
+  padding: 1.15rem;
 }
 
 .module_name_text {
-  fill: currentColor;
   color: var(--c-white);
+  fill: currentColor;
   font-size: 0.5rem;
   font-weight: var(--fw-semibold);
   text-transform: uppercase;
@@ -95,4 +95,4 @@
 
 .right_icon {
   margin: 0 0 0 1rem;
-}
+}

package/src/legacy-hardware-sim/index.ts

@@ -1,2 +1 @@
 export * from './LabwareNameOverlay'
-export * from './ModuleItem' // legacy App module rendering

package/src/lists/SidePanelGroup.tsx

@@ -1,8 +1,8 @@
 // SidePanelGroup component
 import cx from 'classnames'
 
-import styles from './lists.module.css'
 import { Icon } from '../icons'
+import styles from './lists.module.css'
 
 import type { ReactNode } from 'react'
 import type { IconName } from '../icons'

package/src/lists/index.ts

@@ -1,3 +1,2 @@
 // list and list item components
 export * from './SidePanelGroup'
-export * from './TitledList'

package/src/lists/lists.module.css

@@ -13,10 +13,10 @@
   background-color: transparent;
 
   & * {
+    background-color: transparent;
     color: var(--c-font-disabled);
-    outline-color: #eee;
     fill: var(--c-font-disabled);
-    background-color: transparent;
+    outline-color: #eee;
   }
 }
 
@@ -35,10 +35,10 @@
 }
 
 .header_text {
-  text-transform: uppercase;
+  color: var(--c-font-disabled);
   font-size: var(--fs-caption);
   font-weight: var(--fw-semibold);
-  color: var(--c-font-disabled);
+  text-transform: uppercase;
 }
 
 /*
@@ -50,19 +50,19 @@
 .title_bar {
   position: relative;
   display: flex;
-  text-decoration: none;
-  padding: var(--list-padding-large) var(--list-padding-small);
   flex-direction: column;
+  padding: var(--list-padding-large) var(--list-padding-small);
+  text-decoration: none;
 }
 
 /* Specifically for TitledList */
 .titled_list_title_bar {
   position: relative;
   display: flex;
-  text-decoration: none;
-  padding: var(--list-padding-large) var(--list-padding-small);
   flex-direction: row;
   align-items: center;
+  padding: var(--list-padding-large) var(--list-padding-small);
+  text-decoration: none;
 }
 
 .titled_list_selected {
@@ -77,9 +77,9 @@
 }
 
 .title {
+  margin: 0;
   font-size: var(--fs-body-2);
   font-weight: var(--fw-regular);
-  margin: 0;
   text-transform: uppercase;
 }
 
@@ -92,8 +92,8 @@
 }
 
 .title_bar_icon {
-  color: var(--c-font-dark);
   height: 1.5rem;
+  color: var(--c-font-dark);
 }
 
 .title_bar_error {
@@ -101,8 +101,8 @@
 }
 
 .icon_left_of_title {
-  margin-right: 0.5rem;
   height: 1.2rem;
+  margin-right: 0.5rem;
 }
 
 .icon_left_of_title_container {
@@ -113,8 +113,8 @@
 .title_bar_carat {
   position: absolute;
   top: 0;
-  bottom: 0;
   right: 0;
+  bottom: 0;
   padding: calc(var(--list-padding-small) - var(--bd-width-default));
   padding-top: 1rem;
 
@@ -124,22 +124,22 @@
 }
 
 .list {
-  list-style-type: none;
   padding-left: 0;
   margin: 0;
+  list-style-type: none;
 }
 
 .list_item {
-  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 */
   display: flex;
+  width: 100%;
   flex-direction: row;
   align-items: center;
-  width: 100%;
-  line-height: 1.25;
-  margin: 0;
   padding: var(--list-padding-small);
+  margin: 0;
+  color: var(--c-font-dark); /* from legacy --font-body-1-dark */
+  font-size: var(--fs-body-1); /* from legacy --font-body-1-dark */
+  font-weight: var(--fw-regular); /* from legacy --font-body-1-dark */
+  line-height: 1.25;
 
   &:hover {
     background-color: var(--c-bg-hover);
@@ -155,17 +155,17 @@ a.list_item {
 }
 
 .list_alert {
-  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 */
   width: 100%;
   padding: var(--list-padding-small);
   background-color: var(--c-bg-light);
+  color: var(--c-font-dark); /* from legacy --font-body-1-dark */
+  font-size: var(--fs-body-1); /* from legacy --font-body-1-dark */
   font-style: italic;
+  font-weight: var(--fw-regular); /* from legacy --font-body-1-dark */
 }
 
 .item_icon {
-  flex: none;
   height: calc(1.25 * var(--fs-body-1));
+  flex: none;
   margin-right: 0.5rem;
 }

package/src/modals/LegacyModal.tsx

@@ -1,9 +1,9 @@
 import { Fragment } from 'react'
-import cx from 'classnames'
 import { RemoveScroll } from 'react-remove-scroll'
+import cx from 'classnames'
 
-import { Overlay } from './Overlay'
 import styles from './modals.module.css'
+import { Overlay } from './Overlay'
 
 import type { MouseEventHandler, ReactNode, Ref } from 'react'
 

package/src/modals/Modal.stories.tsx

@@ -1,7 +1,7 @@
 import { PrimaryButton, StyledText } from '../atoms'
-import { SPACING } from '../ui-style-constants'
 import { Flex, STYLE_PROPS } from '../primitives'
 import { JUSTIFY_END } from '../styles'
+import { SPACING } from '../ui-style-constants'
 import { Modal as ModalComponent } from './Modal'
 
 import type { Meta, StoryObj } from '@storybook/react'

package/src/modals/Modal.tsx

@@ -1,6 +1,6 @@
+import { COLORS } from '../helix-design-system'
 import { Box } from '../primitives'
 import { SPACING } from '../ui-style-constants'
-import { COLORS } from '../helix-design-system'
 import { ModalHeader } from './ModalHeader'
 import { ModalShell } from './ModalShell'
 

package/src/modals/ModalHeader.tsx

@@ -1,8 +1,9 @@
 import styled, { css } from 'styled-components'
 
+import { StyledText } from '../atoms'
+import { COLORS } from '../helix-design-system'
 import { Icon } from '../icons'
 import { Box, Btn, Flex } from '../primitives'
-import { StyledText } from '../atoms'
 import {
   ALIGN_CENTER,
   DISPLAY_FLEX,
@@ -10,7 +11,6 @@ import {
   JUSTIFY_SPACE_BETWEEN,
 } from '../styles'
 import { SPACING } from '../ui-style-constants'
-import { COLORS } from '../helix-design-system'
 
 import type { MouseEventHandler, ReactNode } from 'react'
 import type { IconProps } from '../icons'

package/src/modals/ModalShell.tsx

@@ -1,4 +1,7 @@
 import styled from 'styled-components'
+
+import { BORDERS, COLORS } from '../helix-design-system'
+import { styleProps } from '../primitives'
 import {
   ALIGN_CENTER,
   ALIGN_END,
@@ -11,9 +14,7 @@ import {
   POSITION_RELATIVE,
   POSITION_STICKY,
 } from '../styles'
-import { BORDERS, COLORS } from '../helix-design-system'
 import { RESPONSIVENESS, SPACING } from '../ui-style-constants'
-import { styleProps } from '../primitives'
 
 import type { MouseEvent, MouseEventHandler, ReactNode } from 'react'
 import type { StyleProps } from '../primitives'

package/src/modals/SpinnerModal.tsx

@@ -1,9 +1,9 @@
 // titled modal page component
 import cx from 'classnames'
-import { Overlay } from './Overlay'
-import { Icon } from '../icons'
 
+import { Icon } from '../icons'
 import styles from './modals.module.css'
+import { Overlay } from './Overlay'
 
 export interface SpinnerModalProps {
   /** Additional/Override style */

package/src/modals/SpinnerModalPage.tsx

@@ -1,7 +1,7 @@
 // titled modal page component
 import { TitleBar } from '../structure'
-import { SpinnerModal } from './SpinnerModal'
 import styles from './modals.module.css'
+import { SpinnerModal } from './SpinnerModal'
 
 import type { ComponentProps } from 'react'
 import type { TitleBarProps } from '../structure'

package/src/modals/__tests__/Modal.test.tsx

@@ -1,9 +1,11 @@
 //
 import '@testing-library/jest-dom/vitest'
+
 import { screen } from '@testing-library/react'
-import { describe, it, expect, beforeEach } from 'vitest'
-import { renderWithProviders } from '../../testing/utils'
+import { beforeEach, describe, expect, it } from 'vitest'
+
 import { COLORS } from '../../helix-design-system'
+import { renderWithProviders } from '../../testing/utils'
 import { Modal } from '../Modal'
 
 import type { ComponentProps } from 'react'

package/src/modals/__tests__/ModalHeader.test.tsx

@@ -1,10 +1,12 @@
-import { screen, fireEvent } from '@testing-library/react'
+import { fireEvent, screen } from '@testing-library/react'
+
 import '@testing-library/jest-dom/vitest'
-import { describe, it, expect, vi, beforeEach } from 'vitest'
 
-import { renderWithProviders } from '../../testing/utils'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
 import { COLORS } from '../../helix-design-system'
 import { ALIGN_CENTER, JUSTIFY_CENTER } from '../../styles'
+import { renderWithProviders } from '../../testing/utils'
 import { ModalHeader } from '../ModalHeader'
 
 import type { ComponentProps } from 'react'

package/src/modals/__tests__/ModalShell.test.tsx

@@ -1,6 +1,8 @@
 import '@testing-library/jest-dom/vitest'
+
 import { screen } from '@testing-library/react'
-import { describe, it, expect, beforeEach } from 'vitest'
+import { beforeEach, describe, expect, it } from 'vitest'
+
 import { renderWithProviders } from '../../testing/utils'
 import { ModalShell } from '../ModalShell'
 

package/src/modals/modals.module.css

@@ -2,6 +2,9 @@
 @import '../index.module.css';
 
 .modal {
+  position: fixed;
+  z-index: 1;
+
   /* from legacy --absolute-fill */
   top: 0;
 
@@ -17,17 +20,15 @@
   /* from legacy --absolute-fill */
   display: flex;
 
-  /* from legacy --center-children */
-  justify-content: center;
-
   /* from legacy --center-children */
   align-items: center;
 
   /* from legacy --center-children */
 
   align-items: flex-start;
-  position: fixed;
-  z-index: 1;
+
+  /* from legacy --center-children */
+  justify-content: center;
   padding: 4rem;
 }
 
@@ -51,14 +52,14 @@
   display: flex;
 
   /* from legacy --flex-start */
-  justify-content: flex-start;
+
+  flex-direction: column;
 
   /* from legacy --flex-start */
   align-items: center;
 
   /* from legacy --flex-start */
-
-  flex-direction: column;
+  justify-content: flex-start;
   padding: 4.5rem 3rem 1rem 3rem;
 }
 
@@ -84,11 +85,11 @@
 
 .title_bar {
   position: absolute;
+  z-index: 3;
   top: 0;
-  left: 0;
   right: 0;
+  left: 0;
   width: 100%;
-  z-index: 3;
 }
 
 .modal_contents {
@@ -100,15 +101,15 @@
   /* from legacy --modal-contents */
   max-width: 38rem;
 
-  /* from legacy --modal-contents */
-  margin: 0 auto;
-
   /* from legacy --modal-contents */
   padding: 1rem;
 
   /* from legacy --modal-contents */
   border-radius: 0.5rem;
 
+  /* from legacy --modal-contents */
+  margin: 0 auto;
+
   /* from legacy --modal-contents */
 
   background-color: white;
@@ -122,37 +123,36 @@
 
   /* from legacy --modal-contents */
   max-width: 38rem;
-
-  /* from legacy --modal-contents */
-  margin: 0 auto;
+  max-height: 100%;
 
   /* from legacy --modal-contents */
   padding: 1rem;
+  padding-top: 1rem;
 
   /* from legacy --modal-contents */
   border-radius: 0.5rem;
 
+  /* from legacy --modal-contents */
+  margin: 0 auto;
+
   /* from legacy --modal-contents */
 
   background-color: white;
-  max-height: 100%;
   overflow-y: auto;
-  padding-top: 1rem;
 }
 
 .modal_heading {
-  font-size: var(--fs-header);
-
   /* from legacy --font-header-dark */
-  font-weight: var(--fw-semibold);
+
+  margin-top: 0;
+  margin-bottom: 1rem;
 
   /* from legacy --font-header-dark */
   color: var(--c-font-dark);
+  font-size: var(--fs-header);
 
   /* from legacy --font-header-dark */
-
-  margin-top: 0;
-  margin-bottom: 1rem;
+  font-weight: var(--fw-semibold);
   text-transform: capitalize;
 }
 
@@ -172,36 +172,37 @@
 }
 
 .spinner_modal_contents {
+  z-index: 4;
+
   /* from legacy --modal-contents */
   width: 100%;
 
-  /* from legacy --modal-contents */
-  margin: 0 auto;
+  /* from legacy --font-body-2-light */
+
+  max-width: 30rem;
+  flex-direction: column;
 
   /* from legacy --modal-contents */
   padding: 1rem;
+  padding-top: 3rem;
 
   /* from legacy --modal-contents */
   border-radius: 0.5rem;
 
   /* from legacy --modal-contents */
-  font-size: var(--fs-body-2);
-
-  /* from legacy --font-body-2-light */
-  font-weight: var(--fw-regular);
+  margin: 0 auto;
+  background-color: transparent;
 
   /* from legacy --font-body-2-light */
   color: var(--c-font-light);
 
-  /* from legacy --font-body-2-light */
-
-  max-width: 30rem;
-  padding-top: 3rem;
-  background-color: transparent;
-  flex-direction: column;
+  /* from legacy --modal-contents */
+  font-size: var(--fs-body-2);
   font-style: italic;
+
+  /* from legacy --font-body-2-light */
+  font-weight: var(--fw-regular);
   text-align: center;
-  z-index: 4;
 }
 
 .spinner_modal_icon {
@@ -222,19 +223,18 @@
 }
 
 .alert_modal_contents {
-  font-size: var(--fs-body-2);
-
   /* from legacy --font-body-2-dark */
-  font-weight: var(--fw-regular);
+
+  width: 100%;
+  max-height: 100%;
+  padding: 1rem;
 
   /* from legacy --font-body-2-dark */
   color: var(--c-font-dark);
+  font-size: var(--fs-body-2);
 
   /* from legacy --font-body-2-dark */
-
-  width: 100%;
-  max-height: 100%;
-  padding: 1rem;
+  font-weight: var(--fw-regular);
 
   & > p {
     padding-bottom: 1rem;
@@ -242,22 +242,22 @@
 }
 
 .alert_modal_heading {
-  font-size: var(--fs-header);
-
-  /* from legacy --font-header-dark */
-  color: var(--c-font-dark);
-
-  /* from legacy --font-header-dark */
-
-  font-weight: normal;
   position: absolute;
   top: 0;
-  left: 0;
   right: 0;
+  left: 0;
   display: flex;
   align-items: center;
   padding: 1rem;
   background-color: #e0e0e0;
+
+  /* from legacy --font-header-dark */
+  color: var(--c-font-dark);
+  font-size: var(--fs-header);
+
+  /* from legacy --font-header-dark */
+
+  font-weight: normal;
 }
 
 .alert_modal_icon {
@@ -266,10 +266,10 @@
 }
 
 .alert_modal_buttons {
-  float: right;
   margin-top: 1rem;
+  float: right;
 }
 
 .alert_button {
   margin-left: 1rem;
-}
+}

package/src/molecules/Banner/Banner.stories.tsx

@@ -1,5 +1,5 @@
-import { STYLE_PROPS } from '../../primitives'
 import { StyledText } from '../../atoms/StyledText'
+import { STYLE_PROPS } from '../../primitives'
 import { Banner } from './index'
 
 import type { Meta, StoryObj } from '@storybook/react'

package/src/molecules/Banner/__tests__/Banner.test.tsx

@@ -1,8 +1,8 @@
-import { describe, it, vi, expect, beforeEach } from 'vitest'
 import { fireEvent, screen } from '@testing-library/react'
-import { renderWithProviders } from '../../../testing/utils'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
 
 import { Banner } from '..'
+import { renderWithProviders } from '../../../testing/utils'
 
 import type { ComponentProps } from 'react'
 

package/src/molecules/Banner/index.tsx

@@ -1,17 +1,18 @@
 import { css } from 'styled-components'
-import { Btn, Flex } from '../../primitives'
-import { Icon } from '../../icons'
+
 import { BORDERS, COLORS } from '../../helix-design-system'
-import { RESPONSIVENESS, SPACING, TYPOGRAPHY } from '../../ui-style-constants'
+import { Icon } from '../../icons'
+import { Btn, Flex } from '../../primitives'
 import {
   ALIGN_CENTER,
   DIRECTION_ROW,
   JUSTIFY_SPACE_BETWEEN,
 } from '../../styles'
+import { RESPONSIVENESS, SPACING, TYPOGRAPHY } from '../../ui-style-constants'
 
 import type { MouseEvent, MouseEventHandler, ReactNode } from 'react'
-import type { StyleProps } from '../../primitives'
 import type { IconProps } from '../../icons'
+import type { StyleProps } from '../../primitives'
 
 export type BannerType =
   | 'success'