Skip to content
Permalink
Browse files

feat(Text): Introduce a heading font and rename size values.

BREAKING CHANGE: Renamed size prop values.

`title` -> `x5`
`heading` -> `x3`
`body` -> `x2`
`small` -> `x1`
  • Loading branch information...
HHogg committed Feb 17, 2019
1 parent f0c6490 commit ab4627fd656948e0b9bbafef21edcf99679046cc
Showing with 128 additions and 90 deletions.
  1. +1 −1 site/components/Component/ComponentCodeBlock.js
  2. +1 −1 site/components/Component/ComponentPropsEditorOneOf.js
  3. +2 −2 site/components/Component/ComponentPropsTable.js
  4. +3 −3 site/components/Component/ComponentPropsTableRow.js
  5. +1 −1 site/components/Components/Alert.js
  6. +1 −1 site/components/Components/Responsive.js
  7. +1 −1 site/components/Components/Tab.js
  8. +32 −4 site/components/Components/Text.js
  9. +1 −1 site/components/Documentation/DocumentationPage.js
  10. +1 −1 site/components/Guide/GuideCodeBlock.js
  11. +1 −1 site/components/Guide/GuideSection.js
  12. +3 −3 site/components/Guides/ResponsiveDesign.js
  13. +4 −4 site/components/Landing/Landing.js
  14. +1 −1 site/components/Landing/LandingSection.js
  15. +2 −2 site/components/LandingSections/Animations.js
  16. +1 −1 site/components/LandingSections/AnimationsControls.js
  17. +2 −2 site/components/LandingSections/BuiltWithGrid.js
  18. +2 −2 site/components/LandingSections/Components.js
  19. +1 −1 site/components/LandingSections/Guides.js
  20. +1 −1 site/components/Sidebar/SidebarMenu.js
  21. +1 −1 site/components/Sidebar/SidebarMenuItem.js
  22. +1 −1 site/components/Variables/Colors.js
  23. +2 −2 site/components/Variables/Sizing.js
  24. +2 −2 site/components/Variables/Themes.js
  25. +1 −0 site/index.ejs
  26. +1 −1 src/Application/ApplicationDetails.js
  27. +1 −1 src/Input/Input.js
  28. +1 −1 src/InputLabel/InputLabel.js
  29. +1 −1 src/Label/Label.js
  30. +4 −4 src/Markdown/Markdown.js
  31. +1 −1 src/Menu/MenuItemElement.js
  32. +1 −1 src/SelectInputLabel/SelectInputLabel.js
  33. +1 −1 src/Tab/Tab.js
  34. +1 −1 src/Table/TableHeaderCell.js
  35. +9 −24 src/Text/Text.css
  36. +10 −10 src/Text/Text.js
  37. +1 −1 src/TextArea/TextArea.js
  38. +27 −3 src/variables.css
@@ -11,7 +11,7 @@ export default class ComponentCodeBlock extends Component {
color
padding="x6"
scrollable
size="small"
size="x1"
theme="night" />
) }
</ThemeContext.Consumer>
@@ -19,7 +19,7 @@ export default class ComponentPropsEditorOneOf extends Component {
<Link
active={ value === v }
onClick={ () => onEdit(v) }
size="small">
size="x1">
<Code>
{ typeof v === 'string' ? v : JSON.stringify(v) }
</Code>
@@ -29,7 +29,7 @@ export default class ComponentPropsTable extends Component {
<Responsive queries={ [widthSmall, widthMedium, widthLarge] }>
{ (match) => components.map(({ name, props }) => (
<Base key={ name } margin="x6">
<Text margin="x2" size="heading"><Code>{ `<${name}>` }</Code></Text>
<Text margin="x2" size="x3"><Code>{ `<${name}>` }</Code></Text>
<Table margin="x2">
<TableHeader>
<TableRow>
@@ -64,7 +64,7 @@ export default class ComponentPropsTable extends Component {
{ Object.entries(props).length === 0 && (
<TableRow>
<TableCell colSpan="4">
<Text align="middle" size="small">
<Text align="middle" size="x1">
This component has no specific props.
</Text>
</TableCell>
@@ -74,13 +74,13 @@ export default class ComponentPropsTableRow extends Component {
return (
<TableRow>
<TableCell>
<Text><Code>{ name }</Code> { required && <Text inline size="small" strong>[Required]</Text> }</Text>
<Text color="shade-3" size="small">{ description }</Text>
<Text><Code>{ name }</Code> { required && <Text inline size="x1" strong>[Required]</Text> }</Text>
<Text color="shade-3" size="x1">{ description }</Text>

{ (!hasTypeColumn || !hasEditorColumn) && (
<Base margin="x2">
{ !hasTypeColumn && (
<Text margin="x1" size="small">
<Text margin="x1" size="x1">
<Text inline strong>Type:</Text> { typeNameMap[type.name] }
</Text>
) }
@@ -22,7 +22,7 @@ export default class ComponentAlert extends Component {
<DocumentationPage { ...this.props }>
<ComponentExample>
<Alert padding="x4" { ...this.state.Alert }>
<Text size="small" strong>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
<Text size="x1" strong>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
laoreet faucibus quam et fringilla. Maecenas vitae pulvinar augue.
Suspendisse mollis bibendum leo, ac porta nisi convallis eget.</Text>
</Alert>
@@ -38,7 +38,7 @@ export default class ComponentResponsive extends Component {
values={ this.state } />

<Base margin="x12">
<Text margin="x2" size="heading">The <Code>match</Code> callback</Text>
<Text margin="x2" size="x3">The <Code>match</Code> callback</Text>
<Text>The Responsive component uses the render callback pattern, and
is provided with a single argument, a matching function, which
matches against the queries given in the props.</Text>
@@ -53,7 +53,7 @@ export default class ComponentTab extends Component {
</Tabs>

<TabContent padding="x3">
<Text size="heading">Lorem Ipsum ({ this.state.activeTab })</Text>
<Text size="x3">Lorem Ipsum ({ this.state.activeTab })</Text>
<Text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Aenean sed risus ex. Aliquam blandit vitae enim at vestibulum.
Quisque aliquam, nibh eu euismod pharetra, turpis mi varius
@@ -10,8 +10,7 @@ export default class ComponentText extends Component {
super(props);
this.state = {
Text: {
align: 'middle',
size: 'heading',

},
};
}
@@ -20,9 +19,38 @@ export default class ComponentText extends Component {
return (
<DocumentationPage { ...this.props }>
<ComponentExample>
<Text { ...this.state.Text }>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<Text heading size="x5" { ...this.state.Text } margin="x3">
The spectacle before us was indeed sublime.
</Text>

<Text>
Apparently we had reached a great height in the atmosphere,
for the sky was a dead black, and the stars had ceased
to twinkle. By the same illusion which lifts the horizon
of the sea to the level of the spectator on a hillside,
the sable cloud beneath was dished out, and the car seemed
to float in the middle of an immense dark sphere, whose
upper half was strewn with silver. Looking down into the
dark gulf below, I could see a ruddy light streaming
through a rift in the clouds.
</Text>

<Text heading size="x4" { ...this.state.Text } margin="x3">
The spectacle before us was indeed sublime.
</Text>

<Text size="x1">
Apparently we had reached a great height in the atmosphere,
for the sky was a dead black, and the stars had ceased
to twinkle. By the same illusion which lifts the horizon
of the sea to the level of the spectator on a hillside,
the sable cloud beneath was dished out, and the car seemed
to float in the middle of an immense dark sphere, whose
upper half was strewn with silver. Looking down into the
dark gulf below, I could see a ruddy light streaming
through a rift in the clouds.
</Text>

</ComponentExample>

<ComponentPropsTable
@@ -51,7 +51,7 @@ export default class DocumentationPage extends Component {
) }

<Base margin="x6">
<Text margin="x2" size="title">{ name }</Text>
<Text margin="x2" size="x5">{ name }</Text>
{ description && (
<Text color="shade-3" margin="x1">
<Markdown>{ description }</Markdown>
@@ -10,7 +10,7 @@ export default class GuideCodeBlock extends Component {
paddingHorizontal="x6"
paddingVertical="x4"
scrollable
size="small"
size="x1"
theme="night" />
);
}
@@ -14,7 +14,7 @@ export default class GuideSection extends Component {
return (
<Base { ...rest } id={ title } paddingVertical="x8">
{ title && (
<Text size="heading"><Markdown>{ title }</Markdown></Text>
<Text size="x3"><Markdown>{ title }</Markdown></Text>
) }

{ children }
@@ -42,10 +42,10 @@ class MyComponent extends Component {
<Flex direction={ match('10rem') ? 'horizontal' : 'vertical' }>
{
match({
'10rem': <Text size="body">Viewport is bigger than 10rem but less than 20rem</Text>,
'20rem': <Text size="heading">Viewport is bigger than 20rem</Text>
'10rem': <Text size="x2">Viewport is bigger than 10rem but less than 20rem</Text>,
'20rem': <Text size="x3">Viewport is bigger than 20rem</Text>
}) || (
<Text size="small">Viewport is less than 10rem</Text>
<Text size="x1">Viewport is less than 10rem</Text>
)
}
</Flex>
@@ -34,7 +34,7 @@ export default class Landing extends Component {
gutter="x8">
<Flex shrink><Logo height="6rem" width="6rem" /></Flex>
<Flex shrink>
<Text align={ match(widthMedium) ? null : 'middle' } margin="x2" size="title">Preshape</Text>
<Text align={ match(widthMedium) ? null : 'middle' } margin="x2" size="x5">Preshape</Text>
<Text align={ match(widthMedium) ? null : 'middle' } color="shade-3">
A minimal design system and library of composable React components,
primarily for <Link href="https://hogg.io">my personal projects</Link>.
@@ -59,7 +59,7 @@ export default class Landing extends Component {
<Link
color="shade-3"
href={ `#${id}` }
size="small"
size="x1"
target="">{ name }</Link>
</ListItem>
)) }
@@ -69,13 +69,13 @@ export default class Landing extends Component {
<ListItem separator="|">
<Text
color="shade-3"
size="small">v{ version }</Text>
size="x1">v{ version }</Text>
</ListItem>

<ListItem separator="|">
<Link
color="shade-3"
size="small"
size="x1"
to="/changelog">CHANGELOG</Link>
</ListItem>
</List>
@@ -14,7 +14,7 @@ export default class LandingSection extends Component {

return (
<Base { ...rest } id={ id } paddingVertical="x8">
{ title && <Text margin="x4" size="title">{ title }</Text> }
{ title && <Text margin="x4" size="x4">{ title }</Text> }
{ children }
</Base>
);
@@ -62,11 +62,11 @@ export default class Animations extends Component {
</Flex>

<Flex alignChildren="middle">
<Text align="middle" margin="x1" size="small" strong>
<Text align="middle" margin="x1" size="x1" strong>
cubic-bezier({ transitionTimingFunction.join(', ') })
</Text>

<Text align="middle" size="small">
<Text align="middle" size="x1">
<Code inline>var(--transition-timing-function)</Code>
</Text>
</Flex>
@@ -38,7 +38,7 @@ export default class AnimationsControls extends Component {
onClick={ () => this.props.onChange(time) }
padding="x2">
<Text>{ name } ({ time }ms)</Text>
<Code size="small" weak>var({ variable })</Code>
<Code size="x1" weak>var({ variable })</Code>
</LinkBox>
));
}
@@ -47,7 +47,7 @@ export default class BuiltWithGrid extends Component {

<Flex grow paddingHorizontal="x3" paddingVertical="x4">
<Text margin="x1" strong>{ name }</Text>
<Text color="shade-3" margin="x1" size="small">{ description }</Text>
<Text color="shade-3" margin="x1" size="x1">{ description }</Text>
</Flex>

<Flex
@@ -59,7 +59,7 @@ export default class BuiltWithGrid extends Component {
href={ href }
paddingHorizontal="x3"
paddingVertical="x2"
size="small"
size="x1"
strong
uppercase>Check it out</Link>
</Flex>
@@ -32,7 +32,7 @@ export default class Components extends Component {
key={ name }>
<Flex grow paddingHorizontal="x3" paddingVertical="x4">
<Text margin="x1" strong>{ name }</Text>
<Text Component="div" color="shade-3" margin="x1" size="small">
<Text Component="div" color="shade-3" margin="x1" size="x1">
<Markdown>{ description }</Markdown>
</Text>
</Flex>
@@ -45,7 +45,7 @@ export default class Components extends Component {
display="block"
paddingHorizontal="x3"
paddingVertical="x2"
size="small"
size="x1"
strong
to={ to }
uppercase>View Component</Link>
@@ -24,7 +24,7 @@ export default class Guides extends Component {

<Flex grow shrink>
<Text margin="x1" strong>{ name }</Text>
<Text Component="div" margin="x1" size="small" weak>
<Text Component="div" margin="x1" size="x1" weak>
<Markdown>{ description }</Markdown>
</Text>
</Flex>
@@ -17,7 +17,7 @@ export default class SidebarMenu extends Component {
<Text
margin="x3"
paddingHorizontal="x4"
size="small"
size="x1"
strong
uppercase>
{ title }
@@ -20,7 +20,7 @@ export default class SidebarMenuItem extends Component {
display="block"
paddingHorizontal="x4"
paddingVertical="x2"
size="small"
size="x1"
to={ to }>
{ children }
</Link>
@@ -17,7 +17,7 @@ export default class Colors extends Component {
showCellCSS
showCellJS={ match(widthLarge) }
showCellValue={ match(widthMedium) }
size="small" />
size="x1" />
</GuideSection>
) }
</Responsive>
@@ -16,15 +16,15 @@ export default class Sizing extends Component {
showCellCSS
showCellJS={ match(widthSmall) }
showCellValue={ match(widthMedium) }
size="small" />
size="x1" />
</Base>

<Base margin="x8">
<SizingBorderTable
showCellCSS
showCellJS={ match(widthSmall) }
showCellValue={ match(widthMedium) }
size="small" />
size="x1" />
</Base>
</GuideSection>
) }
@@ -29,7 +29,7 @@ export default class Colors extends Component {
showCellCSS
showCellJS={ match(widthLarge) }
showCellValue={ match(widthMedium) }
size="small"
size="x1"
theme="day" />
</Base>

@@ -39,7 +39,7 @@ export default class Colors extends Component {
showCellCSS
showCellJS={ match(widthLarge) }
showCellValue={ match(widthMedium) }
size="small"
size="x1"
theme="night" />
</Base>
</GuideSection>
@@ -11,6 +11,7 @@
<% if (htmlWebpackPlugin.options.stylesheet) { %>
<link href="<%= htmlWebpackPlugin.options.stylesheet %>" rel="stylesheet">
<% } %>
<link href="https://fonts.googleapis.com/css?family=Merriweather" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700" rel="stylesheet">
</head>
<body>
@@ -22,7 +22,7 @@ export default class ApplicationDetails extends Component {
<List { ...rest } gutter="x2">
{ github && (
<ListItem separator="|">
<Text size="small">
<Text size="x1">
Check out this project on <Link href={ github }>Github</Link>
</Text>
</ListItem>
@@ -49,7 +49,7 @@ export default class Input extends Component {
disabled={ disabled }
paddingHorizontal={ padding || paddingHorizontal }
paddingVertical={ padding || paddingVertical }
size="small"
size="x1"
strong />
</InputLabel>
);
@@ -33,7 +33,7 @@ export default class InputLabel extends Component {
ellipsis
paddingHorizontal={ paddingHorizontal }
paddingVertical={ paddingVertical }
size="small"
size="x1"
strong>
{ label }
</Text>
@@ -8,7 +8,7 @@ export default class Label extends Component {
return (
<Base className="Label">
<Text { ...this.props }
size="small"
size="x1"
strong />
</Base>
);
Oops, something went wrong.

0 comments on commit ab4627f

Please sign in to comment.
You can’t perform that action at this time.