@randstad-uca/design-system 1.0.79 → 1.0.81

package/dist/package.json

@@ -1,6 +1,7 @@
 {
   "name": "@randstad-uca/design-system",
-  "version": "1.0.79",
+  "version": "1.0.81",
+  "type": "module",
   "main": "dist/index.js",
   "files": [
     "dist",

package/dist/randstad-design-system.css

@@ -1 +1 @@
-: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")}.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;--danger-button:#e00f0f;--danger-button-hover:#c90d0d;--danger-button-active:#b30c0c;--danger-button-focus:#e00f0f;--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")}.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-sm{height:62px;padding:0;width:62px}.button-primary{background-color:var(--primary-color);color:var(--white)}.button-danger{background-color:var(--danger-button,#e00f0f);color:var(--white)}.button-danger.hover{background-color:var(--danger-button-hover,#c90d0d)}.button-danger.active{background-color:var(--danger-button-active,#b30c0c)}.button-danger.focus{background-color:var(--danger-button-focus,#e00f0f)}.button-danger.disabled{background-color:#cfd1d9;color:var(--secondary-color-60)}.button-icon-img{height:24px;-o-object-fit:contain;object-fit:contain;width:24px}.button.button-danger randstad-icon{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)}

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

@@ -1,8 +1,8 @@
 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';
+    variant: 'button-primary' | 'button-secondary' | 'button-tertiary' | 'button-round' | 'button-card' | 'button-icon' | 'button-danger';
+    size: 'sm' | 'md' | 'lg';
     label: string;
     loader: boolean;
     iconSrc?: string;
@@ -24,7 +24,15 @@ export declare const Primary: Story;
 export declare const PrimaryDisabled: Story;
 export declare const Secondary: Story;
 export declare const Tertiary: Story;
+export declare const Danger: Story;
+export declare const DangerLoading: Story;
 export declare const GoogleRoundButton: Story;
 export declare const FacebookRoundButton: Story;
 export declare const CardButton: Story;
 export declare const CardButtonDisabled: Story;
+export declare const WithIconLeft: Story;
+export declare const WithIconRight: Story;
+export declare const RoundGoogle: Story;
+export declare const Card: Story;
+export declare const IconOnly: Story;
+export declare const AllDisabled: Story;

package/dist/stories/DatePicker.stories.d.ts

@@ -4,6 +4,13 @@ declare const _default: {
     title: string;
     component: string;
     argTypes: {
+        type: {
+            control: {
+                type: string;
+            };
+            options: string[];
+            description: string;
+        };
         label: {
             control: string;
         };
@@ -93,3 +100,4 @@ export declare const WithHelpLink: StoryFn;
 export declare const WithHelpLinkAndTooltip: StoryFn;
 export declare const WithCustomLabelColor: StoryFn;
 export declare const WithCustomMaxLength: StoryFn;
+export declare const MonthYearPicker: StoryFn;

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

@@ -68,6 +68,11 @@ declare const _default: {
             control: string;
             description: string;
         };
+        sortable: {
+            control: string;
+            description: string;
+            defaultValue: boolean;
+        };
         textLabelFilterNotResult: {
             control: string;
             description: string;

package/dist/styles/buttons.css

@@ -24,10 +24,48 @@
   line-height: 25px;
 }
 
+.button-sm {
+  width: 62px;
+  height: 62px;
+  padding: 0;
+}
+
 .button-primary {
   background-color: var(--primary-color);
   color: var(--white);
 }
+.button-danger {
+  background-color: var(--danger-button, #E00F0F);
+  color: var(--white);
+}
+
+.button-danger.hover {
+  background-color: var(--danger-button-hover, #C90D0D);
+}
+
+.button-danger.active {
+  background-color: var(--danger-button-active, #B30C0C);
+}
+
+.button-danger.focus{
+  background-color: var(--danger-button-focus, #E00F0F);
+}
+
+.button-danger.disabled {
+  background-color: #CFD1D9;
+  color: var(--secondary-color-60);
+}
+
+/* Iconos universales */
+.button-icon-img {
+  width: 24px;
+  height: 24px;
+  object-fit: contain;
+}
+
+.button.button-danger randstad-icon {
+  color: var(--white);
+}
 
 .button-primary.hover {
   background-color: var(--primary-button-hover);

package/dist/styles/colors.css

@@ -41,6 +41,11 @@
   --primary-button-active: #124077;
   --primary-button-focus: #2175D9;
 
+  --danger-button: #E00F0F;
+  --danger-button-hover: #C90D0D;
+  --danger-button-active: #B30C0C;
+  --danger-button-focus: #E00F0F;
+
   --form-hover-shadow: #D1D3DB;
 
   --randstad-dark-blue-40: #262626;

package/package.json

@@ -1,6 +1,7 @@
 {
   "name": "@randstad-uca/design-system",
-  "version": "1.0.79",
+  "version": "1.0.81",
+  "type": "module",
   "main": "dist/index.js",
   "files": [
     "dist",