From 57259e7bd813f126a4fcb764b9ad65bd77cedfc5 Mon Sep 17 00:00:00 2001 From: Brett Dorrans Date: Fri, 6 Dec 2019 14:50:15 +0000 Subject: [PATCH] feat(@lapidist/link): init (#12) * feat(@lapidist/link): init * feat(@lapidist/link): initial implementation * style: update snapshot * build: remove nested deps --- packages/link/.npmignore | 9 +++ packages/link/jest.config.js | 1 + packages/link/package.json | 26 ++++++++ packages/link/src/Link.spec.tsx | 10 +++ .../link/src/__snapshots__/Link.spec.tsx.snap | 53 +++++++++++++++ packages/link/src/index.tsx | 64 +++++++++++++++++++ packages/link/tsconfig.json | 5 ++ 7 files changed, 168 insertions(+) create mode 100644 packages/link/.npmignore create mode 100644 packages/link/jest.config.js create mode 100644 packages/link/package.json create mode 100644 packages/link/src/Link.spec.tsx create mode 100644 packages/link/src/__snapshots__/Link.spec.tsx.snap create mode 100644 packages/link/src/index.tsx create mode 100644 packages/link/tsconfig.json diff --git a/packages/link/.npmignore b/packages/link/.npmignore new file mode 100644 index 00000000..037f4b09 --- /dev/null +++ b/packages/link/.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/link/jest.config.js b/packages/link/jest.config.js new file mode 100644 index 00000000..990bd442 --- /dev/null +++ b/packages/link/jest.config.js @@ -0,0 +1 @@ +module.exports = require('../../jest.config'); diff --git a/packages/link/package.json b/packages/link/package.json new file mode 100644 index 00000000..31b2fc84 --- /dev/null +++ b/packages/link/package.json @@ -0,0 +1,26 @@ +{ + "name": "@lapidist/link", + "version": "0.0.0", + "description": "Link 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" + } + ] + } + } +} diff --git a/packages/link/src/Link.spec.tsx b/packages/link/src/Link.spec.tsx new file mode 100644 index 00000000..9fba63e9 --- /dev/null +++ b/packages/link/src/Link.spec.tsx @@ -0,0 +1,10 @@ +import React from 'react'; +import renderer from 'react-test-renderer'; +import 'jest-styled-components'; + +import Link from './index'; + +test('it works', () => { + const tree = renderer.create().toJSON(); + expect(tree).toMatchSnapshot(); +}); diff --git a/packages/link/src/__snapshots__/Link.spec.tsx.snap b/packages/link/src/__snapshots__/Link.spec.tsx.snap new file mode 100644 index 00000000..99fe1ae5 --- /dev/null +++ b/packages/link/src/__snapshots__/Link.spec.tsx.snap @@ -0,0 +1,53 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`it works 1`] = ` +.c0 { + position: relative; + font-family: 'Montserrat',sans-serif; + outline: 2px transparent; + outline-offset: 2px; + display: inline; + font-size: inherit; + line-height: inherit; + -webkit-letter-spacing: inherit; + -moz-letter-spacing: inherit; + -ms-letter-spacing: inherit; + letter-spacing: inherit; + -webkit-text-decoration: none; + text-decoration: none; + color: #17a3a5; + margin: 0 0 16px; + -webkit-transition: background-color cubic-bezier(0.6,0.04,0.98,0.7),color cubic-bezier(0.6,0.04,0.98,0.7); + transition: background-color cubic-bezier(0.6,0.04,0.98,0.7),color cubic-bezier(0.6,0.04,0.98,0.7); +} + +.c0:focus { + outline: 2px solid #ebc764; +} + +.c0:after { + position: absolute; + width: 100%; + height: 2px; + top: 90%; + left: 0; + right: 0; + background: #4AD6D8; + content: ''; +} + +.c0:hover { + color: #007072; +} + +.c0:hover:after { + background: #17a3a5; +} + + + venenatis + +`; diff --git a/packages/link/src/index.tsx b/packages/link/src/index.tsx new file mode 100644 index 00000000..0abb6f88 --- /dev/null +++ b/packages/link/src/index.tsx @@ -0,0 +1,64 @@ +import React from 'react'; +import styled from 'styled-components'; +import { + absolute, + fontFamilyRegular, + relative, + focus, + defaultEasing +} from '@lapidist/design-tokens'; +import { defaultTheme } from '@lapidist/theme-provider'; + +export interface LinkProps { + /** The Link's id. */ + readonly id?: string; + /** The Link's classname. */ + readonly className?: string; + /** The Link's title. */ + readonly title: string; + /** The Link's href. */ + readonly href: string; +} + +const LinkContainer: React.FC = ({ id, className, title, href }) => ( + + {title} + +); + +const Link: React.FC = styled(LinkContainer)` + ${relative()}; + ${fontFamilyRegular()}; + ${focus()}; + + display: inline; + font-size: inherit; + line-height: inherit; + letter-spacing: inherit; + text-decoration: none; + color: ${defaultTheme.colors.blues.base}; + margin: 0 0 ${defaultTheme.sizing.m}; + transition: background-color ${defaultEasing()}, color ${defaultEasing()}; + + :after { + ${absolute()}; + + width: 100%; + height: ${defaultTheme.sizing.xxxs}; + top: 90%; + left: 0; + right: 0; + background: ${defaultTheme.colors.blues.light}; + content: ''; + } + + :hover { + color: ${defaultTheme.colors.blues.dark}; + + :after { + background: ${defaultTheme.colors.blues.base}; + } + } +`; + +export default Link; diff --git a/packages/link/tsconfig.json b/packages/link/tsconfig.json new file mode 100644 index 00000000..76e32b06 --- /dev/null +++ b/packages/link/tsconfig.json @@ -0,0 +1,5 @@ +{ + "$schema": "http://json.schemastore.org/tsconfig", + "extends": "../../tsconfig.base.json", + "include": ["src/**/*.ts", "src/**/*.tsx"] +}