mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-23 01:39:44 +01:00
Replacing deprecated constants & creating stories (#19686)
* Replacing deprecated constants & creating stories * updating snapshot
This commit is contained in:
parent
fc2402df5e
commit
1c7c89abcb
@ -0,0 +1,19 @@
|
||||
import React from 'react';
|
||||
import ConfirmGasDisplay from './confirm-gas-display';
|
||||
|
||||
export default {
|
||||
title: 'Components/App/ConfirmGasDisplay',
|
||||
component: ConfirmGasDisplay,
|
||||
argTypes: {
|
||||
userAcknowledgedGasMissing: {
|
||||
control: 'boolean',
|
||||
},
|
||||
},
|
||||
args: {
|
||||
userAcknowledgedGasMissing: true,
|
||||
},
|
||||
};
|
||||
|
||||
export const DefaultStory = (args) => <ConfirmGasDisplay {...args} />;
|
||||
|
||||
DefaultStory.storyName = 'Default';
|
@ -0,0 +1,25 @@
|
||||
import React from 'react';
|
||||
import ConnectedAccountsPermissions from './connected-accounts-permissions';
|
||||
|
||||
export default {
|
||||
title: 'Components/App/ConnectedAccountsPermissions',
|
||||
component: ConnectedAccountsPermissions,
|
||||
argTypes: {
|
||||
permission: {
|
||||
control: 'array',
|
||||
},
|
||||
},
|
||||
args: {
|
||||
permissions: [
|
||||
{ key: 'permission1' },
|
||||
{ key: 'permission2' },
|
||||
{ key: 'permission3' },
|
||||
],
|
||||
},
|
||||
};
|
||||
|
||||
export const DefaultStory = (args) => (
|
||||
<ConnectedAccountsPermissions {...args} />
|
||||
);
|
||||
|
||||
DefaultStory.storyName = 'Default';
|
@ -3,10 +3,10 @@
|
||||
exports[`ComplianceDetails should render correctly 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="box compliance-details box--padding-right-4 box--padding-left-4 box--display-flex box--flex-direction-column"
|
||||
class="mm-box compliance-details mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-flex mm-box--flex-direction-column"
|
||||
>
|
||||
<div
|
||||
class="box compliance-details__row box--padding-top-4 box--padding-bottom-4 box--display-flex box--flex-direction-column box--justify-content-center box--height-2/3"
|
||||
class="mm-box compliance-details__row mm-box--padding-top-4 mm-box--padding-bottom-4 mm-box--display-flex mm-box--flex-direction-column mm-box--justify-content-center mm-box--height-2/3"
|
||||
>
|
||||
<p
|
||||
class="box mm-text mm-text--body-md box--flex-direction-row box--color-text-default"
|
||||
@ -20,10 +20,10 @@ exports[`ComplianceDetails should render correctly 1`] = `
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
class="box compliance-details__row box--padding-top-4 box--padding-bottom-4 box--display-flex box--flex-direction-column box--justify-content-center box--height-2/3"
|
||||
class="mm-box compliance-details__row mm-box--padding-top-4 mm-box--padding-bottom-4 mm-box--display-flex mm-box--flex-direction-column mm-box--justify-content-center mm-box--height-2/3"
|
||||
>
|
||||
<div
|
||||
class="box box--margin-bottom-1 box--display-flex box--flex-direction-row box--align-items-center box--color-text-alternative"
|
||||
class="mm-box mm-box--margin-bottom-1 mm-box--display-flex mm-box--align-items-center mm-box--color-text-alternative"
|
||||
>
|
||||
<p
|
||||
class="box mm-text mm-text--body-md box--margin-right-2 box--flex-direction-row box--color-text-default"
|
||||
@ -57,7 +57,7 @@ exports[`ComplianceDetails should render correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="box compliance-row__column-risk compliance-row__column-risk--green box--flex-direction-row"
|
||||
class="mm-box compliance-row__column-risk compliance-row__column-risk--green"
|
||||
>
|
||||
<p
|
||||
class="box mm-text mm-text--body-md box--flex-direction-row box--color-text-default"
|
||||
@ -67,10 +67,10 @@ exports[`ComplianceDetails should render correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="box compliance-details__row box--padding-top-4 box--padding-bottom-4 box--display-flex box--flex-direction-column box--justify-content-center box--height-2/3"
|
||||
class="mm-box compliance-details__row mm-box--padding-top-4 mm-box--padding-bottom-4 mm-box--display-flex mm-box--flex-direction-column mm-box--justify-content-center mm-box--height-2/3"
|
||||
>
|
||||
<div
|
||||
class="box box--display-flex box--flex-direction-row box--align-items-center box--color-text-alternative"
|
||||
class="mm-box mm-box--display-flex mm-box--align-items-center mm-box--color-text-alternative"
|
||||
>
|
||||
<p
|
||||
class="box mm-text mm-text--body-md box--margin-right-2 box--flex-direction-row box--color-text-default"
|
||||
@ -108,7 +108,7 @@ exports[`ComplianceDetails should render correctly 1`] = `
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="box box--flex-direction-row"
|
||||
class="mm-box"
|
||||
>
|
||||
<div
|
||||
class="swaps-footer"
|
||||
|
@ -11,16 +11,15 @@ import {
|
||||
getComplianceTenantSubdomain,
|
||||
} from '../../../ducks/institutional/institutional';
|
||||
import { formatDate } from '../../../helpers/utils/util';
|
||||
import Box from '../../ui/box';
|
||||
import { Text } from '../../component-library';
|
||||
import { Text, Box } from '../../component-library';
|
||||
import {
|
||||
TextColor,
|
||||
TextVariant,
|
||||
JustifyContent,
|
||||
AlignItems,
|
||||
BLOCK_SIZES,
|
||||
DISPLAY,
|
||||
FLEX_DIRECTION,
|
||||
BlockSize,
|
||||
Display,
|
||||
FlexDirection,
|
||||
} from '../../../helpers/constants/design-system';
|
||||
|
||||
const ComplianceDetails = ({ address, onClose, onGenerate }) => {
|
||||
@ -50,17 +49,17 @@ const ComplianceDetails = ({ address, onClose, onGenerate }) => {
|
||||
|
||||
return (
|
||||
<Box
|
||||
display={DISPLAY.FLEX}
|
||||
flexDirection={FLEX_DIRECTION.COLUMN}
|
||||
display={Display.Flex}
|
||||
flexDirection={FlexDirection.Column}
|
||||
paddingLeft={4}
|
||||
paddingRight={4}
|
||||
className="compliance-details"
|
||||
>
|
||||
<Box
|
||||
display={DISPLAY.FLEX}
|
||||
flexDirection={FLEX_DIRECTION.COLUMN}
|
||||
display={Display.Flex}
|
||||
flexDirection={FlexDirection.Column}
|
||||
justifyContent={JustifyContent.center}
|
||||
height={BLOCK_SIZES.TWO_THIRDS}
|
||||
height={BlockSize.TwoThirds}
|
||||
paddingTop={4}
|
||||
paddingBottom={4}
|
||||
className="compliance-details__row"
|
||||
@ -69,16 +68,16 @@ const ComplianceDetails = ({ address, onClose, onGenerate }) => {
|
||||
<Text variant={TextVariant.bodyXs}>{address}</Text>
|
||||
</Box>
|
||||
<Box
|
||||
display={DISPLAY.FLEX}
|
||||
flexDirection={FLEX_DIRECTION.COLUMN}
|
||||
display={Display.Flex}
|
||||
flexDirection={FlexDirection.Column}
|
||||
justifyContent={JustifyContent.center}
|
||||
height={BLOCK_SIZES.TWO_THIRDS}
|
||||
height={BlockSize.TwoThirds}
|
||||
paddingTop={4}
|
||||
paddingBottom={4}
|
||||
className="compliance-details__row"
|
||||
>
|
||||
<Box
|
||||
display={DISPLAY.FLEX}
|
||||
display={Display.Flex}
|
||||
alignItems={AlignItems.center}
|
||||
marginBottom={1}
|
||||
color={TextColor.textAlternative}
|
||||
@ -103,16 +102,16 @@ const ComplianceDetails = ({ address, onClose, onGenerate }) => {
|
||||
</Box>
|
||||
</Box>
|
||||
<Box
|
||||
display={DISPLAY.FLEX}
|
||||
flexDirection={FLEX_DIRECTION.COLUMN}
|
||||
display={Display.Flex}
|
||||
flexDirection={FlexDirection.Column}
|
||||
justifyContent={JustifyContent.center}
|
||||
height={BLOCK_SIZES.TWO_THIRDS}
|
||||
height={BlockSize.TwoThirds}
|
||||
paddingTop={4}
|
||||
paddingBottom={4}
|
||||
className="compliance-details__row"
|
||||
>
|
||||
<Box
|
||||
display={DISPLAY.FLEX}
|
||||
display={Display.Flex}
|
||||
alignItems={AlignItems.center}
|
||||
color={TextColor.textAlternative}
|
||||
>
|
||||
|
@ -1,13 +1,12 @@
|
||||
import React from 'react';
|
||||
import classnames from 'classnames';
|
||||
import PropTypes from 'prop-types';
|
||||
import Box from '../../ui/box/box';
|
||||
import {
|
||||
AlignItems,
|
||||
BLOCK_SIZES,
|
||||
BlockSize,
|
||||
BorderRadius,
|
||||
BackgroundColor,
|
||||
DISPLAY,
|
||||
Display,
|
||||
IconColor,
|
||||
JustifyContent,
|
||||
Size,
|
||||
@ -20,6 +19,7 @@ import {
|
||||
ButtonIcon,
|
||||
IconName,
|
||||
Text,
|
||||
Box,
|
||||
} from '../../component-library';
|
||||
import { useI18nContext } from '../../../hooks/useI18nContext';
|
||||
import { Menu } from '../../ui/menu';
|
||||
@ -63,13 +63,13 @@ export const ProductTour = ({
|
||||
<Box
|
||||
borderWidth={1}
|
||||
className="multichain-product-tour-menu__arrow"
|
||||
display={DISPLAY.FLEX}
|
||||
display={Display.Flex}
|
||||
justifyContent={JustifyContent.center}
|
||||
alignItems={AlignItems.center}
|
||||
style={{ right: positionObj }}
|
||||
/>
|
||||
<Box
|
||||
display={DISPLAY.FLEX}
|
||||
display={Display.Flex}
|
||||
alignItems={AlignItems.center}
|
||||
className="multichain-product-tour-menu__header"
|
||||
>
|
||||
@ -86,7 +86,7 @@ export const ProductTour = ({
|
||||
<Text
|
||||
textAlign={TextAlign.Center}
|
||||
variant={TextVariant.headingSm}
|
||||
width={BLOCK_SIZES.FULL}
|
||||
width={BlockSize.Full}
|
||||
color={TextColor.infoInverse}
|
||||
>
|
||||
{title}
|
||||
@ -101,7 +101,7 @@ export const ProductTour = ({
|
||||
{description}
|
||||
</Text>
|
||||
<Box
|
||||
display={DISPLAY.FLEX}
|
||||
display={Display.Flex}
|
||||
alignItems={AlignItems.center}
|
||||
justifyContent={JustifyContent.spaceBetween}
|
||||
>
|
||||
|
Loading…
Reference in New Issue
Block a user