@sb1/ffe-buttons-react 18.0.6 → 19.0.0

package/es/ActionButton.js

@@ -1,17 +1,28 @@
-var _excluded = ["className"];
+var _excluded = ["className", "leftIcon", "rightIcon"];
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 import React from 'react';
 import { bool, func, node, string, oneOfType, object, shape, elementType } from 'prop-types';
 import classNames from 'classnames';
+import _Symbol from '@sb1/ffe-symbols-react';
 import Button from './BaseButton';
 export default function ActionButton(props) {
   var className = props.className,
+    leftIcon = props.leftIcon,
+    rightIcon = props.rightIcon,
     rest = _objectWithoutProperties(props, _excluded);
   return /*#__PURE__*/React.createElement(Button, _extends({
     buttonType: "action",
-    className: classNames(className)
+    className: classNames(className),
+    leftIcon: leftIcon && /*#__PURE__*/React.createElement(_Symbol, {
+      ariaLabel: "",
+      size: "sm"
+    }, leftIcon),
+    rightIcon: rightIcon && /*#__PURE__*/React.createElement(_Symbol, {
+      ariaLabel: "",
+      size: "sm"
+    }, rightIcon)
   }, rest));
 }
 ActionButton.propTypes = {
@@ -31,8 +42,8 @@ ActionButton.propTypes = {
   })]),
   /** Shows a loader if true */
   isLoading: bool,
-  /** Icon shown to the left of the label */
-  leftIcon: node,
-  /** Icon shown to the right of the label */
-  rightIcon: node
+  /** Name of Icon shown to the left of the label */
+  leftIcon: string,
+  /** Name of Icon shown to the right of the label */
+  rightIcon: string
 };

package/es/BackButton.js

@@ -2,9 +2,14 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 import React from 'react';
 import { oneOfType, func, node, string, object, shape, elementType } from 'prop-types';
 import InlineButton from './InlineBaseButton';
+import _Symbol from '@sb1/ffe-symbols-react';
 var BackButton = function BackButton(props) {
   return /*#__PURE__*/React.createElement(InlineButton, _extends({
-    buttonType: "back"
+    buttonType: "back",
+    leftIcon: /*#__PURE__*/React.createElement(_Symbol, {
+      ariaLabel: "",
+      size: "md"
+    }, "chevron_left")
   }, props));
 };
 BackButton.propTypes = {

package/es/BaseButton.js

@@ -41,10 +41,10 @@ var BaseButton = function BaseButton(props) {
     className: "ffe-button__label"
   }, leftIcon && /*#__PURE__*/React.cloneElement(leftIcon, {
     className: 'ffe-button__icon ffe-button__icon--left',
-    'aria-hidden': 'true'
+    weight: 300
   }), children, rightIcon && /*#__PURE__*/React.cloneElement(rightIcon, {
     className: 'ffe-button__icon ffe-button__icon--right',
-    'aria-hidden': 'true'
+    weight: 300
   })), supportsSpinner && isLoading && /*#__PURE__*/React.createElement("span", {
     "aria-label": ariaLoadingMessage,
     role: "img",

package/es/ExpandButton.js

@@ -5,7 +5,7 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 import React from 'react';
 import { bool, func, oneOfType, string, node, object, shape, elementType } from 'prop-types';
 import classNames from 'classnames';
-import KryssIkon from "@sb1/ffe-icons-react/es/kryss-ikon";
+import _Symbol from '@sb1/ffe-symbols-react';
 var ExpandButton = function ExpandButton(props) {
   var children = props.children,
     className = props.className,
@@ -23,16 +23,20 @@ var ExpandButton = function ExpandButton(props) {
       'ffe-button--expanded': isExpanded
     }, className),
     ref: innerRef
-  }, rest), isExpanded && /*#__PURE__*/React.createElement(KryssIkon, {
+  }, rest), isExpanded && /*#__PURE__*/React.createElement(_Symbol, {
     className: "ffe-button__icon",
-    "aria-hidden": "true"
-  }), !isExpanded && /*#__PURE__*/React.createElement("span", null, leftIcon && /*#__PURE__*/React.cloneElement(leftIcon, {
-    'aria-hidden': true,
-    className: 'ffe-button__icon ffe-button__icon--left'
-  }), children, rightIcon && /*#__PURE__*/React.cloneElement(rightIcon, {
-    'aria-hidden': true,
-    className: 'ffe-button__icon ffe-button__icon--right'
-  })));
+    ariaLabel: "",
+    size: "sm",
+    weight: 300
+  }, "close"), !isExpanded && /*#__PURE__*/React.createElement("span", null, leftIcon && /*#__PURE__*/React.createElement(_Symbol, {
+    className: "ffe-button__icon ffe-button__icon--left",
+    ariaLabel: "",
+    weight: 300
+  }, leftIcon), children, rightIcon && /*#__PURE__*/React.createElement(_Symbol, {
+    className: "ffe-button__icon ffe-button__icon--right",
+    ariaLabel: "",
+    weight: 300
+  }, rightIcon)));
 };
 ExpandButton.propTypes = {
   /** The button label */
@@ -43,10 +47,10 @@ ExpandButton.propTypes = {
   element: oneOfType([func, string, elementType]),
   /** An accessible label for the close-button, only shown in the "isExpanded" state  */
   closeLabel: string,
-  /** Icon shown to the left of the label */
-  leftIcon: node,
-  /** Icon shown to the right of the label */
-  rightIcon: node,
+  /** Name of Icon shown to the left of the label */
+  leftIcon: string,
+  /** Name of Icon shown to the right of the label */
+  rightIcon: string,
   /** Ref-setting function, or ref created by useRef, passed to the button element */
   innerRef: oneOfType([func, shape({
     current: object

package/es/InlineBaseButton.js

@@ -23,11 +23,13 @@ var InlineBaseButton = function InlineBaseButton(props) {
     className: classNames('ffe-inline-button', "ffe-inline-button--".concat(buttonType), className),
     ref: innerRef
   }, rest), leftIcon && /*#__PURE__*/React.cloneElement(leftIcon, {
-    className: 'ffe-inline-button__icon ffe-inline-button__icon--left'
+    className: 'ffe-inline-button__icon ffe-inline-button__icon--left',
+    weight: 300
   }), /*#__PURE__*/React.createElement("span", {
     className: "ffe-inline-button__label"
   }, children), rightIcon && /*#__PURE__*/React.cloneElement(rightIcon, {
-    className: 'ffe-inline-button__icon ffe-inline-button__icon--right'
+    className: 'ffe-inline-button__icon ffe-inline-button__icon--right',
+    weight: 300
   }));
 };
 InlineBaseButton.propTypes = {

package/es/InlineExpandButton.js

@@ -4,7 +4,7 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 import React from 'react';
 import { bool, func, node, oneOfType, object, shape } from 'prop-types';
-import ChevronIkon from "@sb1/ffe-icons-react/es/chevron-ikon";
+import _Symbol from '@sb1/ffe-symbols-react';
 import InlineButton from './InlineBaseButton';
 var InlineExpandButton = function InlineExpandButton(props) {
   var isExpanded = props.isExpanded,
@@ -12,13 +12,11 @@ var InlineExpandButton = function InlineExpandButton(props) {
   return /*#__PURE__*/React.createElement(InlineButton, _extends({
     buttonType: "expand",
     type: "button",
-    rightIcon: /*#__PURE__*/React.createElement(ChevronIkon, {
-      "aria-hidden": "true",
-      style: {
-        marginLeft: '8px',
-        transform: isExpanded ? 'rotateZ(180deg)' : 'none'
-      }
-    })
+    className: isExpanded ? 'ffe-inline-button--expanded' : '',
+    rightIcon: /*#__PURE__*/React.createElement(_Symbol, {
+      size: "md",
+      ariaLabel: ""
+    }, "expand_more")
   }, rest));
 };
 InlineExpandButton.propTypes = {

package/es/PrimaryButton.js

@@ -1,11 +1,26 @@
+var _excluded = ["leftIcon", "rightIcon"];
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 import React from 'react';
 import { bool, func, oneOfType, node, string, object, shape, elementType } from 'prop-types';
 import Button from './BaseButton';
+import _Symbol from '@sb1/ffe-symbols-react';
 var PrimaryButton = function PrimaryButton(props) {
+  var leftIcon = props.leftIcon,
+    rightIcon = props.rightIcon,
+    rest = _objectWithoutProperties(props, _excluded);
   return /*#__PURE__*/React.createElement(Button, _extends({
-    buttonType: "primary"
-  }, props));
+    buttonType: "primary",
+    leftIcon: leftIcon && /*#__PURE__*/React.createElement(_Symbol, {
+      ariaLabel: "",
+      size: "sm"
+    }, leftIcon),
+    rightIcon: rightIcon && /*#__PURE__*/React.createElement(_Symbol, {
+      ariaLabel: "",
+      size: "sm"
+    }, rightIcon)
+  }, rest));
 };
 PrimaryButton.propTypes = {
   /** Aria label for loading indicator */
@@ -24,9 +39,9 @@ PrimaryButton.propTypes = {
   })]),
   /** Shows a loader if true */
   isLoading: bool,
-  /** Icon shown to the left of the label */
-  leftIcon: node,
-  /** Icon shown to the right of the label */
-  rightIcon: node
+  /** Name of icon shown to the left of the label */
+  leftIcon: string,
+  /** Name of icon shown to the right of the label */
+  rightIcon: string
 };
 export default PrimaryButton;

package/es/SecondaryButton.js

@@ -1,11 +1,26 @@
+var _excluded = ["leftIcon", "rightIcon"];
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 import React from 'react';
 import { bool, func, oneOfType, string, node, object, shape, elementType } from 'prop-types';
 import Button from './BaseButton';
+import _Symbol from '@sb1/ffe-symbols-react';
 var SecondaryButton = function SecondaryButton(props) {
+  var leftIcon = props.leftIcon,
+    rightIcon = props.rightIcon,
+    rest = _objectWithoutProperties(props, _excluded);
   return /*#__PURE__*/React.createElement(Button, _extends({
-    buttonType: "secondary"
-  }, props));
+    buttonType: "secondary",
+    leftIcon: leftIcon && /*#__PURE__*/React.createElement(_Symbol, {
+      ariaLabel: "",
+      size: "sm"
+    }, leftIcon),
+    rightIcon: rightIcon && /*#__PURE__*/React.createElement(_Symbol, {
+      ariaLabel: "",
+      size: "sm"
+    }, rightIcon)
+  }, rest));
 };
 SecondaryButton.propTypes = {
   /** Aria label for loading indicator */
@@ -24,9 +39,9 @@ SecondaryButton.propTypes = {
   })]),
   /**  Shows a loader if true */
   isLoading: bool,
-  /** Icon shown to the left of the label */
-  leftIcon: node,
-  /** Icon shown to the right of the label */
-  rightIcon: node
+  /** Name of icon shown to the left of the label */
+  leftIcon: string,
+  /** Name of icon shown to the right of the label */
+  rightIcon: string
 };
 export default SecondaryButton;

package/es/ShortcutButton.js

@@ -1,12 +1,15 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 import React from 'react';
 import { bool, func, node, string, oneOfType, object, shape, elementType } from 'prop-types';
-import ChevronIkon from "@sb1/ffe-icons-react/es/chevron-ikon";
 import Button from './BaseButton';
+import _Symbol from '@sb1/ffe-symbols-react';
 var ShortcutButton = function ShortcutButton(props) {
   return /*#__PURE__*/React.createElement(Button, _extends({
     buttonType: "shortcut",
-    rightIcon: /*#__PURE__*/React.createElement(ChevronIkon, null)
+    rightIcon: /*#__PURE__*/React.createElement(_Symbol, {
+      ariaLabel: "",
+      size: "md"
+    }, "chevron_right")
   }, props));
 };
 ShortcutButton.propTypes = {
@@ -21,8 +24,6 @@ ShortcutButton.propTypes = {
   /** Ref-setting function, or ref created by useRef, passed to the button element */
   innerRef: oneOfType([func, shape({
     current: object
-  })]),
-  /** Icon shown to the left of the label */
-  leftIcon: node
+  })])
 };
 export default ShortcutButton;

package/es/TaskButton.js

@@ -5,12 +5,16 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 import React from 'react';
 import { bool, func, node, string, oneOfType, object, shape, elementType } from 'prop-types';
 import Button from './BaseButton';
+import _Symbol from '@sb1/ffe-symbols-react';
 var TaskButton = function TaskButton(_ref) {
   var icon = _ref.icon,
     rest = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/React.createElement(Button, _extends({
     buttonType: "task",
-    leftIcon: icon
+    leftIcon: /*#__PURE__*/React.createElement(_Symbol, {
+      ariaLabel: "",
+      size: "sm"
+    }, icon)
   }, rest));
 };
 TaskButton.propTypes = {
@@ -22,8 +26,8 @@ TaskButton.propTypes = {
   disabled: bool,
   /** The rendered element, like an `<a />` or `<Link />` */
   element: oneOfType([func, string, elementType]),
-  /** Task icon, show to the left of the label */
-  icon: node.isRequired,
+  /** Name of Task icon, shown to the left of the label */
+  icon: string.isRequired,
   /** Ref-setting function, or ref created by useRef, passed to the button element */
   innerRef: oneOfType([func, shape({
     current: object

package/es/TertiaryButton.js

@@ -1,11 +1,26 @@
+var _excluded = ["leftIcon", "rightIcon"];
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 import React from 'react';
 import { func, node, oneOfType, string, object, shape, elementType } from 'prop-types';
 import InlineButton from './InlineBaseButton';
+import _Symbol from '@sb1/ffe-symbols-react';
 var TertiaryButton = function TertiaryButton(props) {
+  var leftIcon = props.leftIcon,
+    rightIcon = props.rightIcon,
+    rest = _objectWithoutProperties(props, _excluded);
   return /*#__PURE__*/React.createElement(InlineButton, _extends({
-    buttonType: "tertiary"
-  }, props));
+    buttonType: "tertiary",
+    leftIcon: leftIcon && /*#__PURE__*/React.createElement(_Symbol, {
+      ariaLabel: "",
+      size: "sm"
+    }, leftIcon),
+    rightIcon: rightIcon && /*#__PURE__*/React.createElement(_Symbol, {
+      ariaLabel: "",
+      size: "sm"
+    }, rightIcon)
+  }, rest));
 };
 TertiaryButton.propTypes = {
   /** The button label */
@@ -18,9 +33,9 @@ TertiaryButton.propTypes = {
   innerRef: oneOfType([func, shape({
     current: object
   })]),
-  /** Icon shown to the left of the label */
-  leftIcon: node,
-  /** Icon shown to the right of the label */
-  rightIcon: node
+  /** Name of icon shown to the left of the label */
+  leftIcon: string,
+  /** Name of icon shown to the right of the label */
+  rightIcon: string
 };
 export default TertiaryButton;

package/lib/ActionButton.js

@@ -7,18 +7,29 @@ exports.default = ActionButton;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = require("prop-types");
 var _classnames = _interopRequireDefault(require("classnames"));
+var _ffeSymbolsReact = _interopRequireDefault(require("@sb1/ffe-symbols-react"));
 var _BaseButton = _interopRequireDefault(require("./BaseButton"));
-var _excluded = ["className"];
+var _excluded = ["className", "leftIcon", "rightIcon"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 function ActionButton(props) {
   var className = props.className,
+    leftIcon = props.leftIcon,
+    rightIcon = props.rightIcon,
     rest = _objectWithoutProperties(props, _excluded);
   return /*#__PURE__*/_react.default.createElement(_BaseButton.default, _extends({
     buttonType: "action",
-    className: (0, _classnames.default)(className)
+    className: (0, _classnames.default)(className),
+    leftIcon: leftIcon && /*#__PURE__*/_react.default.createElement(_ffeSymbolsReact.default, {
+      ariaLabel: "",
+      size: "sm"
+    }, leftIcon),
+    rightIcon: rightIcon && /*#__PURE__*/_react.default.createElement(_ffeSymbolsReact.default, {
+      ariaLabel: "",
+      size: "sm"
+    }, rightIcon)
   }, rest));
 }
 ActionButton.propTypes = {
@@ -38,8 +49,8 @@ ActionButton.propTypes = {
   })]),
   /** Shows a loader if true */
   isLoading: _propTypes.bool,
-  /** Icon shown to the left of the label */
-  leftIcon: _propTypes.node,
-  /** Icon shown to the right of the label */
-  rightIcon: _propTypes.node
+  /** Name of Icon shown to the left of the label */
+  leftIcon: _propTypes.string,
+  /** Name of Icon shown to the right of the label */
+  rightIcon: _propTypes.string
 };

package/lib/BackButton.js

@@ -7,11 +7,16 @@ exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = require("prop-types");
 var _InlineBaseButton = _interopRequireDefault(require("./InlineBaseButton"));
+var _ffeSymbolsReact = _interopRequireDefault(require("@sb1/ffe-symbols-react"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 var BackButton = function BackButton(props) {
   return /*#__PURE__*/_react.default.createElement(_InlineBaseButton.default, _extends({
-    buttonType: "back"
+    buttonType: "back",
+    leftIcon: /*#__PURE__*/_react.default.createElement(_ffeSymbolsReact.default, {
+      ariaLabel: "",
+      size: "md"
+    }, "chevron_left")
   }, props));
 };
 BackButton.propTypes = {

package/lib/BaseButton.js

@@ -47,10 +47,10 @@ var BaseButton = function BaseButton(props) {
     className: "ffe-button__label"
   }, leftIcon && /*#__PURE__*/_react.default.cloneElement(leftIcon, {
     className: 'ffe-button__icon ffe-button__icon--left',
-    'aria-hidden': 'true'
+    weight: 300
   }), children, rightIcon && /*#__PURE__*/_react.default.cloneElement(rightIcon, {
     className: 'ffe-button__icon ffe-button__icon--right',
-    'aria-hidden': 'true'
+    weight: 300
   })), supportsSpinner && isLoading && /*#__PURE__*/_react.default.createElement("span", {
     "aria-label": ariaLoadingMessage,
     role: "img",

package/lib/ExpandButton.js

@@ -7,7 +7,7 @@ exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = require("prop-types");
 var _classnames = _interopRequireDefault(require("classnames"));
-var _kryssIkon = _interopRequireDefault(require("@sb1/ffe-icons-react/lib/kryss-ikon"));
+var _ffeSymbolsReact = _interopRequireDefault(require("@sb1/ffe-symbols-react"));
 var _excluded = ["children", "className", "closeLabel", "element", "innerRef", "isExpanded", "leftIcon", "rightIcon"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
@@ -30,16 +30,20 @@ var ExpandButton = function ExpandButton(props) {
       'ffe-button--expanded': isExpanded
     }, className),
     ref: innerRef
-  }, rest), isExpanded && /*#__PURE__*/_react.default.createElement(_kryssIkon.default, {
+  }, rest), isExpanded && /*#__PURE__*/_react.default.createElement(_ffeSymbolsReact.default, {
     className: "ffe-button__icon",
-    "aria-hidden": "true"
-  }), !isExpanded && /*#__PURE__*/_react.default.createElement("span", null, leftIcon && /*#__PURE__*/_react.default.cloneElement(leftIcon, {
-    'aria-hidden': true,
-    className: 'ffe-button__icon ffe-button__icon--left'
-  }), children, rightIcon && /*#__PURE__*/_react.default.cloneElement(rightIcon, {
-    'aria-hidden': true,
-    className: 'ffe-button__icon ffe-button__icon--right'
-  })));
+    ariaLabel: "",
+    size: "sm",
+    weight: 300
+  }, "close"), !isExpanded && /*#__PURE__*/_react.default.createElement("span", null, leftIcon && /*#__PURE__*/_react.default.createElement(_ffeSymbolsReact.default, {
+    className: "ffe-button__icon ffe-button__icon--left",
+    ariaLabel: "",
+    weight: 300
+  }, leftIcon), children, rightIcon && /*#__PURE__*/_react.default.createElement(_ffeSymbolsReact.default, {
+    className: "ffe-button__icon ffe-button__icon--right",
+    ariaLabel: "",
+    weight: 300
+  }, rightIcon)));
 };
 ExpandButton.propTypes = {
   /** The button label */
@@ -50,10 +54,10 @@ ExpandButton.propTypes = {
   element: (0, _propTypes.oneOfType)([_propTypes.func, _propTypes.string, _propTypes.elementType]),
   /** An accessible label for the close-button, only shown in the "isExpanded" state  */
   closeLabel: _propTypes.string,
-  /** Icon shown to the left of the label */
-  leftIcon: _propTypes.node,
-  /** Icon shown to the right of the label */
-  rightIcon: _propTypes.node,
+  /** Name of Icon shown to the left of the label */
+  leftIcon: _propTypes.string,
+  /** Name of Icon shown to the right of the label */
+  rightIcon: _propTypes.string,
   /** Ref-setting function, or ref created by useRef, passed to the button element */
   innerRef: (0, _propTypes.oneOfType)([_propTypes.func, (0, _propTypes.shape)({
     current: _propTypes.object

package/lib/InlineBaseButton.js

@@ -29,11 +29,13 @@ var InlineBaseButton = function InlineBaseButton(props) {
     className: (0, _classnames.default)('ffe-inline-button', "ffe-inline-button--".concat(buttonType), className),
     ref: innerRef
   }, rest), leftIcon && /*#__PURE__*/_react.default.cloneElement(leftIcon, {
-    className: 'ffe-inline-button__icon ffe-inline-button__icon--left'
+    className: 'ffe-inline-button__icon ffe-inline-button__icon--left',
+    weight: 300
   }), /*#__PURE__*/_react.default.createElement("span", {
     className: "ffe-inline-button__label"
   }, children), rightIcon && /*#__PURE__*/_react.default.cloneElement(rightIcon, {
-    className: 'ffe-inline-button__icon ffe-inline-button__icon--right'
+    className: 'ffe-inline-button__icon ffe-inline-button__icon--right',
+    weight: 300
   }));
 };
 InlineBaseButton.propTypes = {

package/lib/InlineExpandButton.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = require("prop-types");
-var _chevronIkon = _interopRequireDefault(require("@sb1/ffe-icons-react/lib/chevron-ikon"));
+var _ffeSymbolsReact = _interopRequireDefault(require("@sb1/ffe-symbols-react"));
 var _InlineBaseButton = _interopRequireDefault(require("./InlineBaseButton"));
 var _excluded = ["isExpanded"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -19,13 +19,11 @@ var InlineExpandButton = function InlineExpandButton(props) {
   return /*#__PURE__*/_react.default.createElement(_InlineBaseButton.default, _extends({
     buttonType: "expand",
     type: "button",
-    rightIcon: /*#__PURE__*/_react.default.createElement(_chevronIkon.default, {
-      "aria-hidden": "true",
-      style: {
-        marginLeft: '8px',
-        transform: isExpanded ? 'rotateZ(180deg)' : 'none'
-      }
-    })
+    className: isExpanded ? 'ffe-inline-button--expanded' : '',
+    rightIcon: /*#__PURE__*/_react.default.createElement(_ffeSymbolsReact.default, {
+      size: "md",
+      ariaLabel: ""
+    }, "expand_more")
   }, rest));
 };
 InlineExpandButton.propTypes = {

package/lib/PrimaryButton.js

@@ -7,12 +7,27 @@ exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = require("prop-types");
 var _BaseButton = _interopRequireDefault(require("./BaseButton"));
+var _ffeSymbolsReact = _interopRequireDefault(require("@sb1/ffe-symbols-react"));
+var _excluded = ["leftIcon", "rightIcon"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 var PrimaryButton = function PrimaryButton(props) {
+  var leftIcon = props.leftIcon,
+    rightIcon = props.rightIcon,
+    rest = _objectWithoutProperties(props, _excluded);
   return /*#__PURE__*/_react.default.createElement(_BaseButton.default, _extends({
-    buttonType: "primary"
-  }, props));
+    buttonType: "primary",
+    leftIcon: leftIcon && /*#__PURE__*/_react.default.createElement(_ffeSymbolsReact.default, {
+      ariaLabel: "",
+      size: "sm"
+    }, leftIcon),
+    rightIcon: rightIcon && /*#__PURE__*/_react.default.createElement(_ffeSymbolsReact.default, {
+      ariaLabel: "",
+      size: "sm"
+    }, rightIcon)
+  }, rest));
 };
 PrimaryButton.propTypes = {
   /** Aria label for loading indicator */
@@ -31,9 +46,9 @@ PrimaryButton.propTypes = {
   })]),
   /** Shows a loader if true */
   isLoading: _propTypes.bool,
-  /** Icon shown to the left of the label */
-  leftIcon: _propTypes.node,
-  /** Icon shown to the right of the label */
-  rightIcon: _propTypes.node
+  /** Name of icon shown to the left of the label */
+  leftIcon: _propTypes.string,
+  /** Name of icon shown to the right of the label */
+  rightIcon: _propTypes.string
 };
 var _default = exports.default = PrimaryButton;

package/lib/SecondaryButton.js

@@ -7,12 +7,27 @@ exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = require("prop-types");
 var _BaseButton = _interopRequireDefault(require("./BaseButton"));
+var _ffeSymbolsReact = _interopRequireDefault(require("@sb1/ffe-symbols-react"));
+var _excluded = ["leftIcon", "rightIcon"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 var SecondaryButton = function SecondaryButton(props) {
+  var leftIcon = props.leftIcon,
+    rightIcon = props.rightIcon,
+    rest = _objectWithoutProperties(props, _excluded);
   return /*#__PURE__*/_react.default.createElement(_BaseButton.default, _extends({
-    buttonType: "secondary"
-  }, props));
+    buttonType: "secondary",
+    leftIcon: leftIcon && /*#__PURE__*/_react.default.createElement(_ffeSymbolsReact.default, {
+      ariaLabel: "",
+      size: "sm"
+    }, leftIcon),
+    rightIcon: rightIcon && /*#__PURE__*/_react.default.createElement(_ffeSymbolsReact.default, {
+      ariaLabel: "",
+      size: "sm"
+    }, rightIcon)
+  }, rest));
 };
 SecondaryButton.propTypes = {
   /** Aria label for loading indicator */
@@ -31,9 +46,9 @@ SecondaryButton.propTypes = {
   })]),
   /**  Shows a loader if true */
   isLoading: _propTypes.bool,
-  /** Icon shown to the left of the label */
-  leftIcon: _propTypes.node,
-  /** Icon shown to the right of the label */
-  rightIcon: _propTypes.node
+  /** Name of icon shown to the left of the label */
+  leftIcon: _propTypes.string,
+  /** Name of icon shown to the right of the label */
+  rightIcon: _propTypes.string
 };
 var _default = exports.default = SecondaryButton;

package/lib/ShortcutButton.js

@@ -6,14 +6,17 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = require("prop-types");
-var _chevronIkon = _interopRequireDefault(require("@sb1/ffe-icons-react/lib/chevron-ikon"));
 var _BaseButton = _interopRequireDefault(require("./BaseButton"));
+var _ffeSymbolsReact = _interopRequireDefault(require("@sb1/ffe-symbols-react"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 var ShortcutButton = function ShortcutButton(props) {
   return /*#__PURE__*/_react.default.createElement(_BaseButton.default, _extends({
     buttonType: "shortcut",
-    rightIcon: /*#__PURE__*/_react.default.createElement(_chevronIkon.default, null)
+    rightIcon: /*#__PURE__*/_react.default.createElement(_ffeSymbolsReact.default, {
+      ariaLabel: "",
+      size: "md"
+    }, "chevron_right")
   }, props));
 };
 ShortcutButton.propTypes = {
@@ -28,8 +31,6 @@ ShortcutButton.propTypes = {
   /** Ref-setting function, or ref created by useRef, passed to the button element */
   innerRef: (0, _propTypes.oneOfType)([_propTypes.func, (0, _propTypes.shape)({
     current: _propTypes.object
-  })]),
-  /** Icon shown to the left of the label */
-  leftIcon: _propTypes.node
+  })])
 };
 var _default = exports.default = ShortcutButton;

package/lib/TaskButton.js

@@ -7,6 +7,7 @@ exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = require("prop-types");
 var _BaseButton = _interopRequireDefault(require("./BaseButton"));
+var _ffeSymbolsReact = _interopRequireDefault(require("@sb1/ffe-symbols-react"));
 var _excluded = ["icon"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
@@ -17,7 +18,10 @@ var TaskButton = function TaskButton(_ref) {
     rest = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/_react.default.createElement(_BaseButton.default, _extends({
     buttonType: "task",
-    leftIcon: icon
+    leftIcon: /*#__PURE__*/_react.default.createElement(_ffeSymbolsReact.default, {
+      ariaLabel: "",
+      size: "sm"
+    }, icon)
   }, rest));
 };
 TaskButton.propTypes = {
@@ -29,8 +33,8 @@ TaskButton.propTypes = {
   disabled: _propTypes.bool,
   /** The rendered element, like an `<a />` or `<Link />` */
   element: (0, _propTypes.oneOfType)([_propTypes.func, _propTypes.string, _propTypes.elementType]),
-  /** Task icon, show to the left of the label */
-  icon: _propTypes.node.isRequired,
+  /** Name of Task icon, shown to the left of the label */
+  icon: _propTypes.string.isRequired,
   /** Ref-setting function, or ref created by useRef, passed to the button element */
   innerRef: (0, _propTypes.oneOfType)([_propTypes.func, (0, _propTypes.shape)({
     current: _propTypes.object

package/lib/TertiaryButton.js

@@ -7,12 +7,27 @@ exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = require("prop-types");
 var _InlineBaseButton = _interopRequireDefault(require("./InlineBaseButton"));
+var _ffeSymbolsReact = _interopRequireDefault(require("@sb1/ffe-symbols-react"));
+var _excluded = ["leftIcon", "rightIcon"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 var TertiaryButton = function TertiaryButton(props) {
+  var leftIcon = props.leftIcon,
+    rightIcon = props.rightIcon,
+    rest = _objectWithoutProperties(props, _excluded);
   return /*#__PURE__*/_react.default.createElement(_InlineBaseButton.default, _extends({
-    buttonType: "tertiary"
-  }, props));
+    buttonType: "tertiary",
+    leftIcon: leftIcon && /*#__PURE__*/_react.default.createElement(_ffeSymbolsReact.default, {
+      ariaLabel: "",
+      size: "sm"
+    }, leftIcon),
+    rightIcon: rightIcon && /*#__PURE__*/_react.default.createElement(_ffeSymbolsReact.default, {
+      ariaLabel: "",
+      size: "sm"
+    }, rightIcon)
+  }, rest));
 };
 TertiaryButton.propTypes = {
   /** The button label */
@@ -25,9 +40,9 @@ TertiaryButton.propTypes = {
   innerRef: (0, _propTypes.oneOfType)([_propTypes.func, (0, _propTypes.shape)({
     current: _propTypes.object
   })]),
-  /** Icon shown to the left of the label */
-  leftIcon: _propTypes.node,
-  /** Icon shown to the right of the label */
-  rightIcon: _propTypes.node
+  /** Name of icon shown to the left of the label */
+  leftIcon: _propTypes.string,
+  /** Name of icon shown to the right of the label */
+  rightIcon: _propTypes.string
 };
 var _default = exports.default = TertiaryButton;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@sb1/ffe-buttons-react",
-    "version": "18.0.6",
+    "version": "19.0.0",
     "description": "React implementation of ffe-buttons",
     "keywords": [
         "ffe"
@@ -28,8 +28,8 @@
         "test:watch": "ffe-buildtool jest --watch"
     },
     "dependencies": {
-        "@sb1/ffe-buttons": "^17.1.1",
-        "@sb1/ffe-icons-react": "^7.3.5",
+        "@sb1/ffe-buttons": "^18.0.0",
+        "@sb1/ffe-symbols-react": "^2.0.1",
         "classnames": "^2.3.1",
         "prop-types": "^15.7.2"
     },
@@ -46,5 +46,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "22b8ad48a07c5afca3100dfef456bb667a0dfb0e"
+    "gitHead": "45731cae0e1ac73920dc71426a4f9028ab431570"
 }

package/types/index.d.ts

@@ -11,8 +11,8 @@ export type BaseButtonProps = {
     ariaLoadingMessage?: string;
     disabled?: boolean;
     isLoading?: boolean;
-    leftIcon?: React.ReactNode;
-    rightIcon?: React.ReactNode;
+    leftIcon?: string;
+    rightIcon?: string;
 } & MinimalBaseButtonProps;
 
 type ActionButtonProps = BaseButtonProps;
@@ -51,19 +51,18 @@ export type SecondaryButtonProps = BaseButtonProps;
 export type ShortcutButtonProps = {
     children?: React.ReactNode;
     disabled?: boolean;
-    leftIcon?: React.ReactNode;
 } & MinimalBaseButtonProps;
 
 export type TaskButtonProps = {
     children?: React.ReactNode;
     disabled?: boolean;
-    icon: React.ReactNode;
+    icon: string;
 } & MinimalBaseButtonProps;
 
 export type TertiaryButtonProps = {
     children?: React.ReactNode;
-    leftIcon?: React.ReactNode;
-    rightIcon?: React.ReactNode;
+    leftIcon?: string;
+    rightIcon?: string;
 } & MinimalBaseButtonProps;
 
 type NoInfer<T> = [T][T extends any ? 0 : never];