diff --git a/ui/components/package.json b/ui/components/package.json index 7e43e19db..61b256515 100644 --- a/ui/components/package.json +++ b/ui/components/package.json @@ -19,7 +19,7 @@ "fix": "yarn lint --fix", "lint": "yarn eslint . --ext mdx,ts,tsx", "prepare": "yarn build", - "test:create": "cc-cli -g doc -c ./.config -w", + "test:create": "cc-cli -g doc -c ./.config -w -d 5", "test": "yarn jest" }, "homepage": "https://github.com/ccontrols/component-controls", diff --git a/ui/components/src/ActionBar/ActionBar.data.ts b/ui/components/src/ActionBar/ActionBar.data.ts new file mode 100644 index 000000000..c7e1130dc --- /dev/null +++ b/ui/components/src/ActionBar/ActionBar.data.ts @@ -0,0 +1,9 @@ +export default { + overview: { + '0': {}, + '1': {}, + '2': {}, + '3': {}, + '4': {}, + }, +}; diff --git a/ui/components/src/ActionBar/ActionBar.test.ts b/ui/components/src/ActionBar/ActionBar.test.ts index de9cfd9a3..d549c46a6 100644 --- a/ui/components/src/ActionBar/ActionBar.test.ts +++ b/ui/components/src/ActionBar/ActionBar.test.ts @@ -8,28 +8,36 @@ import { render, act } from '@testing-library/react'; import { renderErr } from '@component-controls/test-renderers'; import * as examples from './ActionBar.stories'; +import data from './ActionBar.data'; describe('ActionBar', () => { const configPath = path.resolve(__dirname, '../../.config'); const config = loadConfigurations(configPath); let renderedExamples: ReturnType = []; act(() => { - renderedExamples = renderDocument(examples, config); + renderedExamples = renderDocument(examples, config, data); }); if (!renderedExamples) { renderErr(); return; } - renderedExamples.forEach(({ name, rendered }) => { + renderedExamples.forEach(({ name, rendered, dataId, values }) => { describe(name, () => { - it('snapshot', () => { - const { asFragment } = render(rendered); - expect(asFragment()).toMatchSnapshot(); - }); - it('accessibility', async () => { - const axeResults = await reactRunDOM(rendered, run); - expect(axeResults).toHaveNoAxeViolations(); - }); + const runTests = () => { + it('snapshot', () => { + const { asFragment } = render(rendered); + expect(asFragment()).toMatchSnapshot(); + }); + it('accessibility', async () => { + const axeResults = await reactRunDOM(rendered, run); + expect(axeResults).toHaveNoAxeViolations(); + }); + }; + if (values) { + describe(dataId, runTests); + } else { + runTests(); + } }); }); }); diff --git a/ui/components/src/ActionBar/__snapshots__/ActionBar.test.ts.snap b/ui/components/src/ActionBar/__snapshots__/ActionBar.test.ts.snap index 4fbcb9d00..7318009fa 100644 --- a/ui/components/src/ActionBar/__snapshots__/ActionBar.test.ts.snap +++ b/ui/components/src/ActionBar/__snapshots__/ActionBar.test.ts.snap @@ -925,6 +925,1021 @@ exports[`ActionBar override snapshot 1`] = ` `; +exports[`ActionBar overview 0 snapshot 1`] = ` + + .emotion-0 { + box-sizing: border-box; + margin: 0; + min-width: 0; +} + +.emotion-1 { + box-sizing: border-box; + margin: 0; + min-width: 0; + position: relative; +} + +.emotion-2 { + box-sizing: border-box; + margin: 0; + min-width: 0; + position: absolute; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + width: 100%; + -webkit-flex-direction: row-reverse; + -ms-flex-direction: row-reverse; + flex-direction: row-reverse; + margin-left: auto; +} + +.emotion-3 { + box-sizing: border-box; + margin: 0; + min-width: 0; + margin-right: 4px; + margin-left: 8px; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + margin-top: 4px; + font-size: 14px; +} + +.emotion-3 a { + color: #ffffff; + background-color: #3B817D; + -webkit-text-fill-color: initial; + padding-left: 8px; + padding-right: 8px; + padding-top: 4px; + padding-bottom: 4px; + line-height: 1; + border-radius: 1px; + display: inline-block; + box-shadow: rgba(0, 0, 0, 0.1) 0 1px 3px 1px,rgba(0, 0, 0, 0.1) 0 0 0 1px; + border: 1px solid #3B817D; +} + +.emotion-3 button { + color: #ffffff; + background-color: #3B817D; + -webkit-text-fill-color: initial; + padding-left: 8px; + padding-right: 8px; + padding-top: 4px; + padding-bottom: 4px; + line-height: 1; + border-radius: 1px; + display: inline-block; + box-shadow: rgba(0, 0, 0, 0.1) 0 1px 3px 1px,rgba(0, 0, 0, 0.1) 0 0 0 1px; + border: 1px solid #3B817D; +} + +.emotion-4 { + box-sizing: border-box; + margin: 0; + min-width: 0; + -webkit-appearance: none; + -moz-appearance: none; + -ms-appearance: none; + appearance: none; + display: inline-block; + text-align: center; + line-height: inherit; + -webkit-text-decoration: none; + text-decoration: none; + font-size: inherit; + padding-left: 16px; + padding-right: 16px; + padding-top: 8px; + padding-bottom: 8px; + color: white; + background-color: #5c6ac4; + border: 0; + border-radius: 4px; +} + +.emotion-5 { + box-sizing: border-box; + margin: 0; + min-width: 0; + margin-right: 0; + margin-left: 8px; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + margin-top: 4px; + font-size: 14px; +} + +.emotion-5 a { + color: #ffffff; + background-color: #3B817D; + -webkit-text-fill-color: initial; + padding-left: 8px; + padding-right: 8px; + padding-top: 4px; + padding-bottom: 4px; + line-height: 1; + border-radius: 1px; + display: inline-block; + box-shadow: rgba(0, 0, 0, 0.1) 0 1px 3px 1px,rgba(0, 0, 0, 0.1) 0 0 0 1px; + border: 1px solid #3B817D; +} + +.emotion-5 button { + color: #ffffff; + background-color: #3B817D; + -webkit-text-fill-color: initial; + padding-left: 8px; + padding-right: 8px; + padding-top: 4px; + padding-bottom: 4px; + line-height: 1; + border-radius: 1px; + display: inline-block; + box-shadow: rgba(0, 0, 0, 0.1) 0 1px 3px 1px,rgba(0, 0, 0, 0.1) 0 0 0 1px; + border: 1px solid #3B817D; +} + +.emotion-6 { + box-sizing: border-box; + margin: 0; + min-width: 0; + color: #5c6ac4; + -webkit-transition: all 0.3s ease-in-out; + transition: all 0.3s ease-in-out; +} + +
+
+
+
+ +
+
+ + google + +
+
+
+
+ +`; + +exports[`ActionBar overview 1 snapshot 1`] = ` + + .emotion-0 { + box-sizing: border-box; + margin: 0; + min-width: 0; +} + +.emotion-1 { + box-sizing: border-box; + margin: 0; + min-width: 0; + position: relative; +} + +.emotion-2 { + box-sizing: border-box; + margin: 0; + min-width: 0; + position: absolute; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + width: 100%; + -webkit-flex-direction: row-reverse; + -ms-flex-direction: row-reverse; + flex-direction: row-reverse; + margin-left: auto; +} + +.emotion-3 { + box-sizing: border-box; + margin: 0; + min-width: 0; + margin-right: 4px; + margin-left: 8px; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + margin-top: 4px; + font-size: 14px; +} + +.emotion-3 a { + color: #ffffff; + background-color: #3B817D; + -webkit-text-fill-color: initial; + padding-left: 8px; + padding-right: 8px; + padding-top: 4px; + padding-bottom: 4px; + line-height: 1; + border-radius: 1px; + display: inline-block; + box-shadow: rgba(0, 0, 0, 0.1) 0 1px 3px 1px,rgba(0, 0, 0, 0.1) 0 0 0 1px; + border: 1px solid #3B817D; +} + +.emotion-3 button { + color: #ffffff; + background-color: #3B817D; + -webkit-text-fill-color: initial; + padding-left: 8px; + padding-right: 8px; + padding-top: 4px; + padding-bottom: 4px; + line-height: 1; + border-radius: 1px; + display: inline-block; + box-shadow: rgba(0, 0, 0, 0.1) 0 1px 3px 1px,rgba(0, 0, 0, 0.1) 0 0 0 1px; + border: 1px solid #3B817D; +} + +.emotion-4 { + box-sizing: border-box; + margin: 0; + min-width: 0; + -webkit-appearance: none; + -moz-appearance: none; + -ms-appearance: none; + appearance: none; + display: inline-block; + text-align: center; + line-height: inherit; + -webkit-text-decoration: none; + text-decoration: none; + font-size: inherit; + padding-left: 16px; + padding-right: 16px; + padding-top: 8px; + padding-bottom: 8px; + color: white; + background-color: #5c6ac4; + border: 0; + border-radius: 4px; +} + +.emotion-5 { + box-sizing: border-box; + margin: 0; + min-width: 0; + margin-right: 0; + margin-left: 8px; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + margin-top: 4px; + font-size: 14px; +} + +.emotion-5 a { + color: #ffffff; + background-color: #3B817D; + -webkit-text-fill-color: initial; + padding-left: 8px; + padding-right: 8px; + padding-top: 4px; + padding-bottom: 4px; + line-height: 1; + border-radius: 1px; + display: inline-block; + box-shadow: rgba(0, 0, 0, 0.1) 0 1px 3px 1px,rgba(0, 0, 0, 0.1) 0 0 0 1px; + border: 1px solid #3B817D; +} + +.emotion-5 button { + color: #ffffff; + background-color: #3B817D; + -webkit-text-fill-color: initial; + padding-left: 8px; + padding-right: 8px; + padding-top: 4px; + padding-bottom: 4px; + line-height: 1; + border-radius: 1px; + display: inline-block; + box-shadow: rgba(0, 0, 0, 0.1) 0 1px 3px 1px,rgba(0, 0, 0, 0.1) 0 0 0 1px; + border: 1px solid #3B817D; +} + +.emotion-6 { + box-sizing: border-box; + margin: 0; + min-width: 0; + color: #5c6ac4; + -webkit-transition: all 0.3s ease-in-out; + transition: all 0.3s ease-in-out; +} + +
+
+
+
+ +
+
+ + google + +
+
+
+
+ +`; + +exports[`ActionBar overview 2 snapshot 1`] = ` + + .emotion-0 { + box-sizing: border-box; + margin: 0; + min-width: 0; +} + +.emotion-1 { + box-sizing: border-box; + margin: 0; + min-width: 0; + position: relative; +} + +.emotion-2 { + box-sizing: border-box; + margin: 0; + min-width: 0; + position: absolute; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + width: 100%; + -webkit-flex-direction: row-reverse; + -ms-flex-direction: row-reverse; + flex-direction: row-reverse; + margin-left: auto; +} + +.emotion-3 { + box-sizing: border-box; + margin: 0; + min-width: 0; + margin-right: 4px; + margin-left: 8px; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + margin-top: 4px; + font-size: 14px; +} + +.emotion-3 a { + color: #ffffff; + background-color: #3B817D; + -webkit-text-fill-color: initial; + padding-left: 8px; + padding-right: 8px; + padding-top: 4px; + padding-bottom: 4px; + line-height: 1; + border-radius: 1px; + display: inline-block; + box-shadow: rgba(0, 0, 0, 0.1) 0 1px 3px 1px,rgba(0, 0, 0, 0.1) 0 0 0 1px; + border: 1px solid #3B817D; +} + +.emotion-3 button { + color: #ffffff; + background-color: #3B817D; + -webkit-text-fill-color: initial; + padding-left: 8px; + padding-right: 8px; + padding-top: 4px; + padding-bottom: 4px; + line-height: 1; + border-radius: 1px; + display: inline-block; + box-shadow: rgba(0, 0, 0, 0.1) 0 1px 3px 1px,rgba(0, 0, 0, 0.1) 0 0 0 1px; + border: 1px solid #3B817D; +} + +.emotion-4 { + box-sizing: border-box; + margin: 0; + min-width: 0; + -webkit-appearance: none; + -moz-appearance: none; + -ms-appearance: none; + appearance: none; + display: inline-block; + text-align: center; + line-height: inherit; + -webkit-text-decoration: none; + text-decoration: none; + font-size: inherit; + padding-left: 16px; + padding-right: 16px; + padding-top: 8px; + padding-bottom: 8px; + color: white; + background-color: #5c6ac4; + border: 0; + border-radius: 4px; +} + +.emotion-5 { + box-sizing: border-box; + margin: 0; + min-width: 0; + margin-right: 0; + margin-left: 8px; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + margin-top: 4px; + font-size: 14px; +} + +.emotion-5 a { + color: #ffffff; + background-color: #3B817D; + -webkit-text-fill-color: initial; + padding-left: 8px; + padding-right: 8px; + padding-top: 4px; + padding-bottom: 4px; + line-height: 1; + border-radius: 1px; + display: inline-block; + box-shadow: rgba(0, 0, 0, 0.1) 0 1px 3px 1px,rgba(0, 0, 0, 0.1) 0 0 0 1px; + border: 1px solid #3B817D; +} + +.emotion-5 button { + color: #ffffff; + background-color: #3B817D; + -webkit-text-fill-color: initial; + padding-left: 8px; + padding-right: 8px; + padding-top: 4px; + padding-bottom: 4px; + line-height: 1; + border-radius: 1px; + display: inline-block; + box-shadow: rgba(0, 0, 0, 0.1) 0 1px 3px 1px,rgba(0, 0, 0, 0.1) 0 0 0 1px; + border: 1px solid #3B817D; +} + +.emotion-6 { + box-sizing: border-box; + margin: 0; + min-width: 0; + color: #5c6ac4; + -webkit-transition: all 0.3s ease-in-out; + transition: all 0.3s ease-in-out; +} + +
+
+
+
+ +
+
+ + google + +
+
+
+
+ +`; + +exports[`ActionBar overview 3 snapshot 1`] = ` + + .emotion-0 { + box-sizing: border-box; + margin: 0; + min-width: 0; +} + +.emotion-1 { + box-sizing: border-box; + margin: 0; + min-width: 0; + position: relative; +} + +.emotion-2 { + box-sizing: border-box; + margin: 0; + min-width: 0; + position: absolute; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + width: 100%; + -webkit-flex-direction: row-reverse; + -ms-flex-direction: row-reverse; + flex-direction: row-reverse; + margin-left: auto; +} + +.emotion-3 { + box-sizing: border-box; + margin: 0; + min-width: 0; + margin-right: 4px; + margin-left: 8px; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + margin-top: 4px; + font-size: 14px; +} + +.emotion-3 a { + color: #ffffff; + background-color: #3B817D; + -webkit-text-fill-color: initial; + padding-left: 8px; + padding-right: 8px; + padding-top: 4px; + padding-bottom: 4px; + line-height: 1; + border-radius: 1px; + display: inline-block; + box-shadow: rgba(0, 0, 0, 0.1) 0 1px 3px 1px,rgba(0, 0, 0, 0.1) 0 0 0 1px; + border: 1px solid #3B817D; +} + +.emotion-3 button { + color: #ffffff; + background-color: #3B817D; + -webkit-text-fill-color: initial; + padding-left: 8px; + padding-right: 8px; + padding-top: 4px; + padding-bottom: 4px; + line-height: 1; + border-radius: 1px; + display: inline-block; + box-shadow: rgba(0, 0, 0, 0.1) 0 1px 3px 1px,rgba(0, 0, 0, 0.1) 0 0 0 1px; + border: 1px solid #3B817D; +} + +.emotion-4 { + box-sizing: border-box; + margin: 0; + min-width: 0; + -webkit-appearance: none; + -moz-appearance: none; + -ms-appearance: none; + appearance: none; + display: inline-block; + text-align: center; + line-height: inherit; + -webkit-text-decoration: none; + text-decoration: none; + font-size: inherit; + padding-left: 16px; + padding-right: 16px; + padding-top: 8px; + padding-bottom: 8px; + color: white; + background-color: #5c6ac4; + border: 0; + border-radius: 4px; +} + +.emotion-5 { + box-sizing: border-box; + margin: 0; + min-width: 0; + margin-right: 0; + margin-left: 8px; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + margin-top: 4px; + font-size: 14px; +} + +.emotion-5 a { + color: #ffffff; + background-color: #3B817D; + -webkit-text-fill-color: initial; + padding-left: 8px; + padding-right: 8px; + padding-top: 4px; + padding-bottom: 4px; + line-height: 1; + border-radius: 1px; + display: inline-block; + box-shadow: rgba(0, 0, 0, 0.1) 0 1px 3px 1px,rgba(0, 0, 0, 0.1) 0 0 0 1px; + border: 1px solid #3B817D; +} + +.emotion-5 button { + color: #ffffff; + background-color: #3B817D; + -webkit-text-fill-color: initial; + padding-left: 8px; + padding-right: 8px; + padding-top: 4px; + padding-bottom: 4px; + line-height: 1; + border-radius: 1px; + display: inline-block; + box-shadow: rgba(0, 0, 0, 0.1) 0 1px 3px 1px,rgba(0, 0, 0, 0.1) 0 0 0 1px; + border: 1px solid #3B817D; +} + +.emotion-6 { + box-sizing: border-box; + margin: 0; + min-width: 0; + color: #5c6ac4; + -webkit-transition: all 0.3s ease-in-out; + transition: all 0.3s ease-in-out; +} + +
+
+
+
+ +
+
+ + google + +
+
+
+
+ +`; + +exports[`ActionBar overview 4 snapshot 1`] = ` + + .emotion-0 { + box-sizing: border-box; + margin: 0; + min-width: 0; +} + +.emotion-1 { + box-sizing: border-box; + margin: 0; + min-width: 0; + position: relative; +} + +.emotion-2 { + box-sizing: border-box; + margin: 0; + min-width: 0; + position: absolute; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + width: 100%; + -webkit-flex-direction: row-reverse; + -ms-flex-direction: row-reverse; + flex-direction: row-reverse; + margin-left: auto; +} + +.emotion-3 { + box-sizing: border-box; + margin: 0; + min-width: 0; + margin-right: 4px; + margin-left: 8px; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + margin-top: 4px; + font-size: 14px; +} + +.emotion-3 a { + color: #ffffff; + background-color: #3B817D; + -webkit-text-fill-color: initial; + padding-left: 8px; + padding-right: 8px; + padding-top: 4px; + padding-bottom: 4px; + line-height: 1; + border-radius: 1px; + display: inline-block; + box-shadow: rgba(0, 0, 0, 0.1) 0 1px 3px 1px,rgba(0, 0, 0, 0.1) 0 0 0 1px; + border: 1px solid #3B817D; +} + +.emotion-3 button { + color: #ffffff; + background-color: #3B817D; + -webkit-text-fill-color: initial; + padding-left: 8px; + padding-right: 8px; + padding-top: 4px; + padding-bottom: 4px; + line-height: 1; + border-radius: 1px; + display: inline-block; + box-shadow: rgba(0, 0, 0, 0.1) 0 1px 3px 1px,rgba(0, 0, 0, 0.1) 0 0 0 1px; + border: 1px solid #3B817D; +} + +.emotion-4 { + box-sizing: border-box; + margin: 0; + min-width: 0; + -webkit-appearance: none; + -moz-appearance: none; + -ms-appearance: none; + appearance: none; + display: inline-block; + text-align: center; + line-height: inherit; + -webkit-text-decoration: none; + text-decoration: none; + font-size: inherit; + padding-left: 16px; + padding-right: 16px; + padding-top: 8px; + padding-bottom: 8px; + color: white; + background-color: #5c6ac4; + border: 0; + border-radius: 4px; +} + +.emotion-5 { + box-sizing: border-box; + margin: 0; + min-width: 0; + margin-right: 0; + margin-left: 8px; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + margin-top: 4px; + font-size: 14px; +} + +.emotion-5 a { + color: #ffffff; + background-color: #3B817D; + -webkit-text-fill-color: initial; + padding-left: 8px; + padding-right: 8px; + padding-top: 4px; + padding-bottom: 4px; + line-height: 1; + border-radius: 1px; + display: inline-block; + box-shadow: rgba(0, 0, 0, 0.1) 0 1px 3px 1px,rgba(0, 0, 0, 0.1) 0 0 0 1px; + border: 1px solid #3B817D; +} + +.emotion-5 button { + color: #ffffff; + background-color: #3B817D; + -webkit-text-fill-color: initial; + padding-left: 8px; + padding-right: 8px; + padding-top: 4px; + padding-bottom: 4px; + line-height: 1; + border-radius: 1px; + display: inline-block; + box-shadow: rgba(0, 0, 0, 0.1) 0 1px 3px 1px,rgba(0, 0, 0, 0.1) 0 0 0 1px; + border: 1px solid #3B817D; +} + +.emotion-6 { + box-sizing: border-box; + margin: 0; + min-width: 0; + color: #5c6ac4; + -webkit-transition: all 0.3s ease-in-out; + transition: all 0.3s ease-in-out; +} + +
+
+
+
+ +
+
+ + google + +
+
+
+
+ +`; + exports[`ActionBar overview snapshot 1`] = ` .emotion-0 { diff --git a/ui/components/src/ActionContainer/ActionContainer.data.ts b/ui/components/src/ActionContainer/ActionContainer.data.ts new file mode 100644 index 000000000..ff8b4c563 --- /dev/null +++ b/ui/components/src/ActionContainer/ActionContainer.data.ts @@ -0,0 +1 @@ +export default {}; diff --git a/ui/components/src/ActionContainer/ActionContainer.test.ts b/ui/components/src/ActionContainer/ActionContainer.test.ts index b58a33bf1..ab811d868 100644 --- a/ui/components/src/ActionContainer/ActionContainer.test.ts +++ b/ui/components/src/ActionContainer/ActionContainer.test.ts @@ -8,28 +8,36 @@ import { render, act } from '@testing-library/react'; import { renderErr } from '@component-controls/test-renderers'; import * as examples from './ActionContainer.stories'; +import data from './ActionContainer.data'; describe('ActionContainer', () => { const configPath = path.resolve(__dirname, '../../.config'); const config = loadConfigurations(configPath); let renderedExamples: ReturnType = []; act(() => { - renderedExamples = renderDocument(examples, config); + renderedExamples = renderDocument(examples, config, data); }); if (!renderedExamples) { renderErr(); return; } - renderedExamples.forEach(({ name, rendered }) => { + renderedExamples.forEach(({ name, rendered, dataId, values }) => { describe(name, () => { - it('snapshot', () => { - const { asFragment } = render(rendered); - expect(asFragment()).toMatchSnapshot(); - }); - it('accessibility', async () => { - const axeResults = await reactRunDOM(rendered, run); - expect(axeResults).toHaveNoAxeViolations(); - }); + const runTests = () => { + it('snapshot', () => { + const { asFragment } = render(rendered); + expect(asFragment()).toMatchSnapshot(); + }); + it('accessibility', async () => { + const axeResults = await reactRunDOM(rendered, run); + expect(axeResults).toHaveNoAxeViolations(); + }); + }; + if (values) { + describe(dataId, runTests); + } else { + runTests(); + } }); }); }); diff --git a/ui/components/src/BlockContainer/BlockContainer.data.ts b/ui/components/src/BlockContainer/BlockContainer.data.ts new file mode 100644 index 000000000..c7e1130dc --- /dev/null +++ b/ui/components/src/BlockContainer/BlockContainer.data.ts @@ -0,0 +1,9 @@ +export default { + overview: { + '0': {}, + '1': {}, + '2': {}, + '3': {}, + '4': {}, + }, +}; diff --git a/ui/components/src/BlockContainer/BlockContainer.test.ts b/ui/components/src/BlockContainer/BlockContainer.test.ts index 5fd13562c..75667f0f3 100644 --- a/ui/components/src/BlockContainer/BlockContainer.test.ts +++ b/ui/components/src/BlockContainer/BlockContainer.test.ts @@ -8,28 +8,36 @@ import { render, act } from '@testing-library/react'; import { renderErr } from '@component-controls/test-renderers'; import * as examples from './BlockContainer.stories'; +import data from './BlockContainer.data'; describe('BlockContainer', () => { const configPath = path.resolve(__dirname, '../../.config'); const config = loadConfigurations(configPath); let renderedExamples: ReturnType = []; act(() => { - renderedExamples = renderDocument(examples, config); + renderedExamples = renderDocument(examples, config, data); }); if (!renderedExamples) { renderErr(); return; } - renderedExamples.forEach(({ name, rendered }) => { + renderedExamples.forEach(({ name, rendered, dataId, values }) => { describe(name, () => { - it('snapshot', () => { - const { asFragment } = render(rendered); - expect(asFragment()).toMatchSnapshot(); - }); - it('accessibility', async () => { - const axeResults = await reactRunDOM(rendered, run); - expect(axeResults).toHaveNoAxeViolations(); - }); + const runTests = () => { + it('snapshot', () => { + const { asFragment } = render(rendered); + expect(asFragment()).toMatchSnapshot(); + }); + it('accessibility', async () => { + const axeResults = await reactRunDOM(rendered, run); + expect(axeResults).toHaveNoAxeViolations(); + }); + }; + if (values) { + describe(dataId, runTests); + } else { + runTests(); + } }); }); }); diff --git a/ui/components/src/BlockContainer/__snapshots__/BlockContainer.test.ts.snap b/ui/components/src/BlockContainer/__snapshots__/BlockContainer.test.ts.snap index 625e4677a..29208ef99 100644 --- a/ui/components/src/BlockContainer/__snapshots__/BlockContainer.test.ts.snap +++ b/ui/components/src/BlockContainer/__snapshots__/BlockContainer.test.ts.snap @@ -647,6 +647,1261 @@ exports[`BlockContainer notCollapsible snapshot 1`] = ` `; +exports[`BlockContainer overview 0 snapshot 1`] = ` + + .emotion-0 { + box-sizing: border-box; + margin: 0; + min-width: 0; + position: relative; + margin-top: 32px; + margin-bottom: 32px; + width: 100%; + scroll-margin-top: 5rem; +} + +.emotion-1 { + box-sizing: border-box; + margin: 0; + min-width: 0; + width: 100%; + scroll-margin-top: 5rem; +} + +.emotion-2 { + box-sizing: border-box; + margin: 0; + min-width: 0; + position: relative; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +.emotion-2:hover a { + visibility: visible; +} + +.emotion-3 { + box-sizing: border-box; + margin: 0; + min-width: 0; + position: absolute; + margin: auto; + top: 0; + bottom: 0; + height: 32px; + visibility: hidden; + padding-right: 4px; + left: -22px; +} + +.emotion-3:hover { + visibility: visible; +} + +.emotion-4 { + box-sizing: border-box; + margin: 0; + min-width: 0; + font-family: medium-content-title-font,Georgia,Cambria,"Times New Roman",Times,serif; + font-weight: 600; + line-height: 1.25; + font-family: medium-content-title-font,Georgia,Cambria,"Times New Roman",Times,serif; + line-height: 1.25; + font-weight: 600; + margin-top: 16px; + margin-bottom: 16px; + margin-top: 0; + margin-bottom: 0; + padding-top: 4px; + padding-bottom: 4px; +} + +.emotion-5 { + box-sizing: border-box; + margin: 0; + min-width: 0; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; +} + +.emotion-6 { + box-sizing: border-box; + margin: 0; + min-width: 0; + color: #5c6ac4; + -webkit-transition: all 0.3s ease-in-out; + transition: all 0.3s ease-in-out; + cursor: pointer; +} + +.emotion-7 { + box-sizing: border-box; + margin: 0; + min-width: 0; + margin-left: 8px; + padding-bottom: 8px; +} + +.emotion-8 { + box-sizing: border-box; + margin: 0; + min-width: 0; + box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.1); + border: 1px solid rgba(0, 0, 0, 0.1); + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +.emotion-8:hover a { + visibility: visible; +} + +.emotion-9 { + box-sizing: border-box; + margin: 0; + min-width: 0; + color: #5c6ac4; +} + +
+
+
+ + + +

+
+ Block title + + + + + +
+

+
+
+
+
+
+ + + + +
+
+
+
+ +`; + +exports[`BlockContainer overview 1 snapshot 1`] = ` + + .emotion-0 { + box-sizing: border-box; + margin: 0; + min-width: 0; + position: relative; + margin-top: 32px; + margin-bottom: 32px; + width: 100%; + scroll-margin-top: 5rem; +} + +.emotion-1 { + box-sizing: border-box; + margin: 0; + min-width: 0; + width: 100%; + scroll-margin-top: 5rem; +} + +.emotion-2 { + box-sizing: border-box; + margin: 0; + min-width: 0; + position: relative; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +.emotion-2:hover a { + visibility: visible; +} + +.emotion-3 { + box-sizing: border-box; + margin: 0; + min-width: 0; + position: absolute; + margin: auto; + top: 0; + bottom: 0; + height: 32px; + visibility: hidden; + padding-right: 4px; + left: -22px; +} + +.emotion-3:hover { + visibility: visible; +} + +.emotion-4 { + box-sizing: border-box; + margin: 0; + min-width: 0; + font-family: medium-content-title-font,Georgia,Cambria,"Times New Roman",Times,serif; + font-weight: 600; + line-height: 1.25; + font-family: medium-content-title-font,Georgia,Cambria,"Times New Roman",Times,serif; + line-height: 1.25; + font-weight: 600; + margin-top: 16px; + margin-bottom: 16px; + margin-top: 0; + margin-bottom: 0; + padding-top: 4px; + padding-bottom: 4px; +} + +.emotion-5 { + box-sizing: border-box; + margin: 0; + min-width: 0; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; +} + +.emotion-6 { + box-sizing: border-box; + margin: 0; + min-width: 0; + color: #5c6ac4; + -webkit-transition: all 0.3s ease-in-out; + transition: all 0.3s ease-in-out; + cursor: pointer; +} + +.emotion-7 { + box-sizing: border-box; + margin: 0; + min-width: 0; + margin-left: 8px; + padding-bottom: 8px; +} + +.emotion-8 { + box-sizing: border-box; + margin: 0; + min-width: 0; + box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.1); + border: 1px solid rgba(0, 0, 0, 0.1); + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +.emotion-8:hover a { + visibility: visible; +} + +.emotion-9 { + box-sizing: border-box; + margin: 0; + min-width: 0; + color: #5c6ac4; +} + +
+
+
+ + + +

+
+ Block title + + + + + +
+

+
+
+
+
+
+ + + + +
+
+
+
+ +`; + +exports[`BlockContainer overview 2 snapshot 1`] = ` + + .emotion-0 { + box-sizing: border-box; + margin: 0; + min-width: 0; + position: relative; + margin-top: 32px; + margin-bottom: 32px; + width: 100%; + scroll-margin-top: 5rem; +} + +.emotion-1 { + box-sizing: border-box; + margin: 0; + min-width: 0; + width: 100%; + scroll-margin-top: 5rem; +} + +.emotion-2 { + box-sizing: border-box; + margin: 0; + min-width: 0; + position: relative; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +.emotion-2:hover a { + visibility: visible; +} + +.emotion-3 { + box-sizing: border-box; + margin: 0; + min-width: 0; + position: absolute; + margin: auto; + top: 0; + bottom: 0; + height: 32px; + visibility: hidden; + padding-right: 4px; + left: -22px; +} + +.emotion-3:hover { + visibility: visible; +} + +.emotion-4 { + box-sizing: border-box; + margin: 0; + min-width: 0; + font-family: medium-content-title-font,Georgia,Cambria,"Times New Roman",Times,serif; + font-weight: 600; + line-height: 1.25; + font-family: medium-content-title-font,Georgia,Cambria,"Times New Roman",Times,serif; + line-height: 1.25; + font-weight: 600; + margin-top: 16px; + margin-bottom: 16px; + margin-top: 0; + margin-bottom: 0; + padding-top: 4px; + padding-bottom: 4px; +} + +.emotion-5 { + box-sizing: border-box; + margin: 0; + min-width: 0; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; +} + +.emotion-6 { + box-sizing: border-box; + margin: 0; + min-width: 0; + color: #5c6ac4; + -webkit-transition: all 0.3s ease-in-out; + transition: all 0.3s ease-in-out; + cursor: pointer; +} + +.emotion-7 { + box-sizing: border-box; + margin: 0; + min-width: 0; + margin-left: 8px; + padding-bottom: 8px; +} + +.emotion-8 { + box-sizing: border-box; + margin: 0; + min-width: 0; + box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.1); + border: 1px solid rgba(0, 0, 0, 0.1); + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +.emotion-8:hover a { + visibility: visible; +} + +.emotion-9 { + box-sizing: border-box; + margin: 0; + min-width: 0; + color: #5c6ac4; +} + +
+
+
+ + + +

+
+ Block title + + + + + +
+

+
+
+
+
+
+ + + + +
+
+
+
+ +`; + +exports[`BlockContainer overview 3 snapshot 1`] = ` + + .emotion-0 { + box-sizing: border-box; + margin: 0; + min-width: 0; + position: relative; + margin-top: 32px; + margin-bottom: 32px; + width: 100%; + scroll-margin-top: 5rem; +} + +.emotion-1 { + box-sizing: border-box; + margin: 0; + min-width: 0; + width: 100%; + scroll-margin-top: 5rem; +} + +.emotion-2 { + box-sizing: border-box; + margin: 0; + min-width: 0; + position: relative; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +.emotion-2:hover a { + visibility: visible; +} + +.emotion-3 { + box-sizing: border-box; + margin: 0; + min-width: 0; + position: absolute; + margin: auto; + top: 0; + bottom: 0; + height: 32px; + visibility: hidden; + padding-right: 4px; + left: -22px; +} + +.emotion-3:hover { + visibility: visible; +} + +.emotion-4 { + box-sizing: border-box; + margin: 0; + min-width: 0; + font-family: medium-content-title-font,Georgia,Cambria,"Times New Roman",Times,serif; + font-weight: 600; + line-height: 1.25; + font-family: medium-content-title-font,Georgia,Cambria,"Times New Roman",Times,serif; + line-height: 1.25; + font-weight: 600; + margin-top: 16px; + margin-bottom: 16px; + margin-top: 0; + margin-bottom: 0; + padding-top: 4px; + padding-bottom: 4px; +} + +.emotion-5 { + box-sizing: border-box; + margin: 0; + min-width: 0; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; +} + +.emotion-6 { + box-sizing: border-box; + margin: 0; + min-width: 0; + color: #5c6ac4; + -webkit-transition: all 0.3s ease-in-out; + transition: all 0.3s ease-in-out; + cursor: pointer; +} + +.emotion-7 { + box-sizing: border-box; + margin: 0; + min-width: 0; + margin-left: 8px; + padding-bottom: 8px; +} + +.emotion-8 { + box-sizing: border-box; + margin: 0; + min-width: 0; + box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.1); + border: 1px solid rgba(0, 0, 0, 0.1); + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +.emotion-8:hover a { + visibility: visible; +} + +.emotion-9 { + box-sizing: border-box; + margin: 0; + min-width: 0; + color: #5c6ac4; +} + +
+
+
+ + + +

+
+ Block title + + + + + +
+

+
+
+
+
+
+ + + + +
+
+
+
+ +`; + +exports[`BlockContainer overview 4 snapshot 1`] = ` + + .emotion-0 { + box-sizing: border-box; + margin: 0; + min-width: 0; + position: relative; + margin-top: 32px; + margin-bottom: 32px; + width: 100%; + scroll-margin-top: 5rem; +} + +.emotion-1 { + box-sizing: border-box; + margin: 0; + min-width: 0; + width: 100%; + scroll-margin-top: 5rem; +} + +.emotion-2 { + box-sizing: border-box; + margin: 0; + min-width: 0; + position: relative; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +.emotion-2:hover a { + visibility: visible; +} + +.emotion-3 { + box-sizing: border-box; + margin: 0; + min-width: 0; + position: absolute; + margin: auto; + top: 0; + bottom: 0; + height: 32px; + visibility: hidden; + padding-right: 4px; + left: -22px; +} + +.emotion-3:hover { + visibility: visible; +} + +.emotion-4 { + box-sizing: border-box; + margin: 0; + min-width: 0; + font-family: medium-content-title-font,Georgia,Cambria,"Times New Roman",Times,serif; + font-weight: 600; + line-height: 1.25; + font-family: medium-content-title-font,Georgia,Cambria,"Times New Roman",Times,serif; + line-height: 1.25; + font-weight: 600; + margin-top: 16px; + margin-bottom: 16px; + margin-top: 0; + margin-bottom: 0; + padding-top: 4px; + padding-bottom: 4px; +} + +.emotion-5 { + box-sizing: border-box; + margin: 0; + min-width: 0; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; +} + +.emotion-6 { + box-sizing: border-box; + margin: 0; + min-width: 0; + color: #5c6ac4; + -webkit-transition: all 0.3s ease-in-out; + transition: all 0.3s ease-in-out; + cursor: pointer; +} + +.emotion-7 { + box-sizing: border-box; + margin: 0; + min-width: 0; + margin-left: 8px; + padding-bottom: 8px; +} + +.emotion-8 { + box-sizing: border-box; + margin: 0; + min-width: 0; + box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.1); + border: 1px solid rgba(0, 0, 0, 0.1); + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +.emotion-8:hover a { + visibility: visible; +} + +.emotion-9 { + box-sizing: border-box; + margin: 0; + min-width: 0; + color: #5c6ac4; +} + +
+
+
+ + + +

+
+ Block title + + + + + +
+

+
+
+
+
+
+ + + + +
+
+
+
+ +`; + exports[`BlockContainer overview snapshot 1`] = ` .emotion-0 { diff --git a/ui/components/src/Collapsible/Collapsible.data.ts b/ui/components/src/Collapsible/Collapsible.data.ts new file mode 100644 index 000000000..c7e1130dc --- /dev/null +++ b/ui/components/src/Collapsible/Collapsible.data.ts @@ -0,0 +1,9 @@ +export default { + overview: { + '0': {}, + '1': {}, + '2': {}, + '3': {}, + '4': {}, + }, +}; diff --git a/ui/components/src/Collapsible/Collapsible.test.ts b/ui/components/src/Collapsible/Collapsible.test.ts index f9cff5869..f0eae0413 100644 --- a/ui/components/src/Collapsible/Collapsible.test.ts +++ b/ui/components/src/Collapsible/Collapsible.test.ts @@ -8,28 +8,36 @@ import { render, act } from '@testing-library/react'; import { renderErr } from '@component-controls/test-renderers'; import * as examples from './Collapsible.stories'; +import data from './Collapsible.data'; describe('Collapsible', () => { const configPath = path.resolve(__dirname, '../../.config'); const config = loadConfigurations(configPath); let renderedExamples: ReturnType = []; act(() => { - renderedExamples = renderDocument(examples, config); + renderedExamples = renderDocument(examples, config, data); }); if (!renderedExamples) { renderErr(); return; } - renderedExamples.forEach(({ name, rendered }) => { + renderedExamples.forEach(({ name, rendered, dataId, values }) => { describe(name, () => { - it('snapshot', () => { - const { asFragment } = render(rendered); - expect(asFragment()).toMatchSnapshot(); - }); - it('accessibility', async () => { - const axeResults = await reactRunDOM(rendered, run); - expect(axeResults).toHaveNoAxeViolations(); - }); + const runTests = () => { + it('snapshot', () => { + const { asFragment } = render(rendered); + expect(asFragment()).toMatchSnapshot(); + }); + it('accessibility', async () => { + const axeResults = await reactRunDOM(rendered, run); + expect(axeResults).toHaveNoAxeViolations(); + }); + }; + if (values) { + describe(dataId, runTests); + } else { + runTests(); + } }); }); }); diff --git a/ui/components/src/Collapsible/__snapshots__/Collapsible.test.ts.snap b/ui/components/src/Collapsible/__snapshots__/Collapsible.test.ts.snap index 2005f403d..924acb6a4 100644 --- a/ui/components/src/Collapsible/__snapshots__/Collapsible.test.ts.snap +++ b/ui/components/src/Collapsible/__snapshots__/Collapsible.test.ts.snap @@ -1,5 +1,310 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP +exports[`Collapsible overview 0 snapshot 1`] = ` + + .emotion-0 { + box-sizing: border-box; + margin: 0; + min-width: 0; +} + +.emotion-1 { + box-sizing: border-box; + margin: 0; + min-width: 0; + -webkit-appearance: none; + -moz-appearance: none; + -ms-appearance: none; + appearance: none; + display: inline-block; + text-align: center; + line-height: inherit; + -webkit-text-decoration: none; + text-decoration: none; + font-size: inherit; + padding-left: 16px; + padding-right: 16px; + padding-top: 8px; + padding-bottom: 8px; + color: white; + background-color: #5c6ac4; + border: 0; + border-radius: 4px; + color: #333; + background-color: #f3f3f3; + border-radius: 5px; + box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 0px 1px inset; +} + +.emotion-1:disabled { + color: #aaa; +} + +
+ + + +`; + +exports[`Collapsible overview 1 snapshot 1`] = ` + + .emotion-0 { + box-sizing: border-box; + margin: 0; + min-width: 0; +} + +.emotion-1 { + box-sizing: border-box; + margin: 0; + min-width: 0; + -webkit-appearance: none; + -moz-appearance: none; + -ms-appearance: none; + appearance: none; + display: inline-block; + text-align: center; + line-height: inherit; + -webkit-text-decoration: none; + text-decoration: none; + font-size: inherit; + padding-left: 16px; + padding-right: 16px; + padding-top: 8px; + padding-bottom: 8px; + color: white; + background-color: #5c6ac4; + border: 0; + border-radius: 4px; + color: #333; + background-color: #f3f3f3; + border-radius: 5px; + box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 0px 1px inset; +} + +.emotion-1:disabled { + color: #aaa; +} + +
+ + + +`; + +exports[`Collapsible overview 2 snapshot 1`] = ` + + .emotion-0 { + box-sizing: border-box; + margin: 0; + min-width: 0; +} + +.emotion-1 { + box-sizing: border-box; + margin: 0; + min-width: 0; + -webkit-appearance: none; + -moz-appearance: none; + -ms-appearance: none; + appearance: none; + display: inline-block; + text-align: center; + line-height: inherit; + -webkit-text-decoration: none; + text-decoration: none; + font-size: inherit; + padding-left: 16px; + padding-right: 16px; + padding-top: 8px; + padding-bottom: 8px; + color: white; + background-color: #5c6ac4; + border: 0; + border-radius: 4px; + color: #333; + background-color: #f3f3f3; + border-radius: 5px; + box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 0px 1px inset; +} + +.emotion-1:disabled { + color: #aaa; +} + +
+ + + +`; + +exports[`Collapsible overview 3 snapshot 1`] = ` + + .emotion-0 { + box-sizing: border-box; + margin: 0; + min-width: 0; +} + +.emotion-1 { + box-sizing: border-box; + margin: 0; + min-width: 0; + -webkit-appearance: none; + -moz-appearance: none; + -ms-appearance: none; + appearance: none; + display: inline-block; + text-align: center; + line-height: inherit; + -webkit-text-decoration: none; + text-decoration: none; + font-size: inherit; + padding-left: 16px; + padding-right: 16px; + padding-top: 8px; + padding-bottom: 8px; + color: white; + background-color: #5c6ac4; + border: 0; + border-radius: 4px; + color: #333; + background-color: #f3f3f3; + border-radius: 5px; + box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 0px 1px inset; +} + +.emotion-1:disabled { + color: #aaa; +} + +
+ + + +`; + +exports[`Collapsible overview 4 snapshot 1`] = ` + + .emotion-0 { + box-sizing: border-box; + margin: 0; + min-width: 0; +} + +.emotion-1 { + box-sizing: border-box; + margin: 0; + min-width: 0; + -webkit-appearance: none; + -moz-appearance: none; + -ms-appearance: none; + appearance: none; + display: inline-block; + text-align: center; + line-height: inherit; + -webkit-text-decoration: none; + text-decoration: none; + font-size: inherit; + padding-left: 16px; + padding-right: 16px; + padding-top: 8px; + padding-bottom: 8px; + color: white; + background-color: #5c6ac4; + border: 0; + border-radius: 4px; + color: #333; + background-color: #f3f3f3; + border-radius: 5px; + box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 0px 1px inset; +} + +.emotion-1:disabled { + color: #aaa; +} + +
+ + + +`; + exports[`Collapsible overview snapshot 1`] = ` .emotion-0 { diff --git a/ui/components/src/ColorMode/ColorMode.data.ts b/ui/components/src/ColorMode/ColorMode.data.ts new file mode 100644 index 000000000..ff8b4c563 --- /dev/null +++ b/ui/components/src/ColorMode/ColorMode.data.ts @@ -0,0 +1 @@ +export default {}; diff --git a/ui/components/src/ColorMode/ColorMode.test.ts b/ui/components/src/ColorMode/ColorMode.test.ts index eebdddfb5..d82818dbf 100644 --- a/ui/components/src/ColorMode/ColorMode.test.ts +++ b/ui/components/src/ColorMode/ColorMode.test.ts @@ -8,28 +8,36 @@ import { render, act } from '@testing-library/react'; import { renderErr } from '@component-controls/test-renderers'; import * as examples from './ColorMode.stories'; +import data from './ColorMode.data'; describe('ColorMode', () => { const configPath = path.resolve(__dirname, '../../.config'); const config = loadConfigurations(configPath); let renderedExamples: ReturnType = []; act(() => { - renderedExamples = renderDocument(examples, config); + renderedExamples = renderDocument(examples, config, data); }); if (!renderedExamples) { renderErr(); return; } - renderedExamples.forEach(({ name, rendered }) => { + renderedExamples.forEach(({ name, rendered, dataId, values }) => { describe(name, () => { - it('snapshot', () => { - const { asFragment } = render(rendered); - expect(asFragment()).toMatchSnapshot(); - }); - it('accessibility', async () => { - const axeResults = await reactRunDOM(rendered, run); - expect(axeResults).toHaveNoAxeViolations(); - }); + const runTests = () => { + it('snapshot', () => { + const { asFragment } = render(rendered); + expect(asFragment()).toMatchSnapshot(); + }); + it('accessibility', async () => { + const axeResults = await reactRunDOM(rendered, run); + expect(axeResults).toHaveNoAxeViolations(); + }); + }; + if (values) { + describe(dataId, runTests); + } else { + runTests(); + } }); }); }); diff --git a/ui/components/src/CopyContainer/CopyContainer.data.ts b/ui/components/src/CopyContainer/CopyContainer.data.ts new file mode 100644 index 000000000..ff8b4c563 --- /dev/null +++ b/ui/components/src/CopyContainer/CopyContainer.data.ts @@ -0,0 +1 @@ +export default {}; diff --git a/ui/components/src/CopyContainer/CopyContainer.test.ts b/ui/components/src/CopyContainer/CopyContainer.test.ts index caec86078..a63d0abd8 100644 --- a/ui/components/src/CopyContainer/CopyContainer.test.ts +++ b/ui/components/src/CopyContainer/CopyContainer.test.ts @@ -8,28 +8,36 @@ import { render, act } from '@testing-library/react'; import { renderErr } from '@component-controls/test-renderers'; import * as examples from './CopyContainer.stories'; +import data from './CopyContainer.data'; describe('CopyContainer', () => { const configPath = path.resolve(__dirname, '../../.config'); const config = loadConfigurations(configPath); let renderedExamples: ReturnType = []; act(() => { - renderedExamples = renderDocument(examples, config); + renderedExamples = renderDocument(examples, config, data); }); if (!renderedExamples) { renderErr(); return; } - renderedExamples.forEach(({ name, rendered }) => { + renderedExamples.forEach(({ name, rendered, dataId, values }) => { describe(name, () => { - it('snapshot', () => { - const { asFragment } = render(rendered); - expect(asFragment()).toMatchSnapshot(); - }); - it('accessibility', async () => { - const axeResults = await reactRunDOM(rendered, run); - expect(axeResults).toHaveNoAxeViolations(); - }); + const runTests = () => { + it('snapshot', () => { + const { asFragment } = render(rendered); + expect(asFragment()).toMatchSnapshot(); + }); + it('accessibility', async () => { + const axeResults = await reactRunDOM(rendered, run); + expect(axeResults).toHaveNoAxeViolations(); + }); + }; + if (values) { + describe(dataId, runTests); + } else { + runTests(); + } }); }); }); diff --git a/ui/components/src/Description/Description.data.ts b/ui/components/src/Description/Description.data.ts new file mode 100644 index 000000000..ff8b4c563 --- /dev/null +++ b/ui/components/src/Description/Description.data.ts @@ -0,0 +1 @@ +export default {}; diff --git a/ui/components/src/Description/Description.test.ts b/ui/components/src/Description/Description.test.ts index fa475ca7f..633dcd024 100644 --- a/ui/components/src/Description/Description.test.ts +++ b/ui/components/src/Description/Description.test.ts @@ -8,28 +8,36 @@ import { render, act } from '@testing-library/react'; import { renderErr } from '@component-controls/test-renderers'; import * as examples from './Description.stories'; +import data from './Description.data'; describe('Description', () => { const configPath = path.resolve(__dirname, '../../.config'); const config = loadConfigurations(configPath); let renderedExamples: ReturnType = []; act(() => { - renderedExamples = renderDocument(examples, config); + renderedExamples = renderDocument(examples, config, data); }); if (!renderedExamples) { renderErr(); return; } - renderedExamples.forEach(({ name, rendered }) => { + renderedExamples.forEach(({ name, rendered, dataId, values }) => { describe(name, () => { - it('snapshot', () => { - const { asFragment } = render(rendered); - expect(asFragment()).toMatchSnapshot(); - }); - it('accessibility', async () => { - const axeResults = await reactRunDOM(rendered, run); - expect(axeResults).toHaveNoAxeViolations(); - }); + const runTests = () => { + it('snapshot', () => { + const { asFragment } = render(rendered); + expect(asFragment()).toMatchSnapshot(); + }); + it('accessibility', async () => { + const axeResults = await reactRunDOM(rendered, run); + expect(axeResults).toHaveNoAxeViolations(); + }); + }; + if (values) { + describe(dataId, runTests); + } else { + runTests(); + } }); }); }); diff --git a/ui/components/src/Donut/Donut.data.ts b/ui/components/src/Donut/Donut.data.ts new file mode 100644 index 000000000..71db9ad9e --- /dev/null +++ b/ui/components/src/Donut/Donut.data.ts @@ -0,0 +1,44 @@ +export default { + overview: { + '0': { + size: 171, + strokeWidth: 2, + value: 1, + min: 0, + max: 1, + title: 'Sarina Windler', + }, + '1': { + size: 142, + strokeWidth: 2, + value: 1, + min: 0, + max: 1, + title: 'Jeanie Schoen', + }, + '2': { + size: 108, + strokeWidth: 3, + value: 0, + min: 0, + max: 2, + title: 'Ernie Stiedemann', + }, + '3': { + size: 67, + strokeWidth: 3, + value: 1, + min: 0, + max: 1, + title: 'Dorian Daniel', + }, + '4': { + size: 147, + strokeWidth: 2, + value: 0, + min: 1, + max: 1, + title: 'Dr. Johan Kub', + }, + }, +}; diff --git a/ui/components/src/Donut/Donut.test.ts b/ui/components/src/Donut/Donut.test.ts index 7180a0c0e..7cbabfa2e 100644 --- a/ui/components/src/Donut/Donut.test.ts +++ b/ui/components/src/Donut/Donut.test.ts @@ -8,28 +8,36 @@ import { render, act } from '@testing-library/react'; import { renderErr } from '@component-controls/test-renderers'; import * as examples from './Donut.stories'; +import data from './Donut.data'; describe('Donut', () => { const configPath = path.resolve(__dirname, '../../.config'); const config = loadConfigurations(configPath); let renderedExamples: ReturnType = []; act(() => { - renderedExamples = renderDocument(examples, config); + renderedExamples = renderDocument(examples, config, data); }); if (!renderedExamples) { renderErr(); return; } - renderedExamples.forEach(({ name, rendered }) => { + renderedExamples.forEach(({ name, rendered, dataId, values }) => { describe(name, () => { - it('snapshot', () => { - const { asFragment } = render(rendered); - expect(asFragment()).toMatchSnapshot(); - }); - it('accessibility', async () => { - const axeResults = await reactRunDOM(rendered, run); - expect(axeResults).toHaveNoAxeViolations(); - }); + const runTests = () => { + it('snapshot', () => { + const { asFragment } = render(rendered); + expect(asFragment()).toMatchSnapshot(); + }); + it('accessibility', async () => { + const axeResults = await reactRunDOM(rendered, run); + expect(axeResults).toHaveNoAxeViolations(); + }); + }; + if (values) { + describe(dataId, runTests); + } else { + runTests(); + } }); }); }); diff --git a/ui/components/src/Donut/__snapshots__/Donut.test.ts.snap b/ui/components/src/Donut/__snapshots__/Donut.test.ts.snap index ec9bd33c1..bb155a395 100644 --- a/ui/components/src/Donut/__snapshots__/Donut.test.ts.snap +++ b/ui/components/src/Donut/__snapshots__/Donut.test.ts.snap @@ -1,5 +1,210 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP +exports[`Donut overview 0 snapshot 1`] = ` + + .emotion-0 { + box-sizing: border-box; + margin: 0; + min-width: 0; + color: #5c6ac4; +} + + + + Sarina Windler + + + + + +`; + +exports[`Donut overview 1 snapshot 1`] = ` + + .emotion-0 { + box-sizing: border-box; + margin: 0; + min-width: 0; + color: #5c6ac4; +} + + + + Jeanie Schoen + + + + + +`; + +exports[`Donut overview 2 snapshot 1`] = ` + + .emotion-0 { + box-sizing: border-box; + margin: 0; + min-width: 0; + color: #5c6ac4; +} + + + + Ernie Stiedemann + + + + + +`; + +exports[`Donut overview 3 snapshot 1`] = ` + + .emotion-0 { + box-sizing: border-box; + margin: 0; + min-width: 0; + color: #5c6ac4; +} + + + + Dorian Daniel + + + + + +`; + +exports[`Donut overview 4 snapshot 1`] = ` + + .emotion-0 { + box-sizing: border-box; + margin: 0; + min-width: 0; + color: #5c6ac4; +} + + + + Dr. Johan Kub + + + + + +`; + exports[`Donut overview snapshot 1`] = ` .emotion-0 { diff --git a/ui/components/src/ExternalLink/ExternalLink.data.ts b/ui/components/src/ExternalLink/ExternalLink.data.ts new file mode 100644 index 000000000..4e41a332a --- /dev/null +++ b/ui/components/src/ExternalLink/ExternalLink.data.ts @@ -0,0 +1,19 @@ +export default { + overview: { + '0': { + href: 'http://una.org', + }, + '1': { + href: 'http://bryce.name', + }, + '2': { + href: 'https://barbara.net', + }, + '3': { + href: 'http://beatrice.com', + }, + '4': { + href: 'https://jayde.us', + }, + }, +}; diff --git a/ui/components/src/ExternalLink/ExternalLink.test.ts b/ui/components/src/ExternalLink/ExternalLink.test.ts index 0c5aba111..af9a90659 100644 --- a/ui/components/src/ExternalLink/ExternalLink.test.ts +++ b/ui/components/src/ExternalLink/ExternalLink.test.ts @@ -8,28 +8,36 @@ import { render, act } from '@testing-library/react'; import { renderErr } from '@component-controls/test-renderers'; import * as examples from './ExternalLink.stories'; +import data from './ExternalLink.data'; describe('ExternalLink', () => { const configPath = path.resolve(__dirname, '../../.config'); const config = loadConfigurations(configPath); let renderedExamples: ReturnType = []; act(() => { - renderedExamples = renderDocument(examples, config); + renderedExamples = renderDocument(examples, config, data); }); if (!renderedExamples) { renderErr(); return; } - renderedExamples.forEach(({ name, rendered }) => { + renderedExamples.forEach(({ name, rendered, dataId, values }) => { describe(name, () => { - it('snapshot', () => { - const { asFragment } = render(rendered); - expect(asFragment()).toMatchSnapshot(); - }); - it('accessibility', async () => { - const axeResults = await reactRunDOM(rendered, run); - expect(axeResults).toHaveNoAxeViolations(); - }); + const runTests = () => { + it('snapshot', () => { + const { asFragment } = render(rendered); + expect(asFragment()).toMatchSnapshot(); + }); + it('accessibility', async () => { + const axeResults = await reactRunDOM(rendered, run); + expect(axeResults).toHaveNoAxeViolations(); + }); + }; + if (values) { + describe(dataId, runTests); + } else { + runTests(); + } }); }); }); diff --git a/ui/components/src/ExternalLink/__snapshots__/ExternalLink.test.ts.snap b/ui/components/src/ExternalLink/__snapshots__/ExternalLink.test.ts.snap index 8b1f545f6..ddd419bb9 100644 --- a/ui/components/src/ExternalLink/__snapshots__/ExternalLink.test.ts.snap +++ b/ui/components/src/ExternalLink/__snapshots__/ExternalLink.test.ts.snap @@ -1,5 +1,115 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP +exports[`ExternalLink overview 0 snapshot 1`] = ` + + .emotion-0 { + box-sizing: border-box; + margin: 0; + min-width: 0; + color: #5c6ac4; + -webkit-transition: all 0.3s ease-in-out; + transition: all 0.3s ease-in-out; +} + + + http://una.org + + +`; + +exports[`ExternalLink overview 1 snapshot 1`] = ` + + .emotion-0 { + box-sizing: border-box; + margin: 0; + min-width: 0; + color: #5c6ac4; + -webkit-transition: all 0.3s ease-in-out; + transition: all 0.3s ease-in-out; +} + + + http://bryce.name + + +`; + +exports[`ExternalLink overview 2 snapshot 1`] = ` + + .emotion-0 { + box-sizing: border-box; + margin: 0; + min-width: 0; + color: #5c6ac4; + -webkit-transition: all 0.3s ease-in-out; + transition: all 0.3s ease-in-out; +} + + + https://barbara.net + + +`; + +exports[`ExternalLink overview 3 snapshot 1`] = ` + + .emotion-0 { + box-sizing: border-box; + margin: 0; + min-width: 0; + color: #5c6ac4; + -webkit-transition: all 0.3s ease-in-out; + transition: all 0.3s ease-in-out; +} + + + http://beatrice.com + + +`; + +exports[`ExternalLink overview 4 snapshot 1`] = ` + + .emotion-0 { + box-sizing: border-box; + margin: 0; + min-width: 0; + color: #5c6ac4; + -webkit-transition: all 0.3s ease-in-out; + transition: all 0.3s ease-in-out; +} + + + https://jayde.us + + +`; + exports[`ExternalLink overview snapshot 1`] = ` .emotion-0 { diff --git a/ui/components/src/GithubAvatar/GithubAvatar.data.ts b/ui/components/src/GithubAvatar/GithubAvatar.data.ts new file mode 100644 index 000000000..f5602f3f9 --- /dev/null +++ b/ui/components/src/GithubAvatar/GithubAvatar.data.ts @@ -0,0 +1,24 @@ +export default { + overview: { + '0': { + username: 'Geoffrey Bayer', + useremail: "Jeramy O'Hara MD", + }, + '1': { + username: 'Aron Flatley', + useremail: 'Jany Koch', + }, + '2': { + username: 'Lavada Weimann I', + useremail: 'Dale Ebert', + }, + '3': { + username: 'Rickey Bartoletti', + useremail: 'Alexis McGlynn', + }, + '4': { + username: 'Abraham Graham', + useremail: 'Aiyana Abbott', + }, + }, +}; diff --git a/ui/components/src/GithubAvatar/GithubAvatar.test.ts b/ui/components/src/GithubAvatar/GithubAvatar.test.ts index 54970813c..3f206af4d 100644 --- a/ui/components/src/GithubAvatar/GithubAvatar.test.ts +++ b/ui/components/src/GithubAvatar/GithubAvatar.test.ts @@ -8,28 +8,36 @@ import { render, act } from '@testing-library/react'; import { renderErr } from '@component-controls/test-renderers'; import * as examples from './GithubAvatar.stories'; +import data from './GithubAvatar.data'; describe('GithubAvatar', () => { const configPath = path.resolve(__dirname, '../../.config'); const config = loadConfigurations(configPath); let renderedExamples: ReturnType = []; act(() => { - renderedExamples = renderDocument(examples, config); + renderedExamples = renderDocument(examples, config, data); }); if (!renderedExamples) { renderErr(); return; } - renderedExamples.forEach(({ name, rendered }) => { + renderedExamples.forEach(({ name, rendered, dataId, values }) => { describe(name, () => { - it('snapshot', () => { - const { asFragment } = render(rendered); - expect(asFragment()).toMatchSnapshot(); - }); - it('accessibility', async () => { - const axeResults = await reactRunDOM(rendered, run); - expect(axeResults).toHaveNoAxeViolations(); - }); + const runTests = () => { + it('snapshot', () => { + const { asFragment } = render(rendered); + expect(asFragment()).toMatchSnapshot(); + }); + it('accessibility', async () => { + const axeResults = await reactRunDOM(rendered, run); + expect(axeResults).toHaveNoAxeViolations(); + }); + }; + if (values) { + describe(dataId, runTests); + } else { + runTests(); + } }); }); }); diff --git a/ui/components/src/GithubAvatar/__snapshots__/GithubAvatar.test.ts.snap b/ui/components/src/GithubAvatar/__snapshots__/GithubAvatar.test.ts.snap index 545dc3aa5..efd07a011 100644 --- a/ui/components/src/GithubAvatar/__snapshots__/GithubAvatar.test.ts.snap +++ b/ui/components/src/GithubAvatar/__snapshots__/GithubAvatar.test.ts.snap @@ -1,5 +1,235 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP +exports[`GithubAvatar overview 0 snapshot 1`] = ` + + .emotion-0 { + -webkit-transition: 0.2s ease; + transition: 0.2s ease; +} + +.emotion-1 { + max-width: unset; + display: block; + overflow: hidden; + line-height: 1; + width: 48px; + height: 48px; + vertical-align: middle; +} + +.emotion-2 { + box-sizing: border-box; + margin: 0; + min-width: 0; + max-width: 100%; + height: auto; + border-radius: 9999px; +} + +
+
+ avatar of Geoffrey Bayer +
+
+ +`; + +exports[`GithubAvatar overview 1 snapshot 1`] = ` + + .emotion-0 { + -webkit-transition: 0.2s ease; + transition: 0.2s ease; +} + +.emotion-1 { + max-width: unset; + display: block; + overflow: hidden; + line-height: 1; + width: 48px; + height: 48px; + vertical-align: middle; +} + +.emotion-2 { + box-sizing: border-box; + margin: 0; + min-width: 0; + max-width: 100%; + height: auto; + border-radius: 9999px; +} + +
+
+ avatar of Aron Flatley +
+
+ +`; + +exports[`GithubAvatar overview 2 snapshot 1`] = ` + + .emotion-0 { + -webkit-transition: 0.2s ease; + transition: 0.2s ease; +} + +.emotion-1 { + max-width: unset; + display: block; + overflow: hidden; + line-height: 1; + width: 48px; + height: 48px; + vertical-align: middle; +} + +.emotion-2 { + box-sizing: border-box; + margin: 0; + min-width: 0; + max-width: 100%; + height: auto; + border-radius: 9999px; +} + +
+
+ avatar of Lavada Weimann I +
+
+ +`; + +exports[`GithubAvatar overview 3 snapshot 1`] = ` + + .emotion-0 { + -webkit-transition: 0.2s ease; + transition: 0.2s ease; +} + +.emotion-1 { + max-width: unset; + display: block; + overflow: hidden; + line-height: 1; + width: 48px; + height: 48px; + vertical-align: middle; +} + +.emotion-2 { + box-sizing: border-box; + margin: 0; + min-width: 0; + max-width: 100%; + height: auto; + border-radius: 9999px; +} + +
+
+ avatar of Rickey Bartoletti +
+
+ +`; + +exports[`GithubAvatar overview 4 snapshot 1`] = ` + + .emotion-0 { + -webkit-transition: 0.2s ease; + transition: 0.2s ease; +} + +.emotion-1 { + max-width: unset; + display: block; + overflow: hidden; + line-height: 1; + width: 48px; + height: 48px; + vertical-align: middle; +} + +.emotion-2 { + box-sizing: border-box; + margin: 0; + min-width: 0; + max-width: 100%; + height: auto; + border-radius: 9999px; +} + +
+
+ avatar of Abraham Graham +
+
+ +`; + exports[`GithubAvatar overview snapshot 1`] = ` .emotion-0 { diff --git a/ui/components/src/GithubAvatarList/GithubAvatarList.data.ts b/ui/components/src/GithubAvatarList/GithubAvatarList.data.ts new file mode 100644 index 000000000..ff8b4c563 --- /dev/null +++ b/ui/components/src/GithubAvatarList/GithubAvatarList.data.ts @@ -0,0 +1 @@ +export default {}; diff --git a/ui/components/src/GithubAvatarList/GithubAvatarList.test.ts b/ui/components/src/GithubAvatarList/GithubAvatarList.test.ts index 08b2a4ede..e88d8caaf 100644 --- a/ui/components/src/GithubAvatarList/GithubAvatarList.test.ts +++ b/ui/components/src/GithubAvatarList/GithubAvatarList.test.ts @@ -8,28 +8,36 @@ import { render, act } from '@testing-library/react'; import { renderErr } from '@component-controls/test-renderers'; import * as examples from './GithubAvatarList.stories'; +import data from './GithubAvatarList.data'; describe('GithubAvatarList', () => { const configPath = path.resolve(__dirname, '../../.config'); const config = loadConfigurations(configPath); let renderedExamples: ReturnType = []; act(() => { - renderedExamples = renderDocument(examples, config); + renderedExamples = renderDocument(examples, config, data); }); if (!renderedExamples) { renderErr(); return; } - renderedExamples.forEach(({ name, rendered }) => { + renderedExamples.forEach(({ name, rendered, dataId, values }) => { describe(name, () => { - it('snapshot', () => { - const { asFragment } = render(rendered); - expect(asFragment()).toMatchSnapshot(); - }); - it('accessibility', async () => { - const axeResults = await reactRunDOM(rendered, run); - expect(axeResults).toHaveNoAxeViolations(); - }); + const runTests = () => { + it('snapshot', () => { + const { asFragment } = render(rendered); + expect(asFragment()).toMatchSnapshot(); + }); + it('accessibility', async () => { + const axeResults = await reactRunDOM(rendered, run); + expect(axeResults).toHaveNoAxeViolations(); + }); + }; + if (values) { + describe(dataId, runTests); + } else { + runTests(); + } }); }); }); diff --git a/ui/components/src/Header/Header.data.ts b/ui/components/src/Header/Header.data.ts new file mode 100644 index 000000000..ff8b4c563 --- /dev/null +++ b/ui/components/src/Header/Header.data.ts @@ -0,0 +1 @@ +export default {}; diff --git a/ui/components/src/Header/Header.test.ts b/ui/components/src/Header/Header.test.ts index 732cd56b6..5e722889e 100644 --- a/ui/components/src/Header/Header.test.ts +++ b/ui/components/src/Header/Header.test.ts @@ -8,28 +8,36 @@ import { render, act } from '@testing-library/react'; import { renderErr } from '@component-controls/test-renderers'; import * as examples from './Header.stories'; +import data from './Header.data'; describe('Header', () => { const configPath = path.resolve(__dirname, '../../.config'); const config = loadConfigurations(configPath); let renderedExamples: ReturnType = []; act(() => { - renderedExamples = renderDocument(examples, config); + renderedExamples = renderDocument(examples, config, data); }); if (!renderedExamples) { renderErr(); return; } - renderedExamples.forEach(({ name, rendered }) => { + renderedExamples.forEach(({ name, rendered, dataId, values }) => { describe(name, () => { - it('snapshot', () => { - const { asFragment } = render(rendered); - expect(asFragment()).toMatchSnapshot(); - }); - it('accessibility', async () => { - const axeResults = await reactRunDOM(rendered, run); - expect(axeResults).toHaveNoAxeViolations(); - }); + const runTests = () => { + it('snapshot', () => { + const { asFragment } = render(rendered); + expect(asFragment()).toMatchSnapshot(); + }); + it('accessibility', async () => { + const axeResults = await reactRunDOM(rendered, run); + expect(axeResults).toHaveNoAxeViolations(); + }); + }; + if (values) { + describe(dataId, runTests); + } else { + runTests(); + } }); }); }); diff --git a/ui/components/src/HoverBox/HoverBox.data.ts b/ui/components/src/HoverBox/HoverBox.data.ts new file mode 100644 index 000000000..ff8b4c563 --- /dev/null +++ b/ui/components/src/HoverBox/HoverBox.data.ts @@ -0,0 +1 @@ +export default {}; diff --git a/ui/components/src/HoverBox/HoverBox.test.ts b/ui/components/src/HoverBox/HoverBox.test.ts index de0bfe752..04bc8d6fd 100644 --- a/ui/components/src/HoverBox/HoverBox.test.ts +++ b/ui/components/src/HoverBox/HoverBox.test.ts @@ -8,28 +8,36 @@ import { render, act } from '@testing-library/react'; import { renderErr } from '@component-controls/test-renderers'; import * as examples from './HoverBox.stories'; +import data from './HoverBox.data'; describe('HoverBox', () => { const configPath = path.resolve(__dirname, '../../.config'); const config = loadConfigurations(configPath); let renderedExamples: ReturnType = []; act(() => { - renderedExamples = renderDocument(examples, config); + renderedExamples = renderDocument(examples, config, data); }); if (!renderedExamples) { renderErr(); return; } - renderedExamples.forEach(({ name, rendered }) => { + renderedExamples.forEach(({ name, rendered, dataId, values }) => { describe(name, () => { - it('snapshot', () => { - const { asFragment } = render(rendered); - expect(asFragment()).toMatchSnapshot(); - }); - it('accessibility', async () => { - const axeResults = await reactRunDOM(rendered, run); - expect(axeResults).toHaveNoAxeViolations(); - }); + const runTests = () => { + it('snapshot', () => { + const { asFragment } = render(rendered); + expect(asFragment()).toMatchSnapshot(); + }); + it('accessibility', async () => { + const axeResults = await reactRunDOM(rendered, run); + expect(axeResults).toHaveNoAxeViolations(); + }); + }; + if (values) { + describe(dataId, runTests); + } else { + runTests(); + } }); }); }); diff --git a/ui/components/src/InfoTip/InfoTip.data.ts b/ui/components/src/InfoTip/InfoTip.data.ts new file mode 100644 index 000000000..3182b5dc3 --- /dev/null +++ b/ui/components/src/InfoTip/InfoTip.data.ts @@ -0,0 +1,24 @@ +export default { + overview: { + '0': { + children: 'Stanley Nitzsche', + size: 20, + }, + '1': { + children: 'Geovanni Kerluke', + size: 28, + }, + '2': { + children: 'Tristian Zemlak', + size: 22, + }, + '3': { + children: 'Sunny Herzog', + size: 24, + }, + '4': { + children: 'Alfonzo Kuphal', + size: 34, + }, + }, +}; diff --git a/ui/components/src/InfoTip/InfoTip.test.ts b/ui/components/src/InfoTip/InfoTip.test.ts index 469d7281c..9257dfbe9 100644 --- a/ui/components/src/InfoTip/InfoTip.test.ts +++ b/ui/components/src/InfoTip/InfoTip.test.ts @@ -8,28 +8,36 @@ import { render, act } from '@testing-library/react'; import { renderErr } from '@component-controls/test-renderers'; import * as examples from './InfoTip.stories'; +import data from './InfoTip.data'; describe('InfoTip', () => { const configPath = path.resolve(__dirname, '../../.config'); const config = loadConfigurations(configPath); let renderedExamples: ReturnType = []; act(() => { - renderedExamples = renderDocument(examples, config); + renderedExamples = renderDocument(examples, config, data); }); if (!renderedExamples) { renderErr(); return; } - renderedExamples.forEach(({ name, rendered }) => { + renderedExamples.forEach(({ name, rendered, dataId, values }) => { describe(name, () => { - it('snapshot', () => { - const { asFragment } = render(rendered); - expect(asFragment()).toMatchSnapshot(); - }); - it('accessibility', async () => { - const axeResults = await reactRunDOM(rendered, run); - expect(axeResults).toHaveNoAxeViolations(); - }); + const runTests = () => { + it('snapshot', () => { + const { asFragment } = render(rendered); + expect(asFragment()).toMatchSnapshot(); + }); + it('accessibility', async () => { + const axeResults = await reactRunDOM(rendered, run); + expect(axeResults).toHaveNoAxeViolations(); + }); + }; + if (values) { + describe(dataId, runTests); + } else { + runTests(); + } }); }); }); diff --git a/ui/components/src/InfoTip/__snapshots__/InfoTip.test.ts.snap b/ui/components/src/InfoTip/__snapshots__/InfoTip.test.ts.snap index bc896bba1..b5e40d869 100644 --- a/ui/components/src/InfoTip/__snapshots__/InfoTip.test.ts.snap +++ b/ui/components/src/InfoTip/__snapshots__/InfoTip.test.ts.snap @@ -1,5 +1,309 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP +exports[`InfoTip overview 0 snapshot 1`] = ` + + .emotion-0 { + box-sizing: border-box; + margin: 0; + min-width: 0; + -webkit-appearance: none; + -moz-appearance: none; + -ms-appearance: none; + appearance: none; + display: inline-block; + text-align: center; + line-height: inherit; + -webkit-text-decoration: none; + text-decoration: none; + font-size: inherit; + padding-left: 16px; + padding-right: 16px; + padding-top: 8px; + padding-bottom: 8px; + color: white; + background-color: #5c6ac4; + border: 0; + border-radius: 4px; + padding: 0; + line-height: normal; + background-color: transparent; + color: #5c6ac4; + margin-left: 8px; + margin-right: 8px; +} + +
+ +
+ +`; + +exports[`InfoTip overview 1 snapshot 1`] = ` + + .emotion-0 { + box-sizing: border-box; + margin: 0; + min-width: 0; + -webkit-appearance: none; + -moz-appearance: none; + -ms-appearance: none; + appearance: none; + display: inline-block; + text-align: center; + line-height: inherit; + -webkit-text-decoration: none; + text-decoration: none; + font-size: inherit; + padding-left: 16px; + padding-right: 16px; + padding-top: 8px; + padding-bottom: 8px; + color: white; + background-color: #5c6ac4; + border: 0; + border-radius: 4px; + padding: 0; + line-height: normal; + background-color: transparent; + color: #5c6ac4; + margin-left: 8px; + margin-right: 8px; +} + +
+ +
+ +`; + +exports[`InfoTip overview 2 snapshot 1`] = ` + + .emotion-0 { + box-sizing: border-box; + margin: 0; + min-width: 0; + -webkit-appearance: none; + -moz-appearance: none; + -ms-appearance: none; + appearance: none; + display: inline-block; + text-align: center; + line-height: inherit; + -webkit-text-decoration: none; + text-decoration: none; + font-size: inherit; + padding-left: 16px; + padding-right: 16px; + padding-top: 8px; + padding-bottom: 8px; + color: white; + background-color: #5c6ac4; + border: 0; + border-radius: 4px; + padding: 0; + line-height: normal; + background-color: transparent; + color: #5c6ac4; + margin-left: 8px; + margin-right: 8px; +} + +
+ +
+ +`; + +exports[`InfoTip overview 3 snapshot 1`] = ` + + .emotion-0 { + box-sizing: border-box; + margin: 0; + min-width: 0; + -webkit-appearance: none; + -moz-appearance: none; + -ms-appearance: none; + appearance: none; + display: inline-block; + text-align: center; + line-height: inherit; + -webkit-text-decoration: none; + text-decoration: none; + font-size: inherit; + padding-left: 16px; + padding-right: 16px; + padding-top: 8px; + padding-bottom: 8px; + color: white; + background-color: #5c6ac4; + border: 0; + border-radius: 4px; + padding: 0; + line-height: normal; + background-color: transparent; + color: #5c6ac4; + margin-left: 8px; + margin-right: 8px; +} + +
+ +
+ +`; + +exports[`InfoTip overview 4 snapshot 1`] = ` + + .emotion-0 { + box-sizing: border-box; + margin: 0; + min-width: 0; + -webkit-appearance: none; + -moz-appearance: none; + -ms-appearance: none; + appearance: none; + display: inline-block; + text-align: center; + line-height: inherit; + -webkit-text-decoration: none; + text-decoration: none; + font-size: inherit; + padding-left: 16px; + padding-right: 16px; + padding-top: 8px; + padding-bottom: 8px; + color: white; + background-color: #5c6ac4; + border: 0; + border-radius: 4px; + padding: 0; + line-height: normal; + background-color: transparent; + color: #5c6ac4; + margin-left: 8px; + margin-right: 8px; +} + +
+ +
+ +`; + exports[`InfoTip overview snapshot 1`] = ` .emotion-0 { diff --git a/ui/components/src/Link/Link.data.ts b/ui/components/src/Link/Link.data.ts new file mode 100644 index 000000000..ff8b4c563 --- /dev/null +++ b/ui/components/src/Link/Link.data.ts @@ -0,0 +1 @@ +export default {}; diff --git a/ui/components/src/Link/Link.test.ts b/ui/components/src/Link/Link.test.ts index 33835b3d8..631764b60 100644 --- a/ui/components/src/Link/Link.test.ts +++ b/ui/components/src/Link/Link.test.ts @@ -8,28 +8,36 @@ import { render, act } from '@testing-library/react'; import { renderErr } from '@component-controls/test-renderers'; import * as examples from './Link.stories'; +import data from './Link.data'; describe('Link', () => { const configPath = path.resolve(__dirname, '../../.config'); const config = loadConfigurations(configPath); let renderedExamples: ReturnType = []; act(() => { - renderedExamples = renderDocument(examples, config); + renderedExamples = renderDocument(examples, config, data); }); if (!renderedExamples) { renderErr(); return; } - renderedExamples.forEach(({ name, rendered }) => { + renderedExamples.forEach(({ name, rendered, dataId, values }) => { describe(name, () => { - it('snapshot', () => { - const { asFragment } = render(rendered); - expect(asFragment()).toMatchSnapshot(); - }); - it('accessibility', async () => { - const axeResults = await reactRunDOM(rendered, run); - expect(axeResults).toHaveNoAxeViolations(); - }); + const runTests = () => { + it('snapshot', () => { + const { asFragment } = render(rendered); + expect(asFragment()).toMatchSnapshot(); + }); + it('accessibility', async () => { + const axeResults = await reactRunDOM(rendered, run); + expect(axeResults).toHaveNoAxeViolations(); + }); + }; + if (values) { + describe(dataId, runTests); + } else { + runTests(); + } }); }); }); diff --git a/ui/components/src/LinkHeading/LinkHeading.data.ts b/ui/components/src/LinkHeading/LinkHeading.data.ts new file mode 100644 index 000000000..c7e1130dc --- /dev/null +++ b/ui/components/src/LinkHeading/LinkHeading.data.ts @@ -0,0 +1,9 @@ +export default { + overview: { + '0': {}, + '1': {}, + '2': {}, + '3': {}, + '4': {}, + }, +}; diff --git a/ui/components/src/LinkHeading/LinkHeading.test.ts b/ui/components/src/LinkHeading/LinkHeading.test.ts index 252f1371f..2ced738bc 100644 --- a/ui/components/src/LinkHeading/LinkHeading.test.ts +++ b/ui/components/src/LinkHeading/LinkHeading.test.ts @@ -8,28 +8,36 @@ import { render, act } from '@testing-library/react'; import { renderErr } from '@component-controls/test-renderers'; import * as examples from './LinkHeading.stories'; +import data from './LinkHeading.data'; describe('LinkHeading', () => { const configPath = path.resolve(__dirname, '../../.config'); const config = loadConfigurations(configPath); let renderedExamples: ReturnType = []; act(() => { - renderedExamples = renderDocument(examples, config); + renderedExamples = renderDocument(examples, config, data); }); if (!renderedExamples) { renderErr(); return; } - renderedExamples.forEach(({ name, rendered }) => { + renderedExamples.forEach(({ name, rendered, dataId, values }) => { describe(name, () => { - it('snapshot', () => { - const { asFragment } = render(rendered); - expect(asFragment()).toMatchSnapshot(); - }); - it('accessibility', async () => { - const axeResults = await reactRunDOM(rendered, run); - expect(axeResults).toHaveNoAxeViolations(); - }); + const runTests = () => { + it('snapshot', () => { + const { asFragment } = render(rendered); + expect(asFragment()).toMatchSnapshot(); + }); + it('accessibility', async () => { + const axeResults = await reactRunDOM(rendered, run); + expect(axeResults).toHaveNoAxeViolations(); + }); + }; + if (values) { + describe(dataId, runTests); + } else { + runTests(); + } }); }); }); diff --git a/ui/components/src/LinkHeading/__snapshots__/LinkHeading.test.ts.snap b/ui/components/src/LinkHeading/__snapshots__/LinkHeading.test.ts.snap index 91358a26f..c77a7be73 100644 --- a/ui/components/src/LinkHeading/__snapshots__/LinkHeading.test.ts.snap +++ b/ui/components/src/LinkHeading/__snapshots__/LinkHeading.test.ts.snap @@ -1,5 +1,565 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP +exports[`LinkHeading overview 0 snapshot 1`] = ` + + .emotion-0 { + box-sizing: border-box; + margin: 0; + min-width: 0; + width: 100%; + scroll-margin-top: 5rem; +} + +.emotion-1 { + box-sizing: border-box; + margin: 0; + min-width: 0; + position: relative; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +.emotion-1:hover a { + visibility: visible; +} + +.emotion-2 { + box-sizing: border-box; + margin: 0; + min-width: 0; + position: absolute; + margin: auto; + top: 0; + bottom: 0; + height: 32px; + visibility: hidden; + padding-right: 4px; + left: -32px; +} + +.emotion-2:hover { + visibility: visible; +} + +.emotion-3 { + box-sizing: border-box; + margin: 0; + min-width: 0; + font-family: medium-content-title-font,Georgia,Cambria,"Times New Roman",Times,serif; + font-weight: 600; + line-height: 1.25; + font-family: medium-content-title-font,Georgia,Cambria,"Times New Roman",Times,serif; + line-height: 1.25; + font-weight: 600; + font-size: 42px; + margin-top: 32px; + margin-bottom: 32px; +} + +
+
+
+ + + +

+ LinkHeading text +

+
+
+
+ +`; + +exports[`LinkHeading overview 1 snapshot 1`] = ` + + .emotion-0 { + box-sizing: border-box; + margin: 0; + min-width: 0; + width: 100%; + scroll-margin-top: 5rem; +} + +.emotion-1 { + box-sizing: border-box; + margin: 0; + min-width: 0; + position: relative; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +.emotion-1:hover a { + visibility: visible; +} + +.emotion-2 { + box-sizing: border-box; + margin: 0; + min-width: 0; + position: absolute; + margin: auto; + top: 0; + bottom: 0; + height: 32px; + visibility: hidden; + padding-right: 4px; + left: -32px; +} + +.emotion-2:hover { + visibility: visible; +} + +.emotion-3 { + box-sizing: border-box; + margin: 0; + min-width: 0; + font-family: medium-content-title-font,Georgia,Cambria,"Times New Roman",Times,serif; + font-weight: 600; + line-height: 1.25; + font-family: medium-content-title-font,Georgia,Cambria,"Times New Roman",Times,serif; + line-height: 1.25; + font-weight: 600; + font-size: 42px; + margin-top: 32px; + margin-bottom: 32px; +} + +
+
+
+ + + +

+ LinkHeading text +

+
+
+
+ +`; + +exports[`LinkHeading overview 2 snapshot 1`] = ` + + .emotion-0 { + box-sizing: border-box; + margin: 0; + min-width: 0; + width: 100%; + scroll-margin-top: 5rem; +} + +.emotion-1 { + box-sizing: border-box; + margin: 0; + min-width: 0; + position: relative; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +.emotion-1:hover a { + visibility: visible; +} + +.emotion-2 { + box-sizing: border-box; + margin: 0; + min-width: 0; + position: absolute; + margin: auto; + top: 0; + bottom: 0; + height: 32px; + visibility: hidden; + padding-right: 4px; + left: -32px; +} + +.emotion-2:hover { + visibility: visible; +} + +.emotion-3 { + box-sizing: border-box; + margin: 0; + min-width: 0; + font-family: medium-content-title-font,Georgia,Cambria,"Times New Roman",Times,serif; + font-weight: 600; + line-height: 1.25; + font-family: medium-content-title-font,Georgia,Cambria,"Times New Roman",Times,serif; + line-height: 1.25; + font-weight: 600; + font-size: 42px; + margin-top: 32px; + margin-bottom: 32px; +} + +
+
+
+ + + +

+ LinkHeading text +

+
+
+
+ +`; + +exports[`LinkHeading overview 3 snapshot 1`] = ` + + .emotion-0 { + box-sizing: border-box; + margin: 0; + min-width: 0; + width: 100%; + scroll-margin-top: 5rem; +} + +.emotion-1 { + box-sizing: border-box; + margin: 0; + min-width: 0; + position: relative; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +.emotion-1:hover a { + visibility: visible; +} + +.emotion-2 { + box-sizing: border-box; + margin: 0; + min-width: 0; + position: absolute; + margin: auto; + top: 0; + bottom: 0; + height: 32px; + visibility: hidden; + padding-right: 4px; + left: -32px; +} + +.emotion-2:hover { + visibility: visible; +} + +.emotion-3 { + box-sizing: border-box; + margin: 0; + min-width: 0; + font-family: medium-content-title-font,Georgia,Cambria,"Times New Roman",Times,serif; + font-weight: 600; + line-height: 1.25; + font-family: medium-content-title-font,Georgia,Cambria,"Times New Roman",Times,serif; + line-height: 1.25; + font-weight: 600; + font-size: 42px; + margin-top: 32px; + margin-bottom: 32px; +} + +
+
+
+ + + +

+ LinkHeading text +

+
+
+
+ +`; + +exports[`LinkHeading overview 4 snapshot 1`] = ` + + .emotion-0 { + box-sizing: border-box; + margin: 0; + min-width: 0; + width: 100%; + scroll-margin-top: 5rem; +} + +.emotion-1 { + box-sizing: border-box; + margin: 0; + min-width: 0; + position: relative; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +.emotion-1:hover a { + visibility: visible; +} + +.emotion-2 { + box-sizing: border-box; + margin: 0; + min-width: 0; + position: absolute; + margin: auto; + top: 0; + bottom: 0; + height: 32px; + visibility: hidden; + padding-right: 4px; + left: -32px; +} + +.emotion-2:hover { + visibility: visible; +} + +.emotion-3 { + box-sizing: border-box; + margin: 0; + min-width: 0; + font-family: medium-content-title-font,Georgia,Cambria,"Times New Roman",Times,serif; + font-weight: 600; + line-height: 1.25; + font-family: medium-content-title-font,Georgia,Cambria,"Times New Roman",Times,serif; + line-height: 1.25; + font-weight: 600; + font-size: 42px; + margin-top: 32px; + margin-bottom: 32px; +} + +
+
+
+ + + +

+ LinkHeading text +

+
+
+
+ +`; + exports[`LinkHeading overview snapshot 1`] = ` .emotion-0 { diff --git a/ui/components/src/Markdown/Markdown.data.ts b/ui/components/src/Markdown/Markdown.data.ts new file mode 100644 index 000000000..ff8b4c563 --- /dev/null +++ b/ui/components/src/Markdown/Markdown.data.ts @@ -0,0 +1 @@ +export default {}; diff --git a/ui/components/src/Markdown/Markdown.test.ts b/ui/components/src/Markdown/Markdown.test.ts index 471bb812c..e587aee39 100644 --- a/ui/components/src/Markdown/Markdown.test.ts +++ b/ui/components/src/Markdown/Markdown.test.ts @@ -8,28 +8,36 @@ import { render, act } from '@testing-library/react'; import { renderErr } from '@component-controls/test-renderers'; import * as examples from './Markdown.stories'; +import data from './Markdown.data'; describe('Markdown', () => { const configPath = path.resolve(__dirname, '../../.config'); const config = loadConfigurations(configPath); let renderedExamples: ReturnType = []; act(() => { - renderedExamples = renderDocument(examples, config); + renderedExamples = renderDocument(examples, config, data); }); if (!renderedExamples) { renderErr(); return; } - renderedExamples.forEach(({ name, rendered }) => { + renderedExamples.forEach(({ name, rendered, dataId, values }) => { describe(name, () => { - it('snapshot', () => { - const { asFragment } = render(rendered); - expect(asFragment()).toMatchSnapshot(); - }); - it('accessibility', async () => { - const axeResults = await reactRunDOM(rendered, run); - expect(axeResults).toHaveNoAxeViolations(); - }); + const runTests = () => { + it('snapshot', () => { + const { asFragment } = render(rendered); + expect(asFragment()).toMatchSnapshot(); + }); + it('accessibility', async () => { + const axeResults = await reactRunDOM(rendered, run); + expect(axeResults).toHaveNoAxeViolations(); + }); + }; + if (values) { + describe(dataId, runTests); + } else { + runTests(); + } }); }); }); diff --git a/ui/components/src/Multiselect/Multiselect.data.ts b/ui/components/src/Multiselect/Multiselect.data.ts new file mode 100644 index 000000000..ff8b4c563 --- /dev/null +++ b/ui/components/src/Multiselect/Multiselect.data.ts @@ -0,0 +1 @@ +export default {}; diff --git a/ui/components/src/Multiselect/Multiselect.test.ts b/ui/components/src/Multiselect/Multiselect.test.ts index 216aa6ee0..a41a7064c 100644 --- a/ui/components/src/Multiselect/Multiselect.test.ts +++ b/ui/components/src/Multiselect/Multiselect.test.ts @@ -8,28 +8,36 @@ import { render, act } from '@testing-library/react'; import { renderErr } from '@component-controls/test-renderers'; import * as examples from './Multiselect.stories'; +import data from './Multiselect.data'; describe('Multiselect', () => { const configPath = path.resolve(__dirname, '../../.config'); const config = loadConfigurations(configPath); let renderedExamples: ReturnType = []; act(() => { - renderedExamples = renderDocument(examples, config); + renderedExamples = renderDocument(examples, config, data); }); if (!renderedExamples) { renderErr(); return; } - renderedExamples.forEach(({ name, rendered }) => { + renderedExamples.forEach(({ name, rendered, dataId, values }) => { describe(name, () => { - it('snapshot', () => { - const { asFragment } = render(rendered); - expect(asFragment()).toMatchSnapshot(); - }); - it('accessibility', async () => { - const axeResults = await reactRunDOM(rendered, run); - expect(axeResults).toHaveNoAxeViolations(); - }); + const runTests = () => { + it('snapshot', () => { + const { asFragment } = render(rendered); + expect(asFragment()).toMatchSnapshot(); + }); + it('accessibility', async () => { + const axeResults = await reactRunDOM(rendered, run); + expect(axeResults).toHaveNoAxeViolations(); + }); + }; + if (values) { + describe(dataId, runTests); + } else { + runTests(); + } }); }); }); diff --git a/ui/components/src/Pagination/Pagination.data.ts b/ui/components/src/Pagination/Pagination.data.ts new file mode 100644 index 000000000..ff8b4c563 --- /dev/null +++ b/ui/components/src/Pagination/Pagination.data.ts @@ -0,0 +1 @@ +export default {}; diff --git a/ui/components/src/Pagination/Pagination.test.ts b/ui/components/src/Pagination/Pagination.test.ts index 18c77d904..ead9b2011 100644 --- a/ui/components/src/Pagination/Pagination.test.ts +++ b/ui/components/src/Pagination/Pagination.test.ts @@ -8,28 +8,36 @@ import { render, act } from '@testing-library/react'; import { renderErr } from '@component-controls/test-renderers'; import * as examples from './Pagination.stories'; +import data from './Pagination.data'; describe('Pagination', () => { const configPath = path.resolve(__dirname, '../../.config'); const config = loadConfigurations(configPath); let renderedExamples: ReturnType = []; act(() => { - renderedExamples = renderDocument(examples, config); + renderedExamples = renderDocument(examples, config, data); }); if (!renderedExamples) { renderErr(); return; } - renderedExamples.forEach(({ name, rendered }) => { + renderedExamples.forEach(({ name, rendered, dataId, values }) => { describe(name, () => { - it('snapshot', () => { - const { asFragment } = render(rendered); - expect(asFragment()).toMatchSnapshot(); - }); - it('accessibility', async () => { - const axeResults = await reactRunDOM(rendered, run); - expect(axeResults).toHaveNoAxeViolations(); - }); + const runTests = () => { + it('snapshot', () => { + const { asFragment } = render(rendered); + expect(asFragment()).toMatchSnapshot(); + }); + it('accessibility', async () => { + const axeResults = await reactRunDOM(rendered, run); + expect(axeResults).toHaveNoAxeViolations(); + }); + }; + if (values) { + describe(dataId, runTests); + } else { + runTests(); + } }); }); }); diff --git a/ui/components/src/PanelContainer/PanelContainer.data.ts b/ui/components/src/PanelContainer/PanelContainer.data.ts new file mode 100644 index 000000000..ff8b4c563 --- /dev/null +++ b/ui/components/src/PanelContainer/PanelContainer.data.ts @@ -0,0 +1 @@ +export default {}; diff --git a/ui/components/src/PanelContainer/PanelContainer.test.ts b/ui/components/src/PanelContainer/PanelContainer.test.ts index dec42e91f..025f94f98 100644 --- a/ui/components/src/PanelContainer/PanelContainer.test.ts +++ b/ui/components/src/PanelContainer/PanelContainer.test.ts @@ -8,28 +8,36 @@ import { render, act } from '@testing-library/react'; import { renderErr } from '@component-controls/test-renderers'; import * as examples from './PanelContainer.stories'; +import data from './PanelContainer.data'; describe('PanelContainer', () => { const configPath = path.resolve(__dirname, '../../.config'); const config = loadConfigurations(configPath); let renderedExamples: ReturnType = []; act(() => { - renderedExamples = renderDocument(examples, config); + renderedExamples = renderDocument(examples, config, data); }); if (!renderedExamples) { renderErr(); return; } - renderedExamples.forEach(({ name, rendered }) => { + renderedExamples.forEach(({ name, rendered, dataId, values }) => { describe(name, () => { - it('snapshot', () => { - const { asFragment } = render(rendered); - expect(asFragment()).toMatchSnapshot(); - }); - it('accessibility', async () => { - const axeResults = await reactRunDOM(rendered, run); - expect(axeResults).toHaveNoAxeViolations(); - }); + const runTests = () => { + it('snapshot', () => { + const { asFragment } = render(rendered); + expect(asFragment()).toMatchSnapshot(); + }); + it('accessibility', async () => { + const axeResults = await reactRunDOM(rendered, run); + expect(axeResults).toHaveNoAxeViolations(); + }); + }; + if (values) { + describe(dataId, runTests); + } else { + runTests(); + } }); }); }); diff --git a/ui/components/src/Popover/Popover.data.ts b/ui/components/src/Popover/Popover.data.ts new file mode 100644 index 000000000..c7e1130dc --- /dev/null +++ b/ui/components/src/Popover/Popover.data.ts @@ -0,0 +1,9 @@ +export default { + overview: { + '0': {}, + '1': {}, + '2': {}, + '3': {}, + '4': {}, + }, +}; diff --git a/ui/components/src/Popover/Popover.test.ts b/ui/components/src/Popover/Popover.test.ts index 390aee00f..d31326e24 100644 --- a/ui/components/src/Popover/Popover.test.ts +++ b/ui/components/src/Popover/Popover.test.ts @@ -8,28 +8,36 @@ import { render, act } from '@testing-library/react'; import { renderErr } from '@component-controls/test-renderers'; import * as examples from './Popover.stories'; +import data from './Popover.data'; describe('Popover', () => { const configPath = path.resolve(__dirname, '../../.config'); const config = loadConfigurations(configPath); let renderedExamples: ReturnType = []; act(() => { - renderedExamples = renderDocument(examples, config); + renderedExamples = renderDocument(examples, config, data); }); if (!renderedExamples) { renderErr(); return; } - renderedExamples.forEach(({ name, rendered }) => { + renderedExamples.forEach(({ name, rendered, dataId, values }) => { describe(name, () => { - it('snapshot', () => { - const { asFragment } = render(rendered); - expect(asFragment()).toMatchSnapshot(); - }); - it('accessibility', async () => { - const axeResults = await reactRunDOM(rendered, run); - expect(axeResults).toHaveNoAxeViolations(); - }); + const runTests = () => { + it('snapshot', () => { + const { asFragment } = render(rendered); + expect(asFragment()).toMatchSnapshot(); + }); + it('accessibility', async () => { + const axeResults = await reactRunDOM(rendered, run); + expect(axeResults).toHaveNoAxeViolations(); + }); + }; + if (values) { + describe(dataId, runTests); + } else { + runTests(); + } }); }); }); diff --git a/ui/components/src/Popover/__snapshots__/Popover.test.ts.snap b/ui/components/src/Popover/__snapshots__/Popover.test.ts.snap index ee0d2f2aa..7d6858a5e 100644 --- a/ui/components/src/Popover/__snapshots__/Popover.test.ts.snap +++ b/ui/components/src/Popover/__snapshots__/Popover.test.ts.snap @@ -1,5 +1,200 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP +exports[`Popover overview 0 snapshot 1`] = ` + + .emotion-0 { + box-sizing: border-box; + margin: 0; + min-width: 0; + -webkit-appearance: none; + -moz-appearance: none; + -ms-appearance: none; + appearance: none; + display: inline-block; + text-align: center; + line-height: inherit; + -webkit-text-decoration: none; + text-decoration: none; + font-size: inherit; + padding-left: 16px; + padding-right: 16px; + padding-top: 8px; + padding-bottom: 8px; + color: white; + background-color: #5c6ac4; + border: 0; + border-radius: 4px; + background-color: #3B817D; +} + +
+ +
+ +`; + +exports[`Popover overview 1 snapshot 1`] = ` + + .emotion-0 { + box-sizing: border-box; + margin: 0; + min-width: 0; + -webkit-appearance: none; + -moz-appearance: none; + -ms-appearance: none; + appearance: none; + display: inline-block; + text-align: center; + line-height: inherit; + -webkit-text-decoration: none; + text-decoration: none; + font-size: inherit; + padding-left: 16px; + padding-right: 16px; + padding-top: 8px; + padding-bottom: 8px; + color: white; + background-color: #5c6ac4; + border: 0; + border-radius: 4px; + background-color: #3B817D; +} + +
+ +
+ +`; + +exports[`Popover overview 2 snapshot 1`] = ` + + .emotion-0 { + box-sizing: border-box; + margin: 0; + min-width: 0; + -webkit-appearance: none; + -moz-appearance: none; + -ms-appearance: none; + appearance: none; + display: inline-block; + text-align: center; + line-height: inherit; + -webkit-text-decoration: none; + text-decoration: none; + font-size: inherit; + padding-left: 16px; + padding-right: 16px; + padding-top: 8px; + padding-bottom: 8px; + color: white; + background-color: #5c6ac4; + border: 0; + border-radius: 4px; + background-color: #3B817D; +} + +
+ +
+ +`; + +exports[`Popover overview 3 snapshot 1`] = ` + + .emotion-0 { + box-sizing: border-box; + margin: 0; + min-width: 0; + -webkit-appearance: none; + -moz-appearance: none; + -ms-appearance: none; + appearance: none; + display: inline-block; + text-align: center; + line-height: inherit; + -webkit-text-decoration: none; + text-decoration: none; + font-size: inherit; + padding-left: 16px; + padding-right: 16px; + padding-top: 8px; + padding-bottom: 8px; + color: white; + background-color: #5c6ac4; + border: 0; + border-radius: 4px; + background-color: #3B817D; +} + +
+ +
+ +`; + +exports[`Popover overview 4 snapshot 1`] = ` + + .emotion-0 { + box-sizing: border-box; + margin: 0; + min-width: 0; + -webkit-appearance: none; + -moz-appearance: none; + -ms-appearance: none; + appearance: none; + display: inline-block; + text-align: center; + line-height: inherit; + -webkit-text-decoration: none; + text-decoration: none; + font-size: inherit; + padding-left: 16px; + padding-right: 16px; + padding-top: 8px; + padding-bottom: 8px; + color: white; + background-color: #5c6ac4; + border: 0; + border-radius: 4px; + background-color: #3B817D; +} + +
+ +
+ +`; + exports[`Popover overview snapshot 1`] = ` .emotion-0 { diff --git a/ui/components/src/ProgressIndicator/ProgressIndicator.data.ts b/ui/components/src/ProgressIndicator/ProgressIndicator.data.ts new file mode 100644 index 000000000..3e1382fe9 --- /dev/null +++ b/ui/components/src/ProgressIndicator/ProgressIndicator.data.ts @@ -0,0 +1,24 @@ +export default { + overview: { + '0': { + max: 10, + value: 5, + }, + '1': { + max: 8, + value: 4, + }, + '2': { + max: 9, + value: 5, + }, + '3': { + max: 10, + value: 5, + }, + '4': { + max: 20, + value: 5, + }, + }, +}; diff --git a/ui/components/src/ProgressIndicator/ProgressIndicator.test.ts b/ui/components/src/ProgressIndicator/ProgressIndicator.test.ts index f47b0952e..ca966d112 100644 --- a/ui/components/src/ProgressIndicator/ProgressIndicator.test.ts +++ b/ui/components/src/ProgressIndicator/ProgressIndicator.test.ts @@ -8,28 +8,36 @@ import { render, act } from '@testing-library/react'; import { renderErr } from '@component-controls/test-renderers'; import * as examples from './ProgressIndicator.stories'; +import data from './ProgressIndicator.data'; describe('ProgressIndicator', () => { const configPath = path.resolve(__dirname, '../../.config'); const config = loadConfigurations(configPath); let renderedExamples: ReturnType = []; act(() => { - renderedExamples = renderDocument(examples, config); + renderedExamples = renderDocument(examples, config, data); }); if (!renderedExamples) { renderErr(); return; } - renderedExamples.forEach(({ name, rendered }) => { + renderedExamples.forEach(({ name, rendered, dataId, values }) => { describe(name, () => { - it('snapshot', () => { - const { asFragment } = render(rendered); - expect(asFragment()).toMatchSnapshot(); - }); - it('accessibility', async () => { - const axeResults = await reactRunDOM(rendered, run); - expect(axeResults).toHaveNoAxeViolations(); - }); + const runTests = () => { + it('snapshot', () => { + const { asFragment } = render(rendered); + expect(asFragment()).toMatchSnapshot(); + }); + it('accessibility', async () => { + const axeResults = await reactRunDOM(rendered, run); + expect(axeResults).toHaveNoAxeViolations(); + }); + }; + if (values) { + describe(dataId, runTests); + } else { + runTests(); + } }); }); }); diff --git a/ui/components/src/ProgressIndicator/__snapshots__/ProgressIndicator.test.ts.snap b/ui/components/src/ProgressIndicator/__snapshots__/ProgressIndicator.test.ts.snap index 923b37add..f90e16db5 100644 --- a/ui/components/src/ProgressIndicator/__snapshots__/ProgressIndicator.test.ts.snap +++ b/ui/components/src/ProgressIndicator/__snapshots__/ProgressIndicator.test.ts.snap @@ -1,5 +1,405 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP +exports[`ProgressIndicator overview 0 snapshot 1`] = ` + + .emotion-0 { + box-sizing: border-box; + margin: 0; + min-width: 0; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +.emotion-1 { + box-sizing: border-box; + margin: 0; + min-width: 0; + display: block; + width: 100%; + height: 4px; + margin: 0; + padding: 0; + overflow: hidden; + -webkit-appearance: none; + -moz-appearance: none; + -ms-appearance: none; + appearance: none; + color: #5c6ac4; + background-color: #f6f6f6; + border-radius: 9999px; + border: none; + color: red; +} + +.emotion-1::-webkit-progress-bar { + background-color: transparent; +} + +.emotion-1::-webkit-progress-value { + background-color: currentcolor; +} + +.emotion-1::-moz-progress-bar { + background-color: currentcolor; +} + +.emotion-2 { + box-sizing: border-box; + margin: 0; + min-width: 0; + font-size: 12px; +} + +
+
+ + + 5 + +
+
+ +`; + +exports[`ProgressIndicator overview 1 snapshot 1`] = ` + + .emotion-0 { + box-sizing: border-box; + margin: 0; + min-width: 0; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +.emotion-1 { + box-sizing: border-box; + margin: 0; + min-width: 0; + display: block; + width: 100%; + height: 4px; + margin: 0; + padding: 0; + overflow: hidden; + -webkit-appearance: none; + -moz-appearance: none; + -ms-appearance: none; + appearance: none; + color: #5c6ac4; + background-color: #f6f6f6; + border-radius: 9999px; + border: none; + color: red; +} + +.emotion-1::-webkit-progress-bar { + background-color: transparent; +} + +.emotion-1::-webkit-progress-value { + background-color: currentcolor; +} + +.emotion-1::-moz-progress-bar { + background-color: currentcolor; +} + +.emotion-2 { + box-sizing: border-box; + margin: 0; + min-width: 0; + font-size: 12px; +} + +
+
+ + + 4 + +
+
+ +`; + +exports[`ProgressIndicator overview 2 snapshot 1`] = ` + + .emotion-0 { + box-sizing: border-box; + margin: 0; + min-width: 0; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +.emotion-1 { + box-sizing: border-box; + margin: 0; + min-width: 0; + display: block; + width: 100%; + height: 4px; + margin: 0; + padding: 0; + overflow: hidden; + -webkit-appearance: none; + -moz-appearance: none; + -ms-appearance: none; + appearance: none; + color: #5c6ac4; + background-color: #f6f6f6; + border-radius: 9999px; + border: none; + color: red; +} + +.emotion-1::-webkit-progress-bar { + background-color: transparent; +} + +.emotion-1::-webkit-progress-value { + background-color: currentcolor; +} + +.emotion-1::-moz-progress-bar { + background-color: currentcolor; +} + +.emotion-2 { + box-sizing: border-box; + margin: 0; + min-width: 0; + font-size: 12px; +} + +
+
+ + + 5 + +
+
+ +`; + +exports[`ProgressIndicator overview 3 snapshot 1`] = ` + + .emotion-0 { + box-sizing: border-box; + margin: 0; + min-width: 0; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +.emotion-1 { + box-sizing: border-box; + margin: 0; + min-width: 0; + display: block; + width: 100%; + height: 4px; + margin: 0; + padding: 0; + overflow: hidden; + -webkit-appearance: none; + -moz-appearance: none; + -ms-appearance: none; + appearance: none; + color: #5c6ac4; + background-color: #f6f6f6; + border-radius: 9999px; + border: none; + color: red; +} + +.emotion-1::-webkit-progress-bar { + background-color: transparent; +} + +.emotion-1::-webkit-progress-value { + background-color: currentcolor; +} + +.emotion-1::-moz-progress-bar { + background-color: currentcolor; +} + +.emotion-2 { + box-sizing: border-box; + margin: 0; + min-width: 0; + font-size: 12px; +} + +
+
+ + + 5 + +
+
+ +`; + +exports[`ProgressIndicator overview 4 snapshot 1`] = ` + + .emotion-0 { + box-sizing: border-box; + margin: 0; + min-width: 0; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +.emotion-1 { + box-sizing: border-box; + margin: 0; + min-width: 0; + display: block; + width: 100%; + height: 4px; + margin: 0; + padding: 0; + overflow: hidden; + -webkit-appearance: none; + -moz-appearance: none; + -ms-appearance: none; + appearance: none; + color: #5c6ac4; + background-color: #f6f6f6; + border-radius: 9999px; + border: none; + color: red; +} + +.emotion-1::-webkit-progress-bar { + background-color: transparent; +} + +.emotion-1::-webkit-progress-value { + background-color: currentcolor; +} + +.emotion-1::-moz-progress-bar { + background-color: currentcolor; +} + +.emotion-2 { + box-sizing: border-box; + margin: 0; + min-width: 0; + font-size: 12px; +} + +
+
+ + + 5 + +
+
+ +`; + exports[`ProgressIndicator overview snapshot 1`] = ` .emotion-0 { diff --git a/ui/components/src/SearchInput/SearchInput.data.ts b/ui/components/src/SearchInput/SearchInput.data.ts new file mode 100644 index 000000000..ff8b4c563 --- /dev/null +++ b/ui/components/src/SearchInput/SearchInput.data.ts @@ -0,0 +1 @@ +export default {}; diff --git a/ui/components/src/SearchInput/SearchInput.test.ts b/ui/components/src/SearchInput/SearchInput.test.ts index 7e379dad1..b9a924f70 100644 --- a/ui/components/src/SearchInput/SearchInput.test.ts +++ b/ui/components/src/SearchInput/SearchInput.test.ts @@ -8,28 +8,36 @@ import { render, act } from '@testing-library/react'; import { renderErr } from '@component-controls/test-renderers'; import * as examples from './SearchInput.stories'; +import data from './SearchInput.data'; describe('SearchInput', () => { const configPath = path.resolve(__dirname, '../../.config'); const config = loadConfigurations(configPath); let renderedExamples: ReturnType = []; act(() => { - renderedExamples = renderDocument(examples, config); + renderedExamples = renderDocument(examples, config, data); }); if (!renderedExamples) { renderErr(); return; } - renderedExamples.forEach(({ name, rendered }) => { + renderedExamples.forEach(({ name, rendered, dataId, values }) => { describe(name, () => { - it('snapshot', () => { - const { asFragment } = render(rendered); - expect(asFragment()).toMatchSnapshot(); - }); - it('accessibility', async () => { - const axeResults = await reactRunDOM(rendered, run); - expect(axeResults).toHaveNoAxeViolations(); - }); + const runTests = () => { + it('snapshot', () => { + const { asFragment } = render(rendered); + expect(asFragment()).toMatchSnapshot(); + }); + it('accessibility', async () => { + const axeResults = await reactRunDOM(rendered, run); + expect(axeResults).toHaveNoAxeViolations(); + }); + }; + if (values) { + describe(dataId, runTests); + } else { + runTests(); + } }); }); }); diff --git a/ui/components/src/Shield/Shield.data.ts b/ui/components/src/Shield/Shield.data.ts new file mode 100644 index 000000000..30217fab7 --- /dev/null +++ b/ui/components/src/Shield/Shield.data.ts @@ -0,0 +1,26 @@ +export default { + overview: { + '0': { + label: 'Barry Harris', + }, + '1': { + label: 'Dakota Lang I', + }, + '2': { + label: 'Rollin Hand', + }, + '3': { + label: 'Damaris Ullrich', + }, + '4': { + label: 'Kelli Sipes', + }, + }, + themeColor: { + '0': {}, + '1': {}, + '2': {}, + '3': {}, + '4': {}, + }, +}; diff --git a/ui/components/src/Shield/Shield.test.ts b/ui/components/src/Shield/Shield.test.ts index 0fc0d3541..c48b2f5d0 100644 --- a/ui/components/src/Shield/Shield.test.ts +++ b/ui/components/src/Shield/Shield.test.ts @@ -8,28 +8,36 @@ import { render, act } from '@testing-library/react'; import { renderErr } from '@component-controls/test-renderers'; import * as examples from './Shield.stories'; +import data from './Shield.data'; describe('Shield', () => { const configPath = path.resolve(__dirname, '../../.config'); const config = loadConfigurations(configPath); let renderedExamples: ReturnType = []; act(() => { - renderedExamples = renderDocument(examples, config); + renderedExamples = renderDocument(examples, config, data); }); if (!renderedExamples) { renderErr(); return; } - renderedExamples.forEach(({ name, rendered }) => { + renderedExamples.forEach(({ name, rendered, dataId, values }) => { describe(name, () => { - it('snapshot', () => { - const { asFragment } = render(rendered); - expect(asFragment()).toMatchSnapshot(); - }); - it('accessibility', async () => { - const axeResults = await reactRunDOM(rendered, run); - expect(axeResults).toHaveNoAxeViolations(); - }); + const runTests = () => { + it('snapshot', () => { + const { asFragment } = render(rendered); + expect(asFragment()).toMatchSnapshot(); + }); + it('accessibility', async () => { + const axeResults = await reactRunDOM(rendered, run); + expect(axeResults).toHaveNoAxeViolations(); + }); + }; + if (values) { + describe(dataId, runTests); + } else { + runTests(); + } }); }); }); diff --git a/ui/components/src/Shield/__snapshots__/Shield.test.ts.snap b/ui/components/src/Shield/__snapshots__/Shield.test.ts.snap index 996cd3b8f..491245d93 100644 --- a/ui/components/src/Shield/__snapshots__/Shield.test.ts.snap +++ b/ui/components/src/Shield/__snapshots__/Shield.test.ts.snap @@ -61,7 +61,7 @@ exports[`Shield fraction snapshot 1`] = ` `; -exports[`Shield overview snapshot 1`] = ` +exports[`Shield overview 0 snapshot 1`] = ` .emotion-0 { box-sizing: border-box; @@ -111,7 +111,7 @@ exports[`Shield overview snapshot 1`] = `
- some text + Barry Harris
`; -exports[`Shield percent snapshot 1`] = ` +exports[`Shield overview 1 snapshot 1`] = ` .emotion-0 { box-sizing: border-box; @@ -162,7 +162,7 @@ exports[`Shield percent snapshot 1`] = ` padding-right: 4px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; - background-color: #6d994a; + background-color: #227fc0; color: #ffffff; } @@ -172,17 +172,617 @@ exports[`Shield percent snapshot 1`] = `
- zero + Dakota Lang I
- 80% + 1.0.0 +
+
+ +`; + +exports[`Shield overview 2 snapshot 1`] = ` + + .emotion-0 { + box-sizing: border-box; + margin: 0; + min-width: 0; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + font-size: 12px; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +.emotion-1 { + box-sizing: border-box; + margin: 0; + min-width: 0; + padding-left: 4px; + padding-right: 4px; + border-top-left-radius: 3px; + border-bottom-left-radius: 3px; + background-color: #69768C; + color: #ffffff; +} + +.emotion-2 { + box-sizing: border-box; + margin: 0; + min-width: 0; + padding-left: 4px; + padding-right: 4px; + border-top-right-radius: 3px; + border-bottom-right-radius: 3px; + background-color: #227fc0; + color: #ffffff; +} + +
+
+ Rollin Hand +
+
+ 1.0.0 +
+
+ +`; + +exports[`Shield overview 3 snapshot 1`] = ` + + .emotion-0 { + box-sizing: border-box; + margin: 0; + min-width: 0; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + font-size: 12px; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +.emotion-1 { + box-sizing: border-box; + margin: 0; + min-width: 0; + padding-left: 4px; + padding-right: 4px; + border-top-left-radius: 3px; + border-bottom-left-radius: 3px; + background-color: #69768C; + color: #ffffff; +} + +.emotion-2 { + box-sizing: border-box; + margin: 0; + min-width: 0; + padding-left: 4px; + padding-right: 4px; + border-top-right-radius: 3px; + border-bottom-right-radius: 3px; + background-color: #227fc0; + color: #ffffff; +} + +
+
+ Damaris Ullrich +
+
+ 1.0.0 +
+
+ +`; + +exports[`Shield overview 4 snapshot 1`] = ` + + .emotion-0 { + box-sizing: border-box; + margin: 0; + min-width: 0; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + font-size: 12px; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +.emotion-1 { + box-sizing: border-box; + margin: 0; + min-width: 0; + padding-left: 4px; + padding-right: 4px; + border-top-left-radius: 3px; + border-bottom-left-radius: 3px; + background-color: #69768C; + color: #ffffff; +} + +.emotion-2 { + box-sizing: border-box; + margin: 0; + min-width: 0; + padding-left: 4px; + padding-right: 4px; + border-top-right-radius: 3px; + border-bottom-right-radius: 3px; + background-color: #227fc0; + color: #ffffff; +} + +
+
+ Kelli Sipes +
+
+ 1.0.0 +
+
+ +`; + +exports[`Shield overview snapshot 1`] = ` + + .emotion-0 { + box-sizing: border-box; + margin: 0; + min-width: 0; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + font-size: 12px; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +.emotion-1 { + box-sizing: border-box; + margin: 0; + min-width: 0; + padding-left: 4px; + padding-right: 4px; + border-top-left-radius: 3px; + border-bottom-left-radius: 3px; + background-color: #69768C; + color: #ffffff; +} + +.emotion-2 { + box-sizing: border-box; + margin: 0; + min-width: 0; + padding-left: 4px; + padding-right: 4px; + border-top-right-radius: 3px; + border-bottom-right-radius: 3px; + background-color: #227fc0; + color: #ffffff; +} + +
+
+ some text +
+
+ 1.0.0
`; +exports[`Shield percent snapshot 1`] = ` + + .emotion-0 { + box-sizing: border-box; + margin: 0; + min-width: 0; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + font-size: 12px; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +.emotion-1 { + box-sizing: border-box; + margin: 0; + min-width: 0; + padding-left: 4px; + padding-right: 4px; + border-top-left-radius: 3px; + border-bottom-left-radius: 3px; + background-color: #69768C; + color: #ffffff; +} + +.emotion-2 { + box-sizing: border-box; + margin: 0; + min-width: 0; + padding-left: 4px; + padding-right: 4px; + border-top-right-radius: 3px; + border-bottom-right-radius: 3px; + background-color: #6d994a; + color: #ffffff; +} + +
+
+ zero +
+
+ 80% +
+
+ +`; + +exports[`Shield themeColor 0 snapshot 1`] = ` + + .emotion-0 { + box-sizing: border-box; + margin: 0; + min-width: 0; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + font-size: 12px; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +.emotion-1 { + box-sizing: border-box; + margin: 0; + min-width: 0; + padding-left: 4px; + padding-right: 4px; + border-top-left-radius: 3px; + border-bottom-left-radius: 3px; + background-color: #69768C; + color: #ffffff; +} + +.emotion-2 { + box-sizing: border-box; + margin: 0; + min-width: 0; + padding-left: 4px; + padding-right: 4px; + border-top-right-radius: 3px; + border-bottom-right-radius: 3px; + background-color: #227fc0; + color: #ffffff; +} + +
+
+ color +
+
+
+ +`; + +exports[`Shield themeColor 1 snapshot 1`] = ` + + .emotion-0 { + box-sizing: border-box; + margin: 0; + min-width: 0; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + font-size: 12px; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +.emotion-1 { + box-sizing: border-box; + margin: 0; + min-width: 0; + padding-left: 4px; + padding-right: 4px; + border-top-left-radius: 3px; + border-bottom-left-radius: 3px; + background-color: #69768C; + color: #ffffff; +} + +.emotion-2 { + box-sizing: border-box; + margin: 0; + min-width: 0; + padding-left: 4px; + padding-right: 4px; + border-top-right-radius: 3px; + border-bottom-right-radius: 3px; + background-color: #227fc0; + color: #ffffff; +} + +
+
+ color +
+
+
+ +`; + +exports[`Shield themeColor 2 snapshot 1`] = ` + + .emotion-0 { + box-sizing: border-box; + margin: 0; + min-width: 0; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + font-size: 12px; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +.emotion-1 { + box-sizing: border-box; + margin: 0; + min-width: 0; + padding-left: 4px; + padding-right: 4px; + border-top-left-radius: 3px; + border-bottom-left-radius: 3px; + background-color: #69768C; + color: #ffffff; +} + +.emotion-2 { + box-sizing: border-box; + margin: 0; + min-width: 0; + padding-left: 4px; + padding-right: 4px; + border-top-right-radius: 3px; + border-bottom-right-radius: 3px; + background-color: #227fc0; + color: #ffffff; +} + +
+
+ color +
+
+
+ +`; + +exports[`Shield themeColor 3 snapshot 1`] = ` + + .emotion-0 { + box-sizing: border-box; + margin: 0; + min-width: 0; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + font-size: 12px; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +.emotion-1 { + box-sizing: border-box; + margin: 0; + min-width: 0; + padding-left: 4px; + padding-right: 4px; + border-top-left-radius: 3px; + border-bottom-left-radius: 3px; + background-color: #69768C; + color: #ffffff; +} + +.emotion-2 { + box-sizing: border-box; + margin: 0; + min-width: 0; + padding-left: 4px; + padding-right: 4px; + border-top-right-radius: 3px; + border-bottom-right-radius: 3px; + background-color: #227fc0; + color: #ffffff; +} + +
+
+ color +
+
+
+ +`; + +exports[`Shield themeColor 4 snapshot 1`] = ` + + .emotion-0 { + box-sizing: border-box; + margin: 0; + min-width: 0; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + font-size: 12px; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +.emotion-1 { + box-sizing: border-box; + margin: 0; + min-width: 0; + padding-left: 4px; + padding-right: 4px; + border-top-left-radius: 3px; + border-bottom-left-radius: 3px; + background-color: #69768C; + color: #ffffff; +} + +.emotion-2 { + box-sizing: border-box; + margin: 0; + min-width: 0; + padding-left: 4px; + padding-right: 4px; + border-top-right-radius: 3px; + border-bottom-right-radius: 3px; + background-color: #227fc0; + color: #ffffff; +} + +
+
+ color +
+
+
+ +`; + exports[`Shield themeColor snapshot 1`] = ` .emotion-0 { diff --git a/ui/components/src/Sidebar/Sidebar.data.ts b/ui/components/src/Sidebar/Sidebar.data.ts new file mode 100644 index 000000000..c7e1130dc --- /dev/null +++ b/ui/components/src/Sidebar/Sidebar.data.ts @@ -0,0 +1,9 @@ +export default { + overview: { + '0': {}, + '1': {}, + '2': {}, + '3': {}, + '4': {}, + }, +}; diff --git a/ui/components/src/Sidebar/Sidebar.test.ts b/ui/components/src/Sidebar/Sidebar.test.ts index 7d02bcda7..c27853341 100644 --- a/ui/components/src/Sidebar/Sidebar.test.ts +++ b/ui/components/src/Sidebar/Sidebar.test.ts @@ -8,28 +8,36 @@ import { render, act } from '@testing-library/react'; import { renderErr } from '@component-controls/test-renderers'; import * as examples from './Sidebar.stories'; +import data from './Sidebar.data'; describe('Sidebar', () => { const configPath = path.resolve(__dirname, '../../.config'); const config = loadConfigurations(configPath); let renderedExamples: ReturnType = []; act(() => { - renderedExamples = renderDocument(examples, config); + renderedExamples = renderDocument(examples, config, data); }); if (!renderedExamples) { renderErr(); return; } - renderedExamples.forEach(({ name, rendered }) => { + renderedExamples.forEach(({ name, rendered, dataId, values }) => { describe(name, () => { - it('snapshot', () => { - const { asFragment } = render(rendered); - expect(asFragment()).toMatchSnapshot(); - }); - it('accessibility', async () => { - const axeResults = await reactRunDOM(rendered, run); - expect(axeResults).toHaveNoAxeViolations(); - }); + const runTests = () => { + it('snapshot', () => { + const { asFragment } = render(rendered); + expect(asFragment()).toMatchSnapshot(); + }); + it('accessibility', async () => { + const axeResults = await reactRunDOM(rendered, run); + expect(axeResults).toHaveNoAxeViolations(); + }); + }; + if (values) { + describe(dataId, runTests); + } else { + runTests(); + } }); }); }); diff --git a/ui/components/src/Sidebar/__snapshots__/Sidebar.test.ts.snap b/ui/components/src/Sidebar/__snapshots__/Sidebar.test.ts.snap index 88afbbcb4..11033ded9 100644 --- a/ui/components/src/Sidebar/__snapshots__/Sidebar.test.ts.snap +++ b/ui/components/src/Sidebar/__snapshots__/Sidebar.test.ts.snap @@ -172,6 +172,416 @@ exports[`Sidebar icon snapshot 1`] = ` `; +exports[`Sidebar overview 0 snapshot 1`] = ` + + .emotion-0 { + box-sizing: border-box; + margin: 0; + min-width: 0; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-align-items: start; + -webkit-box-align: start; + -ms-flex-align: start; + align-items: start; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; +} + +.emotion-1 { + box-sizing: border-box; + margin: 0; + min-width: 0; + -webkit-appearance: none; + -moz-appearance: none; + -ms-appearance: none; + appearance: none; + display: inline-block; + text-align: center; + line-height: inherit; + -webkit-text-decoration: none; + text-decoration: none; + font-size: inherit; + padding-left: 16px; + padding-right: 16px; + padding-top: 8px; + padding-bottom: 8px; + color: white; + background-color: #5c6ac4; + border: 0; + border-radius: 4px; + color: #333; + background-color: #f3f3f3; + border-radius: 5px; + box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 0px 1px inset; + background: none; + box-shadow: none; + cursor: pointer; + color: #454f5b; +} + +.emotion-1:disabled { + color: #aaa; +} + +
+ +
+ +`; + +exports[`Sidebar overview 1 snapshot 1`] = ` + + .emotion-0 { + box-sizing: border-box; + margin: 0; + min-width: 0; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-align-items: start; + -webkit-box-align: start; + -ms-flex-align: start; + align-items: start; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; +} + +.emotion-1 { + box-sizing: border-box; + margin: 0; + min-width: 0; + -webkit-appearance: none; + -moz-appearance: none; + -ms-appearance: none; + appearance: none; + display: inline-block; + text-align: center; + line-height: inherit; + -webkit-text-decoration: none; + text-decoration: none; + font-size: inherit; + padding-left: 16px; + padding-right: 16px; + padding-top: 8px; + padding-bottom: 8px; + color: white; + background-color: #5c6ac4; + border: 0; + border-radius: 4px; + color: #333; + background-color: #f3f3f3; + border-radius: 5px; + box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 0px 1px inset; + background: none; + box-shadow: none; + cursor: pointer; + color: #454f5b; +} + +.emotion-1:disabled { + color: #aaa; +} + +
+ +
+ +`; + +exports[`Sidebar overview 2 snapshot 1`] = ` + + .emotion-0 { + box-sizing: border-box; + margin: 0; + min-width: 0; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-align-items: start; + -webkit-box-align: start; + -ms-flex-align: start; + align-items: start; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; +} + +.emotion-1 { + box-sizing: border-box; + margin: 0; + min-width: 0; + -webkit-appearance: none; + -moz-appearance: none; + -ms-appearance: none; + appearance: none; + display: inline-block; + text-align: center; + line-height: inherit; + -webkit-text-decoration: none; + text-decoration: none; + font-size: inherit; + padding-left: 16px; + padding-right: 16px; + padding-top: 8px; + padding-bottom: 8px; + color: white; + background-color: #5c6ac4; + border: 0; + border-radius: 4px; + color: #333; + background-color: #f3f3f3; + border-radius: 5px; + box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 0px 1px inset; + background: none; + box-shadow: none; + cursor: pointer; + color: #454f5b; +} + +.emotion-1:disabled { + color: #aaa; +} + +
+ +
+ +`; + +exports[`Sidebar overview 3 snapshot 1`] = ` + + .emotion-0 { + box-sizing: border-box; + margin: 0; + min-width: 0; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-align-items: start; + -webkit-box-align: start; + -ms-flex-align: start; + align-items: start; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; +} + +.emotion-1 { + box-sizing: border-box; + margin: 0; + min-width: 0; + -webkit-appearance: none; + -moz-appearance: none; + -ms-appearance: none; + appearance: none; + display: inline-block; + text-align: center; + line-height: inherit; + -webkit-text-decoration: none; + text-decoration: none; + font-size: inherit; + padding-left: 16px; + padding-right: 16px; + padding-top: 8px; + padding-bottom: 8px; + color: white; + background-color: #5c6ac4; + border: 0; + border-radius: 4px; + color: #333; + background-color: #f3f3f3; + border-radius: 5px; + box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 0px 1px inset; + background: none; + box-shadow: none; + cursor: pointer; + color: #454f5b; +} + +.emotion-1:disabled { + color: #aaa; +} + +
+ +
+ +`; + +exports[`Sidebar overview 4 snapshot 1`] = ` + + .emotion-0 { + box-sizing: border-box; + margin: 0; + min-width: 0; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-align-items: start; + -webkit-box-align: start; + -ms-flex-align: start; + align-items: start; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; +} + +.emotion-1 { + box-sizing: border-box; + margin: 0; + min-width: 0; + -webkit-appearance: none; + -moz-appearance: none; + -ms-appearance: none; + appearance: none; + display: inline-block; + text-align: center; + line-height: inherit; + -webkit-text-decoration: none; + text-decoration: none; + font-size: inherit; + padding-left: 16px; + padding-right: 16px; + padding-top: 8px; + padding-bottom: 8px; + color: white; + background-color: #5c6ac4; + border: 0; + border-radius: 4px; + color: #333; + background-color: #f3f3f3; + border-radius: 5px; + box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 0px 1px inset; + background: none; + box-shadow: none; + cursor: pointer; + color: #454f5b; +} + +.emotion-1:disabled { + color: #aaa; +} + +
+ +
+ +`; + exports[`Sidebar overview snapshot 1`] = ` .emotion-0 { diff --git a/ui/components/src/Source/Source.data.ts b/ui/components/src/Source/Source.data.ts new file mode 100644 index 000000000..c7e1130dc --- /dev/null +++ b/ui/components/src/Source/Source.data.ts @@ -0,0 +1,9 @@ +export default { + overview: { + '0': {}, + '1': {}, + '2': {}, + '3': {}, + '4': {}, + }, +}; diff --git a/ui/components/src/Source/Source.test.ts b/ui/components/src/Source/Source.test.ts index 4f3c6ccd1..609eb8096 100644 --- a/ui/components/src/Source/Source.test.ts +++ b/ui/components/src/Source/Source.test.ts @@ -8,28 +8,36 @@ import { render, act } from '@testing-library/react'; import { renderErr } from '@component-controls/test-renderers'; import * as examples from './Source.stories'; +import data from './Source.data'; describe('Source', () => { const configPath = path.resolve(__dirname, '../../.config'); const config = loadConfigurations(configPath); let renderedExamples: ReturnType = []; act(() => { - renderedExamples = renderDocument(examples, config); + renderedExamples = renderDocument(examples, config, data); }); if (!renderedExamples) { renderErr(); return; } - renderedExamples.forEach(({ name, rendered }) => { + renderedExamples.forEach(({ name, rendered, dataId, values }) => { describe(name, () => { - it('snapshot', () => { - const { asFragment } = render(rendered); - expect(asFragment()).toMatchSnapshot(); - }); - it('accessibility', async () => { - const axeResults = await reactRunDOM(rendered, run); - expect(axeResults).toHaveNoAxeViolations(); - }); + const runTests = () => { + it('snapshot', () => { + const { asFragment } = render(rendered); + expect(asFragment()).toMatchSnapshot(); + }); + it('accessibility', async () => { + const axeResults = await reactRunDOM(rendered, run); + expect(axeResults).toHaveNoAxeViolations(); + }); + }; + if (values) { + describe(dataId, runTests); + } else { + runTests(); + } }); }); }); diff --git a/ui/components/src/Source/__snapshots__/Source.test.ts.snap b/ui/components/src/Source/__snapshots__/Source.test.ts.snap index 143afdb19..29795ee68 100644 --- a/ui/components/src/Source/__snapshots__/Source.test.ts.snap +++ b/ui/components/src/Source/__snapshots__/Source.test.ts.snap @@ -1,5 +1,3700 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP +exports[`Source overview 0 snapshot 1`] = ` + + .emotion-0 { + box-sizing: border-box; + margin: 0; + min-width: 0; + position: relative; +} + +.emotion-1 { + box-sizing: border-box; + margin: 0; + min-width: 0; + position: absolute; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + width: 100%; + -webkit-flex-direction: row-reverse; + -ms-flex-direction: row-reverse; + flex-direction: row-reverse; + margin-left: auto; +} + +.emotion-2 { + box-sizing: border-box; + margin: 0; + min-width: 0; + margin-right: 4px; + margin-left: 8px; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + margin-top: 4px; + font-size: 14px; +} + +.emotion-2 a { + color: #ffffff; + background-color: #3B817D; + -webkit-text-fill-color: initial; + padding-left: 8px; + padding-right: 8px; + padding-top: 4px; + padding-bottom: 4px; + line-height: 1; + border-radius: 1px; + display: inline-block; + box-shadow: rgba(0, 0, 0, 0.1) 0 1px 3px 1px,rgba(0, 0, 0, 0.1) 0 0 0 1px; + border: 1px solid #3B817D; +} + +.emotion-2 button { + color: #ffffff; + background-color: #3B817D; + -webkit-text-fill-color: initial; + padding-left: 8px; + padding-right: 8px; + padding-top: 4px; + padding-bottom: 4px; + line-height: 1; + border-radius: 1px; + display: inline-block; + box-shadow: rgba(0, 0, 0, 0.1) 0 1px 3px 1px,rgba(0, 0, 0, 0.1) 0 0 0 1px; + border: 1px solid #3B817D; +} + +.emotion-3 { + box-sizing: border-box; + margin: 0; + min-width: 0; + -webkit-appearance: none; + -moz-appearance: none; + -ms-appearance: none; + appearance: none; + display: inline-block; + text-align: center; + line-height: inherit; + -webkit-text-decoration: none; + text-decoration: none; + font-size: inherit; + padding-left: 16px; + padding-right: 16px; + padding-top: 8px; + padding-bottom: 8px; + color: white; + background-color: #5c6ac4; + border: 0; + border-radius: 4px; +} + +.emotion-4 { + box-sizing: border-box; + margin: 0; + min-width: 0; + box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.1); + border: 1px solid rgba(0, 0, 0, 0.1); + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; +} + +.emotion-5 { + font-family: Menlo,monospace; + overflow-x: auto; + background-color: #e6e6e6; +} + +.emotion-5 code { + color: inherit; +} + +.emotion-6 { + box-sizing: border-box; + margin: 0; + min-width: 0; +} + +.emotion-7 { + display: inline-block; +} + +
+
+
+
+ +
+
+
+
+ 
+        

+          
+            export
+          
+          
+             
+          
+          
+            const
+          
+          
+             
+          
+          
+            sample
+          
+          
+             
+          
+          
+            =
+          
+          
+             
+          
+          
+            (
+          
+          
+            )
+          
+          
+             
+          
+          
+            =>
+          
+          
+             
+          
+          
+            {
+          
+          
+        

+        

+          
+              
+          
+          
+            const
+          
+          
+             
+          
+          
+            [
+          
+          
+            state
+          
+          
+            ,
+          
+          
+             setState
+          
+          
+            ]
+          
+          
+             
+          
+          
+            =
+          
+          
+             React
+          
+          
+            .
+          
+          
+            useState
+          
+          
+            (
+          
+          
+            false
+          
+          
+            )
+          
+          
+            ;
+          
+          
+        

+        

+          
+              
+          
+          
+            return
+          
+          
+             
+          
+          
+            (
+          
+          
+        

+        

+          
+                
+          
+          
+            <
+          
+          
+            BooleanEditor
+          
+          
+        

+        

+          
+                  
+          
+          
+            name
+          
+          
+            =
+          
+          
+            "
+          
+          
+            prop
+          
+          
+            "
+          
+          
+        

+        

+          
+                  
+          
+          
+            onChange
+          
+          
+            =
+          
+          
+            {
+          
+          
+            (
+          
+          
+            name
+          
+          
+            ,
+          
+          
+             newVal
+          
+          
+            )
+          
+          
+             
+          
+          
+            =>
+          
+          
+             
+          
+          
+            setState
+          
+          
+            (
+          
+          
+            newVal
+          
+          
+            )
+          
+          
+            }
+          
+          
+        

+        

+          
+                  
+          
+          
+            prop
+          
+          
+            =
+          
+          
+            {
+          
+          
+            {
+          
+          
+             type
+          
+          
+            :
+          
+          
+             ControlTypes
+          
+          
+            .
+          
+          
+            BOOLEAN
+          
+          
+            ,
+          
+          
+             value
+          
+          
+            :
+          
+          
+             state 
+          
+          
+            }
+          
+          
+            }
+          
+          
+        

+        

+          
+                
+          
+          
+            />
+          
+          
+        

+        

+          
+              
+          
+          
+            )
+          
+          
+            ;
+          
+          
+        

+        

+          
+          
+            }
+          
+          
+            ;
+          
+        

+
+
+
+ +`; + +exports[`Source overview 1 snapshot 1`] = ` + + .emotion-0 { + box-sizing: border-box; + margin: 0; + min-width: 0; + position: relative; +} + +.emotion-1 { + box-sizing: border-box; + margin: 0; + min-width: 0; + position: absolute; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + width: 100%; + -webkit-flex-direction: row-reverse; + -ms-flex-direction: row-reverse; + flex-direction: row-reverse; + margin-left: auto; +} + +.emotion-2 { + box-sizing: border-box; + margin: 0; + min-width: 0; + margin-right: 4px; + margin-left: 8px; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + margin-top: 4px; + font-size: 14px; +} + +.emotion-2 a { + color: #ffffff; + background-color: #3B817D; + -webkit-text-fill-color: initial; + padding-left: 8px; + padding-right: 8px; + padding-top: 4px; + padding-bottom: 4px; + line-height: 1; + border-radius: 1px; + display: inline-block; + box-shadow: rgba(0, 0, 0, 0.1) 0 1px 3px 1px,rgba(0, 0, 0, 0.1) 0 0 0 1px; + border: 1px solid #3B817D; +} + +.emotion-2 button { + color: #ffffff; + background-color: #3B817D; + -webkit-text-fill-color: initial; + padding-left: 8px; + padding-right: 8px; + padding-top: 4px; + padding-bottom: 4px; + line-height: 1; + border-radius: 1px; + display: inline-block; + box-shadow: rgba(0, 0, 0, 0.1) 0 1px 3px 1px,rgba(0, 0, 0, 0.1) 0 0 0 1px; + border: 1px solid #3B817D; +} + +.emotion-3 { + box-sizing: border-box; + margin: 0; + min-width: 0; + -webkit-appearance: none; + -moz-appearance: none; + -ms-appearance: none; + appearance: none; + display: inline-block; + text-align: center; + line-height: inherit; + -webkit-text-decoration: none; + text-decoration: none; + font-size: inherit; + padding-left: 16px; + padding-right: 16px; + padding-top: 8px; + padding-bottom: 8px; + color: white; + background-color: #5c6ac4; + border: 0; + border-radius: 4px; +} + +.emotion-4 { + box-sizing: border-box; + margin: 0; + min-width: 0; + box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.1); + border: 1px solid rgba(0, 0, 0, 0.1); + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; +} + +.emotion-5 { + font-family: Menlo,monospace; + overflow-x: auto; + background-color: #e6e6e6; +} + +.emotion-5 code { + color: inherit; +} + +.emotion-6 { + box-sizing: border-box; + margin: 0; + min-width: 0; +} + +.emotion-7 { + display: inline-block; +} + +
+
+
+
+ +
+
+
+
+ 
+        

+          
+            export
+          
+          
+             
+          
+          
+            const
+          
+          
+             
+          
+          
+            sample
+          
+          
+             
+          
+          
+            =
+          
+          
+             
+          
+          
+            (
+          
+          
+            )
+          
+          
+             
+          
+          
+            =>
+          
+          
+             
+          
+          
+            {
+          
+          
+        

+        

+          
+              
+          
+          
+            const
+          
+          
+             
+          
+          
+            [
+          
+          
+            state
+          
+          
+            ,
+          
+          
+             setState
+          
+          
+            ]
+          
+          
+             
+          
+          
+            =
+          
+          
+             React
+          
+          
+            .
+          
+          
+            useState
+          
+          
+            (
+          
+          
+            false
+          
+          
+            )
+          
+          
+            ;
+          
+          
+        

+        

+          
+              
+          
+          
+            return
+          
+          
+             
+          
+          
+            (
+          
+          
+        

+        

+          
+                
+          
+          
+            <
+          
+          
+            BooleanEditor
+          
+          
+        

+        

+          
+                  
+          
+          
+            name
+          
+          
+            =
+          
+          
+            "
+          
+          
+            prop
+          
+          
+            "
+          
+          
+        

+        

+          
+                  
+          
+          
+            onChange
+          
+          
+            =
+          
+          
+            {
+          
+          
+            (
+          
+          
+            name
+          
+          
+            ,
+          
+          
+             newVal
+          
+          
+            )
+          
+          
+             
+          
+          
+            =>
+          
+          
+             
+          
+          
+            setState
+          
+          
+            (
+          
+          
+            newVal
+          
+          
+            )
+          
+          
+            }
+          
+          
+        

+        

+          
+                  
+          
+          
+            prop
+          
+          
+            =
+          
+          
+            {
+          
+          
+            {
+          
+          
+             type
+          
+          
+            :
+          
+          
+             ControlTypes
+          
+          
+            .
+          
+          
+            BOOLEAN
+          
+          
+            ,
+          
+          
+             value
+          
+          
+            :
+          
+          
+             state 
+          
+          
+            }
+          
+          
+            }
+          
+          
+        

+        

+          
+                
+          
+          
+            />
+          
+          
+        

+        

+          
+              
+          
+          
+            )
+          
+          
+            ;
+          
+          
+        

+        

+          
+          
+            }
+          
+          
+            ;
+          
+        

+
+
+
+ +`; + +exports[`Source overview 2 snapshot 1`] = ` + + .emotion-0 { + box-sizing: border-box; + margin: 0; + min-width: 0; + position: relative; +} + +.emotion-1 { + box-sizing: border-box; + margin: 0; + min-width: 0; + position: absolute; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + width: 100%; + -webkit-flex-direction: row-reverse; + -ms-flex-direction: row-reverse; + flex-direction: row-reverse; + margin-left: auto; +} + +.emotion-2 { + box-sizing: border-box; + margin: 0; + min-width: 0; + margin-right: 4px; + margin-left: 8px; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + margin-top: 4px; + font-size: 14px; +} + +.emotion-2 a { + color: #ffffff; + background-color: #3B817D; + -webkit-text-fill-color: initial; + padding-left: 8px; + padding-right: 8px; + padding-top: 4px; + padding-bottom: 4px; + line-height: 1; + border-radius: 1px; + display: inline-block; + box-shadow: rgba(0, 0, 0, 0.1) 0 1px 3px 1px,rgba(0, 0, 0, 0.1) 0 0 0 1px; + border: 1px solid #3B817D; +} + +.emotion-2 button { + color: #ffffff; + background-color: #3B817D; + -webkit-text-fill-color: initial; + padding-left: 8px; + padding-right: 8px; + padding-top: 4px; + padding-bottom: 4px; + line-height: 1; + border-radius: 1px; + display: inline-block; + box-shadow: rgba(0, 0, 0, 0.1) 0 1px 3px 1px,rgba(0, 0, 0, 0.1) 0 0 0 1px; + border: 1px solid #3B817D; +} + +.emotion-3 { + box-sizing: border-box; + margin: 0; + min-width: 0; + -webkit-appearance: none; + -moz-appearance: none; + -ms-appearance: none; + appearance: none; + display: inline-block; + text-align: center; + line-height: inherit; + -webkit-text-decoration: none; + text-decoration: none; + font-size: inherit; + padding-left: 16px; + padding-right: 16px; + padding-top: 8px; + padding-bottom: 8px; + color: white; + background-color: #5c6ac4; + border: 0; + border-radius: 4px; +} + +.emotion-4 { + box-sizing: border-box; + margin: 0; + min-width: 0; + box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.1); + border: 1px solid rgba(0, 0, 0, 0.1); + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; +} + +.emotion-5 { + font-family: Menlo,monospace; + overflow-x: auto; + background-color: #e6e6e6; +} + +.emotion-5 code { + color: inherit; +} + +.emotion-6 { + box-sizing: border-box; + margin: 0; + min-width: 0; +} + +.emotion-7 { + display: inline-block; +} + +
+
+
+
+ +
+
+
+
+ 
+        

+          
+            export
+          
+          
+             
+          
+          
+            const
+          
+          
+             
+          
+          
+            sample
+          
+          
+             
+          
+          
+            =
+          
+          
+             
+          
+          
+            (
+          
+          
+            )
+          
+          
+             
+          
+          
+            =>
+          
+          
+             
+          
+          
+            {
+          
+          
+        

+        

+          
+              
+          
+          
+            const
+          
+          
+             
+          
+          
+            [
+          
+          
+            state
+          
+          
+            ,
+          
+          
+             setState
+          
+          
+            ]
+          
+          
+             
+          
+          
+            =
+          
+          
+             React
+          
+          
+            .
+          
+          
+            useState
+          
+          
+            (
+          
+          
+            false
+          
+          
+            )
+          
+          
+            ;
+          
+          
+        

+        

+          
+              
+          
+          
+            return
+          
+          
+             
+          
+          
+            (
+          
+          
+        

+        

+          
+                
+          
+          
+            <
+          
+          
+            BooleanEditor
+          
+          
+        

+        

+          
+                  
+          
+          
+            name
+          
+          
+            =
+          
+          
+            "
+          
+          
+            prop
+          
+          
+            "
+          
+          
+        

+        

+          
+                  
+          
+          
+            onChange
+          
+          
+            =
+          
+          
+            {
+          
+          
+            (
+          
+          
+            name
+          
+          
+            ,
+          
+          
+             newVal
+          
+          
+            )
+          
+          
+             
+          
+          
+            =>
+          
+          
+             
+          
+          
+            setState
+          
+          
+            (
+          
+          
+            newVal
+          
+          
+            )
+          
+          
+            }
+          
+          
+        

+        

+          
+                  
+          
+          
+            prop
+          
+          
+            =
+          
+          
+            {
+          
+          
+            {
+          
+          
+             type
+          
+          
+            :
+          
+          
+             ControlTypes
+          
+          
+            .
+          
+          
+            BOOLEAN
+          
+          
+            ,
+          
+          
+             value
+          
+          
+            :
+          
+          
+             state 
+          
+          
+            }
+          
+          
+            }
+          
+          
+        

+        

+          
+                
+          
+          
+            />
+          
+          
+        

+        

+          
+              
+          
+          
+            )
+          
+          
+            ;
+          
+          
+        

+        

+          
+          
+            }
+          
+          
+            ;
+          
+        

+
+
+
+ +`; + +exports[`Source overview 3 snapshot 1`] = ` + + .emotion-0 { + box-sizing: border-box; + margin: 0; + min-width: 0; + position: relative; +} + +.emotion-1 { + box-sizing: border-box; + margin: 0; + min-width: 0; + position: absolute; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + width: 100%; + -webkit-flex-direction: row-reverse; + -ms-flex-direction: row-reverse; + flex-direction: row-reverse; + margin-left: auto; +} + +.emotion-2 { + box-sizing: border-box; + margin: 0; + min-width: 0; + margin-right: 4px; + margin-left: 8px; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + margin-top: 4px; + font-size: 14px; +} + +.emotion-2 a { + color: #ffffff; + background-color: #3B817D; + -webkit-text-fill-color: initial; + padding-left: 8px; + padding-right: 8px; + padding-top: 4px; + padding-bottom: 4px; + line-height: 1; + border-radius: 1px; + display: inline-block; + box-shadow: rgba(0, 0, 0, 0.1) 0 1px 3px 1px,rgba(0, 0, 0, 0.1) 0 0 0 1px; + border: 1px solid #3B817D; +} + +.emotion-2 button { + color: #ffffff; + background-color: #3B817D; + -webkit-text-fill-color: initial; + padding-left: 8px; + padding-right: 8px; + padding-top: 4px; + padding-bottom: 4px; + line-height: 1; + border-radius: 1px; + display: inline-block; + box-shadow: rgba(0, 0, 0, 0.1) 0 1px 3px 1px,rgba(0, 0, 0, 0.1) 0 0 0 1px; + border: 1px solid #3B817D; +} + +.emotion-3 { + box-sizing: border-box; + margin: 0; + min-width: 0; + -webkit-appearance: none; + -moz-appearance: none; + -ms-appearance: none; + appearance: none; + display: inline-block; + text-align: center; + line-height: inherit; + -webkit-text-decoration: none; + text-decoration: none; + font-size: inherit; + padding-left: 16px; + padding-right: 16px; + padding-top: 8px; + padding-bottom: 8px; + color: white; + background-color: #5c6ac4; + border: 0; + border-radius: 4px; +} + +.emotion-4 { + box-sizing: border-box; + margin: 0; + min-width: 0; + box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.1); + border: 1px solid rgba(0, 0, 0, 0.1); + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; +} + +.emotion-5 { + font-family: Menlo,monospace; + overflow-x: auto; + background-color: #e6e6e6; +} + +.emotion-5 code { + color: inherit; +} + +.emotion-6 { + box-sizing: border-box; + margin: 0; + min-width: 0; +} + +.emotion-7 { + display: inline-block; +} + +
+
+
+
+ +
+
+
+
+ 
+        

+          
+            export
+          
+          
+             
+          
+          
+            const
+          
+          
+             
+          
+          
+            sample
+          
+          
+             
+          
+          
+            =
+          
+          
+             
+          
+          
+            (
+          
+          
+            )
+          
+          
+             
+          
+          
+            =>
+          
+          
+             
+          
+          
+            {
+          
+          
+        

+        

+          
+              
+          
+          
+            const
+          
+          
+             
+          
+          
+            [
+          
+          
+            state
+          
+          
+            ,
+          
+          
+             setState
+          
+          
+            ]
+          
+          
+             
+          
+          
+            =
+          
+          
+             React
+          
+          
+            .
+          
+          
+            useState
+          
+          
+            (
+          
+          
+            false
+          
+          
+            )
+          
+          
+            ;
+          
+          
+        

+        

+          
+              
+          
+          
+            return
+          
+          
+             
+          
+          
+            (
+          
+          
+        

+        

+          
+                
+          
+          
+            <
+          
+          
+            BooleanEditor
+          
+          
+        

+        

+          
+                  
+          
+          
+            name
+          
+          
+            =
+          
+          
+            "
+          
+          
+            prop
+          
+          
+            "
+          
+          
+        

+        

+          
+                  
+          
+          
+            onChange
+          
+          
+            =
+          
+          
+            {
+          
+          
+            (
+          
+          
+            name
+          
+          
+            ,
+          
+          
+             newVal
+          
+          
+            )
+          
+          
+             
+          
+          
+            =>
+          
+          
+             
+          
+          
+            setState
+          
+          
+            (
+          
+          
+            newVal
+          
+          
+            )
+          
+          
+            }
+          
+          
+        

+        

+          
+                  
+          
+          
+            prop
+          
+          
+            =
+          
+          
+            {
+          
+          
+            {
+          
+          
+             type
+          
+          
+            :
+          
+          
+             ControlTypes
+          
+          
+            .
+          
+          
+            BOOLEAN
+          
+          
+            ,
+          
+          
+             value
+          
+          
+            :
+          
+          
+             state 
+          
+          
+            }
+          
+          
+            }
+          
+          
+        

+        

+          
+                
+          
+          
+            />
+          
+          
+        

+        

+          
+              
+          
+          
+            )
+          
+          
+            ;
+          
+          
+        

+        

+          
+          
+            }
+          
+          
+            ;
+          
+        

+
+
+
+ +`; + +exports[`Source overview 4 snapshot 1`] = ` + + .emotion-0 { + box-sizing: border-box; + margin: 0; + min-width: 0; + position: relative; +} + +.emotion-1 { + box-sizing: border-box; + margin: 0; + min-width: 0; + position: absolute; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + width: 100%; + -webkit-flex-direction: row-reverse; + -ms-flex-direction: row-reverse; + flex-direction: row-reverse; + margin-left: auto; +} + +.emotion-2 { + box-sizing: border-box; + margin: 0; + min-width: 0; + margin-right: 4px; + margin-left: 8px; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + margin-top: 4px; + font-size: 14px; +} + +.emotion-2 a { + color: #ffffff; + background-color: #3B817D; + -webkit-text-fill-color: initial; + padding-left: 8px; + padding-right: 8px; + padding-top: 4px; + padding-bottom: 4px; + line-height: 1; + border-radius: 1px; + display: inline-block; + box-shadow: rgba(0, 0, 0, 0.1) 0 1px 3px 1px,rgba(0, 0, 0, 0.1) 0 0 0 1px; + border: 1px solid #3B817D; +} + +.emotion-2 button { + color: #ffffff; + background-color: #3B817D; + -webkit-text-fill-color: initial; + padding-left: 8px; + padding-right: 8px; + padding-top: 4px; + padding-bottom: 4px; + line-height: 1; + border-radius: 1px; + display: inline-block; + box-shadow: rgba(0, 0, 0, 0.1) 0 1px 3px 1px,rgba(0, 0, 0, 0.1) 0 0 0 1px; + border: 1px solid #3B817D; +} + +.emotion-3 { + box-sizing: border-box; + margin: 0; + min-width: 0; + -webkit-appearance: none; + -moz-appearance: none; + -ms-appearance: none; + appearance: none; + display: inline-block; + text-align: center; + line-height: inherit; + -webkit-text-decoration: none; + text-decoration: none; + font-size: inherit; + padding-left: 16px; + padding-right: 16px; + padding-top: 8px; + padding-bottom: 8px; + color: white; + background-color: #5c6ac4; + border: 0; + border-radius: 4px; +} + +.emotion-4 { + box-sizing: border-box; + margin: 0; + min-width: 0; + box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.1); + border: 1px solid rgba(0, 0, 0, 0.1); + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; +} + +.emotion-5 { + font-family: Menlo,monospace; + overflow-x: auto; + background-color: #e6e6e6; +} + +.emotion-5 code { + color: inherit; +} + +.emotion-6 { + box-sizing: border-box; + margin: 0; + min-width: 0; +} + +.emotion-7 { + display: inline-block; +} + +
+
+
+
+ +
+
+
+
+ 
+        

+          
+            export
+          
+          
+             
+          
+          
+            const
+          
+          
+             
+          
+          
+            sample
+          
+          
+             
+          
+          
+            =
+          
+          
+             
+          
+          
+            (
+          
+          
+            )
+          
+          
+             
+          
+          
+            =>
+          
+          
+             
+          
+          
+            {
+          
+          
+        

+        

+          
+              
+          
+          
+            const
+          
+          
+             
+          
+          
+            [
+          
+          
+            state
+          
+          
+            ,
+          
+          
+             setState
+          
+          
+            ]
+          
+          
+             
+          
+          
+            =
+          
+          
+             React
+          
+          
+            .
+          
+          
+            useState
+          
+          
+            (
+          
+          
+            false
+          
+          
+            )
+          
+          
+            ;
+          
+          
+        

+        

+          
+              
+          
+          
+            return
+          
+          
+             
+          
+          
+            (
+          
+          
+        

+        

+          
+                
+          
+          
+            <
+          
+          
+            BooleanEditor
+          
+          
+        

+        

+          
+                  
+          
+          
+            name
+          
+          
+            =
+          
+          
+            "
+          
+          
+            prop
+          
+          
+            "
+          
+          
+        

+        

+          
+                  
+          
+          
+            onChange
+          
+          
+            =
+          
+          
+            {
+          
+          
+            (
+          
+          
+            name
+          
+          
+            ,
+          
+          
+             newVal
+          
+          
+            )
+          
+          
+             
+          
+          
+            =>
+          
+          
+             
+          
+          
+            setState
+          
+          
+            (
+          
+          
+            newVal
+          
+          
+            )
+          
+          
+            }
+          
+          
+        

+        

+          
+                  
+          
+          
+            prop
+          
+          
+            =
+          
+          
+            {
+          
+          
+            {
+          
+          
+             type
+          
+          
+            :
+          
+          
+             ControlTypes
+          
+          
+            .
+          
+          
+            BOOLEAN
+          
+          
+            ,
+          
+          
+             value
+          
+          
+            :
+          
+          
+             state 
+          
+          
+            }
+          
+          
+            }
+          
+          
+        

+        

+          
+                
+          
+          
+            />
+          
+          
+        

+        

+          
+              
+          
+          
+            )
+          
+          
+            ;
+          
+          
+        

+        

+          
+          
+            }
+          
+          
+            ;
+          
+        

+
+
+
+ +`; + exports[`Source overview snapshot 1`] = ` .emotion-0 { diff --git a/ui/components/src/Subtitle/Subtitle.data.ts b/ui/components/src/Subtitle/Subtitle.data.ts new file mode 100644 index 000000000..c7e1130dc --- /dev/null +++ b/ui/components/src/Subtitle/Subtitle.data.ts @@ -0,0 +1,9 @@ +export default { + overview: { + '0': {}, + '1': {}, + '2': {}, + '3': {}, + '4': {}, + }, +}; diff --git a/ui/components/src/Subtitle/Subtitle.test.ts b/ui/components/src/Subtitle/Subtitle.test.ts index 63ae6ab21..9c7975be2 100644 --- a/ui/components/src/Subtitle/Subtitle.test.ts +++ b/ui/components/src/Subtitle/Subtitle.test.ts @@ -8,28 +8,36 @@ import { render, act } from '@testing-library/react'; import { renderErr } from '@component-controls/test-renderers'; import * as examples from './Subtitle.stories'; +import data from './Subtitle.data'; describe('Subtitle', () => { const configPath = path.resolve(__dirname, '../../.config'); const config = loadConfigurations(configPath); let renderedExamples: ReturnType = []; act(() => { - renderedExamples = renderDocument(examples, config); + renderedExamples = renderDocument(examples, config, data); }); if (!renderedExamples) { renderErr(); return; } - renderedExamples.forEach(({ name, rendered }) => { + renderedExamples.forEach(({ name, rendered, dataId, values }) => { describe(name, () => { - it('snapshot', () => { - const { asFragment } = render(rendered); - expect(asFragment()).toMatchSnapshot(); - }); - it('accessibility', async () => { - const axeResults = await reactRunDOM(rendered, run); - expect(axeResults).toHaveNoAxeViolations(); - }); + const runTests = () => { + it('snapshot', () => { + const { asFragment } = render(rendered); + expect(asFragment()).toMatchSnapshot(); + }); + it('accessibility', async () => { + const axeResults = await reactRunDOM(rendered, run); + expect(axeResults).toHaveNoAxeViolations(); + }); + }; + if (values) { + describe(dataId, runTests); + } else { + runTests(); + } }); }); }); diff --git a/ui/components/src/Subtitle/__snapshots__/Subtitle.test.ts.snap b/ui/components/src/Subtitle/__snapshots__/Subtitle.test.ts.snap index 0a3d1ae93..09e6a0dbc 100644 --- a/ui/components/src/Subtitle/__snapshots__/Subtitle.test.ts.snap +++ b/ui/components/src/Subtitle/__snapshots__/Subtitle.test.ts.snap @@ -1,5 +1,115 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP +exports[`Subtitle overview 0 snapshot 1`] = ` + + .emotion-0 { + box-sizing: border-box; + margin: 0; + min-width: 0; + font-family: medium-content-title-font,Georgia,Cambria,"Times New Roman",Times,serif; + font-weight: 600; + line-height: 1.25; + color: #69768C; + font-weight: 400; + padding-bottom: 8px; +} + +

+ Subtitle text +

+ +`; + +exports[`Subtitle overview 1 snapshot 1`] = ` + + .emotion-0 { + box-sizing: border-box; + margin: 0; + min-width: 0; + font-family: medium-content-title-font,Georgia,Cambria,"Times New Roman",Times,serif; + font-weight: 600; + line-height: 1.25; + color: #69768C; + font-weight: 400; + padding-bottom: 8px; +} + +

+ Subtitle text +

+ +`; + +exports[`Subtitle overview 2 snapshot 1`] = ` + + .emotion-0 { + box-sizing: border-box; + margin: 0; + min-width: 0; + font-family: medium-content-title-font,Georgia,Cambria,"Times New Roman",Times,serif; + font-weight: 600; + line-height: 1.25; + color: #69768C; + font-weight: 400; + padding-bottom: 8px; +} + +

+ Subtitle text +

+ +`; + +exports[`Subtitle overview 3 snapshot 1`] = ` + + .emotion-0 { + box-sizing: border-box; + margin: 0; + min-width: 0; + font-family: medium-content-title-font,Georgia,Cambria,"Times New Roman",Times,serif; + font-weight: 600; + line-height: 1.25; + color: #69768C; + font-weight: 400; + padding-bottom: 8px; +} + +

+ Subtitle text +

+ +`; + +exports[`Subtitle overview 4 snapshot 1`] = ` + + .emotion-0 { + box-sizing: border-box; + margin: 0; + min-width: 0; + font-family: medium-content-title-font,Georgia,Cambria,"Times New Roman",Times,serif; + font-weight: 600; + line-height: 1.25; + color: #69768C; + font-weight: 400; + padding-bottom: 8px; +} + +

+ Subtitle text +

+ +`; + exports[`Subtitle overview snapshot 1`] = ` .emotion-0 { diff --git a/ui/components/src/SyntaxHighlighter/SyntaxHighlighter.data.ts b/ui/components/src/SyntaxHighlighter/SyntaxHighlighter.data.ts new file mode 100644 index 000000000..c7e1130dc --- /dev/null +++ b/ui/components/src/SyntaxHighlighter/SyntaxHighlighter.data.ts @@ -0,0 +1,9 @@ +export default { + overview: { + '0': {}, + '1': {}, + '2': {}, + '3': {}, + '4': {}, + }, +}; diff --git a/ui/components/src/SyntaxHighlighter/SyntaxHighlighter.test.ts b/ui/components/src/SyntaxHighlighter/SyntaxHighlighter.test.ts index 59b0d0d24..ad71d97f7 100644 --- a/ui/components/src/SyntaxHighlighter/SyntaxHighlighter.test.ts +++ b/ui/components/src/SyntaxHighlighter/SyntaxHighlighter.test.ts @@ -8,28 +8,36 @@ import { render, act } from '@testing-library/react'; import { renderErr } from '@component-controls/test-renderers'; import * as examples from './SyntaxHighlighter.stories'; +import data from './SyntaxHighlighter.data'; describe('SyntaxHighlighter', () => { const configPath = path.resolve(__dirname, '../../.config'); const config = loadConfigurations(configPath); let renderedExamples: ReturnType = []; act(() => { - renderedExamples = renderDocument(examples, config); + renderedExamples = renderDocument(examples, config, data); }); if (!renderedExamples) { renderErr(); return; } - renderedExamples.forEach(({ name, rendered }) => { + renderedExamples.forEach(({ name, rendered, dataId, values }) => { describe(name, () => { - it('snapshot', () => { - const { asFragment } = render(rendered); - expect(asFragment()).toMatchSnapshot(); - }); - it('accessibility', async () => { - const axeResults = await reactRunDOM(rendered, run); - expect(axeResults).toHaveNoAxeViolations(); - }); + const runTests = () => { + it('snapshot', () => { + const { asFragment } = render(rendered); + expect(asFragment()).toMatchSnapshot(); + }); + it('accessibility', async () => { + const axeResults = await reactRunDOM(rendered, run); + expect(axeResults).toHaveNoAxeViolations(); + }); + }; + if (values) { + describe(dataId, runTests); + } else { + runTests(); + } }); }); }); diff --git a/ui/components/src/SyntaxHighlighter/__snapshots__/SyntaxHighlighter.test.ts.snap b/ui/components/src/SyntaxHighlighter/__snapshots__/SyntaxHighlighter.test.ts.snap index 9359968e8..31956a544 100644 --- a/ui/components/src/SyntaxHighlighter/__snapshots__/SyntaxHighlighter.test.ts.snap +++ b/ui/components/src/SyntaxHighlighter/__snapshots__/SyntaxHighlighter.test.ts.snap @@ -1,5 +1,460 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP +exports[`SyntaxHighlighter overview 0 snapshot 1`] = ` + + .emotion-0 { + font-family: Menlo,monospace; + overflow-x: auto; + background-color: #e6e6e6; +} + +.emotion-0 code { + color: inherit; +} + +.emotion-1 { + box-sizing: border-box; + margin: 0; + min-width: 0; +} + +.emotion-2 { + display: inline-block; +} + +
+    
+      
+        import
+      
+      
+         
+      
+      
+        {
+      
+      
+         Button 
+      
+      
+        }
+      
+      
+         
+      
+      
+        from
+      
+      
+         
+      
+      
+        'theme-ui'
+      
+      
+        ;
+      
+    
+
+ +`; + +exports[`SyntaxHighlighter overview 1 snapshot 1`] = ` + + .emotion-0 { + font-family: Menlo,monospace; + overflow-x: auto; + background-color: #e6e6e6; +} + +.emotion-0 code { + color: inherit; +} + +.emotion-1 { + box-sizing: border-box; + margin: 0; + min-width: 0; +} + +.emotion-2 { + display: inline-block; +} + +
+    
+      
+        import
+      
+      
+         
+      
+      
+        {
+      
+      
+         Button 
+      
+      
+        }
+      
+      
+         
+      
+      
+        from
+      
+      
+         
+      
+      
+        'theme-ui'
+      
+      
+        ;
+      
+    
+
+ +`; + +exports[`SyntaxHighlighter overview 2 snapshot 1`] = ` + + .emotion-0 { + font-family: Menlo,monospace; + overflow-x: auto; + background-color: #e6e6e6; +} + +.emotion-0 code { + color: inherit; +} + +.emotion-1 { + box-sizing: border-box; + margin: 0; + min-width: 0; +} + +.emotion-2 { + display: inline-block; +} + +
+    
+      
+        import
+      
+      
+         
+      
+      
+        {
+      
+      
+         Button 
+      
+      
+        }
+      
+      
+         
+      
+      
+        from
+      
+      
+         
+      
+      
+        'theme-ui'
+      
+      
+        ;
+      
+    
+
+ +`; + +exports[`SyntaxHighlighter overview 3 snapshot 1`] = ` + + .emotion-0 { + font-family: Menlo,monospace; + overflow-x: auto; + background-color: #e6e6e6; +} + +.emotion-0 code { + color: inherit; +} + +.emotion-1 { + box-sizing: border-box; + margin: 0; + min-width: 0; +} + +.emotion-2 { + display: inline-block; +} + +
+    
+      
+        import
+      
+      
+         
+      
+      
+        {
+      
+      
+         Button 
+      
+      
+        }
+      
+      
+         
+      
+      
+        from
+      
+      
+         
+      
+      
+        'theme-ui'
+      
+      
+        ;
+      
+    
+
+ +`; + +exports[`SyntaxHighlighter overview 4 snapshot 1`] = ` + + .emotion-0 { + font-family: Menlo,monospace; + overflow-x: auto; + background-color: #e6e6e6; +} + +.emotion-0 code { + color: inherit; +} + +.emotion-1 { + box-sizing: border-box; + margin: 0; + min-width: 0; +} + +.emotion-2 { + display: inline-block; +} + +
+    
+      
+        import
+      
+      
+         
+      
+      
+        {
+      
+      
+         Button 
+      
+      
+        }
+      
+      
+         
+      
+      
+        from
+      
+      
+         
+      
+      
+        'theme-ui'
+      
+      
+        ;
+      
+    
+
+ +`; + exports[`SyntaxHighlighter overview snapshot 1`] = ` .emotion-0 { diff --git a/ui/components/src/Table/Table.data.ts b/ui/components/src/Table/Table.data.ts new file mode 100644 index 000000000..42e58fd91 --- /dev/null +++ b/ui/components/src/Table/Table.data.ts @@ -0,0 +1,64 @@ +export default { + pagination: { + '0': { + totalCountVisible: false, + totalCountTemplate: 'Samara Fadel', + pageIndex: 0, + pageSize: 14, + pageTemplate: 'Jaylon Botsford', + pageVisible: true, + pageSizeTemplate: 'Prince Hayes', + pageSizeVisible: true, + goToPageVisible: false, + goToPageTemplate: 'Tania Orn', + }, + '1': { + totalCountVisible: true, + totalCountTemplate: 'Sonya Stracke', + pageIndex: 1, + pageSize: 11, + pageTemplate: 'Lulu Greenholt', + pageVisible: true, + pageSizeTemplate: 'Eleonore Bashirian', + pageSizeVisible: false, + goToPageVisible: true, + goToPageTemplate: 'Mrs. Paolo Yundt', + }, + '2': { + totalCountVisible: true, + totalCountTemplate: 'Dorian Cummings', + pageIndex: 0, + pageSize: 15, + pageTemplate: 'Pink Boehm PhD', + pageVisible: false, + pageSizeTemplate: 'Clementina Jacobi MD', + pageSizeVisible: false, + goToPageVisible: true, + goToPageTemplate: 'Wilmer Ruecker', + }, + '3': { + totalCountVisible: true, + totalCountTemplate: 'Guillermo Zboncak', + pageIndex: 1, + pageSize: 10, + pageTemplate: 'Stevie Braun', + pageVisible: true, + pageSizeTemplate: 'Kristy Ritchie', + pageSizeVisible: false, + goToPageVisible: false, + goToPageTemplate: 'Jerome Hirthe', + }, + '4': { + totalCountVisible: true, + totalCountTemplate: 'Ms. Candida Conroy', + pageIndex: 0, + pageSize: 10, + pageTemplate: 'Paolo Fritsch', + pageVisible: true, + pageSizeTemplate: 'Cassandra Williamson DVM', + pageSizeVisible: true, + goToPageVisible: false, + goToPageTemplate: 'Virgie Medhurst', + }, + }, +}; diff --git a/ui/components/src/Table/Table.test.ts b/ui/components/src/Table/Table.test.ts index b221d5f51..85e0eba31 100644 --- a/ui/components/src/Table/Table.test.ts +++ b/ui/components/src/Table/Table.test.ts @@ -8,28 +8,36 @@ import { render, act } from '@testing-library/react'; import { renderErr } from '@component-controls/test-renderers'; import * as examples from './Table.stories'; +import data from './Table.data'; describe('Table', () => { const configPath = path.resolve(__dirname, '../../.config'); const config = loadConfigurations(configPath); let renderedExamples: ReturnType = []; act(() => { - renderedExamples = renderDocument(examples, config); + renderedExamples = renderDocument(examples, config, data); }); if (!renderedExamples) { renderErr(); return; } - renderedExamples.forEach(({ name, rendered }) => { + renderedExamples.forEach(({ name, rendered, dataId, values }) => { describe(name, () => { - it('snapshot', () => { - const { asFragment } = render(rendered); - expect(asFragment()).toMatchSnapshot(); - }); - it('accessibility', async () => { - const axeResults = await reactRunDOM(rendered, run); - expect(axeResults).toHaveNoAxeViolations(); - }); + const runTests = () => { + it('snapshot', () => { + const { asFragment } = render(rendered); + expect(asFragment()).toMatchSnapshot(); + }); + it('accessibility', async () => { + const axeResults = await reactRunDOM(rendered, run); + expect(axeResults).toHaveNoAxeViolations(); + }); + }; + if (values) { + describe(dataId, runTests); + } else { + runTests(); + } }); }); }); diff --git a/ui/components/src/Table/__snapshots__/Table.test.ts.snap b/ui/components/src/Table/__snapshots__/Table.test.ts.snap index 085c63eb5..1ef5ef039 100644 --- a/ui/components/src/Table/__snapshots__/Table.test.ts.snap +++ b/ui/components/src/Table/__snapshots__/Table.test.ts.snap @@ -1753,6 +1753,5126 @@ exports[`Table overview snapshot 1`] = ` `; +exports[`Table pagination 0 snapshot 1`] = ` + + .emotion-0 { + box-sizing: border-box; + margin: 0; + min-width: 0; + margin: 0; + border-collapse: collapse; + font-size: 14px; + line-height: 20px; + text-align: left; + width: 100%; + border-spacing: 0; +} + +.emotion-0 p { + margin: 0; +} + +.emotion-0 pre { + white-space: pre-wrap; + word-wrap: break-word; + max-width: 240px; + background-color: inherit; + margin-top: 8px; + margin-bottom: 0; +} + +.emotion-0 a { + word-break: break-word; +} + +.emotion-1 { + box-sizing: border-box; + margin: 0; + min-width: 0; + border-bottom: 2px solid rgba(0, 0, 0, 0.1); + background-color: #ffffff; + color: #454f5b; +} + +.emotion-2 { + box-sizing: border-box; + margin: 0; + min-width: 0; +} + +.emotion-3 { + box-sizing: border-box; + margin: 0; + min-width: 0; + border: none; + padding-top: 16px; + padding-bottom: 16px; + padding-right: 8px; + padding-left: 16px; +} + +.emotion-4 { + box-sizing: border-box; + margin: 0; + min-width: 0; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +.emotion-5 { + box-sizing: border-box; + margin: 0; + min-width: 0; + margin-right: 4px; +} + +.emotion-21 { + box-sizing: border-box; + margin: 0; + min-width: 0; +} + +.emotion-21 tr:last-of-type { + border-bottom: 0; +} + +.emotion-22 { + box-sizing: border-box; + margin: 0; + min-width: 0; + border-bottom: 1px solid rgba(0, 0, 0, 0.1); +} + +.emotion-23 { + box-sizing: border-box; + margin: 0; + min-width: 0; + padding-top: 8px; + padding-bottom: 8px; + padding-left: 16px; + padding-right: 16px; + border-bottom: 0; +} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+ Age +
+
+ 		+
+
+ Name +
+
+ 		+
+
+ User Name +
+
+ 		+
+
+ Street +
+
+ 		+
+
+ City +
+
+ 		+
+
+ Zip Code +
+
+
+ 22 + + Edison Keebler + + Danielle_Pollich + + Jayde Rapids + + Montanaborough + + 20635 +
+ 24 + + London Runolfsson + + Audreanne.Sanford + + Towne Cliff + + Langoshport + + 65133 +
+ 25 + + Sebastian Gleason + + Johnathan.Klocko58 + + Haley Drives + + South Kiannaberg + + 58169 +
+ 25 + + Gladys Baumbach + + Darien.Gutmann + + Anastasia Points + + West Graycemouth + + 33850 +
+ 22 + + Ms. Jaunita Lubowitz + + Kody.McClure + + Lindgren Inlet + + Grimesshire + + 27558-3367 +
+ 23 + + Jacques Bernhard + + Nichole_Kozey4 + + Ramona Station + + Gunnerland + + 64856 +
+ 24 + + Dr. Rylee DuBuque + + Lewis.Vandervort7 + + Kelly Landing + + Lake Gabe + + 98806 +
+ 22 + + Nettie Runte + + Johnny.Marquardt30 + + Larson Square + + Hannaton + + 81636 +
+ 25 + + Isabell Feil Jr. + + Rafaela.Gusikowski4 + + Kaya Mountain + + Kemmerbury + + 01459 +
+ 24 + + Jillian Hoeger + + Annamae.Maggio23 + + Darlene Course + + Earlenebury + + 70931 +
+ 23 + + Melyssa Herman + + Verona_Wiza + + Zulauf Circle + + Corkeryland + + 52057-0050 +
+ 22 + + Urban Towne + + Kayleigh_Hauck + + Bechtelar Extensions + + Ruthshire + + 49065 +
+ 21 + + Hazle Hansen + + Hassie_Tillman73 + + Reichel Street + + West Audreymouth + + 53056-1765 +
+ 21 + + Jamarcus Stroman + + Orval13 + + Hobart Park + + West Rahul + + 60010 +
+ .emotion-0 { + box-sizing: border-box; + margin: 0; + min-width: 0; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + justify-content: space-between; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + background-color: #ffffff; + padding-top: 8px; + padding-bottom: 8px; +} + +.emotion-1 { + box-sizing: border-box; + margin: 0; + min-width: 0; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + padding-left: 16px; + padding-right: 16px; +} + +.emotion-2 { + box-sizing: border-box; + margin: 0; + min-width: 0; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +.emotion-3 { + box-sizing: border-box; + margin: 0; + min-width: 0; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + padding-left: 8px; + padding-right: 8px; +} + +.emotion-3 button { + width: 50px; + margin-left: 2px; + margin-right: 2px; +} + +.emotion-4 { + box-sizing: border-box; + margin: 0; + min-width: 0; + width: 50px; + margin-left: 2px; + margin-right: 2px; +} + +.emotion-5 { + box-sizing: border-box; + margin: 0; + min-width: 0; + -webkit-appearance: none; + -moz-appearance: none; + -ms-appearance: none; + appearance: none; + display: inline-block; + text-align: center; + line-height: inherit; + -webkit-text-decoration: none; + text-decoration: none; + font-size: inherit; + padding-left: 16px; + padding-right: 16px; + padding-top: 8px; + padding-bottom: 8px; + color: white; + background-color: #5c6ac4; + border: 0; + border-radius: 4px; + color: #333; + background-color: #f3f3f3; + border-radius: 5px; + box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 0px 1px inset; +} + +.emotion-5:disabled { + color: #aaa; +} + +.emotion-12 { + box-sizing: border-box; + margin: 0; + min-width: 0; + padding-left: 8px; + padding-right: 8px; +} + +.emotion-13 { + box-sizing: border-box; + margin: 0; + min-width: 0; + padding-left: 8px; + padding-right: 8px; + width: 140px; +} + +.emotion-14 { + box-sizing: border-box; + margin: 0; + min-width: 0; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; +} + +.emotion-15 { + box-sizing: border-box; + margin: 0; + min-width: 0; + display: block; + width: 100%; + padding: 8px; + -webkit-appearance: none; + -moz-appearance: none; + -ms-appearance: none; + appearance: none; + font-size: inherit; + line-height: inherit; + border: 1px solid; + border-radius: 4px; + color: inherit; + background-color: transparent; +} + +.emotion-16 { + box-sizing: border-box; + margin: 0; + min-width: 0; + margin-left: -28px; + -webkit-align-self: center; + -ms-flex-item-align: center; + align-self: center; + pointer-events: none; +} + +
+
+
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+ Jaylon Botsford +
+
+
+ + + + +
+
+
+
+ +`; + +exports[`Table pagination 1 snapshot 1`] = ` + + .emotion-0 { + box-sizing: border-box; + margin: 0; + min-width: 0; + margin: 0; + border-collapse: collapse; + font-size: 14px; + line-height: 20px; + text-align: left; + width: 100%; + border-spacing: 0; +} + +.emotion-0 p { + margin: 0; +} + +.emotion-0 pre { + white-space: pre-wrap; + word-wrap: break-word; + max-width: 240px; + background-color: inherit; + margin-top: 8px; + margin-bottom: 0; +} + +.emotion-0 a { + word-break: break-word; +} + +.emotion-1 { + box-sizing: border-box; + margin: 0; + min-width: 0; + border-bottom: 2px solid rgba(0, 0, 0, 0.1); + background-color: #ffffff; + color: #454f5b; +} + +.emotion-2 { + box-sizing: border-box; + margin: 0; + min-width: 0; +} + +.emotion-3 { + box-sizing: border-box; + margin: 0; + min-width: 0; + border: none; + padding-top: 16px; + padding-bottom: 16px; + padding-right: 8px; + padding-left: 16px; +} + +.emotion-4 { + box-sizing: border-box; + margin: 0; + min-width: 0; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +.emotion-5 { + box-sizing: border-box; + margin: 0; + min-width: 0; + margin-right: 4px; +} + +.emotion-21 { + box-sizing: border-box; + margin: 0; + min-width: 0; +} + +.emotion-21 tr:last-of-type { + border-bottom: 0; +} + +.emotion-22 { + box-sizing: border-box; + margin: 0; + min-width: 0; + border-bottom: 1px solid rgba(0, 0, 0, 0.1); +} + +.emotion-23 { + box-sizing: border-box; + margin: 0; + min-width: 0; + padding-top: 8px; + padding-bottom: 8px; + padding-left: 16px; + padding-right: 16px; + border-bottom: 0; +} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+ Age +
+
+ 		+
+
+ Name +
+
+ 		+
+
+ User Name +
+
+ 		+
+
+ Street +
+
+ 		+
+
+ City +
+
+ 		+
+
+ Zip Code +
+
+
+ 22 + + Urban Towne + + Kayleigh_Hauck + + Bechtelar Extensions + + Ruthshire + + 49065 +
+ 21 + + Hazle Hansen + + Hassie_Tillman73 + + Reichel Street + + West Audreymouth + + 53056-1765 +
+ 21 + + Jamarcus Stroman + + Orval13 + + Hobart Park + + West Rahul + + 60010 +
+ 24 + + Ms. Melany Senger + + Henderson.Kihn + + Lia Village + + DuBuqueview + + 93383 +
+ 25 + + Granville Mann + + Christine.Bahringer10 + + Hilpert Landing + + North Autumnside + + 87215-3190 +
+ 24 + + Delia Feeney + + Greyson13 + + Purdy Fords + + Zoilaside + + 96503 +
+ 25 + + Mr. Johanna Turcotte + + Dameon76 + + Mante Junctions + + North Roxane + + 17884-9473 +
+ 23 + + Renee Erdman + + Ben.Hammes + + Treutel Inlet + + Port Maiabury + + 21650 +
+ 24 + + Graham Brown + + Eloise.Schumm35 + + Alia Port + + Port Brandt + + 80217-7245 +
+ .emotion-0 { + box-sizing: border-box; + margin: 0; + min-width: 0; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + justify-content: space-between; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + background-color: #ffffff; + padding-top: 8px; + padding-bottom: 8px; +} + +.emotion-1 { + box-sizing: border-box; + margin: 0; + min-width: 0; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + padding-left: 16px; + padding-right: 16px; +} + +.emotion-2 { + box-sizing: border-box; + margin: 0; + min-width: 0; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +.emotion-3 { + box-sizing: border-box; + margin: 0; + min-width: 0; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + padding-left: 8px; + padding-right: 8px; +} + +.emotion-3 button { + width: 50px; + margin-left: 2px; + margin-right: 2px; +} + +.emotion-4 { + box-sizing: border-box; + margin: 0; + min-width: 0; + width: 50px; + margin-left: 2px; + margin-right: 2px; +} + +.emotion-5 { + box-sizing: border-box; + margin: 0; + min-width: 0; + -webkit-appearance: none; + -moz-appearance: none; + -ms-appearance: none; + appearance: none; + display: inline-block; + text-align: center; + line-height: inherit; + -webkit-text-decoration: none; + text-decoration: none; + font-size: inherit; + padding-left: 16px; + padding-right: 16px; + padding-top: 8px; + padding-bottom: 8px; + color: white; + background-color: #5c6ac4; + border: 0; + border-radius: 4px; + color: #333; + background-color: #f3f3f3; + border-radius: 5px; + box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 0px 1px inset; +} + +.emotion-5:disabled { + color: #aaa; +} + +.emotion-12 { + box-sizing: border-box; + margin: 0; + min-width: 0; + padding-left: 8px; + padding-right: 8px; +} + +.emotion-13 { + box-sizing: border-box; + margin: 0; + min-width: 0; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + padding-left: 8px; + padding-right: 8px; +} + +.emotion-13 input { + margin-left: 4px; + width: 100px; +} + +.emotion-14 { + box-sizing: border-box; + margin: 0; + min-width: 0; + display: block; + width: 100%; + padding: 8px; + -webkit-appearance: none; + -moz-appearance: none; + -ms-appearance: none; + appearance: none; + font-size: inherit; + line-height: inherit; + border: 1px solid; + border-radius: 4px; + color: inherit; + background-color: transparent; + padding: 4px; +} + +
+
+ Sonya Stracke +
+
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+ Lulu Greenholt +
+
+ Mrs. Paolo Yundt + +
+
+
+ +`; + +exports[`Table pagination 2 snapshot 1`] = ` + + .emotion-0 { + box-sizing: border-box; + margin: 0; + min-width: 0; + margin: 0; + border-collapse: collapse; + font-size: 14px; + line-height: 20px; + text-align: left; + width: 100%; + border-spacing: 0; +} + +.emotion-0 p { + margin: 0; +} + +.emotion-0 pre { + white-space: pre-wrap; + word-wrap: break-word; + max-width: 240px; + background-color: inherit; + margin-top: 8px; + margin-bottom: 0; +} + +.emotion-0 a { + word-break: break-word; +} + +.emotion-1 { + box-sizing: border-box; + margin: 0; + min-width: 0; + border-bottom: 2px solid rgba(0, 0, 0, 0.1); + background-color: #ffffff; + color: #454f5b; +} + +.emotion-2 { + box-sizing: border-box; + margin: 0; + min-width: 0; +} + +.emotion-3 { + box-sizing: border-box; + margin: 0; + min-width: 0; + border: none; + padding-top: 16px; + padding-bottom: 16px; + padding-right: 8px; + padding-left: 16px; +} + +.emotion-4 { + box-sizing: border-box; + margin: 0; + min-width: 0; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +.emotion-5 { + box-sizing: border-box; + margin: 0; + min-width: 0; + margin-right: 4px; +} + +.emotion-21 { + box-sizing: border-box; + margin: 0; + min-width: 0; +} + +.emotion-21 tr:last-of-type { + border-bottom: 0; +} + +.emotion-22 { + box-sizing: border-box; + margin: 0; + min-width: 0; + border-bottom: 1px solid rgba(0, 0, 0, 0.1); +} + +.emotion-23 { + box-sizing: border-box; + margin: 0; + min-width: 0; + padding-top: 8px; + padding-bottom: 8px; + padding-left: 16px; + padding-right: 16px; + border-bottom: 0; +} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+ Age +
+
+ 		+
+
+ Name +
+
+ 		+
+
+ User Name +
+
+ 		+
+
+ Street +
+
+ 		+
+
+ City +
+
+ 		+
+
+ Zip Code +
+
+
+ 22 + + Edison Keebler + + Danielle_Pollich + + Jayde Rapids + + Montanaborough + + 20635 +
+ 24 + + London Runolfsson + + Audreanne.Sanford + + Towne Cliff + + Langoshport + + 65133 +
+ 25 + + Sebastian Gleason + + Johnathan.Klocko58 + + Haley Drives + + South Kiannaberg + + 58169 +
+ 25 + + Gladys Baumbach + + Darien.Gutmann + + Anastasia Points + + West Graycemouth + + 33850 +
+ 22 + + Ms. Jaunita Lubowitz + + Kody.McClure + + Lindgren Inlet + + Grimesshire + + 27558-3367 +
+ 23 + + Jacques Bernhard + + Nichole_Kozey4 + + Ramona Station + + Gunnerland + + 64856 +
+ 24 + + Dr. Rylee DuBuque + + Lewis.Vandervort7 + + Kelly Landing + + Lake Gabe + + 98806 +
+ 22 + + Nettie Runte + + Johnny.Marquardt30 + + Larson Square + + Hannaton + + 81636 +
+ 25 + + Isabell Feil Jr. + + Rafaela.Gusikowski4 + + Kaya Mountain + + Kemmerbury + + 01459 +
+ 24 + + Jillian Hoeger + + Annamae.Maggio23 + + Darlene Course + + Earlenebury + + 70931 +
+ 23 + + Melyssa Herman + + Verona_Wiza + + Zulauf Circle + + Corkeryland + + 52057-0050 +
+ 22 + + Urban Towne + + Kayleigh_Hauck + + Bechtelar Extensions + + Ruthshire + + 49065 +
+ 21 + + Hazle Hansen + + Hassie_Tillman73 + + Reichel Street + + West Audreymouth + + 53056-1765 +
+ 21 + + Jamarcus Stroman + + Orval13 + + Hobart Park + + West Rahul + + 60010 +
+ 24 + + Ms. Melany Senger + + Henderson.Kihn + + Lia Village + + DuBuqueview + + 93383 +
+ .emotion-0 { + box-sizing: border-box; + margin: 0; + min-width: 0; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + justify-content: space-between; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + background-color: #ffffff; + padding-top: 8px; + padding-bottom: 8px; +} + +.emotion-1 { + box-sizing: border-box; + margin: 0; + min-width: 0; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + padding-left: 16px; + padding-right: 16px; +} + +.emotion-2 { + box-sizing: border-box; + margin: 0; + min-width: 0; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +.emotion-3 { + box-sizing: border-box; + margin: 0; + min-width: 0; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + padding-left: 8px; + padding-right: 8px; +} + +.emotion-3 button { + width: 50px; + margin-left: 2px; + margin-right: 2px; +} + +.emotion-4 { + box-sizing: border-box; + margin: 0; + min-width: 0; + width: 50px; + margin-left: 2px; + margin-right: 2px; +} + +.emotion-5 { + box-sizing: border-box; + margin: 0; + min-width: 0; + -webkit-appearance: none; + -moz-appearance: none; + -ms-appearance: none; + appearance: none; + display: inline-block; + text-align: center; + line-height: inherit; + -webkit-text-decoration: none; + text-decoration: none; + font-size: inherit; + padding-left: 16px; + padding-right: 16px; + padding-top: 8px; + padding-bottom: 8px; + color: white; + background-color: #5c6ac4; + border: 0; + border-radius: 4px; + color: #333; + background-color: #f3f3f3; + border-radius: 5px; + box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 0px 1px inset; +} + +.emotion-5:disabled { + color: #aaa; +} + +.emotion-12 { + box-sizing: border-box; + margin: 0; + min-width: 0; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + padding-left: 8px; + padding-right: 8px; +} + +.emotion-12 input { + margin-left: 4px; + width: 100px; +} + +.emotion-13 { + box-sizing: border-box; + margin: 0; + min-width: 0; + display: block; + width: 100%; + padding: 8px; + -webkit-appearance: none; + -moz-appearance: none; + -ms-appearance: none; + appearance: none; + font-size: inherit; + line-height: inherit; + border: 1px solid; + border-radius: 4px; + color: inherit; + background-color: transparent; + padding: 4px; +} + +
+
+ Dorian Cummings +
+
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+ Wilmer Ruecker + +
+
+
+ +`; + +exports[`Table pagination 3 snapshot 1`] = ` + + .emotion-0 { + box-sizing: border-box; + margin: 0; + min-width: 0; + margin: 0; + border-collapse: collapse; + font-size: 14px; + line-height: 20px; + text-align: left; + width: 100%; + border-spacing: 0; +} + +.emotion-0 p { + margin: 0; +} + +.emotion-0 pre { + white-space: pre-wrap; + word-wrap: break-word; + max-width: 240px; + background-color: inherit; + margin-top: 8px; + margin-bottom: 0; +} + +.emotion-0 a { + word-break: break-word; +} + +.emotion-1 { + box-sizing: border-box; + margin: 0; + min-width: 0; + border-bottom: 2px solid rgba(0, 0, 0, 0.1); + background-color: #ffffff; + color: #454f5b; +} + +.emotion-2 { + box-sizing: border-box; + margin: 0; + min-width: 0; +} + +.emotion-3 { + box-sizing: border-box; + margin: 0; + min-width: 0; + border: none; + padding-top: 16px; + padding-bottom: 16px; + padding-right: 8px; + padding-left: 16px; +} + +.emotion-4 { + box-sizing: border-box; + margin: 0; + min-width: 0; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +.emotion-5 { + box-sizing: border-box; + margin: 0; + min-width: 0; + margin-right: 4px; +} + +.emotion-21 { + box-sizing: border-box; + margin: 0; + min-width: 0; +} + +.emotion-21 tr:last-of-type { + border-bottom: 0; +} + +.emotion-22 { + box-sizing: border-box; + margin: 0; + min-width: 0; + border-bottom: 1px solid rgba(0, 0, 0, 0.1); +} + +.emotion-23 { + box-sizing: border-box; + margin: 0; + min-width: 0; + padding-top: 8px; + padding-bottom: 8px; + padding-left: 16px; + padding-right: 16px; + border-bottom: 0; +} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+ Age +
+
+ 		+
+
+ Name +
+
+ 		+
+
+ User Name +
+
+ 		+
+
+ Street +
+
+ 		+
+
+ City +
+
+ 		+
+
+ Zip Code +
+
+
+ 23 + + Melyssa Herman + + Verona_Wiza + + Zulauf Circle + + Corkeryland + + 52057-0050 +
+ 22 + + Urban Towne + + Kayleigh_Hauck + + Bechtelar Extensions + + Ruthshire + + 49065 +
+ 21 + + Hazle Hansen + + Hassie_Tillman73 + + Reichel Street + + West Audreymouth + + 53056-1765 +
+ 21 + + Jamarcus Stroman + + Orval13 + + Hobart Park + + West Rahul + + 60010 +
+ 24 + + Ms. Melany Senger + + Henderson.Kihn + + Lia Village + + DuBuqueview + + 93383 +
+ 25 + + Granville Mann + + Christine.Bahringer10 + + Hilpert Landing + + North Autumnside + + 87215-3190 +
+ 24 + + Delia Feeney + + Greyson13 + + Purdy Fords + + Zoilaside + + 96503 +
+ 25 + + Mr. Johanna Turcotte + + Dameon76 + + Mante Junctions + + North Roxane + + 17884-9473 +
+ 23 + + Renee Erdman + + Ben.Hammes + + Treutel Inlet + + Port Maiabury + + 21650 +
+ 24 + + Graham Brown + + Eloise.Schumm35 + + Alia Port + + Port Brandt + + 80217-7245 +
+ .emotion-0 { + box-sizing: border-box; + margin: 0; + min-width: 0; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + justify-content: space-between; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + background-color: #ffffff; + padding-top: 8px; + padding-bottom: 8px; +} + +.emotion-1 { + box-sizing: border-box; + margin: 0; + min-width: 0; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + padding-left: 16px; + padding-right: 16px; +} + +.emotion-2 { + box-sizing: border-box; + margin: 0; + min-width: 0; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +.emotion-3 { + box-sizing: border-box; + margin: 0; + min-width: 0; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + padding-left: 8px; + padding-right: 8px; +} + +.emotion-3 button { + width: 50px; + margin-left: 2px; + margin-right: 2px; +} + +.emotion-4 { + box-sizing: border-box; + margin: 0; + min-width: 0; + width: 50px; + margin-left: 2px; + margin-right: 2px; +} + +.emotion-5 { + box-sizing: border-box; + margin: 0; + min-width: 0; + -webkit-appearance: none; + -moz-appearance: none; + -ms-appearance: none; + appearance: none; + display: inline-block; + text-align: center; + line-height: inherit; + -webkit-text-decoration: none; + text-decoration: none; + font-size: inherit; + padding-left: 16px; + padding-right: 16px; + padding-top: 8px; + padding-bottom: 8px; + color: white; + background-color: #5c6ac4; + border: 0; + border-radius: 4px; + color: #333; + background-color: #f3f3f3; + border-radius: 5px; + box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 0px 1px inset; +} + +.emotion-5:disabled { + color: #aaa; +} + +.emotion-12 { + box-sizing: border-box; + margin: 0; + min-width: 0; + padding-left: 8px; + padding-right: 8px; +} + +
+
+ Guillermo Zboncak +
+
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+ Stevie Braun +
+
+
+ +`; + +exports[`Table pagination 4 snapshot 1`] = ` + + .emotion-0 { + box-sizing: border-box; + margin: 0; + min-width: 0; + margin: 0; + border-collapse: collapse; + font-size: 14px; + line-height: 20px; + text-align: left; + width: 100%; + border-spacing: 0; +} + +.emotion-0 p { + margin: 0; +} + +.emotion-0 pre { + white-space: pre-wrap; + word-wrap: break-word; + max-width: 240px; + background-color: inherit; + margin-top: 8px; + margin-bottom: 0; +} + +.emotion-0 a { + word-break: break-word; +} + +.emotion-1 { + box-sizing: border-box; + margin: 0; + min-width: 0; + border-bottom: 2px solid rgba(0, 0, 0, 0.1); + background-color: #ffffff; + color: #454f5b; +} + +.emotion-2 { + box-sizing: border-box; + margin: 0; + min-width: 0; +} + +.emotion-3 { + box-sizing: border-box; + margin: 0; + min-width: 0; + border: none; + padding-top: 16px; + padding-bottom: 16px; + padding-right: 8px; + padding-left: 16px; +} + +.emotion-4 { + box-sizing: border-box; + margin: 0; + min-width: 0; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +.emotion-5 { + box-sizing: border-box; + margin: 0; + min-width: 0; + margin-right: 4px; +} + +.emotion-21 { + box-sizing: border-box; + margin: 0; + min-width: 0; +} + +.emotion-21 tr:last-of-type { + border-bottom: 0; +} + +.emotion-22 { + box-sizing: border-box; + margin: 0; + min-width: 0; + border-bottom: 1px solid rgba(0, 0, 0, 0.1); +} + +.emotion-23 { + box-sizing: border-box; + margin: 0; + min-width: 0; + padding-top: 8px; + padding-bottom: 8px; + padding-left: 16px; + padding-right: 16px; + border-bottom: 0; +} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+ Age +
+
+ 		+
+
+ Name +
+
+ 		+
+
+ User Name +
+
+ 		+
+
+ Street +
+
+ 		+
+
+ City +
+
+ 		+
+
+ Zip Code +
+
+
+ 22 + + Edison Keebler + + Danielle_Pollich + + Jayde Rapids + + Montanaborough + + 20635 +
+ 24 + + London Runolfsson + + Audreanne.Sanford + + Towne Cliff + + Langoshport + + 65133 +
+ 25 + + Sebastian Gleason + + Johnathan.Klocko58 + + Haley Drives + + South Kiannaberg + + 58169 +
+ 25 + + Gladys Baumbach + + Darien.Gutmann + + Anastasia Points + + West Graycemouth + + 33850 +
+ 22 + + Ms. Jaunita Lubowitz + + Kody.McClure + + Lindgren Inlet + + Grimesshire + + 27558-3367 +
+ 23 + + Jacques Bernhard + + Nichole_Kozey4 + + Ramona Station + + Gunnerland + + 64856 +
+ 24 + + Dr. Rylee DuBuque + + Lewis.Vandervort7 + + Kelly Landing + + Lake Gabe + + 98806 +
+ 22 + + Nettie Runte + + Johnny.Marquardt30 + + Larson Square + + Hannaton + + 81636 +
+ 25 + + Isabell Feil Jr. + + Rafaela.Gusikowski4 + + Kaya Mountain + + Kemmerbury + + 01459 +
+ 24 + + Jillian Hoeger + + Annamae.Maggio23 + + Darlene Course + + Earlenebury + + 70931 +
+ .emotion-0 { + box-sizing: border-box; + margin: 0; + min-width: 0; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + justify-content: space-between; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + background-color: #ffffff; + padding-top: 8px; + padding-bottom: 8px; +} + +.emotion-1 { + box-sizing: border-box; + margin: 0; + min-width: 0; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + padding-left: 16px; + padding-right: 16px; +} + +.emotion-2 { + box-sizing: border-box; + margin: 0; + min-width: 0; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +.emotion-3 { + box-sizing: border-box; + margin: 0; + min-width: 0; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + padding-left: 8px; + padding-right: 8px; +} + +.emotion-3 button { + width: 50px; + margin-left: 2px; + margin-right: 2px; +} + +.emotion-4 { + box-sizing: border-box; + margin: 0; + min-width: 0; + width: 50px; + margin-left: 2px; + margin-right: 2px; +} + +.emotion-5 { + box-sizing: border-box; + margin: 0; + min-width: 0; + -webkit-appearance: none; + -moz-appearance: none; + -ms-appearance: none; + appearance: none; + display: inline-block; + text-align: center; + line-height: inherit; + -webkit-text-decoration: none; + text-decoration: none; + font-size: inherit; + padding-left: 16px; + padding-right: 16px; + padding-top: 8px; + padding-bottom: 8px; + color: white; + background-color: #5c6ac4; + border: 0; + border-radius: 4px; + color: #333; + background-color: #f3f3f3; + border-radius: 5px; + box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 0px 1px inset; +} + +.emotion-5:disabled { + color: #aaa; +} + +.emotion-12 { + box-sizing: border-box; + margin: 0; + min-width: 0; + padding-left: 8px; + padding-right: 8px; +} + +.emotion-13 { + box-sizing: border-box; + margin: 0; + min-width: 0; + padding-left: 8px; + padding-right: 8px; + width: 140px; +} + +.emotion-14 { + box-sizing: border-box; + margin: 0; + min-width: 0; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; +} + +.emotion-15 { + box-sizing: border-box; + margin: 0; + min-width: 0; + display: block; + width: 100%; + padding: 8px; + -webkit-appearance: none; + -moz-appearance: none; + -ms-appearance: none; + appearance: none; + font-size: inherit; + line-height: inherit; + border: 1px solid; + border-radius: 4px; + color: inherit; + background-color: transparent; +} + +.emotion-16 { + box-sizing: border-box; + margin: 0; + min-width: 0; + margin-left: -28px; + -webkit-align-self: center; + -ms-flex-item-align: center; + align-self: center; + pointer-events: none; +} + +
+
+ Ms. Candida Conroy +
+
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+ Paolo Fritsch +
+
+
+ + + + +
+
+
+
+ +`; + exports[`Table pagination snapshot 1`] = ` .emotion-0 { diff --git a/ui/components/src/Tabs/Tabs.data.ts b/ui/components/src/Tabs/Tabs.data.ts new file mode 100644 index 000000000..ff8b4c563 --- /dev/null +++ b/ui/components/src/Tabs/Tabs.data.ts @@ -0,0 +1 @@ +export default {}; diff --git a/ui/components/src/Tabs/Tabs.test.ts b/ui/components/src/Tabs/Tabs.test.ts index 7af369eab..d7442ee78 100644 --- a/ui/components/src/Tabs/Tabs.test.ts +++ b/ui/components/src/Tabs/Tabs.test.ts @@ -8,28 +8,36 @@ import { render, act } from '@testing-library/react'; import { renderErr } from '@component-controls/test-renderers'; import * as examples from './Tabs.stories'; +import data from './Tabs.data'; describe('Tabs', () => { const configPath = path.resolve(__dirname, '../../.config'); const config = loadConfigurations(configPath); let renderedExamples: ReturnType = []; act(() => { - renderedExamples = renderDocument(examples, config); + renderedExamples = renderDocument(examples, config, data); }); if (!renderedExamples) { renderErr(); return; } - renderedExamples.forEach(({ name, rendered }) => { + renderedExamples.forEach(({ name, rendered, dataId, values }) => { describe(name, () => { - it('snapshot', () => { - const { asFragment } = render(rendered); - expect(asFragment()).toMatchSnapshot(); - }); - it('accessibility', async () => { - const axeResults = await reactRunDOM(rendered, run); - expect(axeResults).toHaveNoAxeViolations(); - }); + const runTests = () => { + it('snapshot', () => { + const { asFragment } = render(rendered); + expect(asFragment()).toMatchSnapshot(); + }); + it('accessibility', async () => { + const axeResults = await reactRunDOM(rendered, run); + expect(axeResults).toHaveNoAxeViolations(); + }); + }; + if (values) { + describe(dataId, runTests); + } else { + runTests(); + } }); }); }); diff --git a/ui/components/src/Tag/Tag.data.ts b/ui/components/src/Tag/Tag.data.ts new file mode 100644 index 000000000..c7e1130dc --- /dev/null +++ b/ui/components/src/Tag/Tag.data.ts @@ -0,0 +1,9 @@ +export default { + overview: { + '0': {}, + '1': {}, + '2': {}, + '3': {}, + '4': {}, + }, +}; diff --git a/ui/components/src/Tag/Tag.test.ts b/ui/components/src/Tag/Tag.test.ts index d9edce87a..270012343 100644 --- a/ui/components/src/Tag/Tag.test.ts +++ b/ui/components/src/Tag/Tag.test.ts @@ -8,28 +8,36 @@ import { render, act } from '@testing-library/react'; import { renderErr } from '@component-controls/test-renderers'; import * as examples from './Tag.stories'; +import data from './Tag.data'; describe('Tag', () => { const configPath = path.resolve(__dirname, '../../.config'); const config = loadConfigurations(configPath); let renderedExamples: ReturnType = []; act(() => { - renderedExamples = renderDocument(examples, config); + renderedExamples = renderDocument(examples, config, data); }); if (!renderedExamples) { renderErr(); return; } - renderedExamples.forEach(({ name, rendered }) => { + renderedExamples.forEach(({ name, rendered, dataId, values }) => { describe(name, () => { - it('snapshot', () => { - const { asFragment } = render(rendered); - expect(asFragment()).toMatchSnapshot(); - }); - it('accessibility', async () => { - const axeResults = await reactRunDOM(rendered, run); - expect(axeResults).toHaveNoAxeViolations(); - }); + const runTests = () => { + it('snapshot', () => { + const { asFragment } = render(rendered); + expect(asFragment()).toMatchSnapshot(); + }); + it('accessibility', async () => { + const axeResults = await reactRunDOM(rendered, run); + expect(axeResults).toHaveNoAxeViolations(); + }); + }; + if (values) { + describe(dataId, runTests); + } else { + runTests(); + } }); }); }); diff --git a/ui/components/src/Tag/__snapshots__/Tag.test.ts.snap b/ui/components/src/Tag/__snapshots__/Tag.test.ts.snap index 3b30c70dc..cf6bf408e 100644 --- a/ui/components/src/Tag/__snapshots__/Tag.test.ts.snap +++ b/ui/components/src/Tag/__snapshots__/Tag.test.ts.snap @@ -1,5 +1,170 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP +exports[`Tag overview 0 snapshot 1`] = ` + + .emotion-0 { + box-sizing: border-box; + margin: 0; + min-width: 0; + display: inline-block; + padding-left: 4px; + padding-right: 4px; + border-radius: 5px; + white-space: nowrap; + background-color: rgba(255,0,0,0.15); + border: 2px solid red; +} + +.emotion-1 { + box-sizing: border-box; + margin: 0; + min-width: 0; +} + + + + some text + + + +`; + +exports[`Tag overview 1 snapshot 1`] = ` + + .emotion-0 { + box-sizing: border-box; + margin: 0; + min-width: 0; + display: inline-block; + padding-left: 4px; + padding-right: 4px; + border-radius: 5px; + white-space: nowrap; + background-color: rgba(255,0,0,0.15); + border: 2px solid red; +} + +.emotion-1 { + box-sizing: border-box; + margin: 0; + min-width: 0; +} + + + + some text + + + +`; + +exports[`Tag overview 2 snapshot 1`] = ` + + .emotion-0 { + box-sizing: border-box; + margin: 0; + min-width: 0; + display: inline-block; + padding-left: 4px; + padding-right: 4px; + border-radius: 5px; + white-space: nowrap; + background-color: rgba(255,0,0,0.15); + border: 2px solid red; +} + +.emotion-1 { + box-sizing: border-box; + margin: 0; + min-width: 0; +} + + + + some text + + + +`; + +exports[`Tag overview 3 snapshot 1`] = ` + + .emotion-0 { + box-sizing: border-box; + margin: 0; + min-width: 0; + display: inline-block; + padding-left: 4px; + padding-right: 4px; + border-radius: 5px; + white-space: nowrap; + background-color: rgba(255,0,0,0.15); + border: 2px solid red; +} + +.emotion-1 { + box-sizing: border-box; + margin: 0; + min-width: 0; +} + + + + some text + + + +`; + +exports[`Tag overview 4 snapshot 1`] = ` + + .emotion-0 { + box-sizing: border-box; + margin: 0; + min-width: 0; + display: inline-block; + padding-left: 4px; + padding-right: 4px; + border-radius: 5px; + white-space: nowrap; + background-color: rgba(255,0,0,0.15); + border: 2px solid red; +} + +.emotion-1 { + box-sizing: border-box; + margin: 0; + min-width: 0; +} + + + + some text + + + +`; + exports[`Tag overview snapshot 1`] = ` .emotion-0 { diff --git a/ui/components/src/TitledImage/TitledImage.data.ts b/ui/components/src/TitledImage/TitledImage.data.ts new file mode 100644 index 000000000..c7e1130dc --- /dev/null +++ b/ui/components/src/TitledImage/TitledImage.data.ts @@ -0,0 +1,9 @@ +export default { + overview: { + '0': {}, + '1': {}, + '2': {}, + '3': {}, + '4': {}, + }, +}; diff --git a/ui/components/src/TitledImage/TitledImage.test.ts b/ui/components/src/TitledImage/TitledImage.test.ts index 6c580f96b..df828b1f0 100644 --- a/ui/components/src/TitledImage/TitledImage.test.ts +++ b/ui/components/src/TitledImage/TitledImage.test.ts @@ -8,28 +8,36 @@ import { render, act } from '@testing-library/react'; import { renderErr } from '@component-controls/test-renderers'; import * as examples from './TitledImage.stories'; +import data from './TitledImage.data'; describe('TitledImage', () => { const configPath = path.resolve(__dirname, '../../.config'); const config = loadConfigurations(configPath); let renderedExamples: ReturnType = []; act(() => { - renderedExamples = renderDocument(examples, config); + renderedExamples = renderDocument(examples, config, data); }); if (!renderedExamples) { renderErr(); return; } - renderedExamples.forEach(({ name, rendered }) => { + renderedExamples.forEach(({ name, rendered, dataId, values }) => { describe(name, () => { - it('snapshot', () => { - const { asFragment } = render(rendered); - expect(asFragment()).toMatchSnapshot(); - }); - it('accessibility', async () => { - const axeResults = await reactRunDOM(rendered, run); - expect(axeResults).toHaveNoAxeViolations(); - }); + const runTests = () => { + it('snapshot', () => { + const { asFragment } = render(rendered); + expect(asFragment()).toMatchSnapshot(); + }); + it('accessibility', async () => { + const axeResults = await reactRunDOM(rendered, run); + expect(axeResults).toHaveNoAxeViolations(); + }); + }; + if (values) { + describe(dataId, runTests); + } else { + runTests(); + } }); }); }); diff --git a/ui/components/src/TitledImage/__snapshots__/TitledImage.test.ts.snap b/ui/components/src/TitledImage/__snapshots__/TitledImage.test.ts.snap index ac867a8ee..b20c06200 100644 --- a/ui/components/src/TitledImage/__snapshots__/TitledImage.test.ts.snap +++ b/ui/components/src/TitledImage/__snapshots__/TitledImage.test.ts.snap @@ -1,5 +1,280 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP +exports[`TitledImage overview 0 snapshot 1`] = ` + + .emotion-0 { + box-sizing: border-box; + margin: 0; + min-width: 0; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +.emotion-1 { + box-sizing: border-box; + margin: 0; + min-width: 0; + max-width: 100%; + height: auto; +} + +.emotion-2 { + box-sizing: border-box; + margin: 0; + min-width: 0; + color: #69768C; + padding-top: 8px; + padding-bottom: 8px; + font-size: 14px; +} + +
+ alt text + + some image title + +
+ +`; + +exports[`TitledImage overview 1 snapshot 1`] = ` + + .emotion-0 { + box-sizing: border-box; + margin: 0; + min-width: 0; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +.emotion-1 { + box-sizing: border-box; + margin: 0; + min-width: 0; + max-width: 100%; + height: auto; +} + +.emotion-2 { + box-sizing: border-box; + margin: 0; + min-width: 0; + color: #69768C; + padding-top: 8px; + padding-bottom: 8px; + font-size: 14px; +} + +
+ alt text + + some image title + +
+ +`; + +exports[`TitledImage overview 2 snapshot 1`] = ` + + .emotion-0 { + box-sizing: border-box; + margin: 0; + min-width: 0; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +.emotion-1 { + box-sizing: border-box; + margin: 0; + min-width: 0; + max-width: 100%; + height: auto; +} + +.emotion-2 { + box-sizing: border-box; + margin: 0; + min-width: 0; + color: #69768C; + padding-top: 8px; + padding-bottom: 8px; + font-size: 14px; +} + +
+ alt text + + some image title + +
+ +`; + +exports[`TitledImage overview 3 snapshot 1`] = ` + + .emotion-0 { + box-sizing: border-box; + margin: 0; + min-width: 0; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +.emotion-1 { + box-sizing: border-box; + margin: 0; + min-width: 0; + max-width: 100%; + height: auto; +} + +.emotion-2 { + box-sizing: border-box; + margin: 0; + min-width: 0; + color: #69768C; + padding-top: 8px; + padding-bottom: 8px; + font-size: 14px; +} + +
+ alt text + + some image title + +
+ +`; + +exports[`TitledImage overview 4 snapshot 1`] = ` + + .emotion-0 { + box-sizing: border-box; + margin: 0; + min-width: 0; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +.emotion-1 { + box-sizing: border-box; + margin: 0; + min-width: 0; + max-width: 100%; + height: auto; +} + +.emotion-2 { + box-sizing: border-box; + margin: 0; + min-width: 0; + color: #69768C; + padding-top: 8px; + padding-bottom: 8px; + font-size: 14px; +} + +
+ alt text + + some image title + +
+ +`; + exports[`TitledImage overview snapshot 1`] = ` .emotion-0 { diff --git a/ui/components/src/Toggle/Toggle.data.ts b/ui/components/src/Toggle/Toggle.data.ts new file mode 100644 index 000000000..ff8b4c563 --- /dev/null +++ b/ui/components/src/Toggle/Toggle.data.ts @@ -0,0 +1 @@ +export default {}; diff --git a/ui/components/src/Toggle/Toggle.test.ts b/ui/components/src/Toggle/Toggle.test.ts index 81d6cd66e..77a4d2290 100644 --- a/ui/components/src/Toggle/Toggle.test.ts +++ b/ui/components/src/Toggle/Toggle.test.ts @@ -8,28 +8,36 @@ import { render, act } from '@testing-library/react'; import { renderErr } from '@component-controls/test-renderers'; import * as examples from './Toggle.stories'; +import data from './Toggle.data'; describe('Toggle', () => { const configPath = path.resolve(__dirname, '../../.config'); const config = loadConfigurations(configPath); let renderedExamples: ReturnType = []; act(() => { - renderedExamples = renderDocument(examples, config); + renderedExamples = renderDocument(examples, config, data); }); if (!renderedExamples) { renderErr(); return; } - renderedExamples.forEach(({ name, rendered }) => { + renderedExamples.forEach(({ name, rendered, dataId, values }) => { describe(name, () => { - it('snapshot', () => { - const { asFragment } = render(rendered); - expect(asFragment()).toMatchSnapshot(); - }); - it('accessibility', async () => { - const axeResults = await reactRunDOM(rendered, run); - expect(axeResults).toHaveNoAxeViolations(); - }); + const runTests = () => { + it('snapshot', () => { + const { asFragment } = render(rendered); + expect(asFragment()).toMatchSnapshot(); + }); + it('accessibility', async () => { + const axeResults = await reactRunDOM(rendered, run); + expect(axeResults).toHaveNoAxeViolations(); + }); + }; + if (values) { + describe(dataId, runTests); + } else { + runTests(); + } }); }); }); diff --git a/ui/components/src/Tree/Tree.data.ts b/ui/components/src/Tree/Tree.data.ts new file mode 100644 index 000000000..ff8b4c563 --- /dev/null +++ b/ui/components/src/Tree/Tree.data.ts @@ -0,0 +1 @@ +export default {}; diff --git a/ui/components/src/Tree/Tree.test.ts b/ui/components/src/Tree/Tree.test.ts index 0210d52ea..e6375da8b 100644 --- a/ui/components/src/Tree/Tree.test.ts +++ b/ui/components/src/Tree/Tree.test.ts @@ -8,28 +8,36 @@ import { render, act } from '@testing-library/react'; import { renderErr } from '@component-controls/test-renderers'; import * as examples from './Tree.stories'; +import data from './Tree.data'; describe('Tree', () => { const configPath = path.resolve(__dirname, '../../.config'); const config = loadConfigurations(configPath); let renderedExamples: ReturnType = []; act(() => { - renderedExamples = renderDocument(examples, config); + renderedExamples = renderDocument(examples, config, data); }); if (!renderedExamples) { renderErr(); return; } - renderedExamples.forEach(({ name, rendered }) => { + renderedExamples.forEach(({ name, rendered, dataId, values }) => { describe(name, () => { - it('snapshot', () => { - const { asFragment } = render(rendered); - expect(asFragment()).toMatchSnapshot(); - }); - it('accessibility', async () => { - const axeResults = await reactRunDOM(rendered, run); - expect(axeResults).toHaveNoAxeViolations(); - }); + const runTests = () => { + it('snapshot', () => { + const { asFragment } = render(rendered); + expect(asFragment()).toMatchSnapshot(); + }); + it('accessibility', async () => { + const axeResults = await reactRunDOM(rendered, run); + expect(axeResults).toHaveNoAxeViolations(); + }); + }; + if (values) { + describe(dataId, runTests); + } else { + runTests(); + } }); }); }); diff --git a/ui/components/src/Value/Value.data.ts b/ui/components/src/Value/Value.data.ts new file mode 100644 index 000000000..121c6d15f --- /dev/null +++ b/ui/components/src/Value/Value.data.ts @@ -0,0 +1,24 @@ +export default { + overview: { + '0': { + label: 'Kianna Upton', + value: 'Delta Littel', + }, + '1': { + label: 'Parker Torphy', + value: 'Kaden Mosciski', + }, + '2': { + label: 'Mr. Favian Bins', + value: 'Ms. Erica Collins', + }, + '3': { + label: 'Karianne Walsh', + value: 'Rashad Wunsch', + }, + '4': { + label: 'Gage Hoppe', + value: 'Ezra Hodkiewicz', + }, + }, +}; diff --git a/ui/components/src/Value/Value.test.ts b/ui/components/src/Value/Value.test.ts index 4d0286ad6..723b4677d 100644 --- a/ui/components/src/Value/Value.test.ts +++ b/ui/components/src/Value/Value.test.ts @@ -8,28 +8,36 @@ import { render, act } from '@testing-library/react'; import { renderErr } from '@component-controls/test-renderers'; import * as examples from './Value.stories'; +import data from './Value.data'; describe('Value', () => { const configPath = path.resolve(__dirname, '../../.config'); const config = loadConfigurations(configPath); let renderedExamples: ReturnType = []; act(() => { - renderedExamples = renderDocument(examples, config); + renderedExamples = renderDocument(examples, config, data); }); if (!renderedExamples) { renderErr(); return; } - renderedExamples.forEach(({ name, rendered }) => { + renderedExamples.forEach(({ name, rendered, dataId, values }) => { describe(name, () => { - it('snapshot', () => { - const { asFragment } = render(rendered); - expect(asFragment()).toMatchSnapshot(); - }); - it('accessibility', async () => { - const axeResults = await reactRunDOM(rendered, run); - expect(axeResults).toHaveNoAxeViolations(); - }); + const runTests = () => { + it('snapshot', () => { + const { asFragment } = render(rendered); + expect(asFragment()).toMatchSnapshot(); + }); + it('accessibility', async () => { + const axeResults = await reactRunDOM(rendered, run); + expect(axeResults).toHaveNoAxeViolations(); + }); + }; + if (values) { + describe(dataId, runTests); + } else { + runTests(); + } }); }); }); diff --git a/ui/components/src/Value/__snapshots__/Value.test.ts.snap b/ui/components/src/Value/__snapshots__/Value.test.ts.snap index d6e396bdf..039d664df 100644 --- a/ui/components/src/Value/__snapshots__/Value.test.ts.snap +++ b/ui/components/src/Value/__snapshots__/Value.test.ts.snap @@ -1,5 +1,275 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP +exports[`Value overview 0 snapshot 1`] = ` + + .emotion-0 { + box-sizing: border-box; + margin: 0; + min-width: 0; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-align-items: flex-end; + -webkit-box-align: flex-end; + -ms-flex-align: flex-end; + align-items: flex-end; +} + +.emotion-1 { + box-sizing: border-box; + margin: 0; + min-width: 0; + font-size: 12px; + color: #69768C; + margin-right: 4px; + line-height: 1.25; +} + +.emotion-2 { + box-sizing: border-box; + margin: 0; + min-width: 0; + font-size: 16px; + line-height: 1.25; +} + +
+ + Kianna Upton + + + Delta Littel + +
+ +`; + +exports[`Value overview 1 snapshot 1`] = ` + + .emotion-0 { + box-sizing: border-box; + margin: 0; + min-width: 0; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-align-items: flex-end; + -webkit-box-align: flex-end; + -ms-flex-align: flex-end; + align-items: flex-end; +} + +.emotion-1 { + box-sizing: border-box; + margin: 0; + min-width: 0; + font-size: 12px; + color: #69768C; + margin-right: 4px; + line-height: 1.25; +} + +.emotion-2 { + box-sizing: border-box; + margin: 0; + min-width: 0; + font-size: 16px; + line-height: 1.25; +} + +
+ + Parker Torphy + + + Kaden Mosciski + +
+ +`; + +exports[`Value overview 2 snapshot 1`] = ` + + .emotion-0 { + box-sizing: border-box; + margin: 0; + min-width: 0; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-align-items: flex-end; + -webkit-box-align: flex-end; + -ms-flex-align: flex-end; + align-items: flex-end; +} + +.emotion-1 { + box-sizing: border-box; + margin: 0; + min-width: 0; + font-size: 12px; + color: #69768C; + margin-right: 4px; + line-height: 1.25; +} + +.emotion-2 { + box-sizing: border-box; + margin: 0; + min-width: 0; + font-size: 16px; + line-height: 1.25; +} + +
+ + Mr. Favian Bins + + + Ms. Erica Collins + +
+ +`; + +exports[`Value overview 3 snapshot 1`] = ` + + .emotion-0 { + box-sizing: border-box; + margin: 0; + min-width: 0; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-align-items: flex-end; + -webkit-box-align: flex-end; + -ms-flex-align: flex-end; + align-items: flex-end; +} + +.emotion-1 { + box-sizing: border-box; + margin: 0; + min-width: 0; + font-size: 12px; + color: #69768C; + margin-right: 4px; + line-height: 1.25; +} + +.emotion-2 { + box-sizing: border-box; + margin: 0; + min-width: 0; + font-size: 16px; + line-height: 1.25; +} + +
+ + Karianne Walsh + + + Rashad Wunsch + +
+ +`; + +exports[`Value overview 4 snapshot 1`] = ` + + .emotion-0 { + box-sizing: border-box; + margin: 0; + min-width: 0; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-align-items: flex-end; + -webkit-box-align: flex-end; + -ms-flex-align: flex-end; + align-items: flex-end; +} + +.emotion-1 { + box-sizing: border-box; + margin: 0; + min-width: 0; + font-size: 12px; + color: #69768C; + margin-right: 4px; + line-height: 1.25; +} + +.emotion-2 { + box-sizing: border-box; + margin: 0; + min-width: 0; + font-size: 16px; + line-height: 1.25; +} + +
+ + Gage Hoppe + + + Ezra Hodkiewicz + +
+ +`; + exports[`Value overview snapshot 1`] = ` .emotion-0 { diff --git a/ui/components/src/Zoom/Zoom.data.ts b/ui/components/src/Zoom/Zoom.data.ts new file mode 100644 index 000000000..ff8b4c563 --- /dev/null +++ b/ui/components/src/Zoom/Zoom.data.ts @@ -0,0 +1 @@ +export default {}; diff --git a/ui/components/src/Zoom/Zoom.test.ts b/ui/components/src/Zoom/Zoom.test.ts index 9d6541ad5..986936388 100644 --- a/ui/components/src/Zoom/Zoom.test.ts +++ b/ui/components/src/Zoom/Zoom.test.ts @@ -8,28 +8,36 @@ import { render, act } from '@testing-library/react'; import { renderErr } from '@component-controls/test-renderers'; import * as examples from './Zoom.stories'; +import data from './Zoom.data'; describe('Zoom', () => { const configPath = path.resolve(__dirname, '../../.config'); const config = loadConfigurations(configPath); let renderedExamples: ReturnType = []; act(() => { - renderedExamples = renderDocument(examples, config); + renderedExamples = renderDocument(examples, config, data); }); if (!renderedExamples) { renderErr(); return; } - renderedExamples.forEach(({ name, rendered }) => { + renderedExamples.forEach(({ name, rendered, dataId, values }) => { describe(name, () => { - it('snapshot', () => { - const { asFragment } = render(rendered); - expect(asFragment()).toMatchSnapshot(); - }); - it('accessibility', async () => { - const axeResults = await reactRunDOM(rendered, run); - expect(axeResults).toHaveNoAxeViolations(); - }); + const runTests = () => { + it('snapshot', () => { + const { asFragment } = render(rendered); + expect(asFragment()).toMatchSnapshot(); + }); + it('accessibility', async () => { + const axeResults = await reactRunDOM(rendered, run); + expect(axeResults).toHaveNoAxeViolations(); + }); + }; + if (values) { + describe(dataId, runTests); + } else { + runTests(); + } }); }); });