1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-04 23:14:56 +01:00
metamask-extension/ui/components/app/flask/snap-settings-card/README.mdx
Nidhi Kumari 7424e98416
Updated all instances of "Component API" to "Props" in storybook documentation (#15324)
* replaced Component API with Props

* replaced Component API with Props in DOCUMENTATION.stories.mdx

* removed base avatar component
2022-07-27 00:22:40 +05:30

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>
## 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="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} />;
```