feat(@lapidist/link): init (#12)

* feat(@lapidist/link): init

* feat(@lapidist/link): initial implementation

* style: update snapshot

* build: remove nested deps

packages/link/.npmignore

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

packages/link/jest.config.js

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

packages/link/package.json

@@ -0,0 +1,26 @@
+{
+    "name": "@lapidist/link",
+    "version": "0.0.0",
+    "description": "Link 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"
+                }
+            ]
+        }
+    }
+}

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(<Link href="#" title="venenatis" />).toJSON();
+    expect(tree).toMatchSnapshot();
+});

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;
+}
+
+<a
+  className="c0"
+  href="#"
+>
+  venenatis
+</a>
+`;

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<LinkProps> = ({ id, className, title, href }) => (
+    <a id={id} className={className} href={href}>
+        {title}
+    </a>
+);
+
+const Link: React.FC<LinkProps> = styled(LinkContainer)<LinkProps>`
+    ${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;

packages/link/tsconfig.json

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