Skip to content

Commit 23761bd

Browse files
rise-erpeldingrise-erpelding
committed
docs(textfield): add chromatic coverage
- add test cases to chromatic - eliminates textarea story - moves templating to template.js
1 parent cf34819 commit 23761bd

File tree

2 files changed

+137
-76
lines changed

2 files changed

+137
-76
lines changed

‎components/textfield/stories/template.js‎

Lines changed: 135 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import { Template as FieldLabel } from "@spectrum-css/fieldlabel/stories/templat
99
import { Template as HelpText } from "@spectrum-css/helptext/stories/template.js";
1010
import { Template as Icon } from "@spectrum-css/icon/stories/template.js";
1111
import { Template as ProgressCircle } from "@spectrum-css/progresscircle/stories/template.js";
12+
import { Template as Typography } from "@spectrum-css/typography/stories/template.js";
1213

1314
import "../index.css";
1415

@@ -172,3 +173,137 @@ export const Template = ({
172173
</div>
173174
`;
174175
};
176+
177+
const renderDataWithHeading = (data) => html`
178+
${data.map(item => html`
179+
<div>
180+
${item.testHeading ? html`
181+
<div
182+
style=${styleMap({
183+
marginBottom: "10px",
184+
})}
185+
>
186+
${Typography({
187+
semantics: "detail",
188+
size: "l",
189+
content: [item.testHeading]
190+
})}
191+
</div>
192+
` : ""}
193+
${Template({...item})}
194+
</div>
195+
`)}
196+
`;
197+
198+
const Variants = ({ testData, stateData }) => (args) => html`
199+
<div style="display: flex; flex-direction: column; gap: 32px;">
200+
${window.isChromatic() ?
201+
html`
202+
${renderDataWithHeading(testData)}
203+
${renderDataWithHeading(stateData)}
204+
`
205+
: html`
206+
${Template({...args})}
207+
${Template({
208+
...args,
209+
multiline: true,
210+
})}
211+
`
212+
}
213+
</div>
214+
`;
215+
216+
export const TextFieldGroup = Variants({
217+
Template,
218+
testData: [{
219+
},
220+
{
221+
testHeading: "With field label",
222+
displayLabel: true,
223+
labelText: "Username",
224+
},
225+
{
226+
testHeading: "With side label",
227+
displayLabel: true,
228+
labelText: "Username",
229+
labelPosition: "side",
230+
},
231+
{
232+
testHeading: "With value",
233+
displayLabel: true,
234+
labelText: "Username",
235+
value: "username@reallylongemail.com"
236+
},
237+
{
238+
testHeading: "With placeholder",
239+
placeholder: "Username",
240+
},
241+
{
242+
testHeading: "With help text",
243+
displayLabel: true,
244+
labelText: "Username",
245+
helpText: "Please enter a username between 8 and 16 characters",
246+
},
247+
{
248+
testHeading: "Text area",
249+
multiline: true,
250+
},
251+
{
252+
testHeading: "Text area with label",
253+
displayLabel: true,
254+
labelText: "Username",
255+
multiline: true,
256+
},
257+
{
258+
testHeading: "Text area with value",
259+
displayLabel: true,
260+
labelText: "Username",
261+
multiline: true,
262+
value: "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.",
263+
},
264+
{
265+
testHeading: "Text area with character count",
266+
displayLabel: true,
267+
labelText: "Comments",
268+
multiline: true,
269+
hasCharacterCount: true,
270+
characterCount: 400,
271+
value: "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.",
272+
}
273+
],
274+
stateData: [
275+
{
276+
testHeading: "Invalid",
277+
isInvalid: true,
278+
},
279+
{
280+
testHeading: "Valid",
281+
isValid: true,
282+
},
283+
{
284+
testHeading: "Focused",
285+
isFocused: true,
286+
},
287+
{
288+
testHeading: "Keyboard focused",
289+
isKeyboardFocused: true,
290+
},
291+
{
292+
testHeading: "Disabled",
293+
isDisabled: true,
294+
},
295+
{
296+
testHeading: "Required",
297+
isRequired: true,
298+
},
299+
{
300+
testHeading: "Read-only",
301+
value: "username@reallylongemail.com",
302+
isReadOnly: true,
303+
},
304+
{
305+
testHeading: "Loading",
306+
isLoading: true,
307+
}
308+
],
309+
});

‎components/textfield/stories/textfield.stories.js‎

Lines changed: 2 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
1-
import { html } from "lit";
2-
import { Template } from "./template";
1+
import { TextFieldGroup } from "./template";
32

43
/**
54
* Text fields are text boxes that allow users to input custom text entries with a keyboard. Various decorations can be displayed around the field to communicate the entry requirements.
@@ -114,6 +113,7 @@ export default {
114113
},
115114
multiline: {
116115
name: "Multiline",
116+
description: "Turns text field into textarea",
117117
type: { name: "boolean" },
118118
table: {
119119
type: { summary: "boolean" },
@@ -237,79 +237,5 @@ export default {
237237
},
238238
};
239239

240-
const TextFieldGroup = (args) => html`
241-
<div style="display: flex; flex-direction: column; gap: 32px;">
242-
${Template({
243-
...args
244-
})}
245-
${window.isChromatic() ?
246-
Template({
247-
displayLabel: true,
248-
labelText: "Username",
249-
})
250-
: html`` }
251-
${window.isChromatic() ?
252-
Template({
253-
displayLabel: true,
254-
labelText: "Username that is really long and wraps onto a second line",
255-
isInvalid: true,
256-
})
257-
: html`` }
258-
${window.isChromatic() ?
259-
Template({
260-
displayLabel: true,
261-
labelText: "Username",
262-
labelPosition: "side",
263-
isValid: true,
264-
value: "username@reallylongemail.com"
265-
})
266-
: html`` }
267-
</div>
268-
`;
269-
270-
const TextAreaGroup = (args) => html`
271-
<div style="display: flex; flex-direction: column; gap: 32px;">
272-
${Template({
273-
...args,
274-
multiline: true,
275-
value: "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt."
276-
})}
277-
${window.isChromatic() ?
278-
Template({
279-
displayLabel: true,
280-
labelText: "Username",
281-
multiline: true,
282-
value: "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.",
283-
})
284-
: null }
285-
${window.isChromatic() ?
286-
Template({
287-
displayLabel: true,
288-
labelText: "Username that is really long and wraps onto a second line",
289-
isInvalid: true,
290-
multiline: true,
291-
value: "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.",
292-
})
293-
: null }
294-
${window.isChromatic() ?
295-
Template({
296-
displayLabel: true,
297-
labelText: "Username",
298-
labelPosition: "side",
299-
isValid: true,
300-
multiline: true,
301-
value: "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.",
302-
})
303-
: null }
304-
</div>
305-
`;
306-
307240
export const Default = TextFieldGroup.bind({});
308241
Default.args = {};
309-
310-
export const TextArea = TextAreaGroup.bind({});
311-
TextArea.args = {
312-
multiline: true,
313-
grows: true,
314-
value: "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.",
315-
};

0 commit comments

Comments
 (0)