refactor(app): add a one-column component (#15439)

provided basically for completeness. it's a box with width=100%.

Closes EXEC-527

Author: sfoster1

app/src/molecules/InterventionModal/ModalContentOneColSimpleButtons.tsx

@@ -6,6 +6,7 @@ import {
   StyledText,
   TYPOGRAPHY,
 } from '@opentrons/components'
+import { OneColumn } from './OneColumn'
 import { RadioButton } from '../../atoms/buttons/RadioButton'
 
 export interface ButtonProps {
@@ -32,29 +33,31 @@ export function ModalContentOneColSimpleButtons(
   const furtherButtons = props.furtherButtons ?? []
   const buttons = [props.firstButton, props.secondButton, ...furtherButtons]
   return (
-    <Flex flexDirection={DIRECTION_COLUMN} gap={SPACING.spacing16}>
-      <StyledText
-        fontSize={TYPOGRAPHY.fontSize28}
-        fontWeight={TYPOGRAPHY.fontWeightSemiBold}
-        lineHeight={TYPOGRAPHY.lineHeight36}
-      >
-        {props.headline}
-      </StyledText>
-      <Flex flexDirection={DIRECTION_COLUMN} gap={SPACING.spacing4}>
-        {buttons.map((buttonProps, idx) => (
-          <RadioButton
-            key={`button${idx}-${buttonProps.value}`}
-            buttonLabel={buttonProps.label}
-            buttonValue={buttonProps.value}
-            isSelected={selected === buttonProps.value}
-            onChange={event => {
-              setSelected(event.target.value)
-              buttonProps?.onChange && buttonProps.onChange(event)
-              props?.onSelect && props.onSelect(event)
-            }}
-          />
-        ))}
+    <OneColumn>
+      <Flex flexDirection={DIRECTION_COLUMN} gap={SPACING.spacing16}>
+        <StyledText
+          fontSize={TYPOGRAPHY.fontSize28}
+          fontWeight={TYPOGRAPHY.fontWeightSemiBold}
+          lineHeight={TYPOGRAPHY.lineHeight36}
+        >
+          {props.headline}
+        </StyledText>
+        <Flex flexDirection={DIRECTION_COLUMN} gap={SPACING.spacing4}>
+          {buttons.map((buttonProps, idx) => (
+            <RadioButton
+              key={`button${idx}-${buttonProps.value}`}
+              buttonLabel={buttonProps.label}
+              buttonValue={buttonProps.value}
+              isSelected={selected === buttonProps.value}
+              onChange={event => {
+                setSelected(event.target.value)
+                buttonProps?.onChange && buttonProps.onChange(event)
+                props?.onSelect && props.onSelect(event)
+              }}
+            />
+          ))}
+        </Flex>
       </Flex>
-    </Flex>
+    </OneColumn>
   )
 }

app/src/molecules/InterventionModal/OneColumn.stories.tsx

@@ -0,0 +1,59 @@
+import * as React from 'react'
+
+import {
+  StyledText,
+  Box,
+  Flex,
+  BORDERS,
+  RESPONSIVENESS,
+  SPACING,
+  ALIGN_CENTER,
+  JUSTIFY_CENTER,
+} from '@opentrons/components'
+
+import { OneColumn as OneColumnComponent } from './'
+
+import type { Meta, StoryObj } from '@storybook/react'
+
+function StandInContent(): JSX.Element {
+  return (
+    <Flex
+      border={'4px dashed #A864FFFF'}
+      borderRadius={BORDERS.borderRadius8}
+      margin={SPACING.spacing16}
+      height="104px"
+      backgroundColor="#A864FF19"
+      alignItems={ALIGN_CENTER}
+      justifyContent={JUSTIFY_CENTER}
+    >
+      <StyledText as="h1">
+        This is a standin for some other component
+      </StyledText>
+    </Flex>
+  )
+}
+
+const meta: Meta<React.ComponentProps<OneColumnComponent>> = {
+  title: 'App/Molecules/InterventionModal/OneColumn',
+  component: OneColumnComponent,
+  render: args => (
+    <Box
+      css={`
+        width: 500;
+        @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+          width: 500;
+        }
+      `}
+    >
+      <OneColumnComponent>
+        <StandInContent />
+      </OneColumnComponent>
+    </Box>
+  ),
+}
+
+export default meta
+
+export type Story = StoryObj<OneColumnComponent>
+
+export const ExampleOneColumn: Story = { args: {} }

app/src/molecules/InterventionModal/OneColumn.tsx

@@ -0,0 +1,11 @@
+import * as React from 'react'
+
+import { Box } from '@opentrons/components'
+
+export interface OneColumnProps {
+  children: React.ReactNode
+}
+
+export function OneColumn({ children }: OneColumnProps): JSX.Element {
+  return <Box width="100%">{children}</Box>
+}

app/src/molecules/InterventionModal/TwoColumn.stories.tsx

@@ -35,7 +35,7 @@ function StandInContent(): JSX.Element {
     <Box
       border={'4px dashed #A864FFFF'}
       borderRadius={BORDERS.borderRadius8}
-      width="207px"
+      margin={SPACING.spacing16}
       height="104px"
       backgroundColor="#A864FF19"
     />

app/src/molecules/InterventionModal/index.tsx

@@ -22,7 +22,8 @@ import { getIsOnDevice } from '../../redux/config'
 import type { IconName } from '@opentrons/components'
 import { ModalContentOneColSimpleButtons } from './ModalContentOneColSimpleButtons'
 import { TwoColumn } from './TwoColumn'
-export { ModalContentOneColSimpleButtons, TwoColumn }
+import { OneColumn } from './OneColumn'
+export { ModalContentOneColSimpleButtons, TwoColumn, OneColumn }
 
 export type ModalType = 'intervention-required' | 'error'