600 West

Summary: Default 

<summary class="Summary " style="">
    <h1 class=" " style="">
        What does Sprout Do?
    </h1>

</summary>
 
<summary
    {{#if open}}open{{/if}}
    class="Summary {{modifier}}"
    style="{{style}}"
>
    {{#if children}}
        {{> @children }}
    {{else}}
        {{{text}}}
    {{/if}}
</summary>
 
{
  "style": null,
  "text": null,
  "children": [
    {
      "component": "heading",
      "context": {
        "level": 1,
        "text": "What does Sprout Do?"
      }
    }
  ]
}
  • Content: 
    import React from 'react';
import PropTypes from 'prop-types';
import cx from 'classnames';
import {render} from '../../../helpers/render';

const Summary = props => {
    if (props.children) {
        return (
            <summary
                id={props.id}
                className={cx(['Summary Summary--link', props.modifier])}
                style={props.style}
            >
                {render(props.children)}
            </summary>
        );
    } else if (props.text) {
        return (
            <summary id={props.id} className={cx(['Summary', props.modifier])} style={props.style}>
                {props.text}
            </summary>
        );
    }
};

Summary.propTypes = {
    id: PropTypes.string,
    modifier: PropTypes.string,
    text: PropTypes.string,
    style: PropTypes.string,
    children: PropTypes.element
};

export default Summary;
  • URL: /components/raw/summary/Summary.jsx
  • Filesystem Path: components/molecules/Summary/Summary.jsx
  • Size: 877 Bytes
  • Content: 
    .Summary {
    cursor: pointer;
}
.Summary::-webkit-details-marker {
    display: none;
}
//basically just turns it green
.Summary--link {
    padding: 0;
    margin: Space(400) 0;
    color: theme-color(link, dark);
    outline: none;
}
.Summary--link:focus > *,
.Summary--link:hover > * {
    text-decoration: underline;
}
.Summary--icon {
    position: relative;
    display: block;
    padding-right: Space(600);
}
.Summary--icon::after {
    position: absolute;
    top: 0;
    right: 0;
    padding: .125em;
    transform: rotate(90deg);
}
section[expanded] .Summary--icon::after,
.Details[open] .Summary--icon::after {
    transform: rotate(-90deg);
}
  • URL: /components/raw/summary/Summary.scss
  • Filesystem Path: components/molecules/Summary/Summary.scss
  • Size: 659 Bytes

Summary

The Summary is used as a child of the Details component. Summary is used as the control for the Details component. When the Details component is closed only things in the Summary element are visisble.

Best Practices

  • A Summary can have text, or children but not both. If a Summary has both, it will default to only displaying it’s children.
  • Always used inside a Details component, as a container. For example:
    <details class="Details">
     <summary class="Summary">
      <h3>What's up with peanuts on airplanes?</h3>
     </summary>
     <p>They are expensive and you know you don't deserve them</p>
    </details>

Accessibility

If you don’t like the default focus ring on the Summary, that’s totally cool. There is a Summary variant called the Summary--link, that you can use instead that pulls in most styling from the buttons. Just please, don’t remove the focus state all together.

Information on Focus from WCAG