* origin/develop: add new typography component (#10197) @metamask/inpage-provider@8.0.3 (#10219) Add NETWORK_TYPE_RPC constant (#10203) Further improve organization of constants (#10200) add includePaths to sass-loader in storybook (#10213) Disable the swaps submit button after the first time it is clicked (#10162) Remove default to 18 decimals in quotesToRenderableData method (#10212) use dart sass, and update related modules (#10208) Fetch with a timeout everywhere (#10101) Make hiring link a link on text (#10206) improve design system scss (#10193) zh_TW: Translate buy, assets, activity (#10207) Update TW term 乙太 -> 以太 (#10191) Fix hardware account selection (#10198) Add hiring note to the README (#10190) drop the fox in about (#10174)feature/default_network_editable
Mark Stacey
4 years ago
commit
774b537a9b
@ -0,0 +1,4 @@ |
||||
export const CAVEAT_NAMES = { |
||||
exposedAccounts: 'exposedAccounts', |
||||
primaryAccountOnly: 'primaryAccountOnly', |
||||
} |
||||
@ -1,3 +1,3 @@ |
||||
import { ENVIRONMENT_TYPE_NOTIFICATION } from '../../../../../app/scripts/lib/enums' |
||||
import { ENVIRONMENT_TYPE_NOTIFICATION } from '../../../../../shared/constants/app' |
||||
|
||||
export { ENVIRONMENT_TYPE_NOTIFICATION } |
||||
|
||||
@ -0,0 +1 @@ |
||||
export { default } from './typography' |
||||
@ -0,0 +1,58 @@ |
||||
import React from 'react' |
||||
import classnames from 'classnames' |
||||
import PropTypes from 'prop-types' |
||||
import { COLORS, TYPOGRAPHY } from '../../../helpers/constants/design-system' |
||||
|
||||
const { H6, H7, H8, H9 } = TYPOGRAPHY |
||||
|
||||
export default function Typography({ |
||||
variant = TYPOGRAPHY.Paragraph, |
||||
className, |
||||
color = COLORS.BLACK, |
||||
tag, |
||||
children, |
||||
spacing = 1, |
||||
fontWeight = 'normal', |
||||
align, |
||||
}) { |
||||
const computedClassName = classnames( |
||||
'typography', |
||||
className, |
||||
`typography--${variant}`, |
||||
`typography--align-${align}`, |
||||
`typography--spacing-${spacing}`, |
||||
`typography--color-${color}`, |
||||
`typography--weight-${fontWeight}`, |
||||
) |
||||
|
||||
let Tag = tag ?? variant |
||||
|
||||
if (Tag === TYPOGRAPHY.Paragraph) { |
||||
Tag = 'p' |
||||
} else if ([H7, H8, H9].includes(Tag)) { |
||||
Tag = H6 |
||||
} |
||||
|
||||
return <Tag className={computedClassName}>{children}</Tag> |
||||
} |
||||
|
||||
Typography.propTypes = { |
||||
variant: PropTypes.oneOf(Object.values(TYPOGRAPHY)), |
||||
children: PropTypes.node.isRequired, |
||||
color: PropTypes.oneOf(Object.values(COLORS)), |
||||
className: PropTypes.string, |
||||
align: PropTypes.oneOf(['center', 'right']), |
||||
spacing: PropTypes.oneOf([1, 2, 3, 4, 5, 6, 7, 8]), |
||||
fontWeight: PropTypes.oneOf(['bold', 'normal']), |
||||
tag: PropTypes.oneOf([ |
||||
'p', |
||||
'h1', |
||||
'h2', |
||||
'h3', |
||||
'h4', |
||||
'h5', |
||||
'h6', |
||||
'span', |
||||
'div', |
||||
]), |
||||
} |
||||
@ -0,0 +1,38 @@ |
||||
@use "design-system"; |
||||
@use "sass:map"; |
||||
|
||||
.typography { |
||||
@include design-system.Paragraph; |
||||
|
||||
@each $variant in map.keys(design-system.$typography-variants) { |
||||
&--#{$variant} { |
||||
@include design-system.typography($variant); |
||||
} |
||||
} |
||||
|
||||
@each $variant, $color in design-system.$color-map { |
||||
&--color-#{$variant} { |
||||
color: $color; |
||||
} |
||||
} |
||||
|
||||
@each $variant, $weight in design-system.$typography-font-weights { |
||||
&--weight-#{$variant} { |
||||
font-weight: $weight; |
||||
} |
||||
} |
||||
|
||||
&--align-center { |
||||
text-align: center; |
||||
} |
||||
|
||||
&--align-right { |
||||
text-align: right; |
||||
} |
||||
|
||||
@for $i from 1 through 8 { |
||||
&--spacing-#{$i} { |
||||
margin: #{$i * 4}px auto; |
||||
} |
||||
} |
||||
} |
||||
@ -0,0 +1,53 @@ |
||||
import React from 'react' |
||||
import { number, select, text } from '@storybook/addon-knobs' |
||||
import { COLORS, TYPOGRAPHY } from '../../../helpers/constants/design-system' |
||||
import Typography from '.' |
||||
|
||||
export default { |
||||
title: 'Typography', |
||||
} |
||||
|
||||
const fontWeightOptions = { |
||||
bold: 'bold', |
||||
normal: 'normal', |
||||
} |
||||
|
||||
const alignOptions = { |
||||
left: undefined, |
||||
center: 'center', |
||||
right: 'right', |
||||
} |
||||
|
||||
export const list = () => ( |
||||
<div style={{ width: '80%', flexDirection: 'column' }}> |
||||
{Object.values(TYPOGRAPHY).map((variant) => ( |
||||
<div key={variant} style={{ width: '100%' }}> |
||||
<Typography |
||||
variant={variant} |
||||
color={select('color', COLORS, COLORS.BLACK)} |
||||
spacing={number('spacing', 1, { range: true, min: 1, max: 8 })} |
||||
align={select('align', alignOptions, undefined)} |
||||
fontWeight={select('font weight', fontWeightOptions, 'normal')} |
||||
> |
||||
{variant} |
||||
</Typography> |
||||
</div> |
||||
))} |
||||
</div> |
||||
) |
||||
|
||||
export const TheQuickOrangeFox = () => ( |
||||
<div style={{ width: '80%', flexDirection: 'column' }}> |
||||
<div style={{ width: '100%' }}> |
||||
<Typography |
||||
color={select('color', COLORS, COLORS.BLACK)} |
||||
variant={select('variant', TYPOGRAPHY, TYPOGRAPHY.Paragraph)} |
||||
spacing={number('spacing', 1, { range: true, min: 1, max: 8 })} |
||||
align={select('align', alignOptions, undefined)} |
||||
fontWeight={select('font weight', fontWeightOptions, 'normal')} |
||||
> |
||||
{text('content', 'The quick orange fox jumped over the lazy dog.')} |
||||
</Typography> |
||||
</div> |
||||
</div> |
||||
) |
||||
@ -1,5 +1,5 @@ |
||||
@import 'breakpoints'; |
||||
@import 'colors'; |
||||
@import 'deprecated-colors'; |
||||
@import 'typography'; |
||||
@import 'z-index'; |
||||
@forward 'breakpoints'; |
||||
@forward 'colors'; |
||||
@forward 'deprecated-colors'; |
||||
@forward 'typography'; |
||||
@forward 'z-index'; |
||||
|
||||
@ -0,0 +1,41 @@ |
||||
export const COLORS = { |
||||
UI1: 'ui-1', |
||||
UI2: 'ui-2', |
||||
UI3: 'ui-3', |
||||
UI4: 'ui-4', |
||||
BLACK: 'black', |
||||
WHITE: 'white', |
||||
PRIMARY1: 'primary-1', |
||||
PRIMARY2: 'primary-2', |
||||
PRIMARY3: 'primary-3', |
||||
SECONDARY1: 'secondary-1', |
||||
SECONDARY2: 'secondary-2', |
||||
SECONDARY3: 'secondary-3', |
||||
SUCCESS1: 'success-1', |
||||
SUCCESS2: 'success-2', |
||||
SUCCESS3: 'success-3', |
||||
ERROR1: 'error1', |
||||
ERROR2: 'error2', |
||||
ERROR3: 'error3', |
||||
ALERT1: 'alert-1', |
||||
ALERT2: 'alert-2', |
||||
ALERT3: 'alert-3', |
||||
MAINNET: 'mainnet', |
||||
ROPSTEN: 'ropsten', |
||||
KOVAN: 'kovan', |
||||
RINKEBY: 'rinkeby', |
||||
GOERLI: 'goerli', |
||||
} |
||||
|
||||
export const TYPOGRAPHY = { |
||||
H1: 'h1', |
||||
H2: 'h2', |
||||
H3: 'h3', |
||||
H4: 'h4', |
||||
H5: 'h5', |
||||
H6: 'h6', |
||||
H7: 'h7', |
||||
H8: 'h8', |
||||
H9: 'h9', |
||||
Paragraph: 'paragraph', |
||||
} |
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in new issue