Merge pull request #105 from WebDevStudios/feature/26-design-system

Feature/26 design system

Author: Greg Rickaby

.storybook/main.js

@@ -6,7 +6,10 @@ module.exports = {
     fastRefresh: true,
     strictMode: true
   },
-  stories: ['../components/**/**/*.stories.@(js|mdx)'],
+  stories: [
+    '../components/**/**/*.stories.@(js|mdx)',
+    '../docs/**/**/*.stories.@(mdx)'
+  ],
   addons: [
     '@storybook/addon-a11y',
     '@storybook/addon-essentials',

.storybook/preview-head.html

@@ -0,0 +1,158 @@
+import Icon from '@/components/atoms/Icon'
+import cn from 'classnames'
+import NextLink from 'next/link'
+import PropTypes from 'prop-types'
+import React from 'react'
+import styles from './Button.module.css'
+
+/**
+ * Render the common inner part of the button component.
+ *
+ * @param {object}  props              The props object.
+ * @param {string}  props.icon         Optional icon.
+ * @param {boolean} props.iconOnly     Whether this button is an icon only.
+ * @param {string}  props.iconPosition Position to render the icon.
+ * @param {string}  props.text         Button text or aria-label.
+ * @return {Element}                   The inside of the Button component.
+ */
+function ButtonInner({icon, iconOnly, iconPosition, text}) {
+  return (
+    <>
+      {icon && iconPosition === 'left' && (
+        <Icon icon={icon} title={text} ariaHidden={text ? true : false} />
+      )}
+      {!iconOnly && <span className={styles.text}>{text}</span>}
+      {icon && iconPosition === 'right' && (
+        <Icon icon={icon} title={text} ariaHidden={text ? true : false} />
+      )}
+    </>
+  )
+}
+
+ButtonInner.propTypes = {
+  icon: PropTypes.string,
+  iconOnly: PropTypes.bool,
+  iconPosition: PropTypes.bool,
+  text: PropTypes.string
+}
+
+/**
+ * @param {object}   props              The props object.
+ * @param {string}   props.attributes   Optional attributes to add to the button.
+ * @param {string}   props.tag          The wrapper tag.
+ * @param {string}   props.className    Optional classNames.
+ * @param {boolean}  props.disabled     Whether the button is disabled.
+ * @param {boolean}  props.fluid        Whether the button should be full width.
+ * @param {string}   props.icon         Icon to render inside the button.
+ * @param {boolean}  props.iconOnly     Whether this button should render as an icon only button.
+ * @param {string}   props.iconPosition Position to render the icon.
+ * @param {Function} props.onClick      Button onClick function.
+ * @param {string}   props.size         Button size.
+ * @param {string}   props.text         Button text.
+ * @param {string}   props.type         Button type.
+ * @param {string}   props.url          Button link url.
+ * @param {boolean}  props.urlExternal  Whether the url on this button links to an external site.
+ * @return {Element}                    The button component.
+ */
+export default function Button({
+  attributes,
+  tag,
+  className,
+  disabled,
+  fluid,
+  icon,
+  iconOnly,
+  iconPosition,
+  onClick,
+  size,
+  text,
+  type,
+  url,
+  urlExternal
+}) {
+  const buttonClassNames = cn(
+    styles.button,
+    className,
+    iconOnly && styles.iconOnly,
+    fluid && styles.fluid,
+    disabled && styles.disabled,
+    styles[size],
+    styles[type]
+  )
+
+  if (url) {
+    return urlExternal ? (
+      <a
+        href={url}
+        className={buttonClassNames}
+        aria-label={text}
+        {...attributes}
+      >
+        <ButtonInner
+          icon={icon}
+          iconOnly={iconOnly}
+          iconPosition={iconPosition}
+          text={text}
+        />
+      </a>
+    ) : (
+      <NextLink href={url}>
+        <a className={buttonClassNames} aria-label={text} {...attributes}>
+          <ButtonInner
+            icon={icon}
+            iconOnly={iconOnly}
+            iconPosition={iconPosition}
+            text={text}
+          />
+        </a>
+      </NextLink>
+    )
+  } else {
+    return (
+      // Render element with default button tag.
+      React.createElement(
+        `${tag}`,
+        {
+          className: buttonClassNames,
+          'aria-label': text,
+          onClick,
+          ...attributes,
+          disabled
+        },
+        <ButtonInner
+          icon={icon}
+          iconOnly={iconOnly}
+          iconPosition={iconPosition}
+          text={text}
+        />
+      )
+    )
+  }
+}
+
+Button.propTypes = {
+  attributes: PropTypes.object,
+  className: PropTypes.string,
+  disabled: PropTypes.bool,
+  fluid: PropTypes.bool,
+  icon: PropTypes.string,
+  iconOnly: PropTypes.bool,
+  iconPosition: PropTypes.oneOf(['left', 'right']),
+  onClick: PropTypes.func,
+  size: PropTypes.oneOf(['sm', 'md', 'lg']),
+  tag: PropTypes.string,
+  text: PropTypes.string.isRequired,
+  type: PropTypes.oneOf(['primary', 'secondary']),
+  url: PropTypes.string,
+  urlExternal: PropTypes.bool
+}
+
+Button.defaultProps = {
+  disabled: false,
+  iconOnly: false,
+  iconPosition: 'left',
+  size: 'md',
+  tag: 'button',
+  type: 'primary',
+  urlExternal: false
+}

components/atoms/Button/Button.js

@@ -0,0 +1,65 @@
+.button {
+  @apply inline-flex items-center justify-center rounded border transition-colors duration-150 ease-in-out cursor-pointer uppercase font-secondary;
+
+  &:hover,
+  &:focus,
+  &:active:not([disabled]) {
+    @apply no-underline;
+  }
+
+  /* SIZES */
+  &.lg,
+  &.md,
+  &.sm {
+    & svg + span {
+      @apply ml-12;
+    }
+
+    & span + svg {
+      @apply ml-12;
+    }
+  }
+
+  &.lg {
+    @apply px-16 py-12 text-h5;
+
+    line-height: 1.5625rem;
+  }
+
+  &.md {
+    @apply px-16 py-12 text-sm;
+
+    line-height: 1.25rem;
+  }
+
+  &.sm {
+    @apply px-16 py-8 text-caption;
+
+    line-height: 1.0625rem;
+  }
+
+  &.fluid {
+    @apply block w-full text-center;
+  }
+
+  /* TYPES */
+  &.primary {
+    @apply bg-primary text-white border-white border-opacity-0;
+
+    &.disabled {
+      @apply opacity-50;
+    }
+  }
+
+  &.secondary {
+    @apply bg-white bg-opacity-0 text-primary border-primary;
+
+    &.disabled {
+      @apply opacity-50;
+    }
+  }
+
+  &.disabled {
+    @apply cursor-not-allowed;
+  }
+}