Merge pull request #20397 from akeneo/dsm-update-2024-02-19

Updates DSM

front-packages/akeneo-design-system/src/components/Dropdown/Item/Item.tsx

@@ -193,6 +193,7 @@ const Item = React.forwardRef<HTMLDivElement, ItemProps>(
         disabled={disabled}
         aria-disabled={disabled}
         isActive={isActive}
+        title={title}
         {...rest}
         ref={forwardedRef}
       >

front-packages/akeneo-design-system/src/components/Input/MultiSelectInput/ChipInput.tsx

@@ -24,7 +24,9 @@ const Container = styled.ul<AkeneoThemedProps & {invalid: boolean}>`
   }
 `;
 
-const Chip = styled.li<AkeneoThemedProps & {isSelected: boolean; readOnly: boolean; isErrored: boolean}>`
+const Chip = styled.li<
+  AkeneoThemedProps & {isSelected: boolean; readOnly: boolean; isErrored: boolean; isLocked: boolean}
+>`
   list-style-type: none;
   padding: 3px 15px;
   padding-left: ${({readOnly}) => (readOnly ? '15px' : '4px')};
@@ -35,8 +37,8 @@ const Chip = styled.li<AkeneoThemedProps & {isSelected: boolean; readOnly: boole
   align-items: center;
   height: 30px;
   box-sizing: border-box;
-  color: ${({readOnly, isErrored}) =>
-    isErrored ? getColor('red', 100) : readOnly ? getColor('grey', 100) : getColor('grey', 140)};
+  color: ${({readOnly, isErrored, isLocked}) =>
+    isErrored ? getColor('red', 100) : readOnly || isLocked ? getColor('grey', 100) : getColor('grey', 140)};
 `;
 
 const Input = styled.input`
@@ -76,6 +78,10 @@ const ReadOnlyIcon = styled(LockIcon)`
   color: ${getColor('grey', 100)};
 `;
 
+const LockedValueIcon = styled(LockIcon)`
+  padding-right: 5px;
+`;
+
 const RemoveButton = styled(IconButton)<AkeneoThemedProps & {isErrored: boolean}>`
   background-color: transparent;
   margin-left: -3px;
@@ -100,6 +106,7 @@ type ChipInputProps = {
   onRemove: (chipCode: string) => void;
   onSearchChange: (searchValue: string) => void;
   onFocus?: () => void;
+  lockedValues?: string[];
 };
 
 const ChipInput = React.forwardRef<HTMLInputElement, ChipInputProps>(
@@ -116,6 +123,7 @@ const ChipInput = React.forwardRef<HTMLInputElement, ChipInputProps>(
       onRemove,
       onSearchChange,
       onFocus,
+      lockedValues,
     }: ChipInputProps,
     forwardedRef: Ref<HTMLInputElement>
   ) => {
@@ -148,10 +156,11 @@ const ChipInput = React.forwardRef<HTMLInputElement, ChipInputProps>(
           <Chip
             key={chip.code}
             readOnly={readOnly}
+            isLocked={lockedValues?.includes(chip.code)}
             isErrored={invalidValue.includes(chip.code)}
             isSelected={index === value.length - 1 && isLastSelected}
           >
-            {!readOnly && (
+            {!readOnly && !lockedValues?.includes(chip.code) && (
               <RemoveButton
                 title={removeLabel}
                 ghost="borderless"
@@ -162,6 +171,7 @@ const ChipInput = React.forwardRef<HTMLInputElement, ChipInputProps>(
                 isErrored={invalidValue.includes(chip.code)}
               />
             )}
+            {lockedValues?.includes(chip.code) && <LockedValueIcon size={16} />}
             {chip.label}
           </Chip>
         ))}

front-packages/akeneo-design-system/src/components/Input/MultiSelectInput/MultiSelectInput.stories.mdx

@@ -102,6 +102,30 @@ The placeholder text provides tips or examples of items to enter. Placeholder te
   </Story>
 </Canvas>
 
+## Variation on locked values
+
+<Canvas>
+  <Story name="LockedValues">
+    {args => {
+      const [value, setValue] = useState(['en_US', 'fr_FR', 'de_DE']);
+      return (
+          <MultiSelectInput
+            value={value}
+            placeholder="Placeholder"
+            emptyResultLabel="No match found"
+            lockedValues={['en_US', 'fr_FR']}
+            onChange={setValue}
+          >
+            <MultiSelectInput.Option value="en_US">English (United States)</MultiSelectInput.Option>
+            <MultiSelectInput.Option value="fr_FR">French (France)</MultiSelectInput.Option>
+            <MultiSelectInput.Option value="de_DE">German (Germany)</MultiSelectInput.Option>
+            <MultiSelectInput.Option value="es_ES">Spanish (Spain)</MultiSelectInput.Option>
+          </MultiSelectInput>
+      );
+    }}
+  </Story>
+</Canvas>
+
 ## Variation on invalid
 
 <Canvas>

front-packages/akeneo-design-system/src/components/Input/MultiSelectInput/MultiSelectInput.tsx

@@ -146,6 +146,11 @@ type MultiMultiSelectInputProps = Override<
      */
     verticalPosition?: VerticalPosition;
 
+    /**
+     * Values that cannot be unselected
+     */
+    lockedValues?: string[];
+
     /**
      * Callback called when the user hit enter on the field.
      */
@@ -191,6 +196,7 @@ const MultiSelectInput = ({
   onNextPage,
   onSearchChange,
   disableInternalSearch = false,
+  lockedValues = [],
   'aria-labelledby': ariaLabelledby,
   ...rest
 }: MultiMultiSelectInputProps) => {
@@ -289,6 +295,7 @@ const MultiSelectInput = ({
           onSearchChange={handleSearch}
           onRemove={handleRemove}
           onFocus={handleFocus}
+          lockedValues={lockedValues}
         />
         {!readOnly && (
           <ActionContainer>

front-packages/akeneo-design-system/src/components/Input/MultiSelectInput/MultiSelectInput.unit.tsx

@@ -326,6 +326,26 @@ test('MultiSelectInput supports ...rest props', () => {
   expect(screen.getByTestId('my_value')).toBeInTheDocument();
 });
 
+test('MultiSelectInput supports locked values prop', () => {
+  const onChange = jest.fn();
+  render(
+    <MultiSelectInput
+      value={['fr_FR', 'en_US']}
+      data-testid="my_value"
+      removeLabel="Remove"
+      openLabel="Open"
+      emptyResultLabel="Empty result"
+      onChange={onChange}
+      lockedValues={['fr_FR']}
+    >
+      <MultiSelectInput.Option value="en_US">English</MultiSelectInput.Option>
+      <MultiSelectInput.Option value="fr_FR">French</MultiSelectInput.Option>
+      <MultiSelectInput.Option value="es_ES">Spanish</MultiSelectInput.Option>
+    </MultiSelectInput>
+  );
+  expect(screen.getByTestId('my_value')).toBeInTheDocument();
+});
+
 test('MultiSelectInput does not support duplicated options', () => {
   const mockConsole = jest.spyOn(console, 'error').mockImplementation();
   expect(() => {

front-packages/akeneo-design-system/src/components/KeyFigure/KeyFigure.stories.mdx

@@ -1,6 +1,7 @@
 import {Meta, Story, ArgsTable, Canvas} from '@storybook/addon-docs';
 import {KeyFigure, KeyFigureGrid} from './KeyFigure';
 import * as Icons from '../../icons';
+import {Tooltip} from '../Tooltip/Tooltip';
 
 <Meta
   title="Components/KeyFigure"
@@ -71,7 +72,10 @@ Key figures are used in dashboards to illustrate metrics.
             <KeyFigure.Figure>123</KeyFigure.Figure>
           </KeyFigure>
           <KeyFigure icon={React.createElement(Icons[args.icon])} title="Key figure 3">
-            <KeyFigure.Figure>456</KeyFigure.Figure>
+            <KeyFigure.Figure>
+              456
+              <Tooltip iconSize={16}>More informations on this figure</Tooltip>
+            </KeyFigure.Figure>
           </KeyFigure>
           <KeyFigure icon={React.createElement(Icons[args.icon])} title="Key figure 4">
             <KeyFigure.Figure label="Average:">789454</KeyFigure.Figure>

front-packages/akeneo-design-system/src/components/KeyFigure/KeyFigure.tsx

@@ -12,6 +12,8 @@ const FigureContainer = styled.div`
   color: ${getColor('brand', 100)};
   font-size: 16px;
   margin: 0 15px 0 3px;
+  display: flex;
+  align-items: center;
 
   :only-child {
     margin: 0;

front-packages/akeneo-design-system/src/components/ProgressBar/ProgressBar.tsx

@@ -14,11 +14,8 @@ const progressBarAnimation = keyframes`
 
 const Header = styled.div`
   display: flex;
-  align-items: stretch;
-  flex-direction: row;
   font-size: ${getFontSize('default')};
-  flex-flow: row wrap;
-  margin-bottom: -4px;
+  justify-content: space-between;
 `;
 
 const Title = styled.div`
@@ -27,24 +24,11 @@ const Title = styled.div`
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  max-width: 100%;
-  flex-grow: 1;
-  margin-bottom: 4px;
-
-  /* When header div is greater than 300px the flex-basic is negative, progress label is on same line */
-  /* When header div is lower than 300px the flex-basic is positive, progress label is move to new line */
-  flex-basis: calc((301px - 100%) * 999);
 `;
 
 const ProgressLabel = styled.div`
   color: ${getColor('grey', 120)};
-  flex-grow: 0;
-  flex-basis: auto;
-  flex-shrink: 1;
-  margin-bottom: 4px;
   white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
 `;
 
 const ProgressBarBackground = styled.div<{size: ProgressBarSize} & AkeneoThemedProps>`

front-packages/akeneo-design-system/src/components/Tooltip/Tooltip.stories.mdx

@@ -43,3 +43,18 @@ It's a complementary information that will help the user better understand what
 </Canvas>
 
 <ArgsTable story="Standard" />
+
+## With a title
+
+<Canvas>
+  <Story name="With title">
+    {args => {
+      return (
+        <Tooltip>
+          <Tooltip.Title>My wonderful title</Tooltip.Title>
+          The rest of the amazing content
+        </Tooltip>
+      );
+    }}
+  </Story>
+</Canvas>

front-packages/akeneo-design-system/src/components/Tooltip/Tooltip.tsx

@@ -40,6 +40,12 @@ const TooltipContent = styled.div<{direction: Direction; width: number; top: num
   opacity: ${({top, left}) => (-1 === top && -1 === left ? 0 : 1)};
 `;
 
+const TooltipTitle = styled.div`
+  color: ${getColor('blue', 120)};
+  font-weight: 700;
+  margin-bottom: 5px;
+`;
+
 const computePosition = (
   direction: Direction,
   parentRef?: RefObject<HTMLDivElement>,
@@ -104,7 +110,7 @@ export type TooltipProps = Override<
   }
 >;
 
-const Tooltip: React.FC<TooltipProps> = ({direction = 'top', iconSize = 24, width = 200, children, ...rest}) => {
+const Tooltip = ({direction = 'top', iconSize = 24, width = 200, children, ...rest}: TooltipProps) => {
   const [isVisible, showTooltip, hideTooltip] = useBooleanState(false);
   const portalNode = document.createElement('div');
   portalNode.setAttribute('id', 'tooltip-root');
@@ -148,4 +154,6 @@ const Tooltip: React.FC<TooltipProps> = ({direction = 'top', iconSize = 24, widt
   );
 };
 
+Tooltip.Title = TooltipTitle;
+
 export {Tooltip};