Skip to content
This repository was archived by the owner on Mar 25, 2025. It is now read-only.

fix(docs): Card example code corrected #99

Merged
merged 1 commit into from
Jun 22, 2021
Merged

fix(docs): Card example code corrected #99

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 15 additions & 14 deletions packages/docs/src/mdx/coreComponents/Card.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -175,6 +175,8 @@ export const RadioSelectableListItem = () => {
}

export const DemoComponent = ({}) => {
const [value, setValue] = useState(false)
const [valueText, setValueText] = useState('')
const [isExpanded, setExpanded] = useState(true)
const onClick = useCallback(() => {}, [])
const onSelect = () => {}
Expand Down Expand Up @@ -318,7 +320,7 @@ export const DemoComponent = ({}) => {
<Button onClick={onClick} label="Action 1" />
<Button onClick={onClick} label="Action 2" variant="secondary" />
<CardFooterSpacer />
<Switch value={false} onChange={() => {}} />
<Switch checked={value} onValueChange={setValue} />
<Typography>Input label</Typography>
</CardFooter>
</Card>
Expand Down Expand Up @@ -356,38 +358,38 @@ export const DemoComponent = ({}) => {
<CardPlainContent>
<ContentListItem listHeight="large">
<Typography>Input label</Typography>
<Switch value={false} onChange={() => {}} />
<Switch checked={value} onValueChange={setValue} />
</ContentListItem>
<ContentDivider />
<ContentListItem listHeight="large">
<Typography>Input label</Typography>
<Switch value={true} onChange={() => {}} />
<Switch checked={value} onValueChange={setValue} />
</ContentListItem>
<ContentDivider />
<FormSection>
<TextInputField
label="Input label"
value=""
onValueChange={() => {}}
value={valueText}
onValueChange={setValueText}
placeholder="Placeholder"
/>
<TextInputField
label="Input label"
value=""
onValueChange={() => {}}
value={valueText}
onValueChange={setValueText}
placeholder="Placeholder"
/>
</FormSection>
<SpaceBlock variant={32} />
<FormSection title="Group label" />
<ContentListItem listHeight="large">
<Typography>Input label</Typography>
<Switch value={false} onChange={() => {}} />
<Switch checked={value} onValueChange={setValue} />
</ContentListItem>
<ContentDivider />
<ContentListItem listHeight="large">
<Typography>Input label</Typography>
<Switch value={true} onChange={() => {}} />
<Switch checked={value} onValueChange={setValue} />
</ContentListItem>
<ContentDivider />
<RadioSelectableListItem />
Expand Down Expand Up @@ -423,7 +425,7 @@ export const onClick = () => {}
### Card with header, content and footer

```typescript type=live
<Card>
<Card width="small">
<CardHeader>
<CardHeaderTypography>CardHeader</CardHeaderTypography>
</CardHeader>
Expand All @@ -443,12 +445,12 @@ export const onClick = () => {}
<CardPlainContent>
<ContentListItem listHeight="large">
<Typography>Input label</Typography>
<Switch value={false} onChange={() => {}} />
<Switch checked={false} onChange={() => {}} />
</ContentListItem>
<ContentDivider />
<ContentListItem listHeight="large">
<Typography>Input label</Typography>
<Switch value={true} onChange={() => {}} />
<Switch checked={true} onChange={() => {}} />
</ContentListItem>
<ContentDivider />
<FormSection>
Expand All @@ -469,7 +471,7 @@ export const onClick = () => {}
<FormSection title="Group label" />
<ContentListItem listHeight="large">
<Typography>Input label</Typography>
<Switch value={false} onChange={() => {}} />
<Switch checked={false} onChange={() => {}} />
</ContentListItem>
<ContentDivider />
<ContentListItem listHeight="large">
Expand All @@ -494,7 +496,6 @@ export const onClick = () => {}
caption="Selected applications will automatically be installed and reinstalled if removed."
/>
<RadioButtonGroup
label="Select your favorite fruit"
name="radioValue"
options={[
{ value: 'apple', label: 'Apple' },
Expand Down