From 91bc363850df85453dba7ebf9a5ffa2cc8ebf500 Mon Sep 17 00:00:00 2001
From: Tasso Evangelista <tasso.evangelista@rocket.chat>
Date: Wed, 16 Oct 2019 17:31:29 -0300
Subject: [PATCH] Add cancel and nude variants to Button

---
 client/components/basic/Button.js         |  4 ++++
 client/components/basic/Button.stories.js | 19 ++++++++++++++++++-
 2 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/client/components/basic/Button.js b/client/components/basic/Button.js
index 60cd9708a2e..187409e31e9 100644
--- a/client/components/basic/Button.js
+++ b/client/components/basic/Button.js
@@ -6,6 +6,8 @@ export const Button = ({
 	invisible,
 	primary,
 	secondary,
+	cancel,
+	nude,
 	submit,
 	...props
 }) => <button
@@ -15,6 +17,8 @@ export const Button = ({
 		primary && 'rc-button--primary',
 		secondary && 'rc-button--secondary',
 		invisible && 'rc-button--invisible',
+		cancel && 'rc-button--cancel',
+		nude && 'rc-button--nude',
 		className,
 	].filter(Boolean).join(' ')}
 	{...props}
diff --git a/client/components/basic/Button.stories.js b/client/components/basic/Button.stories.js
index 2aa1ea399d4..435dc9569ce 100644
--- a/client/components/basic/Button.stories.js
+++ b/client/components/basic/Button.stories.js
@@ -1,3 +1,5 @@
+import { action } from '@storybook/addon-actions';
+import { boolean, text } from '@storybook/addon-knobs';
 import React from 'react';
 
 import { Button } from './Button';
@@ -7,10 +9,25 @@ export default {
 	component: Button,
 };
 
-export const _default = () => <Button>Button</Button>;
+export const _default = () => <Button
+	children={text('children', 'Button')}
+	invisible={boolean('invisible')}
+	primary={boolean('primary')}
+	secondary={boolean('secondary')}
+	cancel={boolean('cancel')}
+	nude={boolean('nude')}
+	submit={boolean('submit')}
+	onClick={action('click')}
+/>;
 
 export const invisible = () => <Button invisible>Button</Button>;
 
 export const primary = () => <Button primary>Button</Button>;
 
 export const secondary = () => <Button secondary>Button</Button>;
+
+export const cancel = () => <Button cancel>Button</Button>;
+
+export const nude = () => <Button nude>Button</Button>;
+
+export const submit = () => <Button submit>Button</Button>;