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

package/src/atoms/Chip/index.tsx

@@ -1,11 +1,13 @@
 import { css } from 'styled-components'
+
 import { BORDERS, COLORS } from '../../helix-design-system'
+import { Icon } from '../../icons'
 import { Flex } from '../../primitives'
-import { LegacyStyledText } from '../StyledText'
 import { ALIGN_CENTER, DIRECTION_ROW, FLEX_MAX_CONTENT } from '../../styles'
 import { RESPONSIVENESS, SPACING, TYPOGRAPHY } from '../../ui-style-constants'
-import { Icon } from '../../icons'
+import { LegacyStyledText } from '../StyledText'
 
+import type { FlattenSimpleInterpolation } from 'styled-components'
 import type { IconName } from '../../icons'
 import type { StyleProps } from '../../primitives'
 
@@ -26,6 +28,8 @@ interface ChipProps extends StyleProps {
   hasIcon?: boolean
   /** Chip size medium is the default size */
   chipSize?: ChipSize
+  /** icon should pulse */
+  pulseIcon?: boolean
 }
 
 const CHIP_PROPS_BY_TYPE: Record<
@@ -79,6 +83,7 @@ export function Chip(props: ChipProps): JSX.Element {
     text,
     hasIcon = true,
     chipSize = 'medium',
+    pulseIcon = false,
     ...styleProps
   } = props
   const backgroundColor =
@@ -86,48 +91,9 @@ export function Chip(props: ChipProps): JSX.Element {
       ? COLORS.transparent
       : CHIP_PROPS_BY_TYPE[type].backgroundColor
   const icon = iconName ?? CHIP_PROPS_BY_TYPE[type].iconName ?? 'ot-alert'
+  const iconColor = CHIP_PROPS_BY_TYPE[type].iconColor
 
-  const MEDIUM_CONTAINER_STYLE = css`
-    padding: ${SPACING.spacing2} ${background === false ? 0 : SPACING.spacing8};
-    grid-gap: ${SPACING.spacing4};
-
-    @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
-      padding: ${SPACING.spacing8}
-        ${background === false ? 0 : SPACING.spacing16};
-      grid-gap: ${SPACING.spacing8};
-    }
-  `
-
-  const SMALL_CONTAINER_STYLE = css`
-    padding: ${SPACING.spacing4} ${background === false ? 0 : SPACING.spacing6};
-    grid-gap: ${SPACING.spacing4};
-
-    @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
-      padding: ${SPACING.spacing4}
-        ${background === false ? 0 : SPACING.spacing8};
-      grid-gap: ${SPACING.spacing4};
-    }
-  `
-
-  const ICON_STYLE = css`
-    width: ${chipSize === 'medium' ? '1rem' : '0.75rem'};
-    height: ${chipSize === 'medium' ? '1rem' : '0.75rem'};
-
-    @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
-      width: ${chipSize === 'medium' ? '1.5rem' : '1.25rem'};
-      height: ${chipSize === 'medium' ? '1.5rem' : '1.25rem'};
-    }
-  `
-
-  const TEXT_STYLE = css`
-    ${chipSize === 'medium' ? WEB_MEDIUM_TEXT_STYLE : WEB_SMALL_TEXT_STYLE}
-
-    @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
-      ${chipSize === 'medium'
-        ? TYPOGRAPHY.bodyTextSemiBold
-        : TYPOGRAPHY.smallBodyTextSemiBold}
-    }
-  `
+  const smallSize = iconName === 'connection-status' ? '0.5rem' : '0.75rem'
 
   return (
     <Flex
@@ -137,7 +103,9 @@ export function Chip(props: ChipProps): JSX.Element {
       flexDirection={DIRECTION_ROW}
       height={FLEX_MAX_CONTENT}
       css={
-        chipSize === 'medium' ? MEDIUM_CONTAINER_STYLE : SMALL_CONTAINER_STYLE
+        chipSize === 'medium'
+          ? MEDIUM_CONTAINER_STYLE(background)
+          : SMALL_CONTAINER_STYLE(background)
       }
       data-testid={`Chip_${type}`}
       {...styleProps}
@@ -145,13 +113,24 @@ export function Chip(props: ChipProps): JSX.Element {
       {hasIcon ? (
         <Icon
           name={icon}
-          color={CHIP_PROPS_BY_TYPE[type].iconColor}
+          color={iconColor}
           aria-label={`icon_${text}`}
-          css={ICON_STYLE}
-        />
+          css={ICON_STYLE(chipSize, smallSize)}
+        >
+          {pulseIcon ? (
+            <animate
+              attributeName="fill"
+              values={`${iconColor}; transparent`}
+              dur="1s"
+              calcMode="discrete"
+              repeatCount="indefinite"
+              data-testid={`Chip_${type}_icon_animate`}
+            />
+          ) : null}
+        </Icon>
       ) : null}
       <LegacyStyledText
-        css={TEXT_STYLE}
+        css={TEXT_STYLE(chipSize)}
         color={CHIP_PROPS_BY_TYPE[type].textColor}
       >
         {text}
@@ -166,7 +145,54 @@ const WEB_MEDIUM_TEXT_STYLE = css`
   font-weight: ${TYPOGRAPHY.fontWeightSemiBold};
 `
 const WEB_SMALL_TEXT_STYLE = css`
-  font-size: ${TYPOGRAPHY.fontSizeLabel};
-  line-height: ${TYPOGRAPHY.lineHeight12};
+  font-size: ${TYPOGRAPHY.fontSizeP};
+  line-height: ${TYPOGRAPHY.lineHeight16};
   font-weight: ${TYPOGRAPHY.fontWeightSemiBold};
 `
+
+const ICON_STYLE = (
+  chipSize: ChipSize,
+  smallSize: string
+): FlattenSimpleInterpolation => css`
+  width: ${chipSize === 'medium' ? '1rem' : smallSize};
+  height: ${chipSize === 'medium' ? '1rem' : smallSize};
+
+  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+    width: ${chipSize === 'medium' ? '1.5rem' : '1.25rem'};
+    height: ${chipSize === 'medium' ? '1.5rem' : '1.25rem'};
+  }
+`
+
+const TEXT_STYLE = (chipSize: ChipSize): FlattenSimpleInterpolation => css`
+  ${chipSize === 'medium' ? WEB_MEDIUM_TEXT_STYLE : WEB_SMALL_TEXT_STYLE}
+
+  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+    ${chipSize === 'medium'
+      ? TYPOGRAPHY.bodyTextSemiBold
+      : TYPOGRAPHY.smallBodyTextSemiBold}
+  }
+`
+
+const MEDIUM_CONTAINER_STYLE = (
+  background?: boolean
+): FlattenSimpleInterpolation => css`
+  padding: ${SPACING.spacing2} ${background === false ? 0 : SPACING.spacing8};
+  grid-gap: ${SPACING.spacing4};
+
+  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+    padding: ${SPACING.spacing8} ${background === false ? 0 : SPACING.spacing16};
+    grid-gap: ${SPACING.spacing8};
+  }
+`
+
+const SMALL_CONTAINER_STYLE = (
+  background?: boolean
+): FlattenSimpleInterpolation => css`
+  padding: ${SPACING.spacing4} ${background === false ? 0 : SPACING.spacing6};
+  grid-gap: ${SPACING.spacing4};
+
+  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+    padding: ${SPACING.spacing4} ${background === false ? 0 : SPACING.spacing8};
+    grid-gap: ${SPACING.spacing4};
+  }
+`

package/src/atoms/InlineNotification/InlineNotification.stories.tsx

@@ -0,0 +1,107 @@
+import { VIEWPORT } from '../../ui-style-constants'
+import { InlineNotification } from './index'
+
+import type { Meta, Story } from '@storybook/react'
+import type * as React from 'react'
+
+export default {
+  title: 'Helix/Atoms/InlineNotification',
+  argTypes: {
+    hug: {
+      control: {
+        type: 'boolean',
+      },
+      defaultValue: false,
+    },
+    type: {
+      options: ['alert', 'error', 'neutral', 'success'],
+      control: {
+        type: 'select',
+      },
+      defaultValue: 'success',
+    },
+    onCloseClick: {
+      control: {
+        type: 'boolean',
+      },
+      defaultValue: true,
+    },
+    hasMessage: {
+      control: {
+        type: 'boolean',
+      },
+      defaultValue: true,
+    },
+    message: {
+      control: {
+        type: 'text',
+      },
+      if: { arg: 'hasMessage' },
+    },
+    hasLink: {
+      control: {
+        type: 'boolean',
+      },
+      defaultValue: false,
+    },
+    linkText: {
+      control: {
+        type: 'text',
+      },
+      if: { arg: 'hasLink' },
+    },
+  },
+  parameters: VIEWPORT.touchScreenViewport,
+} as Meta
+
+export interface WrapperProps extends React.ComponentProps<InlineNotification> {
+  hasMessage: boolean
+  hasLink: boolean
+}
+
+function Wrapper(props: WrapperProps): JSX.Element {
+  return (
+    <InlineNotification
+      {...props}
+      onCloseClick={
+        props.onCloseClick
+          ? () => {
+              console.log('Close clicked')
+            }
+          : undefined
+      }
+      message={props.hasMessage ? props.message : undefined}
+      linkText={props.hasLink ? props.linkText : undefined}
+      onLinkClick={
+        props.hasLink
+          ? () => {
+              console.log('Link clicked')
+            }
+          : undefined
+      }
+    />
+  )
+}
+
+const Template: Story<React.ComponentProps<typeof Wrapper>> = args => (
+  <Wrapper {...args} />
+)
+
+export const InlineNotificationComponent = Template.bind({})
+InlineNotificationComponent.args = {
+  heading: 'awesome',
+  message: 'you did it',
+  type: 'success',
+  hasMessage: true,
+  hasLink: false,
+}
+
+export const InlineNotificationWithLink = Template.bind({})
+InlineNotificationWithLink.args = {
+  heading: 'Something has happened',
+  message: 'Here is an alert about it',
+  type: 'neutral',
+  hasMessage: true,
+  hasLink: true,
+  linkText: 'Link',
+}

package/src/atoms/InlineNotification/__tests__/InlineNotification.test.tsx

@@ -0,0 +1,66 @@
+import { fireEvent, screen } from '@testing-library/react'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import { InlineNotification } from '..'
+import { renderWithProviders } from '../../../testing/utils'
+
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof InlineNotification>) => {
+  return renderWithProviders(<InlineNotification {...props} />)[0]
+}
+
+describe('InlineNotification', () => {
+  let props: ComponentProps<typeof InlineNotification>
+
+  beforeEach(() => {
+    props = {
+      type: 'success',
+      heading: 'TITLE',
+    }
+  })
+  it('renders success inline notification', () => {
+    render(props)
+    screen.getByLabelText('icon_success')
+    screen.getByText('TITLE')
+  })
+  it('renders success inline notification with exit button and when click dismisses inline notification', () => {
+    props = {
+      type: 'success',
+      heading: 'TITLE',
+      onCloseClick: vi.fn(),
+    }
+    render(props)
+    screen.getByText('TITLE')
+    const btn = screen.getByLabelText('close_icon')
+    fireEvent.click(btn)
+    expect(props.onCloseClick).toHaveBeenCalled()
+  })
+  it('renders alert inline notification', () => {
+    props = {
+      type: 'alert',
+      heading: 'TITLE',
+    }
+    render(props)
+    screen.getByLabelText('icon_alert')
+    screen.getByText('TITLE')
+  })
+  it('renders error inline notification', () => {
+    props = {
+      type: 'error',
+      heading: 'TITLE',
+    }
+    render(props)
+    screen.getByLabelText('icon_error')
+    screen.getByText('TITLE')
+  })
+  it('renders neutral inline notification', () => {
+    props = {
+      type: 'neutral',
+      heading: 'TITLE',
+    }
+    render(props)
+    screen.getByLabelText('icon_neutral')
+    screen.getByText('TITLE')
+  })
+})

package/src/atoms/InlineNotification/index.tsx

@@ -0,0 +1,213 @@
+import { css } from 'styled-components'
+
+import { BORDERS, COLORS } from '../../helix-design-system'
+import { Icon } from '../../icons'
+import { Box, Btn, Flex, Link } from '../../primitives'
+import {
+  ALIGN_CENTER,
+  DIRECTION_ROW,
+  JUSTIFY_FLEX_END,
+  JUSTIFY_FLEX_START,
+  JUSTIFY_SPACE_BETWEEN,
+} from '../../styles'
+import { RESPONSIVENESS, SPACING, TYPOGRAPHY } from '../../ui-style-constants'
+import { StyledText } from '../StyledText'
+
+import type { FlattenSimpleInterpolation } from 'styled-components'
+import type { MouseEventHandler } from 'react'
+import type { IconProps } from '../../icons'
+import type { StyleProps } from '../../primitives'
+
+type InlineNotificationType = 'alert' | 'error' | 'neutral' | 'success'
+
+export interface InlineNotificationProps extends StyleProps {
+  /** name constant of the icon to display */
+  type: InlineNotificationType
+  /** InlineNotification contents */
+  heading?: string
+  message?: string
+  /** Optional dynamic width based on contents */
+  hug?: boolean
+  /** optional handler to show close button/clear alert  */
+  onCloseClick?: (() => void) | MouseEventHandler<HTMLButtonElement>
+  linkText?: string
+  onLinkClick?: (() => void) | MouseEventHandler<HTMLButtonElement>
+}
+
+const INLINE_NOTIFICATION_PROPS_BY_TYPE: Record<
+  InlineNotificationType,
+  { icon: IconProps; backgroundColor: string; color: string }
+> = {
+  alert: {
+    icon: { name: 'ot-alert' },
+    backgroundColor: COLORS.yellow30,
+    color: COLORS.yellow60,
+  },
+  error: {
+    icon: { name: 'ot-alert' },
+    backgroundColor: COLORS.red30,
+    color: COLORS.red60,
+  },
+  neutral: {
+    icon: { name: 'information' },
+    backgroundColor: COLORS.blue30,
+    color: COLORS.blue60,
+  },
+  success: {
+    icon: { name: 'ot-check' },
+    backgroundColor: COLORS.green30,
+    color: COLORS.green60,
+  },
+}
+
+export function InlineNotification(
+  props: InlineNotificationProps
+): JSX.Element {
+  const {
+    heading,
+    hug = false,
+    onCloseClick,
+    message,
+    type,
+    linkText,
+    onLinkClick,
+  } = props
+  const fullHeading = `${heading}${message ? '. ' : ''}`
+  const fullmessage = `${message}.`
+  const inlineNotificationProps = INLINE_NOTIFICATION_PROPS_BY_TYPE[type]
+  const iconProps = {
+    ...inlineNotificationProps.icon,
+    color: INLINE_NOTIFICATION_PROPS_BY_TYPE[type].color,
+    size: '100%',
+  }
+  const backgroundColor =
+    INLINE_NOTIFICATION_PROPS_BY_TYPE[type].backgroundColor
+
+  return (
+    <Flex
+      data-testid={`InlineNotification_${type}`}
+      css={INLINE_NOTIFICATION_WRAPPER_STYLES(backgroundColor, hug)}
+    >
+      <Flex css={INLINE_NOTIFICATION_FLEX_STYLE}>
+        <Box css={INLINE_NOTIFICATION_BOX_STYLE}>
+          <Icon {...iconProps} aria-label={`icon_${type}`} />
+        </Box>
+        <Flex flex="1" alignItems={ALIGN_CENTER}>
+          <StyledText
+            oddStyle="bodyTextRegular"
+            desktopStyle="bodyDefaultRegular"
+          >
+            {heading != null && (
+              <>
+                <span
+                  css={`
+                    font-weight: ${TYPOGRAPHY.fontWeightSemiBold};
+                  `}
+                >
+                  {fullHeading}
+                </span>
+                {/* this break is because the desktop wants this on two lines, but also wants/
+                  inline text layout on ODD. Soooo here you go */}
+                <br
+                  css={`
+                    @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+                      display: none;
+                    }
+                  `}
+                />
+              </>
+            )}
+            {message != null && fullmessage}
+          </StyledText>
+        </Flex>
+      </Flex>
+      <Flex
+        alignItems={ALIGN_CENTER}
+        justifyContent={JUSTIFY_FLEX_END}
+        gap={SPACING.spacing16}
+      >
+        {linkText && (
+          <Link onClick={onLinkClick}>
+            <StyledText
+              oddStyle="bodyTextRegular"
+              desktopStyle="bodyDefaultRegular"
+              textDecoration="underline"
+            >
+              {linkText}{' '}
+            </StyledText>
+          </Link>
+        )}
+        {onCloseClick && (
+          <Btn
+            data-testid="InlineNotification_close-button"
+            onClick={onCloseClick}
+            css={INLINE_NOTIFICATION_CLOSE_BUTTON_STYLE}
+            height="fit-content"
+          >
+            <Icon
+              aria-label="close_icon"
+              name="close"
+              css={INLINE_NOTIFICATION_ICON_STYLE}
+            />
+          </Btn>
+        )}
+      </Flex>
+    </Flex>
+  )
+}
+
+const INLINE_NOTIFICATION_WRAPPER_STYLES = (
+  backgroundColor: string,
+  hug: boolean
+): FlattenSimpleInterpolation => css`
+  background-color: ${backgroundColor};
+  align-items: ${ALIGN_CENTER};
+  flex-direction: ${DIRECTION_ROW};
+  justify-content: ${JUSTIFY_SPACE_BETWEEN};
+  width: ${hug ? 'max-content' : '100%'};
+  gap: ${SPACING.spacing8};
+  border-radius: ${BORDERS.borderRadius4};
+  padding: ${SPACING.spacing8} ${SPACING.spacing12};
+  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+    gap: ${SPACING.spacing12};
+    border-radius: ${BORDERS.borderRadius8};
+    padding: ${SPACING.spacing12} ${SPACING.spacing16};
+  }
+`
+
+const INLINE_NOTIFICATION_FLEX_STYLE = css`
+  justify-content: ${JUSTIFY_FLEX_START};
+  align-items: ${ALIGN_CENTER};
+  flex-direction: ${DIRECTION_ROW};
+  gap: ${SPACING.spacing8};
+  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+    gap: ${SPACING.spacing12};
+  }
+`
+
+const INLINE_NOTIFICATION_BOX_STYLE = css`
+  width: 1rem;
+  height: 1rem;
+  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+    width: 1.75rem;
+    height: 1.75rem;
+  }
+`
+
+const INLINE_NOTIFICATION_CLOSE_BUTTON_STYLE = css`
+  width: 1.75rem;
+  height: 1.75rem;
+  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+    width: 3rem;
+    height: 3rem;
+  }
+`
+
+const INLINE_NOTIFICATION_ICON_STYLE = css`
+  width: 1.75rem;
+  height: 1.75rem;
+  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+    width: 3rem;
+    height: 3rem;
+  }
+`

package/src/atoms/InputField/InputField.stories.tsx

@@ -1,11 +1,14 @@
 import * as React from 'react'
+
 import {
   DIRECTION_COLUMN,
   Flex,
   SPACING,
   VIEWPORT,
 } from '@opentrons/components'
+
 import { InputField as InputFieldComponent } from './index'
+
 import type { Meta, StoryObj } from '@storybook/react'
 
 const meta: Meta<typeof InputFieldComponent> = {

package/src/atoms/InputField/__tests__/InputField.test.tsx

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

package/src/atoms/InputField/index.tsx

@@ -1,6 +1,8 @@
 import { forwardRef } from 'react'
 import styled, { css } from 'styled-components'
 
+import { BORDERS, COLORS } from '../../helix-design-system'
+import { Icon } from '../../icons'
 import { Flex } from '../../primitives'
 import {
   ALIGN_CENTER,
@@ -9,12 +11,10 @@ import {
   NO_WRAP,
   TEXT_ALIGN_RIGHT,
 } from '../../styles'
-import { BORDERS, COLORS } from '../../helix-design-system'
-import { Icon } from '../../icons'
-import { RESPONSIVENESS, SPACING, TYPOGRAPHY } from '../../ui-style-constants'
-import { Tooltip } from '../Tooltip'
 import { useHoverTooltip } from '../../tooltips'
+import { RESPONSIVENESS, SPACING, TYPOGRAPHY } from '../../ui-style-constants'
 import { StyledText } from '../StyledText'
+import { Tooltip } from '../Tooltip'
 
 import type {
   ChangeEventHandler,

package/src/atoms/ListButton/ListButton.stories.tsx

@@ -1,12 +1,13 @@
 import * as React from 'react'
+
+import { CustomizeExpandButton, StyledText } from '../..'
 import { STYLE_PROPS } from '../../primitives'
+import { ListButton as ListButtonComponent } from './index'
 import {
   ListButtonAccordion,
   ListButtonAccordionContainer,
-  ListButtonRadioButton,
 } from './ListButtonChildren/index'
-import { StyledText } from '../..'
-import { ListButton as ListButtonComponent } from './index'
+
 import type { Meta, StoryObj } from '@storybook/react'
 
 const meta: Meta<typeof ListButtonComponent> = {
@@ -56,8 +57,11 @@ const Template = (args: ListButtonComponentProps): JSX.Element => {
       >
         <ListButtonAccordionContainer id="mainAccordionContainer">
           <>
-            <ListButtonRadioButton
+            <CustomizeExpandButton
+              enableStackingFF={false}
               key="buttonNested"
+              allowInputField={false}
+              loadName="mockloadname0"
               isSelected={buttonValue === 'radio button nested'}
               buttonValue="radio button nested"
               buttonText="Radio button, click to expand nested accordion"
@@ -76,7 +80,10 @@ const Template = (args: ListButtonComponentProps): JSX.Element => {
                   isExpanded={buttonValue === 'radio button nested'}
                 >
                   <>
-                    <ListButtonRadioButton
+                    <CustomizeExpandButton
+                      enableStackingFF={false}
+                      allowInputField={false}
+                      loadName="mockloadname1"
                       isSelected={nestedButtonValue === 'radio button1'}
                       buttonValue="radio button1"
                       buttonText="nested button"
@@ -90,7 +97,10 @@ const Template = (args: ListButtonComponentProps): JSX.Element => {
                       </StyledText>
                     ) : null}
                   </>
-                  <ListButtonRadioButton
+                  <CustomizeExpandButton
+                    enableStackingFF={false}
+                    allowInputField={false}
+                    loadName="mockloadname2"
                     isSelected={nestedButtonValue === 'radio button2'}
                     buttonValue="radio button2"
                     buttonText="nested button 2"
@@ -98,7 +108,10 @@ const Template = (args: ListButtonComponentProps): JSX.Element => {
                       setNestedButtonValue('radio button2')
                     }}
                   />
-                  <ListButtonRadioButton
+                  <CustomizeExpandButton
+                    enableStackingFF={false}
+                    allowInputField={false}
+                    loadName="mockloadname3"
                     isSelected={nestedButtonValue === 'radio button3'}
                     buttonValue="radio button3"
                     buttonText="nested button 3"
@@ -111,8 +124,11 @@ const Template = (args: ListButtonComponentProps): JSX.Element => {
             ) : null}
           </>
           <>
-            <ListButtonRadioButton
+            <CustomizeExpandButton
+              enableStackingFF={false}
               key="buttonNonNested"
+              allowInputField={false}
+              loadName="mockloadname4"
               isSelected={buttonValue === 'radio button non nest'}
               buttonValue="radio button non nest"
               buttonText="Radio button without nested"

package/src/atoms/ListButton/ListButtonChildren/index.ts

@@ -1,3 +1,2 @@
 export * from './ListButtonAccordion'
 export * from './ListButtonAccordionContainer'
-export * from './ListButtonRadioButton'