@skyscanner/backpack-web 42.15.0 → 42.17.0

package/bpk-component-horizontal-nav/src/BpkHorizontalNavItem.js

@@ -14,84 +14,49 @@
  * 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 { Component } from 'react';
+ */
+
+import { forwardRef } from 'react';
 import { cssModules } from "../../bpk-react-utils";
 import { HORIZONTAL_NAV_TYPES } from "./BpkHorizontalNav";
 import STYLES from "./BpkHorizontalNavItem.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
-// In order to be able to access refs on the HorizontalNavItems, they need to be a fully defined
-// React Component class.
-// eslint-disable-next-line react/prefer-stateless-function
-class BpkHorizontalNavItem extends Component {
-  render() {
-    const {
-      children,
-      className,
-      disabled,
-      href,
-      selected,
-      spaceAround,
-      type,
-      ...rest
-    } = this.props;
-    const classNames = getClassName('bpk-horizontal-nav__item', spaceAround && 'bpk-horizontal-nav__item--space-around');
-    const innerClassNames = getClassName('bpk-horizontal-nav__link', `bpk-horizontal-nav__link--${type}`, selected && `bpk-horizontal-nav__link--${type}-selected`, disabled && `bpk-horizontal-nav__link--${type}-disabled`, className);
-    const clickableElement = href ?
-    /*#__PURE__*/
-    // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
-    _jsx("a", {
-      href: href,
-      className: innerClassNames,
-      "aria-disabled": disabled,
-      role: "tab",
-      "aria-selected": selected ? 'true' : 'false',
-      ...rest,
-      children: children
-    }) :
-    /*#__PURE__*/
-    // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
-    _jsx("button", {
-      type: "button",
-      className: innerClassNames,
-      disabled: disabled,
-      role: "tab",
-      "aria-selected": selected ? 'true' : 'false',
-      ...rest,
-      children: children
-    });
-    return /*#__PURE__*/_jsx("div", {
-      className: classNames,
-      children: clickableElement
-    });
-  }
-}
-BpkHorizontalNavItem.propTypes = {
-  children: PropTypes.node.isRequired,
-  className: PropTypes.string,
-  /**
-   * **Note:**
-   * "disabled" and "selected" are mutually exclusive for true values, i.e. only one of them can be true for a given nav item.
-   */
-  disabled: PropTypes.bool,
-  href: PropTypes.string,
-  /**
-   * **Note:**
-   * "disabled" and "selected" are mutually exclusive for true values, i.e. only one of them can be true for a given nav item.
-   */
-  selected: PropTypes.bool,
-  spaceAround: PropTypes.bool,
-  type: PropTypes.oneOf(Object.keys(HORIZONTAL_NAV_TYPES))
-};
-BpkHorizontalNavItem.defaultProps = {
-  className: null,
-  disabled: false,
-  href: null,
-  selected: false,
-  spaceAround: false,
-  type: HORIZONTAL_NAV_TYPES.default
-};
+const BpkHorizontalNavItem = /*#__PURE__*/forwardRef(({
+  children,
+  className = null,
+  disabled = false,
+  href = null,
+  selected = false,
+  spaceAround = false,
+  type = HORIZONTAL_NAV_TYPES.default,
+  ...rest
+}, ref) => {
+  const classNames = getClassName('bpk-horizontal-nav__item', spaceAround && 'bpk-horizontal-nav__item--space-around');
+  const innerClassNames = getClassName('bpk-horizontal-nav__link', `bpk-horizontal-nav__link--${type}`, selected && `bpk-horizontal-nav__link--${type}-selected`, disabled && `bpk-horizontal-nav__link--${type}-disabled`, className);
+  const clickableElement = href ? /*#__PURE__*/_jsx("a", {
+    href: href,
+    className: innerClassNames,
+    "aria-disabled": disabled,
+    role: "tab",
+    "aria-selected": selected ? 'true' : 'false',
+    ...rest,
+    children: children
+  }) : /*#__PURE__*/_jsx("button", {
+    type: "button",
+    className: innerClassNames,
+    disabled: disabled,
+    role: "tab",
+    "aria-selected": selected ? 'true' : 'false',
+    ...rest,
+    children: children
+  });
+  return /*#__PURE__*/_jsx("div", {
+    ref: ref,
+    className: classNames,
+    children: clickableElement
+  });
+});
 const themeAttributes = ['horizontalNavLinkColor', 'horizontalNavLinkHoverColor', 'horizontalNavLinkActiveColor', 'horizontalNavLinkSelectedColor', 'horizontalNavBarSelectedColor'];
 export { themeAttributes };
 export default BpkHorizontalNavItem;

package/bpk-component-switch/index.d.ts

@@ -1,5 +1,5 @@
-import BpkSwitch, { type Props as BpkSwitchProps } from './src/BpkSwitch';
+import BpkSwitch, { SWITCH_VARIANTS, type Props as BpkSwitchProps, type SwitchVariant } from './src/BpkSwitch';
 import themeAttributes from './src/themeAttributes';
-export type { BpkSwitchProps };
-export { themeAttributes };
+export type { BpkSwitchProps, SwitchVariant };
+export { SWITCH_VARIANTS, themeAttributes };
 export default BpkSwitch;

package/bpk-component-switch/index.js

@@ -14,7 +14,7 @@
  * 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 BpkSwitch from "./src/BpkSwitch";
+ */import BpkSwitch, { SWITCH_VARIANTS } from "./src/BpkSwitch";
 import themeAttributes from "./src/themeAttributes";
-export { themeAttributes };
+export { SWITCH_VARIANTS, themeAttributes };
 export default BpkSwitch;

package/bpk-component-switch/src/BpkSwitch.d.ts

@@ -1,8 +1,14 @@
+export declare const SWITCH_VARIANTS: {
+    readonly default: "default";
+    readonly onContrast: "onContrast";
+};
+export type SwitchVariant = (typeof SWITCH_VARIANTS)[keyof typeof SWITCH_VARIANTS];
 export type Props = {
     ariaLabel: string;
     className?: string | null;
     small?: boolean;
+    variant?: SwitchVariant;
     [rest: string]: any;
 };
-declare const BpkSwitch: ({ ariaLabel, className, small, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
+declare const BpkSwitch: ({ ariaLabel, className, small, variant, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
 export default BpkSwitch;

package/bpk-component-switch/src/BpkSwitch.js

@@ -19,14 +19,23 @@
 import { cssModules, getDataComponentAttribute } from "../../bpk-react-utils";
 import STYLES from "./BpkSwitch.module.css";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const SWITCH_VARIANTS = {
+  default: 'default',
+  onContrast: 'onContrast'
+};
 const getClassName = cssModules(STYLES);
+const switchVariantClassNames = {
+  [SWITCH_VARIANTS.default]: null,
+  [SWITCH_VARIANTS.onContrast]: getClassName('bpk-switch__switch--on-contrast')
+};
 const BpkSwitch = ({
   ariaLabel,
   className = null,
   small = false,
+  variant = SWITCH_VARIANTS.default,
   ...rest
 }) => {
-  const switchClassNames = getClassName('bpk-switch__switch', small && 'bpk-switch__switch--small');
+  const switchClassNames = getClassName('bpk-switch__switch', small && 'bpk-switch__switch--small', switchVariantClassNames[variant]);
   return /*#__PURE__*/_jsxs("label", {
     className: getClassName('bpk-switch', className),
     ...getDataComponentAttribute('Switch'),

package/bpk-component-switch/src/BpkSwitch.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.bpk-switch{position:relative;display:flex;width:fit-content;align-items:center;border-radius:1rem}.bpk-switch__checkbox{position:absolute;opacity:0}.bpk-switch__checkbox:checked~.bpk-switch__switch{background:#0062e3;background:var(--bpk-switch-checked-color, rgb(0, 98, 227))}.bpk-switch__checkbox:checked~.bpk-switch__switch::before{left:1.375rem}.bpk-switch__checkbox:focus-visible~.bpk-switch__switch{outline:.125rem solid #0062e3;outline-offset:.125rem}.bpk-switch__switch{position:relative;float:right;display:block;min-width:3.25rem;height:2rem;transition:background 200ms linear;border-radius:1rem;background:rgba(0,0,0,.2);cursor:pointer}.bpk-switch__switch::before{position:absolute;top:.125rem;left:.125rem;content:"";display:block;width:1.75rem;height:1.75rem;transition:left 200ms ease-out;border-radius:50%;background:#fff;box-shadow:0px 1px 3px 0px rgba(37,32,31,.3)}.bpk-switch__switch--small{min-width:2.5rem;height:1.25rem}.bpk-switch__switch--small::before{width:1rem;height:1rem}
+.bpk-switch{position:relative;display:flex;width:fit-content;align-items:center;border-radius:1rem}.bpk-switch__checkbox{position:absolute;opacity:0}.bpk-switch__checkbox:checked~.bpk-switch__switch{background:#0062e3;background:var(--bpk-switch-checked-color, rgb(0, 98, 227))}.bpk-switch__checkbox:checked~.bpk-switch__switch::before{left:1.375rem}.bpk-switch__checkbox:focus-visible~.bpk-switch__switch{outline:.125rem solid #0062e3;outline-offset:.125rem}.bpk-switch__switch{position:relative;float:right;display:block;min-width:3.25rem;height:2rem;transition:background 200ms linear;border-radius:1rem;background:rgba(0,0,0,.2);cursor:pointer}.bpk-switch__switch::before{position:absolute;top:.125rem;left:.125rem;content:"";display:block;width:1.75rem;height:1.75rem;transition:left 200ms ease-out;border-radius:50%;background:#fff;box-shadow:0px 1px 3px 0px rgba(37,32,31,.3)}.bpk-switch__switch--small{min-width:2.5rem;height:1.25rem}.bpk-switch__switch--small::before{width:1rem;height:1rem}.bpk-switch__switch--on-contrast{background:hsla(0,0%,100%,.2)}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyscanner/backpack-web",
-  "version": "42.15.0",
+  "version": "42.17.0",
   "description": "Backpack Design System web library",
   "repository": {
     "type": "git",
@@ -28,7 +28,7 @@
     "@radix-ui/react-compose-refs": "^1.1.1",
     "@radix-ui/react-slider": "1.3.5",
     "@react-google-maps/api": "^2.19.3",
-    "@skyscanner/bpk-foundations-web": "^24.5.0",
+    "@skyscanner/bpk-foundations-web": "^24.6.0",
     "@skyscanner/bpk-svgs": "^20.11.0",
     "tabbable": "^6.4.0",
     "d3-path": "^3.1.0",