feat(@lapidist/button): init

packages/button/.npmignore

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

packages/button/Button.mdx

@@ -0,0 +1,65 @@
+---
+name: Button
+route: /components/Button
+menu: Components
+---
+
+import { Playground, Props } from 'docz';
+import Button from './src';
+
+# Button
+
+## When to use
+
+- **Buttons are used to initialise an action.** They have labels that express what action happens when the user interacts with it.
+- **Buttons are used primarily for actions.** Examples include Add, Save, Delete, or Create.
+- **Do not use buttons as navigation elements.** Instead, use [links](#) for navigation.
+- **Primary buttons always appear to the right.** Secondary buttons appear to the left of the primary button.
+
+## Props
+
+<Props of={Button} />
+
+## Examples
+
+### Default Button
+
+<Playground>
+    <Button
+        text="Click me"
+        block
+    />
+    <Button
+        text="Click me"
+        block
+        loading
+    />
+    <Button
+        text="Click me"
+        block
+        outline
+    />
+    <Button
+        text="Click me"
+    />
+    <Button
+        text="Click me"
+        disabled
+    />
+    <Button
+        text="Click me"
+        outline
+        small
+    />
+    <Button
+        text="Click me"
+        small
+        loading
+    />
+    <Button
+        text="Click me"
+        outline
+        disabled
+        small
+    />
+</Playground>

packages/button/jest.config.js

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

packages/button/package.json

@@ -0,0 +1,23 @@
+{
+    "name": "@lapidist/button",
+    "version": "0.0.0",
+    "description": "Button 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/button/src/Button.spec.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import 'jest-styled-components';
+
+import Button from './index';
+
+test('it works', () => {
+    const tree = renderer.create(<Button text="Click me" />).toJSON();
+    expect(tree).toMatchSnapshot();
+});
+
+test('it works as block', () => {
+    const tree = renderer.create(<Button text="Click me" block />).toJSON();
+    expect(tree).toMatchSnapshot();
+});
+
+test('it works as block loading', () => {
+    const tree = renderer
+        .create(<Button text="Click me" block loading />)
+        .toJSON();
+    expect(tree).toMatchSnapshot();
+});
+
+test('it works as block outline', () => {
+    const tree = renderer
+        .create(<Button text="Click me" block outline />)
+        .toJSON();
+    expect(tree).toMatchSnapshot();
+});
+
+test('it works as disabled', () => {
+    const tree = renderer.create(<Button text="Click me" disabled />).toJSON();
+    expect(tree).toMatchSnapshot();
+});
+
+test('it works as outline small', () => {
+    const tree = renderer
+        .create(<Button text="Click me" outline small />)
+        .toJSON();
+    expect(tree).toMatchSnapshot();
+});
+
+test('it works as small loading', () => {
+    const tree = renderer
+        .create(<Button text="Click me" small loading />)
+        .toJSON();
+    expect(tree).toMatchSnapshot();
+});
+
+test('it works as outline small disabled', () => {
+    const tree = renderer
+        .create(<Button text="Click me" outline disabled small />)
+        .toJSON();
+    expect(tree).toMatchSnapshot();
+});

packages/button/src/__snapshots__/Button.spec.tsx.snap

@@ -0,0 +1,81 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`it works 1`] = `
+<button
+  className=""
+  disabled={false}
+  type="button"
+>
+  Click me
+</button>
+`;
+
+exports[`it works as block 1`] = `
+<button
+  className=""
+  disabled={false}
+  type="button"
+>
+  Click me
+</button>
+`;
+
+exports[`it works as block loading 1`] = `
+<button
+  className=""
+  disabled={true}
+  type="button"
+>
+  Click me
+</button>
+`;
+
+exports[`it works as block outline 1`] = `
+<button
+  className=""
+  disabled={false}
+  type="button"
+>
+  Click me
+</button>
+`;
+
+exports[`it works as disabled 1`] = `
+<button
+  className=""
+  disabled={true}
+  type="button"
+>
+  Click me
+</button>
+`;
+
+exports[`it works as outline small 1`] = `
+<button
+  className=""
+  disabled={false}
+  type="button"
+>
+  Click me
+</button>
+`;
+
+exports[`it works as outline small disabled 1`] = `
+<button
+  className=""
+  disabled={true}
+  type="button"
+>
+  Click me
+</button>
+`;
+
+exports[`it works as small loading 1`] = `
+<button
+  className=""
+  disabled={true}
+  type="button"
+>
+  Click me
+</button>
+`;

packages/button/src/index.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import styled from 'styled-components';
+
+export interface ButtonProps {
+    /** The Button's id. */
+    readonly id?: string;
+    /** The Button's classname. */
+    readonly className?: string;
+    /** The Button's onClick callback function. */
+    readonly handleClick?: (event: React.MouseEvent) => void;
+    /** The Button's text. */
+    readonly text: string;
+    /** The Button's disabled state. Fades the Button out. */
+    readonly disabled?: boolean;
+    /** The Button's block state. Makes the Button full width. */
+    readonly block?: boolean;
+    /** The Button's outline state. Makes the Button have a border with no background. */
+    readonly outline?: boolean;
+    /** The Button's small state. Makes the button small. */
+    readonly small?: boolean;
+    /** The Button's loading state. Makes the button disabled and display loading icon. */
+    readonly loading?: boolean;
+}
+
+export const Button: React.FC<ButtonProps> = ({
+    id,
+    className,
+    text,
+    handleClick = undefined,
+    disabled = false,
+    loading = false
+}) => (
+    <button
+        id={id}
+        className={className}
+        type="button"
+        onClick={handleClick}
+        disabled={disabled || loading}
+    >
+        {text}
+    </button>
+);
+
+export default styled(Button)``;

packages/button/tsconfig.json

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