akeneo-design-system 0.1.217 → 0.1.219

package/lib/components/SectionTitle/SectionTitle.js

@@ -76,11 +76,7 @@ var SectionTitle = function (_a) {
             });
         }
         if ((0, react_1.isValidElement)(child) && child.type === components_1.Button) {
-            return (0, react_1.cloneElement)(child, {
-                level: 'tertiary',
-                size: 'small',
-                ghost: true,
-            });
+            return (0, react_1.cloneElement)(child, __assign({ level: 'tertiary', size: 'small', ghost: true }, child.props));
         }
         return child;
     });

package/lib/components/SectionTitle/SectionTitle.js.map

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

package/lib/components/Tiles/Tiles.d.ts

@@ -5,10 +5,17 @@ declare type Size = 'small' | 'big';
 declare type TilesProps = {
     children?: ReactNode;
     size?: Size;
+    inline?: boolean;
 };
-declare type TileProps = Override<React.HTMLAttributes<HTMLDivElement>, {
+declare type TileProps = Override<React.HTMLAttributes<HTMLDivElement>, ({
     icon: React.ReactElement<IconProps>;
-    size?: Size;
+    size?: 'big' | 'small';
+    inline?: false;
+} | {
+    size?: 'big' | 'small';
+    icon?: undefined;
+    inline?: true;
+}) & {
     selected?: boolean;
     onClick?: () => void;
 }>;

package/lib/components/Tiles/Tiles.js

@@ -50,51 +50,55 @@ var react_1 = __importStar(require("react"));
 var styled_components_1 = __importStar(require("styled-components"));
 var theme_1 = require("../../theme");
 var __1 = require("../../");
-var TilesContainer = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: grid;\n  ", "\n"], ["\n  display: grid;\n  ", "\n"])), function (_a) {
+var TilesContainer = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: grid;\n  ", ";\n"], ["\n  display: grid;\n  ", ";\n"])), function (_a) {
     var size = _a.size;
     return size === 'small'
         ? (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n          gap: 20px;\n          grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));\n        "], ["\n          gap: 20px;\n          grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));\n        "]))) : (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n          gap: 30px;\n          grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));\n        "], ["\n          gap: 30px;\n          grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));\n        "])));
 });
-var TileContainer = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  margin: 1px;\n  ", "\n  transition: border-color 0.2s, color 0.2s, background 0.2s;\n  ", "\n  text-align: center;\n  ", "\n  &:hover {\n    border: 2px solid ", ";\n    color: ", ";\n    margin: 0;\n    background: ", ";\n  }\n  box-sizing: border-box;\n"], ["\n  margin: 1px;\n  ", "\n  transition: border-color 0.2s, color 0.2s, background 0.2s;\n  ", "\n  text-align: center;\n  ", "\n  &:hover {\n    border: 2px solid ", ";\n    color: ", ";\n    margin: 0;\n    background: ", ";\n  }\n  box-sizing: border-box;\n"])), function (_a) {
-    var size = _a.size;
-    return size === 'small'
-        ? (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n          height: 130px;\n        "], ["\n          height: 130px;\n        "]))) : (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n          height: 200px;\n        "], ["\n          height: 200px;\n        "])));
+var TileContainer = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  margin: 1px;\n  ", "\n  transition: border-color 0.2s, color 0.2s, background 0.2s;\n  ", "\n  ", "\n  &:hover {\n    border: 2px solid ", ";\n    color: ", ";\n    margin: 0;\n    background: ", ";\n  }\n  box-sizing: border-box;\n"], ["\n  margin: 1px;\n  ", "\n  transition: border-color 0.2s, color 0.2s, background 0.2s;\n  ", "\n  ", "\n  &:hover {\n    border: 2px solid ", ";\n    color: ", ";\n    margin: 0;\n    background: ", ";\n  }\n  box-sizing: border-box;\n"])), function (_a) {
+    var size = _a.size, inline = _a.inline;
+    if (!inline) {
+        return size === 'small'
+            ? (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n            height: 130px;\n            text-align: center;\n          "], ["\n            height: 130px;\n            text-align: center;\n          "]))) : (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n            height: 200px;\n            text-align: center;\n          "], ["\n            height: 200px;\n            text-align: center;\n          "])));
+    }
+    return (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n      height: auto;\n    "], ["\n      height: auto;\n    "])));
 }, function (_a) {
     var onClick = _a.onClick;
-    return onClick !== undefined && (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n      cursor: pointer;\n    "], ["\n      cursor: pointer;\n    "])));
+    return onClick !== undefined && (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n      cursor: pointer;\n    "], ["\n      cursor: pointer;\n    "])));
 }, function (_a) {
     var selected = _a.selected;
     return selected
-        ? (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n          border: 2px solid ", ";\n          color: ", ";\n          margin: 0;\n          background: ", ";\n        "], ["\n          border: 2px solid ", ";\n          color: ", ";\n          margin: 0;\n          background: ", ";\n        "])), (0, theme_1.getColor)('blue', 100), (0, theme_1.getColor)('blue', 100), (0, theme_1.getColor)('blue', 10)) : (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n          border: 1px solid ", ";\n        "], ["\n          border: 1px solid ", ";\n        "])), (0, theme_1.getColor)('grey', 80));
+        ? (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n          border: 2px solid ", ";\n          color: ", ";\n          margin: 0;\n          background: ", ";\n        "], ["\n          border: 2px solid ", ";\n          color: ", ";\n          margin: 0;\n          background: ", ";\n        "])), (0, theme_1.getColor)('blue', 100), (0, theme_1.getColor)('blue', 100), (0, theme_1.getColor)('blue', 10)) : (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n          border: 1px solid ", ";\n        "], ["\n          border: 1px solid ", ";\n        "])), (0, theme_1.getColor)('grey', 80));
 }, (0, theme_1.getColor)('blue', 100), (0, theme_1.getColor)('blue', 100), (0, theme_1.getColor)('blue', 10));
-var IconContainer = styled_components_1.default.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  box-sizing: content-box;\n  ", "\n"], ["\n  box-sizing: content-box;\n  ", "\n"])), function (_a) {
+var IconContainer = styled_components_1.default.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  box-sizing: content-box;\n  ", "\n"], ["\n  box-sizing: content-box;\n  ", "\n"])), function (_a) {
     var size = _a.size;
     return size === 'small'
-        ? (0, styled_components_1.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n          padding: 25px 0 0 0;\n          height: 54px;\n        "], ["\n          padding: 25px 0 0 0;\n          height: 54px;\n        "]))) : (0, styled_components_1.css)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n          padding: 40px 0 0 0;\n          height: 100px;\n        "], ["\n          padding: 40px 0 0 0;\n          height: 100px;\n        "])));
+        ? (0, styled_components_1.css)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n          padding: 25px 0 0 0;\n          height: 54px;\n        "], ["\n          padding: 25px 0 0 0;\n          height: 54px;\n        "]))) : (0, styled_components_1.css)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n          padding: 40px 0 0 0;\n          height: 100px;\n        "], ["\n          padding: 40px 0 0 0;\n          height: 100px;\n        "])));
 });
-var LabelContainer = styled_components_1.default.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  margin: 10px;\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n  line-height: 1.3;\n"], ["\n  margin: 10px;\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n  line-height: 1.3;\n"])));
+var LabelContainer = styled_components_1.default.div(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  margin: 10px;\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n  line-height: 1.3;\n"], ["\n  margin: 10px;\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n  line-height: 1.3;\n"])));
+var InlineContainer = styled_components_1.default.div(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n  margin: 10px;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n"], ["\n  margin: 10px;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n"])));
 var Tile = function (_a) {
-    var icon = _a.icon, _b = _a.selected, selected = _b === void 0 ? false : _b, _c = _a.size, size = _c === void 0 ? 'small' : _c, onClick = _a.onClick, children = _a.children, rest = __rest(_a, ["icon", "selected", "size", "onClick", "children"]);
+    var icon = _a.icon, _b = _a.selected, selected = _b === void 0 ? false : _b, _c = _a.size, size = _c === void 0 ? 'small' : _c, _d = _a.inline, inline = _d === void 0 ? false : _d, onClick = _a.onClick, children = _a.children, rest = __rest(_a, ["icon", "selected", "size", "inline", "onClick", "children"]);
     var handleKeyDown = (0, react_1.useCallback)(function (event) {
         if (null !== event.currentTarget && event.key === __1.Key.Enter) {
             onClick === null || onClick === void 0 ? void 0 : onClick();
             event.preventDefault();
         }
-    }, []);
-    return (react_1.default.createElement(TileContainer, __assign({ selected: selected, size: size, onClick: onClick, onKeyDown: handleKeyDown, tabIndex: '0' }, rest),
-        react_1.default.createElement(IconContainer, { size: size }, react_1.default.cloneElement(icon, { size: size === 'small' ? 54 : 100 })),
-        react_1.default.createElement(LabelContainer, null, children)));
+    }, [onClick]);
+    return (react_1.default.createElement(TileContainer, __assign({ selected: selected, size: size, inline: inline, onClick: onClick, onKeyDown: handleKeyDown, tabIndex: '0' }, rest),
+        !inline && icon && (react_1.default.createElement(IconContainer, { size: size }, react_1.default.cloneElement(icon, { size: size === 'small' ? 54 : 100 }))),
+        inline ? react_1.default.createElement(InlineContainer, null, children) : react_1.default.createElement(LabelContainer, null, children)));
 };
 exports.Tile = Tile;
 var Tiles = react_1.default.forwardRef(function (_a, forwardedRef) {
-    var _b = _a.size, size = _b === void 0 ? 'small' : _b, children = _a.children, rest = __rest(_a, ["size", "children"]);
-    return (react_1.default.createElement(TilesContainer, __assign({ size: size, ref: forwardedRef }, rest), react_1.default.Children.map(children, function (child) {
+    var _b = _a.size, size = _b === void 0 ? 'small' : _b, _c = _a.inline, inline = _c === void 0 ? false : _c, children = _a.children, rest = __rest(_a, ["size", "inline", "children"]);
+    return (react_1.default.createElement(TilesContainer, __assign({ size: size, inline: inline, ref: forwardedRef }, rest), react_1.default.Children.map(children, function (child) {
         if ((0, react_1.isValidElement)(child) && child.type === Tile) {
-            return react_1.default.cloneElement(child, { size: size });
+            return react_1.default.cloneElement(child, { size: size, inline: inline });
         }
         throw new Error('A Tiles element can only have Tile children');
     })));
 });
 exports.Tiles = Tiles;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15;
 //# sourceMappingURL=Tiles.js.map

package/lib/components/Tiles/Tiles.js.map

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

package/package.json

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

package/src/components/SectionTitle/SectionTitle.stories.mdx

@@ -51,7 +51,7 @@ Use this component only for title, not for description or help message.
       <SectionTitle.Information>10 results</SectionTitle.Information>
       <SectionTitle.Separator />
       <Button>Action</Button>
-      <Button>Action</Button>
+      <Button level="danger">Action</Button>
       <IconButton icon={<MoreIcon />} title="More" />
     </SectionTitle>
   </Story>

package/src/components/SectionTitle/SectionTitle.tsx

@@ -94,6 +94,7 @@ const SectionTitle = ({children, ...rest}: SectionTitleProps) => {
         level: 'tertiary',
         size: 'small',
         ghost: true,
+        ...child.props
       });
     }
 

package/src/components/Tiles/Tiles.stories.mdx

@@ -11,6 +11,7 @@ import {
   AssetsIcon,
 } from '../../icons';
 import {useTabBar} from "../../hooks/useTabBar";
+import { Tooltip } from '../Tooltip/Tooltip';
 
 <Meta
   title="Components/Tiles"
@@ -93,6 +94,26 @@ The component is displayed in a configurable responsive grid (width and gap). Ti
               Big Date
             </Tile>
           </Tiles>
+          <Tiles size={'small'} inline={true}>
+              <Tile>
+                Big Assets collection
+                <Tooltip direction={'bottom'}>Big Assets collection</Tooltip>
+              </Tile>
+              <Tile>
+                Big Date
+                <Tooltip direction={'bottom'}>Big Date</Tooltip>
+              </Tile>
+            </Tiles>
+          <Tiles size={'big'} inline={true}>
+            <Tile>
+              Big Assets collection
+              <Tooltip direction={'bottom'}>Big Assets collection</Tooltip>
+            </Tile>
+            <Tile>
+              Big Date
+              <Tooltip direction={'bottom'}>Big Date</Tooltip>
+            </Tile>
+          </Tiles>
         </>
       );
     }}

package/src/components/Tiles/Tiles.tsx

@@ -17,26 +17,35 @@ const TilesContainer = styled.div<{size: Size} & AkeneoThemedProps>`
       : css`
           gap: 30px;
           grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
-        `}
+        `};
 `;
 
-const TileContainer = styled.div<{selected: boolean; size: Size; onClick?: () => void} & AkeneoThemedProps>`
+const TileContainer = styled.div<
+  {selected: boolean; size: Size; inline: boolean; onClick?: () => void} & AkeneoThemedProps
+>`
   margin: 1px;
-  ${({size}) =>
-    size === 'small'
-      ? css`
-          height: 130px;
-        `
-      : css`
-          height: 200px;
-        `}
+  ${({size, inline}) => {
+    if (!inline) {
+      return size === 'small'
+        ? css`
+            height: 130px;
+            text-align: center;
+          `
+        : css`
+            height: 200px;
+            text-align: center;
+          `;
+    }
+    return css`
+      height: auto;
+    `;
+  }}
   transition: border-color 0.2s, color 0.2s, background 0.2s;
   ${({onClick}) =>
     onClick !== undefined &&
     css`
       cursor: pointer;
     `}
-  text-align: center;
   ${({selected}) =>
     selected
       ? css`
@@ -79,6 +88,13 @@ const LabelContainer = styled.div`
   line-height: 1.3;
 `;
 
+const InlineContainer = styled.div`
+  margin: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+`;
+
 type TilesProps = {
   /**
    * Children are Tile components only
@@ -86,33 +102,60 @@ type TilesProps = {
   children?: ReactNode;
 
   /**
-   * The size can be 'small' (by default) or 'big'
+   * The size can be 'small' (by default), or 'big'
    */
   size?: Size;
+
+  /**
+   * Inline (false by default), make the height auto and the content horizontal
+   */
+  inline?: boolean;
 };
 
 type TileProps = Override<
   React.HTMLAttributes<HTMLDivElement>,
-  {
-    icon: React.ReactElement<IconProps>;
-    size?: Size;
+  (
+    | {
+        icon: React.ReactElement<IconProps>;
+        size?: 'big' | 'small';
+        inline?: false;
+      }
+    | {
+        size?: 'big' | 'small';
+        icon?: undefined;
+        inline?: true;
+      }
+  ) & {
     selected?: boolean;
     onClick?: () => void;
   }
 >;
 
-const Tile: FC<TileProps> = ({icon, selected = false, size = 'small', onClick, children, ...rest}) => {
-  const handleKeyDown = useCallback((event: KeyboardEvent<HTMLDivElement>) => {
-    if (null !== event.currentTarget && event.key === Key.Enter) {
-      onClick?.();
-      event.preventDefault();
-    }
-  }, []);
+const Tile: FC<TileProps> = ({icon, selected = false, size = 'small', inline = false, onClick, children, ...rest}) => {
+  const handleKeyDown = useCallback(
+    (event: KeyboardEvent<HTMLDivElement>) => {
+      if (null !== event.currentTarget && event.key === Key.Enter) {
+        onClick?.();
+        event.preventDefault();
+      }
+    },
+    [onClick]
+  );
 
   return (
-    <TileContainer selected={selected} size={size} onClick={onClick} onKeyDown={handleKeyDown} tabIndex={'0'} {...rest}>
-      <IconContainer size={size}>{React.cloneElement(icon, {size: size === 'small' ? 54 : 100})}</IconContainer>
-      <LabelContainer>{children}</LabelContainer>
+    <TileContainer
+      selected={selected}
+      size={size}
+      inline={inline}
+      onClick={onClick}
+      onKeyDown={handleKeyDown}
+      tabIndex={'0'}
+      {...rest}
+    >
+      {!inline && icon && (
+        <IconContainer size={size}>{React.cloneElement(icon, {size: size === 'small' ? 54 : 100})}</IconContainer>
+      )}
+      {inline ? <InlineContainer>{children}</InlineContainer> : <LabelContainer>{children}</LabelContainer>}
     </TileContainer>
   );
 };
@@ -120,15 +163,15 @@ const Tile: FC<TileProps> = ({icon, selected = false, size = 'small', onClick, c
 /**
  * The Tiles component provides the user a list of choices, for example, an attribute type, a template, or an export
  * format.
- * It is a visual component made up of an icon and a label..
+ * It is a visual component made up of an icon and a label.
  */
 const Tiles = React.forwardRef<HTMLDivElement, TilesProps>(
-  ({size = 'small', children, ...rest}: TilesProps, forwardedRef: Ref<HTMLDivElement>) => {
+  ({size = 'small', inline = false, children, ...rest}: TilesProps, forwardedRef: Ref<HTMLDivElement>) => {
     return (
-      <TilesContainer size={size} ref={forwardedRef} {...rest}>
+      <TilesContainer size={size} inline={inline} ref={forwardedRef} {...rest}>
         {React.Children.map(children, child => {
           if (isValidElement<TileProps>(child) && child.type === Tile) {
-            return React.cloneElement(child, {size});
+            return React.cloneElement(child, {size, inline});
           }
           throw new Error('A Tiles element can only have Tile children');
         })}

package/src/components/Tiles/Tiles.unit.tsx

@@ -40,6 +40,42 @@ test('Tiles supports ...rest props', () => {
   expect(screen.getByTestId('my_value')).toBeInTheDocument();
 });
 
+test('It can be small', () => {
+  render(
+    <Tiles size={'small'}>
+      <Tile icon={<AssetCollectionIcon />}>small</Tile>
+    </Tiles>
+  );
+  expect(screen.getByText('small')).toBeInTheDocument();
+});
+
+test('It can be big', () => {
+  render(
+    <Tiles size={'big'}>
+      <Tile icon={<AssetCollectionIcon />}>big</Tile>
+    </Tiles>
+  );
+  expect(screen.getByText('big')).toBeInTheDocument();
+});
+
+test('It can be inline and small', () => {
+  render(
+    <Tiles size={'small'} inline={true}>
+      <Tile>inline</Tile>
+    </Tiles>
+  );
+  expect(screen.getByText('inline')).toBeInTheDocument();
+});
+
+test('It can be inline and big', () => {
+  render(
+    <Tiles size={'small'} inline={true}>
+      <Tile>inline</Tile>
+    </Tiles>
+  );
+  expect(screen.getByText('inline')).toBeInTheDocument();
+});
+
 test('it triggers onclick when pressing enter with focus', () => {
   const handleClick = jest.fn();