docs(textfield): add label variants to chromatic

Author: jenndiaz

components/textfield/stories/textfield.stories.js

@@ -1,5 +1,7 @@
 // Import the component markup template
 import { Template } from "./template";
+import { html } from "lit";
+import isChromatic from "chromatic/isChromatic";
 
 export default {
 	title: "Components/Text field",
@@ -195,13 +197,84 @@ export default {
 	},
 };
 
-export const Default = Template.bind({});
+const TextFieldGroup = ({
+	...args
+}) => {
+	return html`
+		<div style="display: flex; flex-direction: column; gap: 2rem;">
+			${Template({})}
+			${isChromatic() ?
+				Template({
+					displayLabel: true,
+					labelText: "Username",
+				})
+				: null }
+			${isChromatic() ?
+				Template({
+					displayLabel: true,
+					labelText: "Username that is really long and wraps onto a second line",
+					isInvalid: true,
+				})
+				: null }
+			${isChromatic() ?
+				Template({
+					displayLabel: true,
+					labelText: "Username",
+					sideLabel: true,
+					isValid: true,
+					value: "username@reallylongemail.com"
+				})
+				: null }
+		</div>
+	`;
+};
+
+const TextAreaGroup = ({
+}) => {
+	return html`
+		<div style="display: flex; flex-direction: column; gap: 2rem;">
+			${Template({
+				multiline: true,
+				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."
+			})}
+			${isChromatic() ?
+				Template({
+					displayLabel: true,
+					labelText: "Username",
+					multiline: true,
+					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.",
+				})
+				: null }
+			${isChromatic() ?
+				Template({
+					displayLabel: true,
+					labelText: "Username that is really long and wraps onto a second line",
+					isInvalid: true,
+					multiline: true,
+					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.",
+				})
+				: null }
+			${isChromatic() ?
+				Template({
+					displayLabel: true,
+					labelText: "Username",
+					sideLabel: true,
+					isValid: true,
+					multiline: true,
+					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.",
+				})
+				: null }
+		</div>
+	`;
+};
+
+
+export const Default = TextFieldGroup.bind({});
 Default.args = {};
 
-export const TextArea = Template.bind({});
+export const TextArea = TextAreaGroup.bind({});
 TextArea.args = {
 	multiline: true,
 	grows: true,
-	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.",
+	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.",
 };