@skyscanner/backpack-web 41.7.0 → 41.8.0

package/bpk-component-chip-group/src/BpkMultiSelectChipGroup.js

@@ -21,6 +21,7 @@ import BpkBreakpoint, { BREAKPOINTS } from "../../bpk-component-breakpoint";
 import BpkSelectableChip, { BpkDismissibleChip, BpkIconChip, BpkDropdownChip, CHIP_TYPES } from "../../bpk-component-chip";
 import BpkMobileScrollContainer from "../../bpk-component-mobile-scroll-container";
 import BpkText, { TEXT_STYLES } from "../../bpk-component-text/src/BpkText";
+import BpkVisuallyHidden from "../../bpk-component-visually-hidden";
 import { cssModules } from "../../bpk-react-utils";
 import BpkStickyChip from "./BpkStickyChip";
 import Nudger, { POSITION } from "./Nudger";
@@ -85,8 +86,8 @@ const ChipGroupContent = ({
 }) => /*#__PURE__*/_jsxs("fieldset", {
   className: chipGroupClassNames,
   role: ariaMultiselectable ? 'group' : 'radiogroup',
-  children: [ariaLabel && /*#__PURE__*/_jsx("legend", {
-    className: "visually-hidden",
+  children: [ariaLabel && /*#__PURE__*/_jsx(BpkVisuallyHidden, {
+    as: "legend",
     children: ariaLabel
   }), label && /*#__PURE__*/_jsx(BpkText, {
     textStyle: TEXT_STYLES.footnote,

package/bpk-component-icon/src/withDescription.js

@@ -16,16 +16,14 @@
  * limitations under the License.
  */
 
-import { cssModules, wrapDisplayName } from "../../bpk-react-utils";
-import STYLES from "./withDescription.module.css";
+import BpkVisuallyHidden from "../../bpk-component-visually-hidden";
+import { wrapDisplayName } from "../../bpk-react-utils";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const getClassName = cssModules(STYLES);
 export default function withDescription(Component, description) {
   const WithDescription = props => /*#__PURE__*/_jsxs("span", {
     children: [/*#__PURE__*/_jsx(Component, {
       ...props
-    }), /*#__PURE__*/_jsx("span", {
-      className: getClassName('bpk-icon-description'),
+    }), /*#__PURE__*/_jsx(BpkVisuallyHidden, {
       children: description
     })]
   });

package/bpk-component-info-banner/src/BpkInfoBannerInner.js

@@ -32,6 +32,7 @@ import ChevronUpIcon from "../../bpk-component-icon/sm/chevron-up";
 import InfoCircleIcon from "../../bpk-component-icon/sm/information-circle";
 import TickCircleIcon from "../../bpk-component-icon/sm/tick-circle";
 import BpkLink from "../../bpk-component-link";
+import BpkVisuallyHidden from "../../bpk-component-visually-hidden";
 import { cssModules } from "../../bpk-react-utils";
 import AnimateAndFade from "./AnimateAndFade";
 import { ALERT_TYPES, STYLE_TYPES } from "./common-types";
@@ -68,8 +69,7 @@ const getIconForType = (type, CustomIcon) => {
 };
 const ToggleButton = props => /*#__PURE__*/_jsxs("div", {
   className: getClassName('bpk-info-banner__toggle-button'),
-  children: [props.expanded ? /*#__PURE__*/_jsx(CollapseIcon, {}) : /*#__PURE__*/_jsx(ExpandIcon, {}), /*#__PURE__*/_jsx("span", {
-    className: "visually-hidden",
+  children: [props.expanded ? /*#__PURE__*/_jsx(CollapseIcon, {}) : /*#__PURE__*/_jsx(ExpandIcon, {}), /*#__PURE__*/_jsx(BpkVisuallyHidden, {
     children: props.label
   })]
 });

package/bpk-component-theme-toggle/src/BpkThemeToggle.js

@@ -20,13 +20,11 @@ import { Component } from 'react';
 import BpkLabel from "../../bpk-component-label";
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import BpkSelect from "../../bpk-component-select";
-import { cssModules } from "../../bpk-react-utils";
+import BpkVisuallyHidden from "../../bpk-component-visually-hidden";
 import bpkCustomThemes from "./theming";
 import { getHtmlElement, THEME_CHANGE_EVENT } from "./utils";
-import STYLES from "./BpkThemeToggle.module.css";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const inputId = 'theme-select';
-const getClassName = cssModules(STYLES);
 const availableThemes = Object.keys(bpkCustomThemes);
 const setTheme = theme => {
   const htmlElement = getHtmlElement();
@@ -84,8 +82,7 @@ class BpkThemeToggle extends Component {
     } = this.props;
     return /*#__PURE__*/_jsxs("div", {
       ...rest,
-      children: [/*#__PURE__*/_jsx("span", {
-        className: getClassName('bpk-theme-toggle__label'),
+      children: [/*#__PURE__*/_jsx(BpkVisuallyHidden, {
         children: /*#__PURE__*/_jsx(BpkLabel, {
           htmlFor: inputId,
           children: "Change theme"

package/bpk-component-visually-hidden/index.d.ts

@@ -0,0 +1,3 @@
+import BpkVisuallyHidden, { type Props as BpkVisuallyHiddenProps } from './src/BpkVisuallyHidden';
+export type { BpkVisuallyHiddenProps };
+export default BpkVisuallyHidden;

package/{bpk-component-theme-toggle/src/BpkThemeToggle.module.css → bpk-component-visually-hidden/index.js}

@@ -1,18 +1,20 @@
 /*
  * 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-theme-toggle__label{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;white-space:nowrap;overflow:hidden;clip:rect(0 0 0 0)}
+
+import BpkVisuallyHidden from "./src/BpkVisuallyHidden";
+export default BpkVisuallyHidden;

package/bpk-component-visually-hidden/src/BpkVisuallyHidden.d.ts

@@ -0,0 +1,8 @@
+import type { ReactNode } from 'react';
+export type VisuallyHiddenElement = 'span' | 'div' | 'p' | 'strong' | 'em' | 'small' | 'legend' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+export type Props = {
+    as?: VisuallyHiddenElement;
+    children: ReactNode;
+};
+declare const BpkVisuallyHidden: ({ as: Element, children, }: Props) => import("react/jsx-runtime").JSX.Element;
+export default BpkVisuallyHidden;

package/bpk-component-visually-hidden/src/BpkVisuallyHidden.js

@@ -0,0 +1,38 @@
+/*
+ * 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 { cssModules } from "../../bpk-react-utils";
+import STYLES from "./BpkVisuallyHidden.module.css";
+import { jsx as _jsx } from "react/jsx-runtime";
+const getClassName = cssModules(STYLES);
+const BpkVisuallyHidden = ({
+  as: Element = 'span',
+  children
+}) => {
+  const classNames = getClassName('bpk-visually-hidden');
+  return (
+    /*#__PURE__*/
+    // Allowed, Element is always a dom element.
+    // eslint-disable-next-line @skyscanner/rules/forbid-component-props
+    _jsx(Element, {
+      className: classNames,
+      children: children
+    })
+  );
+};
+export default BpkVisuallyHidden;

package/{bpk-component-icon/src/withDescription.module.css → bpk-component-visually-hidden/src/BpkVisuallyHidden.module.css}

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.bpk-icon-description{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;white-space:nowrap;overflow:hidden;clip:rect(0 0 0 0)}
+.bpk-visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;white-space:nowrap;overflow:hidden;clip:rect(0 0 0 0)}

package/package.json

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