@oliasoft-open-source/react-ui-library 4.6.4-beta-4 → 4.6.4-beta-5
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/index.js +1 -1
- package/dist/index.js.map +1 -1
- package/dist/storybook/assets/{Color-6VNJS4EI-0dI5E6B1.js → Color-6VNJS4EI-HO1Asy5-.js} +1 -1
- package/dist/storybook/assets/{DocsRenderer-NNNQARDV-kmVtXdCN.js → DocsRenderer-NNNQARDV-vRAi_FKc.js} +1 -1
- package/dist/storybook/assets/{WithTooltip-V3YHNWJZ-aK2veb6S.js → WithTooltip-V3YHNWJZ-mPffEZCE.js} +1 -1
- package/dist/storybook/assets/{buttons-and-links-HrdPUmHC.js → buttons-and-links-DO2-co7o.js} +1 -1
- package/dist/storybook/assets/{casing-loads.stories-2DfdZN2W.js → casing-loads.stories-oh3l5Q7X.js} +1 -1
- package/dist/storybook/assets/{chunk-HLWAVYOI-gvmdwlMH.js → chunk-HLWAVYOI-YeFXPQnD.js} +1 -1
- package/dist/storybook/assets/{color-w8aIacWp.js → color-B2uvL4Ic.js} +1 -1
- package/dist/storybook/assets/dialog-JbUIdbsX.js +1 -0
- package/dist/storybook/assets/{file-input.stories-lKF1ABXX.js → file-input.stories-wyxnLg33.js} +1 -1
- package/dist/storybook/assets/{form.stories-AikCzsZc.js → form.stories-0lkQdf32.js} +1 -1
- package/dist/storybook/assets/{formatter-SWP5E3XI-r4EhXc_R.js → formatter-SWP5E3XI-SR8hv_3z.js} +1 -1
- package/dist/storybook/assets/{iframe-zoU5m22n.js → iframe-_wKvslme.js} +2 -2
- package/dist/storybook/assets/{index-PcK6wy6Y.js → index-WC-d15Tp.js} +5 -5
- package/dist/storybook/assets/{input-validation-ik-_pZic.js → input-validation-qULDcPd2.js} +1 -1
- package/dist/storybook/assets/{inputs-HOOmATSd.js → inputs-1jcj95Nt.js} +1 -1
- package/dist/storybook/assets/{layout-forms-ajzntTiw.js → layout-forms-1Qs33sNe.js} +1 -1
- package/dist/storybook/assets/{layout-general-YrHqYgMj.js → layout-general-NX25o6Iu.js} +1 -1
- package/dist/storybook/assets/modal.stories-DDey1uF7.js +200 -0
- package/dist/storybook/assets/{padding-and-spacing-5OwJ6VNS.js → padding-and-spacing-2soccpsa.js} +1 -1
- package/dist/storybook/assets/{preview-OTui_ocs.js → preview--Oj7lXeP.js} +1 -1
- package/dist/storybook/assets/{preview-gEzSBjvP.js → preview-WU__fZ5Y.js} +2 -2
- package/dist/storybook/assets/{syntaxhighlighter-B5GMVT5T-QX51XDDe.js → syntaxhighlighter-B5GMVT5T-FkUWpfWd.js} +1 -1
- package/dist/storybook/assets/{textarea-TSoWqDT8.js → textarea-Z5OlrRfT.js} +1 -1
- package/dist/storybook/assets/{textarea.stories-w6XYooLd.js → textarea.stories-RbhU6pN4.js} +1 -1
- package/dist/storybook/iframe.html +1 -1
- package/dist/storybook/index.json +1 -1
- package/dist/storybook/project.json +1 -1
- package/dist/storybook/stories.json +1 -1
- package/package.json +1 -1
- package/dist/storybook/assets/dialog-Tgs8CXhN.js +0 -1
- package/dist/storybook/assets/modal.stories-RrJYxEqH.js +0 -173
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{j as e}from"./jsx-runtime-FsUICBgo.js";import{M as r,C as n}from"./index-
|
|
1
|
+
import{j as e}from"./jsx-runtime-FsUICBgo.js";import{M as r,C as n}from"./index-WC-d15Tp.js";import{Center as d,SpaceBetween as a,JustifyEnd as c,Column as l}from"./flex.stories-8HJIYv6E.js";import{Default as h,CustomColumnWidth as p,DefaultGap as x,CustomGap as m,Responsive as j}from"./grid.stories-hPfW-CxX.js";import{Default as u,FixedWidth as f,NoPadding as g,ResponsiveWidth as w}from"./column.stories-1Qq8awo0.js";import{useMDXComponents as s}from"./index-4YXVTraW.js";import"./index-RfLt4OUa.js";import"./iframe-_wKvslme.js";import"../sb-preview/runtime.js";import"./index-miLrID2P.js";import"./inheritsLoose-8sb_A2v4.js";import"./assertThisInitialized-4q6YPdh3.js";import"./index-R5dkQuFe.js";import"./index-PPLHz8o0.js";import"./flex-RYZsoWEN.js";import"./button-shH4xakS.js";import"./index-VW3EWkuE.js";import"./common-types-U65vzrrz.js";import"./disabled-context-urNQThQz.js";import"./spinner-R8Il4aRe.js";import"./icon-8EQazuuW.js";import"./objectWithoutPropertiesLoose-9Q1jwsKS.js";import"./tslib.es6-OIsz3r9a.js";import"./index-4QtD-hFu.js";import"./tooltip-HEHiU__l.js";import"./text-6KQ6ntOV.js";import"./grid-u1mZpaML.js";import"./styled-components.browser.esm-qIipjd6c.js";import"./card-0r8RRVk-.js";import"./row-vFUhHoz5.js";import"./heading-jZsIIJF0.js";import"./help-icon-SKky6KLV.js";function t(i){const o=Object.assign({h1:"h1",h2:"h2",p:"p",code:"code",h3:"h3"},s(),i.components);return e.jsxs(e.Fragment,{children:[e.jsx(r,{title:"Layout (General)"}),`
|
|
2
2
|
`,e.jsx(o.h1,{id:"layout-general",children:"Layout (General)"}),`
|
|
3
3
|
`,e.jsx(o.h2,{id:"flex",children:"Flex"}),`
|
|
4
4
|
`,e.jsxs(o.p,{children:["The ",e.jsx(o.code,{children:"Flex"})," component is a basic flexbox wrapper with optional props for ",e.jsx(o.code,{children:"alignItems"}),", ",e.jsx(o.code,{children:"justifyContent"})," and ",e.jsx(o.code,{children:"flexDirection"}),". This is a conveninent way to center items vertically and/or horizontally, to align them to opposite edges, or align them to the far side."]}),`
|
|
@@ -0,0 +1,200 @@
|
|
|
1
|
+
import{j as e}from"./jsx-runtime-FsUICBgo.js";import{r as h}from"./index-RfLt4OUa.js";import{T as X}from"./common-types-U65vzrrz.js";import{M as u,D as C}from"./dialog-JbUIdbsX.js";import{B as o}from"./button-shH4xakS.js";import{P as Z}from"./popover-cad2llTa.js";import{I as Q}from"./input-2BhbKV-j.js";import{I as $}from"./input-group-R8LoqKRn.js";import{F as j}from"./field-FZX0Z7IB.js";import{M as ee}from"./actions-mOcj9IlF.js";import{S as oe}from"./select-DZdWUrCW.js";import{S as ne}from"./spacer-Yji9g2AW.js";import{T as le}from"./tooltip-HEHiU__l.js";import{M as k}from"./types-VB5zD18b.js";import"./index-VW3EWkuE.js";import"./portal-zPiHHKoC.js";import"./index-miLrID2P.js";import"./lodash-Bmg8FrMx.js";import"./heading-jZsIIJF0.js";import"./help-icon-SKky6KLV.js";import"./icon-8EQazuuW.js";import"./objectWithoutPropertiesLoose-9Q1jwsKS.js";import"./inheritsLoose-8sb_A2v4.js";import"./tslib.es6-OIsz3r9a.js";import"./index-4QtD-hFu.js";import"./disabled-context-urNQThQz.js";import"./spinner-R8Il4aRe.js";import"./types-5uVBABF4.js";import"./label-uCFEME1p.js";import"./badge-23Ty_zBt.js";import"./assertThisInitialized-4q6YPdh3.js";import"./memoize-one.esm-hqe5SRxC.js";import"./text-6KQ6ntOV.js";import"./select.input-zP5tW20f.js";const{useArgs:se}=__STORYBOOK_MODULE_ADDONS__,we={title:"Modals/Modal",component:u,args:{visible:!0,centered:!0,width:"300px",heading:"Are you sure?",content:e.jsx(e.Fragment,{children:"This will complete the transaction"}),footer:e.jsxs(e.Fragment,{children:[e.jsx(o,{label:"Okay",colored:!0,onClick:()=>{}}),e.jsx(o,{label:"Cancel",onClick:()=>{}})]}),onClose:()=>{}},parameters:{docs:{story:{inline:!1,iframeHeight:400}}}},a=()=>{const[{visible:l,centered:r,...s},n]=se(),t=()=>{n({visible:!l})};return e.jsxs(e.Fragment,{children:[e.jsx(u,{visible:l,centered:r,children:e.jsx(C,{dialog:{...s,onClose:t}})}),e.jsx(o,{label:"Open Modal",onClick:t})]})},b=a.bind({}),i=a.bind({});i.args={centered:!0};const d=a.bind({});d.args={content:["This is a","new line!"]};const c=a.bind({});c.args={scroll:!0,content:e.jsx("div",{children:"Example modal content goes here lorem ipsum. ".repeat(100)})};const g=a.bind({});g.args={width:"100%",content:e.jsx("div",{children:"Example modal content goes here lorem ipsum. ".repeat(100)})};const p=a.bind({});p.args={contentPadding:0};const m=a.bind({});m.args={content:e.jsxs(e.Fragment,{children:[e.jsx(le,{text:"Tooltip text",children:"Hover for tooltip"}),e.jsx(ne,{}),e.jsx(j,{label:"Custom Select",helpText:"Select an animal",children:e.jsx(oe,{name:"example",options:["Aardvarks","Kangaroos","Monkeys","Possums","Gorilla","Puma","Patagonian Mara","Tarsier","Koala","Panda","Red Panda","Impala","Tiger","Crocodile","Bat"],onChange:()=>{},value:"Monkeys",error:"Bad value"})}),e.jsx(j,{label:"Nested Menu",children:e.jsx(ee,{maxHeight:"240px",menu:{label:"Menu",trigger:X.DROP_DOWN_BUTTON,sections:[{type:k.MENU,menu:{trigger:"Text",label:"Children",sections:[...Array(100).keys()].map(()=>({type:"Option",label:Math.random().toString(36).substring(7),onClick:()=>{}}))}},...[...Array(100).keys()].map(()=>({type:k.OPTION,label:Math.random().toString(36).substring(7),onClick:()=>{}}))]}})}),e.jsx(Z,{content:e.jsxs($,{small:!0,children:[e.jsx(Q,{value:"Value",width:"150px",error:"Bad value"}),e.jsx(o,{colored:!0,label:"Save",onClick:()=>{}}),e.jsx(o,{label:"Cancel",onClick:()=>{}})]}),children:e.jsx(o,{colored:!0,label:"Toggle me",onClick:()=>{}})})]})};const M=()=>{const[l,r]=h.useState(!1),s=()=>{r(!0)},n=()=>{r(!1)},t=()=>{console.log("Submit action"),n()};return e.jsxs(e.Fragment,{children:[e.jsx(u,{visible:l,onEnter:()=>{console.log("Enter"),t()},onEscape:()=>{console.log("Escape"),n()},children:e.jsx(C,{dialog:{heading:"Test key handling",content:e.jsx(Q,{}),footer:e.jsxs(e.Fragment,{children:[e.jsx(o,{label:"Done",colored:"red",onClick:t}),e.jsx(o,{label:"Cancel",onClick:n})]}),onClose:n}})}),e.jsx(o,{label:"Open Modal",onClick:s})]})},v=()=>{const[l,r]=h.useState(!1),s=()=>r(!l),[n,t]=h.useState(!1),x=()=>t(!n);return e.jsxs(e.Fragment,{children:[e.jsx(u,{visible:l,children:e.jsx(C,{dialog:{heading:"Modal 1",content:"Lorem ipsum dolor sit amet",footer:e.jsxs(e.Fragment,{children:[e.jsx(o,{label:"Open modal 2",colored:!0,onClick:x}),e.jsx(u,{visible:n,children:e.jsx(C,{dialog:{heading:"Modal 2",content:"Lorem ipsum dolor sit amet",footer:e.jsx(o,{label:"Close",onClick:x}),onClose:x}})}),e.jsx(o,{label:"Close",onClick:s})]}),onClose:s}})}),e.jsx(o,{label:"Open modal 1",onClick:s})]})};var f,S,P;b.parameters={...b.parameters,docs:{...(f=b.parameters)==null?void 0:f.docs,source:{originalSource:`() => {
|
|
2
|
+
const [{
|
|
3
|
+
visible,
|
|
4
|
+
centered,
|
|
5
|
+
...dialogProps
|
|
6
|
+
}, updateArgs] = useArgs();
|
|
7
|
+
const toggleModal = () => {
|
|
8
|
+
updateArgs({
|
|
9
|
+
visible: !visible
|
|
10
|
+
});
|
|
11
|
+
};
|
|
12
|
+
return <>
|
|
13
|
+
<Modal visible={visible} centered={centered}>
|
|
14
|
+
<Dialog dialog={{
|
|
15
|
+
...dialogProps,
|
|
16
|
+
onClose: toggleModal
|
|
17
|
+
}} />
|
|
18
|
+
</Modal>
|
|
19
|
+
<Button label="Open Modal" onClick={toggleModal} />
|
|
20
|
+
</>;
|
|
21
|
+
}`,...(P=(S=b.parameters)==null?void 0:S.docs)==null?void 0:P.source}}};var A,O,B;i.parameters={...i.parameters,docs:{...(A=i.parameters)==null?void 0:A.docs,source:{originalSource:`() => {
|
|
22
|
+
const [{
|
|
23
|
+
visible,
|
|
24
|
+
centered,
|
|
25
|
+
...dialogProps
|
|
26
|
+
}, updateArgs] = useArgs();
|
|
27
|
+
const toggleModal = () => {
|
|
28
|
+
updateArgs({
|
|
29
|
+
visible: !visible
|
|
30
|
+
});
|
|
31
|
+
};
|
|
32
|
+
return <>
|
|
33
|
+
<Modal visible={visible} centered={centered}>
|
|
34
|
+
<Dialog dialog={{
|
|
35
|
+
...dialogProps,
|
|
36
|
+
onClose: toggleModal
|
|
37
|
+
}} />
|
|
38
|
+
</Modal>
|
|
39
|
+
<Button label="Open Modal" onClick={toggleModal} />
|
|
40
|
+
</>;
|
|
41
|
+
}`,...(B=(O=i.parameters)==null?void 0:O.docs)==null?void 0:B.source}}};var D,T,V;d.parameters={...d.parameters,docs:{...(D=d.parameters)==null?void 0:D.docs,source:{originalSource:`() => {
|
|
42
|
+
const [{
|
|
43
|
+
visible,
|
|
44
|
+
centered,
|
|
45
|
+
...dialogProps
|
|
46
|
+
}, updateArgs] = useArgs();
|
|
47
|
+
const toggleModal = () => {
|
|
48
|
+
updateArgs({
|
|
49
|
+
visible: !visible
|
|
50
|
+
});
|
|
51
|
+
};
|
|
52
|
+
return <>
|
|
53
|
+
<Modal visible={visible} centered={centered}>
|
|
54
|
+
<Dialog dialog={{
|
|
55
|
+
...dialogProps,
|
|
56
|
+
onClose: toggleModal
|
|
57
|
+
}} />
|
|
58
|
+
</Modal>
|
|
59
|
+
<Button label="Open Modal" onClick={toggleModal} />
|
|
60
|
+
</>;
|
|
61
|
+
}`,...(V=(T=d.parameters)==null?void 0:T.docs)==null?void 0:V.source}}};var y,E,F;c.parameters={...c.parameters,docs:{...(y=c.parameters)==null?void 0:y.docs,source:{originalSource:`() => {
|
|
62
|
+
const [{
|
|
63
|
+
visible,
|
|
64
|
+
centered,
|
|
65
|
+
...dialogProps
|
|
66
|
+
}, updateArgs] = useArgs();
|
|
67
|
+
const toggleModal = () => {
|
|
68
|
+
updateArgs({
|
|
69
|
+
visible: !visible
|
|
70
|
+
});
|
|
71
|
+
};
|
|
72
|
+
return <>
|
|
73
|
+
<Modal visible={visible} centered={centered}>
|
|
74
|
+
<Dialog dialog={{
|
|
75
|
+
...dialogProps,
|
|
76
|
+
onClose: toggleModal
|
|
77
|
+
}} />
|
|
78
|
+
</Modal>
|
|
79
|
+
<Button label="Open Modal" onClick={toggleModal} />
|
|
80
|
+
</>;
|
|
81
|
+
}`,...(F=(E=c.parameters)==null?void 0:E.docs)==null?void 0:F.source}}};var _,L,N;g.parameters={...g.parameters,docs:{...(_=g.parameters)==null?void 0:_.docs,source:{originalSource:`() => {
|
|
82
|
+
const [{
|
|
83
|
+
visible,
|
|
84
|
+
centered,
|
|
85
|
+
...dialogProps
|
|
86
|
+
}, updateArgs] = useArgs();
|
|
87
|
+
const toggleModal = () => {
|
|
88
|
+
updateArgs({
|
|
89
|
+
visible: !visible
|
|
90
|
+
});
|
|
91
|
+
};
|
|
92
|
+
return <>
|
|
93
|
+
<Modal visible={visible} centered={centered}>
|
|
94
|
+
<Dialog dialog={{
|
|
95
|
+
...dialogProps,
|
|
96
|
+
onClose: toggleModal
|
|
97
|
+
}} />
|
|
98
|
+
</Modal>
|
|
99
|
+
<Button label="Open Modal" onClick={toggleModal} />
|
|
100
|
+
</>;
|
|
101
|
+
}`,...(N=(L=g.parameters)==null?void 0:L.docs)==null?void 0:N.source}}};var I,w,H;p.parameters={...p.parameters,docs:{...(I=p.parameters)==null?void 0:I.docs,source:{originalSource:`() => {
|
|
102
|
+
const [{
|
|
103
|
+
visible,
|
|
104
|
+
centered,
|
|
105
|
+
...dialogProps
|
|
106
|
+
}, updateArgs] = useArgs();
|
|
107
|
+
const toggleModal = () => {
|
|
108
|
+
updateArgs({
|
|
109
|
+
visible: !visible
|
|
110
|
+
});
|
|
111
|
+
};
|
|
112
|
+
return <>
|
|
113
|
+
<Modal visible={visible} centered={centered}>
|
|
114
|
+
<Dialog dialog={{
|
|
115
|
+
...dialogProps,
|
|
116
|
+
onClose: toggleModal
|
|
117
|
+
}} />
|
|
118
|
+
</Modal>
|
|
119
|
+
<Button label="Open Modal" onClick={toggleModal} />
|
|
120
|
+
</>;
|
|
121
|
+
}`,...(H=(w=p.parameters)==null?void 0:w.docs)==null?void 0:H.source}}};var K,W,R;m.parameters={...m.parameters,docs:{...(K=m.parameters)==null?void 0:K.docs,source:{originalSource:`() => {
|
|
122
|
+
const [{
|
|
123
|
+
visible,
|
|
124
|
+
centered,
|
|
125
|
+
...dialogProps
|
|
126
|
+
}, updateArgs] = useArgs();
|
|
127
|
+
const toggleModal = () => {
|
|
128
|
+
updateArgs({
|
|
129
|
+
visible: !visible
|
|
130
|
+
});
|
|
131
|
+
};
|
|
132
|
+
return <>
|
|
133
|
+
<Modal visible={visible} centered={centered}>
|
|
134
|
+
<Dialog dialog={{
|
|
135
|
+
...dialogProps,
|
|
136
|
+
onClose: toggleModal
|
|
137
|
+
}} />
|
|
138
|
+
</Modal>
|
|
139
|
+
<Button label="Open Modal" onClick={toggleModal} />
|
|
140
|
+
</>;
|
|
141
|
+
}`,...(R=(W=m.parameters)==null?void 0:W.docs)==null?void 0:R.source}}};var U,G,Y;M.parameters={...M.parameters,docs:{...(U=M.parameters)==null?void 0:U.docs,source:{originalSource:`() => {
|
|
142
|
+
const [visible, setVisible] = useState(false);
|
|
143
|
+
const openModal = () => {
|
|
144
|
+
setVisible(true);
|
|
145
|
+
};
|
|
146
|
+
const closeModal = () => {
|
|
147
|
+
setVisible(false);
|
|
148
|
+
};
|
|
149
|
+
const handleSubmit = () => {
|
|
150
|
+
console.log('Submit action');
|
|
151
|
+
closeModal();
|
|
152
|
+
};
|
|
153
|
+
return <>
|
|
154
|
+
<Modal visible={visible} onEnter={() => {
|
|
155
|
+
console.log('Enter');
|
|
156
|
+
handleSubmit();
|
|
157
|
+
}} onEscape={() => {
|
|
158
|
+
console.log('Escape');
|
|
159
|
+
closeModal();
|
|
160
|
+
}}>
|
|
161
|
+
<Dialog dialog={{
|
|
162
|
+
heading: 'Test key handling',
|
|
163
|
+
content: <Input />,
|
|
164
|
+
footer: <>
|
|
165
|
+
<Button label="Done" colored="red" onClick={handleSubmit} />
|
|
166
|
+
<Button label="Cancel" onClick={closeModal} />
|
|
167
|
+
</>,
|
|
168
|
+
onClose: closeModal
|
|
169
|
+
}} />
|
|
170
|
+
</Modal>
|
|
171
|
+
<Button label="Open Modal" onClick={openModal} />
|
|
172
|
+
</>;
|
|
173
|
+
}`,...(Y=(G=M.parameters)==null?void 0:G.docs)==null?void 0:Y.source}}};var q,z,J;v.parameters={...v.parameters,docs:{...(q=v.parameters)==null?void 0:q.docs,source:{originalSource:`() => {
|
|
174
|
+
const [visible1, setVisible1] = useState(false);
|
|
175
|
+
const toggleVisible1 = () => setVisible1(!visible1);
|
|
176
|
+
const [visible2, setVisible2] = useState(false);
|
|
177
|
+
const toggleVisible2 = () => setVisible2(!visible2);
|
|
178
|
+
return <>
|
|
179
|
+
<Modal visible={visible1}>
|
|
180
|
+
<Dialog dialog={{
|
|
181
|
+
heading: 'Modal 1',
|
|
182
|
+
content: 'Lorem ipsum dolor sit amet',
|
|
183
|
+
footer: <>
|
|
184
|
+
<Button label="Open modal 2" colored onClick={toggleVisible2} />
|
|
185
|
+
<Modal visible={visible2}>
|
|
186
|
+
<Dialog dialog={{
|
|
187
|
+
heading: 'Modal 2',
|
|
188
|
+
content: 'Lorem ipsum dolor sit amet',
|
|
189
|
+
footer: <Button label="Close" onClick={toggleVisible2} />,
|
|
190
|
+
onClose: toggleVisible2
|
|
191
|
+
}} />
|
|
192
|
+
</Modal>
|
|
193
|
+
<Button label="Close" onClick={toggleVisible1} />
|
|
194
|
+
</>,
|
|
195
|
+
onClose: toggleVisible1
|
|
196
|
+
}} />
|
|
197
|
+
</Modal>
|
|
198
|
+
<Button label="Open modal 1" onClick={toggleVisible1} />
|
|
199
|
+
</>;
|
|
200
|
+
}`,...(J=(z=v.parameters)==null?void 0:z.docs)==null?void 0:J.source}}};const He=["Default","Centered","LineBreak","Scroll","FullWidth","NoContentPadding","WithPopoverLayers","KeyHandle","MultipleModals"];export{i as Centered,b as Default,g as FullWidth,M as KeyHandle,d as LineBreak,v as MultipleModals,p as NoContentPadding,c as Scroll,m as WithPopoverLayers,He as __namedExportsOrder,we as default};
|
package/dist/storybook/assets/{padding-and-spacing-5OwJ6VNS.js → padding-and-spacing-2soccpsa.js}
RENAMED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{j as e}from"./jsx-runtime-FsUICBgo.js";import{M as r}from"./index-
|
|
1
|
+
import{j as e}from"./jsx-runtime-FsUICBgo.js";import{M as r}from"./index-WC-d15Tp.js";import{useMDXComponents as t}from"./index-4YXVTraW.js";import"./index-RfLt4OUa.js";import"./iframe-_wKvslme.js";import"../sb-preview/runtime.js";import"./index-miLrID2P.js";import"./inheritsLoose-8sb_A2v4.js";import"./assertThisInitialized-4q6YPdh3.js";import"./index-R5dkQuFe.js";import"./index-PPLHz8o0.js";function i(n){const s=Object.assign({h1:"h1",h2:"h2",p:"p",ul:"ul",li:"li",strong:"strong",code:"code"},t(),n.components);return e.jsxs(e.Fragment,{children:[e.jsx(r,{title:"Padding, Margin & Size"}),`
|
|
2
2
|
`,e.jsx(s.h1,{id:"padding-margin--size",children:"Padding, Margin & Size"}),`
|
|
3
3
|
`,e.jsx(s.h2,{id:"padding--margin",children:"Padding & Margin"}),`
|
|
4
4
|
`,e.jsx(s.p,{children:"There are standard CSS spacing variables for padding and margin."}),`
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{j as at}from"./jsx-runtime-FsUICBgo.js";import{g as Le,c as ct,a as Li,r as he,R as fe}from"./index-RfLt4OUa.js";import{T as Di}from"./toaster-yPcd4ELJ.js";import{q as ga,r as ma,s as qr,i as ki,t as ya,e as Hr,v as Mi,w as Bi,c as zr,x as Ui,y as Gi,z as qi,A as Hi,B as va,C as zi,D as Wi,E as Yi,F as Xi,G as Ki,H as Vi,I as Qi,J as Ji}from"./index-R5dkQuFe.js";import{f as Zi,k as ba,h as eo,i as to,j as ro,l as no,o as ao,m as De,p as io,q as oo,r as so,t as cn}from"./index-
|
|
1
|
+
import{j as at}from"./jsx-runtime-FsUICBgo.js";import{g as Le,c as ct,a as Li,r as he,R as fe}from"./index-RfLt4OUa.js";import{T as Di}from"./toaster-yPcd4ELJ.js";import{q as ga,r as ma,s as qr,i as ki,t as ya,e as Hr,v as Mi,w as Bi,c as zr,x as Ui,y as Gi,z as qi,A as Hi,B as va,C as zi,D as Wi,E as Yi,F as Xi,G as Ki,H as Vi,I as Qi,J as Ji}from"./index-R5dkQuFe.js";import{f as Zi,k as ba,h as eo,i as to,j as ro,l as no,o as ao,m as De,p as io,q as oo,r as so,t as cn}from"./index-WC-d15Tp.js";import{a as lo}from"./isPlainObject-OQlD0fAV.js";import{d as Sa}from"./index-PPLHz8o0.js";import{e as pn}from"./index-cCpkwrS5.js";import"./chunk-HLWAVYOI-YeFXPQnD.js";import"./index-miLrID2P.js";import"./message-CRKuTfOl.js";import"./index-VW3EWkuE.js";import"./common-types-U65vzrrz.js";import"./icon-8EQazuuW.js";import"./objectWithoutPropertiesLoose-9Q1jwsKS.js";import"./inheritsLoose-8sb_A2v4.js";import"./tslib.es6-OIsz3r9a.js";import"./index-4QtD-hFu.js";import"./disabled-context-urNQThQz.js";import"./iframe-_wKvslme.js";import"../sb-preview/runtime.js";import"./assertThisInitialized-4q6YPdh3.js";import"./react-16-hgR7FrAp.js";var hn="DARK_MODE";const{global:uo}=__STORYBOOK_MODULE_GLOBAL__;__STORYBOOK_MODULE_CLIENT_LOGGER__;function Te(){return Te=Object.assign?Object.assign.bind():function(t){for(var e=1;e<arguments.length;e++){var r=arguments[e];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(t[n]=r[n])}return t},Te.apply(this,arguments)}function fo(t){if(t===void 0)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}function Qe(t,e){return Qe=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(r,n){return r.__proto__=n,r},Qe(t,e)}function co(t,e){t.prototype=Object.create(e.prototype),t.prototype.constructor=t,Qe(t,e)}function yr(t){return yr=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(e){return e.__proto__||Object.getPrototypeOf(e)},yr(t)}function po(t){return Function.toString.call(t).indexOf("[native code]")!==-1}function ho(){if(typeof Reflect>"u"||!Reflect.construct||Reflect.construct.sham)return!1;if(typeof Proxy=="function")return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){})),!0}catch{return!1}}function pt(t,e,r){return ho()?pt=Reflect.construct.bind():pt=function(n,s,o){var l=[null];l.push.apply(l,s);var a=Function.bind.apply(n,l),i=new a;return o&&Qe(i,o.prototype),i},pt.apply(null,arguments)}function vr(t){var e=typeof Map=="function"?new Map:void 0;return vr=function(r){if(r===null||!po(r))return r;if(typeof r!="function")throw new TypeError("Super expression must either be null or a function");if(typeof e<"u"){if(e.has(r))return e.get(r);e.set(r,n)}function n(){return pt(r,arguments,yr(this).constructor)}return n.prototype=Object.create(r.prototype,{constructor:{value:n,enumerable:!1,writable:!0,configurable:!0}}),Qe(n,r)},vr(t)}var go={1:`Passed invalid arguments to hsl, please pass multiple numbers e.g. hsl(360, 0.75, 0.4) or an object e.g. rgb({ hue: 255, saturation: 0.4, lightness: 0.75 }).
|
|
2
2
|
|
|
3
3
|
`,2:`Passed invalid arguments to hsla, please pass multiple numbers e.g. hsla(360, 0.75, 0.4, 0.7) or an object e.g. rgb({ hue: 255, saturation: 0.4, lightness: 0.75, alpha: 0.7 }).
|
|
4
4
|
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import{_ as e}from"./iframe-
|
|
1
|
+
import{_ as e}from"./iframe-_wKvslme.js";import"../sb-preview/runtime.js";var a={docs:{renderer:async()=>{let{DocsRenderer:r}=await e(()=>import("./DocsRenderer-NNNQARDV-vRAi_FKc.js"),__vite__mapDeps([0,1,2,3,4,5,6,7,8,9,10]),import.meta.url);return new r}}};export{a as parameters};
|
|
2
2
|
function __vite__mapDeps(indexes) {
|
|
3
3
|
if (!__vite__mapDeps.viteFileDeps) {
|
|
4
|
-
__vite__mapDeps.viteFileDeps = ["./DocsRenderer-NNNQARDV-
|
|
4
|
+
__vite__mapDeps.viteFileDeps = ["./DocsRenderer-NNNQARDV-vRAi_FKc.js","./chunk-HLWAVYOI-YeFXPQnD.js","./iframe-_wKvslme.js","./index-RfLt4OUa.js","./react-16-hgR7FrAp.js","./index-miLrID2P.js","./index-WC-d15Tp.js","./inheritsLoose-8sb_A2v4.js","./assertThisInitialized-4q6YPdh3.js","./index-R5dkQuFe.js","./index-PPLHz8o0.js"]
|
|
5
5
|
}
|
|
6
6
|
return indexes.map((i) => __vite__mapDeps.viteFileDeps[i])
|
|
7
7
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{S as l,c as n,s as d}from"./index-
|
|
1
|
+
import{S as l,c as n,s as d}from"./index-WC-d15Tp.js";import"./iframe-_wKvslme.js";import"../sb-preview/runtime.js";import"./index-RfLt4OUa.js";import"./index-miLrID2P.js";import"./inheritsLoose-8sb_A2v4.js";import"./assertThisInitialized-4q6YPdh3.js";import"./index-R5dkQuFe.js";import"./index-PPLHz8o0.js";export{l as SyntaxHighlighter,n as createCopyToClipboardFunction,d as default};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{j as o}from"./jsx-runtime-FsUICBgo.js";import{r as V}from"./index-RfLt4OUa.js";import{c as h}from"./index-VW3EWkuE.js";import{i as l}from"./types-5uVBABF4.js";import{D as z}from"./disabled-context-urNQThQz.js";import{T as k}from"./tooltip-HEHiU__l.js";const I="_inputInTable_66zck_1",N="_inputHover_66zck_13",R="_inputFocus_66zck_18",C="_inputError_66zck_25",S="_inputWarning_66zck_26",A="_inputDisabled_66zck_61",F="_hideScrollbars_66zck_67",H="_textarea_66zck_77",W="_small_66zck_116",w="_error_66zck_121",D="_warning_66zck_138",P="_monospace_66zck_155",t={inputInTable:I,inputHover:N,inputFocus:R,inputError:C,inputWarning:S,inputDisabled:A,hideScrollbars:F,textarea:H,small:W,error:w,warning:D,monospace:P},i=({name:r,value:u="",placeholder:s="",cols:d,rows:c,disabled:m=!1,onChange:p=()=>{},onKeyPress:f=()=>{},onFocus:v=()=>{},onBlur:_=()=>{},tabIndex:b=0,error:e=null,warning:a=null,tooltip:n=null,maxTooltipWidth:y,resize:x,monospace:g=!1,testId:E})=>{const T=V.useContext(z),q=o.jsx("textarea",{className:h(t.textarea,e?t.error:"",a?t.warning:"",g?t.monospace:""),name:r,value:u,placeholder:s,cols:d,rows:c,onChange:p,disabled:m||T,onKeyPress:f,onFocus:v,onBlur:_,tabIndex:b,style:{resize:x},"data-testid":E});return o.jsx(k,{error:!!e,warning:!!a,text:n||e||a,enabled:n&&l(n)||e&&l(e)||a&&l(a)||!1,maxWidth:y,placement:"bottom-center",children:q})};try{i.displayName="TextArea",i.__docgenInfo={description:"",displayName:"TextArea",props:{name:{defaultValue:null,description:"",name:"name",required:!1,type:{name:"string"}},value:{defaultValue:{value:""},description:"",name:"value",required:!1,type:{name:"TStringOrNumber"}},placeholder:{defaultValue:{value:""},description:"",name:"placeholder",required:!1,type:{name:"string"}},cols:{defaultValue:null,description:"",name:"cols",required:!1,type:{name:"number"}},rows:{defaultValue:null,description:"",name:"rows",required:!1,type:{name:"number"}},disabled:{defaultValue:{value:"false"},description:"",name:"disabled",required:!1,type:{name:"boolean"}},onChange:{defaultValue:{value:"() => {}"},description:"",name:"onChange",required:!1,type:{name:"((evt: ChangeEvent<HTMLTextAreaElement>) => void)"}},onKeyPress:{defaultValue:{value:"() => {}"},description:"",name:"onKeyPress",required:!1,type:{name:"((evt: KeyboardEvent<HTMLTextAreaElement>) => void)"}},onFocus:{defaultValue:{value:"() => {}"},description:"",name:"onFocus",required:!1,type:{name:"((evt: FocusEvent<HTMLTextAreaElement, Element>) => void)"}},onBlur:{defaultValue:{value:"() => {}"},description:"",name:"onBlur",required:!1,type:{name:"((evt: FocusEvent<HTMLTextAreaElement, Element>) => void)"}},tabIndex:{defaultValue:{value:"0"},description:"",name:"tabIndex",required:!1,type:{name:"number"}},error:{defaultValue:{value:"null"},description:"",name:"error",required:!1,type:{name:"string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | null"}},warning:{defaultValue:{value:"null"},description:"",name:"warning",required:!1,type:{name:"string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | null"}},tooltip:{defaultValue:{value:"null"},description:"",name:"tooltip",required:!1,type:{name:"string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | null"}},maxTooltipWidth:{defaultValue:null,description:"",name:"maxTooltipWidth",required:!1,type:{name:"TStringOrNumber"}},resize:{defaultValue:null,description:"",name:"resize",required:!1,type:{name:"enum",value:[{value:'"-moz-initial"'},{value:'"inherit"'},{value:'"initial"'},{value:'"revert"'},{value:'"revert-layer"'},{value:'"unset"'},{value:'"inline"'},{value:'"
|
|
1
|
+
import{j as o}from"./jsx-runtime-FsUICBgo.js";import{r as V}from"./index-RfLt4OUa.js";import{c as h}from"./index-VW3EWkuE.js";import{i as l}from"./types-5uVBABF4.js";import{D as z}from"./disabled-context-urNQThQz.js";import{T as k}from"./tooltip-HEHiU__l.js";const I="_inputInTable_66zck_1",N="_inputHover_66zck_13",R="_inputFocus_66zck_18",C="_inputError_66zck_25",S="_inputWarning_66zck_26",A="_inputDisabled_66zck_61",F="_hideScrollbars_66zck_67",H="_textarea_66zck_77",W="_small_66zck_116",w="_error_66zck_121",D="_warning_66zck_138",P="_monospace_66zck_155",t={inputInTable:I,inputHover:N,inputFocus:R,inputError:C,inputWarning:S,inputDisabled:A,hideScrollbars:F,textarea:H,small:W,error:w,warning:D,monospace:P},i=({name:r,value:u="",placeholder:s="",cols:d,rows:c,disabled:m=!1,onChange:p=()=>{},onKeyPress:f=()=>{},onFocus:v=()=>{},onBlur:_=()=>{},tabIndex:b=0,error:e=null,warning:a=null,tooltip:n=null,maxTooltipWidth:y,resize:x,monospace:g=!1,testId:E})=>{const T=V.useContext(z),q=o.jsx("textarea",{className:h(t.textarea,e?t.error:"",a?t.warning:"",g?t.monospace:""),name:r,value:u,placeholder:s,cols:d,rows:c,onChange:p,disabled:m||T,onKeyPress:f,onFocus:v,onBlur:_,tabIndex:b,style:{resize:x},"data-testid":E});return o.jsx(k,{error:!!e,warning:!!a,text:n||e||a,enabled:n&&l(n)||e&&l(e)||a&&l(a)||!1,maxWidth:y,placement:"bottom-center",children:q})};try{i.displayName="TextArea",i.__docgenInfo={description:"",displayName:"TextArea",props:{name:{defaultValue:null,description:"",name:"name",required:!1,type:{name:"string"}},value:{defaultValue:{value:""},description:"",name:"value",required:!1,type:{name:"TStringOrNumber"}},placeholder:{defaultValue:{value:""},description:"",name:"placeholder",required:!1,type:{name:"string"}},cols:{defaultValue:null,description:"",name:"cols",required:!1,type:{name:"number"}},rows:{defaultValue:null,description:"",name:"rows",required:!1,type:{name:"number"}},disabled:{defaultValue:{value:"false"},description:"",name:"disabled",required:!1,type:{name:"boolean"}},onChange:{defaultValue:{value:"() => {}"},description:"",name:"onChange",required:!1,type:{name:"((evt: ChangeEvent<HTMLTextAreaElement>) => void)"}},onKeyPress:{defaultValue:{value:"() => {}"},description:"",name:"onKeyPress",required:!1,type:{name:"((evt: KeyboardEvent<HTMLTextAreaElement>) => void)"}},onFocus:{defaultValue:{value:"() => {}"},description:"",name:"onFocus",required:!1,type:{name:"((evt: FocusEvent<HTMLTextAreaElement, Element>) => void)"}},onBlur:{defaultValue:{value:"() => {}"},description:"",name:"onBlur",required:!1,type:{name:"((evt: FocusEvent<HTMLTextAreaElement, Element>) => void)"}},tabIndex:{defaultValue:{value:"0"},description:"",name:"tabIndex",required:!1,type:{name:"number"}},error:{defaultValue:{value:"null"},description:"",name:"error",required:!1,type:{name:"string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | null"}},warning:{defaultValue:{value:"null"},description:"",name:"warning",required:!1,type:{name:"string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | null"}},tooltip:{defaultValue:{value:"null"},description:"",name:"tooltip",required:!1,type:{name:"string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | null"}},maxTooltipWidth:{defaultValue:null,description:"",name:"maxTooltipWidth",required:!1,type:{name:"TStringOrNumber"}},resize:{defaultValue:null,description:"",name:"resize",required:!1,type:{name:"enum",value:[{value:'"-moz-initial"'},{value:'"inherit"'},{value:'"initial"'},{value:'"revert"'},{value:'"revert-layer"'},{value:'"unset"'},{value:'"inline"'},{value:'"none"'},{value:'"vertical"'},{value:'"block"'},{value:'"both"'},{value:'"horizontal"'}]}},monospace:{defaultValue:{value:"false"},description:"",name:"monospace",required:!1,type:{name:"boolean"}},testId:{defaultValue:null,description:"",name:"testId",required:!1,type:{name:"string"}}}}}catch{}export{i as T};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{j as u}from"./jsx-runtime-FsUICBgo.js";import{T as s}from"./textarea-
|
|
1
|
+
import{j as u}from"./jsx-runtime-FsUICBgo.js";import{T as s}from"./textarea-Z5OlrRfT.js";import"./index-RfLt4OUa.js";import"./index-VW3EWkuE.js";import"./types-5uVBABF4.js";import"./lodash-Bmg8FrMx.js";import"./disabled-context-urNQThQz.js";import"./tooltip-HEHiU__l.js";import"./index-miLrID2P.js";const{useArgs:g}=__STORYBOOK_MODULE_ADDONS__,C={title:"Forms/TextArea",component:s,args:{disabled:!1}},c=n=>{const[i,o]=g(),m=p=>{o({value:p.target.value})};return u.jsx(s,{...n,onChange:m})},e=c.bind({});var t,r,a;e.parameters={...e.parameters,docs:{...(t=e.parameters)==null?void 0:t.docs,source:{originalSource:`args => {
|
|
2
2
|
const [_, updateArgs] = useArgs();
|
|
3
3
|
const handleChange = (evt: ChangeEvent<HTMLTextAreaElement>) => {
|
|
4
4
|
updateArgs({
|