mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-12 04:37:13 +01:00
c5368c152b
* added storybook test runner * added test runner in ci * updated test for ci and fixed lint error * updated lavamoat policy * updated test command * updated playwright * changed command to storybook;ci * updated command * updated instance for test-storybook * updated playwright * added playwright step * replaced concurrently with start-server-and-test * updated the static storybook directory * replaced first with last * updated lock file * replaced first with last * updated test-storybook with maxworkers * updated .depchechrc * updated yml * removed id from banner base * replaced broken stories with .stories-to-do.js extesnsion * updated token allowance story * removed duplicacies from yarn * fixed lavamoat * removed filename comment * updated links for docs * fixed file extension for stories * updated path for stories.json * updated stories.json path * yarn updated * updated stories * updated yarn * updated wait on
42 lines
1.1 KiB
Plaintext
42 lines
1.1 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="components-app-flask-snapsettingscard--default-story" />
|
|
</Canvas>
|
|
|
|
## Props
|
|
|
|
<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="components-app-flask-snapsettingscard--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} />;
|
|
```
|