diff --git a/src/qComponents/QCol/QCol.test.js b/src/qComponents/QCol/QCol.test.js new file mode 100644 index 00000000..6e148b8d --- /dev/null +++ b/src/qComponents/QCol/QCol.test.js @@ -0,0 +1,9 @@ +import Component from './src/QCol'; + +describe('QCol', () => { + it('should match snapshot', async () => { + const { element } = shallowMount(Component); + + expect(element).toMatchSnapshot(); + }); +}); diff --git a/src/qComponents/QCol/__snapshots__/QCol.test.js.snap b/src/qComponents/QCol/__snapshots__/QCol.test.js.snap new file mode 100644 index 00000000..1d3d64a8 --- /dev/null +++ b/src/qComponents/QCol/__snapshots__/QCol.test.js.snap @@ -0,0 +1,7 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`QCol should match snapshot 1`] = ` +
+`; diff --git a/src/qComponents/QRow/QRow.test.js b/src/qComponents/QRow/QRow.test.js new file mode 100644 index 00000000..27d1d5ea --- /dev/null +++ b/src/qComponents/QRow/QRow.test.js @@ -0,0 +1,9 @@ +import Component from './src/QRow'; + +describe('QRow', () => { + it('should match snapshot', async () => { + const { element } = shallowMount(Component); + + expect(element).toMatchSnapshot(); + }); +}); diff --git a/src/qComponents/QRow/__snapshots__/QRow.test.js.snap b/src/qComponents/QRow/__snapshots__/QRow.test.js.snap new file mode 100644 index 00000000..bba0b4c4 --- /dev/null +++ b/src/qComponents/QRow/__snapshots__/QRow.test.js.snap @@ -0,0 +1,7 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`QRow should match snapshot 1`] = ` +
+`; diff --git a/stories/components/Layout/Layout.stories.js b/stories/components/Layout/Layout.stories.js new file mode 100644 index 00000000..8179739e --- /dev/null +++ b/stories/components/Layout/Layout.stories.js @@ -0,0 +1,115 @@ +import QCol from '../../../src/qComponents/QCol'; +import QRow from '../../../src/qComponents/QRow'; +import './layout.scss'; + +export default { + title: 'Components/Layout', + subcomponents: { QRow, QCol }, + argTypes: { + gutter: { + name: 'gutter', + control: 'text', + type: { name: 'string', required: false }, + description: 'grid spacing (in CSS units)', + table: { + type: { + summary: ['string'] + } + } + } + } +}; + +export const QRowStory = (_, { argTypes }) => ({ + props: Object.keys(argTypes), + computed: { + demoStyles() { + return { + '--layout-gutter': (this.gutter ?? '').trim() + }; + } + }, + template: ` +
+ + +
8
+ + + +
4
+ + + +
4
+ + + +
4
+ + + +
2
+ + + +
2
+ + + + + +
2
+ + + +
8
+ + + +
2
+ + + + + +
2
+ + + +
5
+ + + +
2
+ + + +
3
+ + + + + +
5
+ + + +
7
+ + + + + +
10
+ + + +
2
+ + +
+ ` +}); + +QRowStory.storyName = 'Default'; diff --git a/stories/components/Layout/QCol.stories.js b/stories/components/Layout/QCol.stories.js index bd22b6a3..1aa1f0ba 100644 --- a/stories/components/Layout/QCol.stories.js +++ b/stories/components/Layout/QCol.stories.js @@ -25,22 +25,21 @@ export default { export const QColStory = (_, { argTypes }) => ({ props: Object.keys(argTypes), template: ` - - 2 - dyn - 2 - +
+ + +
2
+ + + +
dyn
+ + + +
2
+ + +
` }); diff --git a/stories/components/Layout/QRow.stories.js b/stories/components/Layout/QRow.stories.js index 837f915e..579434b4 100644 --- a/stories/components/Layout/QRow.stories.js +++ b/stories/components/Layout/QRow.stories.js @@ -10,13 +10,13 @@ export default { alignV: { control: { type: 'select', - options: ['start', 'end', 'center', 'baseline', 'stretch'] + options: [null, 'start', 'end', 'center', 'baseline', 'stretch'] } }, alignH: { control: { type: 'select', - options: ['start', 'end', 'center', 'between', 'around'] + options: [null, 'start', 'end', 'center', 'between', 'around'] } } } @@ -25,23 +25,21 @@ export default { export const QRowStory = (_, { argTypes }) => ({ props: Object.keys(argTypes), template: ` - - 2 - 4 - 2 - +
+ + +
2
+ + + +
4
+ + + +
2
+ + +
` }); diff --git a/stories/components/Layout/layout.scss b/stories/components/Layout/layout.scss index d108e614..40489eba 100644 --- a/stories/components/Layout/layout.scss +++ b/stories/components/Layout/layout.scss @@ -1,14 +1,28 @@ -.demo-row { - width: 500px; - min-height: 50px; - background-color: var(--color-tertiary-gray); -} +.demo { + display: flex; + flex-direction: column; + align-items: center; + width: 1000px; + max-width: 100%; + + &__row { + width: 100%; -.demo-col { - background-color: var(--color-tertiary-gray-ultra-darker); - border-radius: var(--border-radius-base); + &:nth-child(odd) { + .demo__content { + background-color: var(--color-primary-blue-light); + } + } + } - &:nth-child(odd) { - background-color: var(--color-tertiary-gray-ultra-dark); + &__content { + display: flex; + justify-content: center; + align-items: center; + width: 100%; + height: 50px; + margin-bottom: var(--layout-gutter); + background-color: var(--color-primary-blue-aqua); + border-radius: var(--border-radius-base); } }