@frollo/frollo-web-ui 0.2.4 → 0.3.2

package/index.d.ts

@@ -15,7 +15,7 @@ declare interface FwInputProps {
     hint?: string;
 }
 
-declare const _default$8: vue.DefineComponent<{
+declare const _default$9: vue.DefineComponent<{
     /**
      * The input v-model
      */
@@ -149,7 +149,7 @@ declare const _default$8: vue.DefineComponent<{
     readonly: boolean;
 }>;
 
-declare const _default$7: vue.DefineComponent<{
+declare const _default$8: vue.DefineComponent<{
     /**
      * The name of the input field. Must be unique per form.
      */
@@ -203,7 +203,7 @@ declare const _default$7: vue.DefineComponent<{
     };
 }>>, {}>;
 
-declare const _default$6: vue.DefineComponent<{
+declare const _default$7: vue.DefineComponent<{
     /**
      * The header title of the card
      */
@@ -276,7 +276,7 @@ declare interface FwButtonProps {
     buttonType?: ButtonTypeAttribute;
 }
 
-declare const _default$5: vue.DefineComponent<{
+declare const _default$6: vue.DefineComponent<{
     /**
      * A `router-link` path or object
      */
@@ -378,7 +378,7 @@ declare interface NavMenuItem {
     label: string;
 }
 
-declare const _default$4: vue.DefineComponent<{
+declare const _default$5: vue.DefineComponent<{
     /**
      * An array of menu items
      * `{ to?: string | object; href?: string; label: string; }`
@@ -417,7 +417,7 @@ declare const _default$4: vue.DefineComponent<{
     onAction?: ((...args: any[]) => any) | undefined;
 }, {}>;
 
-declare const _default$3: vue.DefineComponent<{
+declare const _default$4: vue.DefineComponent<{
     /**
      * The active tab v-model
      */
@@ -441,7 +441,7 @@ declare const _default$3: vue.DefineComponent<{
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {}>;
 
-declare const _default$2: vue.DefineComponent<{
+declare const _default$3: vue.DefineComponent<{
     /**
      * The label of the tab component used as the button panel label
      */
@@ -473,7 +473,7 @@ declare const _default$2: vue.DefineComponent<{
     };
 }>>, {}>;
 
-declare const _default$1: vue.DefineComponent<{
+declare const _default$2: vue.DefineComponent<{
     /**
      * The header title of the modal
      */
@@ -622,7 +622,7 @@ declare interface ProgressBarStep {
     subSteps: number;
 }
 
-declare const _default: vue.DefineComponent<{
+declare const _default$1: vue.DefineComponent<{
     /**
      * An array of menu progress steps.
      * `{ label: string; position: number; subSteps: number; }`
@@ -672,6 +672,69 @@ declare const _default: vue.DefineComponent<{
     };
 }>>, {}>;
 
+declare type TagVariantName = 'primary' | 'alert' | 'error' | 'success';
+declare interface TagDefinition {
+    text: string;
+    background: string;
+}
+declare type TagDefinitionList = {
+    [key in TagVariantName]: TagDefinition;
+};
+declare type TagSize = 'xs' | 'sm';
+declare type TagSizes = {
+    [key in TagSize]: string;
+};
+declare interface FwTagProps {
+    size?: TagSize;
+    variant?: TagVariantName;
+}
+
+declare const _default: vue.DefineComponent<{
+    /**
+     * The size of the tag. Accepts: 'xs' & 'sm'
+     */
+    size: {
+        type: PropType<TagSize>;
+        default: string;
+        validator: (value: string) => boolean;
+    };
+    /**
+     * The colour variant of the tag.
+     * Accepts 'primary', 'alert', 'error', 'success'
+     */
+    variant: {
+        type: PropType<TagVariantName>;
+        default: string;
+        validator: (value: string) => boolean;
+    };
+}, {
+    baseClass: vue.Ref<string>;
+    textColorClass: vue.ComputedRef<string>;
+    bgColorClass: vue.ComputedRef<string>;
+    sizeClass: vue.ComputedRef<string>;
+}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, Record<string, any>, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
+    /**
+     * The size of the tag. Accepts: 'xs' & 'sm'
+     */
+    size: {
+        type: PropType<TagSize>;
+        default: string;
+        validator: (value: string) => boolean;
+    };
+    /**
+     * The colour variant of the tag.
+     * Accepts 'primary', 'alert', 'error', 'success'
+     */
+    variant: {
+        type: PropType<TagVariantName>;
+        default: string;
+        validator: (value: string) => boolean;
+    };
+}>>, {
+    size: TagSize;
+    variant: TagVariantName;
+}>;
+
 declare const __default__$1: vue.DefineComponent<{
     /**
      * The animation-iteration-count CSS property of the pulse animation.
@@ -759,4 +822,4 @@ declare interface FwCheckboxProps {
 
 declare module '@frollo/frollo-web-ui/icons' { }
 
-export { ButtonDefinition, ButtonDefinitionList, ButtonSize, ButtonSizes, ButtonTypeAttribute, ButtonVariantName, _default$5 as FwButton, FwButtonProps, _default$6 as FwCard, FwCardProps, _default$7 as FwCheckbox, FwCheckboxProps, __default__$1 as FwEmailPulse, _default$8 as FwInput, FwInputProps, FwInputType, _default$1 as FwModal, FwModalProps, _default$4 as FwNavigationMenu, _default as FwProgressBar, __default__ as FwSuccessPulse, _default$2 as FwTab, _default$3 as FwTabs, ModalServiceProps, NavMenuItem, ProgressBarStep, install as default, modalService };
+export { ButtonDefinition, ButtonDefinitionList, ButtonSize, ButtonSizes, ButtonTypeAttribute, ButtonVariantName, _default$6 as FwButton, FwButtonProps, _default$7 as FwCard, FwCardProps, _default$8 as FwCheckbox, FwCheckboxProps, __default__$1 as FwEmailPulse, _default$9 as FwInput, FwInputProps, FwInputType, _default$2 as FwModal, FwModalProps, _default$5 as FwNavigationMenu, _default$1 as FwProgressBar, __default__ as FwSuccessPulse, _default$3 as FwTab, _default$4 as FwTabs, _default as FwTag, FwTagProps, ModalServiceProps, NavMenuItem, ProgressBarStep, TagDefinition, TagDefinitionList, TagSize, TagSizes, TagVariantName, install as default, modalService };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@frollo/frollo-web-ui",
-  "version": "0.2.4",
+  "version": "0.3.2",
   "description": "Frollo's UI library for components, utilities and configs",
   "exports": {
     "./icons": "./icons/index.ts",
@@ -20,7 +20,7 @@
     "build:lib": "bin/build-lib.sh",
     "deploy": "bin/publish.sh",
     "release": "bin/release.sh",
-    "test:unit": "jest --config jest.config.js --coverage --maxWorkers=50%",
+    "test:unit": "jest --config jest.config.js --coverage --runInBand",
     "test:single": "jest --config jest.config.js --coverage --watchAll",
     "lint": "eslint --cache ./ --ext .js,.ts,.vue",
     "lint:fix": "eslint --cache ./ --fix --ext .js,.ts,.vue",
@@ -73,6 +73,7 @@
     "rollup": "^2.67.2",
     "rollup-plugin-dts": "^4.1.0",
     "rollup-plugin-postcss": "^4.0.2",
+    "rollup-plugin-svg-to-vue": "^1.0.0",
     "rollup-plugin-typescript2": "^0.31.2",
     "rollup-plugin-vue": "^6.0.0",
     "sass": "^1.49.7",

package/tailwind.config.js

@@ -13,10 +13,13 @@ module.exports = {
         light: '#bcbcbc',
         lightest: '#f5f5f5',
         10: '#f8f8f8',
-        20: '#f2f2f2'
+        20: '#f2f2f2',
+        40: '#E4E4E4',
+        60: '#D7D7D7',
+        80: '#C9C9C9'
       },
-      error: '#eb5757',
-      success: '#00c48c',
+      error: '#D83837',
+      success: '#00855F',
       alert: '#e46f04'
     },
     fontSize: {

package/types/components/fw-tag/fw-tag.vue.d.ts

@@ -0,0 +1,48 @@
+import { PropType } from 'vue';
+import { TagSize, TagVariantName } from './index.types';
+declare const _default: import("vue").DefineComponent<{
+    /**
+     * The size of the tag. Accepts: 'xs' & 'sm'
+     */
+    size: {
+        type: PropType<TagSize>;
+        default: string;
+        validator: (value: string) => boolean;
+    };
+    /**
+     * The colour variant of the tag.
+     * Accepts 'primary', 'alert', 'error', 'success'
+     */
+    variant: {
+        type: PropType<TagVariantName>;
+        default: string;
+        validator: (value: string) => boolean;
+    };
+}, {
+    baseClass: import("vue").Ref<string>;
+    textColorClass: import("vue").ComputedRef<string>;
+    bgColorClass: import("vue").ComputedRef<string>;
+    sizeClass: import("vue").ComputedRef<string>;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    /**
+     * The size of the tag. Accepts: 'xs' & 'sm'
+     */
+    size: {
+        type: PropType<TagSize>;
+        default: string;
+        validator: (value: string) => boolean;
+    };
+    /**
+     * The colour variant of the tag.
+     * Accepts 'primary', 'alert', 'error', 'success'
+     */
+    variant: {
+        type: PropType<TagVariantName>;
+        default: string;
+        validator: (value: string) => boolean;
+    };
+}>>, {
+    size: TagSize;
+    variant: TagVariantName;
+}>;
+export default _default;

package/types/components/fw-tag/index.d.ts

@@ -0,0 +1,2 @@
+import FwTag from './fw-tag.vue';
+export { FwTag };

package/types/components/fw-tag/index.types.d.ts

@@ -0,0 +1,16 @@
+export declare type TagVariantName = 'primary' | 'alert' | 'error' | 'success';
+export declare interface TagDefinition {
+    text: string;
+    background: string;
+}
+export declare type TagDefinitionList = {
+    [key in TagVariantName]: TagDefinition;
+};
+export declare type TagSize = 'xs' | 'sm';
+export declare type TagSizes = {
+    [key in TagSize]: string;
+};
+export declare interface FwTagProps {
+    size?: TagSize;
+    variant?: TagVariantName;
+}

package/types/components/index.d.ts

@@ -7,4 +7,5 @@ export * from './fw-navigation-menu';
 export * from './fw-tabs';
 export * from './fw-modal';
 export * from './fw-progress-bar';
+export * from './fw-tag';
 export * from './fw-animations';

package/types/components/index.types.d.ts

@@ -5,3 +5,4 @@ export * from '../components/fw-input/index.types';
 export * from '../components/fw-checkbox/index.types';
 export * from '../components/fw-modal/index.types';
 export * from '../components/fw-progress-bar/index.types';
+export * from '../components/fw-tag/index.types';

package/types/icons/index.d.ts

@@ -14,4 +14,5 @@ import FileExclamationSvg from './file-exclamation.svg';
 import HourglassClockSvg from './hourglass-clock.svg';
 import EnvelopeSvg from './envelope.svg';
 import CheckSvg from './check.svg';
-export { ViewSvg, GenerateSvg, ManageSvg, NotFoundSvg, EmailFilledSvg, AlertSvg, LockSvg, EyeSvg, EyeCrossedSvg, DownloadSvg, IdCardSvg, InfoCircleSvg, FileExclamationSvg, HourglassClockSvg, EnvelopeSvg, CheckSvg };
+import ChevronDownSvg from './chevron-down.svg';
+export { ViewSvg, GenerateSvg, ManageSvg, NotFoundSvg, EmailFilledSvg, AlertSvg, LockSvg, EyeSvg, EyeCrossedSvg, DownloadSvg, IdCardSvg, InfoCircleSvg, FileExclamationSvg, HourglassClockSvg, EnvelopeSvg, CheckSvg, ChevronDownSvg };