From a16ebb8a67bfe58b8c470610de869db0fef1ff06 Mon Sep 17 00:00:00 2001
From: "v.zheleztsov" <v.zheleztsov@qvant.ru>
Date: Tue, 19 Jan 2021 13:26:58 +0300
Subject: [PATCH 1/2] upd Layout

---
 src/qComponents/QCol/QCol.test.js             |   9 ++
 .../QCol/__snapshots__/QCol.test.js.snap      |   7 ++
 src/qComponents/QRow/QRow.test.js             |   9 ++
 .../QRow/__snapshots__/QRow.test.js.snap      |   7 ++
 stories/components/Layout/Layout.stories.js   | 116 ++++++++++++++++++
 stories/components/Layout/QCol.stories.js     |  31 +++--
 stories/components/Layout/QRow.stories.js     |  36 +++---
 stories/components/Layout/layout.scss         |  34 +++--
 8 files changed, 204 insertions(+), 45 deletions(-)
 create mode 100644 src/qComponents/QCol/QCol.test.js
 create mode 100644 src/qComponents/QCol/__snapshots__/QCol.test.js.snap
 create mode 100644 src/qComponents/QRow/QRow.test.js
 create mode 100644 src/qComponents/QRow/__snapshots__/QRow.test.js.snap
 create mode 100644 stories/components/Layout/Layout.stories.js

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`] = `
+<div
+  class="q-col"
+/>
+`;
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`] = `
+<div
+  class="q-row"
+/>
+`;
diff --git a/stories/components/Layout/Layout.stories.js b/stories/components/Layout/Layout.stories.js
new file mode 100644
index 00000000..ac7abb53
--- /dev/null
+++ b/stories/components/Layout/Layout.stories.js
@@ -0,0 +1,116 @@
+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: `
+    <div class="demo" :style="demoStyles">
+      <q-row class="demo__row">
+        <q-col class="demo__col" cols="8">
+          <div class="demo__content">8</div>
+        </q-col>
+
+        <q-col class="demo__col" cols="4">
+          <div class="demo__content">4</div>
+        </q-col>
+
+        <q-col class="demo__col" cols="4">
+          <div class="demo__content">4</div>
+        </q-col>
+
+        <q-col class="demo__col" cols="4">
+          <div class="demo__content">4</div>
+        </q-col>
+
+        <q-col class="demo__col" cols="2">
+          <div class="demo__content">2</div>
+        </q-col>
+
+        <q-col class="demo__col" cols="2">
+          <div class="demo__content">2</div>
+        </q-col>
+      </q-row>
+
+      <q-row class="demo__row">
+        <q-col class="demo__col" cols="2">
+          <div class="demo__content">2</div>
+        </q-col>
+
+        <q-col class="demo__col" cols="8">
+          <div class="demo__content">8</div>
+        </q-col>
+
+        <q-col class="demo__col" cols="2">
+          <div class="demo__content">2</div>
+        </q-col>
+      </q-row>
+
+      <q-row class="demo__row">
+        <q-col class="demo__col" cols="2">
+          <div class="demo__content">2</div>
+        </q-col>
+
+        <q-col class="demo__col" cols="5">
+          <div class="demo__content">5</div>
+        </q-col>
+
+        <q-col class="demo__col" cols="2">
+          <div class="demo__content">2</div>
+        </q-col>
+
+        <q-col class="demo__col" cols="3">
+          <div class="demo__content">3</div>
+        </q-col>
+      </q-row>
+
+      <q-row class="demo__row">
+        <q-col class="demo__col" cols="5">
+          <div class="demo__content">5</div>
+        </q-col>
+
+        <q-col class="demo__col" cols="7">
+          <div class="demo__content">7</div>
+        </q-col>
+      </q-row>
+
+      <q-row class="demo__row"
+      >
+        <q-col class="demo__col" cols="10">
+          <div class="demo__content">10</div>
+        </q-col>
+
+        <q-col class="demo__col" cols="2">
+          <div class="demo__content">2</div>
+        </q-col>
+      </q-row>
+    </div>
+  `
+});
+
+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: `
-    <q-row
-      class="demo-row"
-    >
-      <q-col
-        cols="2"
-        class="demo-col"
-      >2</q-col>
-      <q-col
-        v-bind="$props"
-        class="demo-col"
-      >dyn</q-col>
-      <q-col
-        cols="2"
-        class="demo-col"
-      >2</q-col>
-    </q-row>
+    <div class="demo">
+      <q-row class="demo__row">
+        <q-col class="demo__col" cols="2">
+          <div class="demo__content">2</div>
+        </q-col>
+
+        <q-col class="demo__col" v-bind="$props">
+          <div class="demo__content">dyn</div>
+        </q-col>
+
+        <q-col class="demo__col" cols="2">
+          <div class="demo__content">2</div>
+        </q-col>
+      </q-row>
+    </div>
   `
 });
 
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: `
-    <q-row
-      v-bind="$props"
-      class="demo-row"
-    >
-      <q-col
-        cols="2"
-        class="demo-col"
-      >2</q-col>
-      <q-col
-        cols="4"
-        class="demo-col"
-      >4</q-col>
-      <q-col
-        cols="2"
-        class="demo-col"
-      >2</q-col>
-    </q-row>
+    <div class="demo">
+      <q-row class="demo__row" v-bind="$props">
+        <q-col class="demo-col" cols="2">
+          <div class="demo__content">2</div>
+        </q-col>
+
+        <q-col class="demo__col" cols="4">
+          <div class="demo__content" style="height: 25px;">4</div>
+        </q-col>
+
+        <q-col class="demo__col" cols="2">
+          <div class="demo__content">2</div>
+        </q-col>
+      </q-row>
+    </div>
   `
 });
 
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);
   }
 }

From 0740724431cd90c0d1d2a5603ac411628c41a3bd Mon Sep 17 00:00:00 2001
From: "v.zheleztsov" <v.zheleztsov@qvant.ru>
Date: Tue, 19 Jan 2021 13:48:31 +0300
Subject: [PATCH 2/2] fix

---
 stories/components/Layout/Layout.stories.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/stories/components/Layout/Layout.stories.js b/stories/components/Layout/Layout.stories.js
index ac7abb53..8179739e 100644
--- a/stories/components/Layout/Layout.stories.js
+++ b/stories/components/Layout/Layout.stories.js
@@ -99,8 +99,7 @@ export const QRowStory = (_, { argTypes }) => ({
         </q-col>
       </q-row>
 
-      <q-row class="demo__row"
-      >
+      <q-row class="demo__row">
         <q-col class="demo__col" cols="10">
           <div class="demo__content">10</div>
         </q-col>