@skyscanner/backpack-web 34.2.0 → 34.3.0

package/bpk-component-button/src/BpkButtonBase.js

@@ -14,17 +14,27 @@
  * 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, defaultProps } from "./common-types";
+ */
+import { cssModules } from "../../bpk-react-utils";
+import { propTypes, defaultProps } from "./common-types";
 import COMMON_STYLES from "./BpkButtonBase.module.css";
-
-// This was originally depended upon from the bpk-react-utils package, however
-// we decided to inline it in this particular component so as not to bloat the
-// the bundles of consumers who are not yet on webpack 2
-// We'll revisit this again soon.
 import { jsx as _jsx } from "react/jsx-runtime";
-const cssModules = (styles = {}) => className => styles[className] ? styles[className] : className;
-const getCommonClassName = cssModules(COMMON_STYLES);
-const BpkButton = props => {
+const getClassName = cssModules(COMMON_STYLES);
+
+// This is a duplicate of BpkButtonV2
+// Better to duplicate rather than prematurely align the abstraction between Button and ButtonV2
+export const BUTTON_TYPES = {
+  primary: 'primary',
+  primaryOnDark: 'primary-on-dark',
+  primaryOnLight: 'primary-on-light',
+  secondary: 'secondary',
+  secondaryOnDark: 'secondary-on-dark',
+  destructive: 'destructive',
+  featured: 'featured',
+  link: 'link',
+  linkOnDark: 'link-on-dark'
+};
+const BpkButtonBase = props => {
   const {
     blank,
     children,
@@ -36,58 +46,75 @@ const BpkButton = props => {
     onClick,
     rel: propRel,
     submit,
+    type,
     ...rest
   } = props;
-  const classNames = [getCommonClassName('bpk-button')];
+  const classNames = [];
+  if (type === undefined) {
+    classNames.push('bpk-button');
+  }
+  if (type === BUTTON_TYPES.featured) {
+    classNames.push('bpk-button--featured');
+  }
+  if (type === BUTTON_TYPES.destructive) {
+    classNames.push('bpk-button--destructive');
+  }
+  if (type === BUTTON_TYPES.link) {
+    classNames.push('bpk-button--link');
+  }
+  if (type === BUTTON_TYPES.linkOnDark) {
+    classNames.push('bpk-button--linkOnDark');
+  }
+  if (type === BUTTON_TYPES.primaryOnDark) {
+    classNames.push('bpk-button--primaryOnDark');
+  }
+  if (type === BUTTON_TYPES.primaryOnLight) {
+    classNames.push('bpk-button--primaryOnLight');
+  }
+  if (type === BUTTON_TYPES.secondary) {
+    classNames.push('bpk-button--secondary');
+  }
+  if (type === BUTTON_TYPES.secondaryOnDark) {
+    classNames.push('bpk-button--secondaryOnDark');
+  }
   if (large) {
-    classNames.push(getCommonClassName('bpk-button--large'));
+    classNames.push('bpk-button--large');
   }
   if (iconOnly) {
-    classNames.push(getCommonClassName(large ? 'bpk-button--large-icon-only' : 'bpk-button--icon-only'));
+    classNames.push(large ? 'bpk-button--large-icon-only' : 'bpk-button--icon-only');
   }
   if (className) {
     classNames.push(className);
   }
-  const classNameFinal = classNames.join(' ');
+  const classNameFinal = getClassName(...classNames);
   const target = blank ? '_blank' : null;
   const rel = blank ? propRel || 'noopener noreferrer' : propRel;
   if (!disabled && href) {
-    return (
-      /*#__PURE__*/
-      // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
-      _jsx("a", {
-        href: href,
-        className: classNameFinal,
-        onClick: onClick,
-        target: target,
-        rel: rel,
-        ...rest,
-        children: children
-      })
-    );
-  }
-  const buttonType = submit ? 'submit' : 'button';
-
-  /* eslint-disable react/button-has-type */
-  return (
-    /*#__PURE__*/
-    // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
-    _jsx("button", {
-      type: buttonType,
-      disabled: disabled,
+    return /*#__PURE__*/_jsx("a", {
+      href: href,
       className: classNameFinal,
       onClick: onClick,
+      target: target || undefined,
+      rel: rel,
       ...rest,
       children: children
-    })
-  );
-  /* eslint-enable */
+    });
+  }
+  const buttonType = submit ? 'submit' : 'button';
+  return /*#__PURE__*/_jsx("button", {
+    // eslint-disable-next-line react/button-has-type
+    type: buttonType,
+    disabled: disabled,
+    className: classNameFinal,
+    onClick: onClick,
+    ...rest,
+    children: children
+  });
 };
-BpkButton.propTypes = {
+BpkButtonBase.propTypes = {
   ...propTypes
 };
-BpkButton.defaultProps = {
+BpkButtonBase.defaultProps = {
   ...defaultProps
 };
-export default BpkButton;
-export { cssModules };
+export default BpkButtonBase;

package/bpk-component-button/src/BpkButtonBase.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.bpk-button{display:inline-block;min-height:2.25rem;margin:0;padding:.375rem 1rem;border:0;border-radius:.5rem;text-align:center;text-decoration:none;cursor:pointer;vertical-align:middle;user-select:none;font-size:1rem;line-height:1.5rem;font-weight:700;color:#fff;color:var(--bpk-button-primary-text-color, rgb(255, 255, 255));background-color:#05203c;background-color:var(--bpk-button-primary-background-color, rgb(5, 32, 60))}.bpk-no-touch-support .bpk-button:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-primary-hover-text-color, rgb(255, 255, 255));background-color:#154679;background-color:var(--bpk-button-primary-hover-background-color, rgb(21, 70, 121))}:global(.bpk-no-touch-support) .bpk-button:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-primary-hover-text-color, rgb(255, 255, 255));background-color:#154679;background-color:var(--bpk-button-primary-hover-background-color, rgb(21, 70, 121))}.bpk-button:active{color:#fff;color:var(--bpk-button-primary-active-text-color, rgb(255, 255, 255));background-color:#154679;background-color:var(--bpk-button-primary-active-background-color, rgb(21, 70, 121))}.bpk-button:disabled{background-color:#e0e4e9;color:rgba(0,0,0,.2);cursor:not-allowed}.bpk-button--large{min-height:3rem;padding:.75rem 1rem}.bpk-button--icon-only{border-radius:.5rem;padding-right:.625rem;padding-left:.625rem;border-radius:.5rem}.bpk-button--large-icon-only{border-radius:.5rem;padding-right:.75rem;padding-left:.75rem;border-radius:.5rem}.bpk-button span>svg{display:block}.bpk-button svg{fill:currentcolor}
+.bpk-button{display:inline-block;min-height:2.25rem;margin:0;padding:.375rem 1rem;border:0;border-radius:.5rem;text-align:center;text-decoration:none;cursor:pointer;vertical-align:middle;user-select:none;font-size:1rem;line-height:1.5rem;font-weight:700;color:#fff;color:var(--bpk-button-primary-text-color, rgb(255, 255, 255));background-color:#05203c;background-color:var(--bpk-button-primary-background-color, rgb(5, 32, 60))}.bpk-no-touch-support .bpk-button:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-primary-hover-text-color, rgb(255, 255, 255));background-color:#154679;background-color:var(--bpk-button-primary-hover-background-color, rgb(21, 70, 121))}:global(.bpk-no-touch-support) .bpk-button:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-primary-hover-text-color, rgb(255, 255, 255));background-color:#154679;background-color:var(--bpk-button-primary-hover-background-color, rgb(21, 70, 121))}.bpk-button:active{color:#fff;color:var(--bpk-button-primary-active-text-color, rgb(255, 255, 255));background-color:#154679;background-color:var(--bpk-button-primary-active-background-color, rgb(21, 70, 121))}.bpk-button:disabled{background-color:#e0e4e9;color:rgba(0,0,0,.2);cursor:not-allowed}.bpk-button--large{min-height:3rem;padding:.75rem 1rem}.bpk-button--icon-only{border-radius:.5rem;padding-right:.625rem;padding-left:.625rem;border-radius:.5rem}.bpk-button--large-icon-only{border-radius:.5rem;padding-right:.75rem;padding-left:.75rem;border-radius:.5rem}.bpk-button span>svg{display:block}.bpk-button svg{fill:currentcolor}.bpk-button--featured{composes:bpk-button;color:#fff;color:var(--bpk-button-featured-text-color, rgb(255, 255, 255));background-color:#0062e3;background-color:var(--bpk-button-featured-background-color, rgb(0, 98, 227))}.bpk-no-touch-support .bpk-button--featured:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-featured-hover-text-color, rgb(255, 255, 255));background-color:#024daf;background-color:var(--bpk-button-featured-hover-background-color, rgb(2, 77, 175))}:global(.bpk-no-touch-support) .bpk-button--featured:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-featured-hover-text-color, rgb(255, 255, 255));background-color:#024daf;background-color:var(--bpk-button-featured-hover-background-color, rgb(2, 77, 175))}.bpk-button--featured:active{color:#fff;color:var(--bpk-button-featured-active-text-color, rgb(255, 255, 255));background-color:#024daf;background-color:var(--bpk-button-featured-active-background-color, rgb(2, 77, 175))}.bpk-button--featured:disabled{background-color:#e0e4e9;color:rgba(0,0,0,.2)}.bpk-button--destructive{composes:bpk-button;color:#e70866;color:var(--bpk-button-destructive-text-color, rgb(231, 8, 102));background-color:#e0e4e9;background-color:var(--bpk-button-destructive-background-color, rgb(224, 228, 233))}.bpk-no-touch-support .bpk-button--destructive:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-destructive-hover-text-color, rgb(255, 255, 255));background-color:#e70866;background-color:var(--bpk-button-destructive-hover-background-color, rgb(231, 8, 102))}:global(.bpk-no-touch-support) .bpk-button--destructive:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-destructive-hover-text-color, rgb(255, 255, 255));background-color:#e70866;background-color:var(--bpk-button-destructive-hover-background-color, rgb(231, 8, 102))}.bpk-button--destructive:active{color:#fff;color:var(--bpk-button-destructive-active-text-color, rgb(255, 255, 255));background-color:#e70866;background-color:var(--bpk-button-destructive-active-background-color, rgb(231, 8, 102))}.bpk-button--destructive:disabled{background-color:#e0e4e9;color:rgba(0,0,0,.2)}.bpk-button--link{composes:bpk-button;background:none;box-shadow:none;padding:0;border:0;background-color:rgba(0,0,0,0);text-decoration:none;cursor:pointer;appearance:none;color:#0062e3;color:var(--bpk-link-color, rgb(0, 98, 227));padding:.375rem 0;color:#0062e3}.bpk-no-touch-support .bpk-button--link:hover:not(:active):not(:disabled){text-decoration:underline;color:#0062e3;color:var(--bpk-link-hover-color, rgb(0, 98, 227))}:global(.bpk-no-touch-support) .bpk-button--link:hover:not(:active):not(:disabled){text-decoration:underline;color:#0062e3;color:var(--bpk-link-hover-color, rgb(0, 98, 227))}.bpk-button--link:visited{color:#0062e3;color:var(--bpk-link-visited-color, rgb(0, 98, 227))}.bpk-button--link:active{text-decoration:underline;color:#0062e3;color:var(--bpk-link-active-color, rgb(0, 98, 227))}.bpk-no-touch-support .bpk-button--link:hover:not(:active):not(:disabled){background:none;color:#024daf;text-decoration:none}:global(.bpk-no-touch-support) .bpk-button--link:hover:not(:active):not(:disabled){background:none;color:#024daf;text-decoration:none}.bpk-button--link:active{background:none;color:#024daf;text-decoration:none}.bpk-button--link:disabled{background:none;color:rgba(0,0,0,.2);text-decoration:none}.bpk-button--link-large{padding:.75rem 0}.bpk-button--linkOnDark{composes:bpk-button;background:none;box-shadow:none;padding:0;border:0;background-color:rgba(0,0,0,0);text-decoration:none;cursor:pointer;appearance:none;color:#0062e3;color:var(--bpk-link-color, rgb(0, 98, 227));padding:.375rem 0;color:#0062e3;color:#fff;color:var(--bpk-button-link-on-dark-text-color, rgb(255, 255, 255))}.bpk-no-touch-support .bpk-button--linkOnDark:hover:not(:active):not(:disabled){text-decoration:underline;color:#0062e3;color:var(--bpk-link-hover-color, rgb(0, 98, 227))}:global(.bpk-no-touch-support) .bpk-button--linkOnDark:hover:not(:active):not(:disabled){text-decoration:underline;color:#0062e3;color:var(--bpk-link-hover-color, rgb(0, 98, 227))}.bpk-button--linkOnDark:visited{color:#0062e3;color:var(--bpk-link-visited-color, rgb(0, 98, 227))}.bpk-button--linkOnDark:active{text-decoration:underline;color:#0062e3;color:var(--bpk-link-active-color, rgb(0, 98, 227))}.bpk-no-touch-support .bpk-button--linkOnDark:hover:not(:active):not(:disabled){background:none;color:#024daf;text-decoration:none}:global(.bpk-no-touch-support) .bpk-button--linkOnDark:hover:not(:active):not(:disabled){background:none;color:#024daf;text-decoration:none}.bpk-button--linkOnDark:active{background:none;color:#024daf;text-decoration:none}.bpk-button--linkOnDark:disabled{background:none;color:rgba(0,0,0,.2);text-decoration:none}.bpk-button--linkOnDark-large{padding:.75rem 0}.bpk-no-touch-support .bpk-button--linkOnDark:hover:not(:active):not(:disabled){color:rgba(255,255,255,.5);color:var(--bpk-button-link-on-dark-hover-text-color, rgba(255, 255, 255, 0.5))}:global(.bpk-no-touch-support) .bpk-button--linkOnDark:hover:not(:active):not(:disabled){color:rgba(255,255,255,.5);color:var(--bpk-button-link-on-dark-hover-text-color, rgba(255, 255, 255, 0.5))}.bpk-button--linkOnDark:active{color:rgba(255,255,255,.5);color:var(--bpk-button-link-on-dark-active-text-color, rgba(255, 255, 255, 0.5))}.bpk-button--linkOnDark:visited{color:#fff;color:var(--bpk-button-link-on-dark-text-color, rgb(255, 255, 255))}.bpk-button--linkOnDark:disabled{color:rgba(255,255,255,.2);color:var(--bpk-button-link-on-dark-disabled-color, rgba(255, 255, 255, 0.2))}.bpk-button--primaryOnDark{composes:bpk-button;color:#161616;color:var(--bpk-button-primary-on-dark-text-color, rgb(22, 22, 22));background-color:#fff;background-color:var(--bpk-button-primary-on-dark-background-color, rgb(255, 255, 255))}.bpk-no-touch-support .bpk-button--primaryOnDark:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-button-primary-on-dark-hover-text-color, rgb(22, 22, 22));background-color:#c1c7cf;background-color:var(--bpk-button-primary-on-dark-hover-background-color, rgb(193, 199, 207))}:global(.bpk-no-touch-support) .bpk-button--primaryOnDark:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-button-primary-on-dark-hover-text-color, rgb(22, 22, 22));background-color:#c1c7cf;background-color:var(--bpk-button-primary-on-dark-hover-background-color, rgb(193, 199, 207))}.bpk-button--primaryOnDark:active{color:#161616;color:var(--bpk-button-primary-on-dark-active-text-color, rgb(22, 22, 22));background-color:#c1c7cf;background-color:var(--bpk-button-primary-on-dark-active-background-color, rgb(193, 199, 207))}.bpk-button--primaryOnDark:disabled{background-color:#e0e4e9;color:rgba(0,0,0,.2)}.bpk-button--primaryOnLight{composes:bpk-button;color:#fff;color:var(--bpk-button-primary-on-light-text-color, rgb(255, 255, 255));background-color:#05203c;background-color:var(--bpk-button-primary-on-light-background-color, rgb(5, 32, 60))}.bpk-no-touch-support .bpk-button--primaryOnLight:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-primary-on-light-hover-text-color, rgb(255, 255, 255));background-color:#154679;background-color:var(--bpk-button-primary-on-light-hover-background-color, rgb(21, 70, 121))}:global(.bpk-no-touch-support) .bpk-button--primaryOnLight:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-primary-on-light-hover-text-color, rgb(255, 255, 255));background-color:#154679;background-color:var(--bpk-button-primary-on-light-hover-background-color, rgb(21, 70, 121))}.bpk-button--primaryOnLight:active{color:#fff;color:var(--bpk-button-primary-on-light-active-text-color, rgb(255, 255, 255));background-color:#154679;background-color:var(--bpk-button-primary-on-light-active-background-color, rgb(21, 70, 121))}.bpk-button--primaryOnLight:disabled{background-color:#e0e4e9;color:rgba(0,0,0,.2)}.bpk-button--secondary{composes:bpk-button;color:#161616;color:var(--bpk-button-secondary-text-color, rgb(22, 22, 22));background-color:#e0e4e9;background-color:var(--bpk-button-secondary-background-color, rgb(224, 228, 233))}.bpk-no-touch-support .bpk-button--secondary:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-button-secondary-hover-text-color, rgb(22, 22, 22));background-color:#c1c7cf;background-color:var(--bpk-button-secondary-hover-background-color, rgb(193, 199, 207))}:global(.bpk-no-touch-support) .bpk-button--secondary:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-button-secondary-hover-text-color, rgb(22, 22, 22));background-color:#c1c7cf;background-color:var(--bpk-button-secondary-hover-background-color, rgb(193, 199, 207))}.bpk-button--secondary:active{color:#161616;color:var(--bpk-button-secondary-active-text-color, rgb(22, 22, 22));background-color:#c1c7cf;background-color:var(--bpk-button-secondary-active-background-color, rgb(193, 199, 207))}.bpk-button--secondary:disabled{background-color:#e0e4e9;color:rgba(0,0,0,.2)}.bpk-button--secondaryOnDark{composes:bpk-button;color:#fff;color:var(--bpk-button-secondary-on-dark-text-color, rgb(255, 255, 255));background-color:rgba(255,255,255,.1);background-color:var(--bpk-button-secondary-on-dark-background-color, rgba(255, 255, 255, 0.1))}.bpk-no-touch-support .bpk-button--secondaryOnDark:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-secondary-on-dark-hover-text-color, rgb(255, 255, 255));background-color:#010913;background-color:var(--bpk-button-secondary-on-dark-hover-background-color, rgb(1, 9, 19))}:global(.bpk-no-touch-support) .bpk-button--secondaryOnDark:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-secondary-on-dark-hover-text-color, rgb(255, 255, 255));background-color:#010913;background-color:var(--bpk-button-secondary-on-dark-hover-background-color, rgb(1, 9, 19))}.bpk-button--secondaryOnDark:active{color:#fff;color:var(--bpk-button-secondary-on-dark-active-text-color, rgb(255, 255, 255));background-color:#010913;background-color:var(--bpk-button-secondary-on-dark-active-background-color, rgb(1, 9, 19))}.bpk-button--secondaryOnDark:disabled{background-color:#0b121d;color:rgba(255,255,255,.2)}

package/bpk-component-button/src/common-types.d.ts

@@ -0,0 +1,37 @@
+import PropTypes from 'prop-types';
+import type { ReactNode, SyntheticEvent } from 'react';
+export type Props = {
+    children: ReactNode;
+    href?: string;
+    className?: string;
+    disabled: boolean;
+    onClick?: (event: SyntheticEvent) => unknown;
+    submit: boolean;
+    large: boolean;
+    iconOnly: boolean;
+    blank: boolean;
+    rel?: string;
+};
+export declare const defaultProps: {
+    href: null;
+    className: null;
+    disabled: boolean;
+    onClick: null;
+    submit: boolean;
+    large: boolean;
+    iconOnly: boolean;
+    blank: boolean;
+    rel: null;
+};
+export declare const propTypes: {
+    children: PropTypes.Validator<NonNullable<PropTypes.ReactNodeLike>>;
+    href: PropTypes.Requireable<string>;
+    className: PropTypes.Requireable<string>;
+    disabled: PropTypes.Requireable<boolean>;
+    onClick: PropTypes.Requireable<(...args: any[]) => any>;
+    submit: PropTypes.Requireable<boolean>;
+    large: PropTypes.Requireable<boolean>;
+    iconOnly: PropTypes.Requireable<boolean>;
+    blank: PropTypes.Requireable<boolean>;
+    rel: PropTypes.Requireable<string>;
+};

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

@@ -14,20 +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';
-const propTypes = {
-  children: PropTypes.node.isRequired,
-  href: PropTypes.string,
-  className: PropTypes.string,
-  disabled: PropTypes.bool,
-  onClick: PropTypes.func,
-  submit: PropTypes.bool,
-  large: PropTypes.bool,
-  iconOnly: PropTypes.bool,
-  blank: PropTypes.bool,
-  rel: PropTypes.string
-};
-const defaultProps = {
+ */
+
+import PropTypes from 'prop-types';
+export const defaultProps = {
   href: null,
   className: null,
   disabled: false,
@@ -38,4 +28,15 @@ const defaultProps = {
   blank: false,
   rel: null
 };
-export { propTypes, defaultProps };
+export const propTypes = {
+  children: PropTypes.node.isRequired,
+  href: PropTypes.string,
+  className: PropTypes.string,
+  disabled: PropTypes.bool,
+  onClick: PropTypes.func,
+  submit: PropTypes.bool,
+  large: PropTypes.bool,
+  iconOnly: PropTypes.bool,
+  blank: PropTypes.bool,
+  rel: PropTypes.string
+};

package/bpk-component-card/src/BpkCard.d.ts

@@ -1,4 +1,4 @@
-import type { ReactNode } from 'react';
+import { type ReactNode } from 'react';
 type Props = {
     children: ReactNode | string;
     className?: string | null;

package/bpk-component-card/src/BpkCard.js

@@ -16,7 +16,9 @@
  * limitations under the License.
  */
 
+import { useContext } from 'react';
 import { cssModules } from "../../bpk-react-utils";
+import { CardContext } from "./CardContext";
 import STYLES from "./BpkCard.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
@@ -29,7 +31,8 @@ const BpkCard = ({
   padded = true,
   ...rest
 }) => {
-  const classNames = getClassName('bpk-card', atomic && !href && 'bpk-card--atomic-button', padded && 'bpk-card--padded', className);
+  const cardContext = useContext(CardContext);
+  const classNames = getClassName('bpk-card', atomic && !href && 'bpk-card--atomic-button', padded && 'bpk-card--padded', !cardContext.elevated && 'bpk-card--no-elevation', className);
   const atomicProps = {};
   if (href) {
     let blankProps = {};

package/bpk-component-card/src/BpkCard.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.bpk-card{position:relative;display:block;background-color:#fff;color:#161616;text-decoration:none;cursor:pointer;box-shadow:0px 1px 3px 0px rgba(37,32,31,.3);border-radius:.75rem}.bpk-no-touch-support .bpk-card:hover:not(:active):not(:disabled)::after{opacity:1}:global(.bpk-no-touch-support) .bpk-card:hover:not(:active):not(:disabled)::after{opacity:1}.bpk-card::after{position:absolute;top:0;right:0;bottom:0;left:0;content:"";transition:opacity 200ms ease-in-out;opacity:0;pointer-events:none;box-shadow:0px 4px 14px 0px rgba(37,32,31,.25);border-radius:.75rem}@media screen\0 {.bpk-card::after{z-index:-1}}.bpk-card:active::after{box-shadow:none}.bpk-card--atomic-button{width:100%;padding:0;border:none;background:none;color:inherit;text-align:inherit;cursor:pointer;appearance:none}.bpk-card--padded{padding:1rem}
+.bpk-card{position:relative;display:block;background-color:#fff;color:#161616;text-decoration:none;cursor:pointer;box-shadow:0px 1px 3px 0px rgba(37,32,31,.3);border-radius:.75rem}.bpk-no-touch-support .bpk-card:hover:not(:active):not(:disabled)::after{opacity:1}:global(.bpk-no-touch-support) .bpk-card:hover:not(:active):not(:disabled)::after{opacity:1}.bpk-card::after{position:absolute;top:0;right:0;bottom:0;left:0;content:"";transition:opacity 200ms ease-in-out;opacity:0;pointer-events:none;box-shadow:0px 4px 14px 0px rgba(37,32,31,.25);border-radius:.75rem}@media screen\0 {.bpk-card::after{z-index:-1}}.bpk-card:active::after{box-shadow:none}.bpk-card--atomic-button{width:100%;padding:0;border:none;background:none;color:inherit;text-align:inherit;cursor:pointer;appearance:none}.bpk-card--padded{padding:1rem}.bpk-card--no-elevation{box-shadow:none}.bpk-card--no-elevation::after{box-shadow:none}

package/bpk-component-card/src/BpkCardWrapper.js

@@ -17,6 +17,7 @@
  */
 
 import { cssModules } from "../../bpk-react-utils";
+import { CardContext } from "./CardContext";
 import STYLES from "./BpkCardWrapper.module.css";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
@@ -27,19 +28,24 @@ const BpkCardWrapper = ({
   header
 }) => {
   const classNames = getClassName('bpk-card-wrapper', className);
-  return /*#__PURE__*/_jsxs("div", {
-    className: classNames,
-    style: {
-      // @ts-expect-error TS is reporting this incorrectly as --background-color is valid
-      '--background-color': backgroundColor
+  return /*#__PURE__*/_jsx(CardContext.Provider, {
+    value: {
+      elevated: false
     },
-    children: [/*#__PURE__*/_jsx("div", {
-      className: getClassName('bpk-card-wrapper--header'),
-      children: header
-    }), /*#__PURE__*/_jsx("div", {
-      className: getClassName('bpk-card-wrapper--content'),
-      children: card
-    })]
+    children: /*#__PURE__*/_jsxs("div", {
+      className: classNames,
+      style: {
+        // @ts-expect-error TS is reporting this incorrectly as --background-color is valid
+        '--background-color': backgroundColor
+      },
+      children: [/*#__PURE__*/_jsx("div", {
+        className: getClassName('bpk-card-wrapper--header'),
+        children: header
+      }), /*#__PURE__*/_jsx("div", {
+        className: getClassName('bpk-card-wrapper--content'),
+        children: card
+      })]
+    })
   });
 };
 export default BpkCardWrapper;

package/bpk-component-card/src/BpkDividedCard.d.ts

@@ -12,5 +12,5 @@ export type Props = {
     isElevated?: boolean;
     [rest: string]: any;
 };
-declare const BpkDividedCard: ({ className, href, isElevated, orientation, primaryContent, secondaryContent, ...rest }: Props) => JSX.Element;
+declare const BpkDividedCard: ({ href, isElevated, orientation, primaryContent, secondaryContent, ...rest }: Props) => JSX.Element;
 export default BpkDividedCard;

package/bpk-component-card/src/BpkDividedCard.js

@@ -18,6 +18,7 @@
 
 import { cssModules } from "../../bpk-react-utils";
 import BpkCard from "./BpkCard";
+import { CardContext } from "./CardContext";
 import STYLES from "./BpkDividedCard.module.css";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
@@ -26,7 +27,6 @@ export const ORIENTATION = {
   vertical: 'vertical'
 };
 const BpkDividedCard = ({
-  className = null,
   href = null,
   isElevated = true,
   orientation = ORIENTATION.horizontal,
@@ -35,24 +35,31 @@ const BpkDividedCard = ({
   ...rest
 }) => {
   const isVertical = orientation === ORIENTATION.vertical;
-  const classNames = getClassName('bpk-divided-card', isVertical ? 'bpk-divided-card--vertical' : 'bpk-divided-card--horizontal', !isElevated && 'bpk-divided-card--no-elevation', className);
-  return (
-    /*#__PURE__*/
-    // TODO: className to be removed
-    // eslint-disable-next-line @skyscanner/rules/forbid-component-props
-    _jsxs(BpkCard, {
-      className: classNames,
-      href: href,
-      padded: false,
-      ...rest,
-      children: [/*#__PURE__*/_jsx("div", {
-        className: getClassName(!isVertical && 'bpk-divided-card__primary--horizontal'),
-        children: primaryContent
-      }), /*#__PURE__*/_jsx("div", {
-        className: getClassName(isVertical ? 'bpk-divided-card__secondary--vertical' : 'bpk-divided-card__secondary--horizontal'),
-        children: secondaryContent
-      })]
+  const containerClassName = getClassName(isVertical ? 'bpk-divided-card--vertical-container' : 'bpk-divided-card--horizontal-container');
+  const contentClassName = getClassName('bpk-divided-card--content', isVertical && 'bpk-divided-card--vertical-content');
+  const secondaryContentClassName = getClassName(isVertical ? 'bpk-divided-card__secondary--vertical' : 'bpk-divided-card__secondary--horizontal');
+  return /*#__PURE__*/_jsx(CardContext.Provider, {
+    value: {
+      elevated: isElevated
+    },
+    children: /*#__PURE__*/_jsx("div", {
+      className: containerClassName,
+      children: /*#__PURE__*/_jsx(BpkCard, {
+        href: href,
+        padded: false,
+        ...rest,
+        children: /*#__PURE__*/_jsxs("div", {
+          className: contentClassName,
+          children: [/*#__PURE__*/_jsx("div", {
+            className: getClassName(!isVertical && 'bpk-divided-card__primary--horizontal'),
+            children: primaryContent
+          }), /*#__PURE__*/_jsx("div", {
+            className: secondaryContentClassName,
+            children: secondaryContent
+          })]
+        })
+      })
     })
-  );
+  });
 };
 export default BpkDividedCard;

package/bpk-component-card/src/BpkDividedCard.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.bpk-divided-card{display:flex;align-items:stretch}.bpk-divided-card--vertical{min-width:15rem;max-width:45rem;flex-direction:column}.bpk-divided-card--horizontal{min-width:45.0625rem;min-height:18.25rem}.bpk-divided-card__primary--horizontal{flex:1}.bpk-divided-card__secondary--vertical{border-top:solid .0625rem #c1c7cf}.bpk-divided-card__secondary--horizontal{width:13.5rem;border-left:solid .0625rem #c1c7cf}html[dir=rtl] .bpk-divided-card__secondary--horizontal{border-right:solid .0625rem #c1c7cf;border-left:unset}.bpk-divided-card--no-elevation{box-shadow:none}.bpk-divided-card--no-elevation::after{box-shadow:none}
+.bpk-divided-card--content{display:flex;height:100%;align-items:stretch}.bpk-divided-card--vertical-content{flex-direction:column}.bpk-divided-card--vertical-container{display:flex;min-width:15rem;max-width:45rem}.bpk-divided-card--horizontal-container{display:flex;min-width:45.0625rem;min-height:18.25rem}.bpk-divided-card__primary--horizontal{flex:1}.bpk-divided-card__secondary--vertical{border-top:solid .0625rem #c1c7cf}.bpk-divided-card__secondary--horizontal{width:13.5rem;border-left:solid .0625rem #c1c7cf}html[dir=rtl] .bpk-divided-card__secondary--horizontal{border-right:solid .0625rem #c1c7cf;border-left:unset}

package/bpk-component-card/src/CardContext.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+interface BpkCardContext {
+    /**
+     * Indicates if the BpkCard should render elevated from the page or not. Parent card types can specify `false` when they handle elevation internally, rather than BpkCard.
+     * BpkCard will render elevated by default.
+     */
+    elevated: boolean;
+}
+/**
+ * CardContext is an internal context to be used only within Backpack parent Card types (time of writing BpkDividedCard & BpkCardWrapper).
+ * It facillitates the BpkCard to render appropriately when wrapped and/or is rendered indirectly from a parent.
+ */
+export declare const CardContext: import("react").Context<BpkCardContext>;
+export {};

package/{bpk-component-button/src/BpkButtonPrimary.js → bpk-component-card/src/CardContext.js}

@@ -14,19 +14,15 @@
  * 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 BpkButtonBase from "./BpkButtonBase";
-import { defaultProps, propTypes } from "./common-types";
-
-// TODO: BpkButtonBase has the primary button style as it wasn't removed to
-// avoid a breaking change in the mixin. Review after this is tested.
-import { jsx as _jsx } from "react/jsx-runtime";
-const BpkButtonPrimary = props => /*#__PURE__*/_jsx(BpkButtonBase, {
-  ...props
-});
-BpkButtonPrimary.propTypes = {
-  ...propTypes
-};
-BpkButtonPrimary.defaultProps = {
-  ...defaultProps
+ */
+import { createContext } from 'react';
+const defaultContext = {
+  elevated: true
 };
-export default BpkButtonPrimary;
+
+/**
+ * CardContext is an internal context to be used only within Backpack parent Card types (time of writing BpkDividedCard & BpkCardWrapper).
+ * It facillitates the BpkCard to render appropriately when wrapped and/or is rendered indirectly from a parent.
+ */
+// eslint-disable-next-line import/prefer-default-export
+export const CardContext = /*#__PURE__*/createContext(defaultContext);

package/bpk-component-dialog/src/BpkDialogInner.js

@@ -50,11 +50,9 @@ const BpkDialogInner = props => {
       "aria-modal": ariaModal,
       className: classNames,
       ref: dialogRef,
-      children: [flare && /*#__PURE__*/_jsx(BpkContentBubble
-      // TODO: className to be removed
-      // eslint-disable-next-line @skyscanner/rules/forbid-component-props
-      , {
-        className: flareClassNames
+      children: [flare && /*#__PURE__*/_jsx("div", {
+        className: flareClassNames,
+        children: /*#__PURE__*/_jsx(BpkContentBubble, {})
       }), /*#__PURE__*/_jsx("div", {
         className: contentClassNames,
         children: children

package/bpk-component-dialog/src/BpkDialogInner.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.bpk-dialog-inner{z-index:1100;width:100%;max-width:32rem;margin:auto;transform:scale(1);transition:opacity 200ms ease-in-out,transform 200ms ease-in-out;outline:0;background-color:#fff;opacity:1;-webkit-tap-highlight-color:rgba(0,0,0,0);box-shadow:0px 12px 50px 0px rgba(37,32,31,.25);border-radius:.5rem}.bpk-dialog-inner--appear{transform:scale(0.9);opacity:0}.bpk-dialog-inner--appear-active{transform:scale(1);opacity:1}.bpk-dialog-inner__content{padding:1rem;flex:1;overflow-y:auto}.bpk-dialog-inner__flare{height:15rem;border-radius:inherit;background-color:#05203c}
+.bpk-dialog-inner{z-index:1100;width:100%;max-width:32rem;margin:auto;transform:scale(1);transition:opacity 200ms ease-in-out,transform 200ms ease-in-out;outline:0;background-color:#fff;opacity:1;-webkit-tap-highlight-color:rgba(0,0,0,0);box-shadow:0px 12px 50px 0px rgba(37,32,31,.25);border-radius:.5rem}.bpk-dialog-inner--appear{transform:scale(0.9);opacity:0}.bpk-dialog-inner--appear-active{transform:scale(1);opacity:1}.bpk-dialog-inner__content{padding:1rem;flex:1;overflow-y:auto}.bpk-dialog-inner__flare{display:flex;height:15rem;border-radius:inherit;background-color:#05203c}

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

@@ -104,6 +104,7 @@ const BpkPopover = ({
       context: context,
       modal: false,
       children: /*#__PURE__*/_jsx("div", {
+        className: getClassName('bpk-popover--container'),
         ref: refs.setFloating,
         style: floatingStyles,
         ...getFloatingProps(),

package/bpk-component-popover/src/BpkPopover.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.bpk-popover-portal{z-index:900}@media(max-width: 32rem){.bpk-popover-portal{margin-right:1rem;margin-left:1rem}}.bpk-popover{transition:opacity 200ms ease-in-out;outline:0;background-color:#fff;opacity:1;border-radius:.5rem;box-shadow:0px 4px 14px 0px rgba(37,32,31,.25)}@media(min-width: 32.0625rem){.bpk-popover{max-width:32rem;transition:opacity 50ms ease-in-out}}.bpk-popover--appear{opacity:0}.bpk-popover--appear-active{opacity:1}.bpk-popover__arrow{width:1.5rem;height:1.5rem;fill:#fff}.bpk-popover__arrow[data-hide]{visibility:hidden}.bpk-popover__body--padded{padding:1rem}.bpk-popover__header{display:flex;padding:1rem;justify-content:space-between;box-shadow:0 -1px 0 0 #e0e4e9 inset}.bpk-popover__label{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0)}.bpk-popover__footer{padding:.5rem 1rem;text-align:right;box-shadow:0 1px 0 0 #e0e4e9 inset}html[dir=rtl] .bpk-popover__footer{text-align:left}
+.bpk-popover-container{z-index:900}.bpk-popover{transition:opacity 200ms ease-in-out;outline:0;background-color:#fff;opacity:1;border-radius:.5rem;box-shadow:0px 4px 14px 0px rgba(37,32,31,.25)}@media(min-width: 32.0625rem){.bpk-popover{max-width:32rem;transition:opacity 50ms ease-in-out}}.bpk-popover--appear{opacity:0}.bpk-popover--appear-active{opacity:1}.bpk-popover__arrow{width:1.5rem;height:1.5rem;fill:#fff}.bpk-popover__arrow[data-hide]{visibility:hidden}.bpk-popover__body--padded{padding:1rem}.bpk-popover__header{display:flex;padding:1rem;justify-content:space-between;box-shadow:0 -1px 0 0 #e0e4e9 inset}.bpk-popover__label{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0)}.bpk-popover__footer{padding:.5rem 1rem;text-align:right;box-shadow:0 1px 0 0 #e0e4e9 inset}html[dir=rtl] .bpk-popover__footer{text-align:left}

package/package.json

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

package/bpk-component-button/src/BpkButtonDestructive.js

@@ -1,48 +0,0 @@
-/*
- * 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.
- */import BpkButtonBase, { cssModules } from "./BpkButtonBase";
-import { defaultProps, propTypes } from "./common-types";
-import STYLES from "./BpkButtonDestructive.module.css";
-import { jsx as _jsx } from "react/jsx-runtime";
-const getClassName = cssModules(STYLES);
-const BpkButtonDestructive = props => {
-  const {
-    className,
-    ...rest
-  } = props;
-  const classNames = [getClassName('bpk-button--destructive')];
-  if (className) {
-    classNames.push(className);
-  }
-  const classNamesFinal = classNames.join(' ');
-  return /*#__PURE__*/_jsx(BpkButtonBase
-  // TODO: className to be removed
-  // eslint-disable-next-line @skyscanner/rules/forbid-component-props
-  , {
-    className: classNamesFinal
-    // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
-    ,
-    ...rest
-  });
-};
-BpkButtonDestructive.propTypes = {
-  ...propTypes
-};
-BpkButtonDestructive.defaultProps = {
-  ...defaultProps
-};
-export default BpkButtonDestructive;

package/bpk-component-button/src/BpkButtonDestructive.module.css

@@ -1,18 +0,0 @@
-/*
- * 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.
- */
-.bpk-button--destructive{color:#161616;color:var(--bpk-button-secondary-text-color, rgb(22, 22, 22));background-color:#e0e4e9;background-color:var(--bpk-button-secondary-background-color, rgb(224, 228, 233));color:#e70866;color:var(--bpk-button-destructive-text-color, rgb(231, 8, 102));background-color:#e0e4e9;background-color:var(--bpk-button-destructive-background-color, rgb(224, 228, 233))}.bpk-no-touch-support .bpk-button--destructive:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-button-secondary-hover-text-color, rgb(22, 22, 22));background-color:#c1c7cf;background-color:var(--bpk-button-secondary-hover-background-color, rgb(193, 199, 207))}:global(.bpk-no-touch-support) .bpk-button--destructive:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-button-secondary-hover-text-color, rgb(22, 22, 22));background-color:#c1c7cf;background-color:var(--bpk-button-secondary-hover-background-color, rgb(193, 199, 207))}.bpk-button--destructive:active{color:#161616;color:var(--bpk-button-secondary-active-text-color, rgb(22, 22, 22));background-color:#c1c7cf;background-color:var(--bpk-button-secondary-active-background-color, rgb(193, 199, 207))}.bpk-button--destructive:disabled{background-color:#e0e4e9;color:rgba(0,0,0,.2)}.bpk-no-touch-support .bpk-button--destructive:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-destructive-hover-text-color, rgb(255, 255, 255));background-color:#e70866;background-color:var(--bpk-button-destructive-hover-background-color, rgb(231, 8, 102))}:global(.bpk-no-touch-support) .bpk-button--destructive:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-destructive-hover-text-color, rgb(255, 255, 255));background-color:#e70866;background-color:var(--bpk-button-destructive-hover-background-color, rgb(231, 8, 102))}.bpk-button--destructive:active{color:#fff;color:var(--bpk-button-destructive-active-text-color, rgb(255, 255, 255));background-color:#e70866;background-color:var(--bpk-button-destructive-active-background-color, rgb(231, 8, 102))}.bpk-button--destructive:disabled{background-color:#e0e4e9;color:rgba(0,0,0,.2)}

package/bpk-component-button/src/BpkButtonFeatured.js

@@ -1,48 +0,0 @@
-/*
- * 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.
- */import BpkButtonBase, { cssModules } from "./BpkButtonBase";
-import { defaultProps, propTypes } from "./common-types";
-import STYLES from "./BpkButtonFeatured.module.css";
-import { jsx as _jsx } from "react/jsx-runtime";
-const getClassName = cssModules(STYLES);
-const BpkButtonFeatured = props => {
-  const {
-    className,
-    ...rest
-  } = props;
-  const classNames = [getClassName('bpk-button--featured')];
-  if (className) {
-    classNames.push(className);
-  }
-  const classNamesFinal = classNames.join(' ');
-  return /*#__PURE__*/_jsx(BpkButtonBase
-  // TODO: className to be removed
-  // eslint-disable-next-line @skyscanner/rules/forbid-component-props
-  , {
-    className: classNamesFinal
-    // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
-    ,
-    ...rest
-  });
-};
-BpkButtonFeatured.propTypes = {
-  ...propTypes
-};
-BpkButtonFeatured.defaultProps = {
-  ...defaultProps
-};
-export default BpkButtonFeatured;