Refacto code

packages/strapi-plugin-content-manager/admin/src/components/DynamicComponentCard/Wrapper.js

@@ -13,6 +13,7 @@ const Wrapper = styled.div`
   color: #919bae;
   text-align: center;
   border-radius: 2px;
+  cursor: pointer;
 
   .component-uid {
     width: 119px;

packages/strapi-plugin-content-manager/admin/src/components/DynamicZone/Button.js

@@ -3,8 +3,21 @@ import styled from 'styled-components';
 const Button = styled.button`
   height: 36px;
   width: 36px;
-  background-color: ${({ isOpen }) => (isOpen ? '#aed4fb' : '#f3f4f4')};
+  background-color: #f3f4f4;
   border-radius: 50%;
+  transform: rotate(-45deg);
+  transition: background-color 0.2s linear;
+  transition: transform 0.5s ease-in-out;
+  text-align: center;
+
+  ${({ isOpen }) => {
+    if (isOpen) {
+      return `
+      transform: rotate(-90deg);
+      background-color: #aed4fb;
+      `;
+    }
+  }}
 `;
 
 export default Button;

packages/strapi-plugin-content-manager/admin/src/components/DynamicZone/ComponentsPicker.js

@@ -0,0 +1,7 @@
+import styled from 'styled-components';
+
+const ComponentsPicker = styled.div`
+  display: ${({ isOpen }) => (isOpen ? 'flex' : 'none')};
+`;
+
+export default ComponentsPicker;

packages/strapi-plugin-content-manager/admin/src/components/DynamicZone/Wrapper.js

@@ -1,7 +1,23 @@
 import styled from 'styled-components';
 
 const Wrapper = styled.div`
+  position: relative;
+  margin: 18px 0;
   text-align: center;
+
+  .info {
+    position: absolute;
+    display: ${({ show }) => (show ? 'block' : 'none')};
+    top: 25%;
+    left: calc(50% + 46px);
+    > span {
+      letter-spacing: 0.5px;
+      text-transform: uppercase;
+      color: #007eff;
+      font-size: 11px;
+      font-weight: 700;
+    }
+  }
 `;
 
 export default Wrapper;

packages/strapi-plugin-content-manager/admin/src/components/DynamicZone/index.js

@@ -1,31 +1,52 @@
 import React, { memo, useState } from 'react';
 import { get } from 'lodash';
 import PropTypes from 'prop-types';
+import { Remove } from '@buffetjs/icons'; // TODO use css instead
+import { FormattedMessage } from 'react-intl';
+import pluginId from '../../pluginId';
 import useDataManager from '../../hooks/useDataManager';
+import DynamicComponentCard from '../DynamicComponentCard';
 import Button from './Button';
+import ComponentsPicker from './ComponentsPicker';
 import Wrapper from './Wrapper';
 
 const DynamicZone = ({ name }) => {
   const [isOpen, setIsOpen] = useState(false);
+  const [isOver, setIsOver] = useState(false);
   const { allLayoutData, layout } = useDataManager();
   const dynamicZoneAvailableComponents = get(
     layout,
     ['schema', 'attributes', name, 'components'],
     []
   );
+  const handleMouseEvent = () => setIsOver(prev => !prev);
+  const displayInfo = isOver && !isOpen;
   console.log({ allLayoutData, dynamicZoneAvailableComponents });
 
   return (
     <>
-      Dynamic components data here
+      <Wrapper show={displayInfo}>
-      <Wrapper>
         <Button
           isOpen={isOpen}
           type="button"
+          onMouseEnter={handleMouseEvent}
+          onMouseLeave={handleMouseEvent}
           onClick={() => setIsOpen(prev => !prev)}
         >
-          X
+          <Remove />
         </Button>
+
+        <div className="info">
+          <FormattedMessage
+            id={`${pluginId}.components.DynamicZone.add-compo`}
+            values={{ componentName: name }}
+          />
+        </div>
+        <ComponentsPicker isOpen={isOpen}>
+          {dynamicZoneAvailableComponents.map(name => {
+            return <DynamicComponentCard key={name} componentUid={name} />;
+          })}
+        </ComponentsPicker>
       </Wrapper>
     </>
   );

packages/strapi-plugin-content-manager/admin/src/translations/en.json

@@ -7,6 +7,7 @@
   "components.AddFilterCTA.add": "Filters",
   "components.AddFilterCTA.hide": "Filters",
   "components.DraggableAttr.edit": "Click to edit",
+  "components.DynamicZone.add-compo": "Add a component to {componentName}",
   "components.EmptyAttributesBlock.button": "Go to settings page",
   "components.EmptyAttributesBlock.description": "You can change your settings",
   "components.FieldItem.linkToComponentLayout": "Set the component's layout",

packages/strapi-plugin-content-manager/admin/src/translations/fr.json

@@ -7,6 +7,7 @@
   "components.AddFilterCTA.add": "Filtres",
   "components.AddFilterCTA.hide": "Filtres",
   "components.DraggableAttr.edit": "Cliquez pour modifier",
+  "components.DynamicZone.add-compo": "Ajouter un composant à {componentName}",
   "components.EmptyAttributesBlock.button": "Voir la page des configurations",
   "components.EmptyAttributesBlock.description": "Vous pouvez modifiez vos paramètres",
   "components.FieldItem.linkToComponentLayout": "Modifier le layout du composant",