Merge pull request #10 from open-source-miami/all-contributors/add-ar…

…omanarguello

docs: add aromanarguello as a contributor

.all-contributorsrc

@@ -13,7 +13,8 @@
       "contributions": [
         "infra",
         "test",
-        "code"
+        "code",
+        "maintenance"
       ]
     },
     {

.gitignore

@@ -6,4 +6,8 @@ storybook-static
 
 junit.xml
 
-coverage
+coverage
+
+.DS_Store
+
+assets/.DS_Store

README.md

@@ -74,7 +74,7 @@ If this is your first time contributing to an Open Source Project, maybe it woul
 <!-- prettier-ignore -->
 <table>
   <tr>
-    <td align="center"><a href="https://github.com/aromanarguello"><img src="https://avatars0.githubusercontent.com/u/28843542?v=4" width="100px;" alt="aromanarguello"/><br /><sub><b>aromanarguello</b></sub></a><br /><a href="#infra-aromanarguello" title="Infrastructure (Hosting, Build-Tools, etc)">🚇</a> <a href="https://github.com/open-source-miami/component-library/commits?author=aromanarguello" title="Tests">⚠️</a> <a href="https://github.com/open-source-miami/component-library/commits?author=aromanarguello" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/aromanarguello"><img src="https://avatars0.githubusercontent.com/u/28843542?v=4" width="100px;" alt="aromanarguello"/><br /><sub><b>aromanarguello</b></sub></a><br /><a href="#infra-aromanarguello" title="Infrastructure (Hosting, Build-Tools, etc)">🚇</a> <a href="https://github.com/open-source-miami/component-library/commits?author=aromanarguello" title="Tests">⚠️</a> <a href="https://github.com/open-source-miami/component-library/commits?author=aromanarguello" title="Code">💻</a> <a href="#maintenance-aromanarguello" title="Maintenance">🚧</a></td>
     <td align="center"><a href="http://sherwino.co"><img src="https://avatars2.githubusercontent.com/u/2348227?v=4" width="100px;" alt="Sherwino"/><br /><sub><b>Sherwino</b></sub></a><br /><a href="https://github.com/open-source-miami/component-library/commits?author=sherwino" title="Documentation">📖</a> <a href="#infra-sherwino" title="Infrastructure (Hosting, Build-Tools, etc)">🚇</a></td>
     <td align="center"><a href="http://martindidiego.com"><img src="https://avatars2.githubusercontent.com/u/14933234?v=4" width="100px;" alt="Martin Di Diego"/><br /><sub><b>Martin Di Diego</b></sub></a><br /><a href="#infra-martindidiego" title="Infrastructure (Hosting, Build-Tools, etc)">🚇</a> <a href="https://github.com/open-source-miami/component-library/commits?author=martindidiego" title="Tests">⚠️</a> <a href="https://github.com/open-source-miami/component-library/commits?author=martindidiego" title="Code">💻</a></td>
   </tr>

src/Typography/README.md

@@ -0,0 +1,16 @@
+<h1>Typography</h1>
+
+This component is meant to wrap any text component providing it with flexible props to designate it's text attribute, font-family and padding.
+
+<!-- STORY -->
+
+<h2>Basic Usage</h2>
+
+```jsx
+<Typography variant="p" fontFamily="Roboto, sans-serif">
+  Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eligendi quia
+  distinctio ab consequuntur nisi dolores harum mollitia quam consectetur atque,
+  obcaecati repellat enim, voluptas quibusdam. Esse itaque debitis expedita
+  adipisci.
+</Typography>
+```

src/Typography/Typography.stories.tsx

@@ -0,0 +1,37 @@
+import * as React from "react"
+import { storiesOf } from "@storybook/react"
+import Typography from "."
+import TypographyReadme from "./README.md"
+
+storiesOf("Typography", module)
+  .addParameters({
+    readme: {
+      content: TypographyReadme,
+      codeTheme: "atom-dark"
+    }
+  })
+  .add("Text", () => (
+    <div>
+      <Typography variant="h1" fontFamily="Notable">
+        H1: Heading h1
+      </Typography>
+      <Typography variant="h2" fontFamily="Notable">
+        H2: Heading h2
+      </Typography>
+      <Typography variant="h3" fontFamily="Roboto">
+        H3: Heading h3
+      </Typography>
+      <Typography variant="h4" fontFamily="Roboto">
+        H4: Heading h4
+      </Typography>
+      <Typography variant="h5" fontFamily="Roboto">
+        H5: Heading h5
+      </Typography>
+      <Typography variant="h6" fontFamily="Roboto">
+        H6: Heading h6
+      </Typography>
+      <Typography variant="p" fontFamily="Roboto">
+        P: Paragraph p
+      </Typography>
+    </div>
+  ))

src/Typography/Typography.test.tsx

@@ -0,0 +1,6 @@
+import * as React from "react"
+import Typography from "."
+
+it("Typography snapshot", () => {
+  expect(<Typography variant="h1">Alex</Typography>).toMatchSnapshot()
+})

src/Typography/Typography.tsx

@@ -0,0 +1,84 @@
+import * as React from "react"
+import styled from "styled-components"
+import {
+  fontSize,
+  fontStyle,
+  fontWeight,
+  letterSpacing,
+  lineHeight,
+  textAlign,
+  space,
+  color,
+  SpaceProps,
+  ColorProps,
+  FontSizeProps,
+  FontStyleProps,
+  FontWeightProps,
+  LetterSpacingProps,
+  LineHeightProps,
+  TextAlignProps,
+  compose,
+  FlexProps
+} from "styled-system"
+
+export type Typography = FlexProps &
+  FontSizeProps &
+  FontStyleProps &
+  FontWeightProps &
+  LetterSpacingProps &
+  LineHeightProps &
+  TextAlignProps &
+  SpaceProps &
+  ColorProps
+
+interface ITypography extends Typography {
+  /**
+   * React children
+   */
+  children: React.ReactNode
+  /**
+   * Text variants
+   */
+  variant: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span"
+  /**
+   * Font family selection
+   */
+  fontFamily?: "Roboto" | "Notable"
+}
+
+const typography = compose(
+  fontSize,
+  fontStyle,
+  fontWeight,
+  letterSpacing,
+  lineHeight,
+  textAlign
+)
+
+const returnStyled = (arg: string): any => styled[arg]
+
+const Typography: React.FC<ITypography> = props => {
+  const StyledTypography = returnStyled(props.variant)<ITypography>`
+    ${color}
+    ${typography}
+    ${space}
+    
+    font-family: ${(p: ITypography) =>
+      p.fontFamily === "Notable"
+        ? "Notable, sans-serif"
+        : "Roboto, sans-serif"};
+    font-face: {
+      src: @import ('/assets/fonts/Notable-Regular.ttf')
+    }
+    font-face: {
+      src: @import ('/assets/fonts/Roboto-Regular.ttf')
+    }
+ `
+  return (
+    <StyledTypography fontFamily={props.fontFamily} {...props}>
+      {props.children}
+    </StyledTypography>
+  )
+}
+
+export default Typography

src/Typography/__snapshots__/Typography.test.tsx.snap

@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Typography snapshot 1`] = `
+<Typography
+  variant="h1"
+>
+  Alex
+</Typography>
+`;

src/Typography/index.ts

@@ -0,0 +1 @@
+export { default } from "./Typography"