<details id="" open class="Details Details--list" style="">
<summary class="Summary f600 fw-semibold Summary--link Summary--icon icon _arrow _after" style="">
Can I get a Sprout Social Demo?
</summary>
<h3 class=" " style="">
You can!
</h3>
<p id="" class="">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur imperdiet augue non sodales aliquet. Morbi sed orci sed urna dignissim placerat. Maecenas eu massa ac ligula laoreet tempor at nec est. Curabitur aliquet, magna ut congue pharetra, nibh
ligula tristique tortor, sed iaculis quam nunc eu quam. Nam aliquam sagittis dui, eget pharetra dui. Nulla ac tincidunt sapien. In id sollicitudin nulla. Quisque convallis malesuada rutrum.
</p>
</details>
<details
id="{{id}}"
{{#if open}}open{{/if}}
class="Details {{modifier}}"
style="{{style}}"
>
{{> @children }}
</details>
{
"id": null,
"open": true,
"style": null,
"children": [
{
"component": "summary",
"context": {
"modifier": "f600 fw-semibold Summary--link Summary--icon icon _arrow _after",
"text": "Can I get a Sprout Social Demo?"
}
},
{
"component": "heading",
"context": {
"level": 3,
"text": "You can!"
}
},
{
"component": "p",
"context": {
"text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur imperdiet augue non sodales aliquet. Morbi sed orci sed urna dignissim placerat. Maecenas eu massa ac ligula laoreet tempor at nec est. Curabitur aliquet, magna ut congue pharetra, nibh ligula tristique tortor, sed iaculis quam nunc eu quam. Nam aliquam sagittis dui, eget pharetra dui. Nulla ac tincidunt sapien. In id sollicitudin nulla. Quisque convallis malesuada rutrum."
}
}
],
"modifier": "Details--list"
}
import React from 'react';
import PropTypes from 'prop-types';
import cx from 'classnames';
import {render} from '../../../helpers/render';
const Details = props => {
return (
<details id={props.id} className={cx(['Details', props.modifier])} style={props.style}>
{render(props.children)}
</details>
);
};
Details.propTypes = {
id: PropTypes.string,
modifier: PropTypes.string,
open: false,
style: PropTypes.string,
children: PropTypes.element
};
export default Details;
.Details > .Summary::before,
.Details[open] > .Summary::before {
content: none; // The details polyfill inserts an arrow by default, this removes it.
}
.Details--list[open] {
padding-bottom: Space(600);
}
.Details--list + .Details--list {
border-top: Space(100) solid theme-color(background, light);
}
.Details--list[open] + .Details--list {
padding-top: Space(400);
}
// Utilties for hiding/showing content based on the "open" attribute
.Details[open] .dn--open {
display: none;
}
.Details:not([open]) .dn--closed {
display: none;
}
.Details[open] .hidden--open {
visibility: hidden;
}
.Details:not([open]) .hidden--closed {
visibility: hidden;
}
This component is mostly an un-opinionated <details> element.
You can put anything inside of it, like a card or a question and answer.
Summary as a child, otherwise you will not be able to open and close the Details.If you don’t like the default focus ring on the Summary, that’s totally cool. There is a link variant called the Summary--link, that you can use instead. Just please, don’t remove the focus state all together.
Information on Focus from WCAG
Everything but IE & Edge caniuse.
It looks like it’s currently under Development for Edge
When the Details Component isn’t supported it just falls back to being open.