@randstad-uca/design-system 1.0.3

package/dist/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "@randstad-uca/design-system",
+  "version": "1.0.3",
+  "main": "dist/index.js",
+  "files": ["dist"],
+  "scripts": {
+    "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",
+    "build": "rollup -c"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "description": "",
+  "devDependencies": {
+    "@chromatic-com/storybook": "^3.2.3",
+    "@rollup/plugin-commonjs": "^28.0.2",
+    "@rollup/plugin-node-resolve": "^16.0.0",
+    "@rollup/plugin-terser": "^0.4.4",
+    "@rollup/plugin-typescript": "^12.1.2",
+    "@storybook/addon-essentials": "^8.5.0",
+    "@storybook/blocks": "^8.5.0",
+    "@storybook/test": "^8.5.0",
+    "@storybook/web-components": "^8.5.0",
+    "@storybook/web-components-webpack5": "^8.5.0",
+    "autoprefixer": "^10.4.20",
+    "css-loader": "^7.1.2",
+    "lit-css-loader": "^3.0.1",
+    "postcss": "^8.5.1",
+    "rollup": "^4.30.1",
+    "rollup-plugin-copy": "^3.5.0",
+    "rollup-plugin-postcss": "^4.0.2",
+    "storybook": "^8.5.0",
+    "tailwindcss": "^3.4.17",
+    "ts-loader": "^9.5.2",
+    "typescript": "^5.7.3",
+    "webpack": "^5.98.0",
+    "webpack-cli": "^6.0.1"
+  },
+  "dependencies": {
+    "@material/web": "^2.2.0",
+    "@vaadin/vaadin-date-picker": "^23.5.12"
+  },
+  "peerDependencies": {
+    "lit": "^3.2.1"
+  }
+}

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

@@ -0,0 +1,26 @@
+import type { Meta, StoryObj } from '@storybook/web-components';
+import '../components/Button';
+interface ButtonArgs {
+    variant: 'button-primary' | 'button-secondary' | 'button-tertiary' | 'button-round';
+    size: 'md' | 'lg';
+    label: string;
+    loader: boolean;
+    iconSrc?: string;
+    iconPosition: 'left' | 'right';
+    disabled: boolean;
+    hover?: boolean;
+    active?: boolean;
+    focusVisible?: boolean;
+    iconName?: string | null;
+}
+declare const meta: Meta<ButtonArgs>;
+export default meta;
+type Story = StoryObj<ButtonArgs>;
+export declare const Default: Story;
+export declare const PrimaryLoader: Story;
+export declare const SecondaryLoader: Story;
+export declare const TertiaryLoader: Story;
+export declare const Primary: Story;
+export declare const Secondary: Story;
+export declare const Tertiary: Story;
+export declare const GoogleRoundButton: Story;

package/dist/stories/Checkbox.stories.d.ts

@@ -0,0 +1,6 @@
+import type { Meta, StoryObj } from '@storybook/web-components';
+import '../components/Checkbox';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+export declare const Default: Story;

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

@@ -0,0 +1,6 @@
+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;

package/dist/stories/Form.stories.d.ts

@@ -0,0 +1,40 @@
+import type { Meta, StoryObj } from '@storybook/web-components';
+import '../components/Form';
+export interface FormProps {
+    placeholder?: string;
+    label?: string;
+    value?: string;
+    size?: 'sm' | 'md' | 'lg';
+    icon?: 'left' | 'right' | null;
+    helper?: boolean;
+    error?: boolean;
+    errorMessage?: string;
+    tooltipMessage?: string;
+    success?: boolean;
+    disabled?: boolean;
+    typing?: boolean;
+    type?: 'text' | 'password' | 'textarea';
+    linkText?: string;
+    linkRoute?: string;
+    labelColor?: string;
+}
+declare const meta: Meta<FormProps>;
+export default meta;
+type Story = StoryObj<FormProps>;
+export declare const Default: Story;
+export declare const Filled: Story;
+export declare const Disabled: Story;
+export declare const WithHelper: Story;
+export declare const WithError: Story;
+export declare const WithHelperError: Story;
+export declare const WithSuccess: Story;
+export declare const WithIconLeft: Story;
+export declare const WithIconRight: Story;
+export declare const PasswordField: Story;
+export declare const TextareaField: Story;
+export declare const TextareaWithHelper: Story;
+export declare const TextareaWithError: Story;
+export declare const TextareaDisabled: Story;
+export declare const Help: Story;
+export declare const Link: Story;
+export declare const LabelColor: Story;

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

@@ -0,0 +1,7 @@
+import type { Meta, StoryObj } from '@storybook/web-components';
+import '../components/Icon';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+export declare const Default: Story;
+export declare const Red: Story;

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

@@ -0,0 +1,7 @@
+import type { Meta, StoryObj } from '@storybook/web-components';
+import '../components/Modal';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+export declare const Default: Story;
+export declare const YesNo: Story;

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

@@ -0,0 +1,39 @@
+import { TemplateResult } from 'lit';
+import '../components/Notice';
+declare const _default: {
+    title: string;
+    component: string;
+    parameters: {
+        layout: string;
+    };
+    decorators: ((story: any) => TemplateResult<1>)[];
+    argTypes: {
+        icon: {
+            control: string;
+        };
+        message: {
+            control: string;
+        };
+        open: {
+            control: string;
+        };
+        type: {
+            control: string;
+            options: string[];
+        };
+    };
+};
+export default _default;
+export declare const Default: {
+    render: (args: any) => TemplateResult;
+    args: {
+        type: string;
+        icon: string;
+        message: string;
+        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/Popup.stories.d.ts

@@ -0,0 +1,9 @@
+import type { Meta, StoryObj } from '@storybook/web-components';
+import '../components/Popup';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+export declare const Default: Story;
+export declare const YesNo: Story;
+export declare const YesNoCheck: Story;
+export declare const YesNoTrash: Story;

package/dist/stories/Progress.stories.d.ts

@@ -0,0 +1,15 @@
+import { StoryFn, Meta } from '@storybook/web-components';
+import '../components/Progress';
+declare const _default: Meta;
+export default _default;
+interface CircularProgressArgs {
+    steps: number;
+    currentStep: number;
+    size: string;
+}
+export declare const HalfProgress: StoryFn<CircularProgressArgs>;
+export declare const Completed: StoryFn<CircularProgressArgs>;
+export declare const Initial: StoryFn<CircularProgressArgs>;
+export declare const Large: StoryFn<CircularProgressArgs>;
+export declare const Small: StoryFn<CircularProgressArgs>;
+export declare const LongText: StoryFn<CircularProgressArgs>;

package/dist/stories/Radio.stories.d.ts

@@ -0,0 +1,11 @@
+import type { Meta, StoryObj } from '@storybook/web-components';
+import '../components/Radio';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+export declare const Default: Story;
+export declare const Hover: Story;
+export declare const Focus: Story;
+export declare const Disabled: Story;
+export declare const ErrorOn: Story;
+export declare const ErrorOff: Story;

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

@@ -0,0 +1,87 @@
+import '../components/Select';
+declare const _default: {
+    title: string;
+    component: string;
+    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;
+        };
+        onOptionSelected: {
+            action: string;
+            description: string;
+        };
+    };
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+};
+export default _default;
+export declare const Default: ({ options, placeholder, defaultValue, disabled, label, labelColor, filterable, onOptionSelected }: {
+    options: any;
+    placeholder: any;
+    defaultValue: any;
+    disabled: any;
+    label: any;
+    labelColor: any;
+    filterable: any;
+    onOptionSelected: any;
+}) => import("lit-html").TemplateResult<1>;
+export declare const WithLabel: ({ options, placeholder, defaultValue, disabled, label, labelColor, filterable, onOptionSelected }: {
+    options: any;
+    placeholder: any;
+    defaultValue: any;
+    disabled: any;
+    label: any;
+    labelColor: any;
+    filterable: any;
+    onOptionSelected: any;
+}) => import("lit-html").TemplateResult<1>;
+export declare const NonFilterable: ({ options, placeholder, defaultValue, disabled, label, labelColor, filterable, onOptionSelected }: {
+    options: any;
+    placeholder: any;
+    defaultValue: any;
+    disabled: any;
+    label: any;
+    labelColor: any;
+    filterable: any;
+    onOptionSelected: any;
+}) => import("lit-html").TemplateResult<1>;
+export declare const Disabled: ({ options, placeholder, defaultValue, disabled, label, labelColor, filterable, onOptionSelected }: {
+    options: any;
+    placeholder: any;
+    defaultValue: any;
+    disabled: any;
+    label: any;
+    labelColor: any;
+    filterable: any;
+    onOptionSelected: any;
+}) => import("lit-html").TemplateResult<1>;

package/dist/stories/Snackbar.stories.d.ts

@@ -0,0 +1,39 @@
+import { TemplateResult } from 'lit';
+import '../components/Snackbar';
+declare const _default: {
+    title: string;
+    component: string;
+    parameters: {
+        layout: string;
+    };
+    decorators: ((story: () => TemplateResult) => TemplateResult)[];
+    argTypes: {
+        icon: {
+            control: string;
+            options: string[];
+        };
+        message: {
+            control: string;
+        };
+        open: {
+            control: string;
+        };
+        type: {
+            control: string;
+            options: string[];
+        };
+        position: {
+            control: string;
+            options: string[];
+        };
+        color: {
+            control: string;
+        };
+    };
+};
+export default _default;
+export declare const Default: any;
+export declare const Informative: any;
+export declare const Success: any;
+export declare const Warning: any;
+export declare const Error: any;

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

@@ -0,0 +1,38 @@
+import '../components/Stepper';
+declare const _default: {
+    title: string;
+    component: string;
+    argTypes: {
+        steps: {
+            control: string;
+            description: string;
+        };
+        currentStep: {
+            control: {
+                type: string;
+                min: number;
+                max: number;
+                step: number;
+            };
+            description: string;
+        };
+    };
+};
+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 Interactive: () => import("lit-html").TemplateResult<1>;

package/dist/styles/buttons.css

@@ -0,0 +1,209 @@
+/* Estilo base para todos los botones */
+.button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-family: "Graphik", sans-serif;
+  border-radius: 4px;
+  cursor: pointer;
+  font-weight: 400;
+  padding: 16px;
+  border: none;
+  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  gap: 4px;
+}
+
+.button-lg {
+  font-size: 18px;
+  line-height: 30px;
+  min-width: 48px;
+}
+
+.button-md {
+  font-size: 14px;
+  line-height: 25px;
+}
+
+.button-primary {
+  background-color: var(--primary-color);
+  color: var(--white);
+}
+
+.button-primary.hover {
+  background-color: var(--primary-button-hover);
+}
+
+.button-primary.active {
+  background-color: var(--primary-button-active);
+}
+
+.button-primary.focus-visible {
+  background-color: var(--primary-button-focus);
+}
+
+.button-primary.disabled {
+  color: var(--secondary-color-60);
+  background-color: var(--secondary-color-20);
+}
+
+.button-secondary {
+  background: none;
+  color: var(--primary-color);
+  border: 1px solid var(--primary-color);
+}
+
+.button-secondary.hover {
+  color: var(#175197);
+  border: 1px solid var(#175197);
+}
+
+.button-secondary.active {
+  color: var(--secondary-color-80);
+  border: 1px solid var(--secondary-color-80);
+}
+
+.button-secondary.focus-visible {
+  color: var(--primary-color);
+  border: 1px solid var(--primary-color);
+}
+
+.button-secondary.disabled {
+  color: var(--secondary-color-60);
+  border: 1px solid var(--secondary-color-60);
+}
+
+.button-tertiary {
+  background: none;
+  border: none;
+  color: var(--primary-color);
+}
+
+.button-tertiary.hover {
+  background: #2175D90D;
+}
+
+.button-tertiary.active {
+  background-color: #2175D91A;
+}
+
+.button-tertiary.focus-visible {
+  border: 1px solid var(--primary-color);
+}
+
+.button-tertiary.disabled {
+  color: #6F758D;
+}
+
+/* Botones con íconos */
+.button-icon-left>.icon,
+.button-icon-right>.icon {
+  display: inline-block;
+  width: 1rem;
+  height: 1rem;
+}
+
+.button-icon-left>.icon {
+  margin-right: 0.5rem;
+}
+
+.button-icon-right>.icon {
+  margin-left: 0.5rem;
+}
+
+.button-round {
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  background-color: var(--white);
+  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  border: none;
+  cursor: pointer;
+}
+
+.button-round img.button-icon {
+  width: 24px;
+  height: 24px;
+  object-fit: contain;
+}
+
+/* Cambiar el color del ícono para todos los botones */
+.button randstad-icon {
+  color: var(--white);
+}
+
+/* Cambiar el color solo para un variant específico */
+.button.button-primary randstad-icon {
+  color: var(--white);
+}
+
+.button.button-secondary randstad-icon {
+  color: var(--primary-color);
+}
+
+.button.button-tertiary randstad-icon {
+  color: var(--primary-color);
+}
+
+
+/* Loader */
+.loader {
+  display: flex;
+  gap: 6px; /* Reduce el espacio entre puntos */
+  justify-content: center;
+  align-items: center;
+}
+
+/* Puntos animados */
+.dot {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  display: inline-block;
+  animation: growAndFade 1.2s infinite ease-in-out;
+}
+
+/* Retrasamos la animación de cada punto */
+.dot:nth-child(1) {
+  animation-delay: 0s;
+}
+
+.dot:nth-child(2) {
+  animation-delay: 0.2s;
+}
+
+.dot:nth-child(3) {
+  animation-delay: 0.4s;
+}
+
+/* Nueva animación con efecto de escala y opacidad */
+@keyframes growAndFade {
+  0% {
+    transform: scale(0.9);
+    opacity: 0.3;
+  }
+  50% {
+    transform: scale(1.4);
+    opacity: 1;
+  }
+  100% {
+    transform: scale(0.9);
+    opacity: 0.3;
+  }
+}
+
+/* ✅ Estilos específicos para button-primary y button-secondary con loader */
+.button-primary.loader .dot,
+.button-secondary.loader .dot {
+  background-color: var(--white);
+}
+
+/* ✅ Asegurar que el botón secundario también tenga el mismo fondo que el primario al cargar */
+.button-secondary.loader {
+  background-color: var(--primary-color);
+  border: none;
+  color: var(--white);
+}

package/dist/styles/colors.css

@@ -0,0 +1,36 @@
+:root {
+    --primary-color: #2175D9;
+    --primary-color-80: #4E90E1;
+    --primary-color-60: #7AACE8;
+    --primary-color-40: #A6C8F0;
+    --primary-color-20: #D3E3F7;
+    --primary-color-10: #E8F1FB;
+
+    --secondary-color: #0F1941;
+    --secondary-color-80: #404767;
+    --secondary-color-60: #6F758D;
+    --secondary-color-40: #9FA3B3;
+    --secondary-color-20: #CFD1D9;
+    --secondary-color-10: #E7E8EC;
+
+    --brand-randstad-blue: #2175D9;
+    --brand-dark-blue: #0F1941;
+    --brand-light-blue: #00D7FF;
+    --brand-off-white: #F7F5F0;
+
+    --ui-negative: #E00F0FEE;
+    --ui-positive: #257F56;
+    --ui-warning: #E9A204;
+    --ui-informative: #4E90E1;
+
+    --tertiary-shade: #DEDCD8;
+    --tertiary-tint: #F9F7F3;
+    --gray-20: #D7D7D7;
+    --gray-10: #F7F7F7;
+    --white: #FFFFFF;
+
+    --primary-button-hover: #175197;
+    --primary-button-active: #124077;
+    --primary-button-focus: #2175D9;
+
+  }

package/dist/styles/fonts.css

@@ -0,0 +1,51 @@
+@font-face {
+    font-family: 'Graphik';
+    src: url('/src/assets/font/Graphik-Regular.woff2') format('woff2'),
+        url('/src/assets/font/Graphik-Regular.woff') format('woff'),
+        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%;
+}