[Layout] Add story with gutter (#40)

* upd Layout
altai-ui · Jan 19, 2021 · e664116 · e664116
1 parent 720aab2
commit e664116
Show file tree

Hide file tree

Showing 8 changed files with 203 additions and 45 deletions.
diff --git a/src/qComponents/QCol/QCol.test.js 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
@@ -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
@@ -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
@@ -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
@@ -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: `
+    <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
@@ -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
@@ -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
@@ -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);
   }
 }