ExpandCollapseMini

Library

Allium Design Systemweb-only

Repository

github.com/telus/allium-design-system

Package

npmjs.com/package/@telus-uds/ds-allium

Package version

1.14.0

Loading...

<ExpandCollapseMini expandTitle="Hide price breakdown" collapseTitle="See price breakdown"> <Typography>Some content.</Typography> </ExpandCollapseMini>

<ExpandCollapseMini expandTitle="Hide price breakdown" collapseTitle="See price breakdown">
  <Typography>Some content.</Typography>
</ExpandCollapseMini>

Introduction

import { ExpandCollapseMini } from '@telus-uds/ds-allium'

Similar to ExpandCollapse. Clicking on the hyperlink triggers target content to display in a panel directly below CTA.

Guidance

• Use ExpandCollapseMini to show/hide visually hidden content
  • Show hidden content directly below or adjacent to the ExpandCollapseMini
  • Show more information to provide clarity to information a user may interpret as unclear
• Use sentence case
• Text should be lead by a strong action word
• Text should be as short as possible

Ref forwarding

Note that ExpandCollapseMini provides ref forwarding, which allows you, for example, to move focus to it manually (try clicking the button and then press the spacebar to expand / collapse):

Loading...

function expandCollapseMiniFocusExample() { const expandCollapseMiniRef = useRef() const handlePress = () => { expandCollapseMiniRef.current.focus() } return ( <> <Button onPress={handlePress}>Focus</Button> <ExpandCollapseMini expandTitle="Hide price breakdown" collapseTitle="See price breakdown" ref={expandCollapseMiniRef} > <Typography>Some content.</Typography> </ExpandCollapseMini> </> ) }

function expandCollapseMiniFocusExample() {
  const expandCollapseMiniRef = useRef()
  const handlePress = () => {
    expandCollapseMiniRef.current.focus()
  }

  return (
    <>
      <Button onPress={handlePress}>Focus</Button>
      <ExpandCollapseMini
        expandTitle="Hide price breakdown"
        collapseTitle="See price breakdown"
        ref={expandCollapseMiniRef}
      >
        <Typography>Some content.</Typography>
      </ExpandCollapseMini>
    </>
  )
}

Accessibility

info

Limit the use of compact as it may the accessibility for users

Use the React Native accessibilityLabel attribute to provide an accessibility label to the toggle control.

Platform considerations

This component is currently only supported on web.

Figma

Props

Name	Type	Default	Description
children*	node
collapseTitle*	string
expandTitle*	string
onPress	func
onToggle	func	() => {}
pressableState	object
variant	object		System variant prop, see variants for more details

Variants

Icon position

Default is right, can be controlled with the iconPosition attribute.

Loading...

<ExpandCollapseMini iconPosition="left" expandTitle="Hide price breakdown" collapseTitle="See price breakdown" > <Typography>Some content.</Typography> </ExpandCollapseMini>

<ExpandCollapseMini
  iconPosition="left"
  expandTitle="Hide price breakdown"
  collapseTitle="See price breakdown"
>
  <Typography>Some content.</Typography>
</ExpandCollapseMini>

Size

Size can be any of micro, small, medium, large (the sizes supported by the TextButton/Link components). Pass a variant with the desired size.

Loading...

function ExpandCollapseMiniSizes() { return ['micro', 'small', 'medium', 'large'].map((size) => ( <ExpandCollapseMini collapseTitle="See price breakdown" expandTitle="Hide price breakdown" key={size} variant={{ size }} > <Typography>Some content.</Typography> </ExpandCollapseMini> )) }

function ExpandCollapseMiniSizes() {
  return ['micro', 'small', 'medium', 'large'].map((size) => (
    <ExpandCollapseMini
      collapseTitle="See price breakdown"
      expandTitle="Hide price breakdown"
      key={size}
      variant={{ size }}
    >
      <Typography>Some content.</Typography>
    </ExpandCollapseMini>
  ))
}

Alternative

Loading...

<ExpandCollapseMini variant={{ alternative: true }} expandTitle="Hide price breakdown" collapseTitle="See price breakdown" > <Typography>Some content.</Typography> </ExpandCollapseMini>

<ExpandCollapseMini
  variant={{ alternative: true }}
  expandTitle="Hide price breakdown"
  collapseTitle="See price breakdown"
>
  <Typography>Some content.</Typography>
</ExpandCollapseMini>

Inverse

Loading...

<ExpandCollapseMini variant={{ inverse: true }} expandTitle="Hide price breakdown" collapseTitle="See price breakdown" > <Typography variant={{ inverse: true }}>Some content.</Typography> </ExpandCollapseMini>

<ExpandCollapseMini
  variant={{ inverse: true }}
  expandTitle="Hide price breakdown"
  collapseTitle="See price breakdown"
>
  <Typography variant={{ inverse: true }}>Some content.</Typography>
</ExpandCollapseMini>

Feedback

• Spotted a problem with this component? Raise an issue on GitHub
• See any existing issues for this component
• Contact the team on slack in #ds-allium-support