[PANGOO-2516][BpkNavigationTabGroup] Add Navigation-tab-group compone…

…nt (#3599) [PANGOO-2516][BpkNavigationTabGroup] Add Navigation-tab-group component (#3599) * add Navigation-tab-group * modify READ.md * update css style * add arialabel props and modify test case * use bpk-private-navigation-tab-hover-day * fix text wrap --------- Co-authored-by: Kerrie Wu <kerrie.wu@skyscanner.net>
Skyscanner · Sep 6, 2024 · 6c63d61 · 6c63d61
1 parent 4a9e3a3
commit 6c63d61
Show file tree

Hide file tree

Showing 10 changed files with 831 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -63,6 +63,7 @@ To contribute please see [contributing.md](CONTRIBUTING.md).
 [`bpk-component-mobile-scroll-container`](/packages/bpk-component-mobile-scroll-container)
 [`bpk-component-modal`](/packages/bpk-component-modal)
 [`bpk-component-navigation-bar`](/packages/bpk-component-navigation-bar)
+[`bpk-component-navigation-tab-group`](packages/bpk-component-navigation-tab-group)
 [`bpk-component-nudger`](/packages/bpk-component-nudger)
 [`bpk-component-page-indicator`](/packages/bpk-component-page-indicator)
 [`bpk-component-pagination`](/packages/bpk-component-pagination)

diff --git a/examples/bpk-component-navigation-tab-group/examples.module.scss b/examples/bpk-component-navigation-tab-group/examples.module.scss
@@ -0,0 +1,31 @@
+/*
+ * 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.
+ */
+
+@use '../../packages/unstable__bpk-mixins/tokens';
+
+.bpk-navigation-tab-group-story {
+  padding: tokens.bpk-spacing-base();
+  background-color: tokens.$bpk-core-primary-day;
+
+  &__mixed-container {
+    h3 {
+      margin-top: tokens.bpk-spacing-xl();
+      margin-bottom: tokens.bpk-spacing-md();
+    }
+  }
+}
diff --git a/examples/bpk-component-navigation-tab-group/examples.tsx b/examples/bpk-component-navigation-tab-group/examples.tsx
@@ -0,0 +1,223 @@
+/*
+ * 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 { withRtlSupport } from '../../packages/bpk-component-icon';
+import Car from '../../packages/bpk-component-icon/sm/cars';
+import Explore from '../../packages/bpk-component-icon/sm/explore';
+import Flight from '../../packages/bpk-component-icon/sm/flight';
+import Hotel from '../../packages/bpk-component-icon/sm/hotels';
+import BpkNavigationTabGroup from '../../packages/bpk-component-navigation-tab-group';
+import { NAVIGATION_TAB_GROUP_TYPES } from '../../packages/bpk-component-navigation-tab-group/src/BpkNavigationTabGroup';
+import BpkText, { TEXT_STYLES } from '../../packages/bpk-component-text';
+import { cssModules } from '../../packages/bpk-react-utils';
+
+import type { BpkNavigationTabGroupProps } from '../../packages/bpk-component-navigation-tab-group';
+
+import STYLES from './examples.module.scss';
+
+const getClassNames = cssModules(STYLES);
+
+const exploreIcons = withRtlSupport(Explore);
+
+const hotelIcons = withRtlSupport(Hotel);
+
+const carIcons = withRtlSupport(Car);
+
+const flightIcons = withRtlSupport(Flight);
+
+const tabs: BpkNavigationTabGroupProps['tabs'] = [
+  { text: 'Flights', href: '/' },
+  { text: 'Hotels', href: '/hotel' },
+  { text: 'Car hire', href: '/carhire' },
+  { text: 'Explore', href: '/Explore' },
+];
+
+const tabsWithIcon: BpkNavigationTabGroupProps['tabs'] = [
+  { text: 'Flights', href: '/', icon: flightIcons },
+  { text: 'Hotels', href: '/hotel', icon: hotelIcons },
+  { text: 'Car hire', href: '/carhire', icon: carIcons },
+  { text: 'Explore', href: '/Explore', icon: exploreIcons },
+];
+
+const tabsNoHref: BpkNavigationTabGroupProps['tabs'] = [
+  { text: 'Flights', icon: flightIcons },
+  { text: 'Hotels', icon: hotelIcons },
+  { text: 'Car hire', icon: carIcons },
+  { text: 'Explore', icon: exploreIcons },
+];
+
+const tabsOnlyText: BpkNavigationTabGroupProps['tabs'] = [
+  { text: 'Flights'},
+  { text: 'Hotels' },
+  { text: 'Car hire'},
+  { text: 'Explore'},
+];
+
+// Simple Navigation Tab Group
+const SimpleSurfaceContrast = () => (
+  <div className={getClassNames('bpk-navigation-tab-group-story')}>
+    <BpkNavigationTabGroup
+      tabs={tabs}
+      onItemClick={() => {}}
+      selectedIndex={2}
+      type={NAVIGATION_TAB_GROUP_TYPES.SurfaceContrast}
+      ariaLabel="Navigation tabs"
+    />
+  </div>
+);
+
+// Simple Navigation Tab Group Canvas Default
+const SimpleCanvasDefault = () => (
+  <div
+    className={getClassNames('bpk-navigation-tab-group-story__canvas-default')}
+  >
+    <BpkNavigationTabGroup
+      tabs={tabs}
+      onItemClick={() => {}}
+      selectedIndex={0}
+      type={NAVIGATION_TAB_GROUP_TYPES.CanvasDefault}
+      ariaLabel="Navigation tabs"
+    />
+  </div>
+);
+// With Icon Navigation Tab Group
+const WithIconSurfaceContrastForExample = () => (
+  <div className={getClassNames('bpk-navigation-tab-group-story')}>
+    <BpkNavigationTabGroup
+      tabs={tabsWithIcon}
+      onItemClick={() => {}}
+      selectedIndex={0}
+      type={NAVIGATION_TAB_GROUP_TYPES.SurfaceContrast}
+      ariaLabel="Navigation tabs"
+    />
+  </div>
+);
+
+// With Icon Navigation Tab Group
+const WithIconCanvasDefaultForExample = () => (
+  <div>
+    <BpkNavigationTabGroup
+      tabs={tabsWithIcon}
+      onItemClick={() => {}}
+      selectedIndex={0}
+      type={NAVIGATION_TAB_GROUP_TYPES.CanvasDefault}
+      ariaLabel="Navigation tabs"
+    />
+  </div>
+);
+
+// Tabs No Href SurfaceContrast Navigation Tab Group
+const TabsNoHrefSurfaceContrastForExample = () => (
+  <div className={getClassNames('bpk-navigation-tab-group-story')}>
+  <BpkNavigationTabGroup
+    tabs={tabsNoHref}
+    onItemClick={() => {}}
+    selectedIndex={0}
+    type={NAVIGATION_TAB_GROUP_TYPES.SurfaceContrast}
+    ariaLabel="Navigation tabs"
+  />
+</div>
+);
+
+// Tabs No Href CanvasDefault Navigation Tab Group
+const TabsNoHrefCanvasDefaultForExample = () => (
+  <div>
+    <BpkNavigationTabGroup
+      tabs={tabsNoHref}
+      onItemClick={() => {}}
+      selectedIndex={0}
+      type={NAVIGATION_TAB_GROUP_TYPES.CanvasDefault}
+      ariaLabel="Navigation tabs"
+    />
+  </div>
+);
+
+// Tabs Only Text SurfaceContrast Navigation Tab Group
+const TabsOnlyTextSurfaceContrastForExample = () => (
+  <div className={getClassNames('bpk-navigation-tab-group-story')}>
+  <BpkNavigationTabGroup
+    tabs={tabsOnlyText}
+    onItemClick={() => {}}
+    selectedIndex={0}
+    type={NAVIGATION_TAB_GROUP_TYPES.SurfaceContrast}
+    ariaLabel="Navigation tabs"
+  />
+</div>
+);
+
+// Tabs Only Text CanvasDefault Navigation Tab Group
+const TabsOnlyTextCanvasDefaultForExample = () => (
+  <div>
+    <BpkNavigationTabGroup
+      tabs={tabsOnlyText}
+      onItemClick={() => {}}
+      selectedIndex={0}
+      type={NAVIGATION_TAB_GROUP_TYPES.CanvasDefault}
+      ariaLabel="Navigation tabs"
+    />
+  </div>
+);
+
+const VisualTestExample = () => (
+  <div className={getClassNames('bpk-navigation-tab-group-story__mixed-container')}>
+    <BpkText textStyle={TEXT_STYLES.heading3} tagName="h3">
+      Simple SurfaceContrast
+    </BpkText>
+    <SimpleSurfaceContrast />
+    <BpkText textStyle={TEXT_STYLES.heading3} tagName="h3">
+      Only Text SurfaceContrast
+    </BpkText>
+    <TabsOnlyTextSurfaceContrastForExample />
+    <BpkText textStyle={TEXT_STYLES.heading3} tagName="h3">
+      With Icon SurfaceContrast
+    </BpkText>
+    <WithIconSurfaceContrastForExample />
+    <BpkText textStyle={TEXT_STYLES.heading3} tagName="h3">
+      No Href SurfaceContrast
+    </BpkText>
+    <TabsNoHrefSurfaceContrastForExample />
+    <BpkText textStyle={TEXT_STYLES.heading3} tagName="h3">
+      Simple CanvasDefault
+    </BpkText>
+    <SimpleCanvasDefault />
+    <BpkText textStyle={TEXT_STYLES.heading3} tagName="h3">
+      Only Text CanvasDefault
+    </BpkText>
+    <TabsOnlyTextCanvasDefaultForExample />
+    <BpkText textStyle={TEXT_STYLES.heading3} tagName="h3">
+      With Icon CanvasDefault
+    </BpkText>
+    <WithIconCanvasDefaultForExample />
+    <BpkText textStyle={TEXT_STYLES.heading3} tagName="h3">
+      No Href CanvasDefault
+    </BpkText>
+    <TabsNoHrefCanvasDefaultForExample />
+    <br />
+  </div>
+);
+
+export {
+  SimpleSurfaceContrast,
+  SimpleCanvasDefault,
+  WithIconSurfaceContrastForExample,
+  WithIconCanvasDefaultForExample,
+  TabsNoHrefSurfaceContrastForExample,
+  TabsNoHrefCanvasDefaultForExample,
+  TabsOnlyTextSurfaceContrastForExample,
+  TabsOnlyTextCanvasDefaultForExample,
+  VisualTestExample,
+};
diff --git a/examples/bpk-component-navigation-tab-group/stories.tsx b/examples/bpk-component-navigation-tab-group/stories.tsx
@@ -0,0 +1,61 @@
+/*
+ * 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 '../../packages/bpk-component-navigation-tab-group';
+
+import {
+  SimpleSurfaceContrast,
+  SimpleCanvasDefault,
+  WithIconSurfaceContrastForExample,
+  WithIconCanvasDefaultForExample,
+  TabsNoHrefSurfaceContrastForExample,
+  TabsNoHrefCanvasDefaultForExample,
+  TabsOnlyTextSurfaceContrastForExample,
+  TabsOnlyTextCanvasDefaultForExample,
+  VisualTestExample,
+} from './examples';
+
+export default {
+  title: 'bpk-component-navigation-tab-group',
+  component: BpkNavigationTabGroup,
+};
+
+export const SurfaceContrast = SimpleSurfaceContrast;
+
+export const TabsNoHrefSurfaceContrast = TabsNoHrefSurfaceContrastForExample;
+
+export const TabsNoHrefCanvasDefault =TabsNoHrefCanvasDefaultForExample
+
+export const CanvasDefault = SimpleCanvasDefault;
+
+export const WithIconSurfaceContrast = WithIconSurfaceContrastForExample;
+
+export const WithIconCanvasDefault = WithIconCanvasDefaultForExample;
+
+export const OnlyTextSurfaceContrast = TabsOnlyTextSurfaceContrastForExample;
+
+export const OnlyTextCanvasDefault = TabsOnlyTextCanvasDefaultForExample;
+
+export const VisualTest = VisualTestExample;
+
+export const VisualTestWithZoom = {
+  render: VisualTest,
+  args: {
+    zoomEnabled: true
+  }
+}
diff --git a/packages/bpk-component-navigation-tab-group/README.md b/packages/bpk-component-navigation-tab-group/README.md
@@ -0,0 +1,53 @@
+# bpk-component-navigation-tab-group
+
+> Backpack navigation tab group component.
+
+## Installation
+
+Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a complete installation guide.
+
+## Usage
+
+### BpkNavigationTabGroup
+
+This is a NavigationTab Group that only allows a single tab to be `selected`, determined by the `selectedIndex` prop. State of selected tab should be managed using the `onItemClick` prop.
+
+```tsx
+import { withRtlSupport } from '../../packages/bpk-component-icon';
+import Car from '../../packages/bpk-component-icon/sm/cars';
+import Explore from '../../packages/bpk-component-icon/sm/explore';
+import Flight from '../../packages/bpk-component-icon/sm/flight';
+import Hotel from '../../packages/bpk-component-icon/sm/hotels';
+import BpkNavigationTabGroup from '../../packages/bpk-component-navigation-tab-group';
+import { NAVIGATION_TAB_GROUP_TYPES } from '../../packages/bpk-component-navigation-tab-group/src/BpkNavigationTabGroup';
+import type { BpkNavigationTabGroupProps } from '../../packages/bpk-component-navigation-tab-group';
+
+const exploreIcons = withRtlSupport(Explore);
+
+const hotelIcons = withRtlSupport(Hotel);
+
+const carIcons = withRtlSupport(Car);
+
+const flightIcons = withRtlSupport(Flight);
+
+const tabs: BpkNavigationTabGroupProps['tabs'] = [
+  { text: 'Flights', href: '/', icon: flightIcons },
+  { text: 'Hotels', href: '/hotel', icon: hotelIcons },
+  { text: 'Car hire', href: '/carhire', icon: carIcons },
+  { text: 'Explore', href: '/Explore', icon: exploreIcons },
+];
+
+export default () => (
+  <BpkNavigationTabGroup
+    tabs={tabs}
+    onItemClick={() => {}}
+    selectedIndex={0}
+    type={NAVIGATION_TAB_GROUP_TYPES.SurfaceContrast}
+    ariaLabel="Navigation tabs"
+  />
+);
+```
+
+## Props
+
+Check out the full list of props on Skyscanner's [design system documentation website](https://www.skyscanner.design/latest/components/navigation-tab-group/web-4eQsMvYv).