Expander

Notes

Expander animates the height of its children to an expanded or collapsed state based on the value of the isExpanded prop.

There are two effects for showing/hiding content as the Expander animates, which are passed as props:

reveal (default) -> Content is revealed top-down (ie. top is seen first)
pushdown -> Content is pushed down into view (ie. bottom is seen first)

Note: The SimpleExpander (see below) builds on top of Expander; it provides out of the box logic for toggling the expanded state and handles accessibility concerns.

Props

childrennode
expandEffectoneOf('reveal', 'pushdown')['reveal']
How the content appears as the expander animates open
isExpandedbool[false]

Example: Expander with a controller button

const ExpanderExample = () => {
  const [expanded, setExpanded] = React.useState(false);
  const [expandEffect, setExpandEffect] = React.useState('reveal');
  const expanderId = 'thisIsForScreenreaders';
  const onChange = e => setExpandEffect(e.target.value);
  return (
    <React.Fragment>
      <div>
        <p>Choose expand effect:</p>
        <RadioGroup onChange={onChange} value={expandEffect} legend="Choose expande effect">
          <Radio value="reveal">Reveal</Radio>
          <Radio value="pushdown">Pushdown</Radio>
        </RadioGroup>
      </div>
      <div className="flex justify-between my3">
        <Button
          aria-expanded={expanded}
          aria-controls={expanderId}
          onClick={() => setExpanded(!expanded)}
        >
          {expanded ? 'Hide logo' : 'Show logo'}
        </Button>
        
      </div>

      <Rule />
      <Expander id={expanderId} isExpanded={expanded} expandEffect={expandEffect}>
        <Logo size='150px' />
      </Expander>

    </React.Fragment>
  );
};

render(<ExpanderExample />);

const ExpanderExample = () => {
  const [expanded, setExpanded] = React.useState(false);
  const [expandEffect, setExpandEffect] = React.useState('reveal');
  const expanderId = 'thisIsForScreenreaders';
  const onChange = e => setExpandEffect(e.target.value);
  return (
    <React.Fragment>
      <div>
        <p>Choose expand effect:</p>
        <RadioGroup onChange={onChange} value={expandEffect} legend="Choose expande effect">
          <Radio value="reveal">Reveal</Radio>
          <Radio value="pushdown">Pushdown</Radio>
        </RadioGroup>
      </div>
      <div className="flex justify-between my3">
        <Button
          aria-expanded={expanded}
          aria-controls={expanderId}
          onClick={() => setExpanded(!expanded)}
        >
          {expanded ? 'Hide logo' : 'Show logo'}
        </Button>
        
      </div>

      <Rule />
      <Expander id={expanderId} isExpanded={expanded} expandEffect={expandEffect}>
        <Logo size='150px' />
      </Expander>

    </React.Fragment>
  );
};

render(<ExpanderExample />);

SimpleExpander

Notes

A simplified interface for the Expander component. Renders a toggle element and Expander containing passed in children. SimpleExpander toggles the expanded state when the toggle is clicked, and handles ARIA attributes appropriately.

All props applied to the component are passed down to the underlying Expander, allowing for usage of that component's prop API.

SimpleExpander includes three methods to change the current expanded state of the component. If you need to programmatically change the expanded state, assign the SimpleExpander to a ref and call these methods from the parent component.

openExpander()
closeExpander()
toggleExpander()

Props

childrennode
initiallyExpandedbool[false]
The expanded state of the component when it is initially rendered.
renderTogglefunc*
A callback to render a toggle element. Receives the current isExpanded state of the component as a parameter.

<SimpleExpander renderToggle={ () => <Button>Toggle image</Button> }>
  <img
    className='pt3'
    height='auto'
    width='100%'
    src='https://content-prod-live.cert.starbucks.com/binary/v2/asset/137-42656.jpg'
    alt=''
  />
</SimpleExpander>

<SimpleExpander renderToggle={ () => <Button>Toggle image</Button> }>
  <img
    className='pt3'
    height='auto'
    width='100%'
    src='https://content-prod-live.cert.starbucks.com/binary/v2/asset/137-42656.jpg'
    alt=''
  />
</SimpleExpander>

CaretExpander

Notes

A styled expander that utilizes IconButton and a Heading to open and close expanded content. Expander defaults as closed.

Note: uses React Hooks--requires React 16.8.0 with other React dependencies updated.

Props

childrennode
Content to render once expanded. Should be valid JSX or HTML.
headingTextany
The text for the heading. Can be a string or component, is wrapped in a Heading component.
headingProps
shape {
tagNameany
sizestring
}
Props to pass through to Heading, including tagName, size, className, etc. See Heading for more info.
headingWrapperClassNamestring
Applied to div surrounding Heading and Caret button.
classNamestring
Styling applied to the entire expander
ariaExpandButtonLabelstring
Label for button that indicates expander functionality.
expandedByDefaultbool[false]
A boolean that determines if the expander should be expanded by default.

<CaretExpander
  className="bg-white"
  headingProps={{
      size:'sm',
      tagName: 'h3',
      className: 'color-greenAccent'
    }}
  headingText="Quotes by Captain Jean-luc Picard"
  ariaExpandButtonLabel="Expand quotes"
  headingWrapperClassName="p3"
  expandedByDefault
>
  <ul className="px3">
    <li className="py2 color-houseGreen">
      "It is possible to commit no mistakes and still lose. That is not weakness, that is life."
    </li>
    <li className="py2 color-houseGreen">
      "When children learn to devalue others, they can devalue anyone, even their parents."
    </li>
    <li className="py2 color-houseGreen">
      "Live now. Make now always the most precious time. Now will never come again."
    </li>
    <li className="py2 color-houseGreen">
      "No being is so important that he can usurp the rights of another."
    </li>
  </ul>
</CaretExpander>

<CaretExpander
  className="bg-white"
  headingProps={{
      size:'sm',
      tagName: 'h3',
      className: 'color-greenAccent'
    }}
  headingText="Quotes by Captain Jean-luc Picard"
  ariaExpandButtonLabel="Expand quotes"
  headingWrapperClassName="p3"
  expandedByDefault
>
  <ul className="px3">
    <li className="py2 color-houseGreen">
      "It is possible to commit no mistakes and still lose. That is not weakness, that is life."
    </li>
    <li className="py2 color-houseGreen">
      "When children learn to devalue others, they can devalue anyone, even their parents."
    </li>
    <li className="py2 color-houseGreen">
      "Live now. Make now always the most precious time. Now will never come again."
    </li>
    <li className="py2 color-houseGreen">
      "No being is so important that he can usurp the rights of another."
    </li>
  </ul>
</CaretExpander>