feat(plasma-b2c/web): add stretch prop and update test

salute-developers · Dec 21, 2023 · 6cb3f83 · 6cb3f83
1 parent 1bf8622
commit 6cb3f83
Show file tree

Hide file tree

Showing 10 changed files with 44 additions and 0 deletions.
diff --git a/...ents/Segment/Segment.component-test.tsx/plasma-web Segment -- _stretch.snap.png b/...ents/Segment/Segment.component-test.tsx/plasma-web Segment -- _stretch.snap.png
diff --git a/.../Segment.component-test.tsx/plasma-web Segment -- navigate with arrow`.snap.png b/.../Segment.component-test.tsx/plasma-web Segment -- navigate with arrow`.snap.png
diff --git a/...ents/Segment/Segment.component-test.tsx/plasma-web Segment -- _stretch.snap.png b/...ents/Segment/Segment.component-test.tsx/plasma-web Segment -- _stretch.snap.png
diff --git a/.../Segment.component-test.tsx/plasma-web Segment -- navigate with arrow`.snap.png b/.../Segment.component-test.tsx/plasma-web Segment -- navigate with arrow`.snap.png
diff --git a/packages/plasma-b2c/src/components/Segment/Segment.component-test.tsx b/packages/plasma-b2c/src/components/Segment/Segment.component-test.tsx
@@ -152,6 +152,24 @@ describe('plasma-web: Segment', () => {
         cy.matchImageSnapshot();
     });
 
+    it('_stretch', () => {
+        mount(
+            <CypressTestDecorator>
+                <SegmentProvider>
+                    <SegmentGroup view="filled" stretch filledBackground>
+                        <SegmentItem value="segment_1" label="Segment 1" view="default" />
+                        <SegmentItem value="segment_2" label="Segment 2" view="default" />
+                        <SegmentItem value="segment_3" label="Segment 3" view="default" />
+                    </SegmentGroup>
+                </SegmentProvider>
+            </CypressTestDecorator>,
+        );
+
+        cy.get('button').contains('Segment 1').click();
+
+        cy.matchImageSnapshot();
+    });
+
     it('_size', () => {
         mount(
             <CypressTestDecorator>

diff --git a/packages/plasma-b2c/src/components/Segment/Segment.stories.tsx b/packages/plasma-b2c/src/components/Segment/Segment.stories.tsx
@@ -100,6 +100,7 @@ export const Default: StoryObj<StorySegmentProps> = {
         pilled: false,
         filledBackground: false,
         disabled: false,
+        stretch: false,
     },
     render: (args) => <StoryDefault {...args} />,
 };
diff --git a/packages/plasma-b2c/src/components/Segment/SegmentGroup.config.ts b/packages/plasma-b2c/src/components/Segment/SegmentGroup.config.ts
@@ -57,5 +57,8 @@ export const config = {
                 ${segmentTokens.groupFilledBackgroundColor}: var(--plasma-colors-surface-liquid01);
             `,
         },
+        stretch: {
+            true: css``,
+        },
     },
 };
diff --git a/packages/plasma-web/src/components/Segment/Segment.component-test.tsx b/packages/plasma-web/src/components/Segment/Segment.component-test.tsx
@@ -164,6 +164,24 @@ describe('plasma-web: Segment', () => {
         cy.matchImageSnapshot();
     });
 
+    it('_stretch', () => {
+        mount(
+            <CypressTestDecorator>
+                <SegmentProvider>
+                    <SegmentGroup view="filled" stretch filledBackground>
+                        <SegmentItem value="segment_1" label="Segment 1" view="default" />
+                        <SegmentItem value="segment_2" label="Segment 2" view="default" />
+                        <SegmentItem value="segment_3" label="Segment 3" view="default" />
+                    </SegmentGroup>
+                </SegmentProvider>
+            </CypressTestDecorator>,
+        );
+
+        cy.get('button').contains('Segment 1').click();
+
+        cy.matchImageSnapshot();
+    });
+
     it('_size', () => {
         mount(
             <CypressTestDecoratorWithTypo>

diff --git a/packages/plasma-web/src/components/Segment/Segment.stories.tsx b/packages/plasma-web/src/components/Segment/Segment.stories.tsx
@@ -100,6 +100,7 @@ export const Default: StoryObj<StorySegmentProps> = {
         pilled: false,
         filledBackground: false,
         disabled: false,
+        stretch: false,
     },
     render: (args) => <StoryDefault {...args} />,
 };
diff --git a/packages/plasma-web/src/components/Segment/SegmentGroup.config.ts b/packages/plasma-web/src/components/Segment/SegmentGroup.config.ts
@@ -57,5 +57,8 @@ export const config = {
                 ${segmentTokens.groupFilledBackgroundColor}: var(--plasma-colors-surface-liquid01);
             `,
         },
+        stretch: {
+            true: css``,
+        },
     },
 };