Skip to content

Commit

Permalink
feat(plasma-*,sdds-*): add accent view to SegmentItem
Browse files Browse the repository at this point in the history
  • Loading branch information
@TitanKuzmich
TitanKuzmich committed Feb 24, 2025
1 parent b7a8c8d commit 73f7044
Show file tree
Hide file tree
Showing 16 changed files with 112 additions and 14 deletions.
Binary file modified ...ponents/Segment/Segment.component-test.tsx/plasma-web Segment -- _view.snap.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...ponents/Segment/Segment.component-test.tsx/plasma-web Segment -- _view.snap.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
9 changes: 5 additions & 4 deletions packages/plasma-b2c/src/components/Segment/Segment.component-test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,11 +61,12 @@ describe('plasma-web: Segment', () => {
</SegmentGroup>
</SegmentProvider>
<PadMe />
<SegmentProvider>
<SegmentGroup view="filled" clip>
<SegmentProvider defaultSelected={['segment_1', 'segment_2', 'segment_3', 'segment_4']}>
<SegmentGroup view="filled" selectionMode="multiple" clip>
<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" />
<SegmentItem value="segment_2" label="Segment 2" view="accent" />
<SegmentItem value="segment_3" label="Segment 3" view="secondary" />
<SegmentItem value="segment_3" label="Segment 3" view="clear" />
</SegmentGroup>
</SegmentProvider>
</CypressTestDecoratorWithTypo>,
Expand Down
2 changes: 1 addition & 1 deletion packages/plasma-b2c/src/components/Segment/Segment.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ import { SegmentProvider } from '.';
const contentLeftOptions = ['none', 'icon'];
const contentRightOptions = ['none', 'text', 'counter', 'icon'];

const segmentItemViews = ['default', 'secondary'];
const segmentItemViews = ['clear', 'default', 'secondary', 'accent'];
type Size = typeof sizes[number];

type CustomStoryProps = {
Expand Down
16 changes: 16 additions & 0 deletions packages/plasma-b2c/src/components/Segment/SegmentItem.config.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,22 @@ export const config = {
${segmentTokens.outlineFocusColor}: var(--text-accent);
`,
accent: css`
${segmentTokens.itemColor}: var(--text-primary);
${segmentTokens.itemBackgroundColor}: transparent;
${segmentTokens.itemColorHover}: var(--text-primary-hover);
${segmentTokens.itemBackgroundColorHover}: transparent;
${segmentTokens.itemAdditionalColor}: var(--text-secondary);
${segmentTokens.itemAdditionalColorHover}: var(--text-secondary);
${segmentTokens.itemSelectedColor}: var(--inverse-text-primary);
${segmentTokens.itemSelectedBackgroundColor}: var(--surface-accent);
${segmentTokens.itemSelectedColorHover}: var(--inverse-text-primary-hover);
${segmentTokens.itemSelectedBackgroundColorHover}: var(--surface-accent);
${segmentTokens.itemSelectedAdditionalColor}: var(--inverse-text-secondary);
${segmentTokens.itemSelectedAdditionalColorHover}: var(--inverse-text-secondary);
${segmentTokens.groupFilledBackgroundColor}: var(--text-accent);
`,
},
size: {
xs: css`
Expand Down
2 changes: 1 addition & 1 deletion packages/plasma-giga/src/components/Segment/Segment.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ import { SegmentProvider } from '.';
const contentLeftOptions = ['none', 'icon'];
const contentRightOptions = ['none', 'text', 'counter', 'icon'];

const segmentItemViews = ['default', 'secondary'];
const segmentItemViews = ['clear', 'default', 'secondary', 'accent'];
type Size = typeof sizes[number];

type CustomStoryProps = {
Expand Down
16 changes: 16 additions & 0 deletions packages/plasma-giga/src/components/Segment/SegmentItem.config.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,22 @@ export const config = {
${segmentTokens.itemSelectedAdditionalColor}: var(--inverse-text-secondary);
${segmentTokens.itemSelectedAdditionalColorHover}: var(--inverse-text-secondary);
${segmentTokens.groupFilledBackgroundColor}: var(--text-accent);
`,
accent: css`
${segmentTokens.itemColor}: var(--text-primary);
${segmentTokens.itemBackgroundColor}: transparent;
${segmentTokens.itemColorHover}: var(--text-primary-hover);
${segmentTokens.itemBackgroundColorHover}: transparent;
${segmentTokens.itemAdditionalColor}: var(--text-secondary);
${segmentTokens.itemAdditionalColorHover}: var(--text-secondary);
${segmentTokens.itemSelectedColor}: var(--inverse-text-primary);
${segmentTokens.itemSelectedBackgroundColor}: var(--surface-accent);
${segmentTokens.itemSelectedColorHover}: var(--inverse-text-primary-hover);
${segmentTokens.itemSelectedBackgroundColorHover}: var(--surface-accent);
${segmentTokens.itemSelectedAdditionalColor}: var(--inverse-text-secondary);
${segmentTokens.itemSelectedAdditionalColorHover}: var(--inverse-text-secondary);
${segmentTokens.groupFilledBackgroundColor}: var(--text-accent);
`,
},
Expand Down
9 changes: 5 additions & 4 deletions packages/plasma-web/src/components/Segment/Segment.component-test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,11 +61,12 @@ describe('plasma-web: Segment', () => {
</SegmentGroup>
</SegmentProvider>
<PadMe />
<SegmentProvider>
<SegmentGroup view="filled" clip>
<SegmentProvider defaultSelected={['segment_1', 'segment_2', 'segment_3', 'segment_4']}>
<SegmentGroup view="filled" selectionMode="multiple" clip>
<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" />
<SegmentItem value="segment_2" label="Segment 2" view="accent" />
<SegmentItem value="segment_3" label="Segment 3" view="secondary" />
<SegmentItem value="segment_3" label="Segment 3" view="clear" />
</SegmentGroup>
</SegmentProvider>
</CypressTestDecoratorWithTypo>,
Expand Down
2 changes: 1 addition & 1 deletion packages/plasma-web/src/components/Segment/Segment.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ import { SegmentProvider } from '.';
const contentLeftOptions = ['none', 'icon'];
const contentRightOptions = ['none', 'text', 'counter', 'icon'];

const segmentItemViews = ['default', 'secondary'];
const segmentItemViews = ['clear', 'default', 'secondary', 'accent'];
type Size = typeof sizes[number];

type CustomStoryProps = {
Expand Down
16 changes: 16 additions & 0 deletions packages/plasma-web/src/components/Segment/SegmentItem.config.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,22 @@ export const config = {
${segmentTokens.outlineFocusColor}: var(--text-accent);
`,
accent: css`
${segmentTokens.itemColor}: var(--text-primary);
${segmentTokens.itemBackgroundColor}: transparent;
${segmentTokens.itemColorHover}: var(--text-primary-hover);
${segmentTokens.itemBackgroundColorHover}: transparent;
${segmentTokens.itemAdditionalColor}: var(--text-secondary);
${segmentTokens.itemAdditionalColorHover}: var(--text-secondary);
${segmentTokens.itemSelectedColor}: var(--inverse-text-primary);
${segmentTokens.itemSelectedBackgroundColor}: var(--surface-accent);
${segmentTokens.itemSelectedColorHover}: var(--inverse-text-primary-hover);
${segmentTokens.itemSelectedBackgroundColorHover}: var(--surface-accent);
${segmentTokens.itemSelectedAdditionalColor}: var(--inverse-text-secondary);
${segmentTokens.itemSelectedAdditionalColorHover}: var(--inverse-text-secondary);
${segmentTokens.groupFilledBackgroundColor}: var(--text-accent);
`,
},
size: {
xs: css`
Expand Down
2 changes: 1 addition & 1 deletion packages/sdds-dfa/src/components/Segment/Segment.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ import { SegmentProvider } from '.';
const contentLeftOptions = ['none', 'icon'];
const contentRightOptions = ['none', 'text', 'counter', 'icon'];

const segmentItemViews = ['default', 'secondary'];
const segmentItemViews = ['default', 'secondary', 'accent'];
type Size = typeof sizes[number];

type CustomStoryProps = {
Expand Down
16 changes: 16 additions & 0 deletions packages/sdds-dfa/src/components/Segment/SegmentItem.config.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,22 @@ export const config = {
${segmentTokens.outlineFocusColor}: var(--text-accent);
`,
accent: css`
${segmentTokens.itemColor}: var(--text-primary);
${segmentTokens.itemBackgroundColor}: transparent;
${segmentTokens.itemColorHover}: var(--text-primary-hover);
${segmentTokens.itemBackgroundColorHover}: transparent;
${segmentTokens.itemAdditionalColor}: var(--text-secondary);
${segmentTokens.itemAdditionalColorHover}: var(--text-secondary);
${segmentTokens.itemSelectedColor}: var(--inverse-text-primary);
${segmentTokens.itemSelectedBackgroundColor}: var(--surface-accent);
${segmentTokens.itemSelectedColorHover}: var(--inverse-text-primary-hover);
${segmentTokens.itemSelectedBackgroundColorHover}: var(--surface-accent);
${segmentTokens.itemSelectedAdditionalColor}: var(--inverse-text-secondary);
${segmentTokens.itemSelectedAdditionalColorHover}: var(--inverse-text-secondary);
${segmentTokens.groupFilledBackgroundColor}: var(--text-accent);
`,
},
size: {
xs: css`
Expand Down
2 changes: 1 addition & 1 deletion packages/sdds-finportal/src/components/Segment/Segment.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ import { SegmentProvider } from '.';
const contentLeftOptions = ['none', 'icon'];
const contentRightOptions = ['none', 'text', 'counter', 'icon'];

const segmentItemViews = ['default', 'secondary'];
const segmentItemViews = ['default', 'secondary', 'accent'];
type Size = typeof sizes[number];

type CustomStoryProps = {
Expand Down
16 changes: 16 additions & 0 deletions packages/sdds-finportal/src/components/Segment/SegmentItem.config.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,22 @@ export const config = {
${segmentTokens.itemSelectedAdditionalColor}: var(--inverse-text-secondary);
${segmentTokens.itemSelectedAdditionalColorHover}: var(--inverse-text-secondary);
${segmentTokens.groupFilledBackgroundColor}: var(--text-accent);
`,
accent: css`
${segmentTokens.itemColor}: var(--text-primary);
${segmentTokens.itemBackgroundColor}: transparent;
${segmentTokens.itemColorHover}: var(--text-primary-hover);
${segmentTokens.itemBackgroundColorHover}: transparent;
${segmentTokens.itemAdditionalColor}: var(--text-secondary);
${segmentTokens.itemAdditionalColorHover}: var(--text-secondary);
${segmentTokens.itemSelectedColor}: var(--inverse-text-primary);
${segmentTokens.itemSelectedBackgroundColor}: var(--surface-accent);
${segmentTokens.itemSelectedColorHover}: var(--inverse-text-primary-hover);
${segmentTokens.itemSelectedBackgroundColorHover}: var(--surface-accent);
${segmentTokens.itemSelectedAdditionalColor}: var(--inverse-text-secondary);
${segmentTokens.itemSelectedAdditionalColorHover}: var(--inverse-text-secondary);
${segmentTokens.groupFilledBackgroundColor}: var(--text-accent);
`,
},
Expand Down
2 changes: 1 addition & 1 deletion packages/sdds-serv/src/components/Segment/Segment.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ import { SegmentProvider } from '.';
const contentLeftOptions = ['none', 'icon'];
const contentRightOptions = ['none', 'text', 'counter', 'icon'];

const segmentItemViews = ['default', 'secondary'];
const segmentItemViews = ['default', 'secondary', 'accent'];
type Size = typeof sizes[number];

type CustomStoryProps = {
Expand Down
16 changes: 16 additions & 0 deletions packages/sdds-serv/src/components/Segment/SegmentItem.config.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,22 @@ export const config = {
${segmentTokens.itemSelectedAdditionalColor}: var(--inverse-text-secondary);
${segmentTokens.itemSelectedAdditionalColorHover}: var(--inverse-text-secondary);
${segmentTokens.groupFilledBackgroundColor}: var(--text-accent);
`,
accent: css`
${segmentTokens.itemColor}: var(--text-primary);
${segmentTokens.itemBackgroundColor}: transparent;
${segmentTokens.itemColorHover}: var(--text-primary-hover);
${segmentTokens.itemBackgroundColorHover}: transparent;
${segmentTokens.itemAdditionalColor}: var(--text-secondary);
${segmentTokens.itemAdditionalColorHover}: var(--text-secondary);
${segmentTokens.itemSelectedColor}: var(--inverse-text-primary);
${segmentTokens.itemSelectedBackgroundColor}: var(--surface-accent);
${segmentTokens.itemSelectedColorHover}: var(--inverse-text-primary-hover);
${segmentTokens.itemSelectedBackgroundColorHover}: var(--surface-accent);
${segmentTokens.itemSelectedAdditionalColor}: var(--inverse-text-secondary);
${segmentTokens.itemSelectedAdditionalColorHover}: var(--inverse-text-secondary);
${segmentTokens.groupFilledBackgroundColor}: var(--text-accent);
`,
},
Expand Down

0 comments on commit 73f7044

Please sign in to comment.