@skyscanner/backpack-web 35.0.1 → 35.1.0

package/bpk-component-navigation-tab-group/index.d.ts

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

package/bpk-component-navigation-tab-group/index.js

@@ -0,0 +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.
+ */
+
+import BpkNavigationTabGroup from "./src/BpkNavigationTabGroup";
+export default BpkNavigationTabGroup;

package/bpk-component-navigation-tab-group/src/BpkNavigationTabGroup.d.ts

@@ -0,0 +1,20 @@
+import type { FunctionComponent } from 'react';
+export declare const NAVIGATION_TAB_GROUP_TYPES: {
+    CanvasDefault: string;
+    SurfaceContrast: string;
+};
+export type NavigationTabGroupTypes = (typeof NAVIGATION_TAB_GROUP_TYPES)[keyof typeof NAVIGATION_TAB_GROUP_TYPES];
+type TabItem = {
+    text: string;
+    icon?: FunctionComponent<any> | null;
+    href?: string;
+};
+export type Props = {
+    tabs: TabItem[];
+    type?: NavigationTabGroupTypes;
+    onItemClick: (tab: TabItem, index: number) => void;
+    selectedIndex: number;
+    ariaLabel: string;
+};
+declare const BpkNavigationTabGroup: ({ ariaLabel, onItemClick, selectedIndex, tabs, type, }: Props) => import("react/jsx-runtime").JSX.Element;
+export default BpkNavigationTabGroup;

package/bpk-component-navigation-tab-group/src/BpkNavigationTabGroup.js

@@ -0,0 +1,93 @@
+/*
+ * 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 { useState } from 'react';
+import BpkText, { TEXT_STYLES } from "../../bpk-component-text";
+import { cssModules } from "../../bpk-react-utils";
+import STYLES from "./BpkNavigationTabGroup.module.css";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+const getClassName = cssModules(STYLES);
+export const NAVIGATION_TAB_GROUP_TYPES = {
+  CanvasDefault: 'canvas-default',
+  SurfaceContrast: 'surface-contrast'
+};
+const TabWrap = ({
+  children,
+  onClick,
+  selected,
+  tab,
+  type
+}) => {
+  const tabStyling = getClassName('bpk-navigation-tab-wrap', `bpk-navigation-tab-wrap--${type}`, selected && `bpk-navigation-tab-wrap--${type}-selected`);
+  return tab.href ? /*#__PURE__*/_jsx("a", {
+    className: tabStyling,
+    href: tab.href,
+    onClick: onClick,
+    "aria-current": selected ? 'page' : false,
+    children: children
+  }) : /*#__PURE__*/_jsx("button", {
+    className: tabStyling,
+    type: "button",
+    onClick: onClick,
+    "aria-current": selected ? 'page' : false,
+    role: "link",
+    children: children
+  });
+};
+const BpkNavigationTabGroup = ({
+  ariaLabel,
+  onItemClick,
+  selectedIndex,
+  tabs,
+  type = NAVIGATION_TAB_GROUP_TYPES.SurfaceContrast
+}) => {
+  const [selectedTab, setSelectedTab] = useState(selectedIndex);
+  const handleButtonClick = (tab, index) => {
+    if (index !== selectedTab) {
+      setSelectedTab(index);
+    }
+    onItemClick(tab, index);
+  };
+  const containerStyling = getClassName('bpk-navigation-tab-group');
+  return /*#__PURE__*/_jsx("nav", {
+    className: containerStyling,
+    role: "navigation",
+    "aria-label": ariaLabel,
+    children: tabs.map((tab, index) => {
+      const selected = index === selectedTab;
+      const Icon = tab.icon;
+      return /*#__PURE__*/_jsx(TabWrap, {
+        tab: tab,
+        selected: selected,
+        onClick: () => handleButtonClick(tab, index),
+        type: type,
+        children: /*#__PURE__*/_jsxs(_Fragment, {
+          children: [Icon && /*#__PURE__*/_jsx("span", {
+            className: getClassName('bpk-navigation-tab-icon', `bpk-navigation-tab-icon--${type}`, selected && `bpk-navigation-tab-icon--${type}-selected`),
+            children: /*#__PURE__*/_jsx(Icon, {})
+          }), /*#__PURE__*/_jsx(BpkText, {
+            tagName: "span",
+            textStyle: TEXT_STYLES.label2,
+            children: tab.text
+          })]
+        })
+      }, `index-${index.toString()}`);
+    })
+  });
+};
+export default BpkNavigationTabGroup;

package/bpk-component-navigation-tab-group/src/BpkNavigationTabGroup.module.css

@@ -0,0 +1,18 @@
+/*
+ * 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-navigation-tab-group{display:flex}.bpk-navigation-tab-group .bpk-navigation-tab-wrap{height:2.25rem;padding:0 1rem;border:none;border-radius:6.25rem;margin-inline-end:.25rem;display:flex;align-items:center;text-decoration:none;white-space:nowrap}.bpk-navigation-tab-group .bpk-navigation-tab-wrap--surface-contrast{background-color:rgba(0,0,0,0);color:#fff;box-shadow:0 0 0 1px #c1c7cf inset}.bpk-navigation-tab-group .bpk-navigation-tab-wrap--surface-contrast:hover{background-color:#154679;box-shadow:0 0 0 1px #154679 inset}.bpk-navigation-tab-group .bpk-navigation-tab-wrap--surface-contrast-selected{background-color:#0062e3;box-shadow:0 0 0 1px #0062e3 inset}.bpk-navigation-tab-group .bpk-navigation-tab-wrap--surface-contrast-selected:hover{background-color:#0062e3;box-shadow:0 0 0 1px #0062e3 inset}.bpk-navigation-tab-group .bpk-navigation-tab-wrap--canvas-default{background-color:rgba(0,0,0,0);color:#161616;box-shadow:0 0 0 1px #c1c7cf inset}.bpk-navigation-tab-group .bpk-navigation-tab-wrap--canvas-default:hover{color:#161616;box-shadow:0 0 0 1px #161616 inset}.bpk-navigation-tab-group .bpk-navigation-tab-wrap--canvas-default-selected{background-color:#0062e3;color:#fff;box-shadow:0 0 0 1px #0062e3 inset}.bpk-navigation-tab-group .bpk-navigation-tab-wrap--canvas-default-selected:hover{background-color:#0062e3;color:#fff;box-shadow:0 0 0 1px #0062e3 inset}.bpk-navigation-tab-group .bpk-navigation-tab-icon{height:1rem;margin-inline-end:.5rem}.bpk-navigation-tab-group .bpk-navigation-tab-icon--surface-contrast{fill:#fff}.bpk-navigation-tab-group .bpk-navigation-tab-icon--canvas-default-selected{fill:#fff}

package/package.json

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