1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-12 20:57:12 +01:00
metamask-extension/ui/components/app/flask/snap-settings-card
George Marshall 092189cb5b
Adding polymorphic 'as' prop to Box component and updating Typography component to use the same (#15518)
* Adding polymorphic as prop to Box component

* Updating Typography component to use 'as' as the polymorphic prop instead of 'tag'

* Fixing linting
2022-08-10 12:42:42 -07:00
..
index.js Adding SnapSettingsCard ui component (#12655) 2021-12-01 16:10:51 -05:00
index.scss Adding SnapSettingsCard ui component (#12655) 2021-12-01 16:10:51 -05:00
README.mdx Updated all instances of "Component API" to "Props" in storybook documentation (#15324) 2022-07-27 00:22:40 +05:30
snap-settings-card.js Adding polymorphic 'as' prop to Box component and updating Typography component to use the same (#15518) 2022-08-10 12:42:42 -07:00
snap-settings-card.stories.js Adding SnapSettingsCard ui component (#12655) 2021-12-01 16:10:51 -05:00
snap-settings-card.test.js Adding SnapSettingsCard ui component (#12655) 2021-12-01 16:10:51 -05:00

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