1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-05 15:35:46 +01:00
metamask-extension/ui/components/app/flask/snap-settings-card/snap-settings-card.stories.js
George Marshall eb4f051b23
Adding SnapSettingsCard ui component (#12655)
* parent d89e5336a6
author 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

* parent d89e5336a6
author 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>
2021-12-01 16:10:51 -05:00

153 lines
3.0 KiB
JavaScript

import React from 'react';
import { useArgs } from '@storybook/client-api';
import README from './README.mdx';
import SnapSettingsCard from '.';
export default {
title: 'Components/App/Flask/SnapSettingsCard',
id: __filename,
component: SnapSettingsCard,
parameters: {
docs: {
page: README,
},
},
argTypes: {
name: {
control: 'text',
},
description: {
control: 'text',
},
icon: {
control: 'text',
},
dateAdded: {
control: 'text',
},
version: {
control: 'text',
},
url: {
control: 'text',
},
onToggle: {
action: 'onToggle',
},
isEnabled: {
control: 'boolean',
},
onClick: {
action: 'onClick',
},
status: {
control: {
type: 'select',
},
options: ['installing', 'stopped', 'running', 'crashed'],
},
className: {
control: 'string',
},
cardProps: {
control: 'object',
},
toggleButtonProps: {
control: 'object',
},
buttonProps: {
control: 'object',
},
chipProps: {
control: 'object',
},
},
};
export const DefaultStory = (args) => {
const [{ isEnabled }, updateArgs] = useArgs();
const handleOnToggle = () => {
updateArgs({
isEnabled: !isEnabled,
status: isEnabled ? 'stopped' : 'running',
});
};
return (
<SnapSettingsCard
{...args}
isEnabled={isEnabled}
onToggle={handleOnToggle}
/>
);
};
DefaultStory.storyName = 'Default';
let d = new Date();
d = d.toDateString();
DefaultStory.args = {
name: 'Snap name',
description:
'This snap provides developers everywhere access to an entirely new data storage paradigm, even letting your programs store data autonomously.',
icon: 'AST.png',
dateAdded: d,
version: '10.5.1234',
url: 'https://metamask.io/',
status: 'stopped',
};
export const Status = () => (
<>
<SnapSettingsCard
name="Installing snap"
description="This snap is Installing"
icon="AST.png"
dateAdded={d}
version="10.5.1234"
url="https://metamask.io/"
status="installing"
cardProps={{
marginBottom: 3,
}}
/>
<SnapSettingsCard
isEnabled
name="Running snap"
description="This snap is Running"
icon="AST.png"
dateAdded={d}
version="10.5.1234"
url="https://metamask.io/"
status="running"
cardProps={{
marginBottom: 3,
}}
/>
<SnapSettingsCard
name="Stopped snap"
description="This snap is stopped"
icon="AST.png"
dateAdded={d}
version="10.5.1234"
url="https://metamask.io/"
status="stopped"
cardProps={{
marginBottom: 3,
}}
/>
<SnapSettingsCard
isEnabled
name="Crashed snap"
description="This snap is Crashed"
icon="AST.png"
dateAdded={d}
version="10.5.1234"
url="https://metamask.io/"
status="crashed"
/>
</>
);