@skyscanner/backpack-web 0.0.6 → 0.1.0

package/bpk-component-loading-button/src/BpkLoadingButton.js

@@ -20,15 +20,20 @@
 
 import PropTypes from 'prop-types';
 import React, { type Node, type Element } from 'react';
-import BpkButton from '../../bpk-component-button';
-import { BpkSpinner, BpkLargeSpinner } from '../../bpk-component-spinner';
+import BpkButton from 'bpk-component-button';
+import { BpkSpinner, BpkLargeSpinner } from 'bpk-component-spinner';
 import {
   withButtonAlignment,
   withLargeButtonAlignment,
   withRtlSupport,
-} from '../../bpk-component-icon';
-import ArrowIconSm from '../../bpk-component-icon/sm/long-arrow-right';
-import ArrowIconLg from '../../bpk-component-icon/lg/long-arrow-right';
+} from 'bpk-component-icon';
+import ArrowIconSm from 'bpk-component-icon/sm/long-arrow-right';
+import ArrowIconLg from 'bpk-component-icon/lg/long-arrow-right';
+import { cssModules } from 'bpk-react-utils';
+
+import STYLES from './BpkLoadingButton.module.scss';
+
+const getClassName = cssModules(STYLES);
 
 export const ICON_POSITION = {
   LEADING: 'leading',
@@ -36,11 +41,8 @@ export const ICON_POSITION = {
 };
 
 const getPropsIcon = (props) => {
-  const { disabled, icon, iconDisabled, iconLoading, loading } = props;
+  const { disabled, icon, iconDisabled } = props;
 
-  if (loading) {
-    return iconLoading;
-  }
   if (disabled) {
     return iconDisabled;
   }
@@ -57,15 +59,10 @@ const getEnabledIcon = (large: boolean) => {
   return <AlignedIcon />;
 };
 
-type IconProps = { loading: boolean, large: boolean };
+const getLoadingIcon = (props) => {
+  const { iconLoading, large } = props;
 
-const getDefaultIcon = (props: IconProps) => {
-  const { large, loading } = props;
-
-  if (loading) {
-    return getSpinner(large);
-  }
-  return getEnabledIcon(large);
+  return iconLoading || getSpinner(large);
 };
 
 type LoadingProps = {
@@ -87,12 +84,15 @@ type LoadingProps = {
 const BpkLoadingButton = (props: LoadingProps) => {
   const {
     children,
+    className,
     disabled,
     icon,
     iconDisabled,
     iconLoading,
     iconOnly,
     iconPosition,
+    large,
+    link,
     loading,
     ...rest
   } = props;
@@ -100,16 +100,40 @@ const BpkLoadingButton = (props: LoadingProps) => {
   const showBtnDisabled = disabled || loading;
 
   const spacer = iconOnly ? '' : '\u00A0';
-  const buttonIcon = getPropsIcon(props) || getDefaultIcon(props);
+  const buttonIcon = getPropsIcon(props) || getEnabledIcon(large);
 
   const [child0, child1, child2] =
     iconPosition === ICON_POSITION.LEADING
       ? [buttonIcon, spacer, children]
       : [children, spacer, buttonIcon];
 
+  const loadingIcon = getLoadingIcon(props);
+
+  const classNames = getClassName(
+    loading && 'bpk-loading-button',
+    loading && link && 'bpk-loading-button--link',
+    className,
+  );
+
+  const iconClassNames = getClassName(
+    'bpk-loading-button__icon',
+    large && 'bpk-loading-button__icon--large',
+    link && 'bpk-loading-button__icon--link',
+  );
+
   return (
     // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
-    <BpkButton iconOnly={iconOnly} disabled={showBtnDisabled} {...rest}>
+    <BpkButton
+      iconOnly={iconOnly}
+      disabled={showBtnDisabled}
+      large={large}
+      className={classNames}
+      link={link}
+      {...rest}
+    >
+      {loading && !iconOnly && (
+        <span className={iconClassNames}>{loadingIcon}</span>
+      )}
       {child0}
       {child1}
       {child2}

package/{bpk-component-fieldset/examples.module.scss → bpk-component-loading-button/src/BpkLoadingButton.module.scss}

@@ -20,27 +20,36 @@
 
 $bpk-spacing-v2: true;
 
-.bpk-fieldsets {
-  &__container {
-    display: block;
-  }
+.bpk-loading-button {
+  $button-padding-x: bpk-spacing-base() * 2;
+  $button-padding-y: bpk-spacing-lg() / 2;
+  $button-large-padding-y: bpk-spacing-lg();
 
-  &__fieldset {
-    margin-right: bpk-spacing-sm();
-    flex: 1;
+  position: relative;
+  overflow: hidden;
 
-    @include bpk-rtl {
-      margin-right: 0;
-      margin-left: bpk-spacing-sm();
-    }
+  &--link {
+    visibility: hidden;
   }
 
-  &__toggle {
-    margin-top: 1rem;
-    text-align: right;
+  &__icon {
+    position: absolute;
+    display: inline-flex;
+    visibility: visible;
+    z-index: 1;
+    width: calc(100% - #{$button-padding-x});
+    height: calc(100% - #{$button-padding-y});
+    justify-content: center;
+    align-items: center;
+    background-color: inherit;
+
+    &--large {
+      height: calc(100% - #{$button-large-padding-y});
+    }
 
-    @include bpk-rtl {
-      text-align: left;
+    &--link {
+      width: 100%;
+      background: unset;
     }
   }
 }

package/bpk-component-map/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-map",
-  "version": "5.2.1",
+  "version": "5.2.5",
   "description": "Backpack map component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,9 +14,9 @@
   },
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
-    "bpk-component-spinner": "^5.1.0",
-    "bpk-mixins": "^26.1.0",
-    "bpk-react-utils": "^4.1.0",
+    "bpk-component-spinner": "^5.1.4",
+    "bpk-mixins": "^28.1.0",
+    "bpk-react-utils": "^4.1.1",
     "prop-types": "^15.5.8",
     "react-google-maps": "^9.4.5"
   },
@@ -24,9 +24,9 @@
     "react": "^16.3.0 || ^17.0.0"
   },
   "devDependencies": {
-    "bpk-component-icon": "^9.2.1",
-    "bpk-component-text": "^6.1.1",
-    "bpk-storybook-utils": "^1.1.0",
+    "bpk-component-icon": "^9.2.5",
+    "bpk-component-text": "^6.1.5",
+    "bpk-storybook-utils": "^1.1.3",
     "prop-types": "^15.5.8"
   }
 }

package/bpk-component-map/src/BpkIconMarker.js

@@ -20,7 +20,7 @@
 
 import React, { type Node } from 'react';
 import PropTypes from 'prop-types';
-import { cssModules } from '../../bpk-react-utils';
+import { cssModules } from 'bpk-react-utils';
 
 import BpkIconMarkerBackground from './BpkIconMarkerBackground';
 import { LatLongPropType, type LatLong } from './common-types';

package/bpk-component-map/src/BpkIconMarkerBackground.js

@@ -19,7 +19,7 @@
 /* @flow strict */
 
 import React from 'react';
-import { cssModules } from '../../bpk-react-utils';
+import { cssModules } from 'bpk-react-utils';
 
 import STYLES from './BpkIconMarkerBackground.module.scss';
 

package/bpk-component-map/src/BpkPriceMarker.js

@@ -20,8 +20,8 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { cssModules } from '../../bpk-react-utils';
-import BpkText, { TEXT_STYLES } from '../../bpk-component-text/src/BpkText';
+import { cssModules } from 'bpk-react-utils';
+import BpkText, { TEXT_STYLES } from 'bpk-component-text/src/BpkText';
 
 import { LatLongPropType, type LatLong } from './common-types';
 import BpkBasicMapMarker from './BpkBasicMapMarker';

package/bpk-component-map/src/DefaultLoadingElement.js

@@ -18,8 +18,8 @@
 /* @flow strict */
 
 import React from 'react';
-import { BpkLargeSpinner, SPINNER_TYPES } from '../../bpk-component-spinner';
-import { cssModules } from '../../bpk-react-utils';
+import { BpkLargeSpinner, SPINNER_TYPES } from 'bpk-component-spinner';
+import { cssModules } from 'bpk-react-utils';
 
 import STYLES from './DefaultLoadingElement.module.scss';
 

package/bpk-component-mobile-scroll-container/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-mobile-scroll-container",
-  "version": "3.1.0",
+  "version": "3.1.4",
   "description": "Backpack mobile scroll container 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": "^28.1.0",
+    "bpk-react-utils": "^4.1.1",
     "lodash.debounce": "^4.0.8",
     "prop-types": "^15.7.2"
   },
@@ -23,6 +23,6 @@
     "react": "^16.3.0 || ^17.0.0"
   },
   "devDependencies": {
-    "@skyscanner/bpk-foundations-web": "^5.0.0"
+    "@skyscanner/bpk-foundations-web": "^6.1.0"
   }
 }

package/bpk-component-mobile-scroll-container/src/BpkMobileScrollContainer.js

@@ -21,7 +21,7 @@
 import PropTypes from 'prop-types';
 import debounce from 'lodash.debounce';
 import React, { Component, type Node } from 'react';
-import { cssModules, isRTL } from '../../bpk-react-utils';
+import { cssModules, isRTL } from 'bpk-react-utils';
 
 import STYLES from './BpkMobileScrollContainer.module.scss';
 

package/bpk-component-modal/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-modal",
-  "version": "3.1.1",
+  "version": "3.1.5",
   "description": "Backpack modal component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,20 +14,20 @@
   },
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
-    "bpk-component-close-button": "^3.1.1",
-    "bpk-component-icon": "^9.2.1",
-    "bpk-component-link": "^3.1.0",
-    "bpk-component-navigation-bar": "^3.1.1",
-    "bpk-mixins": "^26.1.0",
-    "bpk-react-utils": "^4.1.0",
-    "bpk-scrim-utils": "^5.1.0",
+    "bpk-component-close-button": "^3.1.5",
+    "bpk-component-icon": "^9.2.5",
+    "bpk-component-link": "^3.1.4",
+    "bpk-component-navigation-bar": "^3.1.5",
+    "bpk-mixins": "^28.1.0",
+    "bpk-react-utils": "^4.1.1",
+    "bpk-scrim-utils": "^5.1.3",
     "prop-types": "^15.7.2"
   },
   "peerDependencies": {
     "react": "^16.3.0 || ^17.0.0"
   },
   "devDependencies": {
-    "bpk-component-button": "^5.1.0",
-    "bpk-component-text": "^6.1.1"
+    "bpk-component-button": "^6.1.0",
+    "bpk-component-text": "^6.1.5"
   }
 }

package/bpk-component-modal/src/BpkModal.js

@@ -20,8 +20,8 @@
 
 import PropTypes from 'prop-types';
 import React, { type Element } from 'react';
-import { withScrim } from '../../bpk-scrim-utils';
-import { Portal, cssModules, isDeviceIphone } from '../../bpk-react-utils';
+import { withScrim } from 'bpk-scrim-utils';
+import { Portal, cssModules, isDeviceIphone } from 'bpk-react-utils';
 
 import STYLES from './BpkModal.module.scss';
 import BpkModalInner, {

package/bpk-component-modal/src/BpkModalInner.js

@@ -18,12 +18,12 @@
 
 /* @flow strict */
 
-import { BpkButtonLink } from '../../bpk-component-link';
+import { BpkButtonLink } from 'bpk-component-link';
 import PropTypes from 'prop-types';
 import React, { type Node, type Element } from 'react';
-import BpkCloseButton from '../../bpk-component-close-button';
-import BpkNavigationBar from '../../bpk-component-navigation-bar';
-import { TransitionInitialMount, cssModules } from '../../bpk-react-utils';
+import BpkCloseButton from 'bpk-component-close-button';
+import BpkNavigationBar from 'bpk-component-navigation-bar';
+import { TransitionInitialMount, cssModules } from 'bpk-react-utils';
 
 import STYLES from './BpkModalInner.module.scss';
 import { titlePropType, onClosePropType } from './customPropTypes';

package/bpk-component-modal/src/themeAttributes.js

@@ -18,6 +18,6 @@
 
 /* @flow strict */
 
-import { themeAttributes as linkAttributes } from '../../bpk-component-link';
+import { themeAttributes as linkAttributes } from 'bpk-component-link';
 
 export default [...linkAttributes];

package/bpk-component-navigation-bar/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-navigation-bar",
-  "version": "3.1.1",
+  "version": "3.1.5",
   "description": "Backpack nativation bar component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,19 +14,19 @@
   },
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
-    "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.5",
+    "bpk-component-link": "^3.1.4",
+    "bpk-component-text": "^6.1.5",
+    "bpk-mixins": "^28.1.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-component-icon": "^9.2.1",
-    "bpk-storybook-utils": "^1.1.0"
+    "@skyscanner/bpk-foundations-web": "^6.1.0",
+    "bpk-component-icon": "^9.2.5",
+    "bpk-storybook-utils": "^1.1.3"
   }
 }

package/bpk-component-navigation-bar/src/BpkNavigationBar.js

@@ -20,8 +20,8 @@
 
 import React, { type Node, type Element } from 'react';
 import PropTypes from 'prop-types';
-import { cssModules } from '../../bpk-react-utils';
-import BpkText, { TEXT_STYLES } from '../../bpk-component-text';
+import { cssModules } from 'bpk-react-utils';
+import BpkText, { TEXT_STYLES } from 'bpk-component-text';
 
 import STYLES from './BpkNavigationBar.module.scss';
 

package/bpk-component-navigation-bar/src/BpkNavigationBarButtonLink.js

@@ -21,8 +21,8 @@
 import React, { type Node } from 'react';
 import PropTypes from 'prop-types';
 // TODO: close button is not really only a close button, we should rename and update the import here
-import { BpkButtonLink } from '../../bpk-component-link';
-import { cssModules } from '../../bpk-react-utils';
+import { BpkButtonLink } from 'bpk-component-link';
+import { cssModules } from 'bpk-react-utils';
 
 import STYLES from './BpkNavigationBarButtonLink.module.scss';
 

package/bpk-component-navigation-bar/src/BpkNavigationBarIconButton.js

@@ -21,8 +21,8 @@
 import React, { type ComponentType } from 'react';
 import PropTypes from 'prop-types';
 // TODO: close button is not really only a close button, we should rename and update the import here
-import BpkIconButton from '../../bpk-component-close-button';
-import { cssModules } from '../../bpk-react-utils';
+import BpkIconButton from 'bpk-component-close-button';
+import { cssModules } from 'bpk-react-utils';
 
 import STYLES from './BpkNavigationBarIconButton.module.scss';
 

package/bpk-component-navigation-stack/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-navigation-stack",
-  "version": "3.1.1",
+  "version": "3.1.5",
   "description": "Backpack navigation stack component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,9 +14,9 @@
   },
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
-    "@skyscanner/bpk-foundations-web": "^5.0.0",
-    "bpk-mixins": "^26.1.0",
-    "bpk-react-utils": "^4.1.0",
+    "@skyscanner/bpk-foundations-web": "^6.1.0",
+    "bpk-mixins": "^28.1.0",
+    "bpk-react-utils": "^4.1.1",
     "prop-types": "^15.7.2",
     "react-transition-group": "^2.5.3"
   },
@@ -24,9 +24,9 @@
     "react": "^16.3.0 || ^17.0.0"
   },
   "devDependencies": {
-    "bpk-component-button": "^5.1.0",
-    "bpk-component-icon": "^9.2.1",
-    "bpk-component-navigation-bar": "^3.1.1",
-    "bpk-component-rtl-toggle": "^3.1.0"
+    "bpk-component-button": "^6.1.0",
+    "bpk-component-icon": "^9.2.5",
+    "bpk-component-navigation-bar": "^3.1.5",
+    "bpk-component-rtl-toggle": "^3.1.4"
   }
 }

package/bpk-component-navigation-stack/src/BpkNavigationStack.js

@@ -18,7 +18,7 @@
 
 /* @flow strict */
 
-import { cssModules, isRTL } from '../../bpk-react-utils';
+import { cssModules, isRTL } from 'bpk-react-utils';
 import React, { Children, type Element } from 'react';
 import PropTypes from 'prop-types';
 import { durationSm } from '@skyscanner/bpk-foundations-web/tokens/base.es6';

package/bpk-component-nudger/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-nudger",
-  "version": "5.1.1",
+  "version": "6.0.2",
   "description": "Backpack nudger component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,11 +14,11 @@
   },
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
-    "@skyscanner/bpk-foundations-web": "^5.0.0",
-    "bpk-component-button": "^5.1.0",
-    "bpk-component-icon": "^9.2.1",
-    "bpk-mixins": "^26.1.0",
-    "bpk-react-utils": "^4.1.0",
+    "@skyscanner/bpk-foundations-web": "^6.1.0",
+    "bpk-component-button": "^6.1.0",
+    "bpk-component-icon": "^9.2.5",
+    "bpk-mixins": "^28.1.0",
+    "bpk-react-utils": "^4.1.1",
     "lodash.clamp": "^4.0.3",
     "prop-types": "^15.7.2"
   },
@@ -26,7 +26,7 @@
     "react": "^16.3.0 || ^17.0.0"
   },
   "devDependencies": {
-    "bpk-component-label": "^5.1.0",
-    "bpk-storybook-utils": "^1.1.0"
+    "bpk-component-label": "^5.1.4",
+    "bpk-storybook-utils": "^1.1.3"
   }
 }

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

@@ -21,12 +21,12 @@
 
 import PropTypes from 'prop-types';
 import React from 'react';
-import BpkButtonSecondary from '../../bpk-component-button/BpkButtonSecondary';
-import BpkButtonOutline from '../../bpk-component-button/BpkButtonOutline';
-import { withButtonAlignment } from '../../bpk-component-icon';
-import MinusIcon from '../../bpk-component-icon/sm/minus';
-import PlusIcon from '../../bpk-component-icon/sm/plus';
-import { cssModules } from '../../bpk-react-utils';
+import BpkButtonSecondary from 'bpk-component-button/BpkButtonSecondary';
+import BpkButtonOutline from 'bpk-component-button/BpkButtonOutline';
+import { withButtonAlignment } from 'bpk-component-icon';
+import MinusIcon from 'bpk-component-icon/sm/minus';
+import PlusIcon from 'bpk-component-icon/sm/plus';
+import { cssModules } from 'bpk-react-utils';
 
 import {
   type CommonProps,

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

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

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

@@ -18,6 +18,6 @@
 
 /* @flow strict */
 
-import { secondaryThemeAttributes as themeAttributes } from '../../bpk-component-button/themeAttributes';
+import { secondaryThemeAttributes as themeAttributes } from 'bpk-component-button/themeAttributes';
 
 export default themeAttributes;

package/bpk-component-overlay/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-overlay",
-  "version": "2.1.1",
+  "version": "2.1.5",
   "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": "^28.1.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.5",
+    "bpk-component-text": "^6.1.5"
   },
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8"
 }

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

@@ -19,7 +19,7 @@
 
 import PropTypes from 'prop-types';
 import React, { type Node } from 'react';
-import { cssModules } from '../../bpk-react-utils';
+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.2",
   "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.1.0",
+    "bpk-mixins": "^28.1.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.5"
   }
 }

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

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

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

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