akeneo-design-system 0.1.226 → 0.1.228

package/src/components/Avatar/Avatars.unit.tsx

@@ -0,0 +1,61 @@
+import React from 'react';
+import {fireEvent, render, screen} from '../../storybook/test-util';
+import {Avatar} from './Avatar';
+import {Avatars} from './Avatars';
+
+test('renders multiple avatars', () => {
+  render(
+    <Avatars max={2}>
+      <Avatar username="john" firstName="John" lastName="Doe" />
+      <Avatar username="leonard" firstName="Leonard" lastName="Doe" />
+    </Avatars>
+  );
+
+  expect(screen.getByTitle('John Doe')).toBeInTheDocument();
+  expect(screen.getByTitle('Leonard Doe')).toBeInTheDocument();
+});
+
+test('renders a maximum number of avatars', () => {
+  render(
+    <Avatars max={1}>
+      <Avatar username="john" firstName="John" lastName="Doe" />
+      <Avatar username="leonard" firstName="Leonard" lastName="Doe" />
+    </Avatars>
+  );
+
+  expect(screen.getByTitle('John Doe')).toBeInTheDocument();
+  expect(screen.queryByText('LD')).not.toBeInTheDocument();
+  expect(screen.getByText('+1')).toBeInTheDocument();
+});
+
+test('renders no avatar', () => {
+  render(<Avatars max={1}></Avatars>);
+
+  expect(screen.queryByTitle('+1')).not.toBeInTheDocument();
+});
+
+test('supports ...rest props', () => {
+  render(<Avatars max={1} data-testid="my_value" />);
+
+  expect(screen.getByTestId('my_value')).toBeInTheDocument();
+});
+
+test('displays remaining users names on plus hover', () => {
+  const invalidChild = 'I should not be in the title';
+  render(
+    <Avatars max={1} maxTitle={1}>
+      <Avatar username="dSchrute" firstName="Dwight" lastName="Schrute" />
+      <Avatar username="mscott" firstName=" " lastName="  " />
+      <Avatar username="kMalone" firstName="Kevin" lastName="Malone" />
+      {invalidChild}
+    </Avatars>
+  );
+
+  expect(screen.getByText('DS')).toBeInTheDocument();
+  expect(screen.getByText('+3')).toBeInTheDocument();
+  // Kevin Malone should not be visible as it should be part of the +1
+  expect(screen.queryByText('mscott')).not.toBeInTheDocument();
+
+  fireEvent.mouseOver(screen.getByText('+3'));
+  expect(screen.getByTitle('mscott ...')).toBeInTheDocument();
+});

package/src/components/Avatar/types.ts

@@ -0,0 +1,34 @@
+import {Override} from '../../shared';
+import React from 'react';
+
+export type User = {
+  /**
+   * Username to use as fallback if the avatar is not provided and the Firstname and Lastname are empty.
+   */
+  username: string;
+
+  /**
+   * Firstname to use as fallback with the Lastname if the avatar is not provided.
+   */
+  firstName: string;
+
+  /**
+   * Lastname to use as fallback with the Firstname if the avatar is not provided.
+   */
+  lastName: string;
+
+  /**
+   * Url of the avatar image.
+   */
+  avatarUrl?: string;
+};
+
+export type AvatarProps = Override<
+  React.HTMLAttributes<HTMLSpanElement>,
+  User & {
+    /**
+     * Size of the avatar.
+     */
+    size?: 'default' | 'big';
+  }
+>;

package/src/components/Dropdown/Surtitle/Surtitle.tsx

@@ -19,7 +19,7 @@ const Title = styled.span`
   text-overflow: ellipsis;
 `;
 
-type SurtitleProps = {label: string};
+type SurtitleProps = {label: string; children?: React.ReactNode};
 
 const Surtitle: React.FC<SurtitleProps> = ({label, children, ...rest}) => (
   <SurtitleContainer {...rest}>

package/src/components/Input/BooleanInput/BooleanInput.tsx

@@ -149,7 +149,7 @@ type BooleanInputProps = Override<
         clearLabel?: string;
       }
   ) & {
-    readOnly: boolean;
+    readOnly?: boolean;
     yesLabel: string;
     noLabel: string;
     invalid?: boolean;
@@ -165,7 +165,7 @@ const BooleanInput = React.forwardRef<HTMLDivElement, BooleanInputProps>(
   (
     {
       value,
-      readOnly,
+      readOnly = false,
       onChange,
       clearable = false,
       yesLabel,

package/src/components/Input/MultiSelectInput/MultiSelectInput.tsx

@@ -150,17 +150,24 @@ type MultiMultiSelectInputProps = Override<
      * Callback called when the user hit enter on the field.
      */
     onSubmit?: () => void;
-
-    /**
-     * Handler called when the next page is almost reached.
-     */
-    onNextPage?: () => void;
-
-    /**
-     * Handler called when the search value changed
-     */
-    onSearchChange?: (searchValue: string) => void;
-  }
+  } & (
+      | {
+          /**
+           * Handler called when the next page is almost reached.
+           */
+          onNextPage?: () => void;
+          /**
+           * Handler called when the search value changed
+           */
+          onSearchChange?: (searchValue: string) => void;
+          disableInternalSearch?: false;
+        }
+      | {
+          onNextPage: () => void;
+          onSearchChange: (searchValue: string) => void;
+          disableInternalSearch: true;
+        }
+    )
 >;
 
 /**
@@ -183,6 +190,7 @@ const MultiSelectInput = ({
   verticalPosition,
   onNextPage,
   onSearchChange,
+  disableInternalSearch = false,
   'aria-labelledby': ariaLabelledby,
   ...rest
 }: MultiMultiSelectInputProps) => {
@@ -211,12 +219,14 @@ const MultiSelectInput = ({
     return indexedChips;
   }, {});
 
-  const filteredChildren = validChildren.filter(({props}) => {
-    const childValue = props.value;
-    const optionValue = childValue + props.children;
+  const filteredChildren = disableInternalSearch
+    ? validChildren
+    : validChildren.filter(({props}) => {
+        const childValue = props.value;
+        const optionValue = childValue + props.children;
 
-    return !value.includes(childValue) && optionValue.toLowerCase().includes(searchValue.toLowerCase());
-  });
+        return !value.includes(childValue) && optionValue.toLowerCase().includes(searchValue.toLowerCase());
+      });
 
   const handleEnter = () => {
     if (filteredChildren.length > 0 && dropdownIsOpen) {

package/src/components/Input/MultiSelectInput/MultiSelectInput.unit.tsx

@@ -77,6 +77,51 @@ test('it handles search', () => {
   expect(onChange).toHaveBeenCalledTimes(2);
 });
 
+test('it handles external search', () => {
+  const onChange = jest.fn();
+  const onNextPage = jest.fn();
+  const onSearchChange = jest.fn();
+
+  const observe = jest.fn();
+  const unobserve = jest.fn();
+  window.IntersectionObserver = jest.fn(() => ({
+    observe,
+    unobserve,
+  })) as unknown as jest.Mock<IntersectionObserver>;
+
+  render(
+    <MultiSelectInput
+      openLabel="Open"
+      value={[]}
+      onChange={onChange}
+      placeholder="Placeholder"
+      emptyResultLabel="Empty result"
+      onNextPage={onNextPage}
+      onSearchChange={onSearchChange}
+      disableInternalSearch={true}
+      removeLabel="Remove"
+    >
+      <MultiSelectInput.Option value="en_US">English</MultiSelectInput.Option>
+      <MultiSelectInput.Option value="fr_FR">French</MultiSelectInput.Option>
+      <MultiSelectInput.Option value="de_DE">German</MultiSelectInput.Option>
+      <MultiSelectInput.Option value="es_ES">Spanish</MultiSelectInput.Option>
+    </MultiSelectInput>
+  );
+
+  const input = screen.getByRole('textbox');
+  fireEvent.click(input);
+  fireEvent.change(input, {target: {value: 'Fr'}});
+
+  const germanOption = screen.queryByText('German');
+  expect(germanOption).toBeInTheDocument();
+  const usOption = screen.queryByText('English');
+  expect(usOption).toBeInTheDocument();
+  const spanishOption = screen.queryByText('Spanish');
+  expect(spanishOption).toBeInTheDocument();
+  const frenchOption = screen.getByText('French');
+  expect(frenchOption).toBeInTheDocument();
+});
+
 test('it handles empty cases', () => {
   const onChange = jest.fn();
   render(

package/src/components/Input/SelectInput/SelectInput.tsx

@@ -178,17 +178,24 @@ type SelectInputProps = Override<
      * Force the vertical position of the overlay.
      */
     verticalPosition?: VerticalPosition;
-
-    /**
-     * Handler called when the next page is almost reached.
-     */
-    onNextPage?: () => void;
-
-    /**
-     * Handler called when the search value changed
-     */
-    onSearchChange?: (searchValue: string) => void;
-  }
+  } & (
+      | {
+          /**
+           * Handler called when the next page is almost reached.
+           */
+          onNextPage?: () => void;
+          /**
+           * Handler called when the search value changed
+           */
+          onSearchChange?: (searchValue: string) => void;
+          disableInternalSearch?: false;
+        }
+      | {
+          onNextPage: () => void;
+          onSearchChange: (searchValue: string) => void;
+          disableInternalSearch: true;
+        }
+    )
 >;
 
 /**
@@ -209,6 +216,7 @@ const SelectInput = ({
   verticalPosition,
   onNextPage,
   onSearchChange,
+  disableInternalSearch = false,
   'aria-labelledby': ariaLabelledby,
   ...rest
 }: SelectInputProps) => {
@@ -235,14 +243,16 @@ const SelectInput = ({
     return optionCodes;
   }, []);
 
-  const filteredChildren = validChildren.filter(child => {
-    const content = typeof child.props.children === 'string' ? child.props.children : '';
-    const title = child.props.title ?? '';
-    const value = child.props.value;
-    const optionValue = value + content + title;
+  const filteredChildren = disableInternalSearch
+    ? validChildren
+    : validChildren.filter(child => {
+        const content = typeof child.props.children === 'string' ? child.props.children : '';
+        const title = child.props.title ?? '';
+        const value = child.props.value;
+        const optionValue = value + content + title;
 
-    return optionValue.toLowerCase().includes(searchValue.toLowerCase());
-  });
+        return optionValue.toLowerCase().includes(searchValue.toLowerCase());
+      });
 
   const currentValueElement =
     validChildren.find(child => {

package/src/components/Input/SelectInput/SelectInput.unit.tsx

@@ -95,6 +95,58 @@ test('it handles search', () => {
   expect(onChange).toHaveBeenCalledWith('es_ES');
 });
 
+test('it handles external search', () => {
+  const onChange = jest.fn();
+  const onNextPage = jest.fn();
+  const onSearchChange = jest.fn();
+
+  const observe = jest.fn();
+  const unobserve = jest.fn();
+  window.IntersectionObserver = jest.fn(() => ({
+    observe,
+    unobserve,
+  })) as unknown as jest.Mock<IntersectionObserver>;
+
+  render(
+    <SelectInput
+      openLabel="Open"
+      value="en_US"
+      onChange={onChange}
+      placeholder="Placeholder"
+      emptyResultLabel="Empty result"
+      onNextPage={onNextPage}
+      onSearchChange={onSearchChange}
+      disableInternalSearch={true}
+    >
+      <SelectInput.Option value="en_US" title="English (United States)">
+        <Locale code="en_US" languageLabel="English" />
+      </SelectInput.Option>
+      <SelectInput.Option value="fr_FR" title="French (France)">
+        Français
+      </SelectInput.Option>
+      <SelectInput.Option value="de_DE">
+        <Locale code="de_DE" languageLabel="German" />
+      </SelectInput.Option>
+      <SelectInput.Option value="es_ES" title="Spanish (Spain)">
+        <Locale code="es_ES" languageLabel="Spanish" />
+      </SelectInput.Option>
+    </SelectInput>
+  );
+
+  const input = screen.getByRole('textbox');
+  fireEvent.click(input);
+  fireEvent.change(input, {target: {value: 'Français'}});
+
+  const germanOption = screen.queryByText('German');
+  expect(germanOption).toBeInTheDocument();
+  const usOption = screen.queryByText('English');
+  expect(usOption).toBeInTheDocument();
+  const spanishOption = screen.queryByText('Spanish');
+  expect(spanishOption).toBeInTheDocument();
+  const frenchOption = screen.getByText('Français');
+  expect(frenchOption).toBeInTheDocument();
+});
+
 test('it handles empty cases', () => {
   const onChange = jest.fn();
   render(

package/src/components/Input/TableInput/TableInputRow/TableInputRow.tsx

@@ -96,15 +96,10 @@ const TableInputTr = styled.tr<
           height: 0;
           margin-top: -1px;
         }
-        &:has(div) {
-          background: red !important;
-        }
         border-bottom-color: ${getColor('blue', 100)};
-        &:first-child {
-          border-left: 1px solid ${getColor('blue', 100)};
-        }
+        border-left-color: ${getColor('blue', 100)};
         &:last-child {
-          border-right: 1px solid ${getColor('blue', 100)};
+          border-right-color: ${getColor('blue', 100)};
         }
       }
     `}

package/src/components/Input/TagInput/TagInput.tsx

@@ -55,12 +55,12 @@ const TagText = styled.span`
   white-space: nowrap;
 `;
 
-const InputContainer = styled.li<AkeneoThemedProps>`
+const InputContainer = styled.li<AkeneoThemedProps & {hasTags: boolean}>`
   list-style-type: none;
   color: ${getColor('grey', 120)};
   border: 0;
   flex: 1;
-  padding: 0;
+  padding: ${({hasTags}) => (hasTags ? '0' : '0 11px')};
   align-items: center;
   display: flex;
 
@@ -255,7 +255,7 @@ const TagInput: FC<TagInputProps> = ({
           </Tag>
         );
       })}
-      <InputContainer ref={inputContainerRef} onClick={focusOnInputField}>
+      <InputContainer ref={inputContainerRef} onClick={focusOnInputField} hasTags={value.length > 0}>
         <input
           type="text"
           data-testid="tag-input"

package/src/components/Navigation/SubNavigationPanel/SubNavigationPanel.stories.mdx

@@ -1,10 +1,12 @@
-import { Meta, Story, ArgsTable, Canvas } from '@storybook/addon-docs';
-import { SubNavigationPanel } from './SubNavigationPanel.tsx';
-import { SpaceContainer } from '../../../storybook/PreviewGallery';
-import { useBooleanState } from '../../../hooks';
-import { MoreVerticalIcon } from "../../../icons";
-import { Dropdown } from "../../Dropdown/Dropdown";
-import { Link } from "../../Link/Link";
+import {Meta, Story, ArgsTable, Canvas} from '@storybook/addon-docs';
+import {SubNavigationPanel} from './SubNavigationPanel.tsx';
+import {SpaceContainer} from '../../../storybook/PreviewGallery';
+import {useBooleanState} from '../../../hooks';
+import {MoreVerticalIcon} from '../../../icons';
+import {Dropdown} from '../../Dropdown/Dropdown';
+import {Link} from '../../Link/Link';
+import {useState} from 'react';
+import {Collapse} from '../../Collapse/Collapse';
 
 <Meta
   title="Components/Navigation/SubNavigationPanel"
@@ -12,7 +14,7 @@ import { Link } from "../../Link/Link";
     SubNavigationPanel: SubNavigationPanel,
     'SubNavigationPanel.Collapsed': SubNavigationPanel.Collapsed,
   }}
-  args={{ children: 'Some content', isOpen: true, closeTitle: 'Close', openTitle: 'Open' }}
+  args={{children: 'Some content', isOpen: true, closeTitle: 'Close', openTitle: 'Open'}}
 />
 
 # SubNavigationPanel
@@ -33,9 +35,10 @@ When the panel is collapsed the content is hidden.
 <Canvas>
   <Story name="Standard">
     {args => {
+      const [isOpen, open, close] = useBooleanState(true);
       return (
         <SpaceContainer height={200}>
-          <SubNavigationPanel {...args} />
+          <SubNavigationPanel {...args} isOpen={isOpen} open={open} close={close} />
         </SpaceContainer>
       );
     }}
@@ -44,34 +47,44 @@ When the panel is collapsed the content is hidden.
 
 <ArgsTable story="Standard" />
 
-## Panel is collapsed
+## Panel with scrollable content
 
 <Canvas>
-  <Story name="Collapsed">
+  <Story name="ScrollableContent">
     {args => {
+      const [isOpen, open, close] = useBooleanState(true);
       return (
         <SpaceContainer height={200}>
-          <SubNavigationPanel {...args} isOpen={false} />
+          <SubNavigationPanel {...args} isOpen={isOpen} open={open} close={close}>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+            <br />
+            Fusce sed quam pharetra, lacinia nisl at, luctus ex.
+            <br />
+            Donec pretium est a augue dapibus, at semper ipsum vestibulum.
+            <br />
+            Aenean blandit metus a nibh blandit porta.
+            <br />
+            Phasellus placerat ligula sit amet vestibulum tristique.
+          </SubNavigationPanel>
         </SpaceContainer>
       );
     }}
   </Story>
 </Canvas>
 
-
-## Panel with collapsed and expanded content
+## Panel with collapsed content using Dropdown component
 
 <Canvas>
   <Story name="CollapsedExpandedContent">
     {args => {
-      const [isOpen, open, close] = useBooleanState(true);
+      const [isOpen, open, close] = useBooleanState(false);
       const [isDropdownOpen, openDropDown, closeDropDown] = useBooleanState(false);
       return (
         <SpaceContainer height={200}>
           <SubNavigationPanel {...args} isOpen={isOpen} open={open} close={close}>
             <SubNavigationPanel.Collapsed>
               <Dropdown>
-                <MoreVerticalIcon title="Collapsed Content" onClick={openDropDown} />
+                <MoreVerticalIcon title="More" onClick={openDropDown} />
                 {isDropdownOpen && (
                   <Dropdown.Overlay onClose={closeDropDown}>
                     <Dropdown.ItemCollection>
@@ -81,15 +94,74 @@ When the panel is collapsed the content is hidden.
                 )}
               </Dropdown>
             </SubNavigationPanel.Collapsed>
-            <Link>Expanded Content</Link>
-            <div>Expanded Content</div>
-            <div>Expanded Content</div>
-            <div>Expanded Content</div>
-            <div>Expanded Content</div>
-            <div>Expanded Content</div>
-            <div>Expanded Content</div>
-            <div>Expanded Content</div>
-            <div>Expanded Content</div>
+            Some content
+          </SubNavigationPanel>
+        </SpaceContainer>
+      );
+    }}
+  </Story>
+</Canvas>
+
+## Panel without padding
+
+<Canvas>
+  <Story name="ContentWithoutPadding">
+    {args => {
+      const [isOpen, open, close] = useBooleanState(true);
+      const [collapse, setCollapse] = useState(1);
+      return (
+        <SpaceContainer height={200}>
+          <SubNavigationPanel {...args} isOpen={isOpen} open={open} close={close} noPadding>
+            Some content
+          </SubNavigationPanel>
+        </SpaceContainer>
+      );
+    }}
+  </Story>
+</Canvas>
+
+## Panel using Collapse components
+
+<Canvas>
+  <Story name="ContentWithCollapseComponent">
+    {args => {
+      const [isOpen, open, close] = useBooleanState(true);
+      const [collapse, setCollapse] = useState(1);
+      return (
+        <SpaceContainer height={200}>
+          <SubNavigationPanel {...args} isOpen={isOpen} open={open} close={close} noPadding>
+            <Collapse
+              label="First Collapse"
+              collapseButtonLabel="Collapse"
+              isOpen={collapse === 1}
+              onCollapse={() => setCollapse(1)}
+            >
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+              <br />
+              Fusce sed quam pharetra, lacinia nisl at, luctus ex.
+              <br />
+              Donec pretium est a augue dapibus, at semper ipsum vestibulum.
+              <br />
+              Aenean blandit metus a nibh blandit porta.
+              <br />
+              Phasellus placerat ligula sit amet vestibulum tristique.
+            </Collapse>
+            <Collapse
+              label="Second Collapse"
+              collapseButtonLabel="Collapse"
+              isOpen={collapse === 2}
+              onCollapse={() => setCollapse(2)}
+            >
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+              <br />
+              Fusce sed quam pharetra, lacinia nisl at, luctus ex.
+              <br />
+              Donec pretium est a augue dapibus, at semper ipsum vestibulum.
+              <br />
+              Aenean blandit metus a nibh blandit porta.
+              <br />
+              Phasellus placerat ligula sit amet vestibulum tristique.
+            </Collapse>
           </SubNavigationPanel>
         </SpaceContainer>
       );