mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-05 07:24:56 +01:00
eb4f051b23
* parentd89e5336a6
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 * parentd89e5336a6
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>
153 lines
3.0 KiB
JavaScript
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"
|
|
/>
|
|
</>
|
|
);
|