maverick/flex-template-web
1
0
Fork 0
mirror of https://github.com/kingomarnajjar/flex-template-web.git synced 2026-07-29 05:00:43 +10:00
Code Issues Projects Releases Packages Wiki Activity Actions

Format with Prettier

Browse source
This commit is contained in:
Kimmo Puputti 2017-05-29 15:56:48 +03:00
parent 955fcf2a88
commit 4b25d40da3
1 changed files with 21 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

36
src/containers/StyleguidePage/Typography.example.js
View file

@ -3,13 +3,12 @@ import classNames from 'classnames';
import css from './StyleguidePage.css';
import mpStyle from '../../marketplace.css';
const Font = props => {
const Font = props => {
const { component: TextComponent, description, styling } = props;
return (
<div className={css.fontCard}>
<div className={css.element}>
<TextComponent/>
<TextComponent />
</div>
<div className={css.description}>
<p>{description}</p>
@ -25,11 +24,10 @@ Font.propTypes = {
component: func.isRequired,
description: string.isRequired,
styling: string.isRequired,
}
};
const Fonts = () => {
const h1FontStyling =
`Styles affecting size:
const Fonts = () => {
const h1FontStyling = `Styles affecting size:
font-size: 48px;
line-height: 54px;
padding: 5px 0 1px 0;`;
@ -87,42 +85,50 @@ const Fonts = () => {
</p>
<div className={fontsContainerClasses}>
<Font
component={() => (<h1>H1 (.h1Font): Lorem ipsum dolor sit amet</h1>)}
component={() => <h1>H1 (.h1Font): Lorem ipsum dolor sit amet</h1>}
description="Biggest font style. Used in main heading on a page. "
styling={h1FontStyling}
/>
<Font
component={() => (<h2>H2 (.h2Font): Lorem ipsum dolor sit amet</h2>)}
component={() => <h2>H2 (.h2Font): Lorem ipsum dolor sit amet</h2>}
description="Works as a subtitle. Inline component using .h2Font can be aligned with .h1Font to the same baseline by dropping it 18px (e.g. with margin-top)."
styling={h2FontStyling}
/>
<Font
component={() => (<h3>H3 (.h3Font): Lorem ipsum dolor sit amet</h3>)}
component={() => <h3>H3 (.h3Font): Lorem ipsum dolor sit amet</h3>}
description="Works as a subtitle and in sidebar menu."
styling={h3FontStyling}
/>
<Font
component={() => (<h4>H4 (.h4Font): Lorem ipsum dolor sit amet</h4>)}
component={() => <h4>H4 (.h4Font): Lorem ipsum dolor sit amet</h4>}
description="Works as a subtitle."
styling={h4FontStyling}
/>
<Font
component={() => (<h5>H5 (.h5Font): Lorem ipsum dolor sit amet</h5>)}
component={() => <h5>H5 (.h5Font): Lorem ipsum dolor sit amet</h5>}
description="Can be used as a subtitle and also as a label font for form inputs."
styling={h5FontStyling}
/>
<Font
component={() => (<h6>H6 (.h6Font): Lorem ipsum dolor sit amet consectetur adebisci velit</h6>)}
component={() => (
<h6>H6 (.h6Font): Lorem ipsum dolor sit amet consectetur adebisci velit</h6>
)}
description="Works as a subtitle."
styling={h6FontStyling}
/>
<Font
component={() => (<p>Default font (.bodyFont, p, button, etc.): Lorem ipsum dolor sit amet</p>)}
component={() => (
<p>Default font (.bodyFont, p, button, etc.): Lorem ipsum dolor sit amet</p>
)}
description="Paragraphs and other body texts."
styling={bodyFontStyling}
/>
<Font
component={() => (<p className={mpStyle.tinyFont}>Tiny mobile text (.tinyFont): Lorem ipsum dolor sit amet</p>)}
component={() => (
<p className={mpStyle.tinyFont}>
Tiny mobile text (.tinyFont): Lorem ipsum dolor sit amet
</p>
)}
description="Very small print."
styling={tinyFontStyling}
/>