mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-11-25 11:28:51 +01:00
updating SnapSettingsCard (#20296)
Co-authored-by: George Marshall <george.marshall@consensys.net>
This commit is contained in:
Dhruv
GitHub
parent
e0a6435f62
commit
e31c933869
@ -1,41 +0,0 @@
|
||||
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} />;
|
||||
```
|
||||
@ -1,42 +1,46 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
import Box from '../../../ui/box';
|
||||
|
||||
import {
|
||||
Color,
|
||||
AlignItems,
|
||||
JustifyContent,
|
||||
DISPLAY,
|
||||
BLOCK_SIZES,
|
||||
Display,
|
||||
BlockSize,
|
||||
IconColor,
|
||||
TextVariant,
|
||||
} from '../../../../helpers/constants/design-system';
|
||||
import { Icon, IconName, IconSize, Text } from '../../../component-library';
|
||||
import {
|
||||
Icon,
|
||||
IconName,
|
||||
IconSize,
|
||||
Text,
|
||||
Box,
|
||||
} from '../../../component-library';
|
||||
import SnapAvatar from '../snap-avatar';
|
||||
|
||||
const SnapSettingsCard = ({ name, packageName, onClick, snapId }) => {
|
||||
return (
|
||||
<Box
|
||||
className="snap-settings-card"
|
||||
display={DISPLAY.FLEX}
|
||||
display={Display.Flex}
|
||||
alignItems={AlignItems.center}
|
||||
justifyContent={JustifyContent.spaceBetween}
|
||||
width={BLOCK_SIZES.FULL}
|
||||
padding={[4, 4, 4, 4]}
|
||||
width={BlockSize.Full}
|
||||
padding={4}
|
||||
>
|
||||
<Box
|
||||
className="snap-settings-card__inner-wrapper"
|
||||
display={DISPLAY.FLEX}
|
||||
display={Display.Flex}
|
||||
alignItems={AlignItems.center}
|
||||
justifyContent={JustifyContent.flexStart}
|
||||
width={BLOCK_SIZES.FULL}
|
||||
width={BlockSize.Full}
|
||||
onClick={onClick}
|
||||
>
|
||||
<Box>
|
||||
<SnapAvatar snapId={snapId} />
|
||||
</Box>
|
||||
<Box paddingLeft={4} paddingRight={4} width={BLOCK_SIZES.FULL}>
|
||||
<Box paddingLeft={4} paddingRight={4} width={BlockSize.Full}>
|
||||
<Text
|
||||
className="snap-settings-card__title"
|
||||
color={Color.textDefault}
|
||||
@ -66,7 +70,7 @@ const SnapSettingsCard = ({ name, packageName, onClick, snapId }) => {
|
||||
|
||||
SnapSettingsCard.propTypes = {
|
||||
/**
|
||||
* Name of the snap used for the title of the card and fallback letter for the snap icon
|
||||
* Name of the snap
|
||||
*/
|
||||
name: PropTypes.string,
|
||||
/**
|
||||
@ -74,7 +78,7 @@ SnapSettingsCard.propTypes = {
|
||||
*/
|
||||
packageName: PropTypes.string,
|
||||
/**
|
||||
* onClick function of the "See Details" Button
|
||||
* onClick event handler
|
||||
*/
|
||||
onClick: PropTypes.func,
|
||||
/**
|
||||
@ -82,5 +86,4 @@ SnapSettingsCard.propTypes = {
|
||||
*/
|
||||
snapId: PropTypes.string.isRequired,
|
||||
};
|
||||
|
||||
export default SnapSettingsCard;
|
||||
|
||||
@ -1,152 +1,30 @@
|
||||
import React from 'react';
|
||||
import { useArgs } from '@storybook/client-api';
|
||||
|
||||
import README from './README.mdx';
|
||||
import SnapSettingsCard from '.';
|
||||
|
||||
export default {
|
||||
title: 'Components/App/Snaps/SnapSettingsCard',
|
||||
|
||||
component: SnapSettingsCard,
|
||||
parameters: {
|
||||
docs: {
|
||||
page: README,
|
||||
},
|
||||
},
|
||||
argTypes: {
|
||||
name: {
|
||||
control: 'text',
|
||||
},
|
||||
description: {
|
||||
packageName: {
|
||||
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',
|
||||
snapId: {
|
||||
control: 'text',
|
||||
},
|
||||
options: ['installing', 'stopped', 'running', 'crashed'],
|
||||
},
|
||||
className: {
|
||||
control: 'string',
|
||||
},
|
||||
cardProps: {
|
||||
control: 'object',
|
||||
},
|
||||
toggleButtonProps: {
|
||||
control: 'object',
|
||||
},
|
||||
buttonProps: {
|
||||
control: 'object',
|
||||
},
|
||||
chipProps: {
|
||||
control: 'object',
|
||||
},
|
||||
args: {
|
||||
name: 'Snap Name',
|
||||
packageName: 'Snap Package Name',
|
||||
snapId: 'npm:@metamask/test-snap-bip44',
|
||||
},
|
||||
};
|
||||
|
||||
export const DefaultStory = (args) => {
|
||||
const [{ isEnabled }, updateArgs] = useArgs();
|
||||
|
||||
const handleOnToggle = () => {
|
||||
updateArgs({
|
||||
isEnabled: !isEnabled,
|
||||
status: isEnabled ? 'stopped' : 'running',
|
||||
});
|
||||
};
|
||||
return (
|
||||
<SnapSettingsCard
|
||||
{...args}
|
||||
isEnabled={isEnabled}
|
||||
onToggle={handleOnToggle}
|
||||
/>
|
||||
);
|
||||
};
|
||||
export const DefaultStory = (args) => <SnapSettingsCard {...args} />;
|
||||
|
||||
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"
|
||||
/>
|
||||
</>
|
||||
);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user