Gradient line variant + fixing types definition for UI components (#21)

FastyBird · Mar 7, 2022 · bbb9c75 · bbb9c75
1 parent 2846b9f
commit bbb9c75
Show file tree

Hide file tree

Showing 33 changed files with 337 additions and 189 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fastybird/web-ui-theme",
-  "version": "0.7.2",
+  "version": "0.8.0",
   "description": "FastyBird basic theme & Vue components for web apps",
   "keywords": [
     "fastybird",

diff --git a/src/assets/components/ui/fb-divider.scss b/src/assets/components/ui/fb-divider.scss
@@ -1,4 +1,5 @@
 @use "sass:math";
+@import "../../variables/colors";
 @import "../../variables/screen";
 @import "../../variables/texts";
 
@@ -9,3 +10,5 @@ $divider-size-half: math.ceil(math.div($divider-size, 2)) !default;
 $divider-margin: 2rem 0;
 $divider-color: #ddd;
 $screen-tablet-min: $screen-sm-min;
+$screen-gradient-color: $gray-light;
+$screen-gradient-bgcolor: transparent;
diff --git a/src/components/ui/FbAlert/types.ts b/src/components/ui/FbAlert/types.ts
@@ -1,5 +1,5 @@
 import { FbUiVariantTypes } from "@/types";
 
 export interface IFbUiAlertProps {
-  variant: FbUiVariantTypes;
+  variant?: FbUiVariantTypes;
 }
diff --git a/src/components/ui/FbButton/types.ts b/src/components/ui/FbButton/types.ts
@@ -6,16 +6,16 @@ import {
 } from "@/types";
 
 export interface IFbUiButtonProps {
-  action: string | { [key: string]: any } | null;
-  actionType: FbUiButtonActionsTypes;
-  type: FbUiButtonButtonTypes;
-  size: FbSizeTypes;
-  variant: FbUiButtonVariantTypes;
-  block: boolean;
-  uppercase: boolean;
-  pill: boolean;
-  thick: boolean;
-  active: boolean;
-  disabled: boolean;
-  loading: boolean;
+  action?: string | { [key: string]: any } | null;
+  actionType?: FbUiButtonActionsTypes;
+  type?: FbUiButtonButtonTypes;
+  size?: FbSizeTypes;
+  variant?: FbUiButtonVariantTypes;
+  block?: boolean;
+  uppercase?: boolean;
+  pill?: boolean;
+  thick?: boolean;
+  active?: boolean;
+  disabled?: boolean;
+  loading?: boolean;
 }
diff --git a/src/components/ui/FbComponentLoading/types.ts b/src/components/ui/FbComponentLoading/types.ts
@@ -1,6 +1,6 @@
 import { FbSizeTypes } from "@/types";
 
 export interface IFbUiComponentLoadingProps {
-  text: string;
-  size: FbSizeTypes;
+  text?: string;
+  size?: FbSizeTypes;
 }
diff --git a/src/components/ui/FbComponentLoadingError/types.ts b/src/components/ui/FbComponentLoadingError/types.ts
@@ -1,6 +1,6 @@
 import { FbSizeTypes } from "@/types";
 
 export interface IFbUiComponentLoadingErrorProps {
-  text: string;
-  size: FbSizeTypes;
+  text?: string;
+  size?: FbSizeTypes;
 }
diff --git a/src/components/ui/FbConfirmationWindow/types.ts b/src/components/ui/FbConfirmationWindow/types.ts
@@ -5,14 +5,14 @@ import {
 } from "@/types";
 
 export interface IFbUiConfirmationWindowProps {
-  size: FbSizeTypes;
-  primaryButton: FbUiConfirmationWindowPrimaryButtonTypes;
-  variant: FbUiVariantTypes;
-  showYes: boolean;
-  yesBtnLabel: string;
-  showNo: boolean;
-  noBtnLabel: string;
-  enableClosing: boolean;
-  transparentBg: boolean;
-  show: boolean;
+  size?: FbSizeTypes;
+  primaryButton?: FbUiConfirmationWindowPrimaryButtonTypes;
+  variant?: FbUiVariantTypes;
+  showYes?: boolean;
+  yesBtnLabel?: string;
+  showNo?: boolean;
+  noBtnLabel?: string;
+  enableClosing?: boolean;
+  transparentBg?: boolean;
+  show?: boolean;
 }
diff --git a/src/components/ui/FbDivider/index.scss b/src/components/ui/FbDivider/index.scss
@@ -46,6 +46,37 @@
         }
       }
     }
+
+    &[data-variant="gradient"] {
+      height: 1px;
+      border: 0;
+      background: $screen-gradient-color;
+      background:
+        -webkit-gradient(
+          linear,
+          0 0,
+          100% 0,
+          from($screen-gradient-bgcolor),
+          to($screen-gradient-bgcolor),
+          color-stop(50%, $screen-gradient-color)
+        );
+
+      &[data-type="vertical"] {
+        @media (min-width: $screen-tablet-min) {
+          height: 100%;
+          width: 1px;
+          background:
+            -webkit-gradient(
+              linear,
+              0 100%,
+              0 0,
+              from($screen-gradient-bgcolor),
+              to($screen-gradient-bgcolor),
+              color-stop(50%, $screen-gradient-color)
+            );
+        }
+      }
+    }
   }
 
   &__content {

diff --git a/src/components/ui/FbDivider/index.vue b/src/components/ui/FbDivider/index.vue
@@ -1,6 +1,15 @@
 <template>
+  <hr
+    v-if="variant === variantTypes.GRADIENT"
+    :data-type="type"
+    :data-variant="variant"
+    class="fb-theme-ui-divider__container"
+  >
+
   <div
+    v-else
     :data-type="type"
+    :data-variant="variant"
     class="fb-theme-ui-divider__container"
   >
     <div class="fb-theme-ui-divider__content">
@@ -15,7 +24,7 @@ import {
   PropType,
 } from 'vue'
 
-import { FbUiDividerVariantTypes } from '@/types'
+import { FbUiDividerTypeTypes, FbUiDividerVariantTypes } from '@/types'
 
 export default defineComponent({
 
@@ -24,19 +33,37 @@ export default defineComponent({
   props: {
 
     type: {
+      type: String as PropType<FbUiDividerTypeTypes>,
+      default: FbUiDividerTypeTypes.HORIZONTAL,
+      validator: (value: FbUiDividerTypeTypes) => {
+        // The value must match one of these strings
+        return [
+          FbUiDividerTypeTypes.HORIZONTAL,
+          FbUiDividerTypeTypes.VERTICAL,
+        ].includes(value)
+      },
+    },
+
+    variant: {
       type: String as PropType<FbUiDividerVariantTypes>,
-      default: FbUiDividerVariantTypes.HORIZONTAL,
+      default: FbUiDividerVariantTypes.DEFAULT,
       validator: (value: FbUiDividerVariantTypes) => {
         // The value must match one of these strings
         return [
-          FbUiDividerVariantTypes.HORIZONTAL,
-          FbUiDividerVariantTypes.VERTICAL,
+          FbUiDividerVariantTypes.DEFAULT,
+          FbUiDividerVariantTypes.GRADIENT,
         ].includes(value)
       },
     },
 
   },
 
+  setup() {
+    return {
+      variantTypes: FbUiDividerVariantTypes,
+    }
+  },
+
 })
 </script>
 

diff --git a/src/components/ui/FbDivider/stories.ts b/src/components/ui/FbDivider/stories.ts
@@ -4,7 +4,7 @@ import {
   Story,
 } from '@storybook/vue3'
 
-import { FbUiDividerVariantTypes } from '@/types'
+import { FbUiDividerTypeTypes, FbUiDividerVariantTypes } from '@/types'
 
 import { IFbUiDividerProps } from './types'
 import FbUiDivider from './index.vue'
@@ -26,15 +26,29 @@ export default {
     type: {
       type: { name: 'string', required: false },
       control: { type: 'select' },
-      defaultValue: FbUiDividerVariantTypes.HORIZONTAL,
+      defaultValue: FbUiDividerTypeTypes.HORIZONTAL,
       options: [
-        FbUiDividerVariantTypes.HORIZONTAL,
-        FbUiDividerVariantTypes.VERTICAL,
+        FbUiDividerTypeTypes.HORIZONTAL,
+        FbUiDividerTypeTypes.VERTICAL,
       ],
       description: 'Divider type',
       table: {
         type: { summary: 'string' },
-        defaultValue: { summary: FbUiDividerVariantTypes.HORIZONTAL },
+        defaultValue: { summary: FbUiDividerTypeTypes.HORIZONTAL },
+      },
+    },
+    variant: {
+      type: { name: 'string', required: false },
+      control: { type: 'select' },
+      defaultValue: FbUiDividerVariantTypes.DEFAULT,
+      options: [
+        FbUiDividerVariantTypes.DEFAULT,
+        FbUiDividerVariantTypes.GRADIENT,
+      ],
+      description: 'Divider variant',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: FbUiDividerVariantTypes.DEFAULT },
       },
     },
   },
@@ -77,19 +91,19 @@ export const Horizontal: Story<TemplateArgs> = () => {
           <span>Content</span>
         </div>
         <div style="position: relative;">
-          <fb-ui-divider type="${FbUiDividerVariantTypes.HORIZONTAL}">AND</fb-ui-divider>
+          <fb-ui-divider type="${FbUiDividerTypeTypes.HORIZONTAL}">AND</fb-ui-divider>
         </div>
         <div style="border: 1px solid rgb(221, 221, 221);height: 100px;flex-grow: 2;display: flex;place-content: center;justify-content: center;align-items: center;">
           <span>Content</span>
         </div>
         <div style="position: relative;">
-          <fb-ui-divider type="${FbUiDividerVariantTypes.HORIZONTAL}">AND</fb-ui-divider>
+          <fb-ui-divider type="${FbUiDividerTypeTypes.HORIZONTAL}">AND</fb-ui-divider>
         </div>
         <div style="border: 1px solid rgb(221, 221, 221);height: 100px;flex-grow: 2;display: flex;place-content: center;justify-content: center;align-items: center;">
           <span>Content</span>
         </div>
         <div style="position: relative;">
-          <fb-ui-divider type="${FbUiDividerVariantTypes.HORIZONTAL}">=</fb-ui-divider>
+          <fb-ui-divider type="${FbUiDividerTypeTypes.HORIZONTAL}">=</fb-ui-divider>
         </div>
         <div style="border: 1px solid rgb(221, 221, 221);height: 100px;flex-grow: 2;display: flex;place-content: center;justify-content: center;align-items: center;">
           <span>Content</span>
@@ -108,19 +122,81 @@ export const Vertical: Story<TemplateArgs> = () => {
           <span>Content</span>
         </div>
         <div style="position: relative; width: 50px;">
-          <fb-ui-divider type="${FbUiDividerVariantTypes.VERTICAL}">OR</fb-ui-divider>
+          <fb-ui-divider type="${FbUiDividerTypeTypes.VERTICAL}">OR</fb-ui-divider>
+        </div>
+        <div style="border: 1px solid rgb(221, 221, 221);height: 100px;flex-grow: 2;display: flex;place-content: center;justify-content: center;align-items: center;">
+          <span>Content</span>
+        </div>
+        <div style="position: relative; width: 50px;">
+          <fb-ui-divider type="${FbUiDividerTypeTypes.VERTICAL}">OR</fb-ui-divider>
+        </div>
+        <div style="border: 1px solid rgb(221, 221, 221);height: 100px;flex-grow: 2;display: flex;place-content: center;justify-content: center;align-items: center;">
+          <span>Content</span>
+        </div>
+        <div style="position: relative; width: 50px;">
+          <fb-ui-divider type="${FbUiDividerTypeTypes.VERTICAL}">OR</fb-ui-divider>
+        </div>
+        <div style="border: 1px solid rgb(221, 221, 221);height: 100px;flex-grow: 2;display: flex;place-content: center;justify-content: center;align-items: center;">
+          <span>Content</span>
+        </div>
+      </div>
+    `,
+  }
+}
+
+export const GradientHorizontal: Story<TemplateArgs> = () => {
+  return {
+    components: { FbUiDivider },
+    template: `
+      <div style="display: flex; flex-direction: column;">
+        <div style="border: 1px solid rgb(221, 221, 221);height: 100px;flex-grow: 2;display: flex;place-content: center;justify-content: center;align-items: center;">
+          <span>Content</span>
+        </div>
+        <div style="position: relative;">
+          <fb-ui-divider type="${FbUiDividerTypeTypes.HORIZONTAL}" variant="${FbUiDividerVariantTypes.GRADIENT}" />
+        </div>
+        <div style="border: 1px solid rgb(221, 221, 221);height: 100px;flex-grow: 2;display: flex;place-content: center;justify-content: center;align-items: center;">
+          <span>Content</span>
+        </div>
+        <div style="position: relative;">
+          <fb-ui-divider type="${FbUiDividerTypeTypes.HORIZONTAL}" variant="${FbUiDividerVariantTypes.GRADIENT}" />
+        </div>
+        <div style="border: 1px solid rgb(221, 221, 221);height: 100px;flex-grow: 2;display: flex;place-content: center;justify-content: center;align-items: center;">
+          <span>Content</span>
+        </div>
+        <div style="position: relative;">
+          <fb-ui-divider type="${FbUiDividerTypeTypes.HORIZONTAL}" variant="${FbUiDividerVariantTypes.GRADIENT}" />
+        </div>
+        <div style="border: 1px solid rgb(221, 221, 221);height: 100px;flex-grow: 2;display: flex;place-content: center;justify-content: center;align-items: center;">
+          <span>Content</span>
+        </div>
+      </div>
+    `,
+  }
+}
+
+export const GradientVertical: Story<TemplateArgs> = () => {
+  return {
+    components: { FbUiDivider },
+    template: `
+      <div style="display: flex; flex-direction: row;">
+        <div style="border: 1px solid rgb(221, 221, 221);height: 100px;flex-grow: 2;display: flex;place-content: center;justify-content: center;align-items: center;">
+          <span>Content</span>
+        </div>
+        <div style="position: relative; width: 50px;">
+          <fb-ui-divider type="${FbUiDividerTypeTypes.VERTICAL}" variant="${FbUiDividerVariantTypes.GRADIENT}" />
         </div>
         <div style="border: 1px solid rgb(221, 221, 221);height: 100px;flex-grow: 2;display: flex;place-content: center;justify-content: center;align-items: center;">
           <span>Content</span>
         </div>
         <div style="position: relative; width: 50px;">
-          <fb-ui-divider type="${FbUiDividerVariantTypes.VERTICAL}">OR</fb-ui-divider>
+          <fb-ui-divider type="${FbUiDividerTypeTypes.VERTICAL}" variant="${FbUiDividerVariantTypes.GRADIENT}" />
         </div>
         <div style="border: 1px solid rgb(221, 221, 221);height: 100px;flex-grow: 2;display: flex;place-content: center;justify-content: center;align-items: center;">
           <span>Content</span>
         </div>
         <div style="position: relative; width: 50px;">
-          <fb-ui-divider type="${FbUiDividerVariantTypes.VERTICAL}">OR</fb-ui-divider>
+          <fb-ui-divider type="${FbUiDividerTypeTypes.VERTICAL}" variant="${FbUiDividerVariantTypes.GRADIENT}" />
         </div>
         <div style="border: 1px solid rgb(221, 221, 221);height: 100px;flex-grow: 2;display: flex;place-content: center;justify-content: center;align-items: center;">
           <span>Content</span>

diff --git a/src/components/ui/FbDivider/types.ts b/src/components/ui/FbDivider/types.ts
@@ -1,5 +1,9 @@
-import { FbUiDividerVariantTypes } from "@/types";
+import {
+  FbUiDividerTypeTypes,
+  FbUiDividerVariantTypes,
+} from '@/types'
 
 export interface IFbUiDividerProps {
-  type: FbUiDividerVariantTypes;
+  type?: FbUiDividerTypeTypes;
+  variant?: FbUiDividerVariantTypes;
 }
diff --git a/src/components/ui/FbIconWithChild/types.ts b/src/components/ui/FbIconWithChild/types.ts
@@ -4,6 +4,6 @@ import {
 } from "@/types";
 
 export interface IFbUiIconWithChildProps {
-  variant: FbUiVariantTypes;
-  size: FbSizeTypes;
+  variant?: FbUiVariantTypes;
+  size?: FbSizeTypes;
 }
diff --git a/src/components/ui/FbLoadingBox/types.ts b/src/components/ui/FbLoadingBox/types.ts
@@ -4,8 +4,8 @@ import {
 } from "@/types";
 
 export interface IFbUiLoadingBoxProps {
-  fullScreen: boolean;
-  animation: boolean;
-  variant: FbUiVariantTypes;
-  size: FbSizeTypes;
+  fullScreen?: boolean;
+  animation?: boolean;
+  variant?: FbUiVariantTypes;
+  size?: FbSizeTypes;
 }