@uva-glass/component-library 1.33.0 → 1.34.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/Column-CbI7YoMS.js +101 -0
- package/dist/Column-CbI7YoMS.js.map +1 -0
- package/dist/{MultiSelect-Cb4-L7lm.js → MultiSelect-Drcfmp0z.js} +2 -1
- package/dist/{MultiSelect-Cb4-L7lm.js.map → MultiSelect-Drcfmp0z.js.map} +1 -1
- package/dist/assets/Column.css +1 -0
- package/dist/assets/GridRow.css +1 -0
- package/dist/assets/Input.css +1 -1
- package/dist/components/GridRow/Column/Column.d.ts +12 -0
- package/dist/components/GridRow/Column/Column.js +7 -0
- package/dist/components/GridRow/Column/Column.js.map +1 -0
- package/dist/components/GridRow/Column/index.d.ts +1 -0
- package/dist/components/GridRow/Column/index.js +5 -0
- package/dist/components/GridRow/Column/index.js.map +1 -0
- package/dist/components/GridRow/GridRow.d.ts +13 -0
- package/dist/components/GridRow/GridRow.js +38 -0
- package/dist/components/GridRow/GridRow.js.map +1 -0
- package/dist/components/GridRow/GridRow.stories.d.ts +6 -0
- package/dist/components/GridRow/GridRow.stories.js +87 -0
- package/dist/components/GridRow/GridRow.stories.js.map +1 -0
- package/dist/components/GridRow/index.d.ts +1 -0
- package/dist/components/GridRow/index.js +5 -0
- package/dist/components/GridRow/index.js.map +1 -0
- package/dist/components/Input/Input.js +15 -15
- package/dist/components/InputField/InputField.stories.js +4 -3
- package/dist/components/InputField/InputField.stories.js.map +1 -1
- package/dist/components/MultiSelect/MultiSelect.js +1 -1
- package/dist/components/MultiSelect/MultiSelect.stories.js +1 -1
- package/dist/components/MultiSelect/components/MultiSelectHeader.js +3 -2
- package/dist/components/MultiSelect/components/MultiSelectHeader.js.map +1 -1
- package/dist/components/MultiSelect/index.js +1 -1
- package/dist/components/ProgrammeCard/ProgrammeCard.stories.js +8 -7
- package/dist/components/ProgrammeCard/ProgrammeCard.stories.js.map +1 -1
- package/dist/components/index.d.ts +1 -0
- package/dist/components/index.js +45 -43
- package/dist/components/index.js.map +1 -1
- package/dist/index.js +45 -43
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
|
@@ -0,0 +1,101 @@
|
|
|
1
|
+
import { jsx as p } from "react/jsx-runtime";
|
|
2
|
+
import { c as d } from "./clsx-OuTLNxxd.js";
|
|
3
|
+
import './assets/Column.css';const _ = {
|
|
4
|
+
"page-grid__row": "_page-grid__row_10tcv_1",
|
|
5
|
+
"page-grid__row-mt-0": "_page-grid__row-mt-0_10tcv_10",
|
|
6
|
+
"page-grid__row-mt-025": "_page-grid__row-mt-025_10tcv_14",
|
|
7
|
+
"page-grid__row-mt-050": "_page-grid__row-mt-050_10tcv_18",
|
|
8
|
+
"page-grid__row-mt-075": "_page-grid__row-mt-075_10tcv_22",
|
|
9
|
+
"page-grid__row-mt-100": "_page-grid__row-mt-100_10tcv_26",
|
|
10
|
+
"page-grid__row-mt-125": "_page-grid__row-mt-125_10tcv_30",
|
|
11
|
+
"page-grid__row-mt-150": "_page-grid__row-mt-150_10tcv_34",
|
|
12
|
+
"page-grid__row-mt-175": "_page-grid__row-mt-175_10tcv_38",
|
|
13
|
+
"page-grid__row-mt-200": "_page-grid__row-mt-200_10tcv_42",
|
|
14
|
+
"page-grid__row-mt-250": "_page-grid__row-mt-250_10tcv_46",
|
|
15
|
+
"page-grid__row-mt-300": "_page-grid__row-mt-300_10tcv_50",
|
|
16
|
+
"page-grid__row-mt-350": "_page-grid__row-mt-350_10tcv_54",
|
|
17
|
+
"page-grid__row-mb-0": "_page-grid__row-mb-0_10tcv_58",
|
|
18
|
+
"page-grid__row-mb-025": "_page-grid__row-mb-025_10tcv_62",
|
|
19
|
+
"page-grid__row-mb-050": "_page-grid__row-mb-050_10tcv_66",
|
|
20
|
+
"page-grid__row-mb-075": "_page-grid__row-mb-075_10tcv_70",
|
|
21
|
+
"page-grid__row-mb-100": "_page-grid__row-mb-100_10tcv_74",
|
|
22
|
+
"page-grid__row-mb-125": "_page-grid__row-mb-125_10tcv_78",
|
|
23
|
+
"page-grid__row-mb-150": "_page-grid__row-mb-150_10tcv_82",
|
|
24
|
+
"page-grid__row-mb-175": "_page-grid__row-mb-175_10tcv_86",
|
|
25
|
+
"page-grid__row-mb-200": "_page-grid__row-mb-200_10tcv_90",
|
|
26
|
+
"page-grid__row-mb-250": "_page-grid__row-mb-250_10tcv_94",
|
|
27
|
+
"page-grid__row-mb-300": "_page-grid__row-mb-300_10tcv_98",
|
|
28
|
+
"page-grid__row-mb-350": "_page-grid__row-mb-350_10tcv_102",
|
|
29
|
+
"page-grid__col-12": "_page-grid__col-12_10tcv_110",
|
|
30
|
+
"page-grid__col": "_page-grid__col_10tcv_110",
|
|
31
|
+
"page-grid__col-1": "_page-grid__col-1_10tcv_110",
|
|
32
|
+
"page-grid__col-2": "_page-grid__col-2_10tcv_123",
|
|
33
|
+
"page-grid__col-3": "_page-grid__col-3_10tcv_131",
|
|
34
|
+
"page-grid__col-4": "_page-grid__col-4_10tcv_139",
|
|
35
|
+
"page-grid__col-5": "_page-grid__col-5_10tcv_147",
|
|
36
|
+
"page-grid__col-6": "_page-grid__col-6_10tcv_155",
|
|
37
|
+
"page-grid__col-7": "_page-grid__col-7_10tcv_163",
|
|
38
|
+
"page-grid__col-8": "_page-grid__col-8_10tcv_171",
|
|
39
|
+
"page-grid__col-9": "_page-grid__col-9_10tcv_179",
|
|
40
|
+
"page-grid__col-10": "_page-grid__col-10_10tcv_187",
|
|
41
|
+
"page-grid__col-11": "_page-grid__col-11_10tcv_195",
|
|
42
|
+
"page-grid__col-md-1": "_page-grid__col-md-1_10tcv_206",
|
|
43
|
+
"page-grid__col-md-2": "_page-grid__col-md-2_10tcv_214",
|
|
44
|
+
"page-grid__col-md-3": "_page-grid__col-md-3_10tcv_222",
|
|
45
|
+
"page-grid__col-md-4": "_page-grid__col-md-4_10tcv_230",
|
|
46
|
+
"page-grid__col-md-5": "_page-grid__col-md-5_10tcv_238",
|
|
47
|
+
"page-grid__col-md-6": "_page-grid__col-md-6_10tcv_246",
|
|
48
|
+
"page-grid__col-md-7": "_page-grid__col-md-7_10tcv_254",
|
|
49
|
+
"page-grid__col-md-8": "_page-grid__col-md-8_10tcv_262",
|
|
50
|
+
"page-grid__col-md-9": "_page-grid__col-md-9_10tcv_270",
|
|
51
|
+
"page-grid__col-md-10": "_page-grid__col-md-10_10tcv_278",
|
|
52
|
+
"page-grid__col-md-11": "_page-grid__col-md-11_10tcv_286",
|
|
53
|
+
"page-grid__col-md-12": "_page-grid__col-md-12_10tcv_294",
|
|
54
|
+
"page-grid__col-start-position-1": "_page-grid__col-start-position-1_10tcv_303",
|
|
55
|
+
"page-grid__col-start-position-2": "_page-grid__col-start-position-2_10tcv_307",
|
|
56
|
+
"page-grid__col-start-position-3": "_page-grid__col-start-position-3_10tcv_311",
|
|
57
|
+
"page-grid__col-start-position-4": "_page-grid__col-start-position-4_10tcv_315",
|
|
58
|
+
"page-grid__col-start-position-5": "_page-grid__col-start-position-5_10tcv_319",
|
|
59
|
+
"page-grid__col-start-position-6": "_page-grid__col-start-position-6_10tcv_323",
|
|
60
|
+
"page-grid__col-start-position-7": "_page-grid__col-start-position-7_10tcv_327",
|
|
61
|
+
"page-grid__col-start-position-8": "_page-grid__col-start-position-8_10tcv_331",
|
|
62
|
+
"page-grid__col-start-position-9": "_page-grid__col-start-position-9_10tcv_335",
|
|
63
|
+
"page-grid__col-start-position-10": "_page-grid__col-start-position-10_10tcv_339",
|
|
64
|
+
"page-grid__col-start-position-11": "_page-grid__col-start-position-11_10tcv_343",
|
|
65
|
+
"page-grid__col-md-start-position-1": "_page-grid__col-md-start-position-1_10tcv_350",
|
|
66
|
+
"page-grid__col-md-start-position-2": "_page-grid__col-md-start-position-2_10tcv_354",
|
|
67
|
+
"page-grid__col-md-start-position-3": "_page-grid__col-md-start-position-3_10tcv_358",
|
|
68
|
+
"page-grid__col-md-start-position-4": "_page-grid__col-md-start-position-4_10tcv_362",
|
|
69
|
+
"page-grid__col-md-start-position-5": "_page-grid__col-md-start-position-5_10tcv_366",
|
|
70
|
+
"page-grid__col-md-start-position-6": "_page-grid__col-md-start-position-6_10tcv_370",
|
|
71
|
+
"page-grid__col-md-start-position-7": "_page-grid__col-md-start-position-7_10tcv_374",
|
|
72
|
+
"page-grid__col-md-start-position-8": "_page-grid__col-md-start-position-8_10tcv_378",
|
|
73
|
+
"page-grid__col-md-start-position-9": "_page-grid__col-md-start-position-9_10tcv_382",
|
|
74
|
+
"page-grid__col-md-start-position-10": "_page-grid__col-md-start-position-10_10tcv_386",
|
|
75
|
+
"page-grid__col-md-start-position-11": "_page-grid__col-md-start-position-11_10tcv_390"
|
|
76
|
+
}, l = ({
|
|
77
|
+
size: g,
|
|
78
|
+
mediumSize: r,
|
|
79
|
+
startPositon: o,
|
|
80
|
+
mediumStartPosition: i,
|
|
81
|
+
position: t,
|
|
82
|
+
children: a
|
|
83
|
+
}) => /* @__PURE__ */ p(
|
|
84
|
+
"div",
|
|
85
|
+
{
|
|
86
|
+
className: d(
|
|
87
|
+
_["page-grid_col"],
|
|
88
|
+
g && _[`page-grid__col-${g}`],
|
|
89
|
+
r && _[`page-grid__col-md-${r}`],
|
|
90
|
+
o && _[`page-grid__col-start-position-${o}`],
|
|
91
|
+
i && _[`page-grid__col-md-start-position-${i}`],
|
|
92
|
+
t && _[`page-grid__col-${t}`]
|
|
93
|
+
),
|
|
94
|
+
children: a
|
|
95
|
+
}
|
|
96
|
+
);
|
|
97
|
+
export {
|
|
98
|
+
l as C,
|
|
99
|
+
_ as s
|
|
100
|
+
};
|
|
101
|
+
//# sourceMappingURL=Column-CbI7YoMS.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Column-CbI7YoMS.js","sources":["../src/components/GridRow/Column/Column.tsx"],"sourcesContent":["import clsx from 'clsx';\n\nimport type { PropsWithChildren } from 'react';\n\nimport styles from 'components/GridRow/GridRow.module.css';\n\ntype columnSize = '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10' | '11' | '12';\n\nexport interface ColumnProps {\n size?: columnSize;\n mediumSize?: columnSize;\n startPositon?: columnSize;\n mediumStartPosition?: columnSize;\n position?: 'start' | 'center' | 'end';\n}\n\nexport const Column = ({\n size,\n mediumSize,\n startPositon,\n mediumStartPosition,\n position,\n children,\n}: PropsWithChildren<ColumnProps>) => {\n return (\n <div\n className={clsx(\n styles['page-grid_col'],\n size && styles[`page-grid__col-${size}`],\n mediumSize && styles[`page-grid__col-md-${mediumSize}`],\n startPositon && styles[`page-grid__col-start-position-${startPositon}`],\n mediumStartPosition && styles[`page-grid__col-md-start-position-${mediumStartPosition}`],\n position && styles[`page-grid__col-${position}`]\n )}\n >\n {children}\n </div>\n );\n};\n"],"names":["Column","size","mediumSize","startPositon","mediumStartPosition","position","children","jsx","clsx","styles"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgBaA,IAAS,CAAC;AAAA,EACrB,MAAAC;AAAA,EACA,YAAAC;AAAA,EACA,cAAAC;AAAA,EACA,qBAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AACF,MAEI,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAWC;AAAA,MACTC,EAAO,eAAe;AAAA,MACtBR,KAAQQ,EAAO,kBAAkBR,CAAI,EAAE;AAAA,MACvCC,KAAcO,EAAO,qBAAqBP,CAAU,EAAE;AAAA,MACtDC,KAAgBM,EAAO,iCAAiCN,CAAY,EAAE;AAAA,MACtEC,KAAuBK,EAAO,oCAAoCL,CAAmB,EAAE;AAAA,MACvFC,KAAYI,EAAO,kBAAkBJ,CAAQ,EAAE;AAAA,IACjD;AAAA,IAEC,UAAAC;AAAA,EAAA;AAAA;"}
|
|
@@ -5,6 +5,7 @@ import { Label as n } from "./components/Label/Label.js";
|
|
|
5
5
|
import "react";
|
|
6
6
|
import { Button as p } from "./components/Button/Button.js";
|
|
7
7
|
import "./components/OverlayCloseButton/OverlayCloseButton.js";
|
|
8
|
+
import "./components/GridRow/GridRow.js";
|
|
8
9
|
import "./components/IconButton/IconButton.js";
|
|
9
10
|
import "./components/Input/Input.js";
|
|
10
11
|
import "./components/InputField/InputField.js";
|
|
@@ -43,4 +44,4 @@ export {
|
|
|
43
44
|
o as M,
|
|
44
45
|
d as a
|
|
45
46
|
};
|
|
46
|
-
//# sourceMappingURL=MultiSelect-
|
|
47
|
+
//# sourceMappingURL=MultiSelect-Drcfmp0z.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MultiSelect-
|
|
1
|
+
{"version":3,"file":"MultiSelect-Drcfmp0z.js","sources":["../src/components/MultiSelect/components/MultiSelectHeader.tsx","../src/components/MultiSelect/MultiSelect.tsx"],"sourcesContent":["import styles from 'components/MultiSelect/MultiSelect.module.css';\nimport { Label } from 'components/Label';\nimport { Button } from 'components';\n\nexport interface MultiSelectHeaderProps {\n label: string;\n clearTrigger?: string;\n onClear?: () => void;\n}\n\nexport function MultiSelectHeader({ label, clearTrigger, onClear }: MultiSelectHeaderProps) {\n return (\n <header className={styles['multi-select__header']}>\n <Label htmlFor=\"multi-select-list\">{label}</Label>\n {clearTrigger && (\n <Button variant={'blank'} onClick={onClear}>\n {clearTrigger}\n </Button>\n )}\n </header>\n );\n}\n","import clsx from 'clsx';\n\nimport type { PropsWithChildren, ReactNode } from 'react';\n\nimport styles from './MultiSelect.module.css';\n\nimport { MultiSelectItem } from 'components/MultiSelect/components/MultiSelectItem';\nimport { MultiSelectHeader } from 'components/MultiSelect/components/MultiSelectHeader';\nexport interface MultiSelectProps {\n scrollable?: boolean;\n noBorder?: boolean;\n header?: ReactNode;\n}\n\nexport const MultiSelect = ({ scrollable = true, noBorder, header, children }: PropsWithChildren<MultiSelectProps>) => (\n <>\n {header}\n <div\n className={clsx(styles['multi-select'], {\n [styles['multi-select--no-border']]: noBorder,\n })}\n >\n <ul\n className={clsx(styles['multi-select__list'], {\n [styles['multi-select__list--scrollable']]: scrollable,\n })}\n id=\"multi-select-list\"\n >\n {children}\n </ul>\n </div>\n </>\n);\n\nMultiSelect.MultiSelectHeader = MultiSelectHeader;\nMultiSelect.MultiSelectItem = MultiSelectItem;\n"],"names":["MultiSelectHeader","label","clearTrigger","onClear","jsxs","styles","jsx","Label","Button","MultiSelect","scrollable","noBorder","header","children","Fragment","clsx","MultiSelectItem"],"mappings":";;;;;;;;;;;;;AAUO,SAASA,EAAkB,EAAE,OAAAC,GAAO,cAAAC,GAAc,SAAAC,KAAmC;AAC1F,SACG,gBAAAC,EAAA,UAAA,EAAO,WAAWC,EAAO,sBAAsB,GAC9C,UAAA;AAAA,IAAC,gBAAAC,EAAAC,GAAA,EAAM,SAAQ,qBAAqB,UAAMN,GAAA;AAAA,IACzCC,KACE,gBAAAI,EAAAE,GAAA,EAAO,SAAS,SAAS,SAASL,GAChC,UACHD,GAAA;AAAA,EAEJ,EAAA,CAAA;AAEJ;ACPa,MAAAO,IAAc,CAAC,EAAE,YAAAC,IAAa,IAAM,UAAAC,GAAU,QAAAC,GAAQ,UAAAC,QAE9D,gBAAAT,EAAAU,GAAA,EAAA,UAAA;AAAA,EAAAF;AAAA,EACD,gBAAAN;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWS,EAAKV,EAAO,cAAc,GAAG;AAAA,QACtC,CAACA,EAAO,yBAAyB,CAAC,GAAGM;AAAA,MAAA,CACtC;AAAA,MAED,UAAA,gBAAAL;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAWS,EAAKV,EAAO,oBAAoB,GAAG;AAAA,YAC5C,CAACA,EAAO,gCAAgC,CAAC,GAAGK;AAAA,UAAA,CAC7C;AAAA,UACD,IAAG;AAAA,UAEF,UAAAG;AAAA,QAAA;AAAA,MACH;AAAA,IAAA;AAAA,EACF;AAAA,GACF;AAGFJ,EAAY,oBAAoBT;AAChCS,EAAY,kBAAkBO;"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
._page-grid__row_10tcv_1{--grid-cols: 12;display:flex;flex-wrap:wrap;min-width:100%;position:relative}._page-grid__row-mt-0_10tcv_10{margin-top:0}._page-grid__row-mt-025_10tcv_14{margin-top:.25rem}._page-grid__row-mt-050_10tcv_18{margin-top:.5rem}._page-grid__row-mt-075_10tcv_22{margin-top:.75rem}._page-grid__row-mt-100_10tcv_26{margin-top:1rem}._page-grid__row-mt-125_10tcv_30{margin-top:1.25rem}._page-grid__row-mt-150_10tcv_34{margin-top:1.5rem}._page-grid__row-mt-175_10tcv_38{margin-top:1.75rem}._page-grid__row-mt-200_10tcv_42{margin-top:2rem}._page-grid__row-mt-250_10tcv_46{margin-top:2.5rem}._page-grid__row-mt-300_10tcv_50{margin-top:3rem}._page-grid__row-mt-350_10tcv_54{margin-top:3.5rem}._page-grid__row-mb-0_10tcv_58{margin-bottom:0}._page-grid__row-mb-025_10tcv_62{margin-bottom:.25rem}._page-grid__row-mb-050_10tcv_66{margin-bottom:.5rem}._page-grid__row-mb-075_10tcv_70{margin-bottom:.75rem}._page-grid__row-mb-100_10tcv_74{margin-bottom:1rem}._page-grid__row-mb-125_10tcv_78{margin-bottom:1.25rem}._page-grid__row-mb-150_10tcv_82{margin-bottom:1.5rem}._page-grid__row-mb-175_10tcv_86{margin-bottom:1.75rem}._page-grid__row-mb-200_10tcv_90{margin-bottom:2rem}._page-grid__row-mb-250_10tcv_94{margin-bottom:2.5rem}._page-grid__row-mb-300_10tcv_98{margin-bottom:3rem}._page-grid__row-mb-350_10tcv_102{margin-bottom:3.5rem}[class^=page-grid__col]{position:relative}._page-grid__col-12_10tcv_110,._page-grid__col_10tcv_110{flex-basis:100%}._page-grid__col-1_10tcv_110{--collspan: 1;flex-basis:calc((var(--collspan) / var(--grid-cols) * 100%));max-width:calc((var(--collspan) / var(--grid-cols) * 100%));padding:0 calc(var(--grid-gap) / 2)}._page-grid__col-2_10tcv_123{--collspan: 2;flex-basis:calc((var(--collspan) / var(--grid-cols) * 100%));max-width:calc((var(--collspan) / var(--grid-cols) * 100%));padding:0 calc(var(--grid-gap) / 2)}._page-grid__col-3_10tcv_131{--collspan: 3;flex-basis:calc((var(--collspan) / var(--grid-cols) * 100%));max-width:calc((var(--collspan) / var(--grid-cols) * 100%));padding:0 calc(var(--grid-gap) / 2)}._page-grid__col-4_10tcv_139{--collspan: 4;flex-basis:calc((var(--collspan) / var(--grid-cols) * 100%));max-width:calc((var(--collspan) / var(--grid-cols) * 100%));padding:0 calc(var(--grid-gap) / 2)}._page-grid__col-5_10tcv_147{--collspan: 5;flex-basis:calc((var(--collspan) / var(--grid-cols) * 100%));max-width:calc((var(--collspan) / var(--grid-cols) * 100%));padding:0 calc(var(--grid-gap) / 2)}._page-grid__col-6_10tcv_155{--collspan: 6;flex-basis:calc((var(--collspan) / var(--grid-cols) * 100%));max-width:calc((var(--collspan) / var(--grid-cols) * 100%));padding:0 calc(var(--grid-gap) / 2)}._page-grid__col-7_10tcv_163{--collspan: 7;flex-basis:calc((var(--collspan) / var(--grid-cols) * 100%));max-width:calc((var(--collspan) / var(--grid-cols) * 100%));padding:0 calc(var(--grid-gap) / 2)}._page-grid__col-8_10tcv_171{--collspan: 8;flex-basis:calc((var(--collspan) / var(--grid-cols) * 100%));max-width:calc((var(--collspan) / var(--grid-cols) * 100%));padding:0 calc(var(--grid-gap) / 2)}._page-grid__col-9_10tcv_179{--collspan: 9;flex-basis:calc((var(--collspan) / var(--grid-cols) * 100%));max-width:calc((var(--collspan) / var(--grid-cols) * 100%));padding:0 calc(var(--grid-gap) / 2)}._page-grid__col-10_10tcv_187{--collspan: 10;flex-basis:calc((var(--collspan) / var(--grid-cols) * 100%));max-width:calc((var(--collspan) / var(--grid-cols) * 100%));padding:0 calc(var(--grid-gap) / 2)}._page-grid__col-11_10tcv_195{--collspan: 11;flex-basis:calc((var(--collspan) / var(--grid-cols) * 100%));max-width:calc((var(--collspan) / var(--grid-cols) * 100%));padding:0 calc(var(--grid-gap) / 2)}@media only screen and (max-width: 64rem){._page-grid__col-md-1_10tcv_206{--collspan: 1;flex-basis:calc((var(--collspan) / var(--grid-cols) * 100%));max-width:calc((var(--collspan) / var(--grid-cols) * 100%));padding:0 calc(var(--grid-gap) / 2)}._page-grid__col-md-2_10tcv_214{--collspan: 2;flex-basis:calc((var(--collspan) / var(--grid-cols) * 100%));max-width:calc((var(--collspan) / var(--grid-cols) * 100%));padding:0 calc(var(--grid-gap) / 2)}._page-grid__col-md-3_10tcv_222{--collspan: 3;flex-basis:calc((var(--collspan) / var(--grid-cols) * 100%));max-width:calc((var(--collspan) / var(--grid-cols) * 100%));padding:0 calc(var(--grid-gap) / 2)}._page-grid__col-md-4_10tcv_230{--collspan: 4;flex-basis:calc((var(--collspan) / var(--grid-cols) * 100%));max-width:calc((var(--collspan) / var(--grid-cols) * 100%));padding:0 calc(var(--grid-gap) / 2)}._page-grid__col-md-5_10tcv_238{--collspan: 5;flex-basis:calc((var(--collspan) / var(--grid-cols) * 100%));max-width:calc((var(--collspan) / var(--grid-cols) * 100%));padding:0 calc(var(--grid-gap) / 2)}._page-grid__col-md-6_10tcv_246{--collspan: 6;flex-basis:calc((var(--collspan) / var(--grid-cols) * 100%));max-width:calc((var(--collspan) / var(--grid-cols) * 100%));padding:0 calc(var(--grid-gap) / 2)}._page-grid__col-md-7_10tcv_254{--collspan: 7;flex-basis:calc((var(--collspan) / var(--grid-cols) * 100%));max-width:calc((var(--collspan) / var(--grid-cols) * 100%));padding:0 calc(var(--grid-gap) / 2)}._page-grid__col-md-8_10tcv_262{--collspan: 8;flex-basis:calc((var(--collspan) / var(--grid-cols) * 100%));max-width:calc((var(--collspan) / var(--grid-cols) * 100%));padding:0 calc(var(--grid-gap) / 2)}._page-grid__col-md-9_10tcv_270{--collspan: 9;flex-basis:calc((var(--collspan) / var(--grid-cols) * 100%));max-width:calc((var(--collspan) / var(--grid-cols) * 100%));padding:0 calc(var(--grid-gap) / 2)}._page-grid__col-md-10_10tcv_278{--collspan: 10;flex-basis:calc((var(--collspan) / var(--grid-cols) * 100%));max-width:calc((var(--collspan) / var(--grid-cols) * 100%));padding:0 calc(var(--grid-gap) / 2)}._page-grid__col-md-11_10tcv_286{--collspan: 11;flex-basis:calc((var(--collspan) / var(--grid-cols) * 100%));max-width:calc((var(--collspan) / var(--grid-cols) * 100%));padding:0 calc(var(--grid-gap) / 2)}._page-grid__col-md-12_10tcv_294{--collspan: 12;flex-basis:calc((var(--collspan) / var(--grid-cols) * 100%));max-width:calc((var(--collspan) / var(--grid-cols) * 100%));padding:0 calc(var(--grid-gap) / 2)}}._page-grid__col-start-position-1_10tcv_303{margin-left:calc((1 / 12 * 100%))}._page-grid__col-start-position-2_10tcv_307{margin-left:calc((2 / 12 * 100%))}._page-grid__col-start-position-3_10tcv_311{margin-left:25%}._page-grid__col-start-position-4_10tcv_315{margin-left:calc((4 / 12 * 100%))}._page-grid__col-start-position-5_10tcv_319{margin-left:calc((5 / 12 * 100%))}._page-grid__col-start-position-6_10tcv_323{margin-left:50%}._page-grid__col-start-position-7_10tcv_327{margin-left:calc((7 / 12 * 100%))}._page-grid__col-start-position-8_10tcv_331{margin-left:calc((8 / 12 * 100%))}._page-grid__col-start-position-9_10tcv_335{margin-left:75%}._page-grid__col-start-position-10_10tcv_339{margin-left:calc((10 / 12 * 100%))}._page-grid__col-start-position-11_10tcv_343{margin-left:calc((11 / 12 * 100%))}@media only screen and (max-width: 64rem){._page-grid__col-md-start-position-1_10tcv_350{margin-left:calc((1 / 12 * 100%))}._page-grid__col-md-start-position-2_10tcv_354{margin-left:calc((2 / 12 * 100%))}._page-grid__col-md-start-position-3_10tcv_358{margin-left:25%}._page-grid__col-md-start-position-4_10tcv_362{margin-left:calc((4 / 12 * 100%))}._page-grid__col-md-start-position-5_10tcv_366{margin-left:calc((5 / 12 * 100%))}._page-grid__col-md-start-position-6_10tcv_370{margin-left:50%}._page-grid__col-md-start-position-7_10tcv_374{margin-left:calc((7 / 12 * 100%))}._page-grid__col-md-start-position-8_10tcv_378{margin-left:calc((8 / 12 * 100%))}._page-grid__col-md-start-position-9_10tcv_382{margin-left:75%}._page-grid__col-md-start-position-10_10tcv_386{margin-left:calc((10 / 12 * 100%))}._page-grid__col-md-start-position-11_10tcv_390{margin-left:calc((11 / 12 * 100%))}}@media only screen and (max-width: 40rem){._page-grid__col-1_10tcv_110,._page-grid__col-2_10tcv_123,._page-grid__col-3_10tcv_131,._page-grid__col-4_10tcv_139,._page-grid__col-5_10tcv_147,._page-grid__col-6_10tcv_155,._page-grid__col-7_10tcv_163,._page-grid__col-8_10tcv_171,._page-grid__col-9_10tcv_179,._page-grid__col-10_10tcv_187,._page-grid__col-11_10tcv_195{flex-basis:100%;margin-left:0;max-width:100%}}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.page-wrapper{--columns: 12;--gutter: 2rem;--color: rgba(126 195 240 / 25%);--repeating-width: calc(100% / var(--columns));--column-width: calc((100% / var(--columns)) - var(--grid-gap));--background-width: calc(100% + var(--grid-gap));--background-columns: repeating-linear-gradient( to right, var(--color), var(--color) var(--column-width), transparent var(--column-width), transparent var(--repeating-width) );align-content:flex-start;border:1px solid;border-color:transparent #e9e9e9;display:flex;flex-wrap:wrap;max-width:80rem;min-height:calc(100vh - 8rem);position:relative}.page-wrapper:before{background-image:var(--background-columns);content:"";inset:0 calc(var(--grid-gap) / -2) 0 calc(var(--grid-gap) / 2);opacity:.5;position:absolute;z-index:-1}.page-wrapper>div>div{background-color:#0000000d;box-shadow:inset calc(var(--grid-gap) / 2) 0 0 0 #c8000026,inset calc(var(--grid-gap) / -2) 0 0 0 #c8000026;padding:0 calc(var(--grid-gap) / 2);text-align:center}
|
package/dist/assets/Input.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
._input_25til_1{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border:1px solid var(--color-black);color:var(--color-black);font-family:inherit;font-size:inherit;height:2rem;margin:0;padding:0 .5rem}._input--numeric_25til_13{text-align:right;width:8rem}._input--error_25til_18,._input_25til_1:invalid{border-color:var(--color-chilean-fire)}._input--full-with_25til_23{min-width:100%;width:0}._input_25til_1::placeholder{color:var(--color-black-transparent);font-size:inherit;opacity:1}._input_25til_1[type=file]{border:none}._input_25til_1:disabled{color:var(--color-black-transparent)}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { PropsWithChildren } from 'react';
|
|
2
|
+
|
|
3
|
+
type columnSize = '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10' | '11' | '12';
|
|
4
|
+
export interface ColumnProps {
|
|
5
|
+
size?: columnSize;
|
|
6
|
+
mediumSize?: columnSize;
|
|
7
|
+
startPositon?: columnSize;
|
|
8
|
+
mediumStartPosition?: columnSize;
|
|
9
|
+
position?: 'start' | 'center' | 'end';
|
|
10
|
+
}
|
|
11
|
+
export declare const Column: ({ size, mediumSize, startPositon, mediumStartPosition, position, children, }: PropsWithChildren<ColumnProps>) => import("react/jsx-runtime").JSX.Element;
|
|
12
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Column.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './Column';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { PropsWithChildren } from 'react';
|
|
2
|
+
|
|
3
|
+
type spacing = '0' | '025' | '050' | '075' | '100' | '125' | '150' | '175' | '200' | '250' | '300' | '350';
|
|
4
|
+
export interface GridRowProps {
|
|
5
|
+
gutter?: spacing;
|
|
6
|
+
marginBottom?: spacing;
|
|
7
|
+
marginTop?: spacing;
|
|
8
|
+
}
|
|
9
|
+
export declare const GridRow: {
|
|
10
|
+
({ gutter, marginBottom, marginTop, children, }: PropsWithChildren<GridRowProps>): import("react/jsx-runtime").JSX.Element;
|
|
11
|
+
Column: ({ size, mediumSize, startPositon, mediumStartPosition, position, children, }: PropsWithChildren<import('./Column').ColumnProps>) => import("react/jsx-runtime").JSX.Element;
|
|
12
|
+
};
|
|
13
|
+
export {};
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
import { jsx as i } from "react/jsx-runtime";
|
|
2
|
+
import { c as p } from "../../clsx-OuTLNxxd.js";
|
|
3
|
+
import { s as r, C as d } from "../../Column-CbI7YoMS.js";
|
|
4
|
+
const s = {
|
|
5
|
+
0: { "--grid-gap": "0.25rem" },
|
|
6
|
+
"025": { "--grid-gap": "0.25rem" },
|
|
7
|
+
"050": { "--grid-gap": "0.5rem" },
|
|
8
|
+
"075": { "--grid-gap": "0.75rem" },
|
|
9
|
+
100: { "--grid-gap": "1rem" },
|
|
10
|
+
125: { "--grid-gap": "1.25rem" },
|
|
11
|
+
150: { "--grid-gap": "1.5rem" },
|
|
12
|
+
175: { "--grid-gap": "1.75rem" },
|
|
13
|
+
200: { "--grid-gap": "2rem" },
|
|
14
|
+
250: { "--grid-gap": "2.5rem" },
|
|
15
|
+
300: { "--grid-gap": "3rem" },
|
|
16
|
+
350: { "--grid-gap": "3.5rem" }
|
|
17
|
+
}, o = ({
|
|
18
|
+
gutter: g = "200",
|
|
19
|
+
marginBottom: e = "0",
|
|
20
|
+
marginTop: m = "0",
|
|
21
|
+
children: a
|
|
22
|
+
}) => /* @__PURE__ */ i(
|
|
23
|
+
"div",
|
|
24
|
+
{
|
|
25
|
+
className: p(
|
|
26
|
+
r["page-grid__row"],
|
|
27
|
+
e && r[`page-grid__row-mb-${e}`],
|
|
28
|
+
m && r[`page-grid__row-mt-${m}`]
|
|
29
|
+
),
|
|
30
|
+
style: g && s[g],
|
|
31
|
+
children: a
|
|
32
|
+
}
|
|
33
|
+
);
|
|
34
|
+
o.Column = d;
|
|
35
|
+
export {
|
|
36
|
+
o as GridRow
|
|
37
|
+
};
|
|
38
|
+
//# sourceMappingURL=GridRow.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"GridRow.js","sources":["../../../src/components/GridRow/GridRow.tsx"],"sourcesContent":["import clsx from 'clsx';\n\nimport type { CSSProperties, PropsWithChildren } from 'react';\n\nimport { Column } from './Column';\nimport styles from './GridRow.module.css';\n\ntype spacing = '0' | '025' | '050' | '075' | '100' | '125' | '150' | '175' | '200' | '250' | '300' | '350';\nexport interface GridRowProps {\n gutter?: spacing;\n marginBottom?: spacing;\n marginTop?: spacing;\n}\n\nconst gabStyles = {\n '0': { '--grid-gap': '0.25rem' },\n '025': { '--grid-gap': '0.25rem' },\n '050': { '--grid-gap': '0.5rem' },\n '075': { '--grid-gap': '0.75rem' },\n '100': { '--grid-gap': '1rem' },\n '125': { '--grid-gap': '1.25rem' },\n '150': { '--grid-gap': '1.5rem' },\n '175': { '--grid-gap': '1.75rem' },\n '200': { '--grid-gap': '2rem' },\n '250': { '--grid-gap': '2.5rem' },\n '300': { '--grid-gap': '3rem' },\n '350': { '--grid-gap': '3.5rem' },\n};\n\nexport const GridRow = ({\n gutter = '200',\n marginBottom = '0',\n marginTop = '0',\n children,\n}: PropsWithChildren<GridRowProps>) => {\n return (\n <div\n className={clsx(\n styles['page-grid__row'],\n marginBottom && styles[`page-grid__row-mb-${marginBottom}`],\n marginTop && styles[`page-grid__row-mt-${marginTop}`]\n )}\n style={gutter && (gabStyles[gutter] as CSSProperties)}\n >\n {children}\n </div>\n );\n};\n\nGridRow.Column = Column;\n"],"names":["gabStyles","GridRow","gutter","marginBottom","marginTop","children","jsx","clsx","styles","Column"],"mappings":";;;AAcA,MAAMA,IAAY;AAAA,EAChB,GAAK,EAAE,cAAc,UAAU;AAAA,EAC/B,OAAO,EAAE,cAAc,UAAU;AAAA,EACjC,OAAO,EAAE,cAAc,SAAS;AAAA,EAChC,OAAO,EAAE,cAAc,UAAU;AAAA,EACjC,KAAO,EAAE,cAAc,OAAO;AAAA,EAC9B,KAAO,EAAE,cAAc,UAAU;AAAA,EACjC,KAAO,EAAE,cAAc,SAAS;AAAA,EAChC,KAAO,EAAE,cAAc,UAAU;AAAA,EACjC,KAAO,EAAE,cAAc,OAAO;AAAA,EAC9B,KAAO,EAAE,cAAc,SAAS;AAAA,EAChC,KAAO,EAAE,cAAc,OAAO;AAAA,EAC9B,KAAO,EAAE,cAAc,SAAS;AAClC,GAEaC,IAAU,CAAC;AAAA,EACtB,QAAAC,IAAS;AAAA,EACT,cAAAC,IAAe;AAAA,EACf,WAAAC,IAAY;AAAA,EACZ,UAAAC;AACF,MAEI,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAWC;AAAA,MACTC,EAAO,gBAAgB;AAAA,MACvBL,KAAgBK,EAAO,qBAAqBL,CAAY,EAAE;AAAA,MAC1DC,KAAaI,EAAO,qBAAqBJ,CAAS,EAAE;AAAA,IACtD;AAAA,IACA,OAAOF,KAAWF,EAAUE,CAAM;AAAA,IAEjC,UAAAG;AAAA,EAAA;AAAA;AAKPJ,EAAQ,SAASQ;"}
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import { GridRowProps } from './GridRow';
|
|
2
|
+
|
|
3
|
+
declare const _default: import('@storybook/types').ComponentAnnotations<import('@storybook/react').ReactRenderer, GridRowProps>;
|
|
4
|
+
export default _default;
|
|
5
|
+
export declare const GridRowExample: import('@storybook/types').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, GridRowProps>;
|
|
6
|
+
export declare const WithMediumBreakpoint: import('@storybook/types').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, GridRowProps>;
|
|
@@ -0,0 +1,87 @@
|
|
|
1
|
+
import { jsxs as r, jsx as i } from "react/jsx-runtime";
|
|
2
|
+
import { GridRow as e } from "./GridRow.js";
|
|
3
|
+
import '../../assets/GridRow.css';const n = {
|
|
4
|
+
0: { "--grid-gap": "0.25rem" },
|
|
5
|
+
"025": { "--grid-gap": "0.25rem" },
|
|
6
|
+
"050": { "--grid-gap": "0.5rem" },
|
|
7
|
+
"075": { "--grid-gap": "0.75rem" },
|
|
8
|
+
100: { "--grid-gap": "1rem" },
|
|
9
|
+
125: { "--grid-gap": "1.25rem" },
|
|
10
|
+
150: { "--grid-gap": "1.5rem" },
|
|
11
|
+
175: { "--grid-gap": "1.75rem" },
|
|
12
|
+
200: { "--grid-gap": "2rem" },
|
|
13
|
+
250: { "--grid-gap": "2.5rem" },
|
|
14
|
+
300: { "--grid-gap": "3rem" },
|
|
15
|
+
350: { "--grid-gap": "3.5rem" }
|
|
16
|
+
}, p = {
|
|
17
|
+
title: "Organisms/GridRow",
|
|
18
|
+
component: e,
|
|
19
|
+
argTypes: {
|
|
20
|
+
gutter: {
|
|
21
|
+
options: ["0", "025", "050", "075", "100", "125", "150", "175", "200", "250", "300", "350"],
|
|
22
|
+
control: { type: "select" }
|
|
23
|
+
},
|
|
24
|
+
marginBottom: {
|
|
25
|
+
options: ["0", "025", "050", "075", "100", "125", "150", "175", "200", "250", "300", "350"],
|
|
26
|
+
control: { type: "select" }
|
|
27
|
+
},
|
|
28
|
+
marginTop: {
|
|
29
|
+
options: ["0", "025", "050", "075", "100", "125", "150", "175", "200", "250", "300", "350"],
|
|
30
|
+
control: { type: "select" }
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
}, m = (l) => /* @__PURE__ */ r("div", { className: "page-wrapper", style: l.gutter && n[l.gutter], children: [
|
|
34
|
+
/* @__PURE__ */ i(e, { ...l, children: /* @__PURE__ */ i(e.Column, { size: "12", children: "Col-1" }) }),
|
|
35
|
+
/* @__PURE__ */ r(e, { ...l, children: [
|
|
36
|
+
/* @__PURE__ */ i(e.Column, { size: "1", children: "Col-1" }),
|
|
37
|
+
/* @__PURE__ */ i(e.Column, { size: "11", children: "Col-11" })
|
|
38
|
+
] }),
|
|
39
|
+
/* @__PURE__ */ r(e, { ...l, children: [
|
|
40
|
+
/* @__PURE__ */ i(e.Column, { size: "2", children: "Col-2" }),
|
|
41
|
+
/* @__PURE__ */ i(e.Column, { size: "10", children: "Col-10" })
|
|
42
|
+
] }),
|
|
43
|
+
/* @__PURE__ */ r(e, { ...l, children: [
|
|
44
|
+
/* @__PURE__ */ i(e.Column, { size: "3", children: "Col-3" }),
|
|
45
|
+
/* @__PURE__ */ i(e.Column, { size: "9", children: "Col-9" })
|
|
46
|
+
] }),
|
|
47
|
+
/* @__PURE__ */ r(e, { ...l, children: [
|
|
48
|
+
/* @__PURE__ */ i(e.Column, { size: "4", children: "Col-4" }),
|
|
49
|
+
/* @__PURE__ */ i(e.Column, { size: "8", children: "Col-8" })
|
|
50
|
+
] }),
|
|
51
|
+
/* @__PURE__ */ r(e, { ...l, children: [
|
|
52
|
+
/* @__PURE__ */ i(e.Column, { size: "5", children: "Col-5" }),
|
|
53
|
+
/* @__PURE__ */ i(e.Column, { size: "7", children: "Col-7" })
|
|
54
|
+
] }),
|
|
55
|
+
/* @__PURE__ */ r(e, { ...l, children: [
|
|
56
|
+
/* @__PURE__ */ i(e.Column, { size: "6", children: "Col-6" }),
|
|
57
|
+
/* @__PURE__ */ i(e.Column, { size: "6", children: "Col-6" })
|
|
58
|
+
] })
|
|
59
|
+
] }), o = {
|
|
60
|
+
gutter: "200",
|
|
61
|
+
marginBottom: "050",
|
|
62
|
+
marginTop: "0"
|
|
63
|
+
}, d = m.bind({});
|
|
64
|
+
d.args = {
|
|
65
|
+
...o
|
|
66
|
+
};
|
|
67
|
+
const t = (l) => /* @__PURE__ */ r("div", { className: "page-wrapper", style: l.gutter && n[l.gutter], children: [
|
|
68
|
+
/* @__PURE__ */ r(e, { ...l, children: [
|
|
69
|
+
/* @__PURE__ */ i(e.Column, { size: "4", mediumSize: "6", children: "L: 4, Md: 6, S: 12" }),
|
|
70
|
+
/* @__PURE__ */ i(e.Column, { size: "4", mediumSize: "6", children: "L: 4, Md: 6, S: 12" }),
|
|
71
|
+
/* @__PURE__ */ i(e.Column, { size: "4", mediumSize: "12", children: "L: 4, Md: 12" })
|
|
72
|
+
] }),
|
|
73
|
+
/* @__PURE__ */ r(e, { ...l, children: [
|
|
74
|
+
/* @__PURE__ */ i(e.Column, { size: "3", mediumSize: "6", children: "L: 3, Md: 6, S: 12" }),
|
|
75
|
+
/* @__PURE__ */ i(e.Column, { size: "3", mediumSize: "6", children: "L: 3, Md: 12" }),
|
|
76
|
+
/* @__PURE__ */ i(e.Column, { size: "6", mediumSize: "12", children: "L: 6, Md: 12, S: 12" })
|
|
77
|
+
] })
|
|
78
|
+
] }), u = t.bind({});
|
|
79
|
+
d.args = {
|
|
80
|
+
...o
|
|
81
|
+
};
|
|
82
|
+
export {
|
|
83
|
+
d as GridRowExample,
|
|
84
|
+
u as WithMediumBreakpoint,
|
|
85
|
+
p as default
|
|
86
|
+
};
|
|
87
|
+
//# sourceMappingURL=GridRow.stories.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"GridRow.stories.js","sources":["../../../src/components/GridRow/GridRow.stories.tsx"],"sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\nimport type { GridRowProps } from './GridRow';\nimport type { CSSProperties } from 'react';\n\nimport { GridRow } from './GridRow';\n\nimport './GridRow.stories.css';\n\nconst gabStyles = {\n '0': { '--grid-gap': '0.25rem' },\n '025': { '--grid-gap': '0.25rem' },\n '050': { '--grid-gap': '0.5rem' },\n '075': { '--grid-gap': '0.75rem' },\n '100': { '--grid-gap': '1rem' },\n '125': { '--grid-gap': '1.25rem' },\n '150': { '--grid-gap': '1.5rem' },\n '175': { '--grid-gap': '1.75rem' },\n '200': { '--grid-gap': '2rem' },\n '250': { '--grid-gap': '2.5rem' },\n '300': { '--grid-gap': '3rem' },\n '350': { '--grid-gap': '3.5rem' },\n};\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n title: 'Organisms/GridRow',\n component: GridRow,\n argTypes: {\n gutter: {\n options: ['0', '025', '050', '075', '100', '125', '150', '175', '200', '250', '300', '350'],\n control: { type: 'select' },\n },\n marginBottom: {\n options: ['0', '025', '050', '075', '100', '125', '150', '175', '200', '250', '300', '350'],\n control: { type: 'select' },\n },\n marginTop: {\n options: ['0', '025', '050', '075', '100', '125', '150', '175', '200', '250', '300', '350'],\n control: { type: 'select' },\n },\n },\n} as Meta<GridRowProps>;\n\nconst Template: StoryFn<GridRowProps> = (args) => (\n <div className=\"page-wrapper\" style={args.gutter && (gabStyles[args.gutter] as CSSProperties)}>\n <GridRow {...args}>\n <GridRow.Column size=\"12\">Col-1</GridRow.Column>\n </GridRow>\n <GridRow {...args}>\n <GridRow.Column size=\"1\">Col-1</GridRow.Column>\n <GridRow.Column size=\"11\">Col-11</GridRow.Column>\n </GridRow>\n <GridRow {...args}>\n <GridRow.Column size=\"2\">Col-2</GridRow.Column>\n <GridRow.Column size=\"10\">Col-10</GridRow.Column>\n </GridRow>\n <GridRow {...args}>\n <GridRow.Column size=\"3\">Col-3</GridRow.Column>\n <GridRow.Column size=\"9\">Col-9</GridRow.Column>\n </GridRow>\n <GridRow {...args}>\n <GridRow.Column size=\"4\">Col-4</GridRow.Column>\n <GridRow.Column size=\"8\">Col-8</GridRow.Column>\n </GridRow>\n <GridRow {...args}>\n <GridRow.Column size=\"5\">Col-5</GridRow.Column>\n <GridRow.Column size=\"7\">Col-7</GridRow.Column>\n </GridRow>\n <GridRow {...args}>\n <GridRow.Column size=\"6\">Col-6</GridRow.Column>\n <GridRow.Column size=\"6\">Col-6</GridRow.Column>\n </GridRow>\n </div>\n);\n\nconst defaultArgs: Partial<GridRowProps> = {\n gutter: '200',\n marginBottom: '050',\n marginTop: '0',\n};\n\nexport const GridRowExample = Template.bind({});\nGridRowExample.args = {\n ...defaultArgs,\n};\n\nconst TemplateMedium: StoryFn<GridRowProps> = (args) => (\n <div className=\"page-wrapper\" style={args.gutter && (gabStyles[args.gutter] as CSSProperties)}>\n <GridRow {...args}>\n <GridRow.Column size=\"4\" mediumSize=\"6\">\n L: 4, Md: 6, S: 12\n </GridRow.Column>\n <GridRow.Column size=\"4\" mediumSize=\"6\">\n L: 4, Md: 6, S: 12\n </GridRow.Column>\n <GridRow.Column size=\"4\" mediumSize=\"12\">\n L: 4, Md: 12\n </GridRow.Column>\n </GridRow>\n <GridRow {...args}>\n <GridRow.Column size=\"3\" mediumSize=\"6\">\n L: 3, Md: 6, S: 12\n </GridRow.Column>\n <GridRow.Column size=\"3\" mediumSize=\"6\">\n L: 3, Md: 12\n </GridRow.Column>\n <GridRow.Column size=\"6\" mediumSize=\"12\">\n L: 6, Md: 12, S: 12\n </GridRow.Column>\n </GridRow>\n </div>\n);\n\nexport const WithMediumBreakpoint = TemplateMedium.bind({});\nGridRowExample.args = {\n ...defaultArgs,\n};\n"],"names":["gabStyles","GridRow_stories","GridRow","Template","args","jsxs","jsx","defaultArgs","GridRowExample","TemplateMedium","WithMediumBreakpoint"],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './GridRow';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
|
|
@@ -1,28 +1,28 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import { forwardRef as
|
|
3
|
-
import { c
|
|
4
|
-
import '../../assets/Input.css';const
|
|
5
|
-
input:
|
|
6
|
-
"input--numeric": "_input--
|
|
7
|
-
"input--error": "_input--
|
|
8
|
-
"input--full-with": "_input--full-
|
|
9
|
-
},
|
|
10
|
-
return /* @__PURE__ */
|
|
1
|
+
import { jsx as l } from "react/jsx-runtime";
|
|
2
|
+
import { forwardRef as _ } from "react";
|
|
3
|
+
import { c } from "../../clsx-OuTLNxxd.js";
|
|
4
|
+
import '../../assets/Input.css';const f = "_input_25til_1", t = {
|
|
5
|
+
input: f,
|
|
6
|
+
"input--numeric": "_input--numeric_25til_13",
|
|
7
|
+
"input--error": "_input--error_25til_18",
|
|
8
|
+
"input--full-with": "_input--full-with_25til_23"
|
|
9
|
+
}, x = _(function({ id: i, appearance: r, type: n = "text", isNumeric: u, fullWidth: p, ...o }, e) {
|
|
10
|
+
return /* @__PURE__ */ l(
|
|
11
11
|
"input",
|
|
12
12
|
{
|
|
13
13
|
...o,
|
|
14
14
|
ref: e,
|
|
15
|
-
id:
|
|
16
|
-
className:
|
|
17
|
-
[t["input--error"]]:
|
|
15
|
+
id: i,
|
|
16
|
+
className: c(t.input, {
|
|
17
|
+
[t["input--error"]]: r === "error",
|
|
18
18
|
[t["input--full-with"]]: p,
|
|
19
19
|
[t["input--numeric"]]: u
|
|
20
20
|
}),
|
|
21
|
-
type:
|
|
21
|
+
type: n
|
|
22
22
|
}
|
|
23
23
|
);
|
|
24
24
|
});
|
|
25
25
|
export {
|
|
26
|
-
|
|
26
|
+
x as Input
|
|
27
27
|
};
|
|
28
28
|
//# sourceMappingURL=Input.js.map
|
|
@@ -6,15 +6,16 @@ import { Container as u } from "../storyComponents/Container/Container.js";
|
|
|
6
6
|
import { Icon as f } from "../Icon/Icon.js";
|
|
7
7
|
import "../Button/Button.js";
|
|
8
8
|
import "../OverlayCloseButton/OverlayCloseButton.js";
|
|
9
|
+
import "../GridRow/GridRow.js";
|
|
9
10
|
import "../IconButton/IconButton.js";
|
|
10
11
|
import "../Input/Input.js";
|
|
11
|
-
import "../../MultiSelect-
|
|
12
|
+
import "../../MultiSelect-Drcfmp0z.js";
|
|
12
13
|
import "../SelectListbox/SelectListbox.js";
|
|
13
14
|
import "../SelectListbox/SelectProvider.js";
|
|
14
15
|
const C = (t) => {
|
|
15
16
|
const r = t.variant ?? [];
|
|
16
17
|
return { ...t, variant: r.toString() };
|
|
17
|
-
},
|
|
18
|
+
}, _ = {
|
|
18
19
|
title: "Atoms/InputField",
|
|
19
20
|
component: l,
|
|
20
21
|
argTypes: {
|
|
@@ -73,6 +74,6 @@ export {
|
|
|
73
74
|
h as InputFieldExample,
|
|
74
75
|
I as WithIconClearTrigger,
|
|
75
76
|
v as WithStringClearTrigger,
|
|
76
|
-
|
|
77
|
+
_ as default
|
|
77
78
|
};
|
|
78
79
|
//# sourceMappingURL=InputField.stories.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InputField.stories.js","sources":["../../../src/components/InputField/InputField.stories.tsx"],"sourcesContent":["import { useRef, useState } from 'react';\nimport { fn } from '@storybook/test';\n\nimport type { ChangeEvent } from 'react';\nimport type { Meta, StoryFn } from '@storybook/react';\nimport type { InputFieldProps } from './InputField';\n\nimport { InputField } from './InputField';\n\nimport { Container } from 'components/storyComponents/Container';\nimport { Icon } from 'components';\n\nconst transformArgs = (args: InputFieldProps) => {\n // args.variant is provided as an array because the control type is set to a checkbox. So this transforms the selected value into its proper value: a string\n const variantArray = (args.variant as unknown as string[]) ?? [];\n return { ...args, ...{ variant: variantArray.toString() } } as InputFieldProps;\n};\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n title: 'Atoms/InputField',\n component: InputField,\n argTypes: {\n variant: {\n options: ['large'],\n control: 'check',\n },\n type: {\n control: 'radio',\n options: ['text', 'password', 'email'],\n },\n id: {\n control: 'text',\n },\n autoComplete: {\n table: {\n disable: true,\n },\n },\n },\n} as Meta<InputFieldProps>;\n\nconst Template: StoryFn<InputFieldProps> = (args) => {\n const [inputValue, setInputValue] = useState<InputFieldProps['value']>('');\n const inputRef = useRef<HTMLInputElement>(null);\n\n const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n setInputValue(event.target.value);\n fn()('handleChange');\n };\n\n const handleClear = () => {\n setInputValue('');\n fn()('handleClear');\n };\n\n return (\n <Container>\n <InputField\n {...transformArgs(args)}\n value={inputValue}\n onChange={handleChange}\n onClear={handleClear}\n ref={inputRef}\n />\n </Container>\n );\n};\n\nconst defaultArgs: Partial<InputFieldProps> = {\n type: 'text',\n variant: undefined,\n id: '4f9ca77d',\n};\n\nexport const InputFieldExample = Template.bind({});\nInputFieldExample.args = {\n ...defaultArgs,\n};\n\nexport const WithStringClearTrigger = Template.bind({});\nWithStringClearTrigger.args = {\n ...defaultArgs,\n clearTrigger: 'Clear',\n};\n\nexport const WithIconClearTrigger = Template.bind({});\nWithIconClearTrigger.args = {\n ...defaultArgs,\n clearTrigger: <Icon name=\"Cross\" />,\n};\n"],"names":["transformArgs","args","variantArray","InputField_stories","InputField","Template","inputValue","setInputValue","useState","inputRef","useRef","handleChange","event","fn","handleClear","Container","jsx","defaultArgs","InputFieldExample","WithStringClearTrigger","WithIconClearTrigger","Icon"],"mappings":"
|
|
1
|
+
{"version":3,"file":"InputField.stories.js","sources":["../../../src/components/InputField/InputField.stories.tsx"],"sourcesContent":["import { useRef, useState } from 'react';\nimport { fn } from '@storybook/test';\n\nimport type { ChangeEvent } from 'react';\nimport type { Meta, StoryFn } from '@storybook/react';\nimport type { InputFieldProps } from './InputField';\n\nimport { InputField } from './InputField';\n\nimport { Container } from 'components/storyComponents/Container';\nimport { Icon } from 'components';\n\nconst transformArgs = (args: InputFieldProps) => {\n // args.variant is provided as an array because the control type is set to a checkbox. So this transforms the selected value into its proper value: a string\n const variantArray = (args.variant as unknown as string[]) ?? [];\n return { ...args, ...{ variant: variantArray.toString() } } as InputFieldProps;\n};\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n title: 'Atoms/InputField',\n component: InputField,\n argTypes: {\n variant: {\n options: ['large'],\n control: 'check',\n },\n type: {\n control: 'radio',\n options: ['text', 'password', 'email'],\n },\n id: {\n control: 'text',\n },\n autoComplete: {\n table: {\n disable: true,\n },\n },\n },\n} as Meta<InputFieldProps>;\n\nconst Template: StoryFn<InputFieldProps> = (args) => {\n const [inputValue, setInputValue] = useState<InputFieldProps['value']>('');\n const inputRef = useRef<HTMLInputElement>(null);\n\n const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n setInputValue(event.target.value);\n fn()('handleChange');\n };\n\n const handleClear = () => {\n setInputValue('');\n fn()('handleClear');\n };\n\n return (\n <Container>\n <InputField\n {...transformArgs(args)}\n value={inputValue}\n onChange={handleChange}\n onClear={handleClear}\n ref={inputRef}\n />\n </Container>\n );\n};\n\nconst defaultArgs: Partial<InputFieldProps> = {\n type: 'text',\n variant: undefined,\n id: '4f9ca77d',\n};\n\nexport const InputFieldExample = Template.bind({});\nInputFieldExample.args = {\n ...defaultArgs,\n};\n\nexport const WithStringClearTrigger = Template.bind({});\nWithStringClearTrigger.args = {\n ...defaultArgs,\n clearTrigger: 'Clear',\n};\n\nexport const WithIconClearTrigger = Template.bind({});\nWithIconClearTrigger.args = {\n ...defaultArgs,\n clearTrigger: <Icon name=\"Cross\" />,\n};\n"],"names":["transformArgs","args","variantArray","InputField_stories","InputField","Template","inputValue","setInputValue","useState","inputRef","useRef","handleChange","event","fn","handleClear","Container","jsx","defaultArgs","InputFieldExample","WithStringClearTrigger","WithIconClearTrigger","Icon"],"mappings":";;;;;;;;;;;;;;AAYA,MAAMA,IAAgB,CAACC,MAA0B;AAEzC,QAAAC,IAAgBD,EAAK,WAAmC;AACvD,SAAA,EAAE,GAAGA,GAAW,SAASC,EAAa,SAAS;AACxD,GAGeC,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,SAAS;AAAA,MACP,SAAS,CAAC,OAAO;AAAA,MACjB,SAAS;AAAA,IACX;AAAA,IACA,MAAM;AAAA,MACJ,SAAS;AAAA,MACT,SAAS,CAAC,QAAQ,YAAY,OAAO;AAAA,IACvC;AAAA,IACA,IAAI;AAAA,MACF,SAAS;AAAA,IACX;AAAA,IACA,cAAc;AAAA,MACZ,OAAO;AAAA,QACL,SAAS;AAAA,MACX;AAAA,IACF;AAAA,EACF;AACF,GAEMC,IAAqC,CAACJ,MAAS;AACnD,QAAM,CAACK,GAAYC,CAAa,IAAIC,EAAmC,EAAE,GACnEC,IAAWC,EAAyB,IAAI,GAExCC,IAAe,CAACC,MAAyC;AAC/C,IAAAL,EAAAK,EAAM,OAAO,KAAK,GAChCC,EAAA,EAAK,cAAc;AAAA,EAAA,GAGfC,IAAc,MAAM;AACxB,IAAAP,EAAc,EAAE,GAChBM,EAAA,EAAK,aAAa;AAAA,EAAA;AAGpB,2BACGE,GACC,EAAA,UAAA,gBAAAC;AAAA,IAACZ;AAAA,IAAA;AAAA,MACE,GAAGJ,EAAcC,CAAI;AAAA,MACtB,OAAOK;AAAA,MACP,UAAUK;AAAA,MACV,SAASG;AAAA,MACT,KAAKL;AAAA,IAAA;AAAA,EAET,EAAA,CAAA;AAEJ,GAEMQ,IAAwC;AAAA,EAC5C,MAAM;AAAA,EACN,SAAS;AAAA,EACT,IAAI;AACN,GAEaC,IAAoBb,EAAS,KAAK,EAAE;AACjDa,EAAkB,OAAO;AAAA,EACvB,GAAGD;AACL;AAEO,MAAME,IAAyBd,EAAS,KAAK,EAAE;AACtDc,EAAuB,OAAO;AAAA,EAC5B,GAAGF;AAAA,EACH,cAAc;AAChB;AAEO,MAAMG,IAAuBf,EAAS,KAAK,EAAE;AACpDe,EAAqB,OAAO;AAAA,EAC1B,GAAGH;AAAA,EACH,cAAc,gBAAAD,EAACK,GAAK,EAAA,MAAK,QAAQ,CAAA;AACnC;"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsxs as p, jsx as r } from "react/jsx-runtime";
|
|
2
2
|
import { f as d } from "../../index-CYUtHyCV.js";
|
|
3
3
|
import { useState as b } from "react";
|
|
4
|
-
import { M as l } from "../../MultiSelect-
|
|
4
|
+
import { M as l } from "../../MultiSelect-Drcfmp0z.js";
|
|
5
5
|
import { Container as S } from "../storyComponents/Container/Container.js";
|
|
6
6
|
const T = {
|
|
7
7
|
title: "Organisms/MultiSelect",
|
|
@@ -4,13 +4,14 @@ import "../../Label/Label.js";
|
|
|
4
4
|
import "react";
|
|
5
5
|
import "../../Button/Button.js";
|
|
6
6
|
import "../../OverlayCloseButton/OverlayCloseButton.js";
|
|
7
|
+
import "../../GridRow/GridRow.js";
|
|
7
8
|
import "../../IconButton/IconButton.js";
|
|
8
9
|
import "../../Input/Input.js";
|
|
9
10
|
import "../../InputField/InputField.js";
|
|
10
|
-
import { a as
|
|
11
|
+
import { a as x } from "../../../MultiSelect-Drcfmp0z.js";
|
|
11
12
|
import "../../SelectListbox/SelectListbox.js";
|
|
12
13
|
import "../../SelectListbox/SelectProvider.js";
|
|
13
14
|
export {
|
|
14
|
-
|
|
15
|
+
x as MultiSelectHeader
|
|
15
16
|
};
|
|
16
17
|
//# sourceMappingURL=MultiSelectHeader.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MultiSelectHeader.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"MultiSelectHeader.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;"}
|
|
@@ -6,14 +6,15 @@ import "react";
|
|
|
6
6
|
import { Icon as m } from "../Icon/Icon.js";
|
|
7
7
|
import "../Button/Button.js";
|
|
8
8
|
import "../OverlayCloseButton/OverlayCloseButton.js";
|
|
9
|
+
import "../GridRow/GridRow.js";
|
|
9
10
|
import "../IconButton/IconButton.js";
|
|
10
11
|
import "../Input/Input.js";
|
|
11
12
|
import "../InputField/InputField.js";
|
|
12
|
-
import "../../MultiSelect-
|
|
13
|
+
import "../../MultiSelect-Drcfmp0z.js";
|
|
13
14
|
import { Repeater as i } from "../Repeater/Repeater.js";
|
|
14
15
|
import "../SelectListbox/SelectListbox.js";
|
|
15
16
|
import "../SelectListbox/SelectProvider.js";
|
|
16
|
-
const
|
|
17
|
+
const F = {
|
|
17
18
|
title: "Atoms/ProgrammeCard",
|
|
18
19
|
component: t
|
|
19
20
|
}, s = (o) => /* @__PURE__ */ e(n, { size: "large", children: /* @__PURE__ */ e(t, { ...o }) }), l = s.bind({});
|
|
@@ -44,20 +45,20 @@ d.args = {
|
|
|
44
45
|
] }),
|
|
45
46
|
onClick: a()
|
|
46
47
|
};
|
|
47
|
-
const
|
|
48
|
+
const p = (o) => /* @__PURE__ */ e(n, { size: "large", children: /* @__PURE__ */ r(i, { children: [
|
|
48
49
|
/* @__PURE__ */ e(t, { ...o }),
|
|
49
50
|
/* @__PURE__ */ e(t, { ...o }),
|
|
50
51
|
/* @__PURE__ */ e(t, { ...o })
|
|
51
|
-
] }) }),
|
|
52
|
-
|
|
52
|
+
] }) }), c = p.bind({});
|
|
53
|
+
c.args = {
|
|
53
54
|
header: "This is my header",
|
|
54
55
|
details: "This is my details",
|
|
55
56
|
onClick: a()
|
|
56
57
|
};
|
|
57
58
|
export {
|
|
58
|
-
|
|
59
|
+
c as MultiProgrammeCards,
|
|
59
60
|
l as ProgrammeCardExample,
|
|
60
61
|
d as WithComplexContent,
|
|
61
|
-
|
|
62
|
+
F as default
|
|
62
63
|
};
|
|
63
64
|
//# sourceMappingURL=ProgrammeCard.stories.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ProgrammeCard.stories.js","sources":["../../../src/components/ProgrammeCard/ProgrammeCard.stories.tsx"],"sourcesContent":["import { fn } from '@storybook/test';\n\nimport type { Meta, StoryFn } from '@storybook/react';\nimport type { ProgrammeCardProps } from './ProgrammeCard';\n\nimport { ProgrammeCard } from './ProgrammeCard';\n\nimport { Container } from 'components/storyComponents/Container';\nimport { Icon, Repeater } from 'components';\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n title: 'Atoms/ProgrammeCard',\n component: ProgrammeCard,\n} as Meta<ProgrammeCardProps>;\n\nconst Template: StoryFn<ProgrammeCardProps> = (args) => (\n <Container size=\"large\">\n <ProgrammeCard {...args} />\n </Container>\n);\n\nexport const ProgrammeCardExample = Template.bind({});\nProgrammeCardExample.args = {\n header: 'This is my header',\n details: 'This is my details',\n onClick: fn(),\n};\n\nexport const WithComplexContent = Template.bind({});\nWithComplexContent.args = {\n header: (\n <Repeater flexDirection=\"row\" gap=\"150\">\n <Icon name=\"Envelope\" size={32} />\n <h2 style={{ margin: 0 }}>This is my header</h2>\n </Repeater>\n ),\n details: (\n <Repeater flexDirection=\"row\" gap=\"150\">\n <Repeater flexDirection=\"row\">\n <Icon name=\"FaceFrown\" />\n Details 1\n </Repeater>\n <Repeater flexDirection=\"row\">\n <Icon name=\"Heart\" />\n Details 2\n </Repeater>\n <Repeater flexDirection=\"row\">\n <Icon name=\"Sparkles\" />\n Details 3\n </Repeater>\n </Repeater>\n ),\n onClick: fn(),\n};\n\nconst MultiProgrammeCardsTemplate: StoryFn<ProgrammeCardProps> = (args) => (\n <Container size=\"large\">\n <Repeater>\n <ProgrammeCard {...args} />\n <ProgrammeCard {...args} />\n <ProgrammeCard {...args} />\n </Repeater>\n </Container>\n);\n\nexport const MultiProgrammeCards = MultiProgrammeCardsTemplate.bind({});\nMultiProgrammeCards.args = {\n header: 'This is my header',\n details: 'This is my details',\n onClick: fn(),\n};\n"],"names":["ProgrammeCard_stories","ProgrammeCard","Template","args","jsx","Container","ProgrammeCardExample","fn","WithComplexContent","jsxs","Repeater","Icon","MultiProgrammeCardsTemplate","MultiProgrammeCards"],"mappings":"
|
|
1
|
+
{"version":3,"file":"ProgrammeCard.stories.js","sources":["../../../src/components/ProgrammeCard/ProgrammeCard.stories.tsx"],"sourcesContent":["import { fn } from '@storybook/test';\n\nimport type { Meta, StoryFn } from '@storybook/react';\nimport type { ProgrammeCardProps } from './ProgrammeCard';\n\nimport { ProgrammeCard } from './ProgrammeCard';\n\nimport { Container } from 'components/storyComponents/Container';\nimport { Icon, Repeater } from 'components';\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n title: 'Atoms/ProgrammeCard',\n component: ProgrammeCard,\n} as Meta<ProgrammeCardProps>;\n\nconst Template: StoryFn<ProgrammeCardProps> = (args) => (\n <Container size=\"large\">\n <ProgrammeCard {...args} />\n </Container>\n);\n\nexport const ProgrammeCardExample = Template.bind({});\nProgrammeCardExample.args = {\n header: 'This is my header',\n details: 'This is my details',\n onClick: fn(),\n};\n\nexport const WithComplexContent = Template.bind({});\nWithComplexContent.args = {\n header: (\n <Repeater flexDirection=\"row\" gap=\"150\">\n <Icon name=\"Envelope\" size={32} />\n <h2 style={{ margin: 0 }}>This is my header</h2>\n </Repeater>\n ),\n details: (\n <Repeater flexDirection=\"row\" gap=\"150\">\n <Repeater flexDirection=\"row\">\n <Icon name=\"FaceFrown\" />\n Details 1\n </Repeater>\n <Repeater flexDirection=\"row\">\n <Icon name=\"Heart\" />\n Details 2\n </Repeater>\n <Repeater flexDirection=\"row\">\n <Icon name=\"Sparkles\" />\n Details 3\n </Repeater>\n </Repeater>\n ),\n onClick: fn(),\n};\n\nconst MultiProgrammeCardsTemplate: StoryFn<ProgrammeCardProps> = (args) => (\n <Container size=\"large\">\n <Repeater>\n <ProgrammeCard {...args} />\n <ProgrammeCard {...args} />\n <ProgrammeCard {...args} />\n </Repeater>\n </Container>\n);\n\nexport const MultiProgrammeCards = MultiProgrammeCardsTemplate.bind({});\nMultiProgrammeCards.args = {\n header: 'This is my header',\n details: 'This is my details',\n onClick: fn(),\n};\n"],"names":["ProgrammeCard_stories","ProgrammeCard","Template","args","jsx","Container","ProgrammeCardExample","fn","WithComplexContent","jsxs","Repeater","Icon","MultiProgrammeCardsTemplate","MultiProgrammeCards"],"mappings":";;;;;;;;;;;;;;;;AAWA,MAAeA,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AACb,GAEMC,IAAwC,CAACC,MAC5C,gBAAAC,EAAAC,GAAA,EAAU,MAAK,SACd,UAAC,gBAAAD,EAAAH,GAAA,EAAe,GAAGE,EAAM,CAAA,EAC3B,CAAA,GAGWG,IAAuBJ,EAAS,KAAK,EAAE;AACpDI,EAAqB,OAAO;AAAA,EAC1B,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,SAASC,EAAG;AACd;AAEO,MAAMC,IAAqBN,EAAS,KAAK,EAAE;AAClDM,EAAmB,OAAO;AAAA,EACxB,QACG,gBAAAC,EAAAC,GAAA,EAAS,eAAc,OAAM,KAAI,OAChC,UAAA;AAAA,IAAA,gBAAAN,EAACO,GAAK,EAAA,MAAK,YAAW,MAAM,IAAI;AAAA,sBAC/B,MAAG,EAAA,OAAO,EAAE,QAAQ,KAAK,UAAiB,qBAAA;AAAA,EAAA,GAC7C;AAAA,EAEF,SACG,gBAAAF,EAAAC,GAAA,EAAS,eAAc,OAAM,KAAI,OAChC,UAAA;AAAA,IAAC,gBAAAD,EAAAC,GAAA,EAAS,eAAc,OACtB,UAAA;AAAA,MAAC,gBAAAN,EAAAO,GAAA,EAAK,MAAK,YAAY,CAAA;AAAA,MAAE;AAAA,IAAA,GAE3B;AAAA,IACA,gBAAAF,EAACC,GAAS,EAAA,eAAc,OACtB,UAAA;AAAA,MAAC,gBAAAN,EAAAO,GAAA,EAAK,MAAK,QAAQ,CAAA;AAAA,MAAE;AAAA,IAAA,GAEvB;AAAA,IACA,gBAAAF,EAACC,GAAS,EAAA,eAAc,OACtB,UAAA;AAAA,MAAC,gBAAAN,EAAAO,GAAA,EAAK,MAAK,WAAW,CAAA;AAAA,MAAE;AAAA,IAAA,GAE1B;AAAA,EAAA,GACF;AAAA,EAEF,SAASJ,EAAG;AACd;AAEA,MAAMK,IAA2D,CAACT,MAChE,gBAAAC,EAACC,KAAU,MAAK,SACd,4BAACK,GACC,EAAA,UAAA;AAAA,EAAC,gBAAAN,EAAAH,GAAA,EAAe,GAAGE,GAAM;AAAA,EACzB,gBAAAC,EAACH,GAAe,EAAA,GAAGE,GAAM;AAAA,EACzB,gBAAAC,EAACH,GAAe,EAAA,GAAGE,GAAM;AAAA,EAC3B,CAAA,EACF,CAAA,GAGWU,IAAsBD,EAA4B,KAAK,EAAE;AACtEC,EAAoB,OAAO;AAAA,EACzB,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,SAASN,EAAG;AACd;"}
|
package/dist/components/index.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { Accordion as t } from "./Accordion/Accordion.js";
|
|
2
2
|
import { AppStatusBar as p } from "./AppStatusBar/AppStatusBar.js";
|
|
3
3
|
import { Attention as f } from "./Attention/Attention.js";
|
|
4
|
-
import { Backdrop as
|
|
4
|
+
import { Backdrop as i } from "./Backdrop/Backdrop.js";
|
|
5
5
|
import { Button as n } from "./Button/Button.js";
|
|
6
6
|
import { ButtonGroup as u } from "./ButtonGroup/ButtonGroup.js";
|
|
7
7
|
import { Card as d } from "./Card/Card.js";
|
|
@@ -10,31 +10,32 @@ import { Drawer as M } from "./Drawer/Drawer.js";
|
|
|
10
10
|
import { FieldHint as I } from "./FieldHint/FieldHint.js";
|
|
11
11
|
import { Fieldset as L } from "./Fieldset/Fieldset.js";
|
|
12
12
|
import { FormField as g } from "./FormField/FormField.js";
|
|
13
|
-
import {
|
|
14
|
-
import {
|
|
15
|
-
import {
|
|
16
|
-
import {
|
|
17
|
-
import {
|
|
18
|
-
import {
|
|
19
|
-
import {
|
|
20
|
-
import {
|
|
21
|
-
import {
|
|
22
|
-
import {
|
|
23
|
-
import {
|
|
24
|
-
import {
|
|
25
|
-
import {
|
|
26
|
-
import {
|
|
27
|
-
import {
|
|
28
|
-
import {
|
|
29
|
-
import {
|
|
30
|
-
import {
|
|
31
|
-
import {
|
|
32
|
-
import {
|
|
13
|
+
import { GridRow as A } from "./GridRow/GridRow.js";
|
|
14
|
+
import { Icon as P } from "./Icon/Icon.js";
|
|
15
|
+
import { IconButton as v } from "./IconButton/IconButton.js";
|
|
16
|
+
import { InfoMessage as G } from "./InfoMessage/InfoMessage.js";
|
|
17
|
+
import { Input as y } from "./Input/Input.js";
|
|
18
|
+
import { InputField as N } from "./InputField/InputField.js";
|
|
19
|
+
import { Label as T } from "./Label/Label.js";
|
|
20
|
+
import { M as q } from "../MenuLink-CIzBwlKY.js";
|
|
21
|
+
import { MetaDataList as E } from "./MetaDataList/MetaDataList.js";
|
|
22
|
+
import { ModalDialog as K } from "./ModalDialog/ModalDialog.js";
|
|
23
|
+
import { M as U } from "../MultiSelect-Drcfmp0z.js";
|
|
24
|
+
import { OverlayCloseButton as W } from "./OverlayCloseButton/OverlayCloseButton.js";
|
|
25
|
+
import { ProgrammeCard as Y } from "./ProgrammeCard/ProgrammeCard.js";
|
|
26
|
+
import { RadioButton as _ } from "./RadioButton/RadioButton.js";
|
|
27
|
+
import { Repeater as oo } from "./Repeater/Repeater.js";
|
|
28
|
+
import { SectionNotification as to } from "./SectionNotification/SectionNotification.js";
|
|
29
|
+
import { SelectListbox as po } from "./SelectListbox/SelectListbox.js";
|
|
30
|
+
import { SelectProvider as fo, useSelect as xo } from "./SelectListbox/SelectProvider.js";
|
|
31
|
+
import { Spinner as ao } from "./Spinner/Spinner.js";
|
|
32
|
+
import { StatusPill as lo } from "./StatusPill/StatusPill.js";
|
|
33
|
+
import { Tooltip as co } from "./Tooltip/Tooltip.js";
|
|
33
34
|
export {
|
|
34
35
|
t as Accordion,
|
|
35
36
|
p as AppStatusBar,
|
|
36
37
|
f as Attention,
|
|
37
|
-
|
|
38
|
+
i as Backdrop,
|
|
38
39
|
n as Button,
|
|
39
40
|
u as ButtonGroup,
|
|
40
41
|
d as Card,
|
|
@@ -43,26 +44,27 @@ export {
|
|
|
43
44
|
I as FieldHint,
|
|
44
45
|
L as Fieldset,
|
|
45
46
|
g as FormField,
|
|
46
|
-
A as
|
|
47
|
-
P as
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
N as
|
|
52
|
-
T as
|
|
53
|
-
q as
|
|
54
|
-
E as
|
|
55
|
-
K as
|
|
56
|
-
U as
|
|
57
|
-
W as
|
|
58
|
-
Y as
|
|
59
|
-
_ as
|
|
60
|
-
oo as
|
|
61
|
-
to as
|
|
62
|
-
po as
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
lo as
|
|
66
|
-
|
|
47
|
+
A as GridRow,
|
|
48
|
+
P as Icon,
|
|
49
|
+
v as IconButton,
|
|
50
|
+
G as InfoMessage,
|
|
51
|
+
y as Input,
|
|
52
|
+
N as InputField,
|
|
53
|
+
T as Label,
|
|
54
|
+
q as MenuLink,
|
|
55
|
+
E as MetaDataList,
|
|
56
|
+
K as ModalDialog,
|
|
57
|
+
U as MultiSelect,
|
|
58
|
+
W as OverlayCloseButton,
|
|
59
|
+
Y as ProgrammeCard,
|
|
60
|
+
_ as RadioButton,
|
|
61
|
+
oo as Repeater,
|
|
62
|
+
to as SectionNotification,
|
|
63
|
+
po as SelectListbox,
|
|
64
|
+
fo as SelectProvider,
|
|
65
|
+
ao as Spinner,
|
|
66
|
+
lo as StatusPill,
|
|
67
|
+
co as Tooltip,
|
|
68
|
+
xo as useSelect
|
|
67
69
|
};
|
|
68
70
|
//# 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
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { Accordion as t } from "./components/Accordion/Accordion.js";
|
|
2
2
|
import { AppStatusBar as p } from "./components/AppStatusBar/AppStatusBar.js";
|
|
3
3
|
import { Attention as f } from "./components/Attention/Attention.js";
|
|
4
|
-
import { Backdrop as
|
|
4
|
+
import { Backdrop as i } from "./components/Backdrop/Backdrop.js";
|
|
5
5
|
import { Button as n } from "./components/Button/Button.js";
|
|
6
6
|
import { ButtonGroup as u } from "./components/ButtonGroup/ButtonGroup.js";
|
|
7
7
|
import { Card as d } from "./components/Card/Card.js";
|
|
@@ -10,31 +10,32 @@ import { Drawer as M } from "./components/Drawer/Drawer.js";
|
|
|
10
10
|
import { FieldHint as I } from "./components/FieldHint/FieldHint.js";
|
|
11
11
|
import { Fieldset as L } from "./components/Fieldset/Fieldset.js";
|
|
12
12
|
import { FormField as g } from "./components/FormField/FormField.js";
|
|
13
|
-
import {
|
|
14
|
-
import {
|
|
15
|
-
import {
|
|
16
|
-
import {
|
|
17
|
-
import {
|
|
18
|
-
import {
|
|
19
|
-
import {
|
|
20
|
-
import {
|
|
21
|
-
import {
|
|
22
|
-
import {
|
|
23
|
-
import {
|
|
24
|
-
import {
|
|
25
|
-
import {
|
|
26
|
-
import {
|
|
27
|
-
import {
|
|
28
|
-
import {
|
|
29
|
-
import {
|
|
30
|
-
import {
|
|
31
|
-
import {
|
|
32
|
-
import {
|
|
13
|
+
import { GridRow as A } from "./components/GridRow/GridRow.js";
|
|
14
|
+
import { Icon as P } from "./components/Icon/Icon.js";
|
|
15
|
+
import { IconButton as v } from "./components/IconButton/IconButton.js";
|
|
16
|
+
import { InfoMessage as G } from "./components/InfoMessage/InfoMessage.js";
|
|
17
|
+
import { Input as y } from "./components/Input/Input.js";
|
|
18
|
+
import { InputField as N } from "./components/InputField/InputField.js";
|
|
19
|
+
import { Label as T } from "./components/Label/Label.js";
|
|
20
|
+
import { M as q } from "./MenuLink-CIzBwlKY.js";
|
|
21
|
+
import { MetaDataList as E } from "./components/MetaDataList/MetaDataList.js";
|
|
22
|
+
import { ModalDialog as K } from "./components/ModalDialog/ModalDialog.js";
|
|
23
|
+
import { M as U } from "./MultiSelect-Drcfmp0z.js";
|
|
24
|
+
import { OverlayCloseButton as W } from "./components/OverlayCloseButton/OverlayCloseButton.js";
|
|
25
|
+
import { ProgrammeCard as Y } from "./components/ProgrammeCard/ProgrammeCard.js";
|
|
26
|
+
import { RadioButton as _ } from "./components/RadioButton/RadioButton.js";
|
|
27
|
+
import { Repeater as oo } from "./components/Repeater/Repeater.js";
|
|
28
|
+
import { SectionNotification as to } from "./components/SectionNotification/SectionNotification.js";
|
|
29
|
+
import { SelectListbox as po } from "./components/SelectListbox/SelectListbox.js";
|
|
30
|
+
import { SelectProvider as fo, useSelect as xo } from "./components/SelectListbox/SelectProvider.js";
|
|
31
|
+
import { Spinner as ao } from "./components/Spinner/Spinner.js";
|
|
32
|
+
import { StatusPill as lo } from "./components/StatusPill/StatusPill.js";
|
|
33
|
+
import { Tooltip as co } from "./components/Tooltip/Tooltip.js";
|
|
33
34
|
export {
|
|
34
35
|
t as Accordion,
|
|
35
36
|
p as AppStatusBar,
|
|
36
37
|
f as Attention,
|
|
37
|
-
|
|
38
|
+
i as Backdrop,
|
|
38
39
|
n as Button,
|
|
39
40
|
u as ButtonGroup,
|
|
40
41
|
d as Card,
|
|
@@ -43,26 +44,27 @@ export {
|
|
|
43
44
|
I as FieldHint,
|
|
44
45
|
L as Fieldset,
|
|
45
46
|
g as FormField,
|
|
46
|
-
A as
|
|
47
|
-
P as
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
N as
|
|
52
|
-
T as
|
|
53
|
-
q as
|
|
54
|
-
E as
|
|
55
|
-
K as
|
|
56
|
-
U as
|
|
57
|
-
W as
|
|
58
|
-
Y as
|
|
59
|
-
_ as
|
|
60
|
-
oo as
|
|
61
|
-
to as
|
|
62
|
-
po as
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
lo as
|
|
66
|
-
|
|
47
|
+
A as GridRow,
|
|
48
|
+
P as Icon,
|
|
49
|
+
v as IconButton,
|
|
50
|
+
G as InfoMessage,
|
|
51
|
+
y as Input,
|
|
52
|
+
N as InputField,
|
|
53
|
+
T as Label,
|
|
54
|
+
q as MenuLink,
|
|
55
|
+
E as MetaDataList,
|
|
56
|
+
K as ModalDialog,
|
|
57
|
+
U as MultiSelect,
|
|
58
|
+
W as OverlayCloseButton,
|
|
59
|
+
Y as ProgrammeCard,
|
|
60
|
+
_ as RadioButton,
|
|
61
|
+
oo as Repeater,
|
|
62
|
+
to as SectionNotification,
|
|
63
|
+
po as SelectListbox,
|
|
64
|
+
fo as SelectProvider,
|
|
65
|
+
ao as Spinner,
|
|
66
|
+
lo as StatusPill,
|
|
67
|
+
co as Tooltip,
|
|
68
|
+
xo as useSelect
|
|
67
69
|
};
|
|
68
70
|
//# 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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|