akeneo-design-system 0.1.228 → 0.1.230

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

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

package/src/icons/ChecklistIcon.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import {IconProps} from './IconProps';
+
+const ChecklistIcon = ({title, size = 24, color = 'currentColor', ...props}: IconProps) => (
+  <svg viewBox="0 0 24 24" width={size} height={size} {...props}>
+    {title && <title>{title}</title>}
+    <g stroke="none" strokeWidth="1" fill="none" fillRule="evenodd" strokeLinecap="round" strokeLinejoin="round">
+      <path
+        d="M9.48723 4.21967C9.78012 4.51256 9.78012 4.98744 9.48723 5.28033L6.0564 8.71115C5.37299 9.39457 4.26495 9.39457 3.58153 8.71115L2.21967 7.3493C1.92678 7.0564 1.92678 6.58153 2.21967 6.28864C2.51256 5.99574 2.98744 5.99574 3.28033 6.28864L4.64219 7.65049C4.73982 7.74812 4.89811 7.74813 4.99574 7.65049L8.42657 4.21967C8.71946 3.92678 9.19433 3.92678 9.48723 4.21967ZM12 6.68066C12 6.40452 12.2239 6.18066 12.5 6.18066H21.5C21.7761 6.18066 22 6.40452 22 6.68066C22 6.95681 21.7761 7.18066 21.5 7.18066H12.5C12.2239 7.18066 12 6.95681 12 6.68066ZM10 12.6807C10 12.4045 10.2239 12.1807 10.5 12.1807H21.5C21.7761 12.1807 22 12.4045 22 12.6807C22 12.9568 21.7761 13.1807 21.5 13.1807H10.5C10.2239 13.1807 10 12.9568 10 12.6807ZM10 18.6807C10 18.4045 10.2239 18.1807 10.5 18.1807H21.5C21.7761 18.1807 22 18.4045 22 18.6807C22 18.9568 21.7761 19.1807 21.5 19.1807H10.5C10.2239 19.1807 10 18.9568 10 18.6807ZM6.47409 18.681C6.47409 17.9954 5.91831 17.4396 5.23271 17.4396C4.54712 17.4396 3.99133 17.9954 3.99133 18.681C3.99133 19.3666 4.54712 19.9224 5.23271 19.9224C5.91831 19.9224 6.47409 19.3666 6.47409 18.681ZM6.47409 12.6807C6.47409 11.9951 5.91831 11.4393 5.23271 11.4393C4.54712 11.4393 3.99133 11.9951 3.99133 12.6807C3.99133 13.3663 4.54712 13.922 5.23271 13.922C5.91831 13.922 6.47409 13.3663 6.47409 12.6807Z"
+        stroke={color}
+      />
+    </g>
+  </svg>
+);
+
+export {ChecklistIcon};

package/src/icons/WorkflowIcon.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import {IconProps} from './IconProps';
+
+const WorkflowIcon = ({title, size = 24, color = 'currentColor', ...props}: IconProps) => (
+  <svg viewBox="0 0 24 24" width={size} height={size} {...props}>
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M17.1379 5.49999H8V4.49999H17.1379C19.2709 4.49999 21 6.29085 21 8.49999C21 10.7091 19.2709 12.5 17.1379 12.5H14V11.5H17.1379C18.7377 11.5 20.0345 10.1568 20.0345 8.49999C20.0345 6.84313 18.7377 5.49999 17.1379 5.49999Z"
+      fill={color}
+    />
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M5.88571 18H19.3408L19.83 18.5L19.3408 19H5.88571C3.73969 19 2 17.7091 2 15.5C2 13.2908 3.73969 11.5 5.88571 11.5H8V12.5H5.88571C4.2762 12.5 2.97143 13.8431 2.97143 15.5C2.97143 17.1568 4.2762 18 5.88571 18Z"
+      fill={color}
+    />
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M7 3H3L3 7H7V3ZM3 2C2.44772 2 2 2.44772 2 3V7C2 7.55228 2.44772 8 3 8H7C7.55228 8 8 7.55228 8 7V3C8 2.44772 7.55228 2 7 2H3Z"
+      fill={color}
+    />
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M13 10.2H9V13.8H13V10.2ZM9 9C8.44772 9 8 9.53726 8 10.2V13.8C8 14.4627 8.44772 15 9 15H13C13.5523 15 14 14.4627 14 13.8V10.2C14 9.53726 13.5523 9 13 9H9Z"
+      fill={color}
+    />
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M20.8731 18.1966C21.0423 18.3695 21.0423 18.6305 20.8731 18.8034L18.8731 20.8476C18.6893 21.0355 18.3733 21.0519 18.1672 20.8843C17.9611 20.7168 17.9431 20.4286 18.1269 20.2407L19.83 18.5L18.1269 16.7593C17.9431 16.5714 17.9611 16.2832 18.1672 16.1157C18.3733 15.9481 18.6893 15.9645 18.8731 16.1524L20.8731 18.1966Z"
+      fill={color}
+    />
+  </svg>
+);
+
+export {WorkflowIcon};

package/src/icons/index.ts

@@ -51,6 +51,7 @@ export * from './DownloadIcon';
 export * from './DragDropIcon';
 export * from './EditIcon';
 export * from './EntityIcon';
+export * from './ChecklistIcon';
 export * from './EntityMultiIcon';
 export * from './EraseIcon';
 export * from './ExpandIcon';
@@ -119,3 +120,4 @@ export * from './UserIcon';
 export * from './ValueIcon';
 export * from './ViewIcon';
 export * from './WaveIcon';
+export * from './WorkflowIcon';