From 45cb1c269c97122a67c18d96e12b38826c7fa239 Mon Sep 17 00:00:00 2001 From: cg-julian-taylor <107050226+cg-julian-taylor@users.noreply.github.com> Date: Tue, 20 Dec 2022 15:47:08 +0000 Subject: [PATCH] Correct single checkbox stories (#382) * feat: correct Stories * feat: correct Stories --- stories/FormCheckbox/Styled.stories.mdx | 383 +++++++++++++++++------- 1 file changed, 279 insertions(+), 104 deletions(-) diff --git a/stories/FormCheckbox/Styled.stories.mdx b/stories/FormCheckbox/Styled.stories.mdx index 760615ee..d106f929 100644 --- a/stories/FormCheckbox/Styled.stories.mdx +++ b/stories/FormCheckbox/Styled.stories.mdx @@ -22,13 +22,16 @@ In this section we're using the formCheckbox component providing the GovUk style return (
-
+
+### GDS styled checkbox preselected + + + + {() => { + const [value, setValue] = React.useState(''); + const [checked, setChecked] = React.useState(false); + const handleChange = (event) => { + setValue(event.currentTarget.value); + setChecked(!checked); + }; + return ( +
+
+
+ +
+
+
+ ); + }} + + + + +### GDS styled checkbox disabled + + + + {() => { + const [value, setValue] = React.useState(''); + const [checked, setChecked] = React.useState(false); + const handleChange = (event) => { + setValue(event.currentTarget.value); + setChecked(!checked); + }; + return ( +
+
+
+ +
+
+
+ ); + }} + + + ### GDS styled checkbox with hint @@ -60,28 +150,86 @@ In this section we're using the formCheckbox component providing the GovUk style setChecked(!checked); }; return ( - +
+
+
+ +
+
+
+ ); + }} + + + +### GDS styled checkbox with hint above + + + + {() => { + const [value, setValue] = React.useState(''); + const [checked, setChecked] = React.useState(false); + const handleChange = (event) => { + setValue(event.currentTarget.value); + setChecked(!checked); + }; + return ( +
+
+
+ +
+
+
); }} @@ -103,37 +251,46 @@ In this section we're using the formCheckbox component providing the GovUk style console.log(conditional); }; return ( - +
+
+
+ +
+
+
); }} @@ -155,38 +312,47 @@ In this section we're using the formCheckbox component providing the GovUk style console.log(conditional); }; return ( - +
+
+
+ +
+
+
); }} @@ -204,23 +370,32 @@ In this section we're using the formCheckbox component providing the GovUk style setChecked(!checked); }; return ( - +
+
+
+ +
+
+
); }}