Skip to content

Commit

Permalink
docs(clayui.com): Toggle Switch adds example of sizing
Browse files Browse the repository at this point in the history
  • Loading branch information
@pat270
pat270 committed Jan 11, 2024
1 parent 07879ae commit 5942b01
Show file tree
Hide file tree
Showing 3 changed files with 134 additions and 74 deletions.
130 changes: 65 additions & 65 deletions packages/clay-form/docs/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,16 +14,16 @@ const formCode = `const Component = () => {
const [active, setActive] = useState(false);
return (
<ClayForm>
<ClayForm.Group className="form-group-sm">
<label htmlFor="basicInput">Name</label>
<ClayInput placeholder="Name" type="text"></ClayInput>
</ClayForm.Group>
<ClayForm.Group className="form-group-sm">
<label htmlFor="basicInput">Description</label>
<textarea className="form-control" placeholder="Description"></textarea>
</ClayForm.Group>
</ClayForm>
<ClayForm>
<ClayForm.Group className="form-group-sm">
<label htmlFor="basicInput">Name</label>
<ClayInput placeholder="Name" type="text"></ClayInput>
</ClayForm.Group>
<ClayForm.Group className="form-group-sm">
<label htmlFor="basicInput">Description</label>
<textarea className="form-control" placeholder="Description"></textarea>
</ClayForm.Group>
</ClayForm>
);
}
Expand All @@ -42,47 +42,47 @@ const formValidationCode = `const Component = () => {
const [active, setActive] = useState(false);
return (
<ClayForm>
<ClayForm.Group className="has-success">
<label htmlFor="basicInput">Name</label>
<ClayInput placeholder="Name" type="text"></ClayInput>
<ClayForm.FeedbackGroup>
<ClayForm.FeedbackItem>
{'This is a form-feedback-item.'}
</ClayForm.FeedbackItem>
<ClayForm.FeedbackItem>
<ClayForm.FeedbackIndicator spritemap={spritemap} symbol="check-circle-full"/>
{'This is a form-feedback-item with a check feedback indicator.'}
</ClayForm.FeedbackItem>
</ClayForm.FeedbackGroup>
</ClayForm.Group>
<ClayForm.Group className="has-warning">
<label htmlFor="basicInput">Description</label>
<textarea className="form-control" placeholder="Description"></textarea>
<ClayForm.FeedbackGroup>
<ClayForm.FeedbackItem>
{'This is a form-feedback-item.'}
</ClayForm.FeedbackItem>
<ClayForm.FeedbackItem>
<ClayForm.FeedbackIndicator spritemap={spritemap} symbol="warning-full"/>
{'This is a form-feedback-item with a warning feedback indicator.'}
</ClayForm.FeedbackItem>
</ClayForm.FeedbackGroup>
</ClayForm.Group>
<ClayForm.Group className="has-error">
<label htmlFor="basicInput">Password</label>
<ClayInput placeholder="Name" type="password"></ClayInput>
<ClayForm.FeedbackGroup>
<ClayForm.FeedbackItem>
{'This is a form-feedback-item.'}
</ClayForm.FeedbackItem>
<ClayForm.FeedbackItem>
<ClayForm.FeedbackIndicator spritemap={spritemap} symbol="exclamation-full"/>
{'This is a form-feedback-item with a error feedback indicator.'}
</ClayForm.FeedbackItem>
</ClayForm.FeedbackGroup>
</ClayForm.Group>
</ClayForm>
<ClayForm>
<ClayForm.Group className="has-success">
<label htmlFor="basicInput">Name</label>
<ClayInput placeholder="Name" type="text"></ClayInput>
<ClayForm.FeedbackGroup>
<ClayForm.FeedbackItem>
{'This is a form-feedback-item.'}
</ClayForm.FeedbackItem>
<ClayForm.FeedbackItem>
<ClayForm.FeedbackIndicator spritemap={spritemap} symbol="check-circle-full"/>
{'This is a form-feedback-item with a check feedback indicator.'}
</ClayForm.FeedbackItem>
</ClayForm.FeedbackGroup>
</ClayForm.Group>
<ClayForm.Group className="has-warning">
<label htmlFor="basicInput">Description</label>
<textarea className="form-control" placeholder="Description"></textarea>
<ClayForm.FeedbackGroup>
<ClayForm.FeedbackItem>
{'This is a form-feedback-item.'}
</ClayForm.FeedbackItem>
<ClayForm.FeedbackItem>
<ClayForm.FeedbackIndicator spritemap={spritemap} symbol="warning-full"/>
{'This is a form-feedback-item with a warning feedback indicator.'}
</ClayForm.FeedbackItem>
</ClayForm.FeedbackGroup>
</ClayForm.Group>
<ClayForm.Group className="has-error">
<label htmlFor="basicInput">Password</label>
<ClayInput placeholder="Name" type="password"></ClayInput>
<ClayForm.FeedbackGroup>
<ClayForm.FeedbackItem>
{'This is a form-feedback-item.'}
</ClayForm.FeedbackItem>
<ClayForm.FeedbackItem>
<ClayForm.FeedbackIndicator spritemap={spritemap} symbol="exclamation-full"/>
{'This is a form-feedback-item with a error feedback indicator.'}
</ClayForm.FeedbackItem>
</ClayForm.FeedbackGroup>
</ClayForm.Group>
</ClayForm>
);
}
Expand All @@ -107,20 +107,20 @@ const formTextCode = `const Component = () => {
const [active, setActive] = useState(false);
return (
<ClayForm>
<ClayForm.Group className="has-success">
<label htmlFor="basicInput">Name</label>
<ClayInput placeholder="Name" type="text"></ClayInput>
<ClayForm.FeedbackGroup>
<ClayForm.FeedbackItem>
{'This is a form-feedback-item.'}
</ClayForm.FeedbackItem>
<ClayForm.Text>
{''}
</ClayForm.Text>
</ClayForm.FeedbackGroup>
</ClayForm.Group>
</ClayForm>
<ClayForm>
<ClayForm.Group className="has-success">
<label htmlFor="basicInput">Name</label>
<ClayInput placeholder="Name" type="text"></ClayInput>
<ClayForm.FeedbackGroup>
<ClayForm.FeedbackItem>
{'This is a form-feedback-item.'}
</ClayForm.FeedbackItem>
<ClayForm.Text>
{''}
</ClayForm.Text>
</ClayForm.FeedbackGroup>
</ClayForm.Group>
</ClayForm>
);
}
Expand Down
9 changes: 8 additions & 1 deletion packages/clay-form/docs/toggle-switch.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,12 +7,13 @@ navigationParent: 'docs/components/form.html'
storybookPath: 'design-system-components-toggle'
---

import {RadioToggle, Toggle} from '$packages/clay-form/docs/toggle';
import {RadioToggle, Toggle, ToggleSm} from '$packages/clay-form/docs/toggle';

<div class="nav-toc-absolute">
<div class="nav-toc">

- [Inside ClayRadioGroup](#inside-clayradiogroup)
- [Sizing](#toggle-switch-sizing)

</div>
</div>
Expand All @@ -28,3 +29,9 @@ You can also have custom icons that further signal the current state of the Togg
If you want the Toggle to behave like a radio element (toggling one on will toggle others off) wrap multiple `Toggles` with a [ClayRadioGroup](/docs/components/radio-group.html) component.

<RadioToggle />

## Sizing(#toggle-switch-sizing)

The attribute `sizing="sm"` can be used to create a smaller toggle switch.

<ToggleSm />
69 changes: 61 additions & 8 deletions packages/clay-form/docs/toggle.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,32 +38,32 @@ export const RadioToggle = () => {
};

const ToggleCode = `const Component = () => {
const [toggled, setToggle] = useState(false);
const [toggled1, setToggle1, toggled2, setToggle2, toggled3, setToggle3] = useState(false);
return (
<div style={{display: 'flex', justifyContent: 'space-around'}}>
<ClayToggle
label="Checkbox"
onToggle={setToggle}
toggled={toggled}
onToggle={setToggle1}
toggled={toggled1}
/>
<ClayToggle
label="with symbol"
onToggle={setToggle}
onToggle={setToggle2}
spritemap={spritemap}
symbol={{
off: 'times',
on: 'check',
}}
toggled={toggled}
toggled={toggled2}
/>
<ClayToggle
disabled
label="Disabled"
onToggle={setToggle}
toggled={toggled}
onToggle={setToggle3}
toggled={toggled3}
/>
</div>
);
Expand All @@ -72,11 +72,64 @@ const ToggleCode = `const Component = () => {
render(<Component />);`;

const toggleImports = `import React from 'react';
import {ClayToggle} from '@clayui/form';;`;
import {ClayToggle} from '@clayui/form';`;

export const Toggle = () => {
const scope = {ClayToggle};
const code = ToggleCode;

return <Editor code={code} imports={toggleImports} scope={scope} />;
};

const ToggleSmCode = `const Component = () => {
const [toggled1, setToggle1, toggled2, setToggle2, toggled3, setToggle3] = useState(false);
return (
<div>
<div className="form-group">
<ClayToggle
label="Checkbox"
onToggle={setToggle1}
sizing="sm"
toggled={toggled1}
/>
</div>
<div className="form-group">
<ClayToggle
label="with symbol"
onToggle={setToggle2}
sizing="sm"
spritemap={spritemap}
symbol={{
off: 'times',
on: 'check',
}}
toggled={toggled2}
/>
</div>
<div className="form-group">
<ClayToggle
disabled
label="Disabled"
onToggle={setToggle3}
sizing="sm"
toggled={toggled3}
/>
</div>
</div>
);
}
render(<Component />);`;

const toggleSmImports = `import React from 'react';
import {ClayToggle} from '@clayui/form';`;

export const ToggleSm = () => {
const scope = {ClayToggle};
const code = ToggleSmCode;

return <Editor code={code} imports={toggleSmImports} scope={scope} />;
};

0 comments on commit 5942b01

Please sign in to comment.