Merge pull request #117 from miljodir/feature/MdButton_TopIcon

Top icon in MdButton
miljodir · Apr 16, 2024 · 2e09858 · 2e09858
2 parents 98f5695 + be3c33c
commit 2e09858
Show file tree

Hide file tree

Showing 5 changed files with 308 additions and 14 deletions.
diff --git a/packages/css/src/button/README.md b/packages/css/src/button/README.md
@@ -2,14 +2,22 @@
 
 To use the `Button` css in `@miljodirektoratet/md-css` as a standalone, without the accompanying React component, please use the following HTML structure.
 
-Class names in brackets [] are optional-/togglable-/decorator- or state dependant classes.
+Class names and elements in brackets [] are optional-/togglable-/decorator- or state dependant classes.
 
 See [Storybook](https://miljodir.github.io/md-components) for examples and more info.
 
 ```html
-<button className="md-button [md-button--small, md-button--secondary, md-button--danger]">
-  <div className="md-button__leftIcon">{leftIcon}</div>
-  BUTTON TEXT
-  <div className="md-button__rightIcon">{rightIcon}</div>
+<button className="md-button [md-button--small, md-button--secondary, md-button--danger, md-button--column]">
+  [
+  <div className="md-button__topIcon">{topIcon}</div>
+  ] [
+  <div className="md-button__content">
+    ]
+    <div className="md-button__leftIcon">{leftIcon}</div>
+    BUTTON TEXT
+    <div className="md-button__rightIcon">{rightIcon}</div>
+    [
+  </div>
+  ]
 </button>
 ```
diff --git a/packages/css/src/button/button.css b/packages/css/src/button/button.css
@@ -11,11 +11,28 @@
   border: none;
 }
 
+.md-button--column {
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.md-button__content {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
 .md-button--small {
   padding: 0.4rem 0.8rem;
   border-radius: 0.43rem;
 }
 
+.md-button__topIcon {
+  height: 1rem;
+  width: 1rem;
+  flex-shrink: 0;
+}
+
 .md-button__leftIcon {
   height: 1rem;
   width: 1rem;

diff --git a/packages/react/src/button/MdButton.tsx b/packages/react/src/button/MdButton.tsx
@@ -5,6 +5,7 @@ export interface MdButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElem
   theme?: string;
   leftIcon?: React.ReactNode;
   rightIcon?: React.ReactNode;
+  topIcon?: React.ReactNode;
   children?: string | React.ReactNode;
   small?: boolean;
   type?: 'button' | 'submit' | 'reset' | undefined;
@@ -14,6 +15,7 @@ const MdButton: React.FunctionComponent<MdButtonProps> = ({
   theme,
   leftIcon,
   rightIcon,
+  topIcon,
   children,
   small,
   type = 'button',
@@ -25,25 +27,42 @@ const MdButton: React.FunctionComponent<MdButtonProps> = ({
       'md-button--small': !!small,
       'md-button--secondary': theme === 'secondary',
       'md-button--danger': theme === 'danger',
+      'md-button--column': !!topIcon,
     },
     otherProps.className,
   );
 
   return (
     <button type={type} {...otherProps} className={classNames}>
-      {leftIcon && (
-        <div aria-hidden="true" className="md-button__leftIcon">
-          {leftIcon}
-        </div>
-      )}
-      {children}
-      {rightIcon && (
-        <div aria-hidden="true" className="md-button__rightIcon">
-          {rightIcon}
+      {topIcon && (
+        <div aria-hidden="true" className="md-button__topIcon">
+          {topIcon}
         </div>
       )}
+      <ConditionalWrapper
+        condition={!!topIcon}
+        wrap={wrappedChildren => {
+          return <div className="md-button__content">{wrappedChildren}</div>;
+        }}
+      >
+        {leftIcon && (
+          <div aria-hidden="true" className="md-button__leftIcon">
+            {leftIcon}
+          </div>
+        )}
+        {children}
+        {rightIcon && (
+          <div aria-hidden="true" className="md-button__rightIcon">
+            {rightIcon}
+          </div>
+        )}
+      </ConditionalWrapper>
     </button>
   );
 };
 
 export default MdButton;
+
+const ConditionalWrapper = ({ condition, wrap, children }) => {
+  return condition ? wrap(children) : children;
+};
diff --git a/stories/Button.stories.tsx b/stories/Button.stories.tsx
@@ -4,6 +4,7 @@ import React from 'react';
 import Readme from '../packages/css/src/button/README.md';
 import MdButton from '../packages/react/src/button/MdButton';
 import MdChevronIcon from '../packages/react/src/icons/MdChevronIcon';
+import MdXIcon from '../packages/react/src/icons/MdXIcon';
 
 const markdownString =
   // eslint-disable-next-line quotes
@@ -87,6 +88,14 @@ export default {
         },
       },
     },
+    topIcon: {
+      description: 'Icon above label',
+      table: {
+        type: {
+          summary: 'DomElement | image | ReactNode',
+        },
+      },
+    },
   },
 };
 
@@ -118,6 +127,20 @@ const TemplateWithIcon = (args: ButtonArgs) => {
   );
 };
 
+const TemplateWithTopIcon = (args: ButtonArgs) => {
+  return (
+    <MdButton
+      onClick={action(args.label)}
+      disabled={args.disabled}
+      theme={args.theme}
+      small={args.small}
+      topIcon={<MdXIcon />}
+    >
+      {args.label}
+    </MdButton>
+  );
+};
+
 export const Primary = Template.bind({});
 Primary.args = {
   theme: 'primary',
@@ -157,3 +180,11 @@ ButtonWithIcon.args = {
   disabled: false,
   small: false,
 };
+
+export const ButtonWithTopIcon = TemplateWithTopIcon.bind({});
+ButtonWithTopIcon.args = {
+  theme: 'primary',
+  label: 'Knapp med ikon',
+  disabled: false,
+  small: false,
+};