@randstad-uca/design-system 1.0.30 → 1.0.32

package/dist/package.json

@@ -0,0 +1,54 @@
+{
+  "name": "@randstad-uca/design-system",
+  "version": "1.0.32",
+  "main": "dist/index.js",
+  "files": [
+    "dist",
+    "dist/randstad-design-system.css"
+  ],
+  "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.cjs",
+    "build": "rm -rf dist && rollup -c"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "description": "",
+  "devDependencies": {
+    "@chromatic-com/storybook": "^3.2.7",
+    "@rollup/plugin-commonjs": "^28.0.6",
+    "@rollup/plugin-node-resolve": "^16.0.1",
+    "@rollup/plugin-terser": "^0.4.4",
+    "@rollup/plugin-typescript": "^12.1.4",
+    "@storybook/addon-essentials": "^8.6.14",
+    "@storybook/blocks": "^8.6.14",
+    "@storybook/test": "^8.6.14",
+    "@storybook/web-components": "^8.6.14",
+    "@storybook/web-components-webpack5": "^8.6.14",
+    "@tailwindcss/postcss": "^4.1.11",
+    "autoprefixer": "^10.4.21",
+    "css-loader": "^7.1.2",
+    "lit-css-loader": "^3.0.1",
+    "postcss": "^8.5.6",
+    "rollup": "^4.45.1",
+    "rollup-plugin-copy": "^3.5.0",
+    "rollup-plugin-postcss": "^4.0.2",
+    "storybook": "^8.6.14",
+    "tailwindcss": "^4.1.11",
+    "ts-loader": "^9.5.2",
+    "tslib": "^2.8.1",
+    "typescript": "^5.8.3",
+    "webpack": "^5.100.2",
+    "webpack-cli": "^6.0.1"
+  },
+  "dependencies": {
+    "@material/web": "^2.3.0",
+    "lit-html": "^3.3.1"
+  },
+  "peerDependencies": {
+    "lit": "^3.3.0"
+  }
+}

package/dist/randstad-design-system.css

@@ -0,0 +1 @@
+.button{align-items:center;border:none;border-radius:4px;cursor:pointer;display:flex;font-family:Graphik,sans-serif;font-weight:400;gap:4px;justify-content:center;padding:16px;transition:background-color .2s,color .2s,box-shadow .2s}.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{background-color:var(--secondary-color-20);color:var(--secondary-color-60)}.button-secondary{background:none;border:1px solid var(--primary-color);color:var(--primary-color)}.button-secondary.hover{border:1px solid var(#175197);color:var(#175197)}.button-secondary.active{border:1px solid var(--secondary-color-80);color:var(--secondary-color-80)}.button-secondary.focus-visible{border:1px solid var(--primary-color);color:var(--primary-color)}.button-secondary.disabled{border:1px solid var(--secondary-color-60);color: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}.button-icon-left>.icon,.button-icon-right>.icon{display:inline-block;height:1rem;width:1rem}.button-icon-left>.icon{margin-right:.5rem}.button-icon-right>.icon{margin-left:.5rem}.button-round{align-items:center;background-color:var(--white);border:none;border-radius:50%;box-shadow:0 2px 5px rgba(0,0,0,.2);cursor:pointer;display:flex;height:48px;justify-content:center;padding:0;width:48px}.button-round img.button-icon{height:24px;-o-object-fit:contain;object-fit:contain;width:24px}.button randstad-icon,.button.button-primary randstad-icon{color:var(--white)}.button.button-secondary randstad-icon,.button.button-tertiary randstad-icon{color:var(--primary-color)}.loader{align-items:center;display:flex;gap:6px;justify-content:center}.dot{animation:growAndFade 1.2s ease-in-out infinite;border-radius:50%;display:inline-block;height:10px;width:10px}.dot:first-child{animation-delay:0s}.dot:nth-child(2){animation-delay:.2s}.dot:nth-child(3){animation-delay:.4s}@keyframes growAndFade{0%{opacity:.3;transform:scale(.9)}50%{opacity:1;transform:scale(1.4)}to{opacity:.3;transform:scale(.9)}}.button-primary.loader .dot,.button-secondary.loader .dot{background-color:var(--white)}.button-secondary.loader{background-color:var(--primary-color);border:none;color:var(--white)}:root{--primary-color:#2175d9;--primary-color-80:#4e90e1;--primary-color-60:#7aace8;--primary-color-40:#a6c8f0;--primary-color-20:#d3e3f7;--primary-color-10:#2175d91a;--primary-color-5:#2175d90d;--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;--randstad-blue-10:#e8f1fb;--randstad-blue-40:#a6c8f0;--brand-dark-blue:#0f1941;--brand-light-blue:#00d7ff;--brand-off-white:#f7f5f0;--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;--gray-20:#d7d7d7;--gray-10:#f7f7f7;--white:#fff;--primary-button-hover:#175197;--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}@font-face{font-family:Graphik;font-style:normal;font-weight:400;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")}

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

@@ -0,0 +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 MobileList: StoryFn;

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

@@ -0,0 +1,29 @@
+import type { Meta, StoryObj } from '@storybook/web-components';
+import '../components/Button';
+interface ButtonArgs {
+    variant: 'button-primary' | 'button-secondary' | 'button-tertiary' | 'button-round' | 'button-card';
+    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;
+export declare const FacebookRoundButton: Story;
+export declare const CardButton: Story;
+export declare const CardButtonDisabled: Story;

package/dist/stories/CarouselCards.stories.d.ts

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

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

@@ -0,0 +1,16 @@
+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;
+export declare const Checked: Story;
+export declare const CustomText: Story;
+export declare const Off: Story;
+export declare const On: Story;
+export declare const ErrorOff: Story;
+export declare const ErrorOn: Story;
+export declare const DisabledOff: Story;
+export declare const DisabledOn: Story;
+export declare const DisabledErrorOn: Story;
+export declare const DisabledErrorOff: Story;

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

@@ -0,0 +1,48 @@
+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?: string;
+    error?: boolean;
+    errorMessage?: string;
+    tooltipMessage?: string;
+    success?: boolean;
+    disabled?: boolean;
+    typing?: boolean;
+    type?: 'text' | 'password' | 'textarea';
+    linkText?: string;
+    linkRoute?: string;
+    labelColor?: string;
+    cleanButton?: boolean;
+    maxLength?: number;
+    required?: boolean;
+    optional?: boolean;
+}
+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;
+export declare const WithMaxLength: Story;
+export declare const WithCleanButton: Story;
+export declare const Required: Story;
+export declare const Optional: Story;

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

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

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

@@ -0,0 +1,16 @@
+import '../components/Modal';
+import '../components/Notice';
+declare const _default: {
+    title: string;
+    component: string;
+    parameters: {
+        layout: string;
+    };
+};
+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

@@ -0,0 +1,72 @@
+import { TemplateResult } from 'lit';
+import type { StoryFn } from '@storybook/web-components';
+import '../components/Notice';
+declare const _default: {
+    title: string;
+    component: string;
+    parameters: {
+        layout: string;
+    };
+    decorators: ((story: () => TemplateResult) => 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: 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;
+        message: string;
+        open: boolean;
+    };
+};

package/dist/stories/Popup.stories.d.ts

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

package/dist/stories/ProgressCircle.stories.d.ts

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

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,54 @@
+import type { StoryFn } from '@storybook/web-components';
+import '../components/Select';
+declare const _default: {
+    title: string;
+    component: string;
+    argTypes: {
+        options: {
+            control: string;
+        };
+        placeholder: {
+            control: string;
+        };
+        defaultValue: {
+            control: string;
+        };
+        disabled: {
+            control: string;
+        };
+        label: {
+            control: string;
+        };
+        labelColor: {
+            control: string;
+        };
+        filterable: {
+            control: string;
+        };
+        screenWidth: {
+            control: string;
+        };
+        error: {
+            control: string;
+        };
+        onOptionSelected: {
+            action: string;
+        };
+        maxLength: {
+            control: string;
+        };
+    };
+};
+export default _default;
+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/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,51 @@
+import type { StoryFn } from '@storybook/web-components';
+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: {
+    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,13 @@
+import type { StoryFn } from '@storybook/web-components';
+import '../components/Tabs';
+declare const _default: {
+    title: string;
+    component: string;
+    tags: string[];
+    parameters: {
+        layout: string;
+    };
+};
+export default _default;
+export declare const Default: StoryFn;
+export declare const ContainerPequeño: StoryFn;

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

@@ -0,0 +1,8 @@
+import '../components/Upload.ts';
+declare const _default: {
+    title: string;
+    component: string;
+};
+export default _default;
+export declare const Default: () => import("lit-html").TemplateResult<1>;
+export declare const Disabled: () => 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);
+}