diff --git a/packages/button/.npmignore b/packages/button/.npmignore new file mode 100644 index 00000000..037f4b09 --- /dev/null +++ b/packages/button/.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/button/Button.mdx b/packages/button/Button.mdx new file mode 100644 index 00000000..d110f48a --- /dev/null +++ b/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 + + + +## Examples + +### Default Button + + + +`; + +exports[`it works as block 1`] = ` + +`; + +exports[`it works as block loading 1`] = ` + +`; + +exports[`it works as block outline 1`] = ` + +`; + +exports[`it works as disabled 1`] = ` + +`; + +exports[`it works as outline small 1`] = ` + +`; + +exports[`it works as outline small disabled 1`] = ` + +`; + +exports[`it works as small loading 1`] = ` + +`; diff --git a/packages/button/src/index.tsx b/packages/button/src/index.tsx new file mode 100644 index 00000000..2273cf4b --- /dev/null +++ b/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 = ({ + id, + className, + text, + handleClick = undefined, + disabled = false, + loading = false +}) => ( + +); + +export default styled(Button)``; diff --git a/packages/button/tsconfig.json b/packages/button/tsconfig.json new file mode 100644 index 00000000..76e32b06 --- /dev/null +++ b/packages/button/tsconfig.json @@ -0,0 +1,5 @@ +{ + "$schema": "http://json.schemastore.org/tsconfig", + "extends": "../../tsconfig.base.json", + "include": ["src/**/*.ts", "src/**/*.tsx"] +}