@randstad-uca/design-system 1.0.19 → 1.0.20-alpha.0

package/dist/package.json

@@ -1,6 +1,7 @@
 {
   "name": "@randstad-uca/design-system",
-  "version": "1.0.19",
+  "version": "1.0.20-alpha.0",
+  "type": "module",
   "main": "dist/index.js",
   "files": [
     "dist"
@@ -9,7 +10,7 @@
     "test": "echo \"Error: no test specified\" && exit 1",
     "storybook-live": "storybook dev -p 6006",
     "build-test": "storybook build",
-    "generate-icons": "node src/utils/generateIconList.js",
+    "generate-icons": "node src/utils/generateIconList.cjs",
     "build": "rm -rf dist && rollup -c"
   },
   "keywords": [],
@@ -42,10 +43,9 @@
     "webpack-cli": "^6.0.1"
   },
   "dependencies": {
-    "@material/web": "^2.2.0",
-    "@vaadin/vaadin-date-picker": "^23.5.12"
+    "@material/web": "^2.2.0"
   },
   "peerDependencies": {
-    "lit": "^3.2.1"
+    "lit": "^3.3.0"
   }
 }

package/dist/stories/Accordion.stories.d.ts

@@ -1,5 +1,6 @@
 import type { Meta, StoryFn } from '@storybook/web-components';
 import '../components/Accordion';
+import '../components/AccordionList';
 declare const _default: Meta;
 export default _default;
-export declare const Default: StoryFn;
+export declare const MobileList: StoryFn;

package/dist/stories/Button.stories.d.ts

@@ -24,3 +24,4 @@ export declare const Primary: Story;
 export declare const Secondary: Story;
 export declare const Tertiary: Story;
 export declare const GoogleRoundButton: Story;
+export declare const FacebookRoundButton: Story;

package/dist/stories/Icon.stories.d.ts

@@ -3,5 +3,4 @@ import '../components/Icon';
 declare const meta: Meta;
 export default meta;
 type Story = StoryObj;
-export declare const Default: Story;
-export declare const Red: Story;
+export declare const Gallery: Story;

package/dist/stories/Modal.stories.d.ts

@@ -1,4 +1,5 @@
 import '../components/Modal';
+import '../components/Notice';
 declare const _default: {
     title: string;
     component: string;
@@ -8,4 +9,8 @@ declare const _default: {
 };
 export default _default;
 export declare const ModalConScrollInterno: () => import("lit-html").TemplateResult<1>;
+export declare const ModalConScrollInternoSubtitle: () => import("lit-html").TemplateResult<1>;
 export declare const ModalScrollEnBody: () => import("lit-html").TemplateResult<1>;
+export declare const ModalConNotice: () => import("lit-html").TemplateResult<1>;
+export declare const ModalConUnBoton: () => import("lit-html").TemplateResult<1>;
+export declare const ModalConDosBotones: () => import("lit-html").TemplateResult<1>;

package/dist/stories/Notice.stories.d.ts

@@ -1,4 +1,5 @@
 import { TemplateResult } from 'lit';
+import type { StoryFn } from '@storybook/web-components';
 import '../components/Notice';
 declare const _default: {
     title: string;
@@ -6,7 +7,7 @@ declare const _default: {
     parameters: {
         layout: string;
     };
-    decorators: ((story: any) => TemplateResult<1>)[];
+    decorators: ((story: () => TemplateResult) => TemplateResult<1>)[];
     argTypes: {
         icon: {
             control: string;
@@ -25,7 +26,43 @@ declare const _default: {
 };
 export default _default;
 export declare const Default: {
-    render: (args: any) => TemplateResult;
+    render: StoryFn;
+    args: {
+        type: string;
+        icon: string;
+        message: string;
+        open: boolean;
+    };
+};
+export declare const Informative: {
+    render: StoryFn;
+    args: {
+        type: string;
+        icon: string;
+        message: string;
+        open: boolean;
+    };
+};
+export declare const Success: {
+    render: StoryFn;
+    args: {
+        type: string;
+        icon: string;
+        message: string;
+        open: boolean;
+    };
+};
+export declare const Warning: {
+    render: StoryFn;
+    args: {
+        type: string;
+        icon: string;
+        message: string;
+        open: boolean;
+    };
+};
+export declare const Error: {
+    render: StoryFn;
     args: {
         type: string;
         icon: string;
@@ -33,7 +70,3 @@ export declare const Default: {
         open: boolean;
     };
 };
-export declare const Informative: (args: any) => TemplateResult;
-export declare const Success: (args: any) => TemplateResult;
-export declare const Warning: (args: any) => TemplateResult;
-export declare const Error: (args: any) => TemplateResult;

package/dist/stories/Select.stories.d.ts

@@ -1,3 +1,4 @@
+import type { StoryFn } from '@storybook/web-components';
 import '../components/Select';
 declare const _default: {
     title: string;
@@ -5,211 +6,49 @@ declare const _default: {
     argTypes: {
         options: {
             control: string;
-            description: string;
         };
         placeholder: {
             control: string;
-            description: string;
         };
         defaultValue: {
             control: string;
-            description: string;
         };
         disabled: {
             control: string;
-            description: string;
         };
         label: {
             control: string;
-            description: string;
         };
         labelColor: {
             control: string;
-            description: string;
         };
         filterable: {
             control: string;
-            description: string;
         };
         screenWidth: {
             control: string;
-            description: string;
         };
         error: {
             control: string;
-            description: string;
         };
         onOptionSelected: {
             action: string;
-            description: string;
         };
         maxLength: {
             control: string;
-            description: string;
-        };
-    };
-    parameters: {
-        docs: {
-            description: {
-                component: string;
-            };
         };
     };
 };
 export default _default;
-export declare const Default: ({ options, placeholder, defaultValue, disabled, label, labelColor, filterable, maxLength, screenWidth, error, onOptionSelected }: {
-    options: any;
-    placeholder: any;
-    defaultValue: any;
-    disabled: any;
-    label: any;
-    labelColor: any;
-    filterable: any;
-    maxLength: any;
-    screenWidth: any;
-    error: any;
-    onOptionSelected: any;
-}) => import("lit-html").TemplateResult<1>;
-export declare const WithObjects: ({ options, placeholder, defaultValue, disabled, label, labelColor, filterable, maxLength, screenWidth, error, onOptionSelected }: {
-    options: any;
-    placeholder: any;
-    defaultValue: any;
-    disabled: any;
-    label: any;
-    labelColor: any;
-    filterable: any;
-    maxLength: any;
-    screenWidth: any;
-    error: any;
-    onOptionSelected: any;
-}) => import("lit-html").TemplateResult<1>;
-export declare const WithNoOptions: ({ options, placeholder, defaultValue, disabled, label, labelColor, filterable, maxLength, screenWidth, error, onOptionSelected }: {
-    options: any;
-    placeholder: any;
-    defaultValue: any;
-    disabled: any;
-    label: any;
-    labelColor: any;
-    filterable: any;
-    maxLength: any;
-    screenWidth: any;
-    error: any;
-    onOptionSelected: any;
-}) => import("lit-html").TemplateResult<1>;
-export declare const WithLabel: ({ options, placeholder, defaultValue, disabled, label, labelColor, filterable, maxLength, screenWidth, error, onOptionSelected }: {
-    options: any;
-    placeholder: any;
-    defaultValue: any;
-    disabled: any;
-    label: any;
-    labelColor: any;
-    filterable: any;
-    maxLength: any;
-    screenWidth: any;
-    error: any;
-    onOptionSelected: any;
-}) => import("lit-html").TemplateResult<1>;
-export declare const NonFilterable: ({ options, placeholder, defaultValue, disabled, label, labelColor, filterable, maxLength, screenWidth, error, onOptionSelected }: {
-    options: any;
-    placeholder: any;
-    defaultValue: any;
-    disabled: any;
-    label: any;
-    labelColor: any;
-    filterable: any;
-    maxLength: any;
-    screenWidth: any;
-    error: any;
-    onOptionSelected: any;
-}) => import("lit-html").TemplateResult<1>;
-export declare const Disabled: ({ options, placeholder, defaultValue, disabled, label, labelColor, filterable, maxLength, screenWidth, error, onOptionSelected }: {
-    options: any;
-    placeholder: any;
-    defaultValue: any;
-    disabled: any;
-    label: any;
-    labelColor: any;
-    filterable: any;
-    maxLength: any;
-    screenWidth: any;
-    error: any;
-    onOptionSelected: any;
-}) => import("lit-html").TemplateResult<1>;
-export declare const WithDefaultObjectValue: ({ options, placeholder, defaultValue, disabled, label, labelColor, filterable, maxLength, screenWidth, error, onOptionSelected }: {
-    options: any;
-    placeholder: any;
-    defaultValue: any;
-    disabled: any;
-    label: any;
-    labelColor: any;
-    filterable: any;
-    maxLength: any;
-    screenWidth: any;
-    error: any;
-    onOptionSelected: any;
-}) => import("lit-html").TemplateResult<1>;
-export declare const NonFilterableBasic: ({ options, placeholder, defaultValue, disabled, label, labelColor, filterable, maxLength, screenWidth, error, onOptionSelected }: {
-    options: any;
-    placeholder: any;
-    defaultValue: any;
-    disabled: any;
-    label: any;
-    labelColor: any;
-    filterable: any;
-    maxLength: any;
-    screenWidth: any;
-    error: any;
-    onOptionSelected: any;
-}) => import("lit-html").TemplateResult<1>;
-export declare const WithMaxLength: ({ options, placeholder, defaultValue, disabled, label, labelColor, filterable, maxLength, screenWidth, error, onOptionSelected }: {
-    options: any;
-    placeholder: any;
-    defaultValue: any;
-    disabled: any;
-    label: any;
-    labelColor: any;
-    filterable: any;
-    maxLength: any;
-    screenWidth: any;
-    error: any;
-    onOptionSelected: any;
-}) => import("lit-html").TemplateResult<1>;
-export declare const MobileModal: ({ options, placeholder, defaultValue, disabled, label, labelColor, filterable, maxLength, screenWidth, error, onOptionSelected }: {
-    options: any;
-    placeholder: any;
-    defaultValue: any;
-    disabled: any;
-    label: any;
-    labelColor: any;
-    filterable: any;
-    maxLength: any;
-    screenWidth: any;
-    error: any;
-    onOptionSelected: any;
-}) => import("lit-html").TemplateResult<1>;
-export declare const WithError: ({ options, placeholder, defaultValue, disabled, label, labelColor, filterable, maxLength, screenWidth, error, onOptionSelected }: {
-    options: any;
-    placeholder: any;
-    defaultValue: any;
-    disabled: any;
-    label: any;
-    labelColor: any;
-    filterable: any;
-    maxLength: any;
-    screenWidth: any;
-    error: any;
-    onOptionSelected: any;
-}) => import("lit-html").TemplateResult<1>;
-export declare const MobileWithError: ({ options, placeholder, defaultValue, disabled, label, labelColor, filterable, maxLength, screenWidth, error, onOptionSelected }: {
-    options: any;
-    placeholder: any;
-    defaultValue: any;
-    disabled: any;
-    label: any;
-    labelColor: any;
-    filterable: any;
-    maxLength: any;
-    screenWidth: any;
-    error: any;
-    onOptionSelected: any;
-}) => import("lit-html").TemplateResult<1>;
+export declare const Default: StoryFn;
+export declare const WithObjects: StoryFn;
+export declare const WithNoOptions: StoryFn;
+export declare const WithLabel: StoryFn;
+export declare const NonFilterable: StoryFn;
+export declare const Disabled: StoryFn;
+export declare const WithDefaultObjectValue: StoryFn;
+export declare const NonFilterableBasic: StoryFn;
+export declare const WithMaxLength: StoryFn;
+export declare const MobileModal: StoryFn;
+export declare const WithError: StoryFn;
+export declare const MobileWithError: StoryFn;

package/dist/stories/Stepper.stories.d.ts

@@ -1,3 +1,4 @@
+import type { StoryFn } from '@storybook/web-components';
 import '../components/Stepper';
 declare const _default: {
     title: string;
@@ -19,20 +20,32 @@ declare const _default: {
     };
 };
 export default _default;
-export declare const Default: ({ steps, currentStep }: {
-    steps: any;
-    currentStep: any;
-}) => import("lit-html").TemplateResult<1>;
-export declare const MixedLabels: ({ steps, currentStep }: {
-    steps: any;
-    currentStep: any;
-}) => import("lit-html").TemplateResult<1>;
-export declare const NoLabels: ({ steps, currentStep }: {
-    steps: any;
-    currentStep: any;
-}) => import("lit-html").TemplateResult<1>;
-export declare const AllStepsCompleted: ({ steps, currentStep }: {
-    steps: any;
-    currentStep: any;
-}) => import("lit-html").TemplateResult<1>;
+export declare const Default: {
+    render: StoryFn;
+    args: {
+        steps: string[];
+        currentStep: number;
+    };
+};
+export declare const MixedLabels: {
+    render: StoryFn;
+    args: {
+        steps: string[];
+        currentStep: number;
+    };
+};
+export declare const NoLabels: {
+    render: StoryFn;
+    args: {
+        steps: string[];
+        currentStep: number;
+    };
+};
+export declare const AllStepsCompleted: {
+    render: StoryFn;
+    args: {
+        steps: string[];
+        currentStep: number;
+    };
+};
 export declare const Interactive: () => import("lit-html").TemplateResult<1>;

package/dist/stories/Tabs.stories.d.ts

@@ -0,0 +1,18 @@
+import '../components/Tabs';
+declare const _default: {
+    title: string;
+    component: string;
+    tags: string[];
+    parameters: {
+        layout: string;
+    };
+};
+export default _default;
+export declare const Default: {
+    selected: string;
+    tabs: {
+        label: string;
+        icon: string;
+        value: string;
+    }[];
+};

package/dist/stories/Upload.stories.d.ts

@@ -5,3 +5,4 @@ declare const _default: {
 };
 export default _default;
 export declare const Default: () => import("lit-html").TemplateResult<1>;
+export declare const Disabled: () => import("lit-html").TemplateResult<1>;

package/dist/styles/colors.css

@@ -4,7 +4,8 @@
     --primary-color-60: #7AACE8;
     --primary-color-40: #A6C8F0;
     --primary-color-20: #D3E3F7;
-    --primary-color-10: #E8F1FB;
+    --primary-color-10: #2175D91A;
+    --primary-color-5: #2175D90D;
 
     --secondary-color: #0F1941;
     --secondary-color-80: #404767;
@@ -14,14 +15,21 @@
     --secondary-color-10: #E7E8EC;
 
     --brand-randstad-blue: #2175D9;
+    --randstad-blue-10: #E8F1FB;
+    --randstad-blue-40: #A6C8F0;
     --brand-dark-blue: #0F1941;
     --brand-light-blue: #00D7FF;
     --brand-off-white: #F7F5F0;
 
-    --ui-negative: #E00F0FEE;
-    --ui-positive: #257F56;
+    --ui-negative: #E00F0F;
+    --ui-negative-5: #FDF3F3;
+    --ui-negative-pink-shadow: #E00F0F1A;
+    --ui-positive: #257156;
+    --ui-positve-5: #F4F8F6;
     --ui-warning: #E9A204;
+    --ui-warning-10: #FCF5E5;
     --ui-informative: #4E90E1;
+    --ui-informative-10: #E8F1FB;
 
     --tertiary-shade: #DEDCD8;
     --tertiary-tint: #F9F7F3;
@@ -33,4 +41,10 @@
     --primary-button-active: #124077;
     --primary-button-focus: #2175D9;
 
+    --form-hover-shadow: #D1D3DB;
+
+    --randstad-dark-blue-40: #262626;
+    --primary-light-blue: #00D7FF;
+    --primary-light-blue-20: #00D7FF33;
+
   }

package/dist/styles/fontStyles.d.ts

@@ -0,0 +1,6 @@
+export declare const bodyXS: import("lit").CSSResult;
+export declare const bodyS: import("lit").CSSResult;
+export declare const bodyM: import("lit").CSSResult;
+export declare const bodyL: import("lit").CSSResult;
+export declare const titleXS: import("lit").CSSResult;
+export declare const titleS: import("lit").CSSResult;

package/dist/styles/fontStyles.ts

@@ -0,0 +1,51 @@
+import { css } from 'lit';
+
+export const bodyXS = css`
+  font-family: 'Graphik', sans-serif;
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 15px;
+  letter-spacing: 0%;
+`;
+
+export const bodyS = css`
+  font-family: 'Graphik', sans-serif;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 25px;
+  letter-spacing: 0%;
+`;
+
+export const bodyM = css`
+  font-family: 'Graphik', sans-serif;
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 25px;
+  letter-spacing: 0%;
+`;
+
+export const bodyL = css`
+  font-family: 'Graphik', sans-serif;
+  font-weight: 400;
+  font-size: 18px;
+  line-height: 30px;
+  letter-spacing: 0%;
+`;
+
+export const titleXS = css`
+  font-family: 'Graphik', sans-serif;
+  font-weight: 400;
+  font-size: 20px;
+  line-height: 30px;
+  letter-spacing: -1%;
+  vertical-align: middle;
+`;
+
+export const titleS = css`
+  font-family: 'Graphik', sans-serif;
+  font-weight: 400;
+  font-size: 26px;
+  line-height: 30px;
+  letter-spacing: -1%;
+  vertical-align: middle;
+`;

package/dist/styles/fonts.css

@@ -5,47 +5,4 @@
         url('/src/assets/font/Graphik-Regular.eot') format('embedded-opentype');
     font-weight: normal;
     font-style: normal;
-}
-
-:root {
-    --body-xs-font-size: 12px;
-    --body-s-font-size: 14px;
-    --body-m-font-size: 16px;
-    --body-l-font-size: 18px;
-    --body-xs-line-height: 20px;
-    --body-s-line-height: 25px;
-    --body-m-line-height: 25px;
-    --body-l-line-height: 30px;
-}
-
-.body-l {
-    font-family: Graphik;
-    font-weight: 400;
-    font-size: 18px;
-    line-height: 100%;
-    letter-spacing: 0%;
-}
-
-.body-m {
-    font-family: Graphik;
-    font-weight: 400;
-    font-size: 16px;
-    line-height: 100%;
-    letter-spacing: 0%;
-}
-
-.body-s {
-    font-family: Graphik;
-    font-weight: 400;
-    font-size: 149px;
-    line-height: 100%;
-    letter-spacing: 0%;
-}
-
-.body-xs {
-    font-family: Graphik;
-    font-weight: 400;
-    font-size: 149px;
-    line-height: 100%;
-    letter-spacing: 0%;
 }

package/package.json

@@ -1,6 +1,7 @@
 {
   "name": "@randstad-uca/design-system",
-  "version": "1.0.19",
+  "version": "1.0.20-alpha.0",
+  "type": "module",
   "main": "dist/index.js",
   "files": [
     "dist"
@@ -9,7 +10,7 @@
     "test": "echo \"Error: no test specified\" && exit 1",
     "storybook-live": "storybook dev -p 6006",
     "build-test": "storybook build",
-    "generate-icons": "node src/utils/generateIconList.js",
+    "generate-icons": "node src/utils/generateIconList.cjs",
     "build": "rm -rf dist && rollup -c"
   },
   "keywords": [],
@@ -42,10 +43,9 @@
     "webpack-cli": "^6.0.1"
   },
   "dependencies": {
-    "@material/web": "^2.2.0",
-    "@vaadin/vaadin-date-picker": "^23.5.12"
+    "@material/web": "^2.2.0"
   },
   "peerDependencies": {
-    "lit": "^3.2.1"
+    "lit": "^3.3.0"
   }
 }

package/dist/components/Datepicker.d.ts

@@ -1 +0,0 @@
-import '@vaadin/vaadin-date-picker';

package/dist/components/TestButton.d.ts

@@ -1,6 +0,0 @@
-import { LitElement } from 'lit';
-export declare class TestButton extends LitElement {
-    label: string;
-    static styles: import("lit").CSSResult;
-    render(): import("lit-html").TemplateResult<1>;
-}

package/dist/stories/Datepicker.stories.d.ts

@@ -1,6 +0,0 @@
-import { Meta, StoryFn } from '@storybook/web-components';
-import '@vaadin/vaadin-date-picker';
-declare const _default: Meta;
-export default _default;
-export declare const Default: StoryFn;
-export declare const Disabled: StoryFn;