From d34ddb364361af421f20207a7c120631885fb99e Mon Sep 17 00:00:00 2001
From: Andrew Nicolaou <me@andrewnicolaou.co.uk>
Date: Sun, 19 Jan 2020 18:04:44 +0100
Subject: [PATCH] Example Button component

---
 client/components/Button/Button.stories.jsx | 28 +++++++++++++++++
 client/components/Button/Button.stories.mdx | 32 +++++++++++++++++++
 client/components/Button/index.js           | 34 +++++++++++++++++++++
 client/index.stories.mdx                    |  7 +++++
 4 files changed, 101 insertions(+)
 create mode 100644 client/components/Button/Button.stories.jsx
 create mode 100644 client/components/Button/Button.stories.mdx
 create mode 100644 client/components/Button/index.js
 create mode 100644 client/index.stories.mdx

diff --git a/client/components/Button/Button.stories.jsx b/client/components/Button/Button.stories.jsx
new file mode 100644
index 00000000..1ae8d9f1
--- /dev/null
+++ b/client/components/Button/Button.stories.jsx
@@ -0,0 +1,28 @@
+import React from 'react';
+import { action } from '@storybook/addon-actions';
+import { boolean, text } from '@storybook/addon-knobs';
+
+import Button from '.';
+
+export default {
+  title: 'Common/Button (JS)',
+  component: Button
+};
+
+export const AllFeatures = () => (
+  <Button
+    disabled={boolean('disabled', false)}
+    type="submit"
+    label={text('label', 'submit')}
+  >
+    {text('children', 'this is the button')}
+  </Button>
+);
+
+export const SubmitButton = () => (
+  <Button type="submit" label="submit">This is a submit button</Button>
+);
+
+export const PrimaryButton = () => <Button label="login" onClick={action('onClick')}>Log In</Button>;
+
+export const DisabledButton = () => <Button disabled label="login" onClick={action('onClick')}>Log In</Button>;
diff --git a/client/components/Button/Button.stories.mdx b/client/components/Button/Button.stories.mdx
new file mode 100644
index 00000000..28c48300
--- /dev/null
+++ b/client/components/Button/Button.stories.mdx
@@ -0,0 +1,32 @@
+import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
+import { action } from '@storybook/addon-actions';
+import { boolean, text } from '@storybook/addon-knobs';
+
+import Button from './';
+
+<Meta title="Common/Button (MDX)" component={Button} />
+
+# Button
+
+A button is used to perform an action.
+
+<Preview>
+  <Story name="All features">
+    <Button
+      disabled={boolean('disabled', false)}
+      type="submit"
+      label={text('label', 'submit')}
+    >
+      {text('children', 'this is the button')}
+    </Button>
+  </Story>
+  <Story name="Submit button">
+    <Button type="submit" label="submit" onClick={action('onClick')}>This is a submit button</Button>
+  </Story>
+  <Story name="Primary button">
+    <Button label="Log In" onClick={action('onClick')}>Log In</Button>
+  </Story>
+  <Story name="Disabled">
+    <Button disabled label="Log In" onClick={action('onClick')}>Log In</Button>
+  </Story>
+</Preview>
diff --git a/client/components/Button/index.js b/client/components/Button/index.js
new file mode 100644
index 00000000..89e9d3b7
--- /dev/null
+++ b/client/components/Button/index.js
@@ -0,0 +1,34 @@
+import React from "react";
+import PropTypes from "prop-types";
+import styled from 'styled-components';
+
+const StyledButton = styled.button`
+  margin: 0;
+  padding: 0;
+  border: none;
+  background: none;
+`;
+
+/**
+ * This text will be used for the description in the story
+ */
+const Button = ({ children, label, ...props }) => {
+  return <StyledButton aria-label={label} {...props}>{children}</StyledButton>;
+}
+
+Button.propTypes = {
+  /**
+   * The visible part of the button
+   */
+  children: PropTypes.element.isRequired,
+  /**
+    If the button can be clicked or not
+  */
+  disabled: PropTypes.boolean,
+  /*
+   * An ARIA Label used for accessibility
+   */
+  label: PropTypes.string.isRequired,
+};
+
+export default Button;
diff --git a/client/index.stories.mdx b/client/index.stories.mdx
new file mode 100644
index 00000000..50a676d1
--- /dev/null
+++ b/client/index.stories.mdx
@@ -0,0 +1,7 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+
+<Meta title=" |Intro" />
+
+# Welcome to the P5.js Web Editor Style Guide
+
+This guide will contain all the components in the project, with examples of how they can be reused.