[NO JIRA]: Update Segmented control examples as per design request an…

…d docs (#3507)
Skyscanner · Jun 21, 2024 · d5923d8 · d5923d8
1 parent 5cb2747
commit d5923d8
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 10 deletions.
diff --git a/examples/bpk-component-segmented-control/examples.tsx b/examples/bpk-component-segmented-control/examples.tsx
@@ -17,8 +17,8 @@
  */
 
 import {
-  privateSegmentedControlCanvasDefaultDay,
-  privateSegmentedControlSurfaceContrastDay,
+  canvasContrastDay,
+  surfaceContrastDay
 } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
 
 import BpkSegmentedControl from '../../packages/bpk-component-segmented-control';
@@ -27,16 +27,12 @@ import { SEGMENT_TYPES } from '../../packages/bpk-component-segmented-control/sr
 import { BpkDarkExampleWrapper } from '../bpk-storybook-utils';
 
 const canvasDefaultWrapperStyle = {
-  display: 'flex',
-  maxWidth: '500px',
-  backgroundColor: privateSegmentedControlCanvasDefaultDay,
+  backgroundColor: canvasContrastDay,
   padding: '2rem',
 };
 
 const surfaceContrastWrapperStyle = {
-  display: 'flex',
-  maxWidth: '500px',
-  backgroundColor: privateSegmentedControlSurfaceContrastDay,
+  backgroundColor: surfaceContrastDay,
   padding: '2rem',
 };
 
@@ -118,7 +114,7 @@ const allButtonContent = [
 ];
 
 const ComplexSurfaceContrast = () => (
-  <BpkDarkExampleWrapper padded style={{ display: 'flex' }}>
+  <BpkDarkExampleWrapper padded>
     <BpkSegmentedControl
       buttonContents={allButtonContent}
       onItemClick={() => {}}
@@ -139,6 +135,31 @@ const ComplexSurfaceDefault = () => (
   />
 );
 
+const ComplexCanvasContrast = () => (
+  <BpkDarkExampleWrapper
+    padded
+    style={{ backgroundColor: canvasContrastDay }}
+  >
+    <BpkSegmentedControl
+      buttonContents={allButtonContent}
+      onItemClick={() => {}}
+      selectedIndex={1}
+      type={SEGMENT_TYPES.CanvasContrast}
+      shadow
+    />
+  </BpkDarkExampleWrapper>
+);
+
+const ComplexCanvasDefault = () => (
+  <BpkSegmentedControl
+    buttonContents={allButtonContent}
+    onItemClick={() => {}}
+    selectedIndex={1}
+    type={SEGMENT_TYPES.CanvasDefault}
+    shadow
+  />
+);
+
 const ComplexSurfaceDefaultNoShadow = () => (
   <BpkSegmentedControl
     buttonContents={allButtonContent}
@@ -148,12 +169,27 @@ const ComplexSurfaceDefaultNoShadow = () => (
   />
 );
 
+const VisualExample = () => (
+  <>
+    <ComplexCanvasDefault />
+    <br />
+    <ComplexCanvasContrast />
+    <br />
+    <ComplexSurfaceDefault />
+    <br />
+    <ComplexSurfaceContrast />
+  </>
+);
+
 export {
   SimpleDefault,
   SimpleCanvasContrast,
   SimpleSurfaceDefault,
   SimpleSurfaceContrast,
   ComplexSurfaceContrast,
   ComplexSurfaceDefault,
+  ComplexCanvasContrast,
+  ComplexCanvasDefault,
   ComplexSurfaceDefaultNoShadow,
+  VisualExample,
 };
diff --git a/examples/bpk-component-segmented-control/stories.tsx b/examples/bpk-component-segmented-control/stories.tsx
@@ -25,7 +25,10 @@ import {
   SimpleSurfaceContrast,
   ComplexSurfaceContrast,
   ComplexSurfaceDefault,
+  ComplexCanvasContrast,
+  ComplexCanvasDefault,
   ComplexSurfaceDefaultNoShadow,
+  VisualExample
 } from './examples';
 
 export default {
@@ -39,9 +42,11 @@ export const SimpleFourSegmentsSurfaceDefault = SimpleSurfaceDefault;
 export const SimpleFourSegmentsSurfaceContrast = SimpleSurfaceContrast;
 export const ComplexThreeSegmentsSurfaceContrast = ComplexSurfaceContrast;
 export const ComplexThreeSegmentsSurfaceDefault = ComplexSurfaceDefault;
+export const ComplexThreeSegmentsCanvasContrast = ComplexCanvasContrast;
+export const ComplexThreeSegmentsCanvasDefault = ComplexCanvasDefault;
 export const ComplexThreeSegmentsSurfaceDefaultNoShadow =
   ComplexSurfaceDefaultNoShadow;
-export const VisualTest = ComplexSurfaceDefault;
+export const VisualTest = VisualExample;
 export const VisualTestWithZoom = {
   render: VisualTest,
   args: {