change(button): simplified storybook naming and examples

- Button.stories.jsx: - Cancel story is now default button - Secondary inverted is now inverted where you see the inverted variants of the primary, secondary and default buttons - Call to actions is now labeled button, where you can select what type of button the call to action should be and where should the icon be placed - Added temporary another implementation of icon buttons with labeled buttons as a comparison
eea · Apr 17, 2022 · 9a7df4f · 9a7df4f
1 parent cdd9043
commit 9a7df4f
Show file tree

Hide file tree

Showing 3 changed files with 98 additions and 32 deletions.
diff --git a/src/ui/Button/Button.stories.jsx b/src/ui/Button/Button.stories.jsx
@@ -30,6 +30,19 @@ export default {
   },
 };
 
+//Default Button
+export const Default = (args) => {
+  return <Button disabled={args.disabled}>{args.label}</Button>;
+};
+Default.args = {
+  label: 'Default Button',
+  disabled: false,
+};
+Default.parameters = {
+  controls: { exclude: ['animated', 'variant'] },
+  hideNoControlsWarning: true,
+};
+
 //Primary button
 export const Primary = (args) => {
   return (
@@ -65,51 +78,83 @@ Secondary.parameters = {
 };
 
 //secondary Button Inverted
-export const SecondaryInverted = (args) => {
+export const Inverted = (args) => {
   return (
     <Segment inverted compact>
+      <Button primary inverted disabled={args.disabled}>
+        {args.button1}
+      </Button>
       <Button secondary inverted disabled={args.disabled}>
-        {args.label}
+        {args.button2}
+      </Button>
+      <Button inverted disabled={args.disabled}>
+        {args.button3}
       </Button>
     </Segment>
   );
 };
-SecondaryInverted.args = {
-  label: 'Secondary Button',
+Inverted.args = {
+  button1: 'Primary Inverted',
+  button2: 'Secondary Inverted',
+  button3: 'Default Inverted',
   disabled: false,
 };
-SecondaryInverted.parameters = {
-  controls: { exclude: ['animated', 'variant'] },
+Inverted.parameters = {
+  controls: { exclude: ['animated', 'variant', 'label'] },
   hideNoControlsWarning: true,
 };
 
 //Call to action button
-export const CallToAction = (args) => {
+export const Labeled = (args) => {
   return (
     <div className="eea">
-      <Button className="secondary" disabled={args.disabled}>
+      <Button className={args.variant} disabled={args.disabled}>
+        {args.icon_position === ' left' && (
+          <Icon name={args.icon + args.icon_position} />
+        )}
+        {args.label}
+        {args.icon_position !== ' left' && (
+          <Icon name={args.icon + args.icon_position} />
+        )}
+      </Button>
+
+      <Button
+        className={args.variant + ' icon labeled ' + args.icon_position}
+        disabled={args.disabled}
+      >
+        {args.icon_position === ' left' && (
+          <Icon name={args.icon + args.icon_position} />
+        )}
         {args.label}
-        <Icon name={args.icon} />
+        {args.icon_position !== ' left' && (
+          <Icon name={args.icon + args.icon_position} />
+        )}
       </Button>
     </div>
   );
 };
-CallToAction.args = {
+Labeled.args = {
   label: 'CALL TO ACTION BUTTON',
   icon: 'chevron right',
   disabled: false,
 };
-CallToAction.parameters = {
-  controls: { exclude: ['animated', 'variant'] },
+Labeled.parameters = {
+  controls: { exclude: ['animated'] },
   hideNoControlsWarning: true,
 };
-CallToAction.argTypes = {
+Labeled.argTypes = {
+  variant: {
+    options: ['primary', 'secondary', 'default'],
+    control: { type: 'radio' },
+    defaultValue: 'secondary',
+  },
+
   label: {
-    name: 'button label',
-    type: { name: 'string', required: true },
+    name: 'label',
+    type: { name: 'string', required: false },
   },
   icon: {
-    name: 'button icon',
+    name: 'icon',
     type: { name: 'string', required: false },
     defaultValue: 'chevron  right',
     options: [
@@ -133,6 +178,12 @@ CallToAction.argTypes = {
       defaultValue: { summary: 'chevron right' },
     },
   },
+
+  icon_position: {
+    options: [' left', ' right'],
+    control: { type: 'radio' },
+    defaultValue: ' left',
+  },
 };
 
 //Text Button - can also play with text class
@@ -151,16 +202,3 @@ Text.parameters = {
   controls: { exclude: ['animated', 'variant'] },
   hideNoControlsWarning: true,
 };
-
-//Cancel Button
-export const Cancel = (args) => {
-  return <Button disabled={args.disabled}>{args.label}</Button>;
-};
-Cancel.args = {
-  label: 'Cancel Button',
-  disabled: false,
-};
-Cancel.parameters = {
-  controls: { exclude: ['animated', 'variant'] },
-  hideNoControlsWarning: true,
-};
diff --git a/theme/themes/eea/elements/button.overrides b/theme/themes/eea/elements/button.overrides
@@ -112,6 +112,7 @@ p.ui.button {
   &:hover,
   &:active,
   &:focus {
+    background-color: @textButtonBackground;
     color: @primaryColorHover;
   }
 
@@ -139,6 +140,26 @@ p.ui.button {
   }
 }
 
+/* Labeled and left and right icons on buttons */
+.ui.button:not(.icon) > .left.icon:not(.button):not(.dropdown),
+.ui.button:not(.icon) > .icon:not(.right) {
+  margin: @iconMargin;
+}
+
+/* Left Labeled */
+.ui.labeled.icon.buttons > .button > .icon,
+.ui.labeled.icon.button > .icon {
+  top: @labeledLeftTop;
+  left: @labeledLeftLeft;
+}
+
+/* Right Labeled */
+.ui[class*='right labeled'].icon.button > .icon {
+  top: @labeledRightTop;
+  right: @labeledRightRight;
+  left: @labeledRightLeft;
+}
+
 .ui.icon.left.labeled.button.search {
   padding-left: 3.375em !important;
 }

diff --git a/theme/themes/eea/elements/button.variables b/theme/themes/eea/elements/button.variables
@@ -93,8 +93,8 @@
 @iconTransition: opacity @defaultDuration @defaultEasing;
 @iconVerticalAlign: '';
 
-@iconMargin: 0; // 0 means there is no margin between the icon and the button
-@rightIconMargin: 0em -(@iconDistance / 2) 0em @iconDistance;
+@iconMargin: 0 @iconDistance 0 -(@iconDistance / 2); // 0 means there is no margin between the icon and the button
+@rightIconMargin: 0 -(@iconDistance / 2) 0 @iconDistance;
 
 /* Loader */
 @invertedLoaderFillColor: rgba(0, 0, 0, 0.15);
@@ -214,11 +214,18 @@
 @labeledLabelBorderOffset: -@borderBoxShadowWidth;
 @labeledTagLabelSize: 1.85em; /* hypotenuse of triangle */
 @labeledIconMargin: 0em;
+/* Labeled left */
+@labeledLeftTop: 0;
+@labeledLeftLeft: 0.85em;
+/* Labeled Right */
+@labeledRightTop: 0;
+@labeledRightLeft: auto;
+@labeledRightRight: 0.85em;
 
 /* Labeled Icon */
 @labeledIconWidth: 1em + (@verticalPadding * 2);
 @labeledIconBackgroundColor: none;
-@labeledIconPadding: (@horizontalPadding + @labeledIconWidth);
+@labeledIconPadding: 3em; //(@horizontalPadding + @labeledIconWidth);
 @labeledIconBorder: transparent;
 @labeledIconColor: '';