mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-23 09:52:26 +01:00
ba54a3d83b
The ESLint config has been updated to v8. The breaking changes are: * The Prettier rule `quoteProps` has been changed from `consistent` to `as-needed`, meaning that if one key requires quoting, only that key is quoted rather than all keys. * The ESLint rule `no-shadow` has been made more strict. It now prevents globals from being shadowed as well. Most of these changes were applied with `yarn lint:fix`. Only the shadowing changes required manual fixing (shadowing variable names were either replaced with destructuring or renamed). The dependency `globalThis` was added to the list of dynamic dependencies in the build system, where it should have been already. This was causing `depcheck` to fail because the new lint rules required removing the one place where `globalThis` had been erroneously imported previously. A rule requiring a newline between multiline blocks and expressions has been disabled temporarily to make this PR smaller and to avoid introducing conflicts with other PRs.
73 lines
2.0 KiB
JavaScript
73 lines
2.0 KiB
JavaScript
import React from 'react';
|
|
import { object, select } from '@storybook/addon-knobs';
|
|
import {
|
|
COLORS,
|
|
SIZES,
|
|
TYPOGRAPHY,
|
|
} from '../../../helpers/constants/design-system';
|
|
import DefinitionList from './definition-list';
|
|
|
|
export default {
|
|
title: 'Components/UI/DefinitionList',
|
|
id: __filename,
|
|
};
|
|
|
|
const basic = {
|
|
term:
|
|
'a word or phrase used to describe a thing or to express a concept, especially in a particular kind of language or branch of study.',
|
|
definition:
|
|
'a statement of the exact meaning of a word, especially in a dictionary.',
|
|
dl: 'HTML tag denoting a definition list',
|
|
dt: 'HTML tag denoting a definition list term',
|
|
dd: 'HTML tag denoting a definition list definition',
|
|
};
|
|
|
|
const advanced = {
|
|
'Network Name': 'Ethereum Mainnet',
|
|
'Chain ID': '1',
|
|
Ticker: 'ETH',
|
|
};
|
|
|
|
const tooltips = {
|
|
'Network Name': 'The name that is associated with this network',
|
|
'Chain ID': 'The numeric value representing the ID of this network',
|
|
Ticker: 'The currency symbol of the primary currency for this network',
|
|
};
|
|
|
|
export const DefaultStory = () => (
|
|
<DefinitionList
|
|
dictionary={object('dictionary', basic)}
|
|
gapSize={select('gapSize', SIZES, SIZES.SM)}
|
|
/>
|
|
);
|
|
|
|
DefaultStory.storyName = 'Default';
|
|
|
|
export const WithTooltips = () => (
|
|
<DefinitionList
|
|
dictionary={object('dictionary', advanced)}
|
|
tooltips={object('tooltips', tooltips)}
|
|
gapSize={select('gapSize', SIZES, SIZES.SM)}
|
|
/>
|
|
);
|
|
|
|
export const WithTypographyControl = () => (
|
|
<DefinitionList
|
|
dictionary={object('dictionary', advanced)}
|
|
tooltips={object('tooltips', tooltips)}
|
|
gapSize={select('gapSize', SIZES, SIZES.SM)}
|
|
termTypography={{
|
|
variant: select('termTypography.variant', TYPOGRAPHY, TYPOGRAPHY.H6),
|
|
color: select('termTypography.color', COLORS, COLORS.BLACK),
|
|
}}
|
|
definitionTypography={{
|
|
variant: select(
|
|
'definitionTypography.variant',
|
|
TYPOGRAPHY,
|
|
TYPOGRAPHY.H6,
|
|
),
|
|
color: select('definitionTypography.color', COLORS, COLORS.BLACK),
|
|
}}
|
|
/>
|
|
);
|