@3t-transform/threeteeui 0.1.21 → 0.1.22
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/cjs/{index-b8a62ede.js → index-dc6cc829.js} +2 -88
- package/dist/cjs/loader.cjs.js +3 -4
- package/dist/cjs/tttx-button.cjs.entry.js +24 -24
- package/dist/cjs/tttx-filter.cjs.entry.js +152 -152
- package/dist/cjs/tttx-form.cjs.entry.js +363 -363
- package/dist/cjs/tttx-icon.cjs.entry.js +11 -11
- package/dist/cjs/tttx-keyvalue-block.cjs.entry.js +59 -59
- package/dist/cjs/tttx-list.cjs.entry.js +43 -43
- package/dist/cjs/tttx-loading-spinner.cjs.entry.js +16 -16
- package/dist/cjs/tttx-sorter.cjs.entry.js +112 -0
- package/dist/cjs/tttx-standalone-input.cjs.entry.js +60 -60
- package/dist/cjs/tttx-toolbar.cjs.entry.js +10 -10
- package/dist/cjs/tttx.cjs.js +3 -7
- package/dist/collection/collection-manifest.json +3 -2
- package/dist/collection/components/atoms/tttx-button/tttx-button.js +110 -110
- package/dist/collection/components/atoms/tttx-button/tttx-button.stories.js +14 -14
- package/dist/collection/components/atoms/tttx-icon/tttx-icon.js +62 -62
- package/dist/collection/components/atoms/tttx-icon/tttx-icon.stories.js +22 -22
- package/dist/collection/components/atoms/tttx-keyvalue-block/tttx-keyvalue-block.js +109 -109
- package/dist/collection/components/atoms/tttx-keyvalue-block/tttx-keyvalue-block.stories.js +38 -38
- package/dist/collection/components/atoms/tttx-loading-spinner/tttx-loading-spinner.js +67 -67
- package/dist/collection/components/atoms/tttx-loading-spinner/tttx-loading-spinner.stories.js +17 -17
- package/dist/collection/components/molecules/tttx-filter/tttx-filter.js +325 -325
- package/dist/collection/components/molecules/tttx-filter/tttx-filter.stories.js +89 -89
- package/dist/collection/components/molecules/tttx-form/lib/setErrorState.js +35 -35
- package/dist/collection/components/molecules/tttx-form/lib/validityCheck.js +58 -58
- package/dist/collection/components/molecules/tttx-form/tttx-form.js +364 -364
- package/dist/collection/components/molecules/tttx-form/tttx-form.stories.js +127 -127
- package/dist/collection/components/molecules/tttx-list/tttx-list.js +105 -105
- package/dist/collection/components/molecules/tttx-list/tttx-list.stories.js +43 -43
- package/dist/collection/components/molecules/tttx-sorter/tttx-sorter.css +116 -0
- package/dist/collection/components/molecules/tttx-sorter/tttx-sorter.js +224 -0
- package/dist/collection/components/molecules/tttx-sorter/tttx-sorter.stories.js +47 -0
- package/dist/collection/components/molecules/tttx-standalone-input/tttx-standalone-input.js +627 -627
- package/dist/collection/components/molecules/tttx-standalone-input/tttx-standalone-input.stories.js +157 -157
- package/dist/collection/components/molecules/tttx-toolbar/tttx-toolbar.js +44 -44
- package/dist/collection/components/molecules/tttx-toolbar/tttx-toolbar.stories.js +14 -14
- package/dist/collection/components/palette.stories.js +7 -7
- package/dist/collection/docs/gettingstarted-developer.stories.js +5 -5
- package/dist/collection/icons.js +2838 -2838
- package/dist/collection/index.js +1 -1
- package/dist/collection/shared/domsanitiser.options.js +14 -14
- package/dist/components/index.d.ts +1 -9
- package/dist/components/index.js +2 -1
- package/dist/components/tttx-button.js +48 -48
- package/dist/components/tttx-filter.js +184 -184
- package/dist/components/tttx-form.js +380 -380
- package/dist/components/tttx-icon2.js +28 -28
- package/dist/components/tttx-keyvalue-block.js +76 -76
- package/dist/components/tttx-list.js +65 -65
- package/dist/components/tttx-loading-spinner.js +33 -33
- package/dist/components/tttx-sorter.d.ts +11 -0
- package/dist/components/tttx-sorter.js +141 -0
- package/dist/components/tttx-standalone-input.js +107 -107
- package/dist/components/tttx-toolbar.js +26 -26
- package/dist/esm/{index-e888a5f4.js → index-86faeaab.js} +3 -88
- package/dist/esm/loader.js +3 -4
- package/dist/esm/polyfills/core-js.js +0 -0
- package/dist/esm/polyfills/css-shim.js +1 -1
- package/dist/esm/polyfills/dom.js +0 -0
- package/dist/esm/polyfills/es5-html-element.js +0 -0
- package/dist/esm/polyfills/index.js +0 -0
- package/dist/esm/polyfills/system.js +0 -0
- package/dist/esm/tttx-button.entry.js +24 -24
- package/dist/esm/tttx-filter.entry.js +152 -152
- package/dist/esm/tttx-form.entry.js +363 -363
- package/dist/esm/tttx-icon.entry.js +11 -11
- package/dist/esm/tttx-keyvalue-block.entry.js +59 -59
- package/dist/esm/tttx-list.entry.js +43 -43
- package/dist/esm/tttx-loading-spinner.entry.js +16 -16
- package/dist/esm/tttx-sorter.entry.js +108 -0
- package/dist/esm/tttx-standalone-input.entry.js +60 -60
- package/dist/esm/tttx-toolbar.entry.js +10 -10
- package/dist/esm/tttx.js +3 -4
- package/dist/tttx/p-12fc0b16.entry.js +3 -0
- package/dist/tttx/p-52a47b7c.js +2 -0
- package/dist/tttx/p-5d9b6bc0.entry.js +1 -0
- package/dist/tttx/{p-41f5b296.entry.js → p-603f6ebe.entry.js} +1 -1
- package/dist/tttx/{p-e145951b.entry.js → p-72b4c98a.entry.js} +1 -1
- package/dist/tttx/{p-043f9b8a.entry.js → p-8f3badad.entry.js} +1 -1
- package/dist/tttx/{p-4cf3e1e0.entry.js → p-ae48fe5a.entry.js} +1 -1
- package/dist/tttx/{p-01f4628e.entry.js → p-bdb054b2.entry.js} +1 -1
- package/dist/tttx/{p-dc5c356b.entry.js → p-c72d1a03.entry.js} +1 -1
- package/dist/tttx/{p-96bbf1ed.entry.js → p-e25d5fe2.entry.js} +1 -1
- package/dist/tttx/{p-b3a03986.entry.js → p-f1d7eb35.entry.js} +1 -1
- package/dist/tttx/tttx.esm.js +1 -1
- package/dist/types/components/atoms/tttx-button/tttx-button.d.ts +10 -10
- package/dist/types/components/atoms/tttx-button/tttx-button.stories.d.ts +10 -10
- package/dist/types/components/atoms/tttx-icon/tttx-icon.d.ts +5 -5
- package/dist/types/components/atoms/tttx-icon/tttx-icon.stories.d.ts +20 -20
- package/dist/types/components/atoms/tttx-keyvalue-block/tttx-keyvalue-block.d.ts +7 -7
- package/dist/types/components/atoms/tttx-keyvalue-block/tttx-keyvalue-block.stories.d.ts +9 -9
- package/dist/types/components/atoms/tttx-loading-spinner/tttx-loading-spinner.d.ts +6 -6
- package/dist/types/components/atoms/tttx-loading-spinner/tttx-loading-spinner.stories.d.ts +17 -17
- package/dist/types/components/molecules/tttx-filter/tttx-filter.d.ts +37 -37
- package/dist/types/components/molecules/tttx-filter/tttx-filter.stories.d.ts +43 -43
- package/dist/types/components/molecules/tttx-form/lib/setErrorState.d.ts +13 -13
- package/dist/types/components/molecules/tttx-form/lib/validityCheck.d.ts +17 -17
- package/dist/types/components/molecules/tttx-form/tttx-form.d.ts +114 -114
- package/dist/types/components/molecules/tttx-form/tttx-form.stories.d.ts +13 -13
- package/dist/types/components/molecules/tttx-list/tttx-list.d.ts +11 -11
- package/dist/types/components/molecules/tttx-list/tttx-list.stories.d.ts +14 -14
- package/dist/types/components/molecules/tttx-sorter/interfaces.d.ts +9 -0
- package/dist/types/components/molecules/tttx-sorter/tttx-sorter.d.ts +19 -0
- package/dist/types/components/molecules/tttx-sorter/tttx-sorter.stories.d.ts +30 -0
- package/dist/types/components/molecules/tttx-standalone-input/tttx-standalone-input.d.ts +56 -56
- package/dist/types/components/molecules/tttx-standalone-input/tttx-standalone-input.stories.d.ts +123 -123
- package/dist/types/components/molecules/tttx-toolbar/tttx-toolbar.d.ts +4 -4
- package/dist/types/components/molecules/tttx-toolbar/tttx-toolbar.stories.d.ts +13 -13
- package/dist/types/components/palette.stories.d.ts +6 -6
- package/dist/types/components.d.ts +27 -0
- package/dist/types/docs/gettingstarted-developer.stories.d.ts +5 -5
- package/dist/types/icons.d.ts +2 -2
- package/dist/types/index.d.ts +1 -1
- package/dist/types/shared/domsanitiser.options.d.ts +10 -10
- package/dist/types/stencil-public-runtime.d.ts +3 -59
- package/loader/index.d.ts +0 -9
- package/package.json +1 -1
- package/dist/tttx/p-6dff6b5a.entry.js +0 -3
- package/dist/tttx/p-f764ffc4.js +0 -2
package/dist/collection/components/molecules/tttx-standalone-input/tttx-standalone-input.stories.js
CHANGED
|
@@ -1,80 +1,80 @@
|
|
|
1
|
-
import icons from '../../../icons';
|
|
2
|
-
export default {
|
|
3
|
-
title: 'Molecules/Standalone Input',
|
|
4
|
-
component: 'tttx-standalone-input',
|
|
5
|
-
argTypes: {
|
|
6
|
-
iconleft: {
|
|
7
|
-
options: icons,
|
|
8
|
-
control: { type: 'select' },
|
|
9
|
-
},
|
|
10
|
-
iconright: {
|
|
11
|
-
options: icons,
|
|
12
|
-
control: { type: 'select' },
|
|
13
|
-
},
|
|
14
|
-
inputIcon: {
|
|
15
|
-
options: icons,
|
|
16
|
-
control: { type: 'select' },
|
|
17
|
-
},
|
|
18
|
-
label: {
|
|
19
|
-
control: { type: 'text' },
|
|
20
|
-
},
|
|
21
|
-
errormsg: {
|
|
22
|
-
control: { type: 'text' },
|
|
23
|
-
},
|
|
24
|
-
showerrorbubble: {
|
|
25
|
-
control: { type: 'boolean' },
|
|
26
|
-
},
|
|
27
|
-
showerrormsg: {
|
|
28
|
-
control: { type: 'boolean' },
|
|
29
|
-
},
|
|
30
|
-
inline: {
|
|
31
|
-
control: { type: 'boolean' },
|
|
32
|
-
},
|
|
33
|
-
checked: {
|
|
34
|
-
control: { type: 'boolean' },
|
|
35
|
-
},
|
|
36
|
-
disabled: {
|
|
37
|
-
control: { type: 'boolean' },
|
|
38
|
-
},
|
|
39
|
-
max: {
|
|
40
|
-
control: { type: 'text' },
|
|
41
|
-
},
|
|
42
|
-
maxlength: {
|
|
43
|
-
control: { type: 'text' },
|
|
44
|
-
},
|
|
45
|
-
min: {
|
|
46
|
-
control: { type: 'text' },
|
|
47
|
-
},
|
|
48
|
-
minlength: {
|
|
49
|
-
control: { type: 'text' },
|
|
50
|
-
},
|
|
51
|
-
name: {
|
|
52
|
-
control: { type: 'text' },
|
|
53
|
-
},
|
|
54
|
-
pattern: {
|
|
55
|
-
control: { type: 'text' },
|
|
56
|
-
},
|
|
57
|
-
placeholder: {
|
|
58
|
-
control: { type: 'text' },
|
|
59
|
-
},
|
|
60
|
-
readonly: {
|
|
61
|
-
control: { type: 'boolean' },
|
|
62
|
-
},
|
|
63
|
-
required: {
|
|
64
|
-
control: { type: 'boolean' },
|
|
65
|
-
},
|
|
66
|
-
step: {
|
|
67
|
-
control: { type: 'text' },
|
|
68
|
-
},
|
|
69
|
-
type: {
|
|
70
|
-
options: ['text', 'password', 'email', 'number'],
|
|
71
|
-
control: { type: 'radio' },
|
|
72
|
-
},
|
|
73
|
-
value: {
|
|
74
|
-
control: { type: 'text' },
|
|
75
|
-
},
|
|
76
|
-
},
|
|
77
|
-
};
|
|
1
|
+
import icons from '../../../icons';
|
|
2
|
+
export default {
|
|
3
|
+
title: 'Molecules/Standalone Input',
|
|
4
|
+
component: 'tttx-standalone-input',
|
|
5
|
+
argTypes: {
|
|
6
|
+
iconleft: {
|
|
7
|
+
options: icons,
|
|
8
|
+
control: { type: 'select' },
|
|
9
|
+
},
|
|
10
|
+
iconright: {
|
|
11
|
+
options: icons,
|
|
12
|
+
control: { type: 'select' },
|
|
13
|
+
},
|
|
14
|
+
inputIcon: {
|
|
15
|
+
options: icons,
|
|
16
|
+
control: { type: 'select' },
|
|
17
|
+
},
|
|
18
|
+
label: {
|
|
19
|
+
control: { type: 'text' },
|
|
20
|
+
},
|
|
21
|
+
errormsg: {
|
|
22
|
+
control: { type: 'text' },
|
|
23
|
+
},
|
|
24
|
+
showerrorbubble: {
|
|
25
|
+
control: { type: 'boolean' },
|
|
26
|
+
},
|
|
27
|
+
showerrormsg: {
|
|
28
|
+
control: { type: 'boolean' },
|
|
29
|
+
},
|
|
30
|
+
inline: {
|
|
31
|
+
control: { type: 'boolean' },
|
|
32
|
+
},
|
|
33
|
+
checked: {
|
|
34
|
+
control: { type: 'boolean' },
|
|
35
|
+
},
|
|
36
|
+
disabled: {
|
|
37
|
+
control: { type: 'boolean' },
|
|
38
|
+
},
|
|
39
|
+
max: {
|
|
40
|
+
control: { type: 'text' },
|
|
41
|
+
},
|
|
42
|
+
maxlength: {
|
|
43
|
+
control: { type: 'text' },
|
|
44
|
+
},
|
|
45
|
+
min: {
|
|
46
|
+
control: { type: 'text' },
|
|
47
|
+
},
|
|
48
|
+
minlength: {
|
|
49
|
+
control: { type: 'text' },
|
|
50
|
+
},
|
|
51
|
+
name: {
|
|
52
|
+
control: { type: 'text' },
|
|
53
|
+
},
|
|
54
|
+
pattern: {
|
|
55
|
+
control: { type: 'text' },
|
|
56
|
+
},
|
|
57
|
+
placeholder: {
|
|
58
|
+
control: { type: 'text' },
|
|
59
|
+
},
|
|
60
|
+
readonly: {
|
|
61
|
+
control: { type: 'boolean' },
|
|
62
|
+
},
|
|
63
|
+
required: {
|
|
64
|
+
control: { type: 'boolean' },
|
|
65
|
+
},
|
|
66
|
+
step: {
|
|
67
|
+
control: { type: 'text' },
|
|
68
|
+
},
|
|
69
|
+
type: {
|
|
70
|
+
options: ['text', 'password', 'email', 'number'],
|
|
71
|
+
control: { type: 'radio' },
|
|
72
|
+
},
|
|
73
|
+
value: {
|
|
74
|
+
control: { type: 'text' },
|
|
75
|
+
},
|
|
76
|
+
},
|
|
77
|
+
};
|
|
78
78
|
const TemplateTextInput = ({ iconleft, iconright, inputIcon, label, errormsg, showerrorbubble, showerrormsg, inline, checked, disabled, max, maxlength, min, minlength, name, pattern, placeholder, readonly, required, step, type, value, }) => `
|
|
79
79
|
<tttx-standalone-input
|
|
80
80
|
iconleft="${iconleft || ''}"
|
|
@@ -100,83 +100,83 @@ const TemplateTextInput = ({ iconleft, iconright, inputIcon, label, errormsg, sh
|
|
|
100
100
|
type="${type}"
|
|
101
101
|
value="${value}"
|
|
102
102
|
/>
|
|
103
|
-
`;
|
|
104
|
-
export const InputField = TemplateTextInput.bind({});
|
|
105
|
-
InputField.args = {
|
|
106
|
-
value: '',
|
|
107
|
-
label: 'First name',
|
|
108
|
-
type: 'text',
|
|
109
|
-
errormsg: 'Please enter your first name',
|
|
110
|
-
required: false,
|
|
111
|
-
showerrormsg: false,
|
|
112
|
-
placeholder: 'Enter first name',
|
|
113
|
-
};
|
|
114
|
-
export const searchField = TemplateTextInput.bind({});
|
|
115
|
-
searchField.args = {
|
|
116
|
-
value: '',
|
|
117
|
-
label: '',
|
|
118
|
-
type: 'text',
|
|
119
|
-
errormsg: 'Please enter your first name',
|
|
120
|
-
required: true,
|
|
121
|
-
showerrormsg: false,
|
|
122
|
-
showerrorbubble: false,
|
|
123
|
-
placeholder: 'Search',
|
|
124
|
-
inline: true,
|
|
125
|
-
inputIcon: 'search'
|
|
126
|
-
};
|
|
127
|
-
// export const TextInputIconLeft = TemplateTextInput.bind({});
|
|
128
|
-
// TextInputIconLeft.args = {
|
|
129
|
-
// value: 'Uh egg',
|
|
130
|
-
// label: 'Please tell me about your egg',
|
|
131
|
-
// iconleft: 'egg',
|
|
132
|
-
// type: 'text',
|
|
133
|
-
// errormsg: 'Incorrect egg, please egg again.',
|
|
134
|
-
// required: true,
|
|
135
|
-
// showerrormsg: true,
|
|
136
|
-
// placeholder: 'Please for the love of god tell me about your egg',
|
|
137
|
-
// };
|
|
138
|
-
// export const TextInputIconRight = TemplateTextInput.bind({});
|
|
139
|
-
// TextInputIconRight.args = {
|
|
140
|
-
// value: 'Uh egg',
|
|
141
|
-
// label: 'Please tell me about your egg',
|
|
142
|
-
// iconright: 'egg',
|
|
143
|
-
// type: 'text',
|
|
144
|
-
// errormsg: 'Incorrect egg, please egg again.',
|
|
145
|
-
// required: true,
|
|
146
|
-
// showerrormsg: true,
|
|
147
|
-
// placeholder: 'Please for the love of god tell me about your egg',
|
|
148
|
-
// };
|
|
149
|
-
// export const PasswordInputBasic = TemplateTextInput.bind({});
|
|
150
|
-
// PasswordInputBasic.args = {
|
|
151
|
-
// value: 'qwefdweferg',
|
|
152
|
-
// label: 'Input your Password',
|
|
153
|
-
// iconleft: 'lock',
|
|
154
|
-
// type: 'password',
|
|
155
|
-
// errormsg: 'Password is not strong enough',
|
|
156
|
-
// required: true,
|
|
157
|
-
// showerrormsg: true,
|
|
158
|
-
// placeholder: 'Your password',
|
|
159
|
-
// };
|
|
160
|
-
// export const EmailInputBasic = TemplateTextInput.bind({});
|
|
161
|
-
// EmailInputBasic.args = {
|
|
162
|
-
// value: 'email.address@website.com',
|
|
163
|
-
// label: 'Choose an email address',
|
|
164
|
-
// iconleft: 'mail',
|
|
165
|
-
// type: 'email',
|
|
166
|
-
// errormsg: 'This email smells funny',
|
|
167
|
-
// required: true,
|
|
168
|
-
// valid: false,
|
|
169
|
-
// showerrormsg: true,
|
|
170
|
-
// placeholder: 'Your email address',
|
|
171
|
-
// };
|
|
172
|
-
// export const NumberInputBasic = TemplateTextInput.bind({});
|
|
173
|
-
// NumberInputBasic.args = {
|
|
174
|
-
// value: '42069',
|
|
175
|
-
// label: 'What is your favourite number?',
|
|
176
|
-
// iconleft: '123',
|
|
177
|
-
// type: 'number',
|
|
178
|
-
// errormsg: 'This number feels wrong',
|
|
179
|
-
// required: true,
|
|
180
|
-
// showerrormsg: true,
|
|
181
|
-
// placeholder: 'Your favourite number',
|
|
182
|
-
// };
|
|
103
|
+
`;
|
|
104
|
+
export const InputField = TemplateTextInput.bind({});
|
|
105
|
+
InputField.args = {
|
|
106
|
+
value: '',
|
|
107
|
+
label: 'First name',
|
|
108
|
+
type: 'text',
|
|
109
|
+
errormsg: 'Please enter your first name',
|
|
110
|
+
required: false,
|
|
111
|
+
showerrormsg: false,
|
|
112
|
+
placeholder: 'Enter first name',
|
|
113
|
+
};
|
|
114
|
+
export const searchField = TemplateTextInput.bind({});
|
|
115
|
+
searchField.args = {
|
|
116
|
+
value: '',
|
|
117
|
+
label: '',
|
|
118
|
+
type: 'text',
|
|
119
|
+
errormsg: 'Please enter your first name',
|
|
120
|
+
required: true,
|
|
121
|
+
showerrormsg: false,
|
|
122
|
+
showerrorbubble: false,
|
|
123
|
+
placeholder: 'Search',
|
|
124
|
+
inline: true,
|
|
125
|
+
inputIcon: 'search'
|
|
126
|
+
};
|
|
127
|
+
// export const TextInputIconLeft = TemplateTextInput.bind({});
|
|
128
|
+
// TextInputIconLeft.args = {
|
|
129
|
+
// value: 'Uh egg',
|
|
130
|
+
// label: 'Please tell me about your egg',
|
|
131
|
+
// iconleft: 'egg',
|
|
132
|
+
// type: 'text',
|
|
133
|
+
// errormsg: 'Incorrect egg, please egg again.',
|
|
134
|
+
// required: true,
|
|
135
|
+
// showerrormsg: true,
|
|
136
|
+
// placeholder: 'Please for the love of god tell me about your egg',
|
|
137
|
+
// };
|
|
138
|
+
// export const TextInputIconRight = TemplateTextInput.bind({});
|
|
139
|
+
// TextInputIconRight.args = {
|
|
140
|
+
// value: 'Uh egg',
|
|
141
|
+
// label: 'Please tell me about your egg',
|
|
142
|
+
// iconright: 'egg',
|
|
143
|
+
// type: 'text',
|
|
144
|
+
// errormsg: 'Incorrect egg, please egg again.',
|
|
145
|
+
// required: true,
|
|
146
|
+
// showerrormsg: true,
|
|
147
|
+
// placeholder: 'Please for the love of god tell me about your egg',
|
|
148
|
+
// };
|
|
149
|
+
// export const PasswordInputBasic = TemplateTextInput.bind({});
|
|
150
|
+
// PasswordInputBasic.args = {
|
|
151
|
+
// value: 'qwefdweferg',
|
|
152
|
+
// label: 'Input your Password',
|
|
153
|
+
// iconleft: 'lock',
|
|
154
|
+
// type: 'password',
|
|
155
|
+
// errormsg: 'Password is not strong enough',
|
|
156
|
+
// required: true,
|
|
157
|
+
// showerrormsg: true,
|
|
158
|
+
// placeholder: 'Your password',
|
|
159
|
+
// };
|
|
160
|
+
// export const EmailInputBasic = TemplateTextInput.bind({});
|
|
161
|
+
// EmailInputBasic.args = {
|
|
162
|
+
// value: 'email.address@website.com',
|
|
163
|
+
// label: 'Choose an email address',
|
|
164
|
+
// iconleft: 'mail',
|
|
165
|
+
// type: 'email',
|
|
166
|
+
// errormsg: 'This email smells funny',
|
|
167
|
+
// required: true,
|
|
168
|
+
// valid: false,
|
|
169
|
+
// showerrormsg: true,
|
|
170
|
+
// placeholder: 'Your email address',
|
|
171
|
+
// };
|
|
172
|
+
// export const NumberInputBasic = TemplateTextInput.bind({});
|
|
173
|
+
// NumberInputBasic.args = {
|
|
174
|
+
// value: '42069',
|
|
175
|
+
// label: 'What is your favourite number?',
|
|
176
|
+
// iconleft: '123',
|
|
177
|
+
// type: 'number',
|
|
178
|
+
// errormsg: 'This number feels wrong',
|
|
179
|
+
// required: true,
|
|
180
|
+
// showerrormsg: true,
|
|
181
|
+
// placeholder: 'Your favourite number',
|
|
182
|
+
// };
|
|
@@ -1,44 +1,44 @@
|
|
|
1
|
-
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
2
|
-
import { h, Host } from '@stencil/core';
|
|
3
|
-
export class TttxToolbar {
|
|
4
|
-
constructor() {
|
|
5
|
-
this.border = true;
|
|
6
|
-
}
|
|
7
|
-
render() {
|
|
8
|
-
return (h(Host, { class: this.border ? 'bordered' : '' }, h("slot", { name: 'before' }), h("slot", { name: 'center' }), h("slot", { name: 'after' })));
|
|
9
|
-
}
|
|
10
|
-
static get is() { return "tttx-toolbar"; }
|
|
11
|
-
static get encapsulation() { return "shadow"; }
|
|
12
|
-
static get originalStyleUrls() {
|
|
13
|
-
return {
|
|
14
|
-
"$": ["tttx-toolbar.scss"]
|
|
15
|
-
};
|
|
16
|
-
}
|
|
17
|
-
static get styleUrls() {
|
|
18
|
-
return {
|
|
19
|
-
"$": ["tttx-toolbar.css"]
|
|
20
|
-
};
|
|
21
|
-
}
|
|
22
|
-
static get properties() {
|
|
23
|
-
return {
|
|
24
|
-
"border": {
|
|
25
|
-
"type": "boolean",
|
|
26
|
-
"mutable": false,
|
|
27
|
-
"complexType": {
|
|
28
|
-
"original": "boolean",
|
|
29
|
-
"resolved": "boolean",
|
|
30
|
-
"references": {}
|
|
31
|
-
},
|
|
32
|
-
"required": false,
|
|
33
|
-
"optional": false,
|
|
34
|
-
"docs": {
|
|
35
|
-
"tags": [],
|
|
36
|
-
"text": ""
|
|
37
|
-
},
|
|
38
|
-
"attribute": "border",
|
|
39
|
-
"reflect": false,
|
|
40
|
-
"defaultValue": "true"
|
|
41
|
-
}
|
|
42
|
-
};
|
|
43
|
-
}
|
|
44
|
-
}
|
|
1
|
+
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
2
|
+
import { h, Host } from '@stencil/core';
|
|
3
|
+
export class TttxToolbar {
|
|
4
|
+
constructor() {
|
|
5
|
+
this.border = true;
|
|
6
|
+
}
|
|
7
|
+
render() {
|
|
8
|
+
return (h(Host, { class: this.border ? 'bordered' : '' }, h("slot", { name: 'before' }), h("slot", { name: 'center' }), h("slot", { name: 'after' })));
|
|
9
|
+
}
|
|
10
|
+
static get is() { return "tttx-toolbar"; }
|
|
11
|
+
static get encapsulation() { return "shadow"; }
|
|
12
|
+
static get originalStyleUrls() {
|
|
13
|
+
return {
|
|
14
|
+
"$": ["tttx-toolbar.scss"]
|
|
15
|
+
};
|
|
16
|
+
}
|
|
17
|
+
static get styleUrls() {
|
|
18
|
+
return {
|
|
19
|
+
"$": ["tttx-toolbar.css"]
|
|
20
|
+
};
|
|
21
|
+
}
|
|
22
|
+
static get properties() {
|
|
23
|
+
return {
|
|
24
|
+
"border": {
|
|
25
|
+
"type": "boolean",
|
|
26
|
+
"mutable": false,
|
|
27
|
+
"complexType": {
|
|
28
|
+
"original": "boolean",
|
|
29
|
+
"resolved": "boolean",
|
|
30
|
+
"references": {}
|
|
31
|
+
},
|
|
32
|
+
"required": false,
|
|
33
|
+
"optional": false,
|
|
34
|
+
"docs": {
|
|
35
|
+
"tags": [],
|
|
36
|
+
"text": ""
|
|
37
|
+
},
|
|
38
|
+
"attribute": "border",
|
|
39
|
+
"reflect": false,
|
|
40
|
+
"defaultValue": "true"
|
|
41
|
+
}
|
|
42
|
+
};
|
|
43
|
+
}
|
|
44
|
+
}
|
|
@@ -1,20 +1,20 @@
|
|
|
1
|
-
export default {
|
|
2
|
-
title: 'molecules/Toolbar',
|
|
3
|
-
component: 'tttx-toolbar',
|
|
4
|
-
argTypes: {
|
|
5
|
-
border: {
|
|
6
|
-
control: { type: 'boolean' }
|
|
7
|
-
},
|
|
8
|
-
},
|
|
9
|
-
};
|
|
1
|
+
export default {
|
|
2
|
+
title: 'molecules/Toolbar',
|
|
3
|
+
component: 'tttx-toolbar',
|
|
4
|
+
argTypes: {
|
|
5
|
+
border: {
|
|
6
|
+
control: { type: 'boolean' }
|
|
7
|
+
},
|
|
8
|
+
},
|
|
9
|
+
};
|
|
10
10
|
const Default = ({ border }) => `
|
|
11
11
|
<tttx-toolbar border="${border ? 'true' : 'false'}">
|
|
12
12
|
<span slot="before"><tttx-button design="primary">Before</tttx-button></span>
|
|
13
13
|
<span slot="center"><div style="position: relative; top: -4px;"><tttx-standalone-input placeholder="center" inline required showerrorbubble="false" inputicon="search" /></div></span>
|
|
14
14
|
<span slot="after"><tttx-keyvalue-block horizontal keyvalues='{"Position":"after"}' /></span>
|
|
15
15
|
</tttx-toolbar>
|
|
16
|
-
`;
|
|
17
|
-
export const BasicStringList = Default.bind({});
|
|
18
|
-
BasicStringList.args = {
|
|
19
|
-
border: true
|
|
20
|
-
};
|
|
16
|
+
`;
|
|
17
|
+
export const BasicStringList = Default.bind({});
|
|
18
|
+
BasicStringList.args = {
|
|
19
|
+
border: true
|
|
20
|
+
};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
export default {
|
|
2
|
-
title: 'Foundations/Palette',
|
|
3
|
-
component: 'tttx-palette',
|
|
4
|
-
};
|
|
1
|
+
export default {
|
|
2
|
+
title: 'Foundations/Palette',
|
|
3
|
+
component: 'tttx-palette',
|
|
4
|
+
};
|
|
5
5
|
const Swatch = (colour, name = '') => `
|
|
6
6
|
<div class="swatch">
|
|
7
7
|
<div class="swatchcontent" style="background-color:${colour};">
|
|
@@ -9,7 +9,7 @@ const Swatch = (colour, name = '') => `
|
|
|
9
9
|
</div>
|
|
10
10
|
<p>${name}</p>
|
|
11
11
|
</div>
|
|
12
|
-
`;
|
|
12
|
+
`;
|
|
13
13
|
const Template = () => `
|
|
14
14
|
|
|
15
15
|
<style>
|
|
@@ -84,5 +84,5 @@ ${Swatch('#EA6100', '$dv-high')}
|
|
|
84
84
|
${Swatch('#DC0000', '$dv-very-high')}
|
|
85
85
|
${Swatch('#A20000', '$dv-highest')}
|
|
86
86
|
|
|
87
|
-
`;
|
|
88
|
-
export const Default = Template.bind({});
|
|
87
|
+
`;
|
|
88
|
+
export const Default = Template.bind({});
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
export default {
|
|
2
|
-
title: 'Getting Started/Developer',
|
|
3
|
-
};
|
|
1
|
+
export default {
|
|
2
|
+
title: 'Getting Started/Developer',
|
|
3
|
+
};
|
|
4
4
|
const Template = () => `
|
|
5
5
|
<tttx-typography>
|
|
6
6
|
<p>Quick start guide for developers</p>
|
|
7
7
|
</tttx-typography>
|
|
8
|
-
`;
|
|
9
|
-
export const Default = Template.bind({});
|
|
8
|
+
`;
|
|
9
|
+
export const Default = Template.bind({});
|