feat: New Component SummaryBox #1098
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
…g, render passed in text as children
…n each anchor tag, disable eslint anchor validity check in both files
… props to its own obj and pass into the test
…book example, add test checking for rendering children
SirenaBorracha
changed the title
SirenaBorracha
requested review from
ahobson,
brandonlenz,
gidjin,
haworku,
sarboc,
suzubara and
tinyels
as code owners
SirenaBorracha
changed the title
brandonlenz
removed
the
status: hold merge
brandonlenz
reviewed
Apr 21, 2021
…rks/react-uswds into ak-new-component-summary-box-988
suzubara
reviewed
Apr 23, 2021
| import { SummaryBox } from './SummaryBox' | ||
|
|
||
| export default { | ||
| title: 'Components/SummaryBox', |
There was a problem hiding this comment.
Nit: can we name this Components / Summary box so it matches the USWDS name?
yarn.lock
Outdated
| >>>>>>> main | ||
| ======= | ||
|
|
||
| >>>>>>> fc36dbd77f8c8665eb25297a28c56e1fd6b4a7ff |
There was a problem hiding this comment.
These merge conflicts need to be resolved
| } | ||
|
|
||
| const summaryBoxContent = ( | ||
| <div className="usa-summary-box__text"> |
There was a problem hiding this comment.
It looks like this <div className="usa-summary-box__text"> is repeated in the Story (since it's also rendered in the component itself) - can we remove?
…rks/react-uswds into ak-new-component-summary-box-988
brandonlenz
approved these changes
Apr 30, 2021
Merged
SirenaBorracha
added a commit
that referenced
this pull request
May 5, 2021
## [1.17.0](1.16.0...1.17.0) (2021-05-05) ### Features * Checkbox Tile Variant ([#1104](#1104)) ([9936c4a](9936c4a)) * Implement ProcessListHeading subcomponent ([#1162](#1162)) ([964e34c](964e34c)) * New Component ProcessList MVP ([#1107](#1107)) ([1bc0f93](1bc0f93)) * New Component SiteAlert ([#1099](#1099)) ([c1e88e0](c1e88e0)) * New Component SummaryBox ([#1098](#1098)) ([b2279b4](b2279b4)) * Radio Button Tile Variant ([#1101](#1101)) ([a2f40a0](a2f40a0)) * Update Grid components to render any type of element ([#1166](#1166)) ([07468c8](07468c8)), closes [#1194](#1194) * Update Search component to support i18n ([#1192](#1192)) ([5241d15](5241d15)) * Update Table to 2.10.0 implementation ([#1110](#1110)) ([117a6c7](117a6c7))
brandonlenz
pushed a commit
that referenced
this pull request
May 12, 2021
* Create skeleton for new component SummaryBox, render passed in heading, render passed in text as children * Add default Storybook example * Add test for ability to pass props * Remove empty comment * Make Storybook example variable name lower case * Commit yarn.lock changes * Remove unwanted spaces from Storybook example * Remove everything except '#' from the test and Storybook href props in each anchor tag, disable eslint anchor validity check in both files * Remove hardcoded role prop from SummaryBox root div, move test custom props to its own obj and pass into the test * Remove unnecessary data-testid, separate summary box content in storybook example, add test checking for rendering children * Export SummaryBox from index.ts * Remove straggler - extended href name * Move enclosing div from Storybook to SummaryBox component wrapping children, make the props passed to the root div more explicitly named divProps * Add check for passing custom classname * Update stories file as per Suz's PR feedback * Resolve conflicts in yarn.lock * Regenerate yarn.lock * Remove unnecessary spaces from default export in Storybook
brandonlenz
pushed a commit
that referenced
this pull request
May 12, 2021
## [1.17.0](1.16.0...1.17.0) (2021-05-05) ### Features * Checkbox Tile Variant ([#1104](#1104)) ([9936c4a](9936c4a)) * Implement ProcessListHeading subcomponent ([#1162](#1162)) ([964e34c](964e34c)) * New Component ProcessList MVP ([#1107](#1107)) ([1bc0f93](1bc0f93)) * New Component SiteAlert ([#1099](#1099)) ([c1e88e0](c1e88e0)) * New Component SummaryBox ([#1098](#1098)) ([b2279b4](b2279b4)) * Radio Button Tile Variant ([#1101](#1101)) ([a2f40a0](a2f40a0)) * Update Grid components to render any type of element ([#1166](#1166)) ([07468c8](07468c8)), closes [#1194](#1194) * Update Search component to support i18n ([#1192](#1192)) ([5241d15](5241d15)) * Update Table to 2.10.0 implementation ([#1110](#1110)) ([117a6c7](117a6c7))
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
This PR adds the USWDS SummaryBox component.
Related Issues or PRs
closes #988
I took a different approach than the story outlined, as suggested by Hana, that prioritizes flexibility for the user over providing more structure.
If in the future we wish to constrain the component further, we could extend this component using the proposed implementation from the issue. To do so, we would add the
<ul>into SummaryBox, and create two subcomponents that would provide the rest of the skeleton for the list items and links;SummaryBoxInfoItemwith a<li>root element, andSummaryBoxLinkwhich could be implemented using the existing<Link asCustom />component, following the pattern inBreadcrumbLinkandIdentifierLink.How To Test
Check out this branch and run
yarn testto execute tests andyarn storybookto see the new component in action.Alternatively, you can scroll to the bottom of this page and click "Show environments" on the right above the comment input box.
Screenshots