orcs-design-system 3.2.0 → 3.2.2

package/es/components/Button/Button.stories.js

@@ -3,15 +3,27 @@ import { action } from "@storybook/addon-actions";
 import Icon from "../Icon";
 import Spacer from "../Spacer";
 import Flex from "../Flex";
-import Button from ".";
+import Button, { VARIANT_COLORS } from ".";
 export default {
-  title: "Components/Button",
+  title: "Components/Buttons/Button",
   component: Button
 };
 export var defaultButton = function defaultButton() {
   return /*#__PURE__*/React.createElement(Button, null, "Default button");
 };
 defaultButton.storyName = "Default button";
+export var variants = function variants() {
+  return /*#__PURE__*/React.createElement(Spacer, {
+    my: "3"
+  }, Object.keys(VARIANT_COLORS).map(function (variant) {
+    return /*#__PURE__*/React.createElement(Button, {
+      large: true,
+      key: variant,
+      variant: variant,
+      onClick: action("clicked")
+    }, variant);
+  }));
+};
 export var alternateSize = function alternateSize() {
   return /*#__PURE__*/React.createElement(Spacer, {
     my: "3"
@@ -179,6 +191,11 @@ defaultButton.__docgenInfo = {
   "methods": [],
   "displayName": "defaultButton"
 };
+variants.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "variants"
+};
 alternateSize.__docgenInfo = {
   "description": "",
   "methods": [],

package/es/components/Button/ButtonLink.stories.js

@@ -0,0 +1,231 @@
+import React from "react";
+import Icon from "../Icon";
+import Spacer from "../Spacer";
+import Flex from "../Flex";
+import { VARIANT_COLORS, ButtonLink } from ".";
+export default {
+  title: "Components/Buttons/ButtonLink",
+  component: ButtonLink
+};
+var link = "http://www.google.com";
+export var defaultButton = function defaultButton() {
+  return /*#__PURE__*/React.createElement(ButtonLink, {
+    href: link
+  }, "Default button");
+};
+defaultButton.storyName = "Default button";
+export var variants = function variants() {
+  return /*#__PURE__*/React.createElement(Spacer, {
+    my: "3"
+  }, Object.keys(VARIANT_COLORS).map(function (variant) {
+    return /*#__PURE__*/React.createElement(ButtonLink, {
+      large: true,
+      key: variant,
+      variant: variant,
+      href: link
+    }, variant);
+  }));
+};
+export var alternateSize = function alternateSize() {
+  return /*#__PURE__*/React.createElement(Spacer, {
+    my: "3"
+  }, /*#__PURE__*/React.createElement(ButtonLink, {
+    small: true,
+    href: link
+  }, "Small button"), /*#__PURE__*/React.createElement(ButtonLink, {
+    large: true,
+    href: link
+  }, "Large button"), /*#__PURE__*/React.createElement(ButtonLink, {
+    height: "xxxl",
+    href: link
+  }, "Specified height button"), /*#__PURE__*/React.createElement(ButtonLink, {
+    href: link,
+    width: "100px"
+  }, "A multiple-line button with specified width"));
+};
+alternateSize.storyName = "Alternate sizes";
+export var alternateColours = function alternateColours() {
+  return /*#__PURE__*/React.createElement(Spacer, {
+    my: "3"
+  }, /*#__PURE__*/React.createElement(ButtonLink, {
+    variant: "success",
+    href: link
+  }, "Success/green button"), /*#__PURE__*/React.createElement(ButtonLink, {
+    variant: "danger",
+    href: link
+  }, "Danger/red button"));
+};
+alternateColours.storyName = "Alternate colours";
+export var ghost = function ghost() {
+  return /*#__PURE__*/React.createElement(Spacer, {
+    my: "3"
+  }, /*#__PURE__*/React.createElement(ButtonLink, {
+    small: true,
+    variant: "ghost",
+    href: link
+  }, "Small ghost button"), /*#__PURE__*/React.createElement(ButtonLink, {
+    variant: "ghost",
+    href: link
+  }, "Regular ghost button"), /*#__PURE__*/React.createElement(ButtonLink, {
+    large: true,
+    variant: "ghost",
+    href: link
+  }, "Large ghost button"));
+};
+ghost.storyName = "Ghost style";
+export var fullWidth = function fullWidth() {
+  return /*#__PURE__*/React.createElement(ButtonLink, {
+    fullWidth: true,
+    href: link
+  }, "Full width button");
+};
+fullWidth.storyName = "Full width";
+export var disabled = function disabled() {
+  return /*#__PURE__*/React.createElement(Spacer, {
+    my: "r"
+  }, /*#__PURE__*/React.createElement(ButtonLink, {
+    disabled: true,
+    href: link
+  }, "Disabled button"), /*#__PURE__*/React.createElement(ButtonLink, {
+    variant: "disabled",
+    href: link
+  }, "Alternate way of making button disabled"));
+};
+disabled.storyName = "Disabled state";
+export var withIcon = function withIcon() {
+  return /*#__PURE__*/React.createElement(Spacer, {
+    my: "3"
+  }, /*#__PURE__*/React.createElement(ButtonLink, {
+    iconLeft: true,
+    href: link,
+    isLoading: true
+  }, /*#__PURE__*/React.createElement(Icon, {
+    icon: ["fas", "user-plus"]
+  }), "Left aligned icon"), /*#__PURE__*/React.createElement(ButtonLink, {
+    iconRight: true,
+    href: link
+  }, "Right aligned icon", /*#__PURE__*/React.createElement(Icon, {
+    icon: ["fas", "download"]
+  })), /*#__PURE__*/React.createElement(ButtonLink, {
+    leftIcon: ["fas", "star"],
+    href: link
+  }, "Left icon magic!"));
+};
+withIcon.storyName = "With icon";
+export var iconOnly = function iconOnly() {
+  return /*#__PURE__*/React.createElement(Spacer, {
+    my: "3"
+  }, /*#__PURE__*/React.createElement(ButtonLink, {
+    small: true,
+    iconOnly: true,
+    p: "s",
+    ariaLabel: /*#__PURE__*/React.createElement(Icon, {
+      icon: ["fas", "download"]
+    }),
+    href: link
+  }, /*#__PURE__*/React.createElement(Icon, {
+    icon: ["far", "calendar-alt"]
+  })), /*#__PURE__*/React.createElement(ButtonLink, {
+    iconOnly: true,
+    p: "s",
+    ariaLabel: "Show calendar",
+    href: link
+  }, /*#__PURE__*/React.createElement(Icon, {
+    icon: ["far", "calendar-alt"]
+  })), /*#__PURE__*/React.createElement(ButtonLink, {
+    large: true,
+    iconOnly: true,
+    p: "s",
+    ariaLabel: "Show calendar",
+    href: link
+  }, /*#__PURE__*/React.createElement(Icon, {
+    icon: ["far", "calendar-alt"]
+  })), /*#__PURE__*/React.createElement(Flex, {
+    alignItems: "center",
+    mt: "r"
+  }, /*#__PURE__*/React.createElement(Spacer, {
+    mr: "r"
+  }, /*#__PURE__*/React.createElement(ButtonLink, {
+    iconOnly: true,
+    variant: "success",
+    href: link,
+    width: "33px",
+    height: "32px",
+    ariaLabel: "Confirm"
+  }, /*#__PURE__*/React.createElement(Icon, {
+    icon: ["fas", "check"]
+  })), /*#__PURE__*/React.createElement(ButtonLink, {
+    iconOnly: true,
+    variant: "successAlternate",
+    href: link,
+    width: "33px",
+    height: "32px",
+    ariaLabel: "Confirm"
+  }, /*#__PURE__*/React.createElement(Icon, {
+    icon: ["fas", "check"]
+  })), /*#__PURE__*/React.createElement(ButtonLink, {
+    iconOnly: true,
+    variant: "danger",
+    href: link,
+    width: "33px",
+    height: "32px",
+    ariaLabel: "Cancel"
+  }, /*#__PURE__*/React.createElement(Icon, {
+    icon: ["fas", "times"]
+  })), /*#__PURE__*/React.createElement(ButtonLink, {
+    iconOnly: true,
+    variant: "dangerAlternate",
+    href: link,
+    width: "33px",
+    height: "32px",
+    ariaLabel: "Cancel"
+  }, /*#__PURE__*/React.createElement(Icon, {
+    icon: ["fas", "times"]
+  })))));
+};
+iconOnly.storyName = "Icon only";
+defaultButton.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "defaultButton"
+};
+variants.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "variants"
+};
+alternateSize.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "alternateSize"
+};
+alternateColours.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "alternateColours"
+};
+ghost.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "ghost"
+};
+fullWidth.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "fullWidth"
+};
+disabled.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "disabled"
+};
+withIcon.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "withIcon"
+};
+iconOnly.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "iconOnly"
+};

package/es/components/Button/index.js

@@ -1,251 +1,258 @@
-import _typeof from "@babel/runtime/helpers/typeof";
-import _extends from "@babel/runtime/helpers/extends";
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _extends from "@babel/runtime/helpers/extends";
+import _typeof from "@babel/runtime/helpers/typeof";
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import React from "react";
-import styled, { ThemeProvider } from "styled-components";
+import styled, { ThemeProvider, css } from "styled-components";
 import PropTypes from "prop-types";
-import { space, layout, color, border, variant, compose } from "styled-system";
-import { css } from "@styled-system/css";
+import { space, layout, color, border, compose } from "styled-system";
 import shouldForwardProp from "@styled-system/should-forward-prop";
 import Icon from "../Icon";
 import Loading from "../Loading";
 import { themeGet } from "@styled-system/theme-get";
+import { Link } from "react-router-dom";
+import { omit } from "lodash";
 export var VARIANT_COLORS = {
   "default": {
     background: "colors.primary",
     color: "colors.white",
+    borderColor: "colors.primary",
     hovered: {
       background: "colors.primaryDark",
-      color: "colors.white"
+      color: "colors.white",
+      borderColor: "colors.primaryDark"
     }
   },
   success: {
     background: "colors.success",
     color: "colors.white",
+    borderColor: "colors.success",
     hovered: {
       background: "colors.successDark",
-      color: "colors.white"
+      color: "colors.white",
+      borderColor: "colors.successDark"
+    },
+    focused: {
+      outline: "colors.successDarker"
     }
   },
   successAlternate: {
     background: "colors.greyLightest",
     color: "colors.success",
+    borderColor: "colors.greyLightest",
     hovered: {
       background: "colors.greyLighter",
-      color: "colors.success"
+      color: "colors.success",
+      borderColor: "colors.greyLighter"
+    },
+    focused: {
+      outline: "colors.successLight"
     }
   },
   danger: {
     background: "colors.danger",
     color: "colors.white",
+    borderColor: "colors.danger",
     hovered: {
       background: "colors.dangerDark",
-      color: "colors.white"
+      color: "colors.white",
+      borderColor: "colors.dangerDark"
+    },
+    focused: {
+      outline: "colors.dangerDarker"
     }
   },
   dangerAlternate: {
     background: "colors.greyLightest",
     color: "colors.danger",
+    borderColor: "colors.greyLightest",
     hovered: {
       background: "colors.greyLighter",
-      color: "colors.danger"
+      color: "colors.danger",
+      borderColor: "colors.greyLighter"
+    },
+    focused: {
+      outline: "colors.dangerLight"
     }
   },
   disabled: {
     background: "colors.greyLighter",
     color: "colors.grey",
+    borderColor: "colors.greyLighter",
     hovered: {
       background: "colors.greyLighter",
-      color: "colors.grey"
+      color: "colors.grey",
+      borderColor: "colors.greyLighter"
     }
   },
   ghost: {
     background: "colors.primaryLightest",
     color: "colors.primaryDark",
+    borderColor: "colors.primaryLightest",
     hovered: {
       background: "colors.primaryLighter",
-      color: "colors.primaryDarker"
+      color: "colors.primaryDarker",
+      borderColor: "colors.primaryLighter"
+    },
+    focused: {
+      outline: "colors.primaryLight"
     }
   }
 };
-var ButtonStyles = compose(space, layout, color, border);
-var addVariantColors = function addVariantColors(variant, key, props) {
-  return _objectSpread(_objectSpread({}, variant), {}, {
-    bg: themeGet(VARIANT_COLORS[key].background)(props),
-    color: themeGet(VARIANT_COLORS[key].color)(props),
-    "&:hover": _objectSpread(_objectSpread({}, variant["&:hover"] || {}), {}, {
-      bg: themeGet(VARIANT_COLORS[key].hovered.background)(props),
-      color: themeGet(VARIANT_COLORS[key].hovered.color)(props)
-    })
+var getOutlineStyle = function getOutlineStyle(color) {
+  return css(["outline:0;box-shadow:", ";"], function (props) {
+    return [themeGet("shadows.thinOutline")(props), themeGet(color)(props)].join(" ");
   });
 };
-var StyledButton = styled("button").withConfig({
-  shouldForwardProp: shouldForwardProp,
-  displayName: "Button__StyledButton",
-  componentId: "sc-10uojnk-0"
-}).attrs(function (props) {
+var addVariantColors = function addVariantColors(key) {
+  var variantStyle = VARIANT_COLORS[key];
+  return css(["background:", ";color:", ";border-color:", ";&:hover{background:", ";color:", ";border-color:", ";}", ""], themeGet(variantStyle.background), themeGet(variantStyle.color), themeGet(variantStyle.borderColor), themeGet(variantStyle.hovered.background), themeGet(variantStyle.hovered.color), themeGet(variantStyle.hovered.borderColor), variantStyle.focused && css(["&:focus{", "}"], getOutlineStyle(variantStyle.focused.outline)));
+};
+var getVariantStyle = function getVariantStyle(props) {
+  var styles = Object.keys(VARIANT_COLORS).reduce(function (obj, key) {
+    obj[key] = css(["", ""], addVariantColors(key));
+    return obj;
+  }, {});
+  if (props.disabled) return styles.disabled;
+  return styles[props.variant] || styles["default"];
+};
+var getSpace = function getSpace(getter) {
+  return function (props) {
+    return themeGet("space.".concat(getter(props)))(props);
+  };
+};
+var buttonStyles = css(["background:", ";color:", ";border-color:", ";display:flex;align-items:center;justify-content:center;appearance:none;box-shadow:none;margin:0;text-decoration:none;text-align:center;font-family:", ";font-weight:", ";border-radius:", ";transition:", ";border-width:", ";cursor:", ";width:", ";height:auto;font-size:", ";padding:", " ", ";svg{margin-right:", ";margin-left:", ";}&:hover{background:", ";border-color:", ";border-width:", ";border-style:solid;}&:focus{outline:0;box-shadow:", " ", ";}", " ", ""], themeGet(VARIANT_COLORS["default"].background), themeGet(VARIANT_COLORS["default"].color), themeGet("colors.primary"), themeGet("fonts.main"), themeGet("fontWeights.2"), themeGet("radii.2"), themeGet("transition.transitionDefault"), themeGet("borderWidths.1"), function (props) {
+  return props.disabled ? "not-allowed" : props.isLoading ? "progress" : "pointer";
+}, function (props) {
+  return props.fullWidth ? "100%" : "auto";
+}, function (props) {
+  var fontSize = 2;
+  if (props.large && props.iconOnly) fontSize = 5;
+  if (props.large) fontSize = 3;
+  if (props.small) fontSize = 1;
+  return themeGet("fontSizes.".concat(fontSize))(props);
+}, getSpace(function (props) {
+  return props.large ? "s" : props.small ? "xxs" : "xs";
+}), getSpace(function (props) {
+  return props.large ? "r" : props.small ? "s" : "between";
+}), getSpace(function (props) {
+  return !props.iconLeft ? "" : props.small ? "xs" : "s";
+}), getSpace(function (props) {
+  return !props.iconRight ? "" : props.small ? "xs" : "s";
+}), themeGet(VARIANT_COLORS["default"].hovered.background), themeGet("colors.primaryDark"), themeGet("borderWidths.1"), themeGet("shadows.thinOutline"), themeGet("colors.primaryDarker"), getVariantStyle, compose(space, layout, color, border));
+var attrs = function attrs(props) {
   return {
     "data-testid": props.dataTestId || props["data-testid"],
     disabled: props.disabled || props.variant == "disabled",
     className: "".concat(props.className || "", " variant-").concat(props.variant || "default")
   };
-})(function (props) {
-  return css({
-    bg: themeGet(VARIANT_COLORS["default"].background)(props),
-    color: themeGet(VARIANT_COLORS["default"].color)(props),
-    borderColor: themeGet("colors.primary")(props),
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    appearance: "none",
-    boxShadow: "none",
-    margin: "0",
-    textDecoration: "none",
-    textAlign: "center",
-    verticalAlign: "center",
-    fontFamily: themeGet("fonts.main")(props),
-    fontWeight: themeGet("fontWeights.2")(props),
-    borderRadius: themeGet("radii.2")(props),
-    transition: themeGet("transition.transitionDefault")(props),
-    borderWidth: themeGet("borderWidths.1")(props),
-    cursor: props.disabled ? "not-allowed" : props.isLoading ? "progress" : "pointer",
-    width: props.fullWidth ? "100%" : "auto",
-    height: "auto",
-    fontSize: props.small ? themeGet("fontSizes.1")(props) : props.large && props.iconOnly ? themeGet("fontSizes.5")(props) : props.large ? themeGet("fontSizes.3")(props) : themeGet("fontSizes.2")(props),
-    py: props.large ? "s" : props.small ? "xxs" : "xs",
-    px: props.large ? "r" : props.small ? "s" : "between",
-    svg: {
-      marginRight: !props.iconLeft ? "" : props.small ? "xs" : "s",
-      marginLeft: !props.iconRight ? "" : props.small ? "xs" : "s"
-    },
-    "&:hover": {
-      bg: themeGet(VARIANT_COLORS["default"].hovered.background)(props),
-      borderColor: themeGet("colors.primaryDark")(props),
-      borderWidth: themeGet("borderWidths.1")(props),
-      borderStyle: "solid"
-    },
-    "&:focus": {
-      outline: "0",
-      boxShadow: themeGet("shadows.thinOutline")(props) + " " + themeGet("colors.primaryDarker")(props)
-    }
-  });
+};
+var StyledButton = styled("button").withConfig({
+  shouldForwardProp: shouldForwardProp
+}).attrs(attrs).withConfig({
+  displayName: "Button__StyledButton",
+  componentId: "sc-10uojnk-0"
+})(["", ""], buttonStyles);
+var linkStyles = css(["width:", ";display:", ";align-items:", ";"], function (props) {
+  return props.width || "fit-content";
 }, function (props) {
-  var getOutlineStyle = function getOutlineStyle(color) {
-    return {
-      outline: "0",
-      boxShadow: [themeGet("shadows.thinOutline")(props), themeGet(color)(props)].join(" ")
-    };
-  };
-  var variants = {
-    "default": {},
-    success: {
-      borderColor: themeGet("colors.success")(props),
-      "&:hover": {
-        borderColor: themeGet("colors.successDark")(props)
-      },
-      "&:focus": getOutlineStyle("colors.successDarker")
-    },
-    successAlternate: {
-      borderColor: themeGet("colors.greyLightest")(props),
-      "&:hover": {
-        borderColor: themeGet("colors.greyLighter")(props)
-      },
-      "&:focus": getOutlineStyle("colors.successLight")
-    },
-    danger: {
-      borderColor: themeGet("colors.danger")(props),
-      "&:hover": {
-        borderColor: themeGet("colors.dangerDark")(props)
-      },
-      "&:focus": getOutlineStyle("colors.dangerDarker")
-    },
-    dangerAlternate: {
-      borderColor: themeGet("colors.greyLightest")(props),
-      "&:hover": {
-        borderColor: themeGet("colors.greyLighter")(props)
-      },
-      "&:focus": getOutlineStyle("colors.dangerLight")
-    },
-    disabled: {
-      borderColor: themeGet("colors.greyLighter")(props),
-      "&:hover": {
-        borderColor: themeGet("colors.greyLighter")(props)
-      }
-    },
-    ghost: {
-      borderColor: themeGet("colors.primaryLightest")(props),
-      "&:hover": {
-        borderColor: themeGet("colors.primaryLighter")(props)
-      },
-      "&:focus": getOutlineStyle("colors.primaryLight")
-    }
-  };
-  var newVariants = Object.entries(variants).reduce(function (variantsWithColors, _ref) {
-    var _ref2 = _slicedToArray(_ref, 2),
-      key = _ref2[0],
-      variant = _ref2[1];
-    if (VARIANT_COLORS[key]) {
-      variantsWithColors[key] = addVariantColors(variant, key, props);
-    }
-    return variantsWithColors;
-  }, _objectSpread({}, variants));
-  return variant({
-    variants: newVariants
-  });
+  return props.height || props.width ? "flex" : props.display || "inline-block";
 }, function (props) {
-  return props.disabled ? css(addVariantColors({
-    borderColor: themeGet("colors.greyLighter")(props),
-    "&:hover": {
-      borderColor: themeGet("colors.greyLighter")(props)
+  return props.alignItems || "center";
+});
+var StyledButtonLink = styled.a.withConfig({
+  shouldForwardProp: shouldForwardProp
+}).attrs(attrs).withConfig({
+  displayName: "Button__StyledButtonLink",
+  componentId: "sc-10uojnk-1"
+})(["", " ", ""], buttonStyles, linkStyles);
+var StyledReactButtonLink = styled(Link).withConfig({
+  shouldForwardProp: shouldForwardProp
+}).attrs(attrs).withConfig({
+  displayName: "Button__StyledReactButtonLink",
+  componentId: "sc-10uojnk-2"
+})(["", " ", ""], buttonStyles, linkStyles);
+var buttonPropTypes = {
+  /** Large button */
+  large: PropTypes.bool,
+  /** Small button */
+  small: PropTypes.bool,
+  /** Specifies alternate button colours/styles. */
+  variant: PropTypes.oneOf(["success", "successAlternate", "danger", "dangerAlternate", "ghost", "disabled", "default"]),
+  /** Full width button that takes up all available space of parent */
+  fullWidth: PropTypes.bool,
+  /** Adds a spinner animation to indicate loading or processing */
+  isLoading: PropTypes.bool,
+  /** Styles button to fit an icon on the left of text. Uses Icon component. */
+  iconLeft: PropTypes.bool,
+  /** Styles button to fit an icon on the right of text. Uses Icon component. */
+  iconRight: PropTypes.bool,
+  /** New functionality to specify an `Icon` on the left side without having to include it as a child. */
+  leftIcon: PropTypes.array,
+  /** New functionality to specify an `Icon` on the right side without having to include it as a child. */
+  rightIcon: PropTypes.array,
+  /** Styles button to suit having only an icon. Uses Icon component. */
+  iconOnly: PropTypes.bool,
+  /** Specifies whether the button is disabled. */
+  disabled: PropTypes.bool,
+  /** The text label on the button is passed as a child. Keep this text short and descriptive. Use an action word or confirmation if possible. */
+  children: PropTypes.node,
+  /** Adds additional styling to the rendered `<button>` using `space`, `layout`, `color` and `border` prop categories */
+  ButtonStyles: PropTypes.object,
+  /** Specifies the `data-testid` attribute for testing. */
+  dataTestId: PropTypes.string,
+  /** Specifies aria-label for iconOnly buttons. This is only required if the iconOnly button is used, as it doesn't have supporting text for accessibility.*/
+  ariaLabel: function ariaLabel(props, propName) {
+    if (props.iconOnly && (props[propName] == null || props[propName] === "")) {
+      return new Error("Missing prop `".concat(propName, "` not specified for Button component. When `iconOnly` is true, `").concat(propName, "` is required."));
     }
-  }, "disabled", props)) : css();
-}, ButtonStyles);
-export var Button = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var large = props.large,
-    small = props.small,
-    fullWidth = props.fullWidth,
-    isLoading = props.isLoading,
-    iconLeft = props.iconLeft,
-    iconRight = props.iconRight,
-    iconOnly = props.iconOnly,
-    dataTestId = props.dataTestId,
-    disabled = props.disabled,
-    leftIcon = props.leftIcon,
-    rightIcon = props.rightIcon,
-    children = props.children,
-    onClick = props.onClick,
-    ButtonStyles = props.ButtonStyles,
-    theme = props.theme,
-    ariaLabel = props.ariaLabel;
-  var component = /*#__PURE__*/React.createElement(StyledButton, _extends({
-    large: large,
-    small: small,
-    fullWidth: fullWidth,
-    isLoading: isLoading,
-    leftIcon: leftIcon,
-    rightIcon: rightIcon,
-    iconLeft: iconLeft,
-    iconRight: iconRight,
-    iconOnly: iconOnly,
-    dataTestId: dataTestId,
-    borderStyle: "solid",
-    disabled: disabled,
-    onClick: onClick,
-    ref: ref,
-    "aria-label": ariaLabel
-  }, ButtonStyles, props), leftIcon && /*#__PURE__*/React.createElement(Icon, {
-    icon: leftIcon,
-    mr: small ? "xxs" : "xs"
-  }), children, rightIcon && /*#__PURE__*/React.createElement(Icon, {
-    icon: rightIcon,
-    ml: small ? "xxs" : "xs"
-  }), isLoading && /*#__PURE__*/React.createElement(Loading, {
+    if (props[propName] && typeof props[propName] !== "string") {
+      return new Error("Invalid propType for `".concat(propName, "` supplied to Button component. Expected `string`, received `").concat(_typeof(props[propName]), "`."));
+    }
+    return null;
+  },
+  /** Specifies the color theme object. */
+  theme: PropTypes.object
+};
+var renderButton = function renderButton(ButtonComponent, props) {
+  return /*#__PURE__*/React.createElement(ButtonComponent, _extends({
+    borderStyle: "solid"
+  }, props.ButtonStyles, props, {
+    ref: props.ref
+  }), props.leftIcon && /*#__PURE__*/React.createElement(Icon, {
+    icon: props.leftIcon,
+    mr: props.small ? "xxs" : "xs"
+  }), props.children, props.rightIcon && /*#__PURE__*/React.createElement(Icon, {
+    icon: props.rightIcon,
+    ml: props.small ? "xxs" : "xs"
+  }), props.isLoading && /*#__PURE__*/React.createElement(Loading, {
     inverted: true,
     ml: "s"
   }));
+};
+export var ButtonLink = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var theme = props.theme;
+  var component = renderButton(props.to ? StyledReactButtonLink : StyledButtonLink, _objectSpread(_objectSpread({}, omit(props, "isLoading")), {}, {
+    ref: ref
+  }));
+  return theme ? /*#__PURE__*/React.createElement(ThemeProvider, {
+    theme: theme
+  }, component) : component;
+});
+ButtonLink.propTypes = _objectSpread(_objectSpread({}, buttonPropTypes), {}, {
+  target: PropTypes.string,
+  /** Link to navigate user to */
+  href: PropTypes.string
+});
+ButtonLink.defaultProps = {
+  variant: "default"
+};
+export var Button = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var theme = props.theme;
+  var component = renderButton(StyledButton, _objectSpread(_objectSpread({}, props), {}, {
+    ref: ref
+  }));
   return theme ? /*#__PURE__*/React.createElement(ThemeProvider, {
     theme: theme
   }, component) : component;
@@ -358,12 +365,166 @@ Button.__docgenInfo = {
       },
       "required": false
     },
+    "children": {
+      "description": "The text label on the button is passed as a child. Keep this text short and descriptive. Use an action word or confirmation if possible.",
+      "type": {
+        "name": "node"
+      },
+      "required": false
+    },
+    "ButtonStyles": {
+      "description": "Adds additional styling to the rendered `<button>` using `space`, `layout`, `color` and `border` prop categories",
+      "type": {
+        "name": "object"
+      },
+      "required": false
+    },
+    "dataTestId": {
+      "description": "Specifies the `data-testid` attribute for testing.",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "ariaLabel": {
+      "description": "Specifies aria-label for iconOnly buttons. This is only required if the iconOnly button is used, as it doesn't have supporting text for accessibility.",
+      "type": {
+        "name": "custom",
+        "raw": "(props, propName) => {\n  if (props.iconOnly && (props[propName] == null || props[propName] === \"\")) {\n    return new Error(\n      `Missing prop \\`${propName}\\` not specified for Button component. When \\`iconOnly\\` is true, \\`${propName}\\` is required.`\n    );\n  }\n  if (props[propName] && typeof props[propName] !== \"string\") {\n    return new Error(\n      `Invalid propType for \\`${propName}\\` supplied to Button component. Expected \\`string\\`, received \\`${typeof props[\n        propName\n      ]}\\`.`\n    );\n  }\n  return null;\n}"
+      },
+      "required": false
+    },
+    "theme": {
+      "description": "Specifies the color theme object.",
+      "type": {
+        "name": "object"
+      },
+      "required": false
+    },
     "onClick": {
       "description": "Function to run when the `Button` is clicked",
       "type": {
         "name": "func"
       },
       "required": false
+    }
+  }
+};
+export default Button;
+Button.propTypes = _objectSpread(_objectSpread({}, buttonPropTypes), {}, {
+  /** Function to run when the `Button` is clicked */
+  onClick: PropTypes.func
+});
+Button.defaultProps = {
+  variant: "default"
+};
+ButtonLink.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "ButtonLink",
+  "props": {
+    "variant": {
+      "defaultValue": {
+        "value": "\"default\"",
+        "computed": false
+      },
+      "description": "Specifies alternate button colours/styles.",
+      "type": {
+        "name": "enum",
+        "value": [{
+          "value": "\"success\"",
+          "computed": false
+        }, {
+          "value": "\"successAlternate\"",
+          "computed": false
+        }, {
+          "value": "\"danger\"",
+          "computed": false
+        }, {
+          "value": "\"dangerAlternate\"",
+          "computed": false
+        }, {
+          "value": "\"ghost\"",
+          "computed": false
+        }, {
+          "value": "\"disabled\"",
+          "computed": false
+        }, {
+          "value": "\"default\"",
+          "computed": false
+        }]
+      },
+      "required": false
+    },
+    "large": {
+      "description": "Large button",
+      "type": {
+        "name": "bool"
+      },
+      "required": false
+    },
+    "small": {
+      "description": "Small button",
+      "type": {
+        "name": "bool"
+      },
+      "required": false
+    },
+    "fullWidth": {
+      "description": "Full width button that takes up all available space of parent",
+      "type": {
+        "name": "bool"
+      },
+      "required": false
+    },
+    "isLoading": {
+      "description": "Adds a spinner animation to indicate loading or processing",
+      "type": {
+        "name": "bool"
+      },
+      "required": false
+    },
+    "iconLeft": {
+      "description": "Styles button to fit an icon on the left of text. Uses Icon component.",
+      "type": {
+        "name": "bool"
+      },
+      "required": false
+    },
+    "iconRight": {
+      "description": "Styles button to fit an icon on the right of text. Uses Icon component.",
+      "type": {
+        "name": "bool"
+      },
+      "required": false
+    },
+    "leftIcon": {
+      "description": "New functionality to specify an `Icon` on the left side without having to include it as a child.",
+      "type": {
+        "name": "array"
+      },
+      "required": false
+    },
+    "rightIcon": {
+      "description": "New functionality to specify an `Icon` on the right side without having to include it as a child.",
+      "type": {
+        "name": "array"
+      },
+      "required": false
+    },
+    "iconOnly": {
+      "description": "Styles button to suit having only an icon. Uses Icon component.",
+      "type": {
+        "name": "bool"
+      },
+      "required": false
+    },
+    "disabled": {
+      "description": "Specifies whether the button is disabled.",
+      "type": {
+        "name": "bool"
+      },
+      "required": false
     },
     "children": {
       "description": "The text label on the button is passed as a child. Keep this text short and descriptive. Use an action word or confirmation if possible.",
@@ -400,54 +561,20 @@ Button.__docgenInfo = {
         "name": "object"
       },
       "required": false
+    },
+    "target": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "href": {
+      "description": "Link to navigate user to",
+      "type": {
+        "name": "string"
+      },
+      "required": false
     }
   }
-};
-export default Button;
-Button.propTypes = {
-  /** Large button */
-  large: PropTypes.bool,
-  /** Small button */
-  small: PropTypes.bool,
-  /** Specifies alternate button colours/styles. */
-  variant: PropTypes.oneOf(["success", "successAlternate", "danger", "dangerAlternate", "ghost", "disabled", "default"]),
-  /** Full width button that takes up all available space of parent */
-  fullWidth: PropTypes.bool,
-  /** Adds a spinner animation to indicate loading or processing */
-  isLoading: PropTypes.bool,
-  /** Styles button to fit an icon on the left of text. Uses Icon component. */
-  iconLeft: PropTypes.bool,
-  /** Styles button to fit an icon on the right of text. Uses Icon component. */
-  iconRight: PropTypes.bool,
-  /** New functionality to specify an `Icon` on the left side without having to include it as a child. */
-  leftIcon: PropTypes.array,
-  /** New functionality to specify an `Icon` on the right side without having to include it as a child. */
-  rightIcon: PropTypes.array,
-  /** Styles button to suit having only an icon. Uses Icon component. */
-  iconOnly: PropTypes.bool,
-  /** Specifies whether the button is disabled. */
-  disabled: PropTypes.bool,
-  /** Function to run when the `Button` is clicked */
-  onClick: PropTypes.func,
-  /** The text label on the button is passed as a child. Keep this text short and descriptive. Use an action word or confirmation if possible. */
-  children: PropTypes.node,
-  /** Adds additional styling to the rendered `<button>` using `space`, `layout`, `color` and `border` prop categories */
-  ButtonStyles: PropTypes.object,
-  /** Specifies the `data-testid` attribute for testing. */
-  dataTestId: PropTypes.string,
-  /** Specifies aria-label for iconOnly buttons. This is only required if the iconOnly button is used, as it doesn't have supporting text for accessibility.*/
-  ariaLabel: function ariaLabel(props, propName) {
-    if (props.iconOnly && (props[propName] == null || props[propName] === "")) {
-      return new Error("Missing prop `".concat(propName, "` not specified for Button component. When `iconOnly` is true, `").concat(propName, "` is required."));
-    }
-    if (props[propName] && typeof props[propName] !== "string") {
-      return new Error("Invalid propType for `".concat(propName, "` supplied to Button component. Expected `string`, received `").concat(_typeof(props[propName]), "`."));
-    }
-    return null;
-  },
-  /** Specifies the color theme object. */
-  theme: PropTypes.object
-};
-Button.defaultProps = {
-  variant: "default"
 };

package/es/components/StyledLink/StyledLink.stories.js

@@ -3,7 +3,7 @@ import StyledLink from ".";
 import Box from "../Box";
 import Flex from "../Flex";
 import Spacer from "../Spacer";
-import { BrowserRouter } from "react-router-dom";
+import { BrowserRouter, Route, Switch } from "react-router-dom";
 export default {
   title: "Components/StyledLink",
   component: StyledLink,
@@ -56,10 +56,34 @@ export var invertedStyledLink = function invertedStyledLink() {
   }, "Bold inverted link"))));
 };
 invertedStyledLink.storyName = "Inverted";
+var routes = [{
+  path: "/",
+  label: "React link to home",
+  exact: true
+}, {
+  path: "/about",
+  label: "React link to about"
+}, {
+  path: "/cats",
+  label: "React link to cats"
+}];
 export var reactLink = function reactLink() {
-  return /*#__PURE__*/React.createElement(BrowserRouter, null, /*#__PURE__*/React.createElement(StyledLink, {
-    to: "about"
-  }, "Custom Link"));
+  return /*#__PURE__*/React.createElement(BrowserRouter, null, routes.map(function (route) {
+    return /*#__PURE__*/React.createElement(StyledLink, {
+      key: route.path,
+      to: route.path
+    }, route.label);
+  }), /*#__PURE__*/React.createElement(Switch, null, routes.map(function (route) {
+    return /*#__PURE__*/React.createElement(Route, {
+      key: route.path,
+      path: route.path,
+      exact: route.exact
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        padding: "100px"
+      }
+    }, "ROUTE RENDERED: ", route.label));
+  })));
 };
 reactLink.storyName = "Using react-router-dom";
 export var buttonLink = function buttonLink() {

package/es/components/StyledLink/index.js

@@ -1,14 +1,15 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["children", "active", "white", "bold", "theme", "to", "block", "target", "button"];
+var _excluded = ["children", "to", "button"];
 import React from "react";
 import PropTypes from "prop-types";
 import shouldForwardProp from "@styled-system/should-forward-prop";
 import styled from "styled-components";
 import { Link } from "react-router-dom";
-import { space, layout, variant, typography } from "styled-system";
+import { space, layout, typography } from "styled-system";
 import { css } from "@styled-system/css";
 import { themeGet } from "@styled-system/theme-get";
+import { ButtonLink } from "../Button";
 var styleLink = function styleLink(LinkComponent) {
   return styled(LinkComponent).withConfig({
     shouldForwardProp: shouldForwardProp,
@@ -42,115 +43,11 @@ var styleLink = function styleLink(LinkComponent) {
     });
   }, space, layout, typography);
 };
-var styleButtonLink = function styleButtonLink(LinkComponent) {
-  return styled(LinkComponent).withConfig({
-    shouldForwardProp: shouldForwardProp,
-    displayName: "StyledLink",
-    componentId: "sc-1beg6q3-1"
-  }).attrs(function (props) {
-    return {
-      className: "StyledLink",
-      to: props.to,
-      target: props.target,
-      "data-testid": props.dataTestId ? props.dataTestId : props["data-testid"] ? props["data-testid"] : null,
-      disabled: props.disabled ? true : props.variant == "disabled" ? true : false
-    };
-  })(function (props) {
-    return css({
-      bg: themeGet("colors.primary")(props),
-      color: themeGet("colors.white")(props),
-      borderColor: themeGet("colors.primary")(props),
-      borderWidth: themeGet("borderWidths.1")(props),
-      width: props.fullWidth ? "100%" : "auto",
-      textAlign: "center",
-      borderStyle: "solid",
-      textDecoration: "none",
-      fontFamily: themeGet("fonts.main")(props),
-      display: "inline-block",
-      fontWeight: themeGet("fontWeights.2")(props),
-      borderRadius: themeGet("radii.2")(props),
-      transition: themeGet("transition.transitionDefault")(props),
-      cursor: props.disabled ? "not-allowed" : props.isLoading ? "progress" : "pointer",
-      height: "auto",
-      fontSize: props.small ? themeGet("fontSizes.1")(props) : props.large && props.iconOnly ? themeGet("fontSizes.5")(props) : props.large ? themeGet("fontSizes.3")(props) : themeGet("fontSizes.2")(props),
-      py: props.large ? "s" : props.small ? "xxs" : "xs",
-      px: props.large ? "r" : props.small ? "s" : "between",
-      svg: {
-        marginRight: !props.iconLeft ? "" : props.small ? "xs" : "s",
-        marginLeft: !props.iconRight ? "" : props.small ? "xs" : "s"
-      },
-      "&:hover": {
-        bg: themeGet("colors.primaryDark")(props),
-        borderColor: themeGet("colors.primaryDark")(props)
-      }
-    });
-  }, function (props) {
-    return variant({
-      variants: {
-        "default": {},
-        success: {
-          bg: themeGet("colors.success")(props),
-          color: themeGet("colors.white")(props),
-          borderColor: themeGet("colors.success")(props),
-          "&:hover": {
-            bg: themeGet("colors.successDark")(props),
-            borderColor: themeGet("colors.successDark")(props)
-          }
-        },
-        danger: {
-          bg: themeGet("colors.danger")(props),
-          color: themeGet("colors.white")(props),
-          borderColor: themeGet("colors.danger")(props),
-          "&:hover": {
-            bg: themeGet("colors.dangerDark")(props),
-            borderColor: themeGet("colors.dangerDark")(props)
-          }
-        },
-        disabled: {
-          bg: themeGet("colors.greyLighter")(props),
-          color: themeGet("colors.grey")(props),
-          borderColor: themeGet("colors.greyLighter")(props),
-          "&:hover": {
-            bg: themeGet("colors.greyLighter")(props),
-            color: themeGet("colors.grey")(props),
-            borderColor: themeGet("colors.greyLighter")(props)
-          }
-        },
-        ghost: {
-          bg: themeGet("colors.primaryLightest")(props),
-          color: themeGet("colors.primary")(props),
-          borderColor: themeGet("colors.primaryLightest")(props),
-          "&:hover": {
-            bg: themeGet("colors.primaryLighter")(props),
-            borderColor: themeGet("colors.primaryLighter")(props),
-            color: themeGet("colors.primaryDark")(props)
-          }
-        }
-      }
-    });
-  }, function (props) {
-    return props.disabled ? css({
-      bg: themeGet("colors.greyLighter")(props),
-      color: themeGet("colors.grey")(props),
-      borderColor: themeGet("colors.greyLighter")(props),
-      "&:hover": {
-        bg: themeGet("colors.greyLighter")(props),
-        color: themeGet("colors.grey")(props),
-        borderColor: themeGet("colors.greyLighter")(props)
-      }
-    }) : css();
-  }, space, layout, typography);
-};
 var Hyperlink = styleLink(styled.a.withConfig({
   displayName: "StyledLink__Hyperlink",
-  componentId: "sc-1beg6q3-2"
+  componentId: "sc-1beg6q3-1"
 })([""]));
 var ReactLink = styleLink(Link);
-var ButtonLink = styleButtonLink(styled.a.withConfig({
-  displayName: "StyledLink__ButtonLink",
-  componentId: "sc-1beg6q3-3"
-})([""]));
-var ReactButtonLink = styleButtonLink(Link);
 
 /**
  * This `StyledLink` component supports both standard html hyperlinks and react Link components (if using react router for example).
@@ -176,49 +73,16 @@ var ReactButtonLink = styleButtonLink(Link);
  */
 var StyledLink = function StyledLink(_ref) {
   var children = _ref.children,
-    active = _ref.active,
-    white = _ref.white,
-    bold = _ref.bold,
-    theme = _ref.theme,
     to = _ref.to,
-    block = _ref.block,
-    target = _ref.target,
     button = _ref.button,
     props = _objectWithoutProperties(_ref, _excluded);
   if (button) {
-    return to ? /*#__PURE__*/React.createElement(ReactButtonLink, _extends({
-      theme: theme,
-      active: active,
-      white: white,
-      bold: bold,
-      to: to,
-      target: target
-    }, props), children) : /*#__PURE__*/React.createElement(ButtonLink, _extends({
-      theme: theme,
-      active: active,
-      white: white,
-      bold: bold,
-      to: to,
-      target: target
-    }, props), children);
+    return /*#__PURE__*/React.createElement(ButtonLink, props, children);
   }
-  return to ? /*#__PURE__*/React.createElement(ReactLink, _extends({
-    theme: theme,
-    active: active,
-    white: white,
-    bold: bold,
-    to: to,
-    block: block,
-    target: target
-  }, props), children) : /*#__PURE__*/React.createElement(Hyperlink, _extends({
-    theme: theme,
-    active: active,
-    white: white,
-    bold: bold,
-    to: to,
-    block: block,
-    target: target
-  }, props), children);
+  var LinkComponent = to ? ReactLink : Hyperlink;
+  return /*#__PURE__*/React.createElement(LinkComponent, _extends({}, props, {
+    to: to
+  }), children);
 };
 StyledLink.propTypes = {
   /** The content wrapped by the link component */

package/es/components.test.js

@@ -1,4 +1,4 @@
 import * as components from ".";
 test("all components exported", function () {
-  expect(Object.keys(components)).toMatchInlineSnapshot("\n    Array [\n      \"ActionsMenu\",\n      \"ActionsMenuBody\",\n      \"ActionsMenuHeading\",\n      \"ActionsMenuItem\",\n      \"Avatar\",\n      \"Badge\",\n      \"Box\",\n      \"Button\",\n      \"ButtonGroupContainer\",\n      \"ButtonGroupItem\",\n      \"Card\",\n      \"Checkbox\",\n      \"Code\",\n      \"DatePicker\",\n      \"Divider\",\n      \"Expandable\",\n      \"Flex\",\n      \"FlexItem\",\n      \"GlobalStyles\",\n      \"Grid\",\n      \"GridItem\",\n      \"H1\",\n      \"H2\",\n      \"H3\",\n      \"H4\",\n      \"H5\",\n      \"H6\",\n      \"Header\",\n      \"HeaderSimple\",\n      \"Icon\",\n      \"Loading\",\n      \"Modal\",\n      \"Notification\",\n      \"P\",\n      \"Popover\",\n      \"ProgressBar\",\n      \"Quote\",\n      \"RadioButton\",\n      \"Range\",\n      \"Select\",\n      \"SideNav\",\n      \"Sidebar\",\n      \"SidebarClose\",\n      \"SidebarPanel\",\n      \"SidebarPanels\",\n      \"SidebarTab\",\n      \"SidebarTabs\",\n      \"Small\",\n      \"Spacer\",\n      \"StatusDot\",\n      \"StyledLink\",\n      \"SystemThemeProvider\",\n      \"Tab\",\n      \"Table\",\n      \"TabsContainer\",\n      \"Tag\",\n      \"Text\",\n      \"TextArea\",\n      \"TextInput\",\n      \"Toggle\",\n      \"TreeNav\",\n      \"Typography\",\n      \"VARIANT_COLORS\",\n      \"getOptionByValue\",\n      \"styleLink\",\n      \"systemThemeCollapsed\",\n      \"systemtheme\",\n    ]\n  ");
+  expect(Object.keys(components)).toMatchInlineSnapshot("\n    Array [\n      \"ActionsMenu\",\n      \"ActionsMenuBody\",\n      \"ActionsMenuHeading\",\n      \"ActionsMenuItem\",\n      \"Avatar\",\n      \"Badge\",\n      \"Box\",\n      \"Button\",\n      \"ButtonGroupContainer\",\n      \"ButtonGroupItem\",\n      \"ButtonLink\",\n      \"Card\",\n      \"Checkbox\",\n      \"Code\",\n      \"DatePicker\",\n      \"Divider\",\n      \"Expandable\",\n      \"Flex\",\n      \"FlexItem\",\n      \"GlobalStyles\",\n      \"Grid\",\n      \"GridItem\",\n      \"H1\",\n      \"H2\",\n      \"H3\",\n      \"H4\",\n      \"H5\",\n      \"H6\",\n      \"Header\",\n      \"HeaderSimple\",\n      \"Icon\",\n      \"Loading\",\n      \"Modal\",\n      \"Notification\",\n      \"P\",\n      \"Popover\",\n      \"ProgressBar\",\n      \"Quote\",\n      \"RadioButton\",\n      \"Range\",\n      \"Select\",\n      \"SideNav\",\n      \"Sidebar\",\n      \"SidebarClose\",\n      \"SidebarPanel\",\n      \"SidebarPanels\",\n      \"SidebarTab\",\n      \"SidebarTabs\",\n      \"Small\",\n      \"Spacer\",\n      \"StatusDot\",\n      \"StyledLink\",\n      \"SystemThemeProvider\",\n      \"Tab\",\n      \"Table\",\n      \"TabsContainer\",\n      \"Tag\",\n      \"Text\",\n      \"TextArea\",\n      \"TextInput\",\n      \"Toggle\",\n      \"TreeNav\",\n      \"Typography\",\n      \"VARIANT_COLORS\",\n      \"getOptionByValue\",\n      \"styleLink\",\n      \"systemThemeCollapsed\",\n      \"systemtheme\",\n    ]\n  ");
 });

package/es/index.js

@@ -11,7 +11,7 @@ export { default as ActionsMenu, ActionsMenuBody, ActionsMenuHeading, ActionsMen
 export { default as Avatar } from "./components/Avatar";
 export { default as Badge } from "./components/Badge";
 export { default as Box } from "./components/Box";
-export { default as Button, VARIANT_COLORS } from "./components/Button";
+export { default as Button, ButtonLink, VARIANT_COLORS } from "./components/Button";
 export { ButtonGroupContainer, ButtonGroupItem } from "./components/ButtonGroup";
 export { default as Card } from "./components/Card";
 export { default as Checkbox } from "./components/Checkbox";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "orcs-design-system",
-  "version": "3.2.0",
+  "version": "3.2.2",
   "engines": {
     "node": "20.12.2"
   },