Example Button component

Author: andrewn

Diff for: 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 for: 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 for: 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 for: 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.