Skip to content

Commit

Permalink
feat: Collapsible Component (#504)
Browse files Browse the repository at this point in the history 
Refactor of the Collapsible Component. It is now a composable component and set of subcomponents.

BREAKING CHANGE: The prop api has changed significantly to simplify usages and enable flexibility. See the docs for details.

BREAKING CHANGE: Related styles are included in paragon scss and no longer exist as a sibling to the component.
  • Loading branch information
@julianajlk
julianajlk authored and Adam Butterworth committed Aug 20, 2019
1 parent bac265d commit 4aedf38
Show file tree
Hide file tree
Showing 21 changed files with 1,010 additions and 681 deletions.
206 changes: 25 additions & 181 deletions .storybook/__snapshots__/Storyshots.test.js.snap
View file
Expand Up @@ -382,214 +382,58 @@ Array [
]
`;

exports[`Storyshots Collapsible basic usage with resizing 1`] = `
<div>
<div
className="collapsible expanded"
>
<h2>
Try resizing the screen to medium or small
</h2>
<div
className="collapsible-body open"
>
<div>
<h3>
You can fit lots of things in here
</h3>
<ul>
<li>
1 thing
</li>
<li>
2 things
</li>
<li>
3 things
</li>
</ul>
</div>
</div>
</div>
</div>
`;

exports[`Storyshots Collapsible basic usage without resizing 1`] = `
exports[`Storyshots Collapsible usage 1`] = `
<div
className="collapsible"
className="pgn_collapsible collapsible-card"
>
<button
aria-expanded={false}
className="btn btn-block text-left btn-collapsible"
onBlur={[Function]}
onClick={[Function]}
onKeyDown={[Function]}
type="button"
>
<div
className="collapsible-title d-flex align-items-center justify-content-between"
>
Click me to expand
<svg
aria-hidden="true"
className="svg-inline--fa fa-angle-down fa-w-10 "
data-icon="angle-down"
data-prefix="fas"
focusable="false"
role="img"
style={Object {}}
viewBox="0 0 320 512"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M143 352.3L7 216.3c-9.4-9.4-9.4-24.6 0-33.9l22.6-22.6c9.4-9.4 24.6-9.4 33.9 0l96.4 96.4 96.4-96.4c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9l-136 136c-9.2 9.4-24.4 9.4-33.8 0z"
fill="currentColor"
style={Object {}}
/>
</svg>
</div>
</button>
<div
className="collapsible-body"
>
<p>
Your stuff goes here
</p>
</div>
</div>
`;

exports[`Storyshots Collapsible fires onToggle callback when toggled 1`] = `
<div
className="collapsible"
>
<button
aria-expanded={false}
className="btn btn-block text-left btn-collapsible"
onBlur={[Function]}
className="collapsible-trigger"
onClick={[Function]}
onKeyDown={[Function]}
type="button"
role="button"
tabIndex={0}
>
<div
className="collapsible-title d-flex align-items-center justify-content-between"
<span />
<span
className="ml-2"
>
Click me to expand
<svg
aria-hidden="true"
className="svg-inline--fa fa-angle-down fa-w-10 "
data-icon="angle-down"
className="svg-inline--fa fa-plus fa-w-14 "
data-icon="plus"
data-prefix="fas"
focusable="false"
role="img"
style={Object {}}
viewBox="0 0 320 512"
viewBox="0 0 448 512"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M143 352.3L7 216.3c-9.4-9.4-9.4-24.6 0-33.9l22.6-22.6c9.4-9.4 24.6-9.4 33.9 0l96.4 96.4 96.4-96.4c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9l-136 136c-9.2 9.4-24.4 9.4-33.8 0z"
d="M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"
fill="currentColor"
style={Object {}}
/>
</svg>
</div>
</button>
<div
className="collapsible-body"
>
<p>
Your stuff goes here
</p>
</span>
</div>
</div>
`;

exports[`Storyshots Collapsible initially open collapsible 1`] = `
<div
className="collapsible open"
>
<button
aria-expanded={true}
className="btn btn-block text-left btn-collapsible open"
onBlur={[Function]}
onClick={[Function]}
onKeyDown={[Function]}
type="button"
>
<div
className="collapsible-title d-flex align-items-center justify-content-between"
>
Click me to expand
<svg
aria-hidden="true"
className="svg-inline--fa fa-angle-up fa-w-10 "
data-icon="angle-up"
data-prefix="fas"
focusable="false"
role="img"
style={Object {}}
viewBox="0 0 320 512"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M177 159.7l136 136c9.4 9.4 9.4 24.6 0 33.9l-22.6 22.6c-9.4 9.4-24.6 9.4-33.9 0L160 255.9l-96.4 96.4c-9.4 9.4-24.6 9.4-33.9 0L7 329.7c-9.4-9.4-9.4-24.6 0-33.9l136-136c9.4-9.5 24.6-9.5 34-.1z"
fill="currentColor"
style={Object {}}
/>
</svg>
</div>
</button>
<div
className="collapsible-body open"
>
<p>
Your stuff goes here
</p>
</div>
</div>
`;

exports[`Storyshots Collapsible with custom icon 1`] = `
<div
className="collapsible"
>
<button
aria-expanded={false}
className="btn btn-block text-left btn-collapsible"
onBlur={[Function]}
onClick={[Function]}
onKeyDown={[Function]}
type="button"
className="pgn-transition-replace-group position-relative"
style={
Object {
"height": null,
}
}
>
<div
className="collapsible-title d-flex align-items-center justify-content-between"
style={
Object {
"padding": ".1px 0",
}
}
>
Click me to expand
<svg
aria-hidden="true"
className="svg-inline--fa fa-chevron-circle-down fa-w-16 text-primary"
data-icon="chevron-circle-down"
data-prefix="fas"
focusable="false"
role="img"
style={Object {}}
viewBox="0 0 512 512"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M504 256c0 137-111 248-248 248S8 393 8 256 119 8 256 8s248 111 248 248zM273 369.9l135.5-135.5c9.4-9.4 9.4-24.6 0-33.9l-17-17c-9.4-9.4-24.6-9.4-33.9 0L256 285.1 154.4 183.5c-9.4-9.4-24.6-9.4-33.9 0l-17 17c-9.4 9.4-9.4 24.6 0 33.9L239 369.9c9.4 9.4 24.6 9.4 34 0z"
fill="currentColor"
style={Object {}}
/>
</svg>
<div />
</div>
</button>
<div
className="collapsible-body"
>
<p>
Your stuff goes here
</p>
</div>
</div>
`;
Expand Down

0 comments on commit 4aedf38

Please sign in to comment.