@descope/flow-components 2.0.38 → 2.0.40
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.cjs.js +1 -93
- package/dist/index.d.ts +2 -54
- package/dist/index.esm.js +2 -92
- package/package.json +8 -9
- package/.eslintrc +0 -119
- package/.github/actions/setup/action.yml +0 -42
- package/.github/workflows/ci.yml +0 -105
- package/.github/workflows/publish.yml +0 -41
- package/.github/workflows/release.yml +0 -44
- package/.husky/pre-commit +0 -1
- package/.prettierrc +0 -8
- package/.storybook/main.js +0 -23
- package/.storybook/manager.js +0 -10
- package/.storybook/preview-head.html +0 -29
- package/.storybook/preview.js +0 -44
- package/LICENSE +0 -21
- package/babel.config.js +0 -7
- package/jest.config.js +0 -33
- package/jest.setup.js +0 -2
- package/renovate.json +0 -4
- package/rollup.config.mjs +0 -47
- package/src/Boolean/Boolean.tsx +0 -24
- package/src/Boolean/index.ts +0 -1
- package/src/Button/Button.tsx +0 -49
- package/src/Button/index.ts +0 -1
- package/src/Checkbox/Checkbox.tsx +0 -16
- package/src/Checkbox/index.ts +0 -1
- package/src/Code/Code.tsx +0 -21
- package/src/Code/index.ts +0 -1
- package/src/Container/Container.tsx +0 -111
- package/src/Container/index.ts +0 -1
- package/src/CssVarImage/CssVarImage.tsx +0 -38
- package/src/CssVarImage/index.ts +0 -1
- package/src/Divider/Divider.tsx +0 -33
- package/src/Divider/index.ts +0 -1
- package/src/EmailField/EmailField.tsx +0 -20
- package/src/EmailField/index.ts +0 -1
- package/src/Image/Image.tsx +0 -32
- package/src/Image/index.ts +0 -1
- package/src/Input/Input.tsx +0 -27
- package/src/Input/index.ts +0 -1
- package/src/Link/Link.tsx +0 -33
- package/src/Link/index.ts +0 -1
- package/src/Loader/Loader.tsx +0 -40
- package/src/Loader/index.ts +0 -1
- package/src/Logo/Logo.tsx +0 -27
- package/src/Logo/index.ts +0 -1
- package/src/NewPassword/NewPassword.tsx +0 -25
- package/src/NewPassword/index.ts +0 -1
- package/src/NumberField/NumberField.tsx +0 -20
- package/src/NumberField/index.ts +0 -1
- package/src/Password/Password.tsx +0 -20
- package/src/Password/index.ts +0 -1
- package/src/Phone/Phone.tsx +0 -22
- package/src/Phone/index.ts +0 -1
- package/src/Select/Select.tsx +0 -29
- package/src/Select/index.ts +0 -1
- package/src/Switch/Switch.tsx +0 -21
- package/src/Switch/index.ts +0 -1
- package/src/TOTPImage/TOTPImage.tsx +0 -18
- package/src/TOTPImage/index.ts +0 -1
- package/src/TOTPLink/TOTPLink.tsx +0 -16
- package/src/TOTPLink/index.ts +0 -1
- package/src/Text/Text.tsx +0 -36
- package/src/Text/index.ts +0 -1
- package/src/TextField/TextField.tsx +0 -20
- package/src/TextField/index.ts +0 -1
- package/src/Textarea/Textarea.tsx +0 -20
- package/src/Textarea/index.ts +0 -1
- package/src/icons/apple.tsx +0 -14
- package/src/icons/discord.tsx +0 -14
- package/src/icons/facebook.tsx +0 -14
- package/src/icons/fingerprint.tsx +0 -14
- package/src/icons/github.tsx +0 -14
- package/src/icons/gitlab.tsx +0 -41
- package/src/icons/google.tsx +0 -29
- package/src/icons/index.ts +0 -11
- package/src/icons/input-hidden.tsx +0 -17
- package/src/icons/input-visible.tsx +0 -17
- package/src/icons/linkedin.tsx +0 -18
- package/src/icons/microsoft.tsx +0 -41
- package/src/icons/passkey.tsx +0 -16
- package/src/icons/sso.tsx +0 -14
- package/src/index.ts +0 -29
- package/src/inputHelpers.ts +0 -41
- package/src/themeToCssVars/constants.ts +0 -13
- package/src/themeToCssVars/index.ts +0 -153
- package/src/themeToCssVars/types.ts +0 -56
- package/src/types.ts +0 -52
- package/src/utils.tsx +0 -69
- package/stories/Boolean.stories.jsx +0 -37
- package/stories/Button.stories.jsx +0 -71
- package/stories/Checkbox.stories.jsx +0 -29
- package/stories/Code.stories.jsx +0 -60
- package/stories/Container.stories.jsx +0 -53
- package/stories/Divider.stories.jsx +0 -23
- package/stories/EmailField.stories.jsx +0 -36
- package/stories/Image.stories.jsx +0 -16
- package/stories/Input.stories.jsx +0 -63
- package/stories/Link.stories.jsx +0 -21
- package/stories/Loader.stories.jsx +0 -34
- package/stories/Logo.stories.jsx +0 -14
- package/stories/NewPassword.stories.jsx +0 -52
- package/stories/NumberField.stories.jsx +0 -35
- package/stories/Password.stories.jsx +0 -37
- package/stories/Phone.stories.jsx +0 -61
- package/stories/Switch.stories.jsx +0 -29
- package/stories/TOTPImage.stories.jsx +0 -22
- package/stories/TOTPLink.stories.jsx +0 -20
- package/stories/Text.stories.jsx +0 -35
- package/stories/TextField.stories.jsx +0 -39
- package/stories/Textarea.stories.jsx +0 -25
- package/storybook-static/favicon.ico +0 -0
- package/test/__snapshots__/boolean.test.tsx.snap +0 -47
- package/test/__snapshots__/buttons.test.tsx.snap +0 -843
- package/test/__snapshots__/checkbox.test.tsx.snap +0 -51
- package/test/__snapshots__/code.test.tsx.snap +0 -1184
- package/test/__snapshots__/container.test.tsx.snap +0 -218
- package/test/__snapshots__/divider.test.tsx.snap +0 -73
- package/test/__snapshots__/image.test.tsx.snap +0 -62
- package/test/__snapshots__/input.test.tsx.snap +0 -80
- package/test/__snapshots__/link.test.tsx.snap +0 -120
- package/test/__snapshots__/loader.test.tsx.snap +0 -53
- package/test/__snapshots__/logo.test.tsx.snap +0 -10
- package/test/__snapshots__/newPassword.test.tsx.snap +0 -69
- package/test/__snapshots__/numeric-input.test.tsx.snap +0 -21
- package/test/__snapshots__/password.test.tsx.snap +0 -26
- package/test/__snapshots__/phone.test.tsx.snap +0 -504
- package/test/__snapshots__/switch.test.tsx.snap +0 -51
- package/test/__snapshots__/text.test.tsx.snap +0 -89
- package/test/__snapshots__/textarea.test.tsx.snap +0 -73
- package/test/__snapshots__/themeToCssVars.test.ts.snap +0 -45
- package/test/__snapshots__/totpImage.test.tsx.snap +0 -10
- package/test/__snapshots__/totpLink.test.tsx.snap +0 -13
- package/test/boolean.test.tsx +0 -28
- package/test/buttons.test.tsx +0 -66
- package/test/checkbox.test.tsx +0 -67
- package/test/code.test.tsx +0 -182
- package/test/container.test.tsx +0 -91
- package/test/divider.test.tsx +0 -50
- package/test/image.test.tsx +0 -40
- package/test/input.test.tsx +0 -82
- package/test/inputHelpers.test.tsx +0 -58
- package/test/link.test.tsx +0 -71
- package/test/loader.test.tsx +0 -25
- package/test/logo.test.tsx +0 -10
- package/test/newPassword.test.tsx +0 -132
- package/test/numeric-input.test.tsx +0 -114
- package/test/password.test.tsx +0 -55
- package/test/phone.test.tsx +0 -158
- package/test/switch.test.tsx +0 -67
- package/test/text.test.tsx +0 -60
- package/test/textarea.test.tsx +0 -64
- package/test/themeToCssVars.test.ts +0 -82
- package/test/totpImage.test.tsx +0 -10
- package/test/totpLink.test.tsx +0 -10
- package/tsconfig.json +0 -20
package/stories/Code.stories.jsx
DELETED
|
@@ -1,60 +0,0 @@
|
|
|
1
|
-
/* eslint-disable import/exports-last */
|
|
2
|
-
import React from 'react';
|
|
3
|
-
import { Code } from '../src';
|
|
4
|
-
|
|
5
|
-
export default {
|
|
6
|
-
title: 'WCUI/Code',
|
|
7
|
-
component: Code,
|
|
8
|
-
parameters: {
|
|
9
|
-
controls: { expanded: true }
|
|
10
|
-
},
|
|
11
|
-
argTypes: {
|
|
12
|
-
color: {
|
|
13
|
-
options: [
|
|
14
|
-
'',
|
|
15
|
-
'primary',
|
|
16
|
-
'secondary',
|
|
17
|
-
'accent',
|
|
18
|
-
'ghost',
|
|
19
|
-
'info',
|
|
20
|
-
'success',
|
|
21
|
-
'warning',
|
|
22
|
-
'error'
|
|
23
|
-
],
|
|
24
|
-
control: { type: 'select' }
|
|
25
|
-
},
|
|
26
|
-
'data-errormessage-pattern-mismatch': {
|
|
27
|
-
control: { type: 'text' }
|
|
28
|
-
},
|
|
29
|
-
'data-errormessage-value-missing': {
|
|
30
|
-
control: { type: 'text' }
|
|
31
|
-
}
|
|
32
|
-
}
|
|
33
|
-
};
|
|
34
|
-
|
|
35
|
-
const defaults = {
|
|
36
|
-
label: 'Label',
|
|
37
|
-
disabled: false,
|
|
38
|
-
digits: 6,
|
|
39
|
-
bordered: true,
|
|
40
|
-
size: 'md',
|
|
41
|
-
color: '',
|
|
42
|
-
'full-width': false,
|
|
43
|
-
required: false
|
|
44
|
-
};
|
|
45
|
-
|
|
46
|
-
const StandardTemplate = (args) => (
|
|
47
|
-
<form
|
|
48
|
-
onSubmit={(e) => {
|
|
49
|
-
e.preventDefault();
|
|
50
|
-
}}
|
|
51
|
-
>
|
|
52
|
-
<Code {...args} />
|
|
53
|
-
<br />
|
|
54
|
-
<button type="submit">submit</button>
|
|
55
|
-
</form>
|
|
56
|
-
);
|
|
57
|
-
export const Standard = StandardTemplate.bind({});
|
|
58
|
-
Standard.args = {
|
|
59
|
-
...defaults
|
|
60
|
-
};
|
|
@@ -1,53 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { Container } from '../src';
|
|
3
|
-
|
|
4
|
-
const StandardTemplate = (args) => (
|
|
5
|
-
<Container {...args}>
|
|
6
|
-
<button type="button">Click</button>
|
|
7
|
-
<button type="button">click</button>
|
|
8
|
-
</Container>
|
|
9
|
-
);
|
|
10
|
-
|
|
11
|
-
const OldProps = StandardTemplate.bind({});
|
|
12
|
-
OldProps.args = {
|
|
13
|
-
shadow: '2xl',
|
|
14
|
-
'border-radius': 'lg',
|
|
15
|
-
paddingX: '20px',
|
|
16
|
-
paddingY: '20px',
|
|
17
|
-
align: 'center',
|
|
18
|
-
background: '200',
|
|
19
|
-
direction: 'row',
|
|
20
|
-
width: '100%'
|
|
21
|
-
};
|
|
22
|
-
|
|
23
|
-
const NewProps = StandardTemplate.bind({});
|
|
24
|
-
NewProps.args = {
|
|
25
|
-
shadow: '2xl',
|
|
26
|
-
'border-radius': 'lg',
|
|
27
|
-
paddingX: '20px',
|
|
28
|
-
paddingY: '20px',
|
|
29
|
-
'vertical-alignment': 'center',
|
|
30
|
-
'horizontal-alignment': 'center',
|
|
31
|
-
'space-between': '10px',
|
|
32
|
-
background: '200',
|
|
33
|
-
direction: 'row',
|
|
34
|
-
width: '100%'
|
|
35
|
-
};
|
|
36
|
-
|
|
37
|
-
export default {
|
|
38
|
-
title: 'WCUI/Container',
|
|
39
|
-
component: Container,
|
|
40
|
-
parameters: {
|
|
41
|
-
controls: { expanded: true }
|
|
42
|
-
},
|
|
43
|
-
argTypes: {
|
|
44
|
-
'border-radius': {
|
|
45
|
-
control: { type: 'radio' }
|
|
46
|
-
},
|
|
47
|
-
justify: {
|
|
48
|
-
control: { type: 'radio' }
|
|
49
|
-
}
|
|
50
|
-
}
|
|
51
|
-
};
|
|
52
|
-
|
|
53
|
-
export { OldProps, NewProps };
|
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { Divider } from '../src';
|
|
3
|
-
|
|
4
|
-
export default {
|
|
5
|
-
title: 'WCUI/Divider',
|
|
6
|
-
component: Divider,
|
|
7
|
-
parameters: {
|
|
8
|
-
controls: { expanded: true }
|
|
9
|
-
}
|
|
10
|
-
};
|
|
11
|
-
|
|
12
|
-
const StandardTemplate = (args) => (
|
|
13
|
-
<div style={{ width: '400px' }}>
|
|
14
|
-
<Divider {...args} />
|
|
15
|
-
</div>
|
|
16
|
-
);
|
|
17
|
-
export const Standard = StandardTemplate.bind({});
|
|
18
|
-
Standard.args = {
|
|
19
|
-
children: 'label',
|
|
20
|
-
italic: false,
|
|
21
|
-
vertical: false,
|
|
22
|
-
variant: 'h3'
|
|
23
|
-
};
|
|
@@ -1,36 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { EmailField } from '../src/EmailField';
|
|
3
|
-
|
|
4
|
-
export default {
|
|
5
|
-
title: 'WCUI/EmailField',
|
|
6
|
-
component: EmailField,
|
|
7
|
-
parameters: {
|
|
8
|
-
controls: { expanded: true }
|
|
9
|
-
}
|
|
10
|
-
};
|
|
11
|
-
|
|
12
|
-
const defaults = {
|
|
13
|
-
label: 'Email Input',
|
|
14
|
-
placeholder: 'Enter your email',
|
|
15
|
-
disabled: false,
|
|
16
|
-
bordered: true,
|
|
17
|
-
'full-width': true,
|
|
18
|
-
required: false,
|
|
19
|
-
size: 'md',
|
|
20
|
-
'error-message': 'Enter a valid e-mail address'
|
|
21
|
-
};
|
|
22
|
-
|
|
23
|
-
const StandardTemplate = (args) => (
|
|
24
|
-
<form
|
|
25
|
-
onSubmit={(e) => {
|
|
26
|
-
e.preventDefault();
|
|
27
|
-
}}
|
|
28
|
-
>
|
|
29
|
-
<EmailField {...args} />
|
|
30
|
-
<button type="submit">Submit</button>
|
|
31
|
-
</form>
|
|
32
|
-
);
|
|
33
|
-
export const Standard = StandardTemplate.bind({});
|
|
34
|
-
Standard.args = {
|
|
35
|
-
...defaults
|
|
36
|
-
};
|
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { Image } from '../src';
|
|
3
|
-
|
|
4
|
-
export default {
|
|
5
|
-
title: 'WCUI/Image',
|
|
6
|
-
component: Image,
|
|
7
|
-
parameters: {
|
|
8
|
-
controls: { expanded: true }
|
|
9
|
-
}
|
|
10
|
-
};
|
|
11
|
-
|
|
12
|
-
const StandardTemplate = (args) => <Image {...args} />;
|
|
13
|
-
export const Standard = StandardTemplate.bind({});
|
|
14
|
-
Standard.args = {
|
|
15
|
-
src: 'https://joomisp.de/images/blog/joomisp-demo.jpg'
|
|
16
|
-
};
|
|
@@ -1,63 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { Input } from '../src';
|
|
3
|
-
|
|
4
|
-
export default {
|
|
5
|
-
title: 'WCUI/Input',
|
|
6
|
-
component: Input,
|
|
7
|
-
parameters: {
|
|
8
|
-
controls: { expanded: true }
|
|
9
|
-
},
|
|
10
|
-
argTypes: {}
|
|
11
|
-
};
|
|
12
|
-
|
|
13
|
-
const defaults = {
|
|
14
|
-
placeholder: 'Placeholder',
|
|
15
|
-
label: 'Label',
|
|
16
|
-
bordered: true,
|
|
17
|
-
size: 'md',
|
|
18
|
-
'full-width': false,
|
|
19
|
-
required: true,
|
|
20
|
-
'data-errormessage-value-missing': 'Required'
|
|
21
|
-
};
|
|
22
|
-
|
|
23
|
-
const StandardTemplate = (args) => (
|
|
24
|
-
<form
|
|
25
|
-
onSubmit={(e) => {
|
|
26
|
-
e.preventDefault();
|
|
27
|
-
}}
|
|
28
|
-
>
|
|
29
|
-
<Input {...args} />
|
|
30
|
-
<button type="submit">Submit</button>
|
|
31
|
-
</form>
|
|
32
|
-
);
|
|
33
|
-
export const Text = StandardTemplate.bind({});
|
|
34
|
-
Text.args = {
|
|
35
|
-
...defaults
|
|
36
|
-
};
|
|
37
|
-
|
|
38
|
-
export const Email = StandardTemplate.bind({});
|
|
39
|
-
Email.args = {
|
|
40
|
-
...defaults,
|
|
41
|
-
placeholder: 'Enter your email',
|
|
42
|
-
label: 'Email',
|
|
43
|
-
type: 'email',
|
|
44
|
-
'data-errormessage-pattern-mismatch': 'Enter a valid e-mail address'
|
|
45
|
-
};
|
|
46
|
-
|
|
47
|
-
export const Password = StandardTemplate.bind({});
|
|
48
|
-
Password.args = {
|
|
49
|
-
...defaults,
|
|
50
|
-
placeholder: 'Enter your password',
|
|
51
|
-
label: 'Password',
|
|
52
|
-
type: 'password'
|
|
53
|
-
};
|
|
54
|
-
|
|
55
|
-
export const Numeric = StandardTemplate.bind({});
|
|
56
|
-
Numeric.args = {
|
|
57
|
-
...defaults,
|
|
58
|
-
placeholder: 'Enter number value',
|
|
59
|
-
label: 'Number Value',
|
|
60
|
-
type: 'number',
|
|
61
|
-
step: 'any',
|
|
62
|
-
'data-errormessage-pattern-mismatch': 'Must be a number'
|
|
63
|
-
};
|
package/stories/Link.stories.jsx
DELETED
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { Link } from '../src';
|
|
3
|
-
|
|
4
|
-
export default {
|
|
5
|
-
title: 'WCUI/Link',
|
|
6
|
-
component: Link,
|
|
7
|
-
parameters: {
|
|
8
|
-
controls: { expanded: true }
|
|
9
|
-
}
|
|
10
|
-
};
|
|
11
|
-
|
|
12
|
-
const StandardTemplate = (args) => <Link {...args} />;
|
|
13
|
-
export const Standard = StandardTemplate.bind({});
|
|
14
|
-
Standard.args = {
|
|
15
|
-
children: 'Hello World',
|
|
16
|
-
italic: true,
|
|
17
|
-
variant: 'h3',
|
|
18
|
-
mode: 'primary',
|
|
19
|
-
'text-align': 'center',
|
|
20
|
-
'full-width': true
|
|
21
|
-
};
|
|
@@ -1,34 +0,0 @@
|
|
|
1
|
-
/* eslint-disable import/exports-last */
|
|
2
|
-
import React from 'react';
|
|
3
|
-
import { Loader } from '../src';
|
|
4
|
-
|
|
5
|
-
const StandardTemplate = (args) => <Loader {...args} />;
|
|
6
|
-
|
|
7
|
-
export default {
|
|
8
|
-
title: 'WCUI/Loader',
|
|
9
|
-
component: Loader,
|
|
10
|
-
parameters: {
|
|
11
|
-
controls: { expanded: true }
|
|
12
|
-
},
|
|
13
|
-
argTypes: {
|
|
14
|
-
variant: {
|
|
15
|
-
options: ['linear', 'radial'],
|
|
16
|
-
control: { type: 'select' }
|
|
17
|
-
},
|
|
18
|
-
size: {
|
|
19
|
-
options: ['xs', 'sm', 'md', 'lg'],
|
|
20
|
-
control: { type: 'select' }
|
|
21
|
-
},
|
|
22
|
-
color: {
|
|
23
|
-
options: ['primary', 'secondary'],
|
|
24
|
-
control: { type: 'select' }
|
|
25
|
-
}
|
|
26
|
-
}
|
|
27
|
-
};
|
|
28
|
-
|
|
29
|
-
export const Standard = StandardTemplate.bind({});
|
|
30
|
-
Standard.args = {
|
|
31
|
-
variant: 'radial',
|
|
32
|
-
size: 'md',
|
|
33
|
-
color: 'primary'
|
|
34
|
-
};
|
package/stories/Logo.stories.jsx
DELETED
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { Logo } from '../src';
|
|
3
|
-
|
|
4
|
-
export default {
|
|
5
|
-
title: 'WCUI/Logo',
|
|
6
|
-
component: Logo,
|
|
7
|
-
parameters: {
|
|
8
|
-
controls: { expanded: true }
|
|
9
|
-
}
|
|
10
|
-
};
|
|
11
|
-
|
|
12
|
-
const StandardTemplate = (args) => <Logo {...args} />;
|
|
13
|
-
export const Standard = StandardTemplate.bind({});
|
|
14
|
-
Standard.args = {};
|
|
@@ -1,52 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { NewPassword } from '../src';
|
|
3
|
-
|
|
4
|
-
export default {
|
|
5
|
-
title: 'WCUI/NewPassword',
|
|
6
|
-
component: NewPassword,
|
|
7
|
-
parameters: {
|
|
8
|
-
controls: { expanded: true }
|
|
9
|
-
},
|
|
10
|
-
argTypes: {
|
|
11
|
-
'data-errormessage-pattern-mismatch': {
|
|
12
|
-
control: { type: 'text' }
|
|
13
|
-
},
|
|
14
|
-
'data-errormessage-value-missing': {
|
|
15
|
-
control: { type: 'text' }
|
|
16
|
-
}
|
|
17
|
-
}
|
|
18
|
-
};
|
|
19
|
-
|
|
20
|
-
const defaults = {
|
|
21
|
-
disabled: false,
|
|
22
|
-
bordered: true,
|
|
23
|
-
size: 'md',
|
|
24
|
-
'full-width': true,
|
|
25
|
-
name: 'standard',
|
|
26
|
-
isConfirm: true,
|
|
27
|
-
required: true,
|
|
28
|
-
passwordInputProps: {
|
|
29
|
-
label: 'Password',
|
|
30
|
-
placeholder: 'Password'
|
|
31
|
-
},
|
|
32
|
-
confirmInputProps: {
|
|
33
|
-
label: 'Confirm password',
|
|
34
|
-
placeholder: 'Confirm password'
|
|
35
|
-
}
|
|
36
|
-
};
|
|
37
|
-
|
|
38
|
-
const StandardTemplate = (args) => (
|
|
39
|
-
<form
|
|
40
|
-
onSubmit={(e) => {
|
|
41
|
-
e.preventDefault();
|
|
42
|
-
}}
|
|
43
|
-
>
|
|
44
|
-
<NewPassword {...args} />
|
|
45
|
-
<button type="submit">submit</button>
|
|
46
|
-
</form>
|
|
47
|
-
);
|
|
48
|
-
export const Standard = StandardTemplate.bind({});
|
|
49
|
-
|
|
50
|
-
Standard.args = {
|
|
51
|
-
...defaults
|
|
52
|
-
};
|
|
@@ -1,35 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { NumberField } from '../src/NumberField';
|
|
3
|
-
|
|
4
|
-
export default {
|
|
5
|
-
title: 'WCUI/NumberField',
|
|
6
|
-
component: NumberField,
|
|
7
|
-
parameters: {
|
|
8
|
-
controls: { expanded: true }
|
|
9
|
-
}
|
|
10
|
-
};
|
|
11
|
-
|
|
12
|
-
const defaults = {
|
|
13
|
-
label: 'Label',
|
|
14
|
-
placeholder: 'Enter number value',
|
|
15
|
-
disabled: false,
|
|
16
|
-
bordered: true,
|
|
17
|
-
'full-width': false,
|
|
18
|
-
size: 'md',
|
|
19
|
-
required: false
|
|
20
|
-
};
|
|
21
|
-
|
|
22
|
-
const StandardTemplate = (args) => (
|
|
23
|
-
<form
|
|
24
|
-
onSubmit={(e) => {
|
|
25
|
-
e.preventDefault();
|
|
26
|
-
}}
|
|
27
|
-
>
|
|
28
|
-
<NumberField {...args} />
|
|
29
|
-
<button type="submit">Submit</button>
|
|
30
|
-
</form>
|
|
31
|
-
);
|
|
32
|
-
export const Standard = StandardTemplate.bind({});
|
|
33
|
-
Standard.args = {
|
|
34
|
-
...defaults
|
|
35
|
-
};
|
|
@@ -1,37 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { PasswordField } from '../src/Password';
|
|
3
|
-
|
|
4
|
-
export default {
|
|
5
|
-
title: 'WCUI/PasswordField',
|
|
6
|
-
component: PasswordField,
|
|
7
|
-
parameters: {
|
|
8
|
-
controls: { expanded: true }
|
|
9
|
-
}
|
|
10
|
-
};
|
|
11
|
-
|
|
12
|
-
const defaults = {
|
|
13
|
-
label: 'Password',
|
|
14
|
-
placeholder: 'Password',
|
|
15
|
-
disabled: false,
|
|
16
|
-
bordered: true,
|
|
17
|
-
'full-width': false,
|
|
18
|
-
required: true,
|
|
19
|
-
size: 'md',
|
|
20
|
-
name: 'password',
|
|
21
|
-
'helper-text': 'Enter your password and then click submit.'
|
|
22
|
-
};
|
|
23
|
-
|
|
24
|
-
const StandardTemplate = (args) => (
|
|
25
|
-
<form
|
|
26
|
-
onSubmit={(e) => {
|
|
27
|
-
e.preventDefault();
|
|
28
|
-
}}
|
|
29
|
-
>
|
|
30
|
-
<PasswordField {...args} />
|
|
31
|
-
</form>
|
|
32
|
-
);
|
|
33
|
-
export const Standard = StandardTemplate.bind({});
|
|
34
|
-
|
|
35
|
-
Standard.args = {
|
|
36
|
-
...defaults
|
|
37
|
-
};
|
|
@@ -1,61 +0,0 @@
|
|
|
1
|
-
/* eslint-disable import/exports-last */
|
|
2
|
-
import React from 'react';
|
|
3
|
-
import { Phone } from '../src';
|
|
4
|
-
|
|
5
|
-
document.context = { geo: 'IL' };
|
|
6
|
-
|
|
7
|
-
export default {
|
|
8
|
-
title: 'WCUI/Phone',
|
|
9
|
-
component: Phone,
|
|
10
|
-
parameters: {
|
|
11
|
-
controls: { expanded: true }
|
|
12
|
-
},
|
|
13
|
-
argTypes: {
|
|
14
|
-
color: {
|
|
15
|
-
options: [
|
|
16
|
-
'',
|
|
17
|
-
'primary',
|
|
18
|
-
'secondary',
|
|
19
|
-
'accent',
|
|
20
|
-
'ghost',
|
|
21
|
-
'info',
|
|
22
|
-
'success',
|
|
23
|
-
'warning',
|
|
24
|
-
'error'
|
|
25
|
-
],
|
|
26
|
-
control: { type: 'select' }
|
|
27
|
-
},
|
|
28
|
-
'data-errormessage-pattern-mismatch': {
|
|
29
|
-
control: { type: 'text' }
|
|
30
|
-
},
|
|
31
|
-
'data-errormessage-value-missing': {
|
|
32
|
-
control: { type: 'text' }
|
|
33
|
-
}
|
|
34
|
-
}
|
|
35
|
-
};
|
|
36
|
-
|
|
37
|
-
const defaults = {
|
|
38
|
-
label: 'Label',
|
|
39
|
-
disabled: false,
|
|
40
|
-
bordered: true,
|
|
41
|
-
size: 'md',
|
|
42
|
-
color: '',
|
|
43
|
-
'full-width': false,
|
|
44
|
-
required: false,
|
|
45
|
-
pattern: '.*',
|
|
46
|
-
readOnly: false,
|
|
47
|
-
autoDetect: true,
|
|
48
|
-
defaultValue: 'US'
|
|
49
|
-
};
|
|
50
|
-
|
|
51
|
-
const StandardTemplate = (args) => (
|
|
52
|
-
<form>
|
|
53
|
-
<Phone {...args} type="tel" name="phone" />
|
|
54
|
-
<br />
|
|
55
|
-
<button type="submit">submit</button>
|
|
56
|
-
</form>
|
|
57
|
-
);
|
|
58
|
-
export const Standard = StandardTemplate.bind({});
|
|
59
|
-
Standard.args = {
|
|
60
|
-
...defaults
|
|
61
|
-
};
|
|
@@ -1,29 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { Switch } from '../src';
|
|
3
|
-
|
|
4
|
-
export default {
|
|
5
|
-
title: 'WCUI/Switch',
|
|
6
|
-
component: Switch
|
|
7
|
-
};
|
|
8
|
-
|
|
9
|
-
const SwitchTemplate = (args) => (
|
|
10
|
-
<form
|
|
11
|
-
onSubmit={(e) => {
|
|
12
|
-
e.preventDefault();
|
|
13
|
-
}}
|
|
14
|
-
>
|
|
15
|
-
<div>
|
|
16
|
-
<Switch {...args} />
|
|
17
|
-
</div>
|
|
18
|
-
<button type="submit">Submit</button>
|
|
19
|
-
</form>
|
|
20
|
-
);
|
|
21
|
-
|
|
22
|
-
export const Toggle = SwitchTemplate.bind({});
|
|
23
|
-
Toggle.args = {
|
|
24
|
-
label: 'Toggle Label',
|
|
25
|
-
size: 'sm',
|
|
26
|
-
'full-width': false,
|
|
27
|
-
name: 'compName',
|
|
28
|
-
required: true
|
|
29
|
-
};
|
|
@@ -1,22 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { TOTPImage } from '../src';
|
|
3
|
-
|
|
4
|
-
export default {
|
|
5
|
-
title: 'Example/TOTP Image',
|
|
6
|
-
component: TOTPImage,
|
|
7
|
-
parameters: {
|
|
8
|
-
controls: { expanded: true }
|
|
9
|
-
}
|
|
10
|
-
};
|
|
11
|
-
|
|
12
|
-
const StandardTemplate = (args) => (
|
|
13
|
-
<TOTPImage
|
|
14
|
-
{...args}
|
|
15
|
-
style={{
|
|
16
|
-
'--totp-image':
|
|
17
|
-
'url(data:image/png;base64,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)'
|
|
18
|
-
}}
|
|
19
|
-
/>
|
|
20
|
-
);
|
|
21
|
-
export const Standard = StandardTemplate.bind({});
|
|
22
|
-
Standard.args = {};
|
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { TOTPLink } from '../src';
|
|
3
|
-
|
|
4
|
-
export default {
|
|
5
|
-
title: 'WCUI/TOTP Link',
|
|
6
|
-
component: TOTPLink,
|
|
7
|
-
parameters: {
|
|
8
|
-
controls: { expanded: true }
|
|
9
|
-
}
|
|
10
|
-
};
|
|
11
|
-
|
|
12
|
-
const StandardTemplate = (args) => <TOTPLink {...args} />;
|
|
13
|
-
export const Standard = StandardTemplate.bind({});
|
|
14
|
-
Standard.args = {
|
|
15
|
-
children: 'Hello World',
|
|
16
|
-
italic: false,
|
|
17
|
-
variant: 'h3',
|
|
18
|
-
align: 'left',
|
|
19
|
-
'full-width': false
|
|
20
|
-
};
|
package/stories/Text.stories.jsx
DELETED
|
@@ -1,35 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { Text } from '../src';
|
|
3
|
-
|
|
4
|
-
export default {
|
|
5
|
-
title: 'WCUI/Text',
|
|
6
|
-
component: Text,
|
|
7
|
-
parameters: {
|
|
8
|
-
controls: { expanded: true }
|
|
9
|
-
},
|
|
10
|
-
argTypes: {
|
|
11
|
-
variant: {
|
|
12
|
-
options: ['h1', 'h2', 'h3', 'subtitle1', 'subtitle2', 'body1', 'body2'],
|
|
13
|
-
control: { type: 'radio' }
|
|
14
|
-
},
|
|
15
|
-
mode: {
|
|
16
|
-
options: ['primary', 'secondary'],
|
|
17
|
-
control: { type: 'radio' }
|
|
18
|
-
},
|
|
19
|
-
'text-align': {
|
|
20
|
-
options: ['left', 'center', 'right'],
|
|
21
|
-
control: { type: 'radio' }
|
|
22
|
-
}
|
|
23
|
-
}
|
|
24
|
-
};
|
|
25
|
-
|
|
26
|
-
const StandardTemplate = (args) => <Text {...args} />;
|
|
27
|
-
export const Standard = StandardTemplate.bind({});
|
|
28
|
-
Standard.args = {
|
|
29
|
-
variant: 'h1',
|
|
30
|
-
mode: 'primary',
|
|
31
|
-
children: 'Hello World',
|
|
32
|
-
italic: true,
|
|
33
|
-
'text-align': 'right',
|
|
34
|
-
'full-width': true
|
|
35
|
-
};
|
|
@@ -1,39 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { TextField } from '../src/TextField';
|
|
3
|
-
|
|
4
|
-
export default {
|
|
5
|
-
title: 'WCUI/TextField',
|
|
6
|
-
component: TextField,
|
|
7
|
-
parameters: {
|
|
8
|
-
controls: { expanded: true }
|
|
9
|
-
},
|
|
10
|
-
argTypes: {}
|
|
11
|
-
};
|
|
12
|
-
|
|
13
|
-
const defaults = {
|
|
14
|
-
placeholder: 'Placeholder',
|
|
15
|
-
label: 'Label',
|
|
16
|
-
disabled: false,
|
|
17
|
-
bordered: true,
|
|
18
|
-
size: 'md',
|
|
19
|
-
'full-width': false,
|
|
20
|
-
required: false,
|
|
21
|
-
'helper-text': 'Enter text and then click submit.',
|
|
22
|
-
pattern: '',
|
|
23
|
-
'error-message': 'Please revise and submit again.'
|
|
24
|
-
};
|
|
25
|
-
|
|
26
|
-
const StandardTemplate = (args) => (
|
|
27
|
-
<form
|
|
28
|
-
onSubmit={(e) => {
|
|
29
|
-
e.preventDefault();
|
|
30
|
-
}}
|
|
31
|
-
>
|
|
32
|
-
<TextField {...args} />
|
|
33
|
-
<button type="submit">Submit</button>
|
|
34
|
-
</form>
|
|
35
|
-
);
|
|
36
|
-
export const Standard = StandardTemplate.bind({});
|
|
37
|
-
Standard.args = {
|
|
38
|
-
...defaults
|
|
39
|
-
};
|