@pareto-engineering/design-system 2.0.0-alpha.10 → 2.0.0-alpha.11

package/dist/cjs/b/Button/Button.js

@@ -13,7 +13,7 @@ var _bem = _interopRequireDefault(require("@pareto-engineering/bem"));
 
 var _ = require("../..");
 
-var _excluded = ["id", "className", "style", "children", "isLoading", "color", "isCompact", "isGhost", "isSimple"];
+var _excluded = ["id", "className", "style", "children", "isLoading", "color", "isCompact", "isGhost", "isSimple", "arrowDirection"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -43,7 +43,8 @@ var Button = _ref => {
     color,
     isCompact,
     isGhost,
-    isSimple
+    isSimple,
+    arrowDirection
   } = _ref,
       otherProps = _objectWithoutProperties(_ref, _excluded);
 
@@ -52,7 +53,7 @@ var Button = _ref => {
   }, []);
   return /*#__PURE__*/React.createElement("button", _extends({
     id: id,
-    className: [baseClassName, componentClassName, userClassName, "x-".concat(color), isGhost && _bem.default.modifierGhost, isCompact && _bem.default.modifierCompact, isSimple && _bem.default.modifierSimple].filter(e => e).join(' '),
+    className: [baseClassName, componentClassName, userClassName, "x-".concat(color), isGhost && _bem.default.modifierGhost, isCompact && _bem.default.modifierCompact, isSimple && _bem.default.modifierSimple, arrowDirection && "arrow-".concat(arrowDirection)].filter(e => e).join(' '),
     style: style,
     type: "button"
   }, otherProps), isLoading ? /*#__PURE__*/React.createElement(_.LoadingCircle, {
@@ -107,7 +108,12 @@ Button.propTypes = {
   /**
    * Button loading state
    */
-  isLoading: _propTypes.default.bool
+  isLoading: _propTypes.default.bool,
+
+  /**
+   * The direction of the arrow if the button has one
+   */
+  arrowDirection: _propTypes.default.string
 };
 Button.defaultProps = {
   color: 'main1'

package/dist/cjs/b/Button/styles.scss

@@ -6,6 +6,7 @@ $default-padding: 1em 1em .84em;
 $compact-padding: .6em .6em .48em;
 $default-color:primary;
 $font-weight:bold;
+$default-margin:.5em;
 
 .#{bem.$base}.button {
   background: var(--x, var(--#{$default-color}));
@@ -16,6 +17,24 @@ $font-weight:bold;
   padding: $default-padding;
   transition: all .25s;
 
+  &.arrow-right{
+    &::after {
+      content: "L";
+      font-family: "icons";
+      vertical-align: middle;
+      margin-left: $default-margin;
+    }
+  }
+
+  &.arrow-left{
+    &::before {
+      content: "H";
+      font-family: "icons";
+      vertical-align: middle;
+      margin-right: $default-margin;
+    }
+  }
+
   &:not(:disabled) {
     cursor: pointer;
 
@@ -64,6 +83,7 @@ $font-weight:bold;
   &.#{bem.$modifier-simple} {
     background: transparent;
     border: 1px solid transparent;
+    padding: 0;
     color: var(--x, var(--#{$default-color}));
 
     &:disabled,

package/dist/es/b/Button/Button.js

@@ -23,6 +23,7 @@ const Button = ({
   isCompact,
   isGhost,
   isSimple,
+  arrowDirection,
   ...otherProps
 }) => {
   useLayoutEffect(() => {
@@ -30,7 +31,7 @@ const Button = ({
   }, []);
   return /*#__PURE__*/React.createElement("button", _extends({
     id: id,
-    className: [baseClassName, componentClassName, userClassName, `x-${color}`, isGhost && styleNames.modifierGhost, isCompact && styleNames.modifierCompact, isSimple && styleNames.modifierSimple].filter(e => e).join(' '),
+    className: [baseClassName, componentClassName, userClassName, `x-${color}`, isGhost && styleNames.modifierGhost, isCompact && styleNames.modifierCompact, isSimple && styleNames.modifierSimple, arrowDirection && `arrow-${arrowDirection}`].filter(e => e).join(' '),
     style: style,
     type: "button"
   }, otherProps), isLoading ? /*#__PURE__*/React.createElement(LoadingCircle, {
@@ -85,7 +86,12 @@ Button.propTypes = {
   /**
    * Button loading state
    */
-  isLoading: PropTypes.bool
+  isLoading: PropTypes.bool,
+
+  /**
+   * The direction of the arrow if the button has one
+   */
+  arrowDirection: PropTypes.string
 };
 Button.defaultProps = {
   color: 'main1'

package/dist/es/b/Button/styles.scss

@@ -6,6 +6,7 @@ $default-padding: 1em 1em .84em;
 $compact-padding: .6em .6em .48em;
 $default-color:primary;
 $font-weight:bold;
+$default-margin:.5em;
 
 .#{bem.$base}.button {
   background: var(--x, var(--#{$default-color}));
@@ -16,6 +17,24 @@ $font-weight:bold;
   padding: $default-padding;
   transition: all .25s;
 
+  &.arrow-right{
+    &::after {
+      content: "L";
+      font-family: "icons";
+      vertical-align: middle;
+      margin-left: $default-margin;
+    }
+  }
+
+  &.arrow-left{
+    &::before {
+      content: "H";
+      font-family: "icons";
+      vertical-align: middle;
+      margin-right: $default-margin;
+    }
+  }
+
   &:not(:disabled) {
     cursor: pointer;
 
@@ -64,6 +83,7 @@ $font-weight:bold;
   &.#{bem.$modifier-simple} {
     background: transparent;
     border: 1px solid transparent;
+    padding: 0;
     color: var(--x, var(--#{$default-color}));
 
     &:disabled,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pareto-engineering/design-system",
-  "version": "2.0.0-alpha.10",
+  "version": "2.0.0-alpha.11",
   "description": "",
   "main": "dist/cjs/index.js",
   "module": "dist/es/index.js",
@@ -79,9 +79,9 @@
     "stylelint-config-palantir": "^5.1.0"
   },
   "dependencies": {
-    "@pareto-engineering/assets": "^2.0.0-alpha.3",
+    "@pareto-engineering/assets": "^2.0.0-alpha.5",
     "@pareto-engineering/bem": "^0.1.5",
-    "@pareto-engineering/styles": "^2.0.0-alpha.6",
+    "@pareto-engineering/styles": "^2.0.0-alpha.8",
     "date-fns": "^2.22.1",
     "formik": "^2.2.9",
     "hamburgers": "^1.1.3",

package/src/__snapshots__/Storyshots.test.js.snap

@@ -1661,7 +1661,7 @@ exports[`Storyshots a/Timestamp Distance Format 1`] = `
   className="base timestamp"
   onClick={[Function]}
 >
-  in 10 months
+  in 9 months
 </p>
 `;
 
@@ -1690,6 +1690,1146 @@ Array [
 ]
 `;
 
+exports[`Storyshots b/Button Arrow Left 1`] = `
+Array [
+  <button
+    className="base button x-main1 arrow-left"
+    type="button"
+  >
+    This is a
+     
+    main1
+     
+    button
+  </button>,
+  <button
+    className="base button x-main2 arrow-left"
+    type="button"
+  >
+    This is a
+     
+    main2
+     
+    button
+  </button>,
+  <button
+    className="base button x-main3 arrow-left"
+    type="button"
+  >
+    This is a
+     
+    main3
+     
+    button
+  </button>,
+  <button
+    className="base button x-main4 arrow-left"
+    type="button"
+  >
+    This is a
+     
+    main4
+     
+    button
+  </button>,
+  <button
+    className="base button x-success arrow-left"
+    type="button"
+  >
+    This is a
+     
+    success
+     
+    button
+  </button>,
+  <button
+    className="base button x-warning arrow-left"
+    type="button"
+  >
+    This is a
+     
+    warning
+     
+    button
+  </button>,
+  <button
+    className="base button x-error arrow-left"
+    type="button"
+  >
+    This is a
+     
+    error
+     
+    button
+  </button>,
+  <button
+    className="base button x-background1 arrow-left"
+    type="button"
+  >
+    This is a
+     
+    background1
+     
+    button
+  </button>,
+  <button
+    className="base button x-background2 arrow-left"
+    type="button"
+  >
+    This is a
+     
+    background2
+     
+    button
+  </button>,
+  <button
+    className="base button x-background3 arrow-left"
+    type="button"
+  >
+    This is a
+     
+    background3
+     
+    button
+  </button>,
+  <button
+    className="base button x-background4 arrow-left"
+    type="button"
+  >
+    This is a
+     
+    background4
+     
+    button
+  </button>,
+  <button
+    className="base button x-background5 arrow-left"
+    type="button"
+  >
+    This is a
+     
+    background5
+     
+    button
+  </button>,
+  <button
+    className="base button x-background6 arrow-left"
+    type="button"
+  >
+    This is a
+     
+    background6
+     
+    button
+  </button>,
+  <button
+    className="base button x-heading arrow-left"
+    type="button"
+  >
+    This is a
+     
+    heading
+     
+    button
+  </button>,
+  <button
+    className="base button x-paragraph arrow-left"
+    type="button"
+  >
+    This is a
+     
+    paragraph
+     
+    button
+  </button>,
+  <button
+    className="base button x-subtitle arrow-left"
+    type="button"
+  >
+    This is a
+     
+    subtitle
+     
+    button
+  </button>,
+  <button
+    className="base button x-metadata arrow-left"
+    type="button"
+  >
+    This is a
+     
+    metadata
+     
+    button
+  </button>,
+  <button
+    className="base button x-link arrow-left"
+    type="button"
+  >
+    This is a
+     
+    link
+     
+    button
+  </button>,
+  <button
+    className="base button x-navlink arrow-left"
+    type="button"
+  >
+    This is a
+     
+    navlink
+     
+    button
+  </button>,
+  <button
+    className="base button x-twitter arrow-left"
+    type="button"
+  >
+    This is a
+     
+    twitter
+     
+    button
+  </button>,
+  <button
+    className="base button x-facebook arrow-left"
+    type="button"
+  >
+    This is a
+     
+    facebook
+     
+    button
+  </button>,
+  <button
+    className="base button x-instagram arrow-left"
+    type="button"
+  >
+    This is a
+     
+    instagram
+     
+    button
+  </button>,
+  <button
+    className="base button x-google arrow-left"
+    type="button"
+  >
+    This is a
+     
+    google
+     
+    button
+  </button>,
+  <button
+    className="base button x-black arrow-left"
+    type="button"
+  >
+    This is a
+     
+    black
+     
+    button
+  </button>,
+  <button
+    className="base button x-anchor arrow-left"
+    type="button"
+  >
+    This is a
+     
+    anchor
+     
+    button
+  </button>,
+  <button
+    className="base button x-grey arrow-left"
+    type="button"
+  >
+    This is a
+     
+    grey
+     
+    button
+  </button>,
+  <button
+    className="base button x-pearl arrow-left"
+    type="button"
+  >
+    This is a
+     
+    pearl
+     
+    button
+  </button>,
+  <button
+    className="base button x-white arrow-left"
+    type="button"
+  >
+    This is a
+     
+    white
+     
+    button
+  </button>,
+]
+`;
+
+exports[`Storyshots b/Button Arrow Left Simple 1`] = `
+Array [
+  <button
+    className="base button x-main1 modifierSimple arrow-left"
+    type="button"
+  >
+    This is a
+     
+    main1
+     
+    button
+  </button>,
+  <button
+    className="base button x-main2 modifierSimple arrow-left"
+    type="button"
+  >
+    This is a
+     
+    main2
+     
+    button
+  </button>,
+  <button
+    className="base button x-main3 modifierSimple arrow-left"
+    type="button"
+  >
+    This is a
+     
+    main3
+     
+    button
+  </button>,
+  <button
+    className="base button x-main4 modifierSimple arrow-left"
+    type="button"
+  >
+    This is a
+     
+    main4
+     
+    button
+  </button>,
+  <button
+    className="base button x-success modifierSimple arrow-left"
+    type="button"
+  >
+    This is a
+     
+    success
+     
+    button
+  </button>,
+  <button
+    className="base button x-warning modifierSimple arrow-left"
+    type="button"
+  >
+    This is a
+     
+    warning
+     
+    button
+  </button>,
+  <button
+    className="base button x-error modifierSimple arrow-left"
+    type="button"
+  >
+    This is a
+     
+    error
+     
+    button
+  </button>,
+  <button
+    className="base button x-background1 modifierSimple arrow-left"
+    type="button"
+  >
+    This is a
+     
+    background1
+     
+    button
+  </button>,
+  <button
+    className="base button x-background2 modifierSimple arrow-left"
+    type="button"
+  >
+    This is a
+     
+    background2
+     
+    button
+  </button>,
+  <button
+    className="base button x-background3 modifierSimple arrow-left"
+    type="button"
+  >
+    This is a
+     
+    background3
+     
+    button
+  </button>,
+  <button
+    className="base button x-background4 modifierSimple arrow-left"
+    type="button"
+  >
+    This is a
+     
+    background4
+     
+    button
+  </button>,
+  <button
+    className="base button x-background5 modifierSimple arrow-left"
+    type="button"
+  >
+    This is a
+     
+    background5
+     
+    button
+  </button>,
+  <button
+    className="base button x-background6 modifierSimple arrow-left"
+    type="button"
+  >
+    This is a
+     
+    background6
+     
+    button
+  </button>,
+  <button
+    className="base button x-heading modifierSimple arrow-left"
+    type="button"
+  >
+    This is a
+     
+    heading
+     
+    button
+  </button>,
+  <button
+    className="base button x-paragraph modifierSimple arrow-left"
+    type="button"
+  >
+    This is a
+     
+    paragraph
+     
+    button
+  </button>,
+  <button
+    className="base button x-subtitle modifierSimple arrow-left"
+    type="button"
+  >
+    This is a
+     
+    subtitle
+     
+    button
+  </button>,
+  <button
+    className="base button x-metadata modifierSimple arrow-left"
+    type="button"
+  >
+    This is a
+     
+    metadata
+     
+    button
+  </button>,
+  <button
+    className="base button x-link modifierSimple arrow-left"
+    type="button"
+  >
+    This is a
+     
+    link
+     
+    button
+  </button>,
+  <button
+    className="base button x-navlink modifierSimple arrow-left"
+    type="button"
+  >
+    This is a
+     
+    navlink
+     
+    button
+  </button>,
+  <button
+    className="base button x-twitter modifierSimple arrow-left"
+    type="button"
+  >
+    This is a
+     
+    twitter
+     
+    button
+  </button>,
+  <button
+    className="base button x-facebook modifierSimple arrow-left"
+    type="button"
+  >
+    This is a
+     
+    facebook
+     
+    button
+  </button>,
+  <button
+    className="base button x-instagram modifierSimple arrow-left"
+    type="button"
+  >
+    This is a
+     
+    instagram
+     
+    button
+  </button>,
+  <button
+    className="base button x-google modifierSimple arrow-left"
+    type="button"
+  >
+    This is a
+     
+    google
+     
+    button
+  </button>,
+  <button
+    className="base button x-black modifierSimple arrow-left"
+    type="button"
+  >
+    This is a
+     
+    black
+     
+    button
+  </button>,
+  <button
+    className="base button x-anchor modifierSimple arrow-left"
+    type="button"
+  >
+    This is a
+     
+    anchor
+     
+    button
+  </button>,
+  <button
+    className="base button x-grey modifierSimple arrow-left"
+    type="button"
+  >
+    This is a
+     
+    grey
+     
+    button
+  </button>,
+  <button
+    className="base button x-pearl modifierSimple arrow-left"
+    type="button"
+  >
+    This is a
+     
+    pearl
+     
+    button
+  </button>,
+  <button
+    className="base button x-white modifierSimple arrow-left"
+    type="button"
+  >
+    This is a
+     
+    white
+     
+    button
+  </button>,
+]
+`;
+
+exports[`Storyshots b/Button Arrow Right 1`] = `
+Array [
+  <button
+    className="base button x-main1 arrow-right"
+    type="button"
+  >
+    This is a
+     
+    main1
+     
+    button
+  </button>,
+  <button
+    className="base button x-main2 arrow-right"
+    type="button"
+  >
+    This is a
+     
+    main2
+     
+    button
+  </button>,
+  <button
+    className="base button x-main3 arrow-right"
+    type="button"
+  >
+    This is a
+     
+    main3
+     
+    button
+  </button>,
+  <button
+    className="base button x-main4 arrow-right"
+    type="button"
+  >
+    This is a
+     
+    main4
+     
+    button
+  </button>,
+  <button
+    className="base button x-success arrow-right"
+    type="button"
+  >
+    This is a
+     
+    success
+     
+    button
+  </button>,
+  <button
+    className="base button x-warning arrow-right"
+    type="button"
+  >
+    This is a
+     
+    warning
+     
+    button
+  </button>,
+  <button
+    className="base button x-error arrow-right"
+    type="button"
+  >
+    This is a
+     
+    error
+     
+    button
+  </button>,
+  <button
+    className="base button x-background1 arrow-right"
+    type="button"
+  >
+    This is a
+     
+    background1
+     
+    button
+  </button>,
+  <button
+    className="base button x-background2 arrow-right"
+    type="button"
+  >
+    This is a
+     
+    background2
+     
+    button
+  </button>,
+  <button
+    className="base button x-background3 arrow-right"
+    type="button"
+  >
+    This is a
+     
+    background3
+     
+    button
+  </button>,
+  <button
+    className="base button x-background4 arrow-right"
+    type="button"
+  >
+    This is a
+     
+    background4
+     
+    button
+  </button>,
+  <button
+    className="base button x-background5 arrow-right"
+    type="button"
+  >
+    This is a
+     
+    background5
+     
+    button
+  </button>,
+  <button
+    className="base button x-background6 arrow-right"
+    type="button"
+  >
+    This is a
+     
+    background6
+     
+    button
+  </button>,
+  <button
+    className="base button x-heading arrow-right"
+    type="button"
+  >
+    This is a
+     
+    heading
+     
+    button
+  </button>,
+  <button
+    className="base button x-paragraph arrow-right"
+    type="button"
+  >
+    This is a
+     
+    paragraph
+     
+    button
+  </button>,
+  <button
+    className="base button x-subtitle arrow-right"
+    type="button"
+  >
+    This is a
+     
+    subtitle
+     
+    button
+  </button>,
+  <button
+    className="base button x-metadata arrow-right"
+    type="button"
+  >
+    This is a
+     
+    metadata
+     
+    button
+  </button>,
+  <button
+    className="base button x-link arrow-right"
+    type="button"
+  >
+    This is a
+     
+    link
+     
+    button
+  </button>,
+  <button
+    className="base button x-navlink arrow-right"
+    type="button"
+  >
+    This is a
+     
+    navlink
+     
+    button
+  </button>,
+  <button
+    className="base button x-twitter arrow-right"
+    type="button"
+  >
+    This is a
+     
+    twitter
+     
+    button
+  </button>,
+  <button
+    className="base button x-facebook arrow-right"
+    type="button"
+  >
+    This is a
+     
+    facebook
+     
+    button
+  </button>,
+  <button
+    className="base button x-instagram arrow-right"
+    type="button"
+  >
+    This is a
+     
+    instagram
+     
+    button
+  </button>,
+  <button
+    className="base button x-google arrow-right"
+    type="button"
+  >
+    This is a
+     
+    google
+     
+    button
+  </button>,
+  <button
+    className="base button x-black arrow-right"
+    type="button"
+  >
+    This is a
+     
+    black
+     
+    button
+  </button>,
+  <button
+    className="base button x-anchor arrow-right"
+    type="button"
+  >
+    This is a
+     
+    anchor
+     
+    button
+  </button>,
+  <button
+    className="base button x-grey arrow-right"
+    type="button"
+  >
+    This is a
+     
+    grey
+     
+    button
+  </button>,
+  <button
+    className="base button x-pearl arrow-right"
+    type="button"
+  >
+    This is a
+     
+    pearl
+     
+    button
+  </button>,
+  <button
+    className="base button x-white arrow-right"
+    type="button"
+  >
+    This is a
+     
+    white
+     
+    button
+  </button>,
+]
+`;
+
+exports[`Storyshots b/Button Arrow Right Simple 1`] = `
+Array [
+  <button
+    className="base button x-main1 modifierSimple arrow-right"
+    type="button"
+  >
+    This is a
+     
+    main1
+     
+    button
+  </button>,
+  <button
+    className="base button x-main2 modifierSimple arrow-right"
+    type="button"
+  >
+    This is a
+     
+    main2
+     
+    button
+  </button>,
+  <button
+    className="base button x-main3 modifierSimple arrow-right"
+    type="button"
+  >
+    This is a
+     
+    main3
+     
+    button
+  </button>,
+  <button
+    className="base button x-main4 modifierSimple arrow-right"
+    type="button"
+  >
+    This is a
+     
+    main4
+     
+    button
+  </button>,
+  <button
+    className="base button x-success modifierSimple arrow-right"
+    type="button"
+  >
+    This is a
+     
+    success
+     
+    button
+  </button>,
+  <button
+    className="base button x-warning modifierSimple arrow-right"
+    type="button"
+  >
+    This is a
+     
+    warning
+     
+    button
+  </button>,
+  <button
+    className="base button x-error modifierSimple arrow-right"
+    type="button"
+  >
+    This is a
+     
+    error
+     
+    button
+  </button>,
+  <button
+    className="base button x-background1 modifierSimple arrow-right"
+    type="button"
+  >
+    This is a
+     
+    background1
+     
+    button
+  </button>,
+  <button
+    className="base button x-background2 modifierSimple arrow-right"
+    type="button"
+  >
+    This is a
+     
+    background2
+     
+    button
+  </button>,
+  <button
+    className="base button x-background3 modifierSimple arrow-right"
+    type="button"
+  >
+    This is a
+     
+    background3
+     
+    button
+  </button>,
+  <button
+    className="base button x-background4 modifierSimple arrow-right"
+    type="button"
+  >
+    This is a
+     
+    background4
+     
+    button
+  </button>,
+  <button
+    className="base button x-background5 modifierSimple arrow-right"
+    type="button"
+  >
+    This is a
+     
+    background5
+     
+    button
+  </button>,
+  <button
+    className="base button x-background6 modifierSimple arrow-right"
+    type="button"
+  >
+    This is a
+     
+    background6
+     
+    button
+  </button>,
+  <button
+    className="base button x-heading modifierSimple arrow-right"
+    type="button"
+  >
+    This is a
+     
+    heading
+     
+    button
+  </button>,
+  <button
+    className="base button x-paragraph modifierSimple arrow-right"
+    type="button"
+  >
+    This is a
+     
+    paragraph
+     
+    button
+  </button>,
+  <button
+    className="base button x-subtitle modifierSimple arrow-right"
+    type="button"
+  >
+    This is a
+     
+    subtitle
+     
+    button
+  </button>,
+  <button
+    className="base button x-metadata modifierSimple arrow-right"
+    type="button"
+  >
+    This is a
+     
+    metadata
+     
+    button
+  </button>,
+  <button
+    className="base button x-link modifierSimple arrow-right"
+    type="button"
+  >
+    This is a
+     
+    link
+     
+    button
+  </button>,
+  <button
+    className="base button x-navlink modifierSimple arrow-right"
+    type="button"
+  >
+    This is a
+     
+    navlink
+     
+    button
+  </button>,
+  <button
+    className="base button x-twitter modifierSimple arrow-right"
+    type="button"
+  >
+    This is a
+     
+    twitter
+     
+    button
+  </button>,
+  <button
+    className="base button x-facebook modifierSimple arrow-right"
+    type="button"
+  >
+    This is a
+     
+    facebook
+     
+    button
+  </button>,
+  <button
+    className="base button x-instagram modifierSimple arrow-right"
+    type="button"
+  >
+    This is a
+     
+    instagram
+     
+    button
+  </button>,
+  <button
+    className="base button x-google modifierSimple arrow-right"
+    type="button"
+  >
+    This is a
+     
+    google
+     
+    button
+  </button>,
+  <button
+    className="base button x-black modifierSimple arrow-right"
+    type="button"
+  >
+    This is a
+     
+    black
+     
+    button
+  </button>,
+  <button
+    className="base button x-anchor modifierSimple arrow-right"
+    type="button"
+  >
+    This is a
+     
+    anchor
+     
+    button
+  </button>,
+  <button
+    className="base button x-grey modifierSimple arrow-right"
+    type="button"
+  >
+    This is a
+     
+    grey
+     
+    button
+  </button>,
+  <button
+    className="base button x-pearl modifierSimple arrow-right"
+    type="button"
+  >
+    This is a
+     
+    pearl
+     
+    button
+  </button>,
+  <button
+    className="base button x-white modifierSimple arrow-right"
+    type="button"
+  >
+    This is a
+     
+    white
+     
+    button
+  </button>,
+]
+`;
+
 exports[`Storyshots b/Button Base 1`] = `
 <button
   className="base button x-main1"

package/src/stories/b/Button.stories.jsx

@@ -82,3 +82,25 @@ export const Loading = MultipleTemplate.bind({})
 Loading.args = {
   isLoading:true,
 }
+
+export const ArrowLeft = MultipleTemplate.bind({})
+ArrowLeft.args = {
+  arrowDirection:'left',
+}
+
+export const ArrowRight = MultipleTemplate.bind({})
+ArrowRight.args = {
+  arrowDirection:'right',
+}
+
+export const ArrowLeftSimple = MultipleTemplate.bind({})
+ArrowLeftSimple.args = {
+  arrowDirection:'left',
+  isSimple      :true,
+}
+
+export const ArrowRightSimple = MultipleTemplate.bind({})
+ArrowRightSimple.args = {
+  arrowDirection:'right',
+  isSimple      :true,
+}

package/src/ui/b/Button/Button.jsx

@@ -23,6 +23,7 @@ const Button = ({
   isCompact,
   isGhost,
   isSimple,
+  arrowDirection,
   ...otherProps
 }) => {
   useLayoutEffect(() => {
@@ -40,6 +41,7 @@ const Button = ({
         isGhost && styleNames.modifierGhost,
         isCompact && styleNames.modifierCompact,
         isSimple && styleNames.modifierSimple,
+        arrowDirection && `arrow-${arrowDirection}`,
       ]
         .filter((e) => e)
         .join(' ')}
@@ -103,6 +105,11 @@ Button.propTypes = {
    * Button loading state
    */
   isLoading:PropTypes.bool,
+
+  /**
+   * The direction of the arrow if the button has one
+   */
+  arrowDirection:PropTypes.string,
 }
 
 Button.defaultProps = {

package/src/ui/b/Button/styles.scss

@@ -6,6 +6,7 @@ $default-padding: 1em 1em .84em;
 $compact-padding: .6em .6em .48em;
 $default-color:primary;
 $font-weight:bold;
+$default-margin:.5em;
 
 .#{bem.$base}.button {
   background: var(--x, var(--#{$default-color}));
@@ -16,6 +17,24 @@ $font-weight:bold;
   padding: $default-padding;
   transition: all .25s;
 
+  &.arrow-right{
+    &::after {
+      content: "L";
+      font-family: "icons";
+      vertical-align: middle;
+      margin-left: $default-margin;
+    }
+  }
+
+  &.arrow-left{
+    &::before {
+      content: "H";
+      font-family: "icons";
+      vertical-align: middle;
+      margin-right: $default-margin;
+    }
+  }
+
   &:not(:disabled) {
     cursor: pointer;
 
@@ -64,6 +83,7 @@ $font-weight:bold;
   &.#{bem.$modifier-simple} {
     background: transparent;
     border: 1px solid transparent;
+    padding: 0;
     color: var(--x, var(--#{$default-color}));
 
     &:disabled,