@randstad-uca/design-system 1.0.48 → 1.0.50

package/dist/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@randstad-uca/design-system",
-  "version": "1.0.48",
+  "version": "1.0.50",
   "main": "dist/index.js",
   "files": [
     "dist",

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

@@ -52,6 +52,15 @@ declare const _default: {
             };
             options: string[];
         };
+        help: {
+            control: string;
+        };
+        helpLink: {
+            control: string;
+        };
+        helpLinkTooltipMessage: {
+            control: string;
+        };
     };
 };
 export default _default;
@@ -64,3 +73,6 @@ export declare const WithError: StoryFn;
 export declare const WithHelperAndError: StoryFn;
 export declare const WithCustomWidth: StoryFn;
 export declare const WithDateRange: StoryFn;
+export declare const WithHelp: StoryFn;
+export declare const WithHelpLink: StoryFn;
+export declare const WithHelpLinkAndTooltip: StoryFn;

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

@@ -9,7 +9,6 @@ export interface FormProps {
     helper?: string;
     error?: boolean;
     errorMessage?: string;
-    tooltipMessage?: string;
     success?: boolean;
     disabled?: boolean;
     typing?: boolean;
@@ -21,6 +20,9 @@ export interface FormProps {
     maxLength?: number;
     required?: boolean;
     optional?: boolean;
+    help?: string;
+    helpLink?: string;
+    helpLinkTooltipMessage?: string;
     heightTextArea?: string;
     maxHeightTextArea?: string;
     helperAlign?: 'left' | 'center' | 'right' | 'justify';
@@ -43,10 +45,12 @@ export declare const TextareaWithHelperRight: Story;
 export declare const TextareaWithHeightAndScroll: Story;
 export declare const TextareaWithError: Story;
 export declare const TextareaDisabled: Story;
+export declare const WithCleanButton: Story;
 export declare const Help: Story;
+export declare const HelpLink: Story;
+export declare const HelpLinkWithTooltip: 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/Select.stories.d.ts

@@ -43,6 +43,27 @@ declare const _default: {
         optional: {
             control: string;
         };
+        errorMessage: {
+            control: string;
+        };
+        helper: {
+            control: string;
+        };
+        helperAlign: {
+            control: {
+                type: string;
+            };
+            options: string[];
+        };
+        help: {
+            control: string;
+        };
+        helpLink: {
+            control: string;
+        };
+        helpLinkTooltipMessage: {
+            control: string;
+        };
     };
 };
 export default _default;
@@ -58,4 +79,8 @@ 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;
+export declare const WithHelper: StoryFn;
+export declare const WithHelperAndError: StoryFn;
+export declare const WithHelp: StoryFn;
+export declare const WithHelpLink: StoryFn;
+export declare const WithHelpLinkAndTooltip: StoryFn;

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

@@ -1,8 +1,31 @@
+import type { StoryFn } from '@storybook/web-components';
 import '../components/Upload.ts';
 declare const _default: {
     title: string;
     component: string;
+    argTypes: {
+        files: {
+            control: string;
+        };
+        disabled: {
+            control: string;
+        };
+        simulatedDelay: {
+            control: {
+                type: string;
+                min: number;
+                step: number;
+            };
+            description: string;
+            defaultValue: number;
+        };
+        onFilesChanged: {
+            action: string;
+        };
+    };
 };
 export default _default;
-export declare const Default: () => import("lit-html").TemplateResult<1>;
-export declare const Disabled: () => import("lit-html").TemplateResult<1>;
+export declare const Default: StoryFn;
+export declare const InstantUpload: StoryFn;
+export declare const SlowUpload: StoryFn;
+export declare const Disabled: StoryFn;

package/dist/stories/UploadFile.stories.d.ts

@@ -64,6 +64,15 @@ declare const _default: {
                 disable: boolean;
             };
         };
+        help: {
+            control: string;
+        };
+        helpLink: {
+            control: string;
+        };
+        helpLinkTooltipMessage: {
+            control: string;
+        };
         onFilesChanged: {
             action: string;
         };
@@ -81,3 +90,6 @@ export declare const MultipleFiles: StoryFn;
 export declare const Disabled: StoryFn;
 export declare const WithValue: StoryFn;
 export declare const ErrorState: StoryFn;
+export declare const WithHelp: StoryFn;
+export declare const WithHelpLink: StoryFn;
+export declare const WithHelpLinkAndTooltip: StoryFn;

package/dist/styles/error.d.ts

@@ -0,0 +1 @@
+export declare const errorStyles: import("lit").CSSResult;

package/dist/styles/error.ts

@@ -0,0 +1,23 @@
+import { css } from "lit";
+import { bodyM } from "./fontStyles";
+
+export const errorStyles = css `
+    :host([error]) .input-wrapper, .form.error .form-input  {
+        border: 1px solid var(--ui-negative, red) !important;
+    }
+
+    :host([error]) .input-wrapper:hover, .form.error:hover .form-input:hover {
+        box-shadow: 0px 0px 0px 4px #e00f0f1a !important;
+    }
+
+    :host([error]) .input-wrapper.active, .form.error.active .form-input.active {
+        border: 1px solid var(--ui-negative, red) !important;
+        box-shadow: none !important;
+    }
+
+   .error-message {
+        ${ bodyM }
+        color: var(--ui-negative, #E00F0F);
+        margin-top: 4px;
+    }
+`;

package/dist/styles/mix.d.ts

@@ -0,0 +1 @@
+export declare const mixStyles: import("lit").CSSResult;

package/dist/styles/mix.ts

@@ -0,0 +1,51 @@
+
+import { css } from "lit";
+import { bodyL, bodyM, bodyXS } from "./fontStyles";
+
+export const mixStyles = css `
+  :host {
+    display: block;
+    font-family: "Graphik", sans-serif;
+    color: var(--secondary-randstad-dark-blue, #0f1941);
+    width: 100%;
+  }
+
+  .form-label {
+    ${ bodyM }
+    display: flex;
+    align-items: baseline;
+    flex-direction: row;
+    gap: 4px;
+    color: var(--label-color, var(--secondary-color-80));
+  }
+
+  .input-container {
+    position: relative;
+    width: 100%;
+    max-width: 100%;
+  }
+
+  input::placeholder {
+    ${ bodyL }
+    color: var(--secondary-color-40);
+  }
+
+  .helper-description {
+    ${ bodyM }
+    color: var(--secondary-color-40);
+    margin: 0;
+  }
+
+  .required {
+    color: var(--ui-negative);
+  }
+
+  .optional {
+    color: var(--secondary-color-60);
+    ${ bodyXS }
+  }
+
+  randstad-icon {
+    color: var(--primary-color);
+  }
+`;

package/dist/styles/tooltip.d.ts

@@ -0,0 +1 @@
+export declare const tooltipStyles: import("lit").CSSResult;

package/dist/styles/tooltip.ts

@@ -0,0 +1,56 @@
+import { css } from 'lit';
+
+export const tooltipStyles = css`
+  .label-container {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 8px;
+  }
+    
+  .tooltip-wrapper {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+  }
+
+  .tooltip {
+    position: absolute;
+    top: 160%;
+    right: 0;
+    
+    background-color: var(--tooltip-background, #0F1941);
+    color: var(--tooltip-color, #fff);
+
+    padding: 8px 12px;
+    border-radius: 4px;
+    font-size: 14px;
+    line-height: 20px;
+
+    width: 250px;
+    max-width: 250px;
+    
+    z-index: 10;
+    opacity: 0;
+    visibility: hidden;
+    transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
+  }
+
+  .tooltip::after {
+    content: '';
+    position: absolute;
+    top: -6px;
+    right: 4px;
+    
+    width: 0;
+    height: 0;
+    border-style: solid;
+    border-width: 0 6px 6px 6px; 
+    border-color: transparent transparent var(--tooltip-background, #0F1941) transparent; 
+  }
+
+  .tooltip-wrapper:hover .tooltip {
+    visibility: visible;
+    opacity: 1;
+  }
+`;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@randstad-uca/design-system",
-  "version": "1.0.48",
+  "version": "1.0.50",
   "main": "dist/index.js",
   "files": [
     "dist",