@ptcwebops/ptcw-design 6.3.36-beta → 6.3.37-beta
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/collection/components/ptc-textfield/ptc-textfield.js +18 -18
- package/dist/collection/stories/Card.stories.js +3 -148
- package/dist/collection/stories/Jumbotron.stories.js +368 -0
- package/dist/collection/stories/Select.stories.js +5 -8
- package/dist/collection/stories/Textfield.stories.js +71 -28
- package/dist/ptcw-design/ptcw-design.css +1 -1
- package/dist/types/components/ptc-textfield/ptc-textfield.d.ts +54 -0
- package/dist/types/components.d.ts +108 -0
- package/package.json +1 -1
- package/readme.md +1 -1
|
@@ -0,0 +1,368 @@
|
|
|
1
|
+
import { html } from 'lit';
|
|
2
|
+
|
|
3
|
+
export default {
|
|
4
|
+
title: 'Molecules/ptc-jumbotron',
|
|
5
|
+
tags: ['autodocs'],
|
|
6
|
+
argTypes: {
|
|
7
|
+
bgSrc: {
|
|
8
|
+
control: 'text',
|
|
9
|
+
description: 'Set this value when the jubmotron type is dark or light',
|
|
10
|
+
defaultValue: { summary: '' },
|
|
11
|
+
},
|
|
12
|
+
bgVideoPosterSrc: {
|
|
13
|
+
control: 'text',
|
|
14
|
+
description: '',
|
|
15
|
+
defaultValue: { summary: '' },
|
|
16
|
+
},
|
|
17
|
+
bgVideoSrc: {
|
|
18
|
+
control: 'text',
|
|
19
|
+
description: 'Set this value when the jumbotron type is dark-video or light-video',
|
|
20
|
+
defaultValue: { summary: '' },
|
|
21
|
+
},
|
|
22
|
+
blogAuthorImage: {
|
|
23
|
+
control: 'text',
|
|
24
|
+
description: '',
|
|
25
|
+
defaultValue: { summary: "''" },
|
|
26
|
+
},
|
|
27
|
+
blogAuthorImageAlt: {
|
|
28
|
+
control: 'text',
|
|
29
|
+
description: '',
|
|
30
|
+
defaultValue: { summary: "''" },
|
|
31
|
+
},
|
|
32
|
+
blogAuthorName: {
|
|
33
|
+
control: 'text',
|
|
34
|
+
description: '',
|
|
35
|
+
defaultValue: { summary: "''" },
|
|
36
|
+
},
|
|
37
|
+
blogAuthorQueryHref: {
|
|
38
|
+
control: 'text',
|
|
39
|
+
description: '',
|
|
40
|
+
defaultValue: { summary: "''" },
|
|
41
|
+
},
|
|
42
|
+
blogAuthorQueryTarget: {
|
|
43
|
+
control: 'text',
|
|
44
|
+
description: '',
|
|
45
|
+
defaultValue: { summary: "''" },
|
|
46
|
+
},
|
|
47
|
+
buttonLocation: {
|
|
48
|
+
control: 'text',
|
|
49
|
+
description: '',
|
|
50
|
+
defaultValue: { summary: 'undefined' },
|
|
51
|
+
},
|
|
52
|
+
buttonTabIndex: { control: '', description: '', defaultValue: { summary: '0' } },
|
|
53
|
+
defer: {
|
|
54
|
+
control: 'boolean',
|
|
55
|
+
description: 'delay loading of video to improve perfomance',
|
|
56
|
+
defaultValue: { summary: 'undefined' },
|
|
57
|
+
},
|
|
58
|
+
gifSrc: {
|
|
59
|
+
control: 'text',
|
|
60
|
+
description: 'set this value when you need a gif on the right side',
|
|
61
|
+
defaultValue: { summary: 'undefined' },
|
|
62
|
+
},
|
|
63
|
+
hasCountdown: {
|
|
64
|
+
control: 'boolean',
|
|
65
|
+
description: 'To add a countdown, trun this attribute on and add <ptc-countdown> after cta buttons',
|
|
66
|
+
defaultValue: { summary: 'false' },
|
|
67
|
+
},
|
|
68
|
+
hasCtaSlot: {
|
|
69
|
+
control: 'boolean',
|
|
70
|
+
description: '',
|
|
71
|
+
defaultValue: { summary: 'undefined' },
|
|
72
|
+
},
|
|
73
|
+
hasPopupVideo: {
|
|
74
|
+
control: 'boolean',
|
|
75
|
+
description: 'Set this value to true when you need a pop up video on the right side, add ptc-svg-btn & ptc-modal for the play button and video',
|
|
76
|
+
defaultValue: { summary: 'false' },
|
|
77
|
+
},
|
|
78
|
+
isHomepage: {
|
|
79
|
+
control: 'boolean',
|
|
80
|
+
description: '',
|
|
81
|
+
defaultValue: { summary: 'false' },
|
|
82
|
+
},
|
|
83
|
+
isIframe: {
|
|
84
|
+
control: 'boolean',
|
|
85
|
+
description: '',
|
|
86
|
+
defaultValue: { summary: 'false' },
|
|
87
|
+
},
|
|
88
|
+
isTransitioning: {
|
|
89
|
+
control: 'boolean',
|
|
90
|
+
description: '',
|
|
91
|
+
defaultValue: { summary: 'undefined' },
|
|
92
|
+
},
|
|
93
|
+
jumbotronType: {
|
|
94
|
+
control: 'text',
|
|
95
|
+
description: '',
|
|
96
|
+
defaultValue: { summary: 'light' },
|
|
97
|
+
},
|
|
98
|
+
logo: {
|
|
99
|
+
control: 'text',
|
|
100
|
+
description: 'Optional - set a logo by adding an URL to this property',
|
|
101
|
+
},
|
|
102
|
+
pauseButtonTitle: {
|
|
103
|
+
control: 'text',
|
|
104
|
+
description: 'paly button text when bg-video-src has a value',
|
|
105
|
+
defaultValue: { summary: 'undefined' },
|
|
106
|
+
},
|
|
107
|
+
playButtonTitle: {
|
|
108
|
+
control: 'text',
|
|
109
|
+
description: 'paly button text when bg-video-src has a value',
|
|
110
|
+
defaultValue: { summary: 'undefined' },
|
|
111
|
+
},
|
|
112
|
+
pngImgStyles: {
|
|
113
|
+
control: 'text',
|
|
114
|
+
description: '',
|
|
115
|
+
defaultValue: { summary: "''" },
|
|
116
|
+
},
|
|
117
|
+
pngSrc: {
|
|
118
|
+
control: 'text',
|
|
119
|
+
description: '',
|
|
120
|
+
defaultValue: { summary: 'undefined' },
|
|
121
|
+
},
|
|
122
|
+
styles: {
|
|
123
|
+
control: 'text',
|
|
124
|
+
description: '(optional) Injected CSS styles',
|
|
125
|
+
defaultValue: { summary: 'undefined' },
|
|
126
|
+
},
|
|
127
|
+
subTitle: {
|
|
128
|
+
control: 'text',
|
|
129
|
+
description: '',
|
|
130
|
+
defaultValue: {
|
|
131
|
+
summary: 'Lorem Ipsum Dolor Sit Amet Consectetur Adipiscing Lorem Ipsum Dolor Sit Amet Consectetur Adipisci Lorem Ipsum Dolor Sit Amet',
|
|
132
|
+
},
|
|
133
|
+
},
|
|
134
|
+
},
|
|
135
|
+
};
|
|
136
|
+
|
|
137
|
+
const LightJumbotronTemplate = args => {
|
|
138
|
+
return html`<ptc-para>Set the breadcrumb, main title, cta buttons through correct slot names, please click "show code" for details.</ptc-para>
|
|
139
|
+
<ptc-jumbotron
|
|
140
|
+
jumbotron-type=${args.jumbotronType}
|
|
141
|
+
has-countdown=${args.hasCountdown}
|
|
142
|
+
sub-title=${args.subTitle}
|
|
143
|
+
bg-src=${args.bgSrc}
|
|
144
|
+
logo=${args.logo}
|
|
145
|
+
bg-video-src=${args.bgVideoSrc}
|
|
146
|
+
play-button-title=${args.playButtonTitle}
|
|
147
|
+
pause-button-title=${args.pauseButtonTitle}>
|
|
148
|
+
has-popup-video=${args.hasPopupVideo}
|
|
149
|
+
>
|
|
150
|
+
<ptc-breadcrumb slot="breadcrumb" color="primary-gray">
|
|
151
|
+
<list-item list-type="breadcrumb" link-href="https://www.ptc.com/contact-us" color="primary-gray"> PLM Video Hub </list-item>
|
|
152
|
+
<list-item list-type="breadcrumb" color="primary-gray"> Current Page </list-item>
|
|
153
|
+
</ptc-breadcrumb>
|
|
154
|
+
<ptc-title
|
|
155
|
+
slot="main-title"
|
|
156
|
+
type="h1"
|
|
157
|
+
upperline="no-upperline"
|
|
158
|
+
title-size="xxxx-large"
|
|
159
|
+
title-height="densest"
|
|
160
|
+
title-weight="w-8"
|
|
161
|
+
title-margin="margin-flush"
|
|
162
|
+
text-align="left"
|
|
163
|
+
title-color="gray"
|
|
164
|
+
>
|
|
165
|
+
Sed ut perspiciatis unde omnis iste natus
|
|
166
|
+
</ptc-title>
|
|
167
|
+
<ptc-button slot="j-cta" type="link" color="ptc-primary" link-href="https://www.ptc.com" target="_blank"> CTA 1 </ptc-button>
|
|
168
|
+
<ptc-button slot="j-cta" type="link" color="ptc-secondary" link-href="https://www.ptc.com" target="_blank"> CTA 2 </ptc-button>
|
|
169
|
+
</ptc-jumbotron>`;
|
|
170
|
+
};
|
|
171
|
+
|
|
172
|
+
export const Example1 = LightJumbotronTemplate.bind({});
|
|
173
|
+
|
|
174
|
+
Example1.args = {
|
|
175
|
+
bgSrc: 'https://images.unsplash.com/photo-1675285972028-45dc2add07be?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2Nzc3ODk2NTE&ixlib=rb-4.0.3&q=80',
|
|
176
|
+
bgVideoPosterSrc: '',
|
|
177
|
+
bgVideoSrc: '',
|
|
178
|
+
blogAuthorImage: "''",
|
|
179
|
+
blogAuthorImageAlt: "''",
|
|
180
|
+
blogAuthorName: "''",
|
|
181
|
+
blogAuthorQueryHref: "''",
|
|
182
|
+
blogAuthorQueryTarget: "''",
|
|
183
|
+
buttonLocation: 'undefined',
|
|
184
|
+
buttonTabIndex: '0',
|
|
185
|
+
defer: 'undefined',
|
|
186
|
+
gifSrc: 'undefined',
|
|
187
|
+
hasCountdown: 'false',
|
|
188
|
+
hasCtaSlot: 'undefined',
|
|
189
|
+
hasPopupVideo: 'false',
|
|
190
|
+
isHomepage: 'false',
|
|
191
|
+
isIframe: 'false',
|
|
192
|
+
isTransitioning: 'undefined',
|
|
193
|
+
jumbotronType: 'light',
|
|
194
|
+
logo: "https://ptc-p-001.sitecorecontenthub.cloud/api/public/content/4699dab90e6f476b8a70902b58d7d3db?h=827&w=1550&la=en",
|
|
195
|
+
pauseButtonTitle: '',
|
|
196
|
+
playButtonTitle: '',
|
|
197
|
+
pngImgStyles: "''",
|
|
198
|
+
pngSrc: 'undefined',
|
|
199
|
+
styles: 'undefined',
|
|
200
|
+
subTitle: 'totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo',
|
|
201
|
+
};
|
|
202
|
+
|
|
203
|
+
const DarkJumbotronTemplate = args => {
|
|
204
|
+
return html`<ptc-para>Set the breadcrumb, main title, cta buttons through correct slot names, please click "show code" for details.</ptc-para>
|
|
205
|
+
<ptc-jumbotron
|
|
206
|
+
jumbotron-type=${args.jumbotronType}
|
|
207
|
+
has-countdown=${args.hasCountdown}
|
|
208
|
+
sub-title=${args.subTitle}
|
|
209
|
+
bg-src=${args.bgSrc}
|
|
210
|
+
logo=${args.logo}
|
|
211
|
+
>
|
|
212
|
+
<ptc-breadcrumb slot="breadcrumb" color="white">
|
|
213
|
+
<list-item list-type="breadcrumb" link-href="https://www.ptc.com/contact-us" color="primary-gray"> PLM Video Hub </list-item>
|
|
214
|
+
<list-item list-type="breadcrumb" color="primary-gray"> Current Page </list-item>
|
|
215
|
+
</ptc-breadcrumb>
|
|
216
|
+
<ptc-title slot="main-title" type="h1" upperline="no-upperline" title-size="xxxx-large" title-height="densest"
|
|
217
|
+
title-weight="w-8" title-margin="margin-flush" text-align="left" title-color="gray-1">Sed ut perspiciatis unde omnis iste natus
|
|
218
|
+
</ptc-title>
|
|
219
|
+
<ptc-button slot="j-cta" type="link" color="ptc-primary" link-href="https://www.ptc.com" target="_blank"> CTA 1 </ptc-button>
|
|
220
|
+
<ptc-button slot="j-cta" type="link" color="ptc-secondary" link-href="https://www.ptc.com" target="_blank"> CTA 2 </ptc-button>
|
|
221
|
+
</ptc-jumbotron>`;
|
|
222
|
+
};
|
|
223
|
+
|
|
224
|
+
export const Example2 = DarkJumbotronTemplate.bind({});
|
|
225
|
+
|
|
226
|
+
Example2.args = {
|
|
227
|
+
bgSrc: 'https://images.unsplash.com/photo-1675285972028-45dc2add07be?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2Nzc3ODk2NTE&ixlib=rb-4.0.3&q=80',
|
|
228
|
+
bgVideoPosterSrc: 'undefined',
|
|
229
|
+
bgVideoSrc: 'undefined',
|
|
230
|
+
blogAuthorImage: "''",
|
|
231
|
+
blogAuthorImageAlt: "''",
|
|
232
|
+
blogAuthorName: "''",
|
|
233
|
+
blogAuthorQueryHref: "''",
|
|
234
|
+
blogAuthorQueryTarget: "''",
|
|
235
|
+
buttonLocation: 'undefined',
|
|
236
|
+
buttonTabIndex: '0',
|
|
237
|
+
defer: 'undefined',
|
|
238
|
+
gifSrc: 'undefined',
|
|
239
|
+
hasCountdown: 'false',
|
|
240
|
+
hasCtaSlot: 'undefined',
|
|
241
|
+
hasPopupVideo: 'false',
|
|
242
|
+
isHomepage: 'false',
|
|
243
|
+
isIframe: 'false',
|
|
244
|
+
isTransitioning: 'undefined',
|
|
245
|
+
jumbotronType: 'dark',
|
|
246
|
+
logo: "",
|
|
247
|
+
pauseButtonTitle: 'undefined',
|
|
248
|
+
playButtonTitle: 'undefined',
|
|
249
|
+
pngImgStyles: "''",
|
|
250
|
+
pngSrc: 'undefined',
|
|
251
|
+
styles: 'undefined',
|
|
252
|
+
subTitle: 'totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo',
|
|
253
|
+
};
|
|
254
|
+
|
|
255
|
+
const TextJumbotronTemplate = args => {
|
|
256
|
+
return html`
|
|
257
|
+
<ptc-jumbotron jumbotron-type=${args.jumbotronType}
|
|
258
|
+
sub-title=${args.subTitle}>
|
|
259
|
+
<ptc-breadcrumb slot="breadcrumb" color="primary-gray" position="center" styles=":host{margin-top: var(--ptc-element-spacing-06)!important;align-items: baseline;}">
|
|
260
|
+
<list-item list-type="breadcrumb" link-href="https://www.ptc.com/contact-us" color="primary-gray" styles=":host(.breadcrumb) li{text-transform: uppercase;}">
|
|
261
|
+
PLM TEst
|
|
262
|
+
</list-item>
|
|
263
|
+
<list-item list-type="breadcrumb" color="primary-gray" styles=":host(.breadcrumb) li{ text-transform: uppercase;}">
|
|
264
|
+
Connecting Engineering and Manufacturing PPC
|
|
265
|
+
</list-item>
|
|
266
|
+
</ptc-breadcrumb>
|
|
267
|
+
<ptc-title slot="main-title" type="h1" upperline="no-upperline" title-size="xxxx-large" title-height="densest"
|
|
268
|
+
title-weight="w-8" title-margin="margin-flush" text-align="center" title-color="gray">
|
|
269
|
+
<!-- test align = center for text -->
|
|
270
|
+
Sed ut perspiciatis unde omnis iste natus totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et
|
|
271
|
+
</ptc-title>
|
|
272
|
+
<ptc-button slot="j-cta" type="link" color="ptc-primary" link-href="https://www.ptc.com" target="_blank">
|
|
273
|
+
CTA 1
|
|
274
|
+
</ptc-button>
|
|
275
|
+
<ptc-button slot="j-cta" type="link" color="ptc-secondary" link-href="https://www.ptc.com" target="_blank">
|
|
276
|
+
CTA 2
|
|
277
|
+
</ptc-button>
|
|
278
|
+
</ptc-jumbotron>`;
|
|
279
|
+
};
|
|
280
|
+
|
|
281
|
+
export const Example3 = TextJumbotronTemplate.bind({});
|
|
282
|
+
|
|
283
|
+
Example3.args = {
|
|
284
|
+
bgSrc: 'https://images.unsplash.com/photo-1675285972028-45dc2add07be?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2Nzc3ODk2NTE&ixlib=rb-4.0.3&q=80',
|
|
285
|
+
bgVideoPosterSrc: 'undefined',
|
|
286
|
+
bgVideoSrc: 'undefined',
|
|
287
|
+
blogAuthorImage: "''",
|
|
288
|
+
blogAuthorImageAlt: "''",
|
|
289
|
+
blogAuthorName: "''",
|
|
290
|
+
blogAuthorQueryHref: "''",
|
|
291
|
+
blogAuthorQueryTarget: "''",
|
|
292
|
+
buttonLocation: 'undefined',
|
|
293
|
+
buttonTabIndex: '0',
|
|
294
|
+
defer: 'undefined',
|
|
295
|
+
gifSrc: 'undefined',
|
|
296
|
+
hasCountdown: 'false',
|
|
297
|
+
hasCtaSlot: 'undefined',
|
|
298
|
+
hasPopupVideo: 'false',
|
|
299
|
+
isHomepage: 'false',
|
|
300
|
+
isIframe: 'false',
|
|
301
|
+
isTransitioning: 'undefined',
|
|
302
|
+
jumbotronType: 'text',
|
|
303
|
+
logo: "''",
|
|
304
|
+
pauseButtonTitle: 'undefined',
|
|
305
|
+
playButtonTitle: 'undefined',
|
|
306
|
+
pngImgStyles: "''",
|
|
307
|
+
pngSrc: 'undefined',
|
|
308
|
+
styles: 'undefined',
|
|
309
|
+
subTitle: 'totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo',
|
|
310
|
+
};
|
|
311
|
+
|
|
312
|
+
const VideoJumbotronTemplate = args => {
|
|
313
|
+
return html`
|
|
314
|
+
<ptc-jumbotron jumbotron-type=${args.jumbotronType}
|
|
315
|
+
sub-title=${args.subTitle}
|
|
316
|
+
bg-video-src=${args.bgVideoSrc} play-button-title=${args.playButtonTitle}
|
|
317
|
+
pause-button-title=${args.pauseButtonTitle}>
|
|
318
|
+
|
|
319
|
+
<ptc-breadcrumb slot="breadcrumb" color="white" is-dark-mode>
|
|
320
|
+
<list-item list-type="breadcrumb" link-href="https://www.ptc.com/contact-us" color="light-gray">
|
|
321
|
+
PLM Video Hub
|
|
322
|
+
</list-item>
|
|
323
|
+
<list-item list-type="breadcrumb" color="light-gray">
|
|
324
|
+
Current Page
|
|
325
|
+
</list-item>
|
|
326
|
+
</ptc-breadcrumb>
|
|
327
|
+
<ptc-title slot="main-title" type="h1" upperline="no-upperline" title-size="xxxx-large" title-height="densest"
|
|
328
|
+
title-weight="w-8" title-margin="margin-flush" text-align="left" title-color="gray-1">Sed ut perspiciatis unde omnis iste natus
|
|
329
|
+
</ptc-title>
|
|
330
|
+
<ptc-button slot="j-cta" type="link" color="ptc-secondary" link-href="https://www.ptc.com" target="_blank" dark-focus-state>
|
|
331
|
+
CTA 1
|
|
332
|
+
</ptc-button>
|
|
333
|
+
<ptc-button slot="j-cta" type="link" color="ptc-secondary" link-href="https://www.ptc.com" target="_blank" dark-focus-state>
|
|
334
|
+
CTA 2
|
|
335
|
+
</ptc-button>
|
|
336
|
+
</ptc-jumbotron>`;
|
|
337
|
+
};
|
|
338
|
+
|
|
339
|
+
export const Example4 = VideoJumbotronTemplate.bind({});
|
|
340
|
+
|
|
341
|
+
Example4.args = {
|
|
342
|
+
bgSrc: 'undefined',
|
|
343
|
+
bgVideoPosterSrc: 'undefined',
|
|
344
|
+
bgVideoSrc: 'https://www.ptc.com/-/media/Videos/wind-turbine.mp4',
|
|
345
|
+
blogAuthorImage: "''",
|
|
346
|
+
blogAuthorImageAlt: "''",
|
|
347
|
+
blogAuthorName: "''",
|
|
348
|
+
blogAuthorQueryHref: "''",
|
|
349
|
+
blogAuthorQueryTarget: "''",
|
|
350
|
+
buttonLocation: 'undefined',
|
|
351
|
+
buttonTabIndex: '0',
|
|
352
|
+
defer: 'undefined',
|
|
353
|
+
gifSrc: 'undefined',
|
|
354
|
+
hasCountdown: 'false',
|
|
355
|
+
hasCtaSlot: 'undefined',
|
|
356
|
+
hasPopupVideo: 'false',
|
|
357
|
+
isHomepage: 'false',
|
|
358
|
+
isIframe: 'false',
|
|
359
|
+
isTransitioning: 'undefined',
|
|
360
|
+
jumbotronType: 'dark-video',
|
|
361
|
+
logo: "",
|
|
362
|
+
pauseButtonTitle: 'pause text',
|
|
363
|
+
playButtonTitle: 'play text',
|
|
364
|
+
pngImgStyles: "''",
|
|
365
|
+
pngSrc: 'undefined',
|
|
366
|
+
styles: 'undefined',
|
|
367
|
+
subTitle: 'totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo',
|
|
368
|
+
};
|
|
@@ -6,27 +6,27 @@ export default {
|
|
|
6
6
|
argTypes: {
|
|
7
7
|
disabled: {
|
|
8
8
|
control: 'boolean',
|
|
9
|
-
description: '',
|
|
9
|
+
description: 'Disable the field?',
|
|
10
10
|
defaultValue: { summary: 'false' },
|
|
11
11
|
},
|
|
12
12
|
helpertext: {
|
|
13
13
|
control: 'text',
|
|
14
|
-
description: '',
|
|
14
|
+
description: 'Help text',
|
|
15
15
|
defaultValue: { summary: 'Please select a value!' },
|
|
16
16
|
},
|
|
17
17
|
isRequired: {
|
|
18
18
|
control: 'boolean',
|
|
19
|
-
description: '',
|
|
19
|
+
description: 'Is this field required?',
|
|
20
20
|
defaultValue: { summary: 'true' },
|
|
21
21
|
},
|
|
22
22
|
label: {
|
|
23
23
|
control: 'text',
|
|
24
|
-
description: '',
|
|
24
|
+
description: 'Label text',
|
|
25
25
|
defaultValue: { summary: 'undefined' },
|
|
26
26
|
},
|
|
27
27
|
name: {
|
|
28
28
|
control: 'text',
|
|
29
|
-
description: '',
|
|
29
|
+
description: 'Name attribute',
|
|
30
30
|
defaultValue: { summary: 'undefined' },
|
|
31
31
|
},
|
|
32
32
|
ptcDataEloquaName: {
|
|
@@ -34,7 +34,6 @@ export default {
|
|
|
34
34
|
description: 'Eloqua Data',
|
|
35
35
|
defaultValue: { summary: 'undefined' },
|
|
36
36
|
},
|
|
37
|
-
selectedValue: { control: 'text', description: '', defaultValue: { summary: '' } },
|
|
38
37
|
},
|
|
39
38
|
};
|
|
40
39
|
|
|
@@ -46,7 +45,6 @@ const Template = args => {
|
|
|
46
45
|
label=${args.label}
|
|
47
46
|
name=${args.name}
|
|
48
47
|
ptc-data-eloqua-name=${args.ptcDataEloquaName}
|
|
49
|
-
selected-value=${args.selectedValue}
|
|
50
48
|
>
|
|
51
49
|
<ul class="mdc-list">
|
|
52
50
|
<li class="mdc-list-item" data-value="">
|
|
@@ -77,5 +75,4 @@ Example.args = {
|
|
|
77
75
|
label: 'Lable Name',
|
|
78
76
|
name: 'examplename',
|
|
79
77
|
ptcDataEloquaName: 'data-eloqua-value',
|
|
80
|
-
selectedValue: '',
|
|
81
78
|
};
|
|
@@ -4,79 +4,122 @@ export default {
|
|
|
4
4
|
title: 'Atoms/ptc-textfield',
|
|
5
5
|
tags: [ 'autodocs' ],
|
|
6
6
|
argTypes: {
|
|
7
|
+
alertText: {
|
|
8
|
+
control: 'text',
|
|
9
|
+
description: 'Alert text (blue)',
|
|
10
|
+
defaultValue: { summary: '' }
|
|
11
|
+
},
|
|
12
|
+
alertTextContent: {
|
|
13
|
+
control: 'text',
|
|
14
|
+
description: 'Alert text content - below alert text (grey)',
|
|
15
|
+
defaultValue: { summary: '' }
|
|
16
|
+
},
|
|
7
17
|
disabled: {
|
|
8
18
|
control: 'boolean',
|
|
9
|
-
description: '',
|
|
19
|
+
description: 'Disable the field?',
|
|
10
20
|
defaultValue: { summary: 'false' }
|
|
11
21
|
},
|
|
12
22
|
fieldId: {
|
|
13
23
|
control: 'text',
|
|
14
|
-
description: '',
|
|
15
|
-
defaultValue: { summary: '
|
|
24
|
+
description: 'ID',
|
|
25
|
+
defaultValue: { summary: '' }
|
|
16
26
|
},
|
|
17
|
-
|
|
27
|
+
fieldName: {
|
|
18
28
|
control: 'text',
|
|
19
|
-
description: '',
|
|
20
|
-
defaultValue: { summary: '
|
|
29
|
+
description: 'input "name" value. e.g.: phone, email, firstname, lastname',
|
|
30
|
+
defaultValue: { summary: 'email' }
|
|
31
|
+
},
|
|
32
|
+
helpertext: { control: 'text', description: 'Validation text (red)', defaultValue: { summary: '' } },
|
|
33
|
+
ignoreBlindSubmit: {
|
|
34
|
+
control: 'boolean',
|
|
35
|
+
description: 'Ignore Blind Submit?',
|
|
36
|
+
defaultValue: { summary: 'false' }
|
|
21
37
|
},
|
|
22
|
-
|
|
38
|
+
infoText: {
|
|
39
|
+
control: 'text',
|
|
40
|
+
description: 'Info Text (black)',
|
|
41
|
+
defaultValue: { summary: '' }
|
|
42
|
+
},
|
|
43
|
+
// inputValue: { control: 'text', description: '', defaultValue: { summary: '' } },
|
|
23
44
|
labelText: {
|
|
24
45
|
control: 'text',
|
|
25
|
-
description: '',
|
|
46
|
+
description: 'Label Text',
|
|
26
47
|
defaultValue: { summary: 'Email' }
|
|
27
48
|
},
|
|
28
|
-
|
|
49
|
+
placeholderText: {
|
|
29
50
|
control: 'text',
|
|
30
|
-
description: '',
|
|
31
|
-
defaultValue: { summary: '
|
|
51
|
+
description: 'Place holder Text',
|
|
52
|
+
defaultValue: { summary: '' }
|
|
32
53
|
},
|
|
33
54
|
ptcDataEloquaName: {
|
|
34
55
|
control: 'text',
|
|
35
|
-
description: '',
|
|
36
|
-
defaultValue: { summary: '
|
|
56
|
+
description: 'Eloqua Data Name (for the eloqua)',
|
|
57
|
+
defaultValue: { summary: '' }
|
|
58
|
+
},
|
|
59
|
+
ptcDataTargetEloquaName: {
|
|
60
|
+
control: 'text',
|
|
61
|
+
description: 'Eloqua Target Data Name (for the eloqua)',
|
|
62
|
+
defaultValue: { summary: '' }
|
|
37
63
|
},
|
|
38
64
|
ptcMaxLength: {
|
|
39
|
-
control: '',
|
|
40
|
-
description: '',
|
|
41
|
-
defaultValue: { summary: '
|
|
65
|
+
control: 'number',
|
|
66
|
+
description: 'Text counter limit',
|
|
67
|
+
defaultValue: { summary: '' }
|
|
42
68
|
},
|
|
43
69
|
required: {
|
|
44
70
|
control: 'boolean',
|
|
45
|
-
description: '',
|
|
71
|
+
description: 'Is this a mandatory field?',
|
|
46
72
|
defaultValue: { summary: 'true' }
|
|
47
73
|
},
|
|
74
|
+
styles: {
|
|
75
|
+
control: 'text',
|
|
76
|
+
description: 'Inject styles for customization',
|
|
77
|
+
defaultValue: { summary: '' }
|
|
78
|
+
},
|
|
48
79
|
type: {
|
|
49
80
|
control: 'text',
|
|
50
|
-
description: 'button, email, file and etc. ',
|
|
81
|
+
description: 'text, button, email, file and etc. This value triggers different validation',
|
|
51
82
|
defaultValue: { summary: 'text' }
|
|
52
83
|
}
|
|
53
84
|
}
|
|
54
85
|
};
|
|
55
86
|
|
|
56
87
|
const Template = args => { return html `<ptc-textfield
|
|
88
|
+
alert-text=${args.alertText}
|
|
89
|
+
alert-text-content=${args.alertTextContent}
|
|
57
90
|
disabled=${args.disabled}
|
|
58
91
|
field-id=${args.fieldId}
|
|
92
|
+
field-name=${args.fieldName}
|
|
59
93
|
helpertext=${args.helpertext}
|
|
60
|
-
|
|
94
|
+
ignore-blind-submit=${args.ignoreBlindSubmit}
|
|
95
|
+
info-text=${args.infoText}
|
|
61
96
|
label-text=${args.labelText}
|
|
62
|
-
|
|
97
|
+
placeholder-text=${args.placeholderText}
|
|
63
98
|
ptc-data-eloqua-name=${args.ptcDataEloquaName}
|
|
99
|
+
ptc-data-target-eloqua-name=${args.ptcDataTargetEloquaName}
|
|
64
100
|
ptc-max-length=${args.ptcMaxLength}
|
|
65
101
|
required=${args.required}
|
|
102
|
+
styles=${args.styles}
|
|
66
103
|
type=${args.type}
|
|
67
104
|
></ptc-textfield>`;}
|
|
68
105
|
|
|
69
106
|
export const Example = Template.bind({});
|
|
70
107
|
|
|
71
108
|
Example.args = {
|
|
109
|
+
alertText: 'Alert text',
|
|
110
|
+
alertTextContent: 'Alert text content',
|
|
72
111
|
disabled: 'false',
|
|
73
|
-
fieldId: '
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
112
|
+
fieldId: 'ID',
|
|
113
|
+
fieldName: 'company field',
|
|
114
|
+
helpertext: 'Helper text',
|
|
115
|
+
ignoreBlindSubmit: 'false',
|
|
116
|
+
infoText: 'Info text',
|
|
117
|
+
labelText: 'Lable Name',
|
|
118
|
+
placeholderText: 'Place hoder text goes here',
|
|
119
|
+
ptcDataEloquaName: 'C_EmailAddress',
|
|
120
|
+
ptcDataTargetEloquaName: '',
|
|
121
|
+
ptcMaxLength: '',
|
|
80
122
|
required: 'true',
|
|
81
|
-
|
|
123
|
+
styles: '',
|
|
124
|
+
type: 'text'
|
|
82
125
|
}
|