akeneo-design-system 0.1.227 → 0.1.229

package/lib/components/Tooltip/Tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.js","sourceRoot":"","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Tooltip.js","sourceRoot":"","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "akeneo-design-system",
-  "version": "0.1.227",
+  "version": "0.1.229",
   "description": "Akeneo design system",
   "main": "lib/index.js",
   "scripts": {

package/src/components/Avatar/Avatar.stories.mdx

@@ -92,7 +92,7 @@ You can use a dedicated component to display avatar list. After a defined maximu
         <>
           <Avatars
             max={5}
-            title="Helen Doe&#10;Isabel Doe&#10;John Doe&#10;Kurt Doe&#10;Leonard Doe"
+            maxTitle={5}
           >
             <Avatar
               {...args}

package/src/components/Avatar/Avatar.tsx

@@ -1,8 +1,8 @@
 import React, {useMemo} from 'react';
 import styled, {css} from 'styled-components';
 import {useTheme} from '../../hooks';
-import {Override} from '../../shared';
 import {AkeneoThemedProps, getColor} from '../../theme';
+import {AvatarProps} from './types';
 
 const AvatarContainer = styled.span<AvatarProps & AkeneoThemedProps>`
   ${({size}) =>
@@ -31,43 +31,13 @@ const AvatarContainer = styled.span<AvatarProps & AkeneoThemedProps>`
   cursor: ${({onClick}) => (onClick ? 'pointer' : 'default')};
 `;
 
-type AvatarProps = Override<
-  React.HTMLAttributes<HTMLSpanElement>,
-  {
-    /**
-     * 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;
-
-    /**
-     * Size of the avatar.
-     */
-    size?: 'default' | 'big';
-  }
->;
-
 const Avatar = ({username, firstName, lastName, avatarUrl, size = 'default', ...rest}: AvatarProps) => {
   const theme = useTheme();
 
   const fallback = (
     firstName.trim().charAt(0) + lastName.trim().charAt(0) || username.substring(0, 2)
   ).toLocaleUpperCase();
-  const title = `${firstName} ${lastName}`.trim() || username;
+  const title = `${firstName || ''} ${lastName || ''}`.trim() || username;
 
   const backgroundColor = useMemo(() => {
     const colorId = username.split('').reduce<number>((s, l) => s + l.charCodeAt(0), 0);

package/src/components/Avatar/Avatars.tsx

@@ -1,7 +1,8 @@
-import React, {Children} from 'react';
+import React, {Children, useMemo} from 'react';
 import styled from 'styled-components';
 import {Override} from '../../shared';
 import {AkeneoThemedProps, getColor} from '../../theme';
+import {AvatarProps} from './types';
 
 const AvatarListContainer = styled.div<AvatarsProps & AkeneoThemedProps>`
   display: flex;
@@ -16,10 +17,11 @@ const AvatarListContainer = styled.div<AvatarsProps & AkeneoThemedProps>`
 const RemainingAvatar = styled.span`
   height: 32px;
   width: 32px;
-  display: inline-block;
   border: 1px solid ${getColor('grey', 10)};
   line-height: 32px;
-  text-align: center;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   font-size: 15px;
   border-radius: 32px;
   background-color: ${getColor('white')};
@@ -29,17 +31,37 @@ type AvatarsProps = Override<
   React.HTMLAttributes<HTMLDivElement>,
   {
     max: number;
+    maxTitle?: number;
   }
 >;
 
-const Avatars = ({max, children, ...rest}: AvatarsProps) => {
+const Avatars: React.FC<AvatarsProps> = ({max, maxTitle = 10, children, ...rest}) => {
   const childrenArray = Children.toArray(children);
   const displayedChildren = childrenArray.slice(0, max);
+  const remainingChildren = childrenArray.slice(max, childrenArray.length + 1);
   const remainingChildrenCount = childrenArray.length - max;
   const reverseChildren = displayedChildren.reverse();
 
+  const remainingUsersTitle = useMemo(() => {
+    const remainingNames = remainingChildren
+      .map(child => {
+        if (!React.isValidElement<AvatarProps>(child)) return;
+        const {firstName, lastName, username} = child.props;
+
+        return `${firstName || ''} ${lastName || ''}`.trim() || username;
+      })
+      .slice(0, maxTitle)
+      .join('\n');
+
+    if (remainingChildren.length > maxTitle) {
+      return remainingNames.concat('\n', '...');
+    }
+
+    return remainingNames;
+  }, [maxTitle, remainingChildren]);
+
   return (
-    <AvatarListContainer {...rest}>
+    <AvatarListContainer title={rest.title || remainingUsersTitle} {...rest}>
       {remainingChildrenCount > 0 && <RemainingAvatar>+{remainingChildrenCount}</RemainingAvatar>}
       {reverseChildren}
     </AvatarListContainer>

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import {render, screen} from '../../storybook/test-util';
+import {fireEvent, render, screen} from '../../storybook/test-util';
 import {Avatar} from './Avatar';
 import {Avatars} from './Avatars';
 
@@ -24,7 +24,7 @@ test('renders a maximum number of avatars', () => {
   );
 
   expect(screen.getByTitle('John Doe')).toBeInTheDocument();
-  expect(screen.queryByTitle('Leonard Doe')).not.toBeInTheDocument();
+  expect(screen.queryByText('LD')).not.toBeInTheDocument();
   expect(screen.getByText('+1')).toBeInTheDocument();
 });
 
@@ -39,3 +39,23 @@ test('supports ...rest props', () => {
 
   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/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}
       >

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/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>
         ))}

package/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>

package/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>

package/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(() => {

package/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>

package/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;

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>
       );