@skyscanner/backpack-web 0.0.6 → 0.3.0

package/bpk-component-nudger/src/BpkConfigurableNudger.js

@@ -21,8 +21,9 @@
 
 import PropTypes from 'prop-types';
 import React from 'react';
+
 import BpkButtonSecondary from '../../bpk-component-button/BpkButtonSecondary';
-import BpkButtonOutline from '../../bpk-component-button/BpkButtonOutline';
+import BpkButtonSecondaryOnDark from '../../bpk-component-button/BpkButtonSecondaryOnDark';
 import { withButtonAlignment } from '../../bpk-component-icon';
 import MinusIcon from '../../bpk-component-icon/sm/minus';
 import PlusIcon from '../../bpk-component-icon/sm/plus';
@@ -67,36 +68,31 @@ const BpkConfigurableNudger = <T>(props: Props<T>) => {
     value,
     ...rest
   } = props;
-  const classNames = [getClassName('bpk-nudger')];
-  if (className) {
-    classNames.push(className);
-  }
+
+  const classNames = getClassName('bpk-nudger', className);
 
   const maxButtonDisabled = compareValues(value, max) >= 0;
   const minButtonDisabled = compareValues(value, min) <= 0;
 
-  const minusIconClassNames = [getClassName('bpk-nudger__icon')];
-  if (minButtonDisabled) {
-    minusIconClassNames.push(getClassName('bpk-nudger__icon--disabled'));
-  }
-  const plusIconClassNames = [getClassName('bpk-nudger__icon')];
-  if (maxButtonDisabled) {
-    plusIconClassNames.push(getClassName('bpk-nudger__icon--disabled'));
-  }
-
-  const inputStyles = [getClassName('bpk-nudger__input')];
-  if (inputClassName) {
-    inputStyles.push(inputClassName);
-  }
-  if (buttonType === 'outline') {
-    inputStyles.push(getClassName('bpk-nudger__input--outline'));
-  }
+  const minusIconClassNames = getClassName(
+    'bpk-nudger__icon',
+    minButtonDisabled && 'bpk-nudger__icon--disabled',
+  );
+  const plusIconClassNames = getClassName(
+    'bpk-nudger__icon',
+    maxButtonDisabled && 'bpk-nudger__icon--disabled',
+  );
+  const inputStyles = getClassName(
+    'bpk-nudger__input',
+    inputClassName && inputClassName,
+    buttonType === 'secondaryOnDark' && 'bpk-nudger__input--secondary-on-dark',
+  );
 
   const ButtonComponent =
-    buttonType === 'secondary' ? BpkButtonSecondary : BpkButtonOutline;
+    buttonType === 'secondary' ? BpkButtonSecondary : BpkButtonSecondaryOnDark;
 
   return (
-    <div className={classNames.join(' ')}>
+    <div className={classNames}>
       <ButtonComponent
         iconOnly
         onClick={() => onChange(decrementValue(value))}
@@ -105,7 +101,7 @@ const BpkConfigurableNudger = <T>(props: Props<T>) => {
         aria-controls={id}
         className={getClassName('bpk-nudger__button')}
       >
-        <AlignedMinusIcon className={minusIconClassNames.join(' ')} />
+        <AlignedMinusIcon className={minusIconClassNames} />
       </ButtonComponent>
       {/* $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'. */}
       <input
@@ -114,7 +110,7 @@ const BpkConfigurableNudger = <T>(props: Props<T>) => {
         readOnly
         value={formatValue(value)}
         id={id}
-        className={inputStyles.join(' ')}
+        className={inputStyles}
         {...rest}
       />
       <ButtonComponent
@@ -125,7 +121,7 @@ const BpkConfigurableNudger = <T>(props: Props<T>) => {
         aria-controls={id}
         className={getClassName('bpk-nudger__button')}
       >
-        <AlignedPlusIcon className={plusIconClassNames.join(' ')} />
+        <AlignedPlusIcon className={plusIconClassNames} />
       </ButtonComponent>
     </div>
   );

package/bpk-component-nudger/src/BpkNudger.js

@@ -20,6 +20,7 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
+
 import { cssModules } from '../../bpk-react-utils';
 
 import BpkConfigurableNudger from './BpkConfigurableNudger';

package/bpk-component-nudger/src/BpkNudger.module.scss

@@ -35,7 +35,7 @@ $bpk-spacing-v2: true;
     @include bpk-text;
     @include bpk-subheading;
 
-    &--outline {
+    &--secondary-on-dark {
       background-color: transparent;
       color: $bpk-color-white;
     }

package/bpk-component-nudger/src/common-types.js

@@ -36,7 +36,7 @@ export const COMMON_PROP_TYPES = {
   increaseButtonLabel: PropTypes.string.isRequired,
   onChange: PropTypes.func.isRequired,
   className: PropTypes.string,
-  buttonType: PropTypes.oneOf(['secondary', 'outline']),
+  buttonType: PropTypes.oneOf(['secondary', 'secondaryOnDark']),
 };
 
 export const COMMON_DEFAULT_PROPS = {

package/bpk-component-overlay/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-overlay",
-  "version": "2.1.1",
+  "version": "2.1.7",
   "description": "Backpack overlay component.",
   "license": "Apache-2.0",
   "repository": {
@@ -13,16 +13,16 @@
     "registry": "https://registry.npmjs.org/"
   },
   "dependencies": {
-    "bpk-mixins": "^26.1.0",
-    "bpk-react-utils": "^4.1.0",
+    "bpk-mixins": "^29.0.0",
+    "bpk-react-utils": "^4.1.1",
     "prop-types": "^15.5.8"
   },
   "peerDependencies": {
     "react": "^16.3.0 || ^17.0.0"
   },
   "devDependencies": {
-    "bpk-component-image": "^5.1.1",
-    "bpk-component-text": "^6.1.1"
+    "bpk-component-image": "^5.1.7",
+    "bpk-component-text": "^7.0.0"
   },
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8"
 }

package/bpk-component-overlay/src/BpkOverlay.js

@@ -19,6 +19,7 @@
 
 import PropTypes from 'prop-types';
 import React, { type Node } from 'react';
+
 import { cssModules } from '../../bpk-react-utils';
 
 import STYLES from './BpkOverlay.module.scss';

package/bpk-component-pagination/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-pagination",
-  "version": "3.1.1",
+  "version": "4.0.5",
   "description": "Backpack pagination component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,15 +14,15 @@
   },
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
-    "bpk-component-button": "^5.1.0",
-    "bpk-mixins": "^26.1.0",
-    "bpk-react-utils": "^4.1.0",
+    "bpk-component-button": "^6.2.1",
+    "bpk-mixins": "^29.0.0",
+    "bpk-react-utils": "^4.1.1",
     "prop-types": "^15.7.2"
   },
   "peerDependencies": {
     "react": "^16.3.0 || ^17.0.0"
   },
   "devDependencies": {
-    "bpk-component-icon": "^9.2.1"
+    "bpk-component-icon": "^9.2.7"
   }
 }

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

@@ -18,6 +18,7 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
+
 import { cssModules } from '../../bpk-react-utils';
 
 import BpkPaginationList from './BpkPaginationList';

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

@@ -18,6 +18,7 @@
 
 import PropTypes from 'prop-types';
 import React from 'react';
+
 import { cssModules } from '../../bpk-react-utils';
 
 import BpkPaginationPage from './BpkPaginationPage';

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

@@ -18,6 +18,7 @@
 
 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';

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

@@ -16,9 +16,10 @@
  * limitations under the License.
  */
 
-import BpkButton from '../../bpk-component-button';
 import PropTypes from 'prop-types';
 import React from 'react';
+
+import BpkButton from '../../bpk-component-button';
 import { cssModules } from '../../bpk-react-utils';
 
 import STYLES from './BpkPaginationPage.module.scss';

package/bpk-component-pagination/src/BpkPaginationPage.module.scss

@@ -25,6 +25,8 @@ $bpk-spacing-v2: true;
   height: $bpk-button-height;
   padding: 0;
   border-radius: 50%;
+
+  @include bpk-label-1;
 }
 
 .bpk-pagination-page--selected {

package/bpk-component-panel/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-panel",
-  "version": "3.1.0",
+  "version": "3.1.6",
   "description": "Backpack panel component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,8 +14,8 @@
   },
   "gitHead": "5c156b97cb0ba5e75851d3c763334578714c895e",
   "dependencies": {
-    "bpk-mixins": "^26.1.0",
-    "bpk-react-utils": "^4.1.0",
+    "bpk-mixins": "^29.0.0",
+    "bpk-react-utils": "^4.1.1",
     "prop-types": "^15.7.2"
   },
   "peerDependencies": {

package/bpk-component-panel/src/BpkPanel.js

@@ -18,6 +18,7 @@
 
 import PropTypes from 'prop-types';
 import React from 'react';
+
 import { cssModules } from '../../bpk-react-utils';
 
 import STYLES from './BpkPanel.module.scss';

package/bpk-component-phone-input/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-phone-input",
-  "version": "7.1.1",
+  "version": "7.1.11",
   "description": "Backpack phone input component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,20 +14,20 @@
   },
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
-    "@skyscanner/bpk-foundations-web": "^5.0.0",
-    "bpk-component-input": "^6.1.1",
-    "bpk-component-label": "^5.1.0",
-    "bpk-component-select": "^5.1.0",
-    "bpk-component-text": "^6.1.1",
-    "bpk-mixins": "^26.1.0",
-    "bpk-react-utils": "^4.1.0",
+    "@skyscanner/bpk-foundations-web": "^6.2.0",
+    "bpk-component-input": "^6.1.9",
+    "bpk-component-label": "^5.1.6",
+    "bpk-component-select": "^5.1.6",
+    "bpk-component-text": "^7.0.0",
+    "bpk-mixins": "^29.0.0",
+    "bpk-react-utils": "^4.1.1",
     "prop-types": "^15.7.2"
   },
   "peerDependencies": {
     "react": "^16.3.0 || ^17.0.0"
   },
   "devDependencies": {
-    "bpk-component-fieldset": "^4.1.1",
-    "bpk-component-image": "^5.1.1"
+    "bpk-component-fieldset": "^4.1.11",
+    "bpk-component-image": "^5.1.7"
   }
 }

package/bpk-component-phone-input/src/BpkPhoneInput.js

@@ -20,6 +20,7 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
+
 import { cssModules } from '../../bpk-react-utils';
 import BpkInput, { INPUT_TYPES } from '../../bpk-component-input';
 import BpkLabel from '../../bpk-component-label';

package/bpk-component-popover/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-popover",
-  "version": "4.1.1",
+  "version": "4.1.9",
   "description": "Backpack popover component.",
   "license": "Apache-2.0",
   "repository": {
@@ -17,19 +17,19 @@
     "@skyscanner/popper.js": "^1.12.9-beta.1",
     "a11y-focus-scope": "^1.1.3",
     "a11y-focus-store": "^1.0.0",
-    "bpk-component-close-button": "^3.1.1",
-    "bpk-component-link": "^3.1.0",
-    "bpk-component-text": "^6.1.1",
-    "bpk-mixins": "^26.1.0",
-    "bpk-react-utils": "^4.1.0",
+    "bpk-component-close-button": "^3.1.7",
+    "bpk-component-link": "^3.1.6",
+    "bpk-component-text": "^7.0.0",
+    "bpk-mixins": "^29.0.0",
+    "bpk-react-utils": "^4.1.1",
     "prop-types": "^15.7.2"
   },
   "peerDependencies": {
     "react": "^16.3.0 || ^17.0.0"
   },
   "devDependencies": {
-    "bpk-component-button": "^5.1.0",
-    "bpk-component-content-container": "^4.1.0",
-    "bpk-component-input": "^6.1.1"
+    "bpk-component-button": "^6.2.1",
+    "bpk-component-content-container": "^5.0.0",
+    "bpk-component-input": "^6.1.9"
   }
 }

package/bpk-component-popover/src/BpkPopover.js

@@ -20,6 +20,7 @@
 
 import PropTypes from 'prop-types';
 import React, { type Node } from 'react';
+
 import BpkText, { TEXT_STYLES } from '../../bpk-component-text';
 import { BpkButtonLink } from '../../bpk-component-link';
 import BpkCloseButton from '../../bpk-component-close-button';

package/bpk-component-popover/src/BpkPopoverPortal.js

@@ -22,6 +22,7 @@ import Popper from '@skyscanner/popper.js';
 import PropTypes from 'prop-types';
 import React, { Component, type Node } from 'react';
 import focusStore from 'a11y-focus-store';
+
 import { Portal, cssModules } from '../../bpk-react-utils';
 
 import keyboardFocusScope from './keyboardFocusScope';

package/bpk-component-progress/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-progress",
-  "version": "3.1.0",
+  "version": "3.1.6",
   "description": "Backpack progress bar component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,9 +14,9 @@
   },
   "gitHead": "5c156b97cb0ba5e75851d3c763334578714c895e",
   "dependencies": {
-    "@skyscanner/bpk-foundations-web": "^5.0.0",
-    "bpk-mixins": "^26.1.0",
-    "bpk-react-utils": "^4.1.0",
+    "@skyscanner/bpk-foundations-web": "^6.2.0",
+    "bpk-mixins": "^29.0.0",
+    "bpk-react-utils": "^4.1.1",
     "lodash.clamp": "^4.0.3",
     "prop-types": "^15.7.2"
   },
@@ -24,7 +24,7 @@
     "react": "^16.3.0 || ^17.0.0"
   },
   "devDependencies": {
-    "bpk-component-button": "^5.1.0",
-    "bpk-storybook-utils": "^1.1.0"
+    "bpk-component-button": "^6.2.1",
+    "bpk-storybook-utils": "^1.1.5"
   }
 }

package/bpk-component-progress/src/BpkProgress.js

@@ -22,6 +22,7 @@ import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { colorWhite } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
 import clamp from 'lodash.clamp';
+
 import { cssModules } from '../../bpk-react-utils';
 
 import STYLES from './BpkProgress.module.scss';

package/bpk-component-radio/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-radio",
-  "version": "3.1.0",
+  "version": "3.1.7",
   "description": "Backpack radio button component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,15 +14,15 @@
   },
   "gitHead": "5c156b97cb0ba5e75851d3c763334578714c895e",
   "dependencies": {
-    "bpk-mixins": "^26.1.0",
-    "bpk-react-utils": "^4.1.0",
+    "bpk-mixins": "^29.0.0",
+    "bpk-react-utils": "^4.1.1",
     "prop-types": "^15.7.2"
   },
   "peerDependencies": {
     "react": "^16.3.0 || ^17.0.0"
   },
   "devDependencies": {
-    "@skyscanner/bpk-foundations-web": "^5.0.0",
-    "bpk-storybook-utils": "^1.1.0"
+    "@skyscanner/bpk-foundations-web": "^6.2.0",
+    "bpk-storybook-utils": "^1.1.5"
   }
 }

package/bpk-component-radio/src/BpkRadio.js

@@ -20,6 +20,7 @@
 
 import PropTypes from 'prop-types';
 import React, { type Node } from 'react';
+
 import { cssModules } from '../../bpk-react-utils';
 
 import STYLES from './BpkRadio.module.scss';

package/bpk-component-rating/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-rating",
-  "version": "3.1.1",
+  "version": "3.1.7",
   "description": "Backpack rating component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,8 +14,8 @@
   },
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
-    "bpk-mixins": "^26.1.0",
-    "bpk-react-utils": "^4.1.0",
+    "bpk-mixins": "^29.0.0",
+    "bpk-react-utils": "^4.1.1",
     "lodash.clamp": "^4.0.3",
     "prop-types": "^15.5.8"
   },
@@ -23,7 +23,7 @@
     "react": "^16.3.0 || ^17.0.0"
   },
   "devDependencies": {
-    "@skyscanner/bpk-foundations-web": "^5.0.0",
-    "bpk-component-text": "^6.1.1"
+    "@skyscanner/bpk-foundations-web": "^6.2.0",
+    "bpk-component-text": "^7.0.0"
   }
 }

package/bpk-component-rating/src/BpkRating.js

@@ -20,6 +20,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import clamp from 'lodash.clamp';
+
 import { cssModules } from '../../bpk-react-utils';
 import BpkText, { TEXT_STYLES } from '../../bpk-component-text';
 

package/bpk-component-rtl-toggle/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-rtl-toggle",
-  "version": "3.1.0",
+  "version": "3.1.6",
   "description": "Backpack RTL toggle component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,8 +14,8 @@
   },
   "gitHead": "5c156b97cb0ba5e75851d3c763334578714c895e",
   "dependencies": {
-    "bpk-component-link": "^3.1.0",
-    "bpk-react-utils": "^4.1.0",
+    "bpk-component-link": "^3.1.6",
+    "bpk-react-utils": "^4.1.1",
     "prop-types": "^15.7.2"
   },
   "peerDependencies": {

package/bpk-component-rtl-toggle/src/BpkRtlToggle.js

@@ -18,6 +18,7 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
+
 import { BpkButtonLink } from '../../bpk-component-link';
 
 import { getHtmlElement, DIRECTIONS, DIRECTION_CHANGE_EVENT } from './utils';

package/bpk-component-rtl-toggle/src/updateOnDirectionChange.js

@@ -17,6 +17,7 @@
  */
 
 import React, { Component } from 'react';
+
 import { wrapDisplayName } from '../../bpk-react-utils';
 
 import { getHtmlElement, DIRECTION_CHANGE_EVENT } from './utils';

package/bpk-component-scrollable-calendar/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-scrollable-calendar",
-  "version": "6.1.1",
+  "version": "6.1.11",
   "description": "Backpack scrollable calendar component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,17 +14,17 @@
   },
   "gitHead": "4e4ec9add28e1db54d6a38a10c331bbd163f2926",
   "dependencies": {
-    "@skyscanner/bpk-foundations-web": "^5.0.0",
-    "bpk-component-calendar": "^11.1.1",
-    "bpk-component-text": "^6.1.1",
-    "bpk-mixins": "^26.1.0",
-    "bpk-react-utils": "^4.1.0",
+    "@skyscanner/bpk-foundations-web": "^6.2.0",
+    "bpk-component-calendar": "^11.1.11",
+    "bpk-component-text": "^7.0.0",
+    "bpk-mixins": "^29.0.0",
+    "bpk-react-utils": "^4.1.1",
     "date-fns": "^2.21.1",
     "prop-types": "^15.5.8",
     "react-virtualized": "^9.22.3"
   },
   "devDependencies": {
-    "bpk-storybook-utils": "^1.1.0"
+    "bpk-storybook-utils": "^1.1.5"
   },
   "peerDependencies": {
     "react": "^16.3.0 || ^17.0.0"

package/bpk-component-scrollable-calendar/src/BpkScrollableCalendarDate.js

@@ -18,6 +18,7 @@
 
 import PropTypes from 'prop-types';
 import React, { PureComponent } from 'react';
+
 import {
   BpkCalendarDate,
   BpkCalendarDatePropTypes,

package/bpk-component-scrollable-calendar/src/BpkScrollableCalendarGrid.js

@@ -17,6 +17,7 @@
  */
 
 import React from 'react';
+
 import { cssModules } from '../../bpk-react-utils';
 import BpkText, { TEXT_STYLES } from '../../bpk-component-text';
 import {

package/bpk-component-scrollable-calendar/src/BpkScrollableCalendarGridList.js

@@ -18,8 +18,6 @@
 
 import PropTypes from 'prop-types';
 import React from 'react';
-import { cssModules, deprecated } from '../../bpk-react-utils';
-import { DateUtils, BpkCalendarGridPropTypes } from '../../bpk-component-calendar';
 import { startOfDay, startOfMonth } from 'date-fns';
 import {
   AutoSizer,
@@ -28,6 +26,12 @@ import {
   CellMeasurerCache,
 } from 'react-virtualized';
 
+import { cssModules, deprecated } from '../../bpk-react-utils';
+import {
+  DateUtils,
+  BpkCalendarGridPropTypes,
+} from '../../bpk-component-calendar';
+
 import STYLES from './BpkScrollableCalendarGridList.module.scss';
 import BpkScrollableCalendarGrid from './BpkScrollableCalendarGrid';
 import getMonthsArray from './utils';

package/bpk-component-section-list/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-section-list",
-  "version": "3.2.1",
+  "version": "3.2.7",
   "description": "Backpack section list component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,15 +14,15 @@
   },
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
-    "@skyscanner/bpk-foundations-web": "^5.0.0",
-    "bpk-component-icon": "^9.2.1",
-    "bpk-component-text": "^6.1.1",
-    "bpk-mixins": "^26.1.0",
-    "bpk-react-utils": "^4.1.0",
+    "@skyscanner/bpk-foundations-web": "^6.2.0",
+    "bpk-component-icon": "^9.2.7",
+    "bpk-component-text": "^7.0.0",
+    "bpk-mixins": "^29.0.0",
+    "bpk-react-utils": "^4.1.1",
     "prop-types": "^15.7.2"
   },
   "devDependencies": {
-    "bpk-storybook-utils": "^1.1.0"
+    "bpk-storybook-utils": "^1.1.5"
   },
   "peerDependencies": {
     "react": "^16.3.0 || ^17.0.0"

package/bpk-component-section-list/src/BpkSectionListItem.js

@@ -20,6 +20,7 @@
 
 import PropTypes from 'prop-types';
 import React, { type Node } from 'react';
+
 import { cssModules } from '../../bpk-react-utils';
 import BpkLargeChevronRightIcon from '../../bpk-component-icon/lg/chevron-right';
 import { withRtlSupport } from '../../bpk-component-icon';

package/bpk-component-section-list/src/BpkSectionListSection.js

@@ -20,6 +20,7 @@
 
 import PropTypes from 'prop-types';
 import React, { type Node } from 'react';
+
 import { cssModules } from '../../bpk-react-utils';
 import BpkText, { TEXT_STYLES } from '../../bpk-component-text';