Merge pull request #597 from guardian/sa-choice-card-updates

Choice card updates

src/core/components/choice-card/README.md

@@ -70,6 +70,12 @@ Additional text that appears below the `label`
 If true, users may select more than one choice card (checkbox behaviour). By default, users
 may only select a single choice card (radio button behaviour).
 
+### `columns`
+
+**`number`**
+
+To render a grid of choice cards, specify the number of columns. If this prop is not set, cards will appear on a single line.
+
 ### `error`
 
 **`string`**
@@ -104,13 +110,6 @@ Whether choice card is checked. This is necessary when using the [controlled app
 
 **Note:** if you pass the `checked` prop, you **must** also pass an `onChange` handler, or the field will be rendered as read-only.
 
-### `columns`
-
-**`number`**
-
-To render a grid of choice cards, specify the number of columns. If this prop is not set, cards will appear on a single line.
-
-
 ## Supported themes
 
 ### Standard

src/core/components/choice-card/stories/with-columns.tsx

@@ -1,7 +1,5 @@
-import React, { useState } from "react"
+import React from "react"
 import { css } from "@emotion/core"
-import { textSans } from "@guardian/src-foundations/typography"
-import { text } from "@guardian/src-foundations/palette"
 import { space } from "@guardian/src-foundations"
 import { ChoiceCardGroup, ChoiceCard } from "../index"
 
@@ -13,60 +11,35 @@ const spaced = css`
 	margin-bottom: ${space[3]}px;
 `
 
-const message = css`
-	${textSans.medium()};
-	color: ${text.primary};
-`
-
 export const singleStateControlledWithColumns = () => {
-	const [selected, setSelected] = useState<string | null>("green")
-
 	return (
 		<div css={medium}>
 			<div css={spaced}>
-				<ChoiceCardGroup name="colours" columns={2}>
-					<ChoiceCard
-						value="red"
-						label="Red"
-						id="default-red"
-						checked={selected === "red"}
-						onChange={() => setSelected("red")}
-					/>
+				<ChoiceCardGroup name="colours" columns={3}>
+					<ChoiceCard value="red" label="Red" id="default-red" />
 					<ChoiceCard
 						value="green"
 						label="Green"
 						id="default-green"
-						checked={selected === "green"}
-						onChange={() => setSelected("green")}
-					/>
-					<ChoiceCard
-						value="blue"
-						label="Blue"
-						id="default-blue"
-						checked={selected === "blue"}
-						onChange={() => setSelected("blue")}
+						defaultChecked={true}
 					/>
+					<ChoiceCard value="blue" label="Blue" id="default-blue" />
 					<ChoiceCard
 						value="orange"
 						label="Orange"
 						id="default-orange"
-						checked={selected === "orange"}
-						onChange={() => setSelected("orange")}
 					/>
 					<ChoiceCard
 						value="yellow"
 						label="Yellow"
 						id="default-yellow"
-						checked={selected === "yellow"}
-						onChange={() => setSelected("yellow")}
 					/>
 				</ChoiceCardGroup>
 			</div>
-			<span css={message}>{selected} is selected</span>
 		</div>
 	)
 }
 
 singleStateControlledWithColumns.story = {
-	name: `single state controlled with columns example`,
+	name: `single state with columns`,
 }