akeneo-design-system 0.1.227 → 0.1.229

package/src/components/Navigation/SubNavigationPanel/SubNavigationPanel.tsx

@@ -1,54 +1,42 @@
-import React, {ForwardRefExoticComponent, PropsWithoutRef, ReactNode, RefAttributes} from 'react';
-import styled, {css} from 'styled-components';
+import React, {ForwardRefExoticComponent, PropsWithoutRef, RefAttributes, useLayoutEffect} from 'react';
+import styled from 'styled-components';
 import {PanelCloseIcon, PanelOpenIcon} from '../../../icons';
 import {AkeneoThemedProps, getColor} from '../../../theme';
 
-const collapsableStyles = css<{isOpen: boolean} & AkeneoThemedProps>`
-  opacity: ${({isOpen}) => (isOpen ? 1 : 0)};
-  transition: opacity 0.3s;
-  transition-delay: 0.3s;
-
-  position: relative;
-  z-index: 1;
-  ${({isOpen}) =>
-    !isOpen &&
-    css`
-      position: absolute;
-      z-index: 0;
-    `}
-`;
-const Panel = styled.div<{isOpen: boolean} & AkeneoThemedProps>`
+const Container = styled.div<{isOpen: boolean} & AkeneoThemedProps>`
+  background-color: ${getColor('grey', 20)};
+  border-right: 1px solid ${getColor('grey', 80)};
+  box-sizing: border-box;
   display: flex;
   flex-direction: column;
-  height: calc(100% - 54px);
-  width: 100%;
-  position: absolute;
-  overflow-y: ${({isOpen}) => (isOpen ? 'auto' : 'hidden')};
-  overflow-x: hidden;
+  height: 100%;
+  transition: width 0.3s linear;
+  width: ${({isOpen}) => (isOpen ? '280px' : '40px')};
 `;
 
-const PanelContent = styled.div<{isOpen: boolean} & AkeneoThemedProps>`
-  box-sizing: border-box;
+const Content = styled.div<{isOpen: boolean; noPadding: boolean}>`
+  display: flex;
+  flex-direction: column;
   flex-grow: 1;
-  width: 100%;
-  padding: ${({isOpen}) => (isOpen ? '30px' : '10px 5px')};
-  ${collapsableStyles}
+  overflow-x: hidden;
+  overflow-y: auto;
+  opacity: ${({isOpen}) => (isOpen ? '1' : '0')};
+  transition: ${({isOpen}) => (isOpen ? 'opacity 300ms linear 300ms' : 'none')};
+  padding: ${({noPadding}) => (noPadding ? '0' : '30px')};
 `;
 
-const ToggleButton = styled.button<{isOpen: boolean} & AkeneoThemedProps>`
+const ToggleButton = styled.button<AkeneoThemedProps>`
   align-items: center;
   background: none;
   border: none;
   border-top: 1px solid ${getColor('grey', 80)};
+  box-sizing: border-box;
   cursor: pointer;
+  display: flex;
+  flex: 0 0 auto;
   height: 54px;
-  margin: ${({isOpen}) => (isOpen ? '0 20px' : '0')};
-  padding: ${({isOpen}) => (isOpen ? '0' : '0 12.5px')};
-  transition: margin 0.3s ease-in-out, padding 0.3s ease-in-out;
-  text-align: left;
-  position: absolute;
-  bottom: 0;
-  width: ${({isOpen}) => (isOpen ? '240px' : '40px')};
+  padding: 0;
+  padding-left: 12.5px;
 
   svg {
     color: ${getColor('grey', 100)};
@@ -56,30 +44,10 @@ const ToggleButton = styled.button<{isOpen: boolean} & AkeneoThemedProps>`
   }
 `;
 
-const Container = styled.div<{isOpen: boolean} & AkeneoThemedProps>`
-  width: ${({isOpen}) => (isOpen ? '280px' : '40px')};
-  transition: width 0.3s linear;
-  position: relative;
-  order: -10;
-  background-color: ${getColor('grey', 20)};
-  border-right: 1px solid ${getColor('grey', 80)};
-  flex-shrink: 0;
-  height: 100%;
-  z-index: 802;
-  overflow: hidden;
-`;
-
-const Collapsed = styled.div<{isOpen: boolean} & AkeneoThemedProps>`
-  flex-grow: 1;
+const Collapsed = styled.div`
   padding: 10px 5px;
-  ${collapsableStyles}
 `;
 
-Collapsed.displayName = 'Collapsed';
-Collapsed.defaultProps = {
-  isOpen: false,
-};
-
 type SubNavigationPanelProps = {
   /**
    * The content of the panel.
@@ -110,12 +78,18 @@ type SubNavigationPanelProps = {
    * Opening title to display for the ToggleButton
    */
   openTitle?: string;
+
+  /**
+   * Whether or not the panel should have padding.
+   */
+  noPadding?: boolean;
 };
 
 type SubNavigationPanelCompoundType = ForwardRefExoticComponent<
   PropsWithoutRef<SubNavigationPanelProps> & RefAttributes<HTMLDivElement>
 > & {
   Collapsed?: any;
+  Section?: any;
 };
 
 /**
@@ -123,25 +97,40 @@ type SubNavigationPanelCompoundType = ForwardRefExoticComponent<
  */
 const SubNavigationPanel: SubNavigationPanelCompoundType = React.forwardRef<HTMLDivElement, SubNavigationPanelProps>(
   (
-    {children, isOpen: isOpen = true, open, close, closeTitle = '', openTitle = '', ...rest}: SubNavigationPanelProps,
+    {
+      children,
+      isOpen = true,
+      open,
+      close,
+      closeTitle = '',
+      openTitle = '',
+      noPadding = false,
+      ...rest
+    }: SubNavigationPanelProps,
     forwardedRef: React.Ref<HTMLDivElement>
   ) => {
-    const contentChildren: ReactNode[] = [];
-    let collapsedContent: ReactNode | null = null;
+    const collapsedElements: React.ReactNode[] = [];
+    const contentElements: React.ReactNode[] = [];
+
     React.Children.forEach(children, child => {
       if (React.isValidElement(child) && child.type === Collapsed) {
-        collapsedContent = React.cloneElement(child, {isOpen: !isOpen});
-        return;
+        collapsedElements.push(child);
+      } else {
+        contentElements.push(child);
       }
-      contentChildren.push(child);
     });
 
+    const [isOpenTransition, setIsOpenTransition] = React.useState<boolean>(isOpen);
+    useLayoutEffect(() => {
+      setIsOpenTransition(isOpen);
+    }, [isOpen]);
+
     return (
       <Container ref={forwardedRef} isOpen={isOpen} {...rest}>
-        <Panel isOpen={isOpen}>
-          {collapsedContent}
-          <PanelContent isOpen={isOpen}>{isOpen && contentChildren}</PanelContent>
-        </Panel>
+        {!isOpen && collapsedElements}
+        <Content isOpen={isOpenTransition} noPadding={noPadding}>
+          {isOpen && contentElements}
+        </Content>
         <ToggleButton
           isOpen={isOpen}
           onClick={() => (isOpen ? close() : open())}
@@ -155,6 +144,9 @@ const SubNavigationPanel: SubNavigationPanelCompoundType = React.forwardRef<HTML
   }
 );
 
+SubNavigationPanel.displayName = 'SubNavigationPanel';
+Collapsed.displayName = 'SubNavigationPanel.Collapsed';
+
 SubNavigationPanel.Collapsed = Collapsed;
 
 export {SubNavigationPanel};

package/src/components/Navigation/SubNavigationPanel/SubNavigationPanel.unit.tsx

@@ -76,7 +76,7 @@ test('it shows collapsed content', () => {
   );
 
   expect(queryByText('SubNavigationPanel content')).not.toBeInTheDocument();
-  expect(getByText('Collapsed content')).toBeVisible();
+  expect(getByText('Collapsed content')).toBeInTheDocument();
 });
 
 test('it hides collapsed content', () => {
@@ -89,6 +89,6 @@ test('it hides collapsed content', () => {
     </SubNavigationPanel>
   );
 
-  expect(queryByText('SubNavigationPanel content')).toBeInTheDocument();
-  expect(getByText('Collapsed content')).not.toBeVisible();
+  expect(getByText('SubNavigationPanel content')).toBeInTheDocument();
+  expect(queryByText('Collapsed content')).not.toBeInTheDocument();
 });

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

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