diff --git a/packages/css/src/button/README.md b/packages/css/src/button/README.md index 9b9f0bbd..4033f572 100644 --- 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 - ``` diff --git a/packages/css/src/button/button.css b/packages/css/src/button/button.css index fed92666..31c52c4b 100644 --- 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 index 95bccdba..19305895 100644 --- a/packages/react/src/button/MdButton.tsx +++ b/packages/react/src/button/MdButton.tsx @@ -5,6 +5,7 @@ export interface MdButtonProps extends React.ButtonHTMLAttributes = ({ theme, leftIcon, rightIcon, + topIcon, children, small, type = 'button', @@ -25,25 +27,42 @@ const MdButton: React.FunctionComponent = ({ 'md-button--small': !!small, 'md-button--secondary': theme === 'secondary', 'md-button--danger': theme === 'danger', + 'md-button--column': !!topIcon, }, otherProps.className, ); return ( ); }; 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 index db6f7c42..11153d88 100644 --- 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 ( + } + > + {args.label} + + ); +}; + 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, +}; diff --git a/stories/Icons/AllIconsGallery.stories.tsx b/stories/Icons/AllIconsGallery.stories.tsx new file mode 100644 index 00000000..d0574ade --- /dev/null +++ b/stories/Icons/AllIconsGallery.stories.tsx @@ -0,0 +1,219 @@ +import React from 'react'; +import MdBurgerMenuIcon from '../../packages/react/src/icons/MdBurgerMenuIcon'; +import MdCalendarDayIcon from '../../packages/react/src/icons/MdCalendarDayIcon'; +import MdCalendarIcon from '../../packages/react/src/icons/MdCalendarIcon'; +import MdCancelIcon from '../../packages/react/src/icons/MdCancelIcon'; +import MdCheckCircleIcon from '../../packages/react/src/icons/MdCheckCircleIcon'; +import MdCheckIcon from '../../packages/react/src/icons/MdCheckIcon'; +import MdChevronIcon from '../../packages/react/src/icons/MdChevronIcon'; +import MdCloseIcon from '../../packages/react/src/icons/MdCloseIcon'; +import MdCommentIcon from '../../packages/react/src/icons/MdCommentIcon'; +import MdConfirmIcon from '../../packages/react/src/icons/MdConfirmIcon'; +import MdDeleteIcon from '../../packages/react/src/icons/MdDeleteIcon'; +import MdDocIcon from '../../packages/react/src/icons/MdDocIcon'; +import MdDocSearchIcon from '../../packages/react/src/icons/MdDocSearchIcon'; +import MdDownloadIcon from '../../packages/react/src/icons/MdDownloadIcon'; +import MdEditIcon from '../../packages/react/src/icons/MdEditIcon'; +import MdEnvelopeIcon from '../../packages/react/src/icons/MdEnvelopeIcon'; +import MdExpandIcon from '../../packages/react/src/icons/MdExpandIcon'; +import MdGraphIcon from '../../packages/react/src/icons/MdGraphIcon'; +import MdHelpIcon from '../../packages/react/src/icons/MdHelpIcon'; +import MdHomeIcon from '../../packages/react/src/icons/MdHomeIcon'; +import MdImageIcon from '../../packages/react/src/icons/MdImageIcon'; +import MdInfoIcon from '../../packages/react/src/icons/MdInfoIcon'; +import MdMinusIcon from '../../packages/react/src/icons/MdMinusIcon'; +import MdPanIcon from '../../packages/react/src/icons/MdPanIcon'; +import MdPersonIcon from '../../packages/react/src/icons/MdPersonIcon'; +import MdPinIcon from '../../packages/react/src/icons/MdPinIcon'; +import MdPlusIcon from '../../packages/react/src/icons/MdPlusIcon'; +import MdPrintIcon from '../../packages/react/src/icons/MdPrintIcon'; +import MdRedirectIcon from '../../packages/react/src/icons/MdRedirectIcon'; +import MdSettingsIcon from '../../packages/react/src/icons/MdSettingsIcon'; +import MdSignIcon from '../../packages/react/src/icons/MdSignIcon'; +import MdSortingIcon from '../../packages/react/src/icons/MdSortingIcon'; +import MdSubmenuIcon from '../../packages/react/src/icons/MdSubmenuIcon'; +import MdTableIcon from '../../packages/react/src/icons/MdTableIcon'; +import MdTimeIcon from '../../packages/react/src/icons/MdTimeIcon'; +import MdUploadIcon from '../../packages/react/src/icons/MdUploadIcon'; +import MdUserIcon from '../../packages/react/src/icons/MdUserIcon'; +import MdWarningIcon from '../../packages/react/src/icons/MdWarningIcon'; +import MdXIcon from '../../packages/react/src/icons/MdXIcon'; +import MdZoomIcon from '../../packages/react/src/icons/MdZoomIcon'; +import type { Args } from '@storybook/react'; + +export default { + title: 'Icons/Gallery', +}; + +const Template = (args: Args) => { + return ( +
+
+ + MdBurgerMenuIcon +
+
+ + MdCalendarDayIcon +
+
+ + MdCalendarIcon +
+
+ + MdCancelIcon +
+
+ + MdCheckCircleIcon +
+
+ + MdCheckIcon +
+
+ + MdChevronIcon +
+
+ + MdCloseIcon +
+
+ + MdCommentIcon +
+
+ + MdConfirmIcon +
+
+ + MdDeleteIcon +
+
+ + MdDocIcon +
+
+ + MdDocSearchIcon +
+
+ + MdDownloadIcon +
+
+ + MdEditIcon +
+
+ + MdEnvelopeIcon +
+
+ + MdExpandIcon +
+
+ + MdGraphIcon +
+
+ + MdHelpIcon +
+
+ + MdHomeIcon +
+
+ + MdImageIcon +
+
+ + MdInfoIcon +
+
+ + MdMinusIcon +
+
+ + MdPanIcon +
+
+ + MdPersonIcon +
+
+ + MdPinIcon +
+
+ + MdPlusIcon +
+
+ + MdPrintIcon +
+
+ + MdRedirectIcon +
+
+ + MdSettingsIcon +
+
+ + MdSignIcon +
+
+ + MdSortingIcon +
+
+ + MdSubmenuIcon +
+
+ + MdTableIcon +
+
+ + MdTimeIcon +
+
+ + MdUploadIcon +
+
+ + MdUserIcon +
+
+ + MdWarningIcon +
+
+ + MdXIcon +
+
+ + MdZoomIcon +
+
+ ); +}; + +export const Gallery = Template.bind({}); +Gallery.args = { + color: '#005e5d', + className: '', +};