feat(@lapidist/title): init (#10)

* feat(@lapidist/title): init

* feat(@lapidist/title): initial implementation

packages/title/.npmignore

@@ -0,0 +1,9 @@
+*.ts
+!*.d.ts
+*.spec.js
+*.spec.d.ts
+*.tsx
+*.mdx
+tsconfig.json
+__snapshots__
+jest.config.js

packages/title/jest.config.js

@@ -0,0 +1 @@
+module.exports = require('../../jest.config');

packages/title/package.json

@@ -0,0 +1,30 @@
+{
+    "name": "@lapidist/title",
+    "version": "0.0.0",
+    "description": "Title component",
+    "author": "Brett Dorrans <[email protected]>",
+    "license": "MIT",
+    "main": "src/index.js",
+    "scripts": {
+        "build": "tsc -p tsconfig.json",
+        "test": "jest"
+    },
+    "publishConfig": {
+        "access": "public"
+    },
+    "release": {
+        "analyzeCommits": {
+            "preset": "angular",
+            "releaseRules": [
+                {
+                    "type": "build",
+                    "release": "minor"
+                }
+            ]
+        }
+    },
+    "dependencies": {
+        "@lapidist/design-tokens": "^1.7.0",
+        "@lapidist/theme-provider": "^1.13.0"
+    }
+}

packages/title/src/Title.spec.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import 'jest-styled-components';
+
+import Title from './index';
+
+test('it works as h1', () => {
+    const tree = renderer.create(<Title size={1}>H1</Title>).toJSON();
+    expect(tree).toMatchSnapshot();
+});
+
+test('it works as h2', () => {
+    const tree = renderer.create(<Title size={2}>H2</Title>).toJSON();
+    expect(tree).toMatchSnapshot();
+});
+
+test('it works as h3', () => {
+    const tree = renderer.create(<Title size={3}>H3</Title>).toJSON();
+    expect(tree).toMatchSnapshot();
+});
+
+test('it works as h4', () => {
+    const tree = renderer.create(<Title size={4}>H4</Title>).toJSON();
+    expect(tree).toMatchSnapshot();
+});
+
+test('it works as h5', () => {
+    const tree = renderer.create(<Title size={5}>H5</Title>).toJSON();
+    expect(tree).toMatchSnapshot();
+});
+
+test('it works as h6', () => {
+    const tree = renderer.create(<Title size={6}>H6</Title>).toJSON();
+    expect(tree).toMatchSnapshot();
+});

packages/title/src/__snapshots__/Title.spec.tsx.snap

@@ -0,0 +1,151 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`it works as h1 1`] = `
+.c0 {
+  font-size: 36px;
+}
+
+.c1 {
+  font-family: 'Montserrat',sans-serif;
+  display: block;
+  width: 100%;
+  margin: 0 0 4px;
+  color: #292b3e;
+  line-height: 1.6;
+  -webkit-letter-spacing: 0.8px;
+  -moz-letter-spacing: 0.8px;
+  -ms-letter-spacing: 0.8px;
+  letter-spacing: 0.8px;
+}
+
+<h1
+  className="c0 c1"
+>
+  H1
+</h1>
+`;
+
+exports[`it works as h2 1`] = `
+.c0 {
+  font-size: 24px;
+}
+
+.c1 {
+  font-family: 'Montserrat',sans-serif;
+  display: block;
+  width: 100%;
+  margin: 0 0 4px;
+  color: #292b3e;
+  line-height: 1.6;
+  -webkit-letter-spacing: 0.8px;
+  -moz-letter-spacing: 0.8px;
+  -ms-letter-spacing: 0.8px;
+  letter-spacing: 0.8px;
+}
+
+<h2
+  className="c0 c1"
+>
+  H2
+</h2>
+`;
+
+exports[`it works as h3 1`] = `
+.c0 {
+  font-size: 16px;
+}
+
+.c1 {
+  font-family: 'Montserrat',sans-serif;
+  display: block;
+  width: 100%;
+  margin: 0 0 4px;
+  color: #292b3e;
+  line-height: 1.6;
+  -webkit-letter-spacing: 0.8px;
+  -moz-letter-spacing: 0.8px;
+  -ms-letter-spacing: 0.8px;
+  letter-spacing: 0.8px;
+}
+
+<h3
+  className="c0 c1"
+>
+  H3
+</h3>
+`;
+
+exports[`it works as h4 1`] = `
+.c0 {
+  font-size: 14px;
+}
+
+.c1 {
+  font-family: 'Montserrat',sans-serif;
+  display: block;
+  width: 100%;
+  margin: 0 0 4px;
+  color: #292b3e;
+  line-height: 1.6;
+  -webkit-letter-spacing: 0.8px;
+  -moz-letter-spacing: 0.8px;
+  -ms-letter-spacing: 0.8px;
+  letter-spacing: 0.8px;
+}
+
+<h4
+  className="c0 c1"
+>
+  H4
+</h4>
+`;
+
+exports[`it works as h5 1`] = `
+.c0 {
+  font-size: 14px;
+}
+
+.c1 {
+  font-family: 'Montserrat',sans-serif;
+  display: block;
+  width: 100%;
+  margin: 0 0 4px;
+  color: #292b3e;
+  line-height: 1.6;
+  -webkit-letter-spacing: 0.8px;
+  -moz-letter-spacing: 0.8px;
+  -ms-letter-spacing: 0.8px;
+  letter-spacing: 0.8px;
+}
+
+<h5
+  className="c0 c1"
+>
+  H5
+</h5>
+`;
+
+exports[`it works as h6 1`] = `
+.c0 {
+  font-size: 14px;
+}
+
+.c1 {
+  font-family: 'Montserrat',sans-serif;
+  display: block;
+  width: 100%;
+  margin: 0 0 4px;
+  color: #292b3e;
+  line-height: 1.6;
+  -webkit-letter-spacing: 0.8px;
+  -moz-letter-spacing: 0.8px;
+  -ms-letter-spacing: 0.8px;
+  letter-spacing: 0.8px;
+}
+
+<h6
+  className="c0 c1"
+>
+  H6
+</h6>
+`;

packages/title/src/index.tsx

@@ -0,0 +1,80 @@
+import React from 'react';
+import styled from 'styled-components';
+import {
+    fontFamilyBold,
+    fontSizeExtraLarge,
+    fontSizeLarge,
+    fontSizeMedium,
+    fontSizeSmall
+} from '@lapidist/design-tokens';
+import { defaultTheme } from '@lapidist/theme-provider';
+
+export type TitleSize = 1 | 2 | 3 | 4 | 5 | 6;
+
+export interface TitleProps {
+    /** The Title's id. */
+    readonly id?: string;
+    /** The Title's classname. */
+    readonly className?: string;
+    /** The Title's size. */
+    readonly size?: TitleSize;
+}
+
+const H1Title: React.FC<TitleProps> = styled.h1`
+    ${fontSizeExtraLarge()};
+`;
+const H2Title: React.FC<TitleProps> = styled.h2`
+    ${fontSizeLarge()};
+`;
+const H3Title: React.FC<TitleProps> = styled.h3`
+    ${fontSizeMedium()};
+`;
+const H4Title: React.FC<TitleProps> = styled.h4`
+    ${fontSizeSmall()};
+`;
+const H5Title: React.FC<TitleProps> = styled.h5`
+    ${fontSizeSmall()};
+`;
+const H6Title: React.FC<TitleProps> = styled.h6`
+    ${fontSizeSmall()};
+`;
+
+const TitleBySize: React.FC<TitleProps> = ({ id, className, children, size }) =>
+    size === 2 ? (
+        <H2Title id={id} className={className}>
+            {children}
+        </H2Title>
+    ) : size === 3 ? (
+        <H3Title id={id} className={className}>
+            {children}
+        </H3Title>
+    ) : size === 4 ? (
+        <H4Title id={id} className={className}>
+            {children}
+        </H4Title>
+    ) : size === 5 ? (
+        <H5Title id={id} className={className}>
+            {children}
+        </H5Title>
+    ) : size === 6 ? (
+        <H6Title id={id} className={className}>
+            {children}
+        </H6Title>
+    ) : (
+        <H1Title id={id} className={className}>
+            {children}
+        </H1Title>
+    );
+
+const Title: React.FC<TitleProps> = styled(TitleBySize)<TitleProps>`
+    ${fontFamilyBold()};
+
+    display: block;
+    width: 100%;
+    margin: 0 0 ${defaultTheme.sizing.xxs};
+    color: ${defaultTheme.colors.greys.dark};
+    line-height: 1.6;
+    letter-spacing: 0.8px;
+`;
+
+export default Title;

packages/title/tsconfig.json

@@ -0,0 +1,5 @@
+{
+    "$schema": "http://json.schemastore.org/tsconfig",
+    "extends": "../../tsconfig.base.json",
+    "include": ["src/**/*.ts", "src/**/*.tsx"]
+}

yarn.lock

@@ -412,6 +412,13 @@
   dependencies:
     "@lapidist/theme-provider" "^1.5.0"
 
+"@lapidist/design-tokens@^1.7.0":
+  version "1.7.0"
+  resolved "https://registry.npmjs.org/@lapidist/design-tokens/-/design-tokens-1.7.0.tgz#b03f7ead10d5b67cd8128bf433ba359d902fc37d"
+  integrity sha512-K8mOejgIuY4GsV3lzfwzzkdlwCQRxNnJBeUjYNXuscSEHndtXv3Fd0aLbBojSyStSCNU9Z38UVyUJUIwNFjYNQ==
+  dependencies:
+    "@lapidist/theme-provider" "^1.5.0"
+
 "@lapidist/linting@^1.3.0":
   version "1.4.0"
   resolved "https://registry.npmjs.org/@lapidist/linting/-/linting-1.4.0.tgz#8556e244d266df302f484f4b26e5fd1c300413cc"
@@ -436,6 +443,11 @@
   resolved "https://registry.npmjs.org/@lapidist/theme-provider/-/theme-provider-1.12.0.tgz#bcba4733101c870dd9a9399f6cd10d218ff8f552"
   integrity sha512-nkbyeL6dHUMkFuU30CNF9BcVzazpTAkiHjQrBH08ja6fJhKhByBWIl2vO3K7o+gFpAdTG6MDb0FR+2iQgrlOrQ==
 
+"@lapidist/theme-provider@^1.13.0":
+  version "1.13.0"
+  resolved "https://registry.npmjs.org/@lapidist/theme-provider/-/theme-provider-1.13.0.tgz#dec0a8b408461867cba0c5136d464d74775457fb"
+  integrity sha512-2Fv5ObyVplWOlrOeBMzZvXdguMxymcdmxL0+l7s2un9YMt98JoZUhz4h9GKauVoFesCxqZBnKKwBIw7SKUNFng==
+
 "@lapidist/theme-provider@^1.5.0", "@lapidist/theme-provider@^1.7.0":
   version "1.9.0"
   resolved "https://registry.npmjs.org/@lapidist/theme-provider/-/theme-provider-1.9.0.tgz#5f90c86b4a99e0974b76d798d4adc16ab2aa7cc9"