LinkList

Notes

Maps through each link and renders them in a list. When inlineAboveBreakpoint is null, the list only renders as a column, at all breakpoints. When inlineAboveBreakpoint is set to one of the breakpoints (ie 'lg'), then at that breakpoint and above, the list is moved inline, with default pipes | as separators.

Props

classNamestring['']
Applied to the <ul /> parent element
linkClassNamestring
Applied to each link in the list
links
arrayOf [
shape {
textany*
The text of the link

hrefstring
The href of the link

tagNameany
Tag for the link, defaults to a standard anchor

tostring
When using React Router, the links will often receive a 'to' prop

}
]
Array of links to list
inlineAboveBreakpointoneOf(null, 'sm', 'md', 'lg', 'xl', 'xxl')[null]
If null, links will render in block only, at all breakpoints. When set to a breakpoint, the list renders inline above that breakpoint
inlineSeparatorany['|']
Replaces default | as separator for inline links. inlineAboveBreakpoint must have a truthy value
paddingBetweenInlineLinksnumber[0]
Gives the links some additional tap space between each link when inline. It applies padding-x for all links except first, which only applies padding-right. Number corresponds to Spacing Guidelines

<LinkList
  inlineAboveBreakpoint="lg"
  paddingBetweenInlineLinks={2}
  linkClassName="color-greenAccent"
  links={[
    {
      text: "Change the window",
      href: "#",
      tagName: "a"
    },
    {
      text: "Width to see",
      href: "#",
      tagName: "a"
    },
    {
      text: "The link list rendered",
      href: "#",
      tagName: "a"
    },
    {
      text: "Inline or block",
      href: "#",
      tagName: "a"
    }
    ]}
/>

LinkListColumn

Notes

LinkListColumn is a simple block-level column of a Heading followed by a LinkList.

Props

classNamestring['']
Applied to the div surrounding the column
links
arrayOf [
shape {
textany*
The text of the link

hrefstring
The href of the link

tagNameany
Tag for the link, defaults to a standard anchor

tostring
When using React Router, the links will often receive a 'to' prop

}
]
An array of links to be rendered in the column; fed to LinkList
headingProps
shape {
tagNameany*
sizestring
}
Props to pass through to Heading, including tagName, size, className, etc.
headingTextany*
The text sent as the heading
linkClassNamestring['']
Class applied to all links
linkTagName['a']

<LinkListColumn
  headingProps={{
    size:"xs",
    tagName: "h4"
  }}
  className="inline-block bg-white p4"
  linkClassName="text-noUnderline color-textBlackSoft text-sm"
  headingText="Star Trek Beverages"
  links={[
    { text: "Klingon blood wine", href: "#", tagName: "a" },
    { text: "Romulan ale", href: "#", tagName: "a" },
    { text: "Samarian Sunset", href: "#", tagName: "a" }
  ]}
/>

LinkListExpander

Notes

A CaretExpander with LinkList as the expanded content.

Props

classNamestring['']
Applied to CaretExpander
headingWrapperClassNamestring
Applied to the heading and button of CaretExpander.
headingTextany*
The text sent as the heading of the CaretExpander
ariaExpandButtonLabelstring*
Label for button that indicates expander functionality; sent to CaretExpander
links
arrayOf [
shape {
textany*
The text of the link

hrefstring
The href of the link

tagNameany
Tag for the link, defaults to a standard anchor

tostring
When using React Router, the links will often receive a 'to' prop

}
]
Array of links to be the content of the expander; fed to LinkList
headingProps
shape {
tagNameany*
sizestring
}
Props to pass through to Heading, including tagName, size, className, etc.
linkClassNamestring['']
Class applied to all links
linkTagName['a']

<LinkListExpander
  headingProps={{
    size:"xs",
    tagName: "h4",
  }}
  linkTagName="a"
  linkClassName="text-noUnderline color-textBlackSoft text-sm"
  headingText="Star Trek Dishes"
  ariaExpandButtonLabel="Expand Star Trek Dishes"
  links={[
    { text: "Rokeg Blood Pie", href: "#", tagName: "a" },
    { text: "Heart of Targ", href: "#", tagName: "a" },
    { text: "Plomeek Soup", href: "#", tagName: "a" },
    { text: "Luhvian Quail", href: "#", tagName: "a" }
  ]}
/>