@uva-glass/component-library 1.12.0 → 1.13.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.
@@ -1 +1 @@
1
- .form{width:20%}.form-field{display:flex;flex-direction:column;gap:.5rem 1rem}
1
+ ._input-field_16tae_1{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border:1px solid;border-radius:.5rem;color:var(--color-black);font-family:inherit;font-size:inherit;height:2.75rem;margin:0;padding:0 .5rem;text-align:inherit}._input-field--large_16tae_15{height:3rem}._input-field_16tae_1:disabled{color:var(--color-scarpa-flow)}
@@ -1 +1 @@
1
- ._input-field_16tae_1{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border:1px solid;border-radius:.5rem;color:var(--color-black);font-family:inherit;font-size:inherit;height:2.75rem;margin:0;padding:0 .5rem;text-align:inherit}._input-field--large_16tae_15{height:3rem}._input-field_16tae_1:disabled{color:var(--color-scarpa-flow)}
1
+ .form{width:20%}.form-field{display:flex;flex-direction:column;gap:.5rem 1rem}
@@ -0,0 +1 @@
1
+ .btn-container{height:100px;position:relative;width:100px}
@@ -0,0 +1 @@
1
+ ._overlay-close-button_1uqum_1{align-items:center;background-color:transparent;border:1px solid transparent;border-radius:.25rem;color:var(--color-black);display:inline-flex;height:1.5rem;justify-content:center;position:absolute;right:.125rem;top:.125rem;transition:var(--transition-colors);width:1.5rem}._overlay-close-button_1uqum_1:focus-visible{outline:.125rem dotted var(--color-cobalt);outline-offset:.125rem}._overlay-close-button_1uqum_1:hover{background-color:var(--color-lavender);cursor:pointer;outline:0}._overlay-close-button_1uqum_1:after{bottom:-.625rem;content:" ";left:-.625rem;position:absolute;right:-.625rem;top:-.625rem}@media (min-width: 28rem) and (min-height: 28rem){._overlay-close-button--padded_1uqum_39{right:1rem;top:1rem}}
@@ -2,7 +2,7 @@ import { jsxs as m, Fragment as s, jsx as r } from "react/jsx-runtime";
2
2
  import { forwardRef as u } from "react";
3
3
  import { c } from "../../clsx-DB4S2d7J.js";
4
4
  import { FieldHint as _ } from "./components/FieldHint.js";
5
- import '../../assets/InputField2.css';const i = {
5
+ import '../../assets/InputField.css';const i = {
6
6
  "input-field": "_input-field_16tae_1",
7
7
  "input-field--large": "_input-field--large_16tae_15"
8
8
  }, v = u(
@@ -1,6 +1,6 @@
1
1
  import { jsx as o } from "react/jsx-runtime";
2
2
  import { InputField as e } from "./InputField.js";
3
- import '../../assets/InputField.css';const r = (t) => {
3
+ import '../../assets/InputField2.css';const r = (t) => {
4
4
  const a = t.variant ?? [];
5
5
  return { ...t, variant: a.toString() };
6
6
  }, m = {
@@ -0,0 +1,7 @@
1
+ import { ButtonHTMLAttributes } from 'react';
2
+
3
+ export interface OverlayCloseButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'style'> {
4
+ 'aria-label': string;
5
+ paddedModal?: boolean;
6
+ }
7
+ export declare const OverlayCloseButton: import('react').ForwardRefExoticComponent<OverlayCloseButtonProps & import('react').RefAttributes<HTMLButtonElement>>;
@@ -0,0 +1,25 @@
1
+ import { jsx as o } from "react/jsx-runtime";
2
+ import { c as l } from "../../clsx-DB4S2d7J.js";
3
+ import { forwardRef as a } from "react";
4
+ import { Icon as n } from "../Icon/Icon.js";
5
+ import '../../assets/OverlayCloseButton2.css';const t = {
6
+ "overlay-close-button": "_overlay-close-button_1uqum_1",
7
+ "overlay-close-button--padded": "_overlay-close-button--padded_1uqum_39"
8
+ }, p = a(
9
+ ({ paddedModal: e, ...r }, s) => /* @__PURE__ */ o(
10
+ "button",
11
+ {
12
+ ...r,
13
+ type: "button",
14
+ ref: s,
15
+ className: l(t["overlay-close-button"], {
16
+ [t["overlay-close-button--padded"]]: e
17
+ }),
18
+ children: /* @__PURE__ */ o(n, { name: "Cross", size: 24 })
19
+ }
20
+ )
21
+ );
22
+ export {
23
+ p as OverlayCloseButton
24
+ };
25
+ //# sourceMappingURL=OverlayCloseButton.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"OverlayCloseButton.js","sources":["../../../src/components/OverlayCloseButton/OverlayCloseButton.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { forwardRef } from 'react';\n\nimport type { ButtonHTMLAttributes } from 'react';\n\nimport styles from './OverlayCloseButton.module.css';\n\nimport { Icon } from 'components/Icon';\n\nexport interface OverlayCloseButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'style'> {\n 'aria-label': string; // mandatory\n paddedModal?: boolean;\n}\n\nexport const OverlayCloseButton = forwardRef<HTMLButtonElement, OverlayCloseButtonProps>(\n ({ paddedModal, ...restProps }, forwardedRef) => (\n <button\n {...restProps}\n type=\"button\"\n ref={forwardedRef}\n className={clsx(styles['overlay-close-button'], {\n [styles['overlay-close-button--padded']]: paddedModal,\n })}\n >\n <Icon name=\"Cross\" size={24} />\n </button>\n )\n);\n"],"names":["OverlayCloseButton","forwardRef","paddedModal","restProps","forwardedRef","jsx","clsx","styles","Icon"],"mappings":";;;;;;;GAcaA,IAAqBC;AAAA,EAChC,CAAC,EAAE,aAAAC,GAAa,GAAGC,KAAaC,MAC9B,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAGF;AAAA,MACJ,MAAK;AAAA,MACL,KAAKC;AAAA,MACL,WAAWE,EAAKC,EAAO,sBAAsB,GAAG;AAAA,QAC9C,CAACA,EAAO,8BAA8B,CAAC,GAAGL;AAAA,MAAA,CAC3C;AAAA,MAED,UAAC,gBAAAG,EAAAG,GAAA,EAAK,MAAK,SAAQ,MAAM,IAAI;AAAA,IAAA;AAAA,EAC/B;AAEJ;"}
@@ -0,0 +1,5 @@
1
+ import { OverlayCloseButtonProps } from './OverlayCloseButton';
2
+
3
+ declare const _default: import('@storybook/types').ComponentAnnotations<import('@storybook/react').ReactRenderer, OverlayCloseButtonProps>;
4
+ export default _default;
5
+ export declare const OverlayCloseButtonExample: import('@storybook/types').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, OverlayCloseButtonProps>;
@@ -0,0 +1,25 @@
1
+ import { jsx as o } from "react/jsx-runtime";
2
+ import { f as a } from "../../index-Ca2Q7D5u.js";
3
+ import { OverlayCloseButton as e } from "./OverlayCloseButton.js";
4
+ import '../../assets/OverlayCloseButton.css';const i = {
5
+ title: "Atoms/OverlayCloseButton",
6
+ component: e,
7
+ argTypes: {
8
+ paddedModal: {
9
+ control: "boolean"
10
+ },
11
+ "aria-label": {
12
+ control: "text"
13
+ }
14
+ }
15
+ }, l = (t) => /* @__PURE__ */ o("div", { className: "btn-container", children: /* @__PURE__ */ o(e, { ...t }) }), r = l.bind({});
16
+ r.args = {
17
+ paddedModal: !1,
18
+ "aria-label": "Close",
19
+ onClick: a()
20
+ };
21
+ export {
22
+ r as OverlayCloseButtonExample,
23
+ i as default
24
+ };
25
+ //# sourceMappingURL=OverlayCloseButton.stories.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"OverlayCloseButton.stories.js","sources":["../../../src/components/OverlayCloseButton/OverlayCloseButton.stories.tsx"],"sourcesContent":["import { fn } from '@storybook/test';\n\nimport type { Meta, StoryFn } from '@storybook/react';\nimport type { OverlayCloseButtonProps } from './OverlayCloseButton';\n\nimport { OverlayCloseButton } from './OverlayCloseButton';\n\nimport './OverlayCloseButton.stories.css';\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n title: 'Atoms/OverlayCloseButton',\n component: OverlayCloseButton,\n argTypes: {\n paddedModal: {\n control: 'boolean',\n },\n 'aria-label': {\n control: 'text',\n },\n },\n} as Meta<OverlayCloseButtonProps>;\n\nconst Template: StoryFn<OverlayCloseButtonProps> = (args) => {\n return (\n <div className=\"btn-container\">\n <OverlayCloseButton {...args} />\n </div>\n );\n};\n\nexport const OverlayCloseButtonExample = Template.bind({});\nOverlayCloseButtonExample.args = {\n paddedModal: false,\n 'aria-label': 'Close',\n onClick: fn(),\n};\n"],"names":["OverlayCloseButton_stories","OverlayCloseButton","Template","args","jsx","OverlayCloseButtonExample","fn"],"mappings":";;;AAUA,MAAeA,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,aAAa;AAAA,MACX,SAAS;AAAA,IACX;AAAA,IACA,cAAc;AAAA,MACZ,SAAS;AAAA,IACX;AAAA,EACF;AACF,GAEMC,IAA6C,CAACC,MAEhD,gBAAAC,EAAC,SAAI,WAAU,iBACb,4BAACH,GAAoB,EAAA,GAAGE,EAAM,CAAA,EAChC,CAAA,GAISE,IAA4BH,EAAS,KAAK,EAAE;AACzDG,EAA0B,OAAO;AAAA,EAC/B,aAAa;AAAA,EACb,cAAc;AAAA,EACd,SAASC,EAAG;AACd;"}
@@ -0,0 +1 @@
1
+ export * from './OverlayCloseButton';
@@ -0,0 +1,5 @@
1
+ import { OverlayCloseButton as r } from "./OverlayCloseButton.js";
2
+ export {
3
+ r as OverlayCloseButton
4
+ };
5
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
@@ -7,6 +7,7 @@ export * from './InfoMessage';
7
7
  export * from './Input';
8
8
  export * from './InputField';
9
9
  export * from './Label';
10
+ export * from './OverlayCloseButton';
10
11
  export * from './RadioButton';
11
12
  export * from './SectionNotification';
12
13
  export * from './SelectListbox';
@@ -3,14 +3,15 @@ import { Button as p } from "./Button/Button.js";
3
3
  import { Card as x } from "./Card/Card.js";
4
4
  import { Icon as n } from "./Icon/Icon.js";
5
5
  import { IconButton as a } from "./IconButton/IconButton.js";
6
- import { InfoMessage as u } from "./InfoMessage/InfoMessage.js";
7
- import { Input as l } from "./Input/Input.js";
8
- import { InputField as I } from "./InputField/InputField.js";
9
- import { Label as B } from "./Label/Label.js";
6
+ import { InfoMessage as c } from "./InfoMessage/InfoMessage.js";
7
+ import { Input as s } from "./Input/Input.js";
8
+ import { InputField as B } from "./InputField/InputField.js";
9
+ import { Label as d } from "./Label/Label.js";
10
+ import { OverlayCloseButton as v } from "./OverlayCloseButton/OverlayCloseButton.js";
10
11
  import { RadioButton as L } from "./RadioButton/RadioButton.js";
11
- import { SectionNotification as v } from "./SectionNotification/SectionNotification.js";
12
- import { SelectListbox as C } from "./SelectListbox/SelectListbox.js";
13
- import { SelectProvider as M, useSelect as N } from "./SelectListbox/SelectProvider.js";
12
+ import { SectionNotification as y } from "./SectionNotification/SectionNotification.js";
13
+ import { SelectListbox as F } from "./SelectListbox/SelectListbox.js";
14
+ import { SelectProvider as N, useSelect as O } from "./SelectListbox/SelectProvider.js";
14
15
  import { Spinner as R } from "./Spinner/Spinner.js";
15
16
  export {
16
17
  t as AppStatusBar,
@@ -18,15 +19,16 @@ export {
18
19
  x as Card,
19
20
  n as Icon,
20
21
  a as IconButton,
21
- u as InfoMessage,
22
- l as Input,
23
- I as InputField,
24
- B as Label,
22
+ c as InfoMessage,
23
+ s as Input,
24
+ B as InputField,
25
+ d as Label,
26
+ v as OverlayCloseButton,
25
27
  L as RadioButton,
26
- v as SectionNotification,
27
- C as SelectListbox,
28
- M as SelectProvider,
28
+ y as SectionNotification,
29
+ F as SelectListbox,
30
+ N as SelectProvider,
29
31
  R as Spinner,
30
- N as useSelect
32
+ O as useSelect
31
33
  };
32
34
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;"}
package/dist/index.js CHANGED
@@ -3,14 +3,15 @@ import { Button as p } from "./components/Button/Button.js";
3
3
  import { Card as x } from "./components/Card/Card.js";
4
4
  import { Icon as n } from "./components/Icon/Icon.js";
5
5
  import { IconButton as a } from "./components/IconButton/IconButton.js";
6
- import { InfoMessage as u } from "./components/InfoMessage/InfoMessage.js";
7
- import { Input as l } from "./components/Input/Input.js";
8
- import { InputField as I } from "./components/InputField/InputField.js";
9
- import { Label as B } from "./components/Label/Label.js";
6
+ import { InfoMessage as c } from "./components/InfoMessage/InfoMessage.js";
7
+ import { Input as s } from "./components/Input/Input.js";
8
+ import { InputField as B } from "./components/InputField/InputField.js";
9
+ import { Label as d } from "./components/Label/Label.js";
10
+ import { OverlayCloseButton as v } from "./components/OverlayCloseButton/OverlayCloseButton.js";
10
11
  import { RadioButton as L } from "./components/RadioButton/RadioButton.js";
11
- import { SectionNotification as v } from "./components/SectionNotification/SectionNotification.js";
12
- import { SelectListbox as C } from "./components/SelectListbox/SelectListbox.js";
13
- import { SelectProvider as M, useSelect as N } from "./components/SelectListbox/SelectProvider.js";
12
+ import { SectionNotification as y } from "./components/SectionNotification/SectionNotification.js";
13
+ import { SelectListbox as F } from "./components/SelectListbox/SelectListbox.js";
14
+ import { SelectProvider as N, useSelect as O } from "./components/SelectListbox/SelectProvider.js";
14
15
  import { Spinner as R } from "./components/Spinner/Spinner.js";
15
16
  export {
16
17
  t as AppStatusBar,
@@ -18,15 +19,16 @@ export {
18
19
  x as Card,
19
20
  n as Icon,
20
21
  a as IconButton,
21
- u as InfoMessage,
22
- l as Input,
23
- I as InputField,
24
- B as Label,
22
+ c as InfoMessage,
23
+ s as Input,
24
+ B as InputField,
25
+ d as Label,
26
+ v as OverlayCloseButton,
25
27
  L as RadioButton,
26
- v as SectionNotification,
27
- C as SelectListbox,
28
- M as SelectProvider,
28
+ y as SectionNotification,
29
+ F as SelectListbox,
30
+ N as SelectProvider,
29
31
  R as Spinner,
30
- N as useSelect
32
+ O as useSelect
31
33
  };
32
34
  //# sourceMappingURL=index.js.map
package/dist/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;"}
package/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "name": "@uva-glass/component-library",
3
3
  "author": "Team Glass - Frontend vrienden",
4
4
  "private": false,
5
- "version": "1.12.0",
5
+ "version": "1.13.0",
6
6
  "type": "module",
7
7
  "main": "dist/index.js",
8
8
  "types": "dist/index.d.ts",