diff --git a/packages/title/.npmignore b/packages/title/.npmignore new file mode 100644 index 00000000..037f4b09 --- /dev/null +++ b/packages/title/.npmignore @@ -0,0 +1,9 @@ +*.ts +!*.d.ts +*.spec.js +*.spec.d.ts +*.tsx +*.mdx +tsconfig.json +__snapshots__ +jest.config.js diff --git a/packages/title/jest.config.js b/packages/title/jest.config.js new file mode 100644 index 00000000..990bd442 --- /dev/null +++ b/packages/title/jest.config.js @@ -0,0 +1 @@ +module.exports = require('../../jest.config'); diff --git a/packages/title/package.json b/packages/title/package.json new file mode 100644 index 00000000..48b72bd9 --- /dev/null +++ b/packages/title/package.json @@ -0,0 +1,30 @@ +{ + "name": "@lapidist/title", + "version": "0.0.0", + "description": "Title component", + "author": "Brett Dorrans ", + "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" + } +} diff --git a/packages/title/src/Title.spec.tsx b/packages/title/src/Title.spec.tsx new file mode 100644 index 00000000..6a34d5dc --- /dev/null +++ b/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(H1).toJSON(); + expect(tree).toMatchSnapshot(); +}); + +test('it works as h2', () => { + const tree = renderer.create(H2).toJSON(); + expect(tree).toMatchSnapshot(); +}); + +test('it works as h3', () => { + const tree = renderer.create(H3).toJSON(); + expect(tree).toMatchSnapshot(); +}); + +test('it works as h4', () => { + const tree = renderer.create(H4).toJSON(); + expect(tree).toMatchSnapshot(); +}); + +test('it works as h5', () => { + const tree = renderer.create(H5).toJSON(); + expect(tree).toMatchSnapshot(); +}); + +test('it works as h6', () => { + const tree = renderer.create(H6).toJSON(); + expect(tree).toMatchSnapshot(); +}); diff --git a/packages/title/src/__snapshots__/Title.spec.tsx.snap b/packages/title/src/__snapshots__/Title.spec.tsx.snap new file mode 100644 index 00000000..9b695a6f --- /dev/null +++ b/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 +

+`; + +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 +

+`; + +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 +

+`; + +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 +

+`; + +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 +
+`; + +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 +
+`; diff --git a/packages/title/src/index.tsx b/packages/title/src/index.tsx new file mode 100644 index 00000000..f378be72 --- /dev/null +++ b/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 = styled.h1` + ${fontSizeExtraLarge()}; +`; +const H2Title: React.FC = styled.h2` + ${fontSizeLarge()}; +`; +const H3Title: React.FC = styled.h3` + ${fontSizeMedium()}; +`; +const H4Title: React.FC = styled.h4` + ${fontSizeSmall()}; +`; +const H5Title: React.FC = styled.h5` + ${fontSizeSmall()}; +`; +const H6Title: React.FC = styled.h6` + ${fontSizeSmall()}; +`; + +const TitleBySize: React.FC = ({ id, className, children, size }) => + size === 2 ? ( + + {children} + + ) : size === 3 ? ( + + {children} + + ) : size === 4 ? ( + + {children} + + ) : size === 5 ? ( + + {children} + + ) : size === 6 ? ( + + {children} + + ) : ( + + {children} + + ); + +const Title: React.FC = styled(TitleBySize)` + ${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; diff --git a/packages/title/tsconfig.json b/packages/title/tsconfig.json new file mode 100644 index 00000000..76e32b06 --- /dev/null +++ b/packages/title/tsconfig.json @@ -0,0 +1,5 @@ +{ + "$schema": "http://json.schemastore.org/tsconfig", + "extends": "../../tsconfig.base.json", + "include": ["src/**/*.ts", "src/**/*.tsx"] +} diff --git a/yarn.lock b/yarn.lock index f182d83d..0726afd4 100644 --- a/yarn.lock +++ b/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"