-
Notifications
You must be signed in to change notification settings - Fork 45
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.
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
DS 835: Table Element #2548
Merged
Merged
DS 835: Table Element #2548
Changes from 38 commits
Commits
Show all changes
40 commits
Select commit
Hold shift + click to select a range
d33dca9
Added a Table Basic component and docs
bolt-bot 8de4081
Worked on the basic twig and css for the table basic component
bolt-bot 5898705
Worked on the Table Basic ttest pages
bolt-bot ccdadc9
DS-835: Update schema
8e8aa70
DS-835: Create js that wraps table in a div
cf9c73b
DS-835: Update template
169fd5d
DS-835: Update css
f400384
DS-835: Update test pages and create a few more
6e12364
DS-835: Revert a cahnge that was targeted in no related to table file
3b60904
DS-835: Change name
7063b85
Added a CC-1017 test page
bolt-bot c48936d
Updated the CC-1017 test page with the live page structure
bolt-bot d37b789
Updated with the latests from master
bolt-bot 9a7a4fe
Updated the Table Basic Jest test
bolt-bot 554c99d
Started to write the Table Basic doc pages
bolt-bot 10d8106
Updated the Table Basic docs
bolt-bot 25e4663
Added new pages and updated the tests
bolt-bot 5587ef6
Removed unneeded dependencies from the table basic package.json, fixe…
bolt-bot 18ad477
Updated the snapshot with the latest
bolt-bot 6640974
Updated the table JS, removed unneeded classes, updated the snapshot
bolt-bot 4dcd1e6
Updated the Table Basic Component to be a Table Element
bolt-bot 2a6beb7
Updated the tests to fix a typo
bolt-bot 7b1843a
Merge branch 'master' into feature/DS-835-table-basic
danielamorse 7f7fe1f
Worked on updating the table element to the latest standards
bolt-bot 72230e9
Updated the docs pages
bolt-bot 32ffe3a
Updated the rest of the docs pages
bolt-bot 5a2912e
Updated with the latest from upstream
bolt-bot 35411aa
Updated the doc pages based ono feedback
bolt-bot 46713ee
Updated the CSS behavior, added a new test page and fixed a docs typos
bolt-bot 01eb28f
Added a clarification note on a table docs page
bolt-bot 1d76133
Updated this PR with the team feedback
bolt-bot 2c5ee54
Added back the table documentaiton and lookedd into a CSS bug
bolt-bot 4a75e14
DS-835: Remove commented-out code
danielamorse af89b07
DS-835: Refactor import JS to only load if table is present, consiste…
danielamorse ae39f14
DS-835: typo
danielamorse 52f5f82
Added a full width prop to the table element
bolt-bot 4c08f54
DS-835: lint, typo
danielamorse 663009a
DS-835: Update snapshot
danielamorse 00d3640
Added a full width test
bolt-bot 9163acb
Added a full width test
bolt-bot File filter
Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
There are no files selected for viewing
Large diffs are not rendered by default.
Oops, something went wrong.
6,498 changes: 6,498 additions & 0 deletions
6,498
docs-site/src/pages/pattern-lab/_patterns/20-elements/table/-table-examples.twig
Large diffs are not rendered by default.
Oops, something went wrong.
114 changes: 114 additions & 0 deletions
114
docs-site/src/pages/pattern-lab/_patterns/20-elements/table/00-table-docs.twig
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,114 @@ | ||
| {% set usage %}{% verbatim %} | ||
| {% set header %} | ||
| {% set cells %} | ||
| {% include '@bolt-elements-table/table-cell.twig' with { | ||
| content: 'This is a header cell in table header', | ||
| header: true, | ||
| } only %} | ||
| {% include '@bolt-elements-table/table-cell.twig' with { | ||
| content: 'This is a header cell in table header', | ||
| header: true, | ||
| } only %} | ||
| {% include '@bolt-elements-table/table-cell.twig' with { | ||
| content: 'This is a header cell in table header', | ||
| header: true, | ||
| } only %} | ||
| {% endset %} | ||
| {% include '@bolt-elements-table/table-row.twig' with { | ||
| content: cells, | ||
| } only %} | ||
| {% endset %} | ||
|
|
||
| {% set row1 %} | ||
| {% set cells %} | ||
| {% include '@bolt-elements-table/table-cell.twig' with { | ||
| content: 'This is a regular cell.', | ||
| } only %} | ||
| {% include '@bolt-elements-table/table-cell.twig' with { | ||
| content: 'This is a regular cell.', | ||
| } only %} | ||
| {% include '@bolt-elements-table/table-cell.twig' with { | ||
| content: 'This is a regular cell.', | ||
| } only %} | ||
| {% endset %} | ||
| {% include '@bolt-elements-table/table-row.twig' with { | ||
| content: cells, | ||
| } only %} | ||
| {% endset %} | ||
|
|
||
| {% set row2 %} | ||
| {% set cells %} | ||
| {% include '@bolt-elements-table/table-cell.twig' with { | ||
| content: 'This is a regular cell.', | ||
| } only %} | ||
| {% include '@bolt-elements-table/table-cell.twig' with { | ||
| content: 'This is a regular cell.', | ||
| } only %} | ||
| {% include '@bolt-elements-table/table-cell.twig' with { | ||
| content: 'This is a regular cell.', | ||
| } only %} | ||
| {% endset %} | ||
| {% include '@bolt-elements-table/table-row.twig' with { | ||
| content: cells, | ||
| } only %} | ||
| {% endset %} | ||
|
|
||
| {% set row3 %} | ||
| {% set cells %} | ||
| {% include '@bolt-elements-table/table-cell.twig' with { | ||
| content: 'This is a regular cell.', | ||
| } only %} | ||
| {% include '@bolt-elements-table/table-cell.twig' with { | ||
| content: 'This is a regular cell.', | ||
| } only %} | ||
| {% include '@bolt-elements-table/table-cell.twig' with { | ||
| content: 'This is a regular cell.', | ||
| } only %} | ||
| {% endset %} | ||
| {% include '@bolt-elements-table/table-row.twig' with { | ||
| content: cells, | ||
| } only %} | ||
| {% endset %} | ||
|
|
||
| {% set footer %} | ||
| {% set cells %} | ||
| {% include '@bolt-elements-table/table-cell.twig' with { | ||
| content: 'This is a regular cell in table footer.', | ||
| } only %} | ||
| {% include '@bolt-elements-table/table-cell.twig' with { | ||
| content: 'This is a regular cell in table footer.', | ||
| } only %} | ||
| {% include '@bolt-elements-table/table-cell.twig' with { | ||
| content: 'This is a regular cell in table footer.', | ||
| } only %} | ||
| {% endset %} | ||
| {% include '@bolt-elements-table/table-row.twig' with { | ||
| content: cells, | ||
| } only %} | ||
| {% endset %} | ||
|
|
||
| {% include '@bolt-elements-table/table.twig' with { | ||
| header: { | ||
| content: header, | ||
| }, | ||
| body: { | ||
| content: [ | ||
| row1, | ||
| row2, | ||
| row3, | ||
| ], | ||
| }, | ||
| footer: { | ||
| content: footer, | ||
| }, | ||
| caption: { | ||
| content: 'This is the table caption.', | ||
| }, | ||
| } only %} | ||
| {% endverbatim %}{% endset %} | ||
|
|
||
| {% include '@utils/docs.twig' with { | ||
| componentName: 'table', | ||
| componentGroup: 'elements', | ||
| usage: usage | ||
| } only %} | ||
173 changes: 173 additions & 0 deletions
173
docs-site/src/pages/pattern-lab/_patterns/20-elements/table/05-table.twig
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,173 @@ | ||
| {% set description %} | ||
| This is the most basic usage of the Table Element. | ||
| {% endset %} | ||
|
|
||
| {% set notes %} | ||
| {% spaceless %} | ||
| <bolt-ol> | ||
| <bolt-li>Take a look at <a href="{{ link['elements-table-examples'] }}" class="e-bolt-text-link">real examples of tables</a> currently on our sites</bolt-li> | ||
| <bolt-li>The Table Element is designed to work with both Twig and vanilla HTML (Twig is the recommended method).</bolt-li> | ||
| </bolt-ol> | ||
| {% endspaceless %} | ||
| {% endset %} | ||
|
|
||
| {% set demo %} | ||
| {% set row1 %} | ||
| {% set cells %} | ||
| {% include '@bolt-elements-table/table-cell.twig' with { | ||
| content: 'This is a regular cell.', | ||
| } only %} | ||
| {% include '@bolt-elements-table/table-cell.twig' with { | ||
| content: 'This is a regular cell.', | ||
| } only %} | ||
| {% include '@bolt-elements-table/table-cell.twig' with { | ||
| content: 'This is a regular cell.', | ||
| } only %} | ||
| {% endset %} | ||
| {% include '@bolt-elements-table/table-row.twig' with { | ||
| content: cells, | ||
| } only %} | ||
| {% endset %} | ||
|
|
||
| {% set row2 %} | ||
| {% set cells %} | ||
| {% include '@bolt-elements-table/table-cell.twig' with { | ||
| content: 'This is a regular cell.', | ||
| } only %} | ||
| {% include '@bolt-elements-table/table-cell.twig' with { | ||
| content: 'This is a regular cell.', | ||
| } only %} | ||
| {% include '@bolt-elements-table/table-cell.twig' with { | ||
| content: 'This is a regular cell.', | ||
| } only %} | ||
| {% endset %} | ||
| {% include '@bolt-elements-table/table-row.twig' with { | ||
| content: cells, | ||
| } only %} | ||
| {% endset %} | ||
|
|
||
| {% set row3 %} | ||
| {% set cells %} | ||
| {% include '@bolt-elements-table/table-cell.twig' with { | ||
| content: 'This is a regular cell.', | ||
| } only %} | ||
| {% include '@bolt-elements-table/table-cell.twig' with { | ||
| content: 'This is a regular cell.', | ||
| } only %} | ||
| {% include '@bolt-elements-table/table-cell.twig' with { | ||
| content: 'This is a regular cell.', | ||
| } only %} | ||
| {% endset %} | ||
| {% include '@bolt-elements-table/table-row.twig' with { | ||
| content: cells, | ||
| } only %} | ||
| {% endset %} | ||
|
|
||
| {% include '@bolt-elements-table/table.twig' with { | ||
| body: { | ||
| content: [ | ||
| row1, | ||
| row2, | ||
| row3, | ||
| ], | ||
| }, | ||
| } only %} | ||
| {% endset %} | ||
|
|
||
| {% set twig_markup %} | ||
| {% verbatim %} | ||
| {% set row1 %} | ||
| {% set cells %} | ||
| {% include '@bolt-elements-table/table-cell.twig' with { | ||
| content: 'This is a regular cell.', | ||
| } only %} | ||
| {% include '@bolt-elements-table/table-cell.twig' with { | ||
| content: 'This is a regular cell.', | ||
| } only %} | ||
| {% include '@bolt-elements-table/table-cell.twig' with { | ||
| content: 'This is a regular cell.', | ||
| } only %} | ||
| {% endset %} | ||
| {% include '@bolt-elements-table/table-row.twig' with { | ||
| content: cells, | ||
| } only %} | ||
| {% endset %} | ||
|
|
||
| {% set row2 %} | ||
| {% set cells %} | ||
| {% include '@bolt-elements-table/table-cell.twig' with { | ||
| content: 'This is a regular cell.', | ||
| } only %} | ||
| {% include '@bolt-elements-table/table-cell.twig' with { | ||
| content: 'This is a regular cell.', | ||
| } only %} | ||
| {% include '@bolt-elements-table/table-cell.twig' with { | ||
| content: 'This is a regular cell.', | ||
| } only %} | ||
| {% endset %} | ||
| {% include '@bolt-elements-table/table-row.twig' with { | ||
| content: cells, | ||
| } only %} | ||
| {% endset %} | ||
|
|
||
| {% set row3 %} | ||
| {% set cells %} | ||
| {% include '@bolt-elements-table/table-cell.twig' with { | ||
| content: 'This is a regular cell.', | ||
| } only %} | ||
| {% include '@bolt-elements-table/table-cell.twig' with { | ||
| content: 'This is a regular cell.', | ||
| } only %} | ||
| {% include '@bolt-elements-table/table-cell.twig' with { | ||
| content: 'This is a regular cell.', | ||
| } only %} | ||
| {% endset %} | ||
| {% include '@bolt-elements-table/table-row.twig' with { | ||
| content: cells, | ||
| } only %} | ||
| {% endset %} | ||
|
|
||
| {% include '@bolt-elements-table/table.twig' with { | ||
| body: { | ||
| content: [ | ||
| row1, | ||
| row2, | ||
| row3, | ||
| ], | ||
| } | ||
| } only %} | ||
| {% endverbatim %} | ||
| {% endset %} | ||
|
|
||
| {% set html_markup %} | ||
| {% verbatim %} | ||
| <table class="e-bolt-table"> | ||
| <tbody> | ||
| <tr> | ||
| <td>This is a regular cell.</td> | ||
| <td>This is a regular cell.</td> | ||
| <td>This is a regular cell.</td> | ||
| </tr> | ||
| <tr> | ||
| <td>This is a regular cell.</td> | ||
| <td>This is a regular cell.</td> | ||
| <td>This is a regular cell.</td> | ||
| </tr> | ||
| <tr> | ||
| <td>This is a regular cell.</td> | ||
| <td>This is a regular cell.</td> | ||
| <td>This is a regular cell.</td> | ||
| </tr> | ||
| </tbody> | ||
| </table> | ||
| {% endverbatim %} | ||
| {% endset %} | ||
|
|
||
| {% include '@utils/pattern-doc-page.twig' with { | ||
| title: 'Table Element with Rows Only', | ||
| description: description, | ||
| notes: notes, | ||
| demo: demo, | ||
| twig_markup: twig_markup, | ||
| html_markup: html_markup, | ||
| } only %} |
Oops, something went wrong.
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.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
this demo could probably be shortened, maybe like layout's. The other demos on the page show the full context.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@cjwhitedev I don't mind this initial demo page being longer than Layouts because layout examples are larger scoped than a table.