Skip to content

Commit

Permalink
Merge pull request #54 from mlampedx/feat-text
Browse files Browse the repository at this point in the history 
Feat(Text) Create universal Text component
  • Loading branch information
@ooHmartY
ooHmartY authored Jul 19, 2018
2 parents c4c72b8 + 3f02dd7 commit b5cff55
Show file tree
Hide file tree
Showing 13 changed files with 1,519 additions and 641 deletions.
12 changes: 11 additions & 1 deletion catalog/pages/typography/index.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import { pageLoader } from "catalog";

import { colors, typography } from "../../../src/theme";
import { Text } from "../../../src/components/Text";
import { Container, Row, Column } from "../../../src/components/Grid";

const textStyle = {
Expand All @@ -23,6 +24,13 @@ const fontSizeRowStyle = {
alignItems: "center"
};

const fontSizeRowStyleDark = {
padding: "20px",
display: "flex",
alignItems: "center",
backgroundColor: colors.blackPearl
};

const getFontWeightTextStyle = props => ({
...textStyle,
...props
Expand All @@ -37,9 +45,11 @@ export default {
Container,
Row,
Column,
Text,
getFontWeightTextStyle,
fontWeightLabelStyle,
fontSizeRowStyle
fontSizeRowStyle,
fontSizeRowStyleDark
},
content: pageLoader(() => import("./index.md"))
};
275 changes: 247 additions & 28 deletions catalog/pages/typography/index.md
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,54 @@
### Text

Text Component with a dark, light, and accent variants available.

### Props

```table
span: 6
rows:
- Prop: tag
Type: string
Default: div
Notes: Determines the tag of the underlying element. One of "div", "span" and "p".
- Prop: variant
Type: string
Default: dark
Notes: Determines the style of the Text. One of "dark", "light", and "accent".
- Prop: accent
Type: string
Default:
Notes: If variant equals "accent", this props determines the style of the Text. One of "aquamarine", "azure", "alert", "caution", "cruz", "heliotrope", "positive", "summerSky", and "turquoise".
- Prop: size
Type: string
Default: hecto
Notes: Determines the font-size of the Text. One of "uno", "hecto", "kilo", "giga", and "tera".
- Prop: weight
Type: string
Default: regular
Notes: Determines the font-weight of the Text. One of "regular" and "semiBold".
- Prop: primary
Type: boolean
Default: false
Notes: Determines if the base hue of the font-color should be used.
- Prop: secondary
Type: boolean
Default: false
Notes: Determines if the light hue of the font-color should be used.
- Prop: disabled
Type: boolean
Default: false
Notes: Determines if the muted hue of the font-color should be used.
- Prop: children
Type: node
Default:
Notes: Render as the Text's children
- Prop: ...props
Type: any
Default:
Notes: Passes through any other props to underlying div, or in the case of a different tag prop being passed, other element
```

### Font Weights

```react
Expand Down Expand Up @@ -33,66 +84,234 @@
const str = "Better is together";
<Container>
<Row style={fontSizeRowStyle}>
<Column medium={2} >12 px</Column>
<Column medium={6} style={{fontSize: "12px"}}>{str}</Column>
<Column medium={2}>Uno - 12 px</Column>
<Column medium={6}>
<Text size="uno">{str}</Text>
</Column>
</Row>
<Row style={fontSizeRowStyle}>
<Column medium={2}>14 px</Column>
<Column medium={6} style={{fontSize: "14px"}}>{str}</Column>
<Column medium={2}>Hecto - 14 px</Column>
<Column medium={6}>
<Text size="hecto">{str}</Text>
</Column>
</Row>
<Row style={fontSizeRowStyle}>
<Column medium={2}>16 px</Column>
<Column medium={6} style={{fontSize: "16px"}}>{str}</Column>
<Column medium={2}>Kilo - 16 px</Column>
<Column medium={6}}>
<Text size="kilo">{str}</Text>
</Column>
</Row>
<Row style={fontSizeRowStyle}>
<Column medium={2}>20 px</Column>
<Column medium={6} style={{fontSize: "20px"}}>{str}</Column>
<Column medium={2}>Giga - 20 px</Column>
<Column medium={6}>
<Text size="giga">{str}</Text>
</Column>
</Row>
<Row style={fontSizeRowStyle}>
<Column medium={2}>24 px</Column>
<Column medium={6} style={{fontSize: "24px"}}>{str}</Column>
<Column medium={2}>Tera - 24 px</Column>
<Column medium={6}>
<Text size="tera">{str}</Text>
</Column>
</Row>
<Row style={fontSizeRowStyle}>
<Column medium={2}>32 px</Column>
<Column medium={6} style={{fontSize: "32px"}}>{str}</Column>
<Column medium={2}>Zetta - 32 px</Column>
<Column medium={6} tyle={{fontSize: "32px"}}>
{str}
</Column>
</Row>
<Row style={fontSizeRowStyle}>
<Column medium={2}>46 px</Column>
<Column medium={6} style={{fontSize: "42px"}}>{str}</Column>
<Column medium={2}>Bronto - 46 px</Column>
<Column medium={6} style={{fontSize: "46px"}}>
{str}
</Column>
</Row>
</Container>
```

### Text Variations
### Text Variants

```react
const str = "Better is together";
<Container>
<Row style={fontSizeRowStyle}>
<Column medium={2} >Primary</Column>
<Column medium={6} style={{color: colors.onyx.base}}>{str}</Column>
<Column medium={2} >
<Text size="giga">Variant</Text>
</Column>
<Column medium={3} >
<Text primary={true} size="giga">Primary</Text>
</Column>
<Column medium={3} >
<Text secondary={true} size="giga">Secondary</Text>
</Column>
<Column medium={3} >
<Text disabled={true} size="giga">Disabled</Text>
</Column>
</Row>
<Row style={fontSizeRowStyle}>
<Column medium={2}>Seconday</Column>
<Column medium={6} style={{color: colors.onyx.light}}>{str}</Column>
<Column medium={2} >
<Text size="kilo">Dark</Text>
</Column>
<Column medium={3} >
<Text primary={true} size="kilo">{str}</Text>
</Column>
<Column medium={3} >
<Text secondary={true} size="kilo">{str}</Text>
</Column>
<Column medium={3} >
<Text disabled={true} size="kilo">{str}</Text>
</Column>
</Row>
<Row style={fontSizeRowStyleDark}>
<Column medium={2} >
<Text primary={true} variant="light"co size="kilo">Light</Text>
</Column>
<Column medium={3} >
<Text primary={true} variant="light" size="kilo">{str}</Text>
</Column>
<Column medium={3} >
<Text secondary={true} variant="light" size="kilo">{str}</Text>
</Column>
<Column medium={3} >
<Text disabled={true} variant="light" size="kilo">{str}</Text>
</Column>
</Row>
</Container>
```

### Text Accents

```react
const str = "Better is together";
<Container>
<Row style={fontSizeRowStyle}>
<Column medium={2}>Disabled</Column>
<Column medium={6} style={{color: colors.onyx.muted}}>{str}</Column>
<Column medium={2} >
<Text size="giga">Accent</Text>
</Column>
<Column medium={3} >
<Text primary={true} size="giga">Primary</Text>
</Column>
<Column medium={3} >
<Text secondary={true} size="giga">Secondary</Text>
</Column>
<Column medium={3} >
<Text disabled={true} size="giga">Disabled</Text>
</Column>
</Row>
<Row style={fontSizeRowStyle}>
<Column medium={2}>Alert</Column>
<Column medium={6} style={{color: colors.alert.base}}>{str}</Column>
<Column medium={2} >
<Text variant="accent" accent="aquamarine" size="kilo">Aquamarine</Text>
</Column>
<Column medium={3} >
<Text variant="accent" accent="aquamarine" primary={true} size="kilo">{str}</Text>
</Column>
</Row>
<Row style={fontSizeRowStyle}>
<Column medium={2}>Caution</Column>
<Column medium={6} style={{color: colors.caution.base}}>{str}</Column>
<Column medium={2} >
<Text variant="accent" accent="azure" primary={true} size="kilo">Azure</Text>
</Column>
<Column medium={3} >
<Text variant="accent" accent="azure" primary={true} size="kilo">{str}</Text>
</Column>
<Column medium={3} >
<Text variant="accent" accent="azure" secondary={true} size="kilo">{str}</Text>
</Column>
<Column medium={3} >
<Text variant="accent" accent="azure" disabled={true} size="kilo">{str}</Text>
</Column>
</Row>
<Row style={fontSizeRowStyle}>
<Column medium={2}>Affirming</Column>
<Column medium={6} style={{color: colors.positive.base}}>{str}</Column>
<Column medium={2} >
<Text variant="accent" accent="alert" primary={true} size="kilo">Alert</Text>
</Column>
<Column medium={3} >
<Text variant="accent" accent="alert" primary={true} size="kilo">{str}</Text>
</Column>
<Column medium={3} >
<Text variant="accent" accent="alert" secondary={true} size="kilo">{str}</Text>
</Column>
<Column medium={3} >
<Text variant="accent" accent="alert" disabled={true} size="kilo">{str}</Text>
</Column>
</Row>
<Row style={fontSizeRowStyle}>
<Column medium={2} >
<Text variant="accent" accent="caution" primary={true} size="kilo">Caution</Text>
</Column>
<Column medium={3} >
<Text variant="accent" accent="caution" primary={true} size="kilo">{str}</Text>
</Column>
<Column medium={3} >
<Text variant="accent" accent="caution" secondary={true} size="kilo">{str}</Text>
</Column>
<Column medium={3} >
<Text variant="accent" accent="caution" disabled={true} size="kilo">{str}</Text>
</Column>
</Row>
<Row style={fontSizeRowStyle}>
<Column medium={2} >
<Text variant="accent" accent="cruz" primary={true} size="kilo">Cruz</Text>
</Column>
<Column medium={3} >
<Text variant="accent" accent="cruz" primary={true} size="kilo">{str}</Text>
</Column>
<Column medium={3} >
<Text variant="accent" accent="cruz" secondary={true} size="kilo">{str}</Text>
</Column>
<Column medium={3} >
<Text variant="accent" accent="cruz" disabled={true} size="kilo">{str}</Text>
</Column>
</Row>
<Row style={fontSizeRowStyle}>
<Column medium={2} >
<Text variant="accent" accent="heliotrope" primary={true} size="kilo">Heliotrope</Text>
</Column>
<Column medium={3} >
<Text variant="accent" accent="heliotrope" primary={true} size="kilo">{str}</Text>
</Column>
<Column medium={3} >
<Text variant="accent" accent="heliotrope" secondary={true} size="kilo">{str}</Text>
</Column>
<Column medium={3} >
<Text variant="accent" accent="heliotrope" disabled={true} size="kilo">{str}</Text>
</Column>
</Row>
<Row style={fontSizeRowStyle}>
<Column medium={2} >
<Text variant="accent" accent="positive" primary={true} size="kilo">Positive</Text>
</Column>
<Column medium={3} >
<Text variant="accent" accent="positive" primary={true} size="kilo">{str}</Text>
</Column>
<Column medium={3} >
<Text variant="accent" accent="positive" secondary={true} size="kilo">{str}</Text>
</Column>
<Column medium={3} >
<Text variant="accent" accent="positive" disabled={true} size="kilo">{str}</Text>
</Column>
</Row>
<Row style={fontSizeRowStyle}>
<Column medium={2} >
<Text variant="accent" accent="summerSky" primary={true} size="kilo">Summer Sky</Text>
</Column>
<Column medium={3} >
<Text variant="accent" accent="summerSky" primary={true} size="kilo">{str}</Text>
</Column>
<Column medium={3} >
<Text variant="accent" accent="summerSky" secondary={true} size="kilo">{str}</Text>
</Column>
<Column medium={3} >
<Text variant="accent" accent="summerSky" disabled={true} size="kilo">{str}</Text>
</Column>
</Row>
<Row style={fontSizeRowStyle}>
<Column medium={2} >
<Text variant="accent" accent="turquoise" primary={true} size="kilo">Turquoise</Text>
</Column>
<Column medium={3} >
<Text variant="accent" accent="turquoise" primary={true} size="kilo">{str}</Text>
</Column>
</Row>
</Container>
```
Loading

0 comments on commit b5cff55

Please sign in to comment.