Design EmptyList

Signed-off-by: soupette <cyril.lpz@gmail.com>

packages/strapi-plugin-upload/admin/src/components/CardEmpty/Bar.js

@@ -0,0 +1,10 @@
+import styled from 'styled-components';
+
+const Bar = styled.div`
+  height: 10px;
+  width: ${({ isSmall }) => (isSmall ? '64px' : '110px')};
+  margin-top: ${({ isSmall }) => (isSmall ? '15px' : '8px')};
+  background: #f6f6f6;
+`;
+
+export default Bar;

packages/strapi-plugin-upload/admin/src/components/CardEmpty/Wrapper.js

@@ -0,0 +1,7 @@
+import styled from 'styled-components';
+
+const Wrapper = styled.div`
+  margin-bottom: 35px;
+`;
+
+export default Wrapper;

packages/strapi-plugin-upload/admin/src/components/CardEmpty/index.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import CardImgWrapper from '../CardImgWrapper';
+import Bar from './Bar';
+import Wrapper from './Wrapper';
+
+const CardEmpty = () => {
+  return (
+    <Wrapper>
+      <CardImgWrapper withOverlay />
+      <Bar isSmall />
+      <Bar />
+    </Wrapper>
+  );
+};
+
+export default CardEmpty;

packages/strapi-plugin-upload/admin/src/components/CardImgWrapper/index.js

@@ -3,9 +3,9 @@ import PropTypes from 'prop-types';
 
 const CardImgWrapper = styled.div`
   height: ${({ isSmall }) => (isSmall ? '127px' : '156px')};
-  width: ${({ isSmall }) => (isSmall ? '200px' : '245px')};
+  min-width: ${({ isSmall }) => (isSmall ? '200px' : '245px')};
   border-radius: 2px;
-  background: #333740;
+  background: ${({ withOverlay }) => (withOverlay ? '#F6F6F6' : '#333740')};
 `;
 
 CardImgWrapper.defaultProps = {

packages/strapi-plugin-upload/admin/src/components/ListEmpty/Wrapper.js

@@ -0,0 +1,33 @@
+import styled from 'styled-components';
+
+const Wrapper = styled.div`
+  position: relative;
+  margin-top: 25px;
+  padding: 0;
+
+  .btn-wrapper {
+    position: absolute;
+    top: 161px;
+    // left: 50%;
+    height: 100px;
+    width: 100%;
+    margin-left: -50px;
+    margin-top: -50px;
+    text-align: center;
+
+    > p {
+      line-height: 18px;
+    }
+    .title {
+      margin-bottom: 2px;
+
+      font-size: 18px;
+      font-weight: 500;
+    }
+    .subtitle {
+      font-size: 13px;
+    }
+  }
+`;
+
+export default Wrapper;

packages/strapi-plugin-upload/admin/src/components/ListEmpty/index.js

@@ -0,0 +1,59 @@
+import React from 'react';
+import { Button } from '@buffetjs/core';
+import { FormattedMessage } from 'react-intl';
+import PropTypes from 'prop-types';
+import getTrad from '../../utils/getTrad';
+import generateRows from './utils/generateRows';
+import CardEmpty from '../CardEmpty';
+import Wrapper from './Wrapper';
+
+const ListEmpty = ({ onClick }) => {
+  const rows = generateRows(4);
+
+  return (
+    <Wrapper className="container-fluid">
+      {rows.map(row => {
+        return (
+          <div className="row" key={row.key}>
+            {row.rows.map(key => {
+              return (
+                <div className="col-md-3" key={key}>
+                  <CardEmpty />
+                </div>
+              );
+            })}
+          </div>
+        );
+      })}
+      <div className="btn-wrapper">
+        <FormattedMessage id={getTrad('list.assets-empty.title')}>
+          {content => <p className="title">{content}</p>}
+        </FormattedMessage>
+        <FormattedMessage id={getTrad('list.assets-empty.subtitle')}>
+          {content => <p className="subtitle">{content}</p>}
+        </FormattedMessage>
+
+        <FormattedMessage id={getTrad('header.actions.upload-assets')}>
+          {label => (
+            <Button
+              color="primary"
+              label={label}
+              onClick={onClick}
+              type="button"
+            />
+          )}
+        </FormattedMessage>
+      </div>
+    </Wrapper>
+  );
+};
+
+ListEmpty.defaultProps = {
+  onClick: () => {},
+};
+
+ListEmpty.propTypes = {
+  onClick: PropTypes.func,
+};
+
+export default ListEmpty;

packages/strapi-plugin-upload/admin/src/components/ListEmpty/utils/generateRows.js

@@ -0,0 +1,12 @@
+const generateRows = numberOfRows => {
+  const rows = Array.from({ length: numberOfRows }, (_, i) => {
+    return {
+      key: i,
+      rows: Array.from({ length: 4 }, (_, i) => i),
+    };
+  });
+
+  return rows;
+};
+
+export default generateRows;

packages/strapi-plugin-upload/admin/src/components/ListEmpty/utils/tests/generateRows.test.js

@@ -0,0 +1,29 @@
+import generateRows from '../generateRows';
+
+describe('MEDIA LIBRARY | components | ListEmpty | utils', () => {
+  describe('generateRows', () => {
+    it('should return an array of object', () => {
+      const numberOfRows = 4;
+      const expected = [
+        {
+          key: 0,
+          rows: [0, 1, 2, 3],
+        },
+        {
+          key: 1,
+          rows: [0, 1, 2, 3],
+        },
+        {
+          key: 2,
+          rows: [0, 1, 2, 3],
+        },
+        {
+          key: 3,
+          rows: [0, 1, 2, 3],
+        },
+      ];
+
+      expect(generateRows(numberOfRows)).toEqual(expected);
+    });
+  });
+});

packages/strapi-plugin-upload/admin/src/containers/HomePage/index.js

@@ -7,6 +7,7 @@ import ControlsWrapper from '../../components/ControlsWrapper';
 import SelectAll from '../../components/SelectAll';
 import SortPicker from '../../components/SortPicker';
 // import List from '../../components/List';
+import ListEmpty from '../../components/ListEmpty';
 import getHeaderLabel from './utils/getHeaderLabel';
 import init from './init';
 import reducer, { initialState } from './reducer';
@@ -72,6 +73,10 @@ const HomePage = () => {
         </SortPicker>
         <AddFilterCTA />
       </ControlsWrapper>
+      <ListEmpty
+        // TODO
+        onClick={() => {}}
+      />
       {/* <List data={data} /> */}
     </Container>
   );

packages/strapi-plugin-upload/admin/src/translations/en.json

@@ -3,6 +3,8 @@
   "header.content.assets-empty": "No asset",
   "header.content.assets-multiple": "{number} assets",
   "header.content.assets-single": "1 asset",
+  "list.assets-empty.title": "There is no asset yet",
+  "list.assets-empty.subtitle": "Add a first one to the list.",
   "plugin.name": "Media Library",
   "plugin.description.long": "Media file management.",
   "plugin.description.short": "Media file management.",