aboutsummaryrefslogtreecommitdiffstats
path: root/stories/react/buttons
diff options
context:
space:
mode:
authorIsrael Lavi <israel.lavi@intl.att.com>2018-05-21 17:42:00 +0300
committerIsrael Lavi <il0695@att.com>2018-05-21 17:52:01 +0300
commit1994c98063c27a41797dec01f2ca9fcbe33ceab0 (patch)
treef30beeaf15a8358f6da78fdd74bcbda74bd334f8 /stories/react/buttons
parent4749f4631426fcbe29ed98cef8f24cab18b501d0 (diff)
init commit onap ui
Change-Id: I1dace78817dbba752c550c182dfea118b4a38646 Issue-ID: SDC-1350 Signed-off-by: Israel Lavi <il0695@att.com>
Diffstat (limited to 'stories/react/buttons')
-rw-r--r--stories/react/buttons/LinkButtons.stories.js49
-rw-r--r--stories/react/buttons/PrimaryButtons.stories.js49
-rw-r--r--stories/react/buttons/SecondaryButtons.stories.js49
3 files changed, 147 insertions, 0 deletions
diff --git a/stories/react/buttons/LinkButtons.stories.js b/stories/react/buttons/LinkButtons.stories.js
new file mode 100644
index 0000000..ef32a22
--- /dev/null
+++ b/stories/react/buttons/LinkButtons.stories.js
@@ -0,0 +1,49 @@
+import React from 'react';
+import Examples from '../utils/Examples.js';
+
+import ReactButton from '../../../src/react/Button.js';
+
+import LinkButton from '../../../components/button/button-link.html';
+import LinkButtonDisabled from '../../../components/button/button-link-disabled.html';
+import ExtraSmall from '../../../components/button/button-link-extra-small.html';
+import Small from '../../../components/button/button-link-small.html';
+import Medium from '../../../components/button/button-link-medium.html';
+import Large from '../../../components/button/button-link-large.html';
+import Auto from '../../../components/button/button-link-auto.html';
+
+let examples = {
+ 'Link Default': {
+ jsx: <ReactButton btnType='link' onClick={() => {}}>Click Me</ReactButton>,
+ html: LinkButton
+ },
+ 'Link Disabled': {
+ jsx: <ReactButton btnType='link' onClick={() => {}} disabled>Click Me</ReactButton>,
+ html: LinkButtonDisabled,
+ },
+ 'Extra Small': {
+ jsx: <ReactButton btnType='link' size='x-small' onClick={() => {}}>Click Me</ReactButton>,
+ html: ExtraSmall
+ },
+ 'Small': {
+ jsx: <ReactButton btnType='link' size='small' onClick={() => {}}>Click Me</ReactButton>,
+ html: Small,
+ },
+ 'Medium': {
+ jsx: <ReactButton btnType='link' size='medium' onClick={() => {}}>Click Me</ReactButton>,
+ html: Medium
+ },
+ 'Large': {
+ jsx: <ReactButton btnType='link' size='large' onClick={() => {}}>Click Me</ReactButton>,
+ html: Large,
+ },
+ 'Auto Sizing': {
+ jsx: <ReactButton btnType='link' size='default' onClick={() => {}}>Click Me</ReactButton>,
+ html: Auto,
+ }
+};
+
+const DefaultButtons = () => (
+ <Examples examples={examples} />
+);
+
+export default DefaultButtons;
diff --git a/stories/react/buttons/PrimaryButtons.stories.js b/stories/react/buttons/PrimaryButtons.stories.js
new file mode 100644
index 0000000..db732b9
--- /dev/null
+++ b/stories/react/buttons/PrimaryButtons.stories.js
@@ -0,0 +1,49 @@
+import React from 'react';
+import Examples from '../utils/Examples.js';
+
+import ReactButton from '../../../src/react/Button.js';
+
+import PrimaryButton from '../../../components/button/button-primary.html';
+import PrimaryButtonDisabled from '../../../components/button/button-primary-disabled.html';
+import ExtraSmall from '../../../components/button/button-primary-extra-small.html';
+import Small from '../../../components/button/button-primary-small.html';
+import Medium from '../../../components/button/button-primary-medium.html';
+import Large from '../../../components/button/button-primary-large.html';
+import Auto from '../../../components/button/button-primary-auto.html';
+
+let examples = {
+ 'Primary Default': {
+ jsx: <ReactButton onClick={() => {}}>Click Me</ReactButton>,
+ html: PrimaryButton
+ },
+ 'Primary Disabled': {
+ jsx: <ReactButton onClick={() => {}} disabled>Click Me</ReactButton>,
+ html: PrimaryButtonDisabled,
+ },
+ 'Extra Small': {
+ jsx: <ReactButton size='x-small' onClick={() => {}}>Click Me</ReactButton>,
+ html: ExtraSmall
+ },
+ 'Small': {
+ jsx: <ReactButton size='small' onClick={() => {}}>Click Me</ReactButton>,
+ html: Small,
+ },
+ 'Medium': {
+ jsx: <ReactButton size='medium' onClick={() => {}}>Click Me</ReactButton>,
+ html: Medium
+ },
+ 'Large': {
+ jsx: <ReactButton size='large' onClick={() => {}}>Click Me</ReactButton>,
+ html: Large,
+ },
+ 'Auto Sizing': {
+ jsx: <ReactButton size='default' onClick={() => {}}>Click Me</ReactButton>,
+ html: Auto,
+ }
+};
+
+const DefaultButtons = () => (
+ <Examples examples={examples} />
+);
+
+export default DefaultButtons;
diff --git a/stories/react/buttons/SecondaryButtons.stories.js b/stories/react/buttons/SecondaryButtons.stories.js
new file mode 100644
index 0000000..75f9d54
--- /dev/null
+++ b/stories/react/buttons/SecondaryButtons.stories.js
@@ -0,0 +1,49 @@
+import React from 'react';
+import Examples from '../utils/Examples.js';
+
+import ReactButton from '../../../src/react/Button.js';
+
+import SecondaryButton from '../../../components/button/button-secondary.html';
+import SecondaryButtonDisabled from '../../../components/button/button-secondary-disabled.html';
+import ExtraSmall from '../../../components/button/button-secondary-extra-small.html';
+import Small from '../../../components/button/button-secondary-small.html';
+import Medium from '../../../components/button/button-secondary-medium.html';
+import Large from '../../../components/button/button-secondary-large.html';
+import Auto from '../../../components/button/button-secondary-auto.html';
+
+let examples = {
+ 'Secondary Default': {
+ jsx: <ReactButton btnType='secondary' onClick={() => {}}>Click Me</ReactButton>,
+ html: SecondaryButton
+ },
+ 'Secondary Disabled': {
+ jsx: <ReactButton btnType='secondary' onClick={() => {}} disabled>Click Me</ReactButton>,
+ html: SecondaryButtonDisabled,
+ },
+ 'Extra Small': {
+ jsx: <ReactButton btnType='secondary' size='x-small' onClick={() => {}}>Click Me</ReactButton>,
+ html: ExtraSmall
+ },
+ 'Small': {
+ jsx: <ReactButton btnType='secondary' size='small' onClick={() => {}}>Click Me</ReactButton>,
+ html: Small,
+ },
+ 'Medium': {
+ jsx: <ReactButton btnType='secondary' size='medium' onClick={() => {}}>Click Me</ReactButton>,
+ html: Medium
+ },
+ 'Large': {
+ jsx: <ReactButton btnType='secondary' size='large' onClick={() => {}}>Click Me</ReactButton>,
+ html: Large,
+ },
+ 'Auto Sizing': {
+ jsx: <ReactButton btnType='secondary' size='default' onClick={() => {}}>Click Me</ReactButton>,
+ html: Auto,
+ }
+};
+
+const DefaultButtons = () => (
+ <Examples examples={examples} />
+);
+
+export default DefaultButtons;