Preparing layout stories

FastyBird · Jul 6, 2021 · 30f685b · 30f685b
1 parent bb6a280
commit 30f685b
Show file tree

Hide file tree

Showing 8 changed files with 198 additions and 11 deletions.
diff --git a/.storybook/preview.js b/.storybook/preview.js
@@ -11,9 +11,11 @@ import {
   faCog,
   faEnvelope,
   faExclamation,
+  faHeart,
   faInfo,
   faInfoCircle,
   faMagic,
+  faMugHot,
   faNewspaper,
   faPaperPlane,
   faTrash,
@@ -29,9 +31,11 @@ library.add(faChartBar)
 library.add(faCog)
 library.add(faEnvelope)
 library.add(faExclamation)
+library.add(faHeart)
 library.add(faInfo)
 library.add(faInfoCircle)
 library.add(faMagic)
+library.add(faMugHot)
 library.add(faNewspaper)
 library.add(faPaperPlane)
 library.add(faTrash)

diff --git a/src/assets/components/layout/fb-footer.scss b/src/assets/components/layout/fb-footer.scss
@@ -1,12 +1,21 @@
+@import "../../variables/colors";
+@import "../../variables/layout";
+@import "../../variables/texts";
 @import "../../variables/screen";
 
-$z-index:                             1000 !default;
+$z-index:                             $zindex-layout-footer;
 
-$footer-padding:                      0 1.5rem;
-$footer-color:                        #777;
-$footer-background-color:             darken(#fcfcfc, 5%);
-$footer-border-color:                 darken(#fcfcfc, 10%);
+$footer-font-family:                  $font-family-base;
+$footer-font-size:                    $font-size-base;
+
+$footer-padding:                      0 $padding-md;
+$footer-color:                        $gray;
+$footer-background-color:             darken($bg-color-body, 5%);
+$footer-border-color:                 darken($bg-color-body, 10%);
 $footer-height:                       3rem;
 $footer-line-height:                  $footer-height;
 
+$footer-link-color:                   $color-default;
+$footer-link-hover-decoration:        underline;
+
 $screen-phone-max:                    $screen-xs-max;
diff --git a/src/assets/components/ui/fb-items-container.scss b/src/assets/components/ui/fb-items-container.scss
@@ -9,12 +9,12 @@ $container-margin:                              1.5rem 0 0 0;
 $heading-container-height:                      3.8rem;
 $heading-container-border-color:                #ddd;
 
-$heading-padding:                               0 0 0 1rem;
+$heading-padding:                               0;
 $heading-font-size:                             $font-size-h4;
 $heading-line-height:                           3.8rem;
 $heading-small-color:                           $gray-light;
 
-$heading-buttons-padding:                       0 1rem 0 0;
+$heading-buttons-padding:                       0;
 $heading-buttons-button-min-width:              3.5rem;
 $heading-buttons-button-height:                 3rem;
 $heading-buttons-button-padding:                0 1rem;

diff --git a/src/components/layout/FbContent/index.vue b/src/components/layout/FbContent/index.vue
@@ -1,4 +1,4 @@
-<template>
+<template functional>
   <div class="fb-layout-content__container">
     <div
       v-if="'header' in $slots"
@@ -8,7 +8,7 @@
     </div>
 
     <div class="fb-layout-content__content">
-      <slot name="content" />
+      <slot />
     </div>
 
     <div

diff --git a/src/components/layout/FbContent/stories.ts b/src/components/layout/FbContent/stories.ts
@@ -0,0 +1,70 @@
+import { Meta, Story } from '@storybook/vue'
+
+import FbLayoutContent from './index.vue'
+
+export default {
+  component: FbLayoutContent,
+  title: 'Components/Layout/FB Content',
+  argTypes: {
+    default: {
+      type: { name: 'string', required: true },
+      control: { type: 'text' },
+      description: 'Content body slot',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: '-' },
+      },
+    },
+    header: {
+      type: { name: 'string', required: false },
+      control: { type: 'text' },
+      description: 'Content header slot',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: '-' },
+      },
+    },
+    footer: {
+      type: { name: 'string', required: false },
+      control: { type: 'text' },
+      description: 'Content footer slot',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: '-' },
+      },
+    },
+  },
+  parameters: {
+    knobs: { disabled: true },
+  },
+} as Meta
+
+interface TemplateArgs {
+  default: string
+  header?: string
+  footer?: string
+}
+
+const Template: Story<TemplateArgs> = (args) => {
+  return {
+    props: args,
+    components: { FbLayoutContent },
+    template: `
+      <div style="height: 150px">
+        <fb-layout-content>
+          <template v-if="${args.default !== null && typeof args.default !== 'undefined'}" slot="default">${args.default}</template>
+          <template v-if="${args.header !== null && typeof args.header !== 'undefined'}" slot="header">${args.header}</template>
+          <template v-if="${args.footer !== null && typeof args.footer !== 'undefined'}" slot="footer">${args.footer}</template>
+        </fb-layout-content>
+      </div>
+    `,
+  }
+}
+
+export const Default = Template.bind({})
+
+Default.args = {
+  default: 'Full height content',
+  header: 'Content header slot placed on top',
+  footer: 'Content footer slot placed on bottom',
+}
diff --git a/src/components/layout/FbFooter/index.scss b/src/components/layout/FbFooter/index.scss
@@ -2,6 +2,8 @@
 
 .fb-layout-footer {
   &__container {
+    font-family: $footer-font-family;
+    font-size: $footer-font-size;
     z-index: $z-index;
     height: $footer-height;
     overflow: hidden;
@@ -17,5 +19,26 @@
     color: $footer-color;
     padding: $footer-padding;
     line-height: $footer-line-height;
+
+    a {
+      color: $footer-link-color;
+      text-decoration: none;
+
+      &:hover,
+      &:focus {
+        @media (hover: hover) and (pointer: fine) {
+          color: $footer-link-color;
+          text-decoration: $footer-link-hover-decoration;
+        }
+      }
+
+      &:focus {
+        // WebKit-specific. Other browsers will keep their default outline style.
+        // (Initially tried to also force default via `outline: initial`,
+        // but that seems to erroneously remove the outline in Firefox altogether.)
+        outline: 5px auto -webkit-focus-ring-color;
+        outline-offset: -2px;
+      }
+    }
   }
 }
diff --git a/src/components/layout/FbFooter/stories.ts b/src/components/layout/FbFooter/stories.ts
@@ -0,0 +1,81 @@
+import { Meta, Story } from '@storybook/vue'
+
+import FbLayoutFooter from './index.vue'
+
+export default {
+  component: FbLayoutFooter,
+  title: 'Components/Layout/FB Footer',
+  argTypes: {
+    default: {
+      type: { name: 'string', required: false },
+      control: { type: 'text' },
+      description: 'Footer custom content slot',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: '-' },
+      },
+    },
+    copyright: {
+      type: { name: 'string', required: false },
+      control: { type: 'text' },
+      defaultValue: '© 2017',
+      description: 'Copyright text',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: '© 2017' },
+      },
+    },
+    author: {
+      type: { name: 'string', required: false },
+      control: { type: 'text' },
+      defaultValue: 'FastyBird s.r.o.',
+      description: 'Application author name',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: 'FastyBird s.r.o.' },
+      },
+    },
+    website: {
+      type: { name: 'string', required: false },
+      control: { type: 'text' },
+      defaultValue: 'https://www.fastybird.com',
+      description: 'Application author website',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: 'https://www.fastybird.com' },
+      },
+    },
+  },
+  parameters: {
+    knobs: { disabled: true },
+  },
+} as Meta
+
+interface TemplateArgs {
+  default?: string
+  copyright?: string
+  author?: string
+  website?: string
+}
+
+const Template: Story<TemplateArgs> = (args) => {
+  return {
+    props: args,
+    components: { FbLayoutFooter },
+    template: `
+      <fb-layout-footer :copyright="copyright" :author="author" :website="website">
+        <template v-if="${args.default !== null && typeof args.default !== 'undefined'}" slot="default">${args.default}</template>
+      </fb-layout-footer>
+    `,
+  }
+}
+
+export const Default = Template.bind({})
+
+export const WithCustomContent = Template.bind({})
+
+WithCustomContent.args = {
+  default: `
+    Made with lot of <font-awesome-icon icon="mug-hot" /> and <font-awesome-icon icon="heart" />
+  `
+}
diff --git a/src/components/ui/FbItemsContainer/stories.ts b/src/components/ui/FbItemsContainer/stories.ts
@@ -83,7 +83,7 @@ Default.args = {
   heading: 'List of awesome items',
   default: 'Some item content',
   buttons: `
-    <fb-ui-button size="${FbSizeTypes.SMALL}" @click.prevent="onClick">Add</fb-ui-button>
+    <fb-ui-button size="${FbSizeTypes.SMALL}" @click.prevent="onClick" style="margin-right: 5px">Add</fb-ui-button>
     <fb-ui-button size="${FbSizeTypes.SMALL}" variant="${FbUiButtonVariantTypes.WARNING}" :icon="true"  @click.prevent="onClick">
         <font-awesome-icon icon="cog" slot="icon" />
     </fb-ui-button>
@@ -97,7 +97,7 @@ WithSubheading.args = {
   subheading: 'List of awesome items',
   default: 'Some item content',
   buttons: `
-    <fb-ui-button size="${FbSizeTypes.SMALL}" @click.prevent="onClick">Add</fb-ui-button>
+    <fb-ui-button size="${FbSizeTypes.SMALL}" @click.prevent="onClick" style="margin-right: 5px">Add</fb-ui-button>
     <fb-ui-button size="${FbSizeTypes.SMALL}" variant="${FbUiButtonVariantTypes.WARNING}" :icon="true"  @click.prevent="onClick">
         <font-awesome-icon icon="cog" slot="icon" />
     </fb-ui-button>