@skyscanner/backpack-web 17.0.2 → 17.1.0-beta.1

package/bpk-component-page-indicator/src/NavButton.js

@@ -1,3 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.DIRECTIONS = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _bpkComponentIcon = require("../../bpk-component-icon");
+var _bpkComponentButton = _interopRequireDefault(require("../../bpk-component-button"));
+var _chevronLeft = _interopRequireDefault(require("../../bpk-component-icon/lg/chevron-left"));
+var _chevronRight = _interopRequireDefault(require("../../bpk-component-icon/lg/chevron-right"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 /*
  * Backpack - Skyscanner's Design System
  *
@@ -14,72 +27,46 @@
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  * See the License for the specific language governing permissions and
  * limitations under the License.
- */
-/* @flow strict */
-
-import React from 'react';
-import PropTypes from 'prop-types';
-
-import { withButtonAlignment, withRtlSupport } from '../../bpk-component-icon';
-import BpkButton from '../../bpk-component-button';
-import LeftArrowIcon from '../../bpk-component-icon/lg/chevron-left';
-import RightArrowIcon from '../../bpk-component-icon/lg/chevron-right';
-
-export const DIRECTIONS = {
+ */const DIRECTIONS = {
   PREV: 'PREV',
   INDICATORS: 'INDICATORS',
-  NEXT: 'NEXT',
+  NEXT: 'NEXT'
 };
-
-type Props = {
-  direction: $Keys<typeof DIRECTIONS>,
-  disabled?: boolean,
-  currentIndex: number,
-  onClick: ?() => void,
-  ariaLabel: string,
+exports.DIRECTIONS = DIRECTIONS;
+const AlignedLeftArrowIcon = (0, _bpkComponentIcon.withButtonAlignment)((0, _bpkComponentIcon.withRtlSupport)(_chevronLeft.default));
+const AlignedRightArrowIcon = (0, _bpkComponentIcon.withButtonAlignment)((0, _bpkComponentIcon.withRtlSupport)(_chevronRight.default));
+const NavButton = props => {
+  const {
+    ariaLabel,
+    currentIndex,
+    direction,
+    disabled,
+    onClick
+  } = props;
+  return /*#__PURE__*/_react.default.createElement(_bpkComponentButton.default, {
+    iconOnly: true,
+    link: true,
+    onClick: e => {
+      if (direction === DIRECTIONS.PREV) {
+        onClick(e, currentIndex - 1, direction);
+      } else {
+        onClick(e, currentIndex + 1, direction);
+      }
+    },
+    "aria-label": ariaLabel,
+    disabled: disabled
+  }, direction === DIRECTIONS.PREV ? /*#__PURE__*/_react.default.createElement(AlignedLeftArrowIcon, null) : /*#__PURE__*/_react.default.createElement(AlignedRightArrowIcon, null));
 };
-
-const AlignedLeftArrowIcon = withButtonAlignment(withRtlSupport(LeftArrowIcon));
-const AlignedRightArrowIcon = withButtonAlignment(
-  withRtlSupport(RightArrowIcon),
-);
-
-const NavButton = (props: Props) => {
-  const { ariaLabel, currentIndex, direction, disabled, onClick } = props;
-  return (
-    <BpkButton
-      iconOnly
-      link
-      onClick={(e) => {
-        if (direction === DIRECTIONS.PREV) {
-          onClick(e, currentIndex - 1, direction);
-        } else {
-          onClick(e, currentIndex + 1, direction);
-        }
-      }}
-      aria-label={ariaLabel}
-      disabled={disabled}
-    >
-      {direction === DIRECTIONS.PREV ? (
-        <AlignedLeftArrowIcon />
-      ) : (
-        <AlignedRightArrowIcon />
-      )}
-    </BpkButton>
-  );
-};
-
 NavButton.propTypes = {
-  direction: PropTypes.oneOf(Object.keys(DIRECTIONS)).isRequired,
-  disabled: PropTypes.bool,
-  ariaLabel: PropTypes.string.isRequired,
-  currentIndex: PropTypes.number.isRequired,
-  onClick: PropTypes.func,
+  direction: _propTypes.default.oneOf(Object.keys(DIRECTIONS)).isRequired,
+  disabled: _propTypes.default.bool,
+  ariaLabel: _propTypes.default.string.isRequired,
+  currentIndex: _propTypes.default.number.isRequired,
+  onClick: _propTypes.default.func
 };
-
 NavButton.defaultProps = {
   disabled: false,
-  onClick: null,
+  onClick: null
 };
-
-export default NavButton;
+var _default = NavButton;
+exports.default = _default;

package/bpk-component-pagination/index.js

@@ -1,3 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+Object.defineProperty(exports, "themeAttributes", {
+  enumerable: true,
+  get: function () {
+    return _themeAttributes.default;
+  }
+});
+var _BpkPagination = _interopRequireDefault(require("./src/BpkPagination"));
+var _themeAttributes = _interopRequireDefault(require("./src/themeAttributes"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 /*
  * Backpack - Skyscanner's Design System
  *
@@ -15,9 +30,5 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-
-import BpkPagination from './src/BpkPagination';
-import themeAttributes from './src/themeAttributes';
-
-export default BpkPagination;
-export { themeAttributes };
+var _default = _BpkPagination.default;
+exports.default = _default;

package/bpk-component-pagination/src/BpkPagination.js

@@ -1,102 +1,81 @@
-/*
- * Backpack - Skyscanner's Design System
- *
- * Copyright 2016 Skyscanner Ltd
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *   http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
+"use strict";
 
-import React from 'react';
-import PropTypes from 'prop-types';
-
-import { cssModules } from '../../bpk-react-utils';
-
-import BpkPaginationList from './BpkPaginationList';
-import BpkPaginationNudger from './BpkPaginationNudger';
-import STYLES from './BpkPagination.module.scss';
-
-const getClassName = cssModules(STYLES);
-
-const handlePageChange = (onPageChange, pageCount) => (nextPageIndex) => {
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _bpkReactUtils = require("../../bpk-react-utils");
+var _BpkPaginationList = _interopRequireDefault(require("./BpkPaginationList"));
+var _BpkPaginationNudger = _interopRequireDefault(require("./BpkPaginationNudger"));
+var _BpkPaginationModule = _interopRequireDefault(require("./BpkPagination.module.css"));
+const _excluded = ["className", "nextLabel", "onPageChange", "pageCount", "pageLabel", "paginationLabel", "previousLabel", "selectedPageIndex", "visibleRange"];
+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; }
+const getClassName = (0, _bpkReactUtils.cssModules)(_BpkPaginationModule.default);
+const handlePageChange = (onPageChange, pageCount) => nextPageIndex => {
   if (onPageChange && nextPageIndex < pageCount && nextPageIndex >= 0) {
     onPageChange(nextPageIndex);
   }
 };
-
-const BpkPagination = (props) => {
+const BpkPagination = props => {
   const classNames = [getClassName('bpk-pagination')];
   const {
-    className,
-    nextLabel,
-    onPageChange,
-    pageCount,
-    pageLabel,
-    paginationLabel,
-    previousLabel,
-    selectedPageIndex,
-    visibleRange,
-    ...rest
-  } = props;
-
+      className,
+      nextLabel,
+      onPageChange,
+      pageCount,
+      pageLabel,
+      paginationLabel,
+      previousLabel,
+      selectedPageIndex,
+      visibleRange
+    } = props,
+    rest = _objectWithoutProperties(props, _excluded);
   if (className) {
     classNames.push(getClassName(className));
   }
-
   const pageChanged = handlePageChange(onPageChange, pageCount);
-
   const hasPreviousPage = selectedPageIndex !== 0;
   const hasNextPage = selectedPageIndex !== pageCount - 1;
-
-  return (
-    <nav className={classNames.join('')} aria-label={paginationLabel} {...rest}>
-      <BpkPaginationNudger
-        label={previousLabel}
-        onNudge={() => pageChanged(selectedPageIndex - 1)}
-        disabled={!hasPreviousPage}
-      />
-      <BpkPaginationList
-        selectedPageIndex={selectedPageIndex}
-        pageCount={pageCount}
-        onPageChange={pageChanged}
-        visibleRange={visibleRange}
-        pageLabel={pageLabel}
-      />
-      <BpkPaginationNudger
-        label={nextLabel}
-        onNudge={() => pageChanged(selectedPageIndex + 1)}
-        forward
-        disabled={!hasNextPage}
-      />
-    </nav>
-  );
+  return /*#__PURE__*/_react.default.createElement("nav", _extends({
+    className: classNames.join(''),
+    "aria-label": paginationLabel
+  }, rest), /*#__PURE__*/_react.default.createElement(_BpkPaginationNudger.default, {
+    label: previousLabel,
+    onNudge: () => pageChanged(selectedPageIndex - 1),
+    disabled: !hasPreviousPage
+  }), /*#__PURE__*/_react.default.createElement(_BpkPaginationList.default, {
+    selectedPageIndex: selectedPageIndex,
+    pageCount: pageCount,
+    onPageChange: pageChanged,
+    visibleRange: visibleRange,
+    pageLabel: pageLabel
+  }), /*#__PURE__*/_react.default.createElement(_BpkPaginationNudger.default, {
+    label: nextLabel,
+    onNudge: () => pageChanged(selectedPageIndex + 1),
+    forward: true,
+    disabled: !hasNextPage
+  }));
 };
-
 BpkPagination.propTypes = {
-  selectedPageIndex: PropTypes.number.isRequired,
-  onPageChange: PropTypes.func,
-  pageCount: PropTypes.number.isRequired,
-  previousLabel: PropTypes.string.isRequired,
-  nextLabel: PropTypes.string.isRequired,
-  paginationLabel: PropTypes.string.isRequired,
-  pageLabel: PropTypes.func.isRequired,
-  visibleRange: PropTypes.number,
-  className: PropTypes.string,
+  selectedPageIndex: _propTypes.default.number.isRequired,
+  onPageChange: _propTypes.default.func,
+  pageCount: _propTypes.default.number.isRequired,
+  previousLabel: _propTypes.default.string.isRequired,
+  nextLabel: _propTypes.default.string.isRequired,
+  paginationLabel: _propTypes.default.string.isRequired,
+  pageLabel: _propTypes.default.func.isRequired,
+  visibleRange: _propTypes.default.number,
+  className: _propTypes.default.string
 };
-
 BpkPagination.defaultProps = {
   onPageChange: null,
   visibleRange: 3,
-  className: null,
+  className: null
 };
-
-export default BpkPagination;
+var _default = BpkPagination;
+exports.default = _default;

package/bpk-component-pagination/src/BpkPaginationBreak.js

@@ -1,3 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 /*
  * Backpack - Skyscanner's Design System
  *
@@ -16,20 +25,17 @@
  * limitations under the License.
  */
 
-import React from 'react';
-import PropTypes from 'prop-types';
-
-const BpkPaginationBreak = (props) => {
-  const { breakLabel } = props;
-  return <div>{breakLabel}</div>;
+const BpkPaginationBreak = props => {
+  const {
+    breakLabel
+  } = props;
+  return /*#__PURE__*/_react.default.createElement("div", null, breakLabel);
 };
-
 BpkPaginationBreak.propTypes = {
-  breakLabel: PropTypes.string,
+  breakLabel: _propTypes.default.string
 };
-
 BpkPaginationBreak.defaultProps = {
-  breakLabel: '...',
+  breakLabel: '...'
 };
-
-export default BpkPaginationBreak;
+var _default = BpkPaginationBreak;
+exports.default = _default;

package/bpk-component-pagination/src/BpkPaginationList.js

@@ -1,3 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _react = _interopRequireDefault(require("react"));
+var _bpkReactUtils = require("../../bpk-react-utils");
+var _BpkPaginationPage = _interopRequireDefault(require("./BpkPaginationPage"));
+var _BpkPaginationBreak = _interopRequireDefault(require("./BpkPaginationBreak"));
+var _BpkPaginationListModule = _interopRequireDefault(require("./BpkPaginationList.module.css"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 /*
  * Backpack - Skyscanner's Design System
  *
@@ -16,86 +29,55 @@
  * limitations under the License.
  */
 
-import PropTypes from 'prop-types';
-import React from 'react';
-
-import { cssModules } from '../../bpk-react-utils';
-
-import BpkPaginationPage from './BpkPaginationPage';
-import BpkPaginationBreak from './BpkPaginationBreak';
-import STYLES from './BpkPaginationList.module.scss';
-
-const getClassName = cssModules(STYLES);
-
-const BpkPaginationList = (props) => {
+const getClassName = (0, _bpkReactUtils.cssModules)(_BpkPaginationListModule.default);
+const BpkPaginationList = props => {
   const {
     onPageChange,
     pageCount,
     pageLabel,
     selectedPageIndex,
-    visibleRange,
+    visibleRange
   } = props;
-
   const shoulderRange = Math.ceil(visibleRange / 2);
   const isFirstPageSelected = selectedPageIndex === 0;
   const isLastPageSelected = selectedPageIndex === pageCount - 1;
-  const displayRange =
-    isFirstPageSelected || isLastPageSelected
-      ? shoulderRange + 1
-      : shoulderRange;
-
-  const children = new Array(pageCount)
-    .fill(undefined)
-    .map((_, i) => {
-      const isFirstPage = i === 0;
-      const isLastPage = i === pageCount - 1;
-      const isFirstPageInRange =
-        i === selectedPageIndex - displayRange && !isFirstPage;
-      const isLastPageInRange =
-        i === selectedPageIndex + displayRange && !isLastPage;
-      const isPageOutOfRange =
-        i < selectedPageIndex - displayRange ||
-        i > selectedPageIndex + displayRange;
-
-      let pageView = null;
-      if (isFirstPageInRange || isLastPageInRange) {
-        pageView = <BpkPaginationBreak />;
-      } else if (!isPageOutOfRange || isFirstPage || isLastPage) {
-        pageView = (
-          <BpkPaginationPage
-            page={i + 1}
-            onSelect={() => onPageChange(i)}
-            isSelected={selectedPageIndex === i}
-            pageLabel={pageLabel}
-          />
-        );
-      }
-
-      if (pageView !== null) {
-        return (
-          <li
-            key={i} // eslint-disable-line react/no-array-index-key
-            className={getClassName('bpk-pagination-page-list__item')}
-          >
-            {pageView}
-          </li>
-        );
-      }
-      return null;
-    })
-    .filter((page) => !!page);
-
-  return (
-    <ul className={getClassName('bpk-pagination-page-list')}>{children}</ul>
-  );
+  const displayRange = isFirstPageSelected || isLastPageSelected ? shoulderRange + 1 : shoulderRange;
+  const children = new Array(pageCount).fill(undefined).map((_, i) => {
+    const isFirstPage = i === 0;
+    const isLastPage = i === pageCount - 1;
+    const isFirstPageInRange = i === selectedPageIndex - displayRange && !isFirstPage;
+    const isLastPageInRange = i === selectedPageIndex + displayRange && !isLastPage;
+    const isPageOutOfRange = i < selectedPageIndex - displayRange || i > selectedPageIndex + displayRange;
+    let pageView = null;
+    if (isFirstPageInRange || isLastPageInRange) {
+      pageView = /*#__PURE__*/_react.default.createElement(_BpkPaginationBreak.default, null);
+    } else if (!isPageOutOfRange || isFirstPage || isLastPage) {
+      pageView = /*#__PURE__*/_react.default.createElement(_BpkPaginationPage.default, {
+        page: i + 1,
+        onSelect: () => onPageChange(i),
+        isSelected: selectedPageIndex === i,
+        pageLabel: pageLabel
+      });
+    }
+    if (pageView !== null) {
+      return /*#__PURE__*/_react.default.createElement("li", {
+        key: i // eslint-disable-line react/no-array-index-key
+        ,
+        className: getClassName('bpk-pagination-page-list__item')
+      }, pageView);
+    }
+    return null;
+  }).filter(page => !!page);
+  return /*#__PURE__*/_react.default.createElement("ul", {
+    className: getClassName('bpk-pagination-page-list')
+  }, children);
 };
-
 BpkPaginationList.propTypes = {
-  selectedPageIndex: PropTypes.number.isRequired,
-  pageCount: PropTypes.number.isRequired,
-  visibleRange: PropTypes.number.isRequired,
-  onPageChange: PropTypes.func.isRequired,
-  pageLabel: PropTypes.func.isRequired,
+  selectedPageIndex: _propTypes.default.number.isRequired,
+  pageCount: _propTypes.default.number.isRequired,
+  visibleRange: _propTypes.default.number.isRequired,
+  onPageChange: _propTypes.default.func.isRequired,
+  pageLabel: _propTypes.default.func.isRequired
 };
-
-export default BpkPaginationList;
+var _default = BpkPaginationList;
+exports.default = _default;

package/bpk-component-pagination/src/BpkPaginationList.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
 */
-@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-pagination-page-list{display:flex;margin:0;padding:0;list-style:none}.bpk-pagination-page-list__item{margin-right:0.5rem}html[dir='rtl'] .bpk-pagination-page-list__item{margin-right:0;margin-left:0.5rem}html[dir='rtl'] .bpk-pagination-page-list__item:last-child{margin-left:0}.bpk-pagination-page-list__item:last-child{margin-right:0}
+@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-pagination-page-list{display:flex;margin:0;padding:0;align-items:baseline;list-style:none}.bpk-pagination-page-list__item{margin-right:0.5rem}html[dir='rtl'] .bpk-pagination-page-list__item{margin-right:0;margin-left:0.5rem}html[dir='rtl'] .bpk-pagination-page-list__item:last-child{margin-left:0}.bpk-pagination-page-list__item:last-child{margin-right:0}

package/bpk-component-pagination/src/BpkPaginationNudger.js

@@ -1,3 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _react = _interopRequireDefault(require("react"));
+var _bpkReactUtils = require("../../bpk-react-utils");
+var _bpkComponentIcon = require("../../bpk-component-icon");
+var _arrowLeft = _interopRequireDefault(require("../../bpk-component-icon/lg/arrow-left"));
+var _arrowRight = _interopRequireDefault(require("../../bpk-component-icon/lg/arrow-right"));
+var _BpkPaginationNudgerModule = _interopRequireDefault(require("./BpkPaginationNudger.module.css"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 /*
  * Backpack - Skyscanner's Design System
  *
@@ -16,63 +30,41 @@
  * limitations under the License.
  */
 
-import PropTypes from 'prop-types';
-import React from 'react';
-
-import { cssModules } from '../../bpk-react-utils';
-import { withButtonAlignment, withRtlSupport } from '../../bpk-component-icon';
-import ArrowLeftIcon from '../../bpk-component-icon/lg/arrow-left';
-import ArrowRightIcon from '../../bpk-component-icon/lg/arrow-right';
-
-import STYLES from './BpkPaginationNudger.module.scss';
-
-const getClassName = cssModules(STYLES);
-const AlignedArrowLeftIcon = withButtonAlignment(withRtlSupport(ArrowLeftIcon));
-const AlignedArrowRightIcon = withButtonAlignment(
-  withRtlSupport(ArrowRightIcon),
-);
-
-const nudgerIcon = (forward) =>
-  forward ? (
-    <AlignedArrowRightIcon
-      className={getClassName('bpk-pagination-nudger__icon')}
-    />
-  ) : (
-    <AlignedArrowLeftIcon
-      className={getClassName('bpk-pagination-nudger__icon')}
-    />
-  );
-
-const BpkPaginationNudger = (props) => {
-  const { disabled, forward, label, onNudge } = props;
-
-  return (
-    <div className={getClassName('bpk-pagination-nudger')}>
-      <button
-        type="button"
-        className={getClassName('bpk-pagination-nudger__button')}
-        onClick={onNudge}
-        disabled={disabled}
-      >
-        {nudgerIcon(forward)}
-        <span className={getClassName('bpk-pagination-nudger__text--hidden')}>
-          {label}
-        </span>
-      </button>
-    </div>
-  );
+const getClassName = (0, _bpkReactUtils.cssModules)(_BpkPaginationNudgerModule.default);
+const AlignedArrowLeftIcon = (0, _bpkComponentIcon.withButtonAlignment)((0, _bpkComponentIcon.withRtlSupport)(_arrowLeft.default));
+const AlignedArrowRightIcon = (0, _bpkComponentIcon.withButtonAlignment)((0, _bpkComponentIcon.withRtlSupport)(_arrowRight.default));
+const nudgerIcon = forward => forward ? /*#__PURE__*/_react.default.createElement(AlignedArrowRightIcon, {
+  className: getClassName('bpk-pagination-nudger__icon')
+}) : /*#__PURE__*/_react.default.createElement(AlignedArrowLeftIcon, {
+  className: getClassName('bpk-pagination-nudger__icon')
+});
+const BpkPaginationNudger = props => {
+  const {
+    disabled,
+    forward,
+    label,
+    onNudge
+  } = props;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: getClassName('bpk-pagination-nudger')
+  }, /*#__PURE__*/_react.default.createElement("button", {
+    type: "button",
+    className: getClassName('bpk-pagination-nudger__button'),
+    onClick: onNudge,
+    disabled: disabled
+  }, nudgerIcon(forward), /*#__PURE__*/_react.default.createElement("span", {
+    className: getClassName('bpk-pagination-nudger__text--hidden')
+  }, label)));
 };
-
 BpkPaginationNudger.propTypes = {
-  label: PropTypes.string.isRequired,
-  onNudge: PropTypes.func.isRequired,
-  forward: PropTypes.bool,
-  disabled: PropTypes.bool,
+  label: _propTypes.default.string.isRequired,
+  onNudge: _propTypes.default.func.isRequired,
+  forward: _propTypes.default.bool,
+  disabled: _propTypes.default.bool
 };
-
 BpkPaginationNudger.defaultProps = {
   forward: false,
-  disabled: false,
+  disabled: false
 };
-
-export default BpkPaginationNudger;
+var _default = BpkPaginationNudger;
+exports.default = _default;

package/bpk-component-pagination/src/BpkPaginationNudger.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
 */
-@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-pagination-nudger{text-align:center;vertical-align:middle}.bpk-pagination-nudger__button{height:2.25rem;padding:0 0.5rem;border:none;background:none;cursor:pointer;appearance:none;color:#0770e3;color:var(--bpk-pagination-nudger-color, #0770e3)}.bpk-no-touch-support .bpk-pagination-nudger__button:hover:not(:active):not(:disabled){color:#042759;color:var(--bpk-pagination-nudger-hover-color, #042759)}:global(.bpk-no-touch-support) .bpk-pagination-nudger__button:hover:not(:active):not(:disabled){color:#042759;color:var(--bpk-pagination-nudger-hover-color, #042759)}.bpk-pagination-nudger__button:active{color:#0770e3;color:var(--bpk-pagination-nudger-active-color, #0770e3)}.bpk-pagination-nudger__button:disabled{color:#dddde5;cursor:not-allowed}.bpk-pagination-nudger__button .bpk-pagination-nudger__icon{fill:currentColor}html[dir='rtl'] .bpk-pagination-nudger__button .bpk-pagination-nudger__icon{transform:scaleX(-1)}.bpk-pagination-nudger__text--hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0)}
+@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-pagination-nudger{text-align:center;vertical-align:middle}.bpk-pagination-nudger__button{height:2.25rem;border:none;background:none;cursor:pointer;appearance:none;border-radius:0;background:none;box-shadow:none;padding:0;border:0;background-color:transparent;text-decoration:none;cursor:pointer;appearance:none;color:#0062e3;color:var(--bpk-link-color, #0062e3);padding:.375rem 0;color:#0062e3;padding:0}.bpk-no-touch-support .bpk-pagination-nudger__button:hover:not(:active):not(:disabled){text-decoration:underline;color:#0062e3;color:var(--bpk-link-hover-color, #0062e3)}:global(.bpk-no-touch-support) .bpk-pagination-nudger__button:hover:not(:active):not(:disabled){text-decoration:underline;color:#0062e3;color:var(--bpk-link-hover-color, #0062e3)}.bpk-pagination-nudger__button:visited{color:#0062e3;color:var(--bpk-link-visited-color, #0062e3)}.bpk-pagination-nudger__button:active{text-decoration:underline;color:#0062e3;color:var(--bpk-link-active-color, #0062e3)}.bpk-no-touch-support .bpk-pagination-nudger__button:hover:not(:active):not(:disabled){background:none;color:#154679;text-decoration:none}:global(.bpk-no-touch-support) .bpk-pagination-nudger__button:hover:not(:active):not(:disabled){background:none;color:#154679;text-decoration:none}.bpk-pagination-nudger__button:active{background:none;color:#154679;text-decoration:none}.bpk-pagination-nudger__button:disabled{background:none;color:rgba(0,0,0,0.2);text-decoration:none}.bpk-pagination-nudger__button-large{padding:.75rem 0}.bpk-pagination-nudger__button:disabled{cursor:not-allowed}.bpk-pagination-nudger__button .bpk-pagination-nudger__icon{fill:currentcolor}html[dir='rtl'] .bpk-pagination-nudger__button .bpk-pagination-nudger__icon{transform:scaleX(-1)}.bpk-pagination-nudger__text--hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0)}