Add fullwidth flag to the button

src/components/Button/README.md

@@ -12,3 +12,8 @@ Different styles:
 	<Button square>&hellip;</Button>
 </div>
 ```
+
+Full width:
+```js
+<Button fullwidth>WIDE WIDE WIDE</Button>
+```

src/components/Button/__snapshots__/index.spec.js.snap

@@ -11,6 +11,16 @@ exports[`Button renders correctly as link 1`] = `
 </a>
 `;
 
+exports[`Button renders correctly fullwidth button 1`] = `
+<button
+  className="wds-button wds-is-fullwidth"
+  disabled={false}
+  onClick={[Function]}
+>
+  a WIDE button
+</button>
+`;
+
 exports[`Button renders correctly with a children 1`] = `
 <button
   className="wds-button"

src/components/Button/index.js

@@ -11,6 +11,7 @@ const Button = ({
   text,
   secondary,
   square,
+  fullwidth,
   children,
   ...rest
 }) => {
@@ -20,6 +21,7 @@ const Button = ({
     secondary ? 'wds-is-secondary' : '',
     square ? 'wds-is-square' : '',
     text ? 'wds-is-text' : '',
+    fullwidth ? 'wds-is-fullwidth' : '',
   ].filter(c => c).join(' ');
 
   if (href) {
@@ -59,6 +61,10 @@ Button.propTypes = {
    * Text flag
    */
   text: PropTypes.bool,
+  /**
+   * Full width flag
+   */
+  fullwidth: PropTypes.bool,
   /**
    * Callback for the `<button>`
    */
@@ -69,6 +75,7 @@ Button.defaultProps = {
   children: null,
   className: '',
   disabled: false,
+  fullwidth: false,
   href: null,
   secondary: false,
   square: false,

src/components/Button/index.spec.js

@@ -21,6 +21,13 @@ test('Button renders correctly with a label', () => {
   expect(component.toJSON()).toMatchSnapshot();
 });
 
+test('Button renders correctly fullwidth button', () => {
+  const component = renderer.create(
+    <Button fullwidth>a WIDE button</Button>,
+  );
+  expect(component.toJSON()).toMatchSnapshot();
+});
+
 test('Button renders correctly as link', () => {
   const component = renderer.create(
     <Button href="some link">a link</Button>,

src/components/Button/styles.scss

@@ -5,3 +5,8 @@
 
 // import wds-button
 @import "~design-system/dist/scss/wds-components/_buttons.scss";
+
+.wds-button.wds-is-fullwidth {
+	box-sizing: border-box;
+	width: 100%;
+}