Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: Collapsible Component #504

Merged
merged 16 commits into from
Aug 20, 2019
Merged

feat: Collapsible Component #504

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
92bf3d7
feat: major refactor of collapsible component
Jul 10, 2019
e4f38f5
fix: delete old scss
Jul 11, 2019
7a192af
fix: move collapsible scss into separate file
Jul 11, 2019
15fb27d
fix: update storybook and test
Jul 11, 2019
b42ab40
fix: remove unneeded scss
Jul 11, 2019
32cf231
fix: update collapsible front matter
Jul 12, 2019
1be9594
fix: create ChevronDown component
julianajlk Aug 7, 2019
93b0bd2
fix: update ChevronDown to not be a class Component (wip)
julianajlk Aug 7, 2019
21d4a6c
fix: added more Chevron Components, fixed rendering on gatsby site
julianajlk Aug 8, 2019
86b419a
wip: default Collapsible
julianajlk Aug 12, 2019
e7ccb7d
fix: forwardRef
julianajlk Aug 14, 2019
a94a535
fix: refactor Collapsible
julianajlk Aug 16, 2019
f5b7c41
fix: remove icons and update scss
Aug 20, 2019
c1e3b94
fix: update per review feedback
Aug 20, 2019
035e26a
fix: removing unneeded scss
Aug 20, 2019
143fcb1
test: update snapshots
Aug 20, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
206 changes: 25 additions & 181 deletions .storybook/__snapshots__/Storyshots.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
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
Loading