Skip to content
This repository has been archived by the owner on Nov 3, 2022. It is now read-only.

Commit

Permalink
chor: (doc) add storybook url
Browse files Browse the repository at this point in the history
  • Loading branch information
Hein Htut Aung committed Jul 13, 2022
1 parent ca7f929 commit ba3bf37
Showing 1 changed file with 1 addition and 38 deletions.
39 changes: 1 addition & 38 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,41 +6,4 @@ npm i @comfortdelgro/design-system
```

### Usage
```
import { defaultTheme, Theme, Button, RadioGroup, Radio, Checkbox } from "@comfortdelgro/design-system";
function App() {
const [selectedRadioValue, setSelectedRadioValue] = useState("");
const [checkboxChecked, setCheckboxChecked] = useState(false); // use diff state for each checkbox
return (
<Theme theme={defaultTheme}>
<Button
style={{ margin: "16px" }}
onClick={() => alert("Clicked!")}
modifiers={["large", "primary"]}
>
This is a button
</Button>
<br/>
<Checkbox style={{ margin: "16px" }} checked={checkboxChecked} onChecked={setCheckboxChecked}>Primary Checkbox</Checkbox>
<Checkbox style={{ margin: "16px" }} checked={checkboxChecked} onChecked={setCheckboxChecked} disabled>Disabled Checkbox</Checkbox>
<br/>
<RadioGroup
name="setRadioType"
onClickRadioButton={setSelectedRadioValue}
selectedValue={selectedRadioValue}
>
<Radio style={{ margin: "16px" }} value="primary" labelText="Choose an option"/>
<Radio style={{ margin: "16px" }} value="primary-2" labelText="Choose an option"/>
<Radio style={{ margin: "16px" }} value="primary-disabled" labelText="Disabled" disabled/>
</RadioGroup>
</Theme>
);
}
export default App;
```
Try components and read the stories [here](https://comfortdelgro.github.io/design-system).

0 comments on commit ba3bf37

Please sign in to comment.