@skyscanner/backpack-web 33.7.0 → 33.8.0

package/bpk-component-loading-button/src/BpkLoadingButton.d.ts

@@ -0,0 +1,60 @@
+import PropTypes from 'prop-types';
+import type { ReactElement, ReactNode } from 'react';
+export declare const ICON_POSITION: {
+    LEADING: string;
+    TRAILING: string;
+};
+type LoadingProps = {
+    featured?: boolean;
+    secondaryOnDark?: boolean;
+    primaryOnLight?: boolean;
+    primaryOnDark?: boolean;
+    children: ReactNode;
+    className?: string;
+    disabled?: boolean;
+    secondary?: boolean;
+    destructive?: boolean;
+    large?: boolean;
+    link?: boolean;
+    linkOnDark?: boolean;
+    loading: boolean;
+    iconOnly: boolean;
+    icon?: ReactElement<any>;
+    iconPosition: string;
+    iconDisabled?: ReactElement<any>;
+    iconLoading?: ReactElement<any>;
+};
+declare const BpkLoadingButton: {
+    (props: LoadingProps): JSX.Element;
+    propTypes: {
+        children: PropTypes.Validator<NonNullable<PropTypes.ReactNodeLike>>;
+        className: PropTypes.Requireable<string>;
+        disabled: PropTypes.Requireable<boolean>;
+        secondary: PropTypes.Requireable<boolean>;
+        destructive: PropTypes.Requireable<boolean>;
+        link: PropTypes.Requireable<boolean>;
+        linkOnDark: PropTypes.Requireable<boolean>;
+        loading: PropTypes.Requireable<boolean>;
+        iconOnly: PropTypes.Requireable<boolean>;
+        icon: PropTypes.Requireable<PropTypes.ReactElementLike>;
+        iconPosition: PropTypes.Requireable<string>;
+        iconDisabled: PropTypes.Requireable<PropTypes.ReactElementLike>;
+        iconLoading: PropTypes.Requireable<PropTypes.ReactElementLike>;
+    };
+    defaultProps: {
+        className: null;
+        disabled: boolean;
+        secondary: boolean;
+        destructive: boolean;
+        large: boolean;
+        link: boolean;
+        linkOnDark: boolean;
+        loading: boolean;
+        iconOnly: boolean;
+        icon: null;
+        iconPosition: string;
+        iconDisabled: null;
+        iconLoading: null;
+    };
+};
+export default BpkLoadingButton;

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

@@ -14,8 +14,10 @@
  * 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.
- */import PropTypes from 'prop-types';
-import BpkButton from "../../bpk-component-button";
+ */
+
+import PropTypes from 'prop-types';
+import { BUTTON_TYPES, BpkButtonV2, SIZE_TYPES } from "../../bpk-component-button";
 import { withButtonAlignment, withLargeButtonAlignment, withRtlSupport } from "../../bpk-component-icon";
 import ArrowIconLg from "../../bpk-component-icon/lg/long-arrow-right";
 import ArrowIconSm from "../../bpk-component-icon/sm/long-arrow-right";
@@ -58,7 +60,6 @@ const getLoadingIcon = props => {
 const BpkLoadingButton = props => {
   const {
     children,
-    className,
     disabled,
     icon,
     iconDisabled,
@@ -66,8 +67,6 @@ const BpkLoadingButton = props => {
     iconOnly,
     iconPosition,
     large,
-    link,
-    linkOnDark,
     loading,
     ...rest
   } = props;
@@ -76,28 +75,49 @@ const BpkLoadingButton = 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 || linkOnDark) && 'bpk-loading-button--link', className);
-  const iconClassNames = getClassName('bpk-loading-button__icon', large && 'bpk-loading-button__icon--large', iconOnly && (large ? 'bpk-loading-button__icon--large-icon-only' : 'bpk-loading-button__icon--icon-only'), (link || linkOnDark) && 'bpk-loading-button__icon--link');
-  return (
-    /*#__PURE__*/
-    // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
-    _jsxs(BpkButton, {
-      iconOnly: iconOnly,
-      disabled: showBtnDisabled,
-      large: large
-      // TODO: className to be removed
-      // eslint-disable-next-line @skyscanner/rules/forbid-component-props
-      ,
-      className: classNames,
-      link: link,
-      linkOnDark: linkOnDark,
-      ...rest,
+  const iconClassNames = getClassName('bpk-loading-button__icon');
+  let type = BUTTON_TYPES.primary;
+  if (props.link) {
+    type = BUTTON_TYPES.link;
+  }
+  if (props.linkOnDark) {
+    type = BUTTON_TYPES.linkOnDark;
+  }
+  if (props.featured) {
+    type = BUTTON_TYPES.featured;
+  }
+  if (props.destructive) {
+    type = BUTTON_TYPES.destructive;
+  }
+  if (props.secondaryOnDark) {
+    type = BUTTON_TYPES.secondaryOnDark;
+  }
+  if (props.secondary) {
+    type = BUTTON_TYPES.secondary;
+  }
+  if (props.primaryOnLight) {
+    type = BUTTON_TYPES.primaryOnLight;
+  }
+  if (props.primaryOnDark) {
+    type = BUTTON_TYPES.primaryOnDark;
+  }
+  return /*#__PURE__*/_jsx(BpkButtonV2, {
+    iconOnly: iconOnly,
+    disabled: showBtnDisabled,
+    size: large ? SIZE_TYPES.large : SIZE_TYPES.small,
+    type: type,
+    ...rest,
+    children: /*#__PURE__*/_jsxs("div", {
+      className: getClassName('bpk-loading-button__container'),
       children: [loading && /*#__PURE__*/_jsx("span", {
         className: iconClassNames,
         children: loadingIcon
-      }), child0, child1, child2]
+      }), /*#__PURE__*/_jsxs("div", {
+        className: getClassName(loading ? "bpk-loading-button--hidden" : "bpk-loading-button--visible"),
+        children: [child0, child1, child2]
+      })]
     })
-  );
+  });
 };
 BpkLoadingButton.propTypes = {
   children: PropTypes.node.isRequired,

package/bpk-component-loading-button/src/BpkLoadingButton.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.bpk-loading-button{position:relative;overflow:hidden}.bpk-loading-button--link{visibility:hidden}.bpk-loading-button__icon{position:absolute;display:inline-flex;visibility:visible;z-index:1;width:calc(100% - 2rem);height:calc(100% - 0.75rem);justify-content:center;align-items:center;background-color:inherit}.bpk-loading-button__icon--large{height:calc(100% - 1.5rem)}.bpk-loading-button__icon--icon-only{width:calc(100% - 1.25rem)}.bpk-loading-button__icon--large-icon-only{width:calc(100% - 1.5rem)}.bpk-loading-button__icon--link{width:100%;background:unset}
+.bpk-loading-button__container{display:inline-flex;justify-content:center;align-items:center}.bpk-loading-button__icon{position:absolute;display:inline-flex}.bpk-loading-button--hidden{visibility:hidden}.bpk-loading-button--visible{visibility:visible}

package/bpk-mixins/_forms.scss

@@ -190,7 +190,7 @@
   padding: 0;
   border: 0;
   background-color: transparent;
-  color: tokens.$bpk-text-secondary-day;
+  color: $bpk-text-secondary-day;
   cursor: pointer;
   appearance: none; // hidden by default
 
@@ -200,11 +200,11 @@
   }
 
   @include utils.bpk-hover {
-    color: tokens.$bpk-text-primary-day;
+    color: $bpk-text-primary-day;
   }
 
   &:active {
-    color: tokens.$bpk-text-primary-day;
+    color: $bpk-text-primary-day;
   }
 
   &--large {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyscanner/backpack-web",
-  "version": "33.7.0",
+  "version": "33.8.0",
   "description": "Backpack Design System web library",
   "repository": {
     "type": "git",