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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (63) hide show
  1. package/dist/assets/icons/arrow_down.svg +3 -0
  2. package/dist/assets/icons/arrow_left.svg +10 -0
  3. package/dist/assets/icons/arrow_up.svg +3 -0
  4. package/dist/assets/icons/{default/ayuda.svg → ayuda.svg} +5 -5
  5. package/dist/assets/icons/{default/calendar.svg → calendar.svg} +13 -13
  6. package/dist/assets/icons/{default/check.svg → check.svg} +10 -10
  7. package/dist/assets/icons/close.svg +10 -0
  8. package/dist/assets/icons/{default/email.svg → email.svg} +4 -4
  9. package/dist/assets/icons/{default/eye.svg → eye.svg} +4 -4
  10. package/dist/assets/icons/{default/eye_crossed.svg → eye_crossed.svg} +3 -3
  11. package/dist/assets/icons/home.svg +10 -0
  12. package/dist/assets/icons/icon_check.svg +4 -0
  13. package/dist/assets/icons/icon_trash.svg +7 -0
  14. package/dist/assets/icons/icon_warning.svg +6 -0
  15. package/dist/assets/icons/{default/info.svg → info.svg} +5 -5
  16. package/dist/assets/icons/settings.svg +11 -0
  17. package/dist/assets/icons/thumbs_up.svg +11 -0
  18. package/dist/assets/icons/tick-circle.svg +3 -0
  19. package/dist/assets/icons/user.svg +10 -0
  20. package/dist/assets/icons/{default/warning.svg → warning.svg} +5 -5
  21. package/dist/assets/img/carousel-example.png +0 -0
  22. package/dist/assets/img/facebook_logo.svg +4 -0
  23. package/dist/assets/img/google_logo.svg +13 -0
  24. package/dist/assets/img/icon_check.svg +4 -0
  25. package/dist/assets/img/icon_trash.svg +7 -0
  26. package/dist/assets/img/icon_warning.svg +6 -0
  27. package/dist/assets/img/image-upload-circle.svg +6 -0
  28. package/dist/assets/img/image-upload-disabled.svg +6 -0
  29. package/dist/assets/img/linkedin_logo.svg +3 -0
  30. package/dist/components/Accordion.d.ts +5 -0
  31. package/dist/components/{Test.d.ts → AccordionList.d.ts} +1 -1
  32. package/dist/components/CarouselCards.d.ts +1 -5
  33. package/dist/components/Form.d.ts +0 -1
  34. package/dist/components/Icon.d.ts +1 -3
  35. package/dist/components/Modal.d.ts +11 -0
  36. package/dist/components/Notice.d.ts +9 -1
  37. package/dist/components/Popup.d.ts +3 -0
  38. package/dist/components/Radio.d.ts +0 -1
  39. package/dist/components/Select.d.ts +11 -5
  40. package/dist/components/Tabs.d.ts +16 -0
  41. package/dist/components/Upload.d.ts +3 -0
  42. package/dist/index.css +1 -1
  43. package/dist/index.d.ts +1 -3
  44. package/dist/index.js +687 -4182
  45. package/dist/index.js.map +1 -1
  46. package/dist/package.json +5 -5
  47. package/dist/stories/Accordion.stories.d.ts +2 -1
  48. package/dist/stories/Button.stories.d.ts +1 -0
  49. package/dist/stories/Icon.stories.d.ts +1 -2
  50. package/dist/stories/Modal.stories.d.ts +5 -0
  51. package/dist/stories/Notice.stories.d.ts +39 -6
  52. package/dist/stories/Select.stories.d.ts +13 -174
  53. package/dist/stories/Stepper.stories.d.ts +29 -16
  54. package/dist/stories/Tabs.stories.d.ts +18 -0
  55. package/dist/stories/Upload.stories.d.ts +1 -0
  56. package/dist/styles/colors.css +17 -3
  57. package/dist/styles/fontStyles.d.ts +6 -0
  58. package/dist/styles/fontStyles.ts +51 -0
  59. package/dist/styles/fonts.css +0 -43
  60. package/package.json +5 -5
  61. package/dist/components/Datepicker.d.ts +0 -1
  62. package/dist/components/TestButton.d.ts +0 -6
  63. package/dist/stories/Datepicker.stories.d.ts +0 -6
package/dist/components/Upload.d.ts CHANGED
@@ -1,7 +1,10 @@
1
1
  import { LitElement } from 'lit';
2
2
  export declare class UploadImage extends LitElement {
3
3
  files: File[];
4
+ private loading;
5
+ private progress;
4
6
  private isDragging;
7
+ disabled: boolean;
5
8
  static styles: import("lit").CSSResult;
6
9
  private handleFiles;
7
10
  private onFileInputChange;
package/dist/index.css CHANGED
@@ -1 +1 @@
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)}.form{display:flex;flex-direction:column;font-family:Graphik,sans-serif;gap:.3rem}.form-label{color:var(--secondary-color-80);font-size:16px;font-weight:400;line-height:25px}.form-input{border:1px solid var(--secondary-color-10);border-radius:4px;font-size:16px;line-height:30px;outline:none;padding:10px;transition:border-color .3s ease,box-shadow .3s ease}.form.error:not(.disabled) .form-input:hover{box-shadow:0 0 0 4px #e00f0f1a}.form:not(.disabled) .form-input:hover{box-shadow:0 0 0 4px #0f19411a}.form-input:focus{border:1px solid var(--primary-color)}.form.error .form-input{background-color:#fdf3f3;border-color:#e3342f}.form-input.success{background-color:#d4edda;border-color:#28a745}input::-moz-placeholder{color:var(--secondary-color-40);font-size:16px;font-weight:400;line-height:30px}input::placeholder{color:var(--secondary-color-40);font-size:16px;font-weight:400;line-height:30px}.form-button{background-color:#007bff;border:none;border-radius:4px;color:#fff;cursor:pointer;font-size:16px;padding:10px 20px;transition:background-color .3s ease}.helper-description{color:var(--secondary-color-40);font-weight:400;text-align:left}.error-message,.helper-description{font-size:16px;line-height:25px;margin:0}.error-message{color:var(--ui-negative)}.toggle-password{background:none;border:none;cursor:pointer;font-size:16px;padding:5px}.form-container,.input-with-button{align-items:center;display:flex;position:relative}.input-with-button input{padding-right:40px;width:100%}.input-with-button button{align-items:center;background:transparent;border:none;cursor:pointer;display:flex;height:40px;justify-content:center;position:absolute;right:10px;top:50%;transform:translateY(-50%);width:40px}.toggle-password randstad-icon{height:100%;max-height:32px;max-width:32px;width:100%}textarea{font-family:Graphik;font-size:18px;font-weight:400;letter-spacing:0;line-height:30px}textarea.form-input{min-height:100px;resize:none}.form.disabled input.form-input,.form.disabled textarea.form-input{background-color:#f5f5f5;cursor:not-allowed}
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)}
package/dist/index.d.ts CHANGED
@@ -1,6 +1,5 @@
1
1
  export * from './components/Button';
2
2
  export * from './components/Checkbox';
3
- export * from './components/Datepicker';
4
3
  export * from './components/Form';
5
4
  export * from './components/Icon';
6
5
  export * from './components/Modal';
@@ -10,5 +9,4 @@ export * from './components/Radio';
10
9
  export * from './components/Select';
11
10
  export * from './components/Stepper';
12
11
  export * from './components/Snackbar';
13
- export * from './components/Test';
14
- export * from './components/TestButton';
12
+ export * from './components/Tabs';