Press n or j to go to the next uncovered block, b, p or k for the previous block.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 | 20x 20x 20x 20x 20x 12x 12x 12x 12x 20x 20x | import React from 'react'; import styled from 'styled-components'; import { fontWeight, layout, space } from 'styled-system'; import { colorCore, defaultControlStyles, defaultStylesBase, ellipsisCore, fontFamilyCore, fontSizeCore, fontStyleCore, layoutProps, letterSpacingCore, lineHeightCore, textAlignCore, textDecorationCore, typography, } from 'src/utils/styledHelpers'; import { getGlobalStyles } from 'src/global-styles'; import { PlainTextComponent } from './component'; const { grid: gridSchema } = getGlobalStyles(); const PlainTextStyledComponent = styled(PlainTextComponent)` ${colorCore} ${fontFamilyCore} ${fontSizeCore} ${fontStyleCore} ${fontWeight} ${layout} ${letterSpacingCore} ${lineHeightCore} ${space} ${textAlignCore} ${textDecorationCore} > div { ${ellipsisCore} } box-sizing: border-box; `; PlainTextStyledComponent.propTypes = { ...layoutProps.propTypes, ...space.propTypes, ...typography.propTypes, }; PlainTextStyledComponent.defaultProps = { ...defaultStylesBase, pb: gridSchema.gutter || defaultControlStyles.padding, pl: gridSchema.gutter || defaultControlStyles.padding, pr: gridSchema.gutter || defaultControlStyles.padding, pt: gridSchema.gutter || defaultControlStyles.padding, width: 1, }; const PlainText = props => { const { formStyle, pb, pt, ...otherProps } = props; const paddingBottom = formStyle === 'filled' ? '0.5rem' : pb; const paddingTop = formStyle === 'filled' ? 'calc(0.7rem + 1px)' : pt; return ( <PlainTextStyledComponent pb={paddingBottom} pt={paddingTop} {...otherProps} /> ); }; PlainText.propTypes = { ...space.propTypes, }; PlainText.defaultProps = { pb: gridSchema.gutter || defaultControlStyles.padding, pl: gridSchema.gutter || defaultControlStyles.padding, pr: gridSchema.gutter || defaultControlStyles.padding, pt: gridSchema.gutter || defaultControlStyles.padding, }; /** @component */ export { PlainText }; |