Introduce accent for chips (#911)

* Introduce accent for chips

* Add top bar on Mobile on Settings pages

* Various fixes

* Fix according to peer review

front/src/modules/ui/chip/components/Chip.tsx

@@ -8,6 +8,11 @@ export enum ChipSize {
   Small = 'small',
 }
 
+export enum ChipAccent {
+  TextPrimary = 'text-primary',
+  TextSecondary = 'text-secondary',
+}
+
 export enum ChipVariant {
   Highlighted = 'highlighted',
   Regular = 'regular',
@@ -21,6 +26,7 @@ type OwnProps = {
   label: string;
   maxWidth?: string;
   variant?: ChipVariant;
+  accent?: ChipAccent;
   leftComponent?: React.ReactNode;
   rightComponent?: React.ReactNode;
   className?: string;
@@ -34,14 +40,18 @@ const StyledContainer = styled.div<Partial<OwnProps>>`
       ? theme.background.transparent.light
       : 'transparent'};
   border-radius: ${({ theme }) => theme.border.radius.sm};
-  color: ${({ theme, disabled }) =>
-    disabled ? theme.font.color.light : theme.font.color.primary};
+  color: ${({ theme, disabled, accent }) =>
+    disabled
+      ? theme.font.color.light
+      : accent === ChipAccent.TextPrimary
+      ? theme.font.color.primary
+      : theme.font.color.secondary};
   cursor: ${({ clickable, disabled, variant }) =>
     disabled || variant === ChipVariant.Transparent
-      ? 'auto'
+      ? 'inherit'
       : clickable
       ? 'pointer'
-      : 'auto'};
+      : 'inherit'};
   display: inline-flex;
   gap: ${({ theme }) => theme.spacing(1)};
 
@@ -98,6 +108,7 @@ export function Chip({
   variant = ChipVariant.Regular,
   leftComponent,
   rightComponent,
+  accent = ChipAccent.TextPrimary,
   maxWidth,
   className,
 }: OwnProps) {
@@ -106,9 +117,11 @@ export function Chip({
       data-testid="chip"
       clickable={clickable}
       variant={variant}
+      accent={accent}
       size={size}
       disabled={disabled}
       className={className}
+      maxWidth={maxWidth}
     >
       {leftComponent}
       <StyledLabel>

front/src/modules/ui/chip/components/EntityChip.tsx

@@ -12,14 +12,21 @@ type OwnProps = {
   name: string;
   pictureUrl?: string;
   avatarType?: AvatarType;
+  variant?: EntityChipVariant;
 };
 
+export enum EntityChipVariant {
+  Regular = 'regular',
+  Transparent = 'transparent',
+}
+
 export function EntityChip({
   linkToEntity,
   entityId,
   name,
   pictureUrl,
   avatarType = 'rounded',
+  variant = EntityChipVariant.Regular,
 }: OwnProps) {
   const navigate = useNavigate();
 
@@ -35,7 +42,13 @@ export function EntityChip({
     <div onClick={handleLinkClick}>
       <Chip
         label={name}
-        variant={linkToEntity ? ChipVariant.Highlighted : ChipVariant.Regular}
+        variant={
+          linkToEntity
+            ? variant === EntityChipVariant.Regular
+              ? ChipVariant.Highlighted
+              : ChipVariant.Regular
+            : ChipVariant.Transparent
+        }
         leftComponent={
           <Avatar
             avatarUrl={pictureUrl}

front/src/modules/ui/chip/components/__stories__/Chip.stories.tsx

@@ -3,7 +3,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
 import { ExhaustiveComponentDecorator } from '~/testing/decorators/ExhaustiveComponentDecorator';
 
-import { Chip, ChipSize, ChipVariant } from '../Chip';
+import { Chip, ChipAccent, ChipSize, ChipVariant } from '../Chip';
 
 const meta: Meta<typeof Chip> = {
   title: 'UI/Chip/Chip',
@@ -18,13 +18,15 @@ export const Default: Story = {
     label: 'Chip test',
     size: ChipSize.Small,
     variant: ChipVariant.Highlighted,
+    accent: ChipAccent.TextPrimary,
+    disabled: false,
     clickable: true,
     maxWidth: '200px',
   },
   decorators: [ComponentDecorator],
 };
 
-export const All: Story = {
+export const Catalog: Story = {
   args: { size: ChipSize.Large, clickable: true, label: 'Hello' },
   argTypes: {
     size: { control: false },
@@ -42,6 +44,7 @@ export const All: Story = {
       ChipVariant.Transparent,
     ],
     sizes: [ChipSize.Small, ChipSize.Large],
+    accents: [ChipAccent.TextPrimary, ChipAccent.TextSecondary],
     states: ['default', 'hover', 'active', 'disabled'],
   },
   decorators: [ExhaustiveComponentDecorator],