mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-11-27 04:46:10 +01:00
eb4f051b23
* parentd89e5336a6author georgewrmarshall <george.marshall@consensys.net> 1636692862 -0800 committer hmalik88 <hassan.malik@consensys.net> 1637342043 -0500 Initial SnapSettingsCard component Updates to styles but having specificity issues so increased specificity Updates to styles but having specificity issues so increased specificity added overflow fix and added tests lockfile update prettier fix added stylelint ignore yarn.lock fixed * merge conflict fix * package/yarn fix * fixed package.json * updated lockfile... * removed comment * removed unnecessary key/val for chip status indicator color * bumped lattice to 0.4.0 in package json, fixed yarn lock * removed dupe entry in yarn lock * ran yarn setup to update lock file * updated chip label prop * parentd89e5336a6author georgewrmarshall <george.marshall@consensys.net> 1636692862 -0800 committer hmalik88 <hassan.malik@consensys.net> 1637342043 -0500 Initial SnapSettingsCard component Updates to styles but having specificity issues so increased specificity Updates to styles but having specificity issues so increased specificity added overflow fix and added tests lockfile update prettier fix added stylelint ignore yarn.lock fixed * merge conflict fix * package/yarn fix * fixed package.json * updated lockfile... * removed comment * bumped lattice to 0.4.0 in package json, fixed yarn lock * removed dupe entry in yarn lock * ran yarn setup to update lock file * Using IconWithFallback instead of SiteIcon, fixing icon prop, and adding status story and docs page * Updating to follow storybook folder convention * Updates to styles * Adding localization * added todo comment Co-authored-by: hmalik88 <hassan.malik@consensys.net>
42 lines
1.2 KiB
Plaintext
42 lines
1.2 KiB
Plaintext
import { Story, Canvas, ArgsTable } from '@storybook/addon-docs';
|
|
|
|
import SnapSettingsCard from '.';
|
|
|
|
# SnapSettingsCard
|
|
|
|
A card component that displays information and the status of a snap. The `SnapSettingsCard` component is made up of the `Card`, `IconBorder`, `IconWithFallback`, `ToggleButton`, `Chip`, `ColorIndicator` and `Button` components
|
|
|
|
<Canvas>
|
|
<Story id="ui-components-app-flask-snap-settings-card-snap-settings-card-stories-js--default-story" />
|
|
</Canvas>
|
|
|
|
## Component API
|
|
|
|
<ArgsTable of={SnapSettingsCard} />
|
|
|
|
## Usage
|
|
|
|
The following describes the props and example usage for this component.
|
|
|
|
### Status
|
|
|
|
There are 4 statuses the `SnapSettingsCard` can have: `'installing'`,`'running'`,`'stopped'` and `'crashed'`.
|
|
|
|
<Canvas>
|
|
<Story id="ui-components-app-flask-snap-settings-card-snap-settings-card-stories-js--status" />
|
|
</Canvas>
|
|
|
|
### isEnabled / onToggle
|
|
|
|
Use the `isEnabled` and `onToggle` to control the `ToggleButton` component inside of the `SnapSettingsCard`
|
|
|
|
```jsx
|
|
const [isEnabled, setIsEnabled] = React.useState(false);
|
|
|
|
const handleOnToggle = () => {
|
|
setIsEnabled(!isEnabled);
|
|
};
|
|
|
|
return <SnapSettingsCard isEnabled={isEnabled} onToggle={handleOnToggle} />;
|
|
```
|