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

Table | Docs | Component testing and documentation #1216

Merged
merged 11 commits into from
Jul 15, 2019
Merged

Table | Docs | Component testing and documentation #1216

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
1b73e50
chore: set up initial test files
mikemai2awesome Jun 13, 2019
7193a3b
fix: lint js
mikemai2awesome Jun 13, 2019
19ac773
docs: testing instructions
mikemai2awesome Jun 17, 2019
8aa43b3
fix: test and typo
mikemai2awesome Jun 18, 2019
2212614
fix: escape linting
mikemai2awesome Jun 18, 2019
5dd5eff
fix: remove copy from doc page
mikemai2awesome Jun 19, 2019
fb8cbb6
Merge branch 'master' into feature/bds-957-table-testing-and-docs
mikemai2awesome Jun 19, 2019
02c6459
fix: web component usage doc
mikemai2awesome Jun 19, 2019
26b5fcc
fix: snaps
mikemai2awesome Jun 19, 2019
94cdb7d
test: update table test to strict gherkin format
Jul 2, 2019
0918d28
test: add "side header" language back in
Jul 2, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
2 changes: 1 addition & 1 deletion docs-site/src/pages/pattern-lab/_patterns/02-components/table/15-table-borderless.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
cells: [
"Description",
"Team",
"Vehical Form",
"Vehicle Form",
]
},
side: {
Expand Down
128 changes: 90 additions & 38 deletions ...ts/table/40-table-with-web-component.twig → ...s/table/999-table-with-web-component.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,24 @@
{% macro code_example(code, copy) %}
<bolt-code-snippet syntax="dark" lang="html" {{ copy ? 'copy-to-clipboard' : '' }}>{% spaceless %}
{% macro code_example(code) %}
<div class="t-bolt-light u-bolt-margin-bottom-small u-bolt-padding-medium">
{% grid "o-bolt-grid--center" %}
{% cell "u-bolt-width-12/12 u-bolt-width-6/12@small" %}
{{ code }}
{% endcell %}
{% endgrid %}
</div>
<div class="u-bolt-margin-bottom-large">
<bolt-code-snippet syntax="dark" lang="html">{% spaceless %}
{{ code | replace({
'<': '&lt;',
'>': '&gt;',
}) | trim | raw }}
{% endspaceless %}</bolt-code-snippet>
</div>
{% endmacro %}

{% import _self as table_example %}

{% set simple_demo %}
{% set table_demo %}
<bolt-table>
<table>
<thead>
Expand Down Expand Up @@ -52,7 +61,60 @@
</bolt-table>
{% endset %}

{% set advanced_demo %}
{% set table_prop_demo %}
<bolt-table format="numeric" borderless>
<table>
<thead>
<tr>
<td></td>
<td>Pts</td>
<td>Reb</td>
<td>Ast</td>
<td>Stl</td>
<td>Blk</td>
</tr>
</thead>
<tbody>
<tr>
<th>Michael Jordan</th>
<td>70</td>
<td>10</td>
<td>2</td>
<td>5</td>
<td>1</td>
</tr>
<tr>
<th>Toni Kukoc</th>
<td>21</td>
<td>15</td>
<td>10</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<th>Steve Kerr</th>
<td>5</td>
<td>2</td>
<td>20</td>
<td>5</td>
<td>0</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Total</th>
<td>91</td>
<td>27</td>
<td>32</td>
<td>13</td>
<td>5</td>
</tr>
</tfoot>
</table>
</bolt-table>
{% endset %}

{% set table_advanced_demo %}
<bolt-table>
<table>
<thead>
Expand Down Expand Up @@ -102,7 +164,7 @@
</bolt-table>
{% endset %}

{% set components_demo %}
{% set table_data_demo %}
<bolt-table first-col-fixed-width>
<table>
<thead>
Expand Down Expand Up @@ -147,7 +209,6 @@
<td>SR-44869</td>
<td>
<img src="http://fillmurray.com/200/200">
UTF-8
</td>
<td>OpenSpan.Updater.Git.dll</td>
</tr>
Expand Down Expand Up @@ -175,36 +236,27 @@
</bolt-table>
{% endset %}

{% grid with {
attributes: {
class: [
"o-bolt-grid--matrix"
]
}
} %}
{% cell "u-bolt-width-12/12" %}
<bolt-text headline>Web Component Usage</bolt-text>
<bolt-text>
Bolt Table is a web component that renders a semantic table with Bolt styles. To make a simple table, wrap a semantic <bolt-code-snippet display="inline" lang="html">&lt;table&gt;</bolt-code-snippet> element with a <bolt-code-snippet display="inline" lang="html">&lt;bolt-table&gt;</bolt-code-snippet> element.
</bolt-text>
{{ simple_demo }}
{% include table_example.code_example(simple_demo, true) %}
{% endcell %}

{% cell "u-bolt-width-12/12" %}
<bolt-text headline>Advanced Usage</bolt-text>
<bolt-text>
Attributes and utility classes are supported on table headers and cells.
</bolt-text>
{{ advanced_demo }}
{% include table_example.code_example(advanced_demo, true) %}
{% endcell %}
{% cell "u-bolt-width-12/12" %}
<bolt-text headline>Accepted Data</bolt-text>
<bolt-text>
Each table header or cell can accept any Bolt web components, HTML markup, or just plain text.
</bolt-text>
{{ components_demo }}
{% include table_example.code_example(components_demo, true) %}
{% endcell %}
{% endgrid %}
<bolt-text headline>Web Component Usage</bolt-text>
<bolt-text>
Bolt Table is a web component that renders a semantic table with Bolt styles. To make a simple table, wrap a semantic <bolt-code-snippet display="inline" lang="html">&lt;table&gt;</bolt-code-snippet> element with a <bolt-code-snippet display="inline" lang="html">&lt;bolt-table&gt;</bolt-code-snippet> element.
</bolt-text>
{% include table_example.code_example(table_demo) %}

<bolt-text headline>Prop Usage</bolt-text>
<bolt-text>
Configure the table with the properties specified in the schema.
</bolt-text>
{% include table_example.code_example(table_prop_demo) %}

<bolt-text headline>Advanced Usage</bolt-text>
<bolt-text>
Attributes and utility classes are supported on table headers and cells.
</bolt-text>
{% include table_example.code_example(table_advanced_demo) %}

<bolt-text headline>Accepted Data</bolt-text>
<bolt-text>
Each table header or cell can accept any Bolt web components, HTML markup, or just plain text.
</bolt-text>
{% include table_example.code_example(table_data_demo) %}
Binary file modified .../blockquote-js-button-default-bolt-blockquote-w-o-shadow-dom-renders-1-snap.png
View file
Open in desktop
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...blockquote-js-button-default-bolt-blockquote-with-shadow-dom-renders-1-snap.png
View file
Open in desktop
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion packages/components/bolt-blockquote/src/blockquote.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@
{% if logo %}
<replace-with-children class="{{ "#{base_class}__logo" }}">
{% include "@bolt/logo.twig" with logo|merge({
"lazyload": false,
"lazyload": false,
slot: "logo",
}) only %}
</replace-with-children>
Expand Down
Binary file modified ...js-carousel-basic-3-slide-bolt-carousel-renders-w-outer-nav-controls-2-snap.png
View file
Open in desktop
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
47 changes: 47 additions & 0 deletions packages/components/bolt-table/TESTING.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
# Table component testing steps

## Table component render as expected (functionally and visually)

The server-side pre-rendered `bolt-table` component should look almost identical to the client-side rendered version. To verify:

1. Disable javascript and view the [table Demo page](https://boltdesignsystem.com/pattern-lab/patterns/02-components-table-05-table/02-components-table-05-table.html).
2. Then, enable javascript and watch as the table re-renders on the client-side.
3. The layout should not shift, e.g. the spacing in between each table item should be identical before and after the web component re-renders.

# Table component functional testing steps

Functional testing should be performed manually by the QA team across the standard compliment of browsers. In each scenario, browser-type is specified when necessary. If browser type is not specified, the test applies to both "desktop" and "mobile" browsers.

## Feature: Table

In order to present items in a table with rows and cells
As a UX designer, developer or content administrator
I need to ensure the "bolt-table" component renders and functions as expected

## Scenario: format variations

1. Given I am on the [format variations page](https://boltdesignsystem.com/pattern-lab/patterns/02-components-table-10-table-format-variations/02-components-table-10-table-format-variations.html)
2. When I view the table titled "Regular format"
3. Then I see all text is aligned to the left
4. When I view the table titled "Numeric format"
5. Then I see the side headers are aligned to the right, while text in other cells are center aligned

## Scenario: borderless table

1. Given I am on the [borderless demo page](https://boltdesignsystem.com/pattern-lab/patterns/02-components-table-15-table-borderless/02-components-table-15-table-borderless.html)
2. When I view the table titled "Remove the vertical border in between cells"
3. Then I see no vertical dividers in between cells (excluding side headers)

## Scenario: first column fixed width table

1. Given I am on the [first column fixed width demo page](https://boltdesignsystem.com/pattern-lab/patterns/02-components-table-20-table-first-column-fixed-width/02-components-table-20-table-first-column-fixed-width.html)
2. When I view the table titled "Set column widths to be flexible", where the first column _is not_ set to fixed width
3. Then I see the column widths are evenly distributed
4. When I view the table titled "Set the width of the first column to be as wide as the longest text", where the first column _is_ set to fixed width
5. Then I see the first column is as wide as the longest text in that particular column

## Scenario: table with web components

[table with Web Components](https://boltdesignsystem.com/pattern-lab/patterns/02-components-table-999-table-with-web-component/02-components-table-999-table-with-web-component.html)

`// This is a purely visual test, use VRT`