@frollo/frollo-web-ui 8.5.4 → 9.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@frollo/frollo-web-ui",
-  "version": "8.5.4",
+  "version": "9.0.1",
   "description": "Frollo's UI library for components, utilities and configs",
   "exports": {
     "./icons": "./icons/index.ts",
@@ -20,8 +20,8 @@
     "build:lib": "bin/build-lib.sh",
     "deploy": "bin/publish.sh",
     "release": "bin/release.sh",
-    "test:unit": "jest --config jest.config.ts --coverage --runInBand",
-    "test:single": "jest --config jest.config.ts --coverage --watchAll",
+    "test:unit": "vitest run --coverage",
+    "test:single": "vitest watch",
     "lint": "eslint --cache ./src",
     "lint:fix": "eslint --cache ./src --fix",
     "tw-config-export": "mkdir -p ./dist && tailwind-config-viewer export ./dist/twconfig-viewer && rimraf ./dist/twconfig-viewer/favicon.ico",
@@ -45,25 +45,19 @@
     "@rollup/plugin-replace": "^5.0.5",
     "@rollup/plugin-url": "^8.0.2",
     "@rollup/pluginutils": "^5.1.0",
-    "@storybook/addon-a11y": "^8.1.0",
-    "@storybook/addon-designs": "^8.0.1",
-    "@storybook/addon-essentials": "^8.1.0",
-    "@storybook/addon-interactions": "^8.1.0",
-    "@storybook/addon-links": "^8.1.0",
-    "@storybook/addon-themes": "^8.1.0",
-    "@storybook/blocks": "^8.1.0",
-    "@storybook/manager-api": "^8.1.0",
-    "@storybook/test": "^8.1.0",
-    "@storybook/theming": "^8.1.0",
-    "@storybook/vue3": "^8.1.0",
-    "@storybook/vue3-vite": "^8.1.0",
-    "@types/jest": "^29.5.12",
+    "@storybook/addon-a11y": "^10.1.2",
+    "@storybook/addon-designs": "^11.0.3",
+    "@storybook/addon-docs": "^10.1.2",
+    "@storybook/addon-themes": "^10.1.2",
+    "@storybook/builder-vite": "^10.1.2",
+    "@storybook/vue3-vite": "^10.1.2",
+    "@tsconfig/node22": "^22.0.2",
     "@types/lodash-es": "^4.17.12",
-    "@vitejs/plugin-vue": "^5.0.4",
+    "@vitejs/plugin-vue": "^6.0.1",
+    "@vitejs/plugin-vue-jsx": "^5.1.1",
+    "@vitest/coverage-istanbul": "^4.0.14",
     "@vue/test-utils": "^2.4.6",
-    "@vue/vue3-jest": "^29.2.6",
     "autoprefixer": "^10.4.19",
-    "babel-jest": "^29.7.0",
     "chart.js": "^4.4.2",
     "cross-env": "^7.0.3",
     "eslint": "^9.2.0",
@@ -72,11 +66,8 @@
     "eslint-plugin-vue": "^9.26.0",
     "globals": "^15.2.0",
     "hash-sum": "^2.0.0",
-    "jest": "^29.7.0",
-    "jest-environment-jsdom": "^29.7.0",
     "jsdom": "^24.0.0",
     "lodash-es": "^4.17.21",
-    "node-sass": "^9.0.0",
     "postcss": "^8.4.38",
     "prettier": "^3.3.1",
     "rimraf": "^5.0.7",
@@ -86,23 +77,26 @@
     "rollup-plugin-typescript2": "^0.36.0",
     "rollup-plugin-vue": "^6.0.0",
     "sass": "^1.77.1",
-    "storybook": "^8.1.0",
+    "storybook": "^10.1.2",
     "svgo": "^3.3.2",
     "tailwindcss": "^3.4.3",
-    "ts-jest": "^29.1.2",
     "ts-node": "^10.9.2",
     "tslib": "^2.6.2",
     "typescript": "^5.4.5",
-    "typescript-eslint": "^8.0.0-alpha.13",
+    "typescript-eslint": "^8.48.0",
     "v-calendar": "^3.1.2",
     "vee-validate": "^4.12.8",
-    "vite": "^5.2.0",
+    "vite": "^7.2.2",
+    "vite-plugin-checker": "^0.11.0",
+    "vite-plugin-vue-devtools": "^8.0.3",
     "vite-svg-loader": "^5.1.0",
+    "vitest": "^4.0.8",
     "vue-chartjs": "^5.3.1",
     "vue-eslint-parser": "^9.4.2",
-    "vue-tsc": "^2.0.6",
+    "vue-tsc": "^3.1.4",
     "vue3-webcomponent-wrapper": "^0.2.0",
-    "yup": "^1.4.0"
+    "yup": "^1.4.0",
+    "eslint-plugin-storybook": "10.1.2"
   },
   "license": "Apache-2.0",
   "sideEffects": false,
@@ -110,8 +104,8 @@
     "access": "public"
   },
   "engines": {
-    "node": ">=20.12.2",
-    "npm": ">=10.5.0"
+    "node": ">=22.18.0",
+    "npm": ">=10.9.3"
   },
   "keywords": [
     "frollo web ui",

package/styles/tailwind.css

@@ -0,0 +1,52 @@
+/* Tailwind */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/** Typography */
+
+@layer base {
+  html {
+    @apply bg-brand-appBg;
+  }
+  p {
+    @apply text-p mb-1;
+    letter-spacing: 0.4px;
+  }
+
+  h1, .h1 {
+    @apply text-3xl mb-1;
+    letter-spacing: 0.84px;
+  }
+
+  h2, .h2 {
+    @apply text-2xl mb-1;
+    letter-spacing: 0.4px;
+  }
+
+  h3, .h3 {
+    @apply text-xl mb-1;
+    letter-spacing: 0.4px;
+  }
+
+  h4, .h4 {
+    @apply text-p mb-1;
+    letter-spacing: 0.4px;
+  }
+
+  h5, .h5 {
+    @apply text-p mb-1;
+    letter-spacing: 0.4px;
+  }
+  h6, .h6 {
+    @apply text-p-small mb-1;
+    letter-spacing: 0.4px;
+  }
+
+  input, textarea {
+    &::placeholder {
+      @apply text-grey-light;
+      letter-spacing: 0.4px;
+    }
+  }
+}

package/styles/typography.scss

@@ -1,30 +1,47 @@
 /** Typography */
 
 @layer base {
+  html {
+    @apply bg-brand-appBg;
+  }
   p {
-    @apply text-lg font-normal mb-1;
+    @apply text-p mb-1;
+    letter-spacing: 0.4px;
   }
 
   h1, .h1 {
-    @apply text-2xl font-bold mb-1 lg:text-3xl;
+    @apply text-3xl mb-1;
+    letter-spacing: 0.84px;
   }
 
   h2, .h2 {
-    @apply text-2xl font-bold mb-1;
+    @apply text-2xl mb-1;
+    letter-spacing: 0.4px;
   }
 
   h3, .h3 {
-    @apply text-xl font-bold mb-1;
+    @apply text-xl mb-1;
+    letter-spacing: 0.4px;
   }
 
   h4, .h4 {
-    @apply text-lg font-bold mb-1;
+    @apply text-p mb-1;
+    letter-spacing: 0.4px;
   }
 
   h5, .h5 {
-    @apply text-base font-bold mb-1;
+    @apply text-p mb-1;
+    letter-spacing: 0.4px;
   }
   h6, .h6 {
-    @apply text-base font-bold mb-1;
+    @apply text-p-small mb-1;
+    letter-spacing: 0.4px;
+  }
+
+  input, textarea {
+    &::placeholder {
+      @apply text-grey-light;
+      letter-spacing: 0.4px;
+    }
   }
 }

package/styles/web-components.scss

@@ -1,8 +1,91 @@
-@import './tailwind.scss';
+@use './tailwind.css';
+
+@font-face {
+  font-family: 'Forma DJR Text';
+  src: local('Forma DJR Text'), local('FormaDJRText-Regular'),
+    url("https://content.frollo.us/fonts/FormaDJRText-Regular.otf") format('opentype');
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Forma DJR Text';
+  src: local('Forma DJR Text Italic'),
+    url('https://content.frollo.us/fonts/FormaDJRText-Regular.otf') format('opentype');
+  font-weight: 400;
+  font-style: italic;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Forma DJR Text';
+  src: local('Forma DJR Text Bold'),
+    url('https://content.frollo.us/fonts/FormaDJRText-Medium.otf') format('opentype');
+  font-weight: 500 600;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Forma DJR Text';
+  src: local('Forma DJR Text Bold'),
+    url('https://content.frollo.us/fonts/FormaDJRText-Medium.otf') format('opentype');
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}
+
+
+/* 
+* Default theme variables - Frollo branding
+*/
+:root {
+  --colorPrimary: #512ABD;
+    --colorSecondary: #141414;
+    --colorTertiary: #fff;
+    --fontFamily: Forma DJR Text;
+    --fontUrl: local-font;
+    --colorLink: #512ABD;
+    --colorBody: #141414;
+    --colorButtonPrimary: #512ABD;
+    --colorButtonPrimaryText: #ffffff;
+    --colorButtonPrimaryFade: #854cff;
+    --colorButtonSecondary: #E6E1FF;
+    --colorButtonSecondaryText: #141414;
+    --colorButtonSecondaryFade: #CDC3FF;
+    --colorButtonTertiary: #512ABD;
+    --colorButtonTertiaryText: #512ABD;
+    --colorButtonTertiaryFade: #f5f3ff;
+    --colorButtonQuaternary: #CDC3FF;
+    --colorButtonQuaternaryText: #292B3D;
+    --colorButtonQuaternaryFade: transparent;
+    --colorAppBg: #F7F7F7;
+    --colorSuccessBg: #D8FFF6;
+    --colorSuccessText: #00C696;
+    --colorSuccessNew: #4bf0c8;
+    --colorErrorBg: #FEE0D9;
+    --colorErrorText: #E74C4C;
+    --colorWarningBg: #FB6340;
+    --colorWarningText: #FB6340;
+    --colorText1: #393C56;
+    --colorText2: #5F6489;
+    --colorText3: #8B8FAC;
+    --colorText4: #CDC3FF;
+    --colorBg1: #292B3D;
+    --colorBg2: #FDDBFD;
+    --colorBg3: #FEE0D9;
+    --colorBg4: #D4EDF7;
+    --colorBorder1: #AFB2C7;
+    --colorBorder2: #CDC3FF;
+    --colorBorder3: #8E7DFF;
+    --colorButtonGradient: linear-gradient(87.77deg, #d327e7, #512abd 23.8%, #512abd 42.37%, #00d19f);
+    --colorButtonGradientText: #f7f7f7;
+}
 
 body {
   font-family: var(--fontFamily);
-  @apply text-base text-body;
+  @apply text-base text-body bg-brand-appBg relative;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }

package/tailwind.config.js

@@ -1,14 +1,15 @@
 module.exports = {
   theme: {
     colors: {
+      white: '#ffffff',
+      'off-white': '#F7F7F7',
+      black: '#000000',
+      transparent: 'transparent',
       primary: 'var(--colorPrimary)',
       secondary: 'var(--colorSecondary)',
       tertiary: 'var(--colorTertiary)',
       link: 'var(--colorLink)',
       body: 'var(--colorBody)',
-      white: '#ffffff',
-      black: '#000000',
-      transparent: 'transparent',
       button: {
         primary: {
           bg: 'var(--colorButtonPrimary)',
@@ -17,15 +18,18 @@ module.exports = {
         },
         secondary: {
           bg: 'var(--colorButtonSecondary)',
-          text: 'var(--colorButtonSecondaryText)'
+          text: 'var(--colorButtonSecondaryText)',
+          fade: 'var(--colorButtonSecondaryFade)'
         },
         tertiary: {
           bg: 'var(--colorButtonTertiary)',
-          text: 'var(--colorButtonTertiaryText)'
+          text: 'var(--colorButtonTertiaryText)',
+          fade: 'var(--colorButtonTertiaryFade)'
         },
-        disabled: {
-          bg: 'var(--colorButtonDisabled)',
-          text: 'var(--colorButtonDisabledText)'
+        quaternary: {
+          bg: 'var(--colorButtonQuaternary)',
+          text: 'var(--colorButtonQuaternaryText)',
+          fade: 'var(--colorButtonQuaternaryFade)'
         }
       },
       grey: {
@@ -34,24 +38,123 @@ module.exports = {
         lightest: '#f5f5f5',
         10: '#f8f8f8',
         20: '#f2f2f2',
+        30: '#EEEFF1',
         40: '#E4E4E4',
-        60: '#D7D7D7',
-        80: '#C9C9C9'
+        60: '#DEE0E3',
+        80: '#C9C9C9',
+        100: '#C8CBD0'
       },
-      error: '#D83837',
-      success: '#00855F',
-      alert: '#e46f04'
+      brand: {
+        appBg: 'var(--colorAppBg)', // '#F7F7F7' off-white
+        success: {
+          bg: 'var(--colorSuccessBg)', //#D8FFF6', // mint-20
+          text: 'var(--colorSuccessText)', //'#00C696'
+          new: 'var(--colorSuccessNew)' // '#4bf0c8' // mint-100
+        },
+        error: {
+          bg: 'var(--colorErrorBg)', //'#FEE0D9', // coral-20
+          text: 'var(--colorErrorText)' //'#E74C4C'
+        },
+        warning: {
+          bg: 'var(--colorWarningBg)', //'#FB6340',
+          text: 'var(--colorWarningText)' //'#FB6340'
+        },
+        text1: 'var(--colorText1)', //'#393C56', // midnight-90
+        text2: 'var(--colorText2)', //'#5F6489', // midnight-70
+        text3: 'var(--colorText3)', //'#8B8FAC', // midnight-50
+        text4: 'var(--colorText4)', //'#CDC3FF', // lilac-100
+
+        bg1: 'var(--colorBg1)', //'#292B3D', // midnight-100
+        bg2: 'var(--colorBg2)', //'#FDDBFD', // pink-20
+        bg3: 'var(--colorBg3)', //'#FEE0D9', // coral-20 yodlee-bg
+        bg4: 'var(--colorBg4)', //'#D4EDF7', // sky-20 cdr-bg
+
+        border1: 'var(--colorBorder1)', //'#AFB2C7', // midnight-30
+        border2: 'var(--colorBorder2)', //'#CDC3FF', // lilac-100
+        border3: 'var(--colorBorder3)' //'#8E7DFF' // bg nav menu lavender
+      }
     },
     fontSize: {
-      xs: ['12px', '1.5'],
-      sm: ['14px', '1.5'],
-      base: ['16px', '1.5'],
+      xs: [
+        '12px',
+        {
+          lineHeight: '19px',
+          letterSpacing: '0.4px',
+          fontWeight: '100'
+        }
+      ],
+      sm: [
+        '14px',
+        {
+          lineHeight: '19px',
+          letterSpacing: '0.45px',
+          fontWeight: '100'
+        }
+      ],
+      base: [
+        '16px',
+        {
+          lineHeight: '19px',
+          letterSpacing: '0.45px',
+          fontWeight: '400'
+        }
+      ],
       lg: ['18px', '1.5'],
-      xl: ['22px', '1.5'],
-      '2xl': ['26px', '1.3'],
-      '3xl': ['42px', '1.2'],
-      p2: ['16px', '1.5'],
-      'p-small': ['14px', '1.5']
+      xl: [
+        '20px',
+        {
+          lineHeight: '26px',
+          letterSpacing: '0.4px',
+          fontWeight: '500'
+        }
+      ],
+      '2xl': [
+        '20px',
+        {
+          lineHeight: '26px',
+          letterSpacing: '0.4px',
+          fontWeight: '500'
+        }
+      ],
+      '3xl': [
+        '42px',
+        {
+          lineHeight: '46px',
+          letterSpacing: '0.84px',
+          fontWeight: '400'
+        }
+      ],
+      p: [
+        '20px',
+        {
+          lineHeight: '26px',
+          letterSpacing: '0.4px',
+          fontWeight: '400'
+        }
+      ],
+      'p-small': [
+        '15px',
+        {
+          lineHeight: '19px',
+          letterSpacing: '0.45px',
+          fontWeight: '400'
+        }
+      ],
+      p2: [
+        '14px',
+        {
+          lineHeight: '19px',
+          letterSpacing: '0.45px',
+          fontWeight: '400'
+        }
+      ]
+    },
+    listStyleType: {
+      none: 'none',
+      disc: 'disc',
+      decimal: 'decimal',
+      square: 'square',
+      roman: 'upper-roman'
     },
     screens: {
       // @media (min-width: 640px) { ... }
@@ -67,7 +170,10 @@ module.exports = {
         banner: '420px'
       },
       boxShadow: {
-        card: '0px 1px 7px rgba(0, 0, 0, 0.1714)'
+        card: '0px 4px 4px rgba(0, 0, 0, 0.1714)',
+        top: '0 -1px 0 0 rgba(20, 20, 20, 0.25);',
+        bottom: '0px 1px 0px rgba(20, 20, 20, 0.25)',
+        dropdown: '0 4px 4px 0 rgba(0, 0, 0, 0.25)'
       }
     }
   }

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

@@ -33,16 +33,9 @@ declare const __default__: import("vue").DefineComponent<{
         default: boolean;
     };
     /**
-     * Icon type (arrow or plus)
+     * Header className for the accordion button
      */
-    isArrow: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    /**
-     * Padding className for the accordion button
-     */
-    buttonPadding: {
+    headerClass: {
         type: StringConstructor;
         default: string;
     };
@@ -53,6 +46,13 @@ declare const __default__: import("vue").DefineComponent<{
         type: StringConstructor;
         default: string;
     };
+    /**
+     * Secondary appearance of the accordion
+     */
+    secondary: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }, {
     isOpen: import("vue").Ref<boolean>;
     beforeEnter: (el: Element) => void;
@@ -95,16 +95,9 @@ declare const __default__: import("vue").DefineComponent<{
         default: boolean;
     };
     /**
-     * Icon type (arrow or plus)
+     * Header className for the accordion button
      */
-    isArrow: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    /**
-     * Padding className for the accordion button
-     */
-    buttonPadding: {
+    headerClass: {
         type: StringConstructor;
         default: string;
     };
@@ -115,14 +108,21 @@ declare const __default__: import("vue").DefineComponent<{
         type: StringConstructor;
         default: string;
     };
+    /**
+     * Secondary appearance of the accordion
+     */
+    secondary: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>> & {
     onToggled?: ((...args: any[]) => any) | undefined;
 }, {
     titleClass: string;
     isOpened: boolean;
     iconPositionStart: boolean;
-    isArrow: boolean;
-    buttonPadding: string;
+    headerClass: string;
     borderStyle: string;
+    secondary: boolean;
 }, {}>;
 export default __default__;

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

@@ -0,0 +1,43 @@
+import { type PropType } from 'vue';
+import type { AlertVariantName } from './index.types';
+declare const _default: import("vue").DefineComponent<{
+    /**
+     * The colour variant of the alert element.
+     * Accepts 'success', 'error'
+     */
+    variant: {
+        type: PropType<AlertVariantName>;
+        required: true;
+        validator: (value: string) => boolean;
+    };
+    /**
+     * Disables the icon element.
+     */
+    disableIcon: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}, {
+    bgClass: import("vue").ComputedRef<"bg-brand-error-bg" | "bg-brand-success-bg">;
+    defaultScale: import("vue").Ref<string>;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    /**
+     * The colour variant of the alert element.
+     * Accepts 'success', 'error'
+     */
+    variant: {
+        type: PropType<AlertVariantName>;
+        required: true;
+        validator: (value: string) => boolean;
+    };
+    /**
+     * Disables the icon element.
+     */
+    disableIcon: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>>, {
+    disableIcon: boolean;
+}, {}>;
+export default _default;

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

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

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

@@ -0,0 +1,4 @@
+export type AlertVariantName = 'success' | 'error';
+export declare interface FwAlertProps {
+    variant?: AlertVariantName;
+}