@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.
- package/dist/assets/InputField.css +1 -1
- package/dist/assets/InputField2.css +1 -1
- package/dist/assets/OverlayCloseButton.css +1 -0
- package/dist/assets/OverlayCloseButton2.css +1 -0
- package/dist/components/InputField/InputField.js +1 -1
- package/dist/components/InputField/InputField.stories.js +1 -1
- package/dist/components/OverlayCloseButton/OverlayCloseButton.d.ts +7 -0
- package/dist/components/OverlayCloseButton/OverlayCloseButton.js +25 -0
- package/dist/components/OverlayCloseButton/OverlayCloseButton.js.map +1 -0
- package/dist/components/OverlayCloseButton/OverlayCloseButton.stories.d.ts +5 -0
- package/dist/components/OverlayCloseButton/OverlayCloseButton.stories.js +25 -0
- package/dist/components/OverlayCloseButton/OverlayCloseButton.stories.js.map +1 -0
- package/dist/components/OverlayCloseButton/index.d.ts +1 -0
- package/dist/components/OverlayCloseButton/index.js +5 -0
- package/dist/components/OverlayCloseButton/index.js.map +1 -0
- package/dist/components/index.d.ts +1 -0
- package/dist/components/index.js +17 -15
- package/dist/components/index.js.map +1 -1
- package/dist/index.js +17 -15
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
|
@@ -1 +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 +1 @@
|
|
|
1
|
-
.
|
|
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/
|
|
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/
|
|
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 @@
|
|
|
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';
|
package/dist/components/index.js
CHANGED
|
@@ -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
|
|
7
|
-
import { Input as
|
|
8
|
-
import { InputField as
|
|
9
|
-
import { Label as
|
|
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
|
|
12
|
-
import { SelectListbox as
|
|
13
|
-
import { SelectProvider as
|
|
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
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
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
|
-
|
|
27
|
-
|
|
28
|
-
|
|
28
|
+
y as SectionNotification,
|
|
29
|
+
F as SelectListbox,
|
|
30
|
+
N as SelectProvider,
|
|
29
31
|
R as Spinner,
|
|
30
|
-
|
|
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
|
|
7
|
-
import { Input as
|
|
8
|
-
import { InputField as
|
|
9
|
-
import { Label as
|
|
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
|
|
12
|
-
import { SelectListbox as
|
|
13
|
-
import { SelectProvider as
|
|
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
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
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
|
-
|
|
27
|
-
|
|
28
|
-
|
|
28
|
+
y as SectionNotification,
|
|
29
|
+
F as SelectListbox,
|
|
30
|
+
N as SelectProvider,
|
|
29
31
|
R as Spinner,
|
|
30
|
-
|
|
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":";;;;;;;;;;;;;;;"}
|