m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-11-22 01:47:00 +01:00
Code

Replacing deprecated constants & creating stories (#19686)

Browse Source 
* Replacing deprecated constants & creating stories

* updating snapshot
This commit is contained in:
Dhruv 2023-06-24 03:08:40 +05:30 committed by GitHub
parent fc2402df5e
commit 1c7c89abcb
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 76 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
ui/components/app/confirm-gas-display/confirm-gas-display.stories.js Normal file
View File

@ -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';

25
ui/components/app/connected-accounts-permissions/connected-account-permissions.stories.js Normal file
View File

@ -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';

16
ui/components/institutional/compliance-details/__snapshots__/compliance-details.test.js.snap
View File

@ -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"

35
ui/components/institutional/compliance-details/compliance-details.js
View File

@ -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}
>

14
ui/components/multichain/product-tour-popover/product-tour-popover.js
View File

@ -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}
>