PR review

packages/strapi-helper-plugin/lib/src/index.js

@@ -1,3 +1,7 @@
+// // Assets
+export { default as colors } from './assets/styles/colors';
+export { default as sizes } from './assets/styles/sizes';
+
 // // CommonPropTypes
 export { default as routerPropTypes } from './commonPropTypes/router';
 

packages/strapi-plugin-content-type-builder/admin/src/assets/styles/colors.js

@@ -1,10 +0,0 @@
-const colors = {
-  beige: '#eff3f6',
-  black: '#3b3b3b',
-  brightGrey: '#f0f3f8',
-  green: '#27b70f',
-  greyOpacity: 'rgba(14, 22, 34, 0.02)',
-  lightGrey: '#fafafa',
-};
-
-export default colors;

packages/strapi-plugin-content-type-builder/admin/src/assets/styles/sizes.js

@@ -1,13 +0,0 @@
-const sizes = {
-  header: {
-    height: '6rem',
-  },
-  margin: 10,
-  modal: {
-    footer: {
-      height: '6rem',
-    },
-  },
-};
-
-export default sizes;

packages/strapi-plugin-content-type-builder/admin/src/components/ButtonModalPrimary/index.js

@@ -7,21 +7,17 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { FormattedMessage } from 'react-intl';
-import { Button } from 'reactstrap';
 
-import styles from './styles.scss';
+import StyledButtonModalPrimary from './StyledButtonModalPrimary';
 
 function ButtonModalPrimary({ add, message, onClick, type }) {
-  /* istanbul ignore next */
+  const icon = add ? <i className={`fa fa-plus`} /> : null;
-  // Ignoring the style condition is intended...
-  const className = add
-    ? styles.buttonModalPrimaryAdd
-    : styles.buttonModalPrimary;
 
   return (
-    <Button className={className} onClick={onClick} type={type}>
+    <StyledButtonModalPrimary onClick={onClick} type={type}>
+      {icon}
       <FormattedMessage id={message} />
-    </Button>
+    </StyledButtonModalPrimary>
   );
 }
 

packages/strapi-plugin-content-type-builder/admin/src/components/ButtonModalPrimary/styles.scss

@@ -1,32 +0,0 @@
-.buttonModalPrimary,
-.buttonModalPrimaryAdd {
-  height: 3rem;
-  min-width: 11rem;
-  background: linear-gradient(315deg, #0097f6 0%, #005eea 100%);
-  padding: 0 15px;
-  -webkit-font-smoothing: antialiased;
-  cursor: pointer;
-  border-radius: 3px;
-  color: white;
-  border: none;
-  font-family: Lato;
-  font-weight: 600;
-  outline: 0;
-  &:hover,
-  &:active {
-    border: none;
-    background: linear-gradient(315deg, #0097f6 0%, #005eea 100%);
-    box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.15);
-    color: white;
-  }
-}
-
-.buttonModalPrimaryAdd {
-  &:before {
-    content: '\F067';
-    font-family: 'FontAwesome';
-    font-weight: 600;
-    font-size: 1.3rem;
-    margin-right: 13px;
-  }
-}

packages/strapi-plugin-content-type-builder/admin/src/components/ButtonModalSecondary/index.js

@@ -1,25 +1,20 @@
 /**
-*
+ *
-* ButtonModalSecondary
+ * ButtonModalSecondary
-*
+ *
-*/
+ */
 
 import React from 'react';
 import PropTypes from 'prop-types';
 import { FormattedMessage } from 'react-intl';
-import { Button } from 'reactstrap';
 
-import styles from './styles.scss';
+import StyledButtonModalSecondary from './StyledButtonModalSecondary';
 
 function ButtonModalSecondary({ message, onClick, type }) {
   return (
-    <Button
+    <StyledButtonModalSecondary onClick={onClick} type={type}>
-      className={styles.buttonModalSecondary}
-      onClick={onClick}
-      type={type}
-    >
       <FormattedMessage id={message} />
-    </Button>
+    </StyledButtonModalSecondary>
   );
 }
 

packages/strapi-plugin-content-type-builder/admin/src/components/ButtonModalSecondary/tests/index.test.js

@@ -5,6 +5,11 @@ import ButtonModalSecondary from '../index';
 
 describe('<ButtonModalSecondary />', () => {
   it('should not crash', () => {
-    shallow(<ButtonModalSecondary onClick={jest.fn()} message="" />);
+    shallow(
+      <ButtonModalSecondary
+        onClick={jest.fn()}
+        message="app.utils.defaultMessage"
+      />
+    );
   });
 });

packages/strapi-plugin-content-type-builder/admin/src/components/ButtonModalSuccess/StyledButtonModalSuccess.js

@@ -2,7 +2,8 @@ import styled from 'styled-components';
 import { Button } from 'reactstrap';
 
 import img from '../../assets/icons/icon_check.png';
-import colors from '../../assets/styles/colors';
+
+import { colors } from 'strapi-helper-plugin';
 
 const StyledButtonModalSuccess = styled(Button)`
   position: relative;

packages/strapi-plugin-content-type-builder/admin/src/components/FooterModal/index.js

@@ -6,8 +6,7 @@
 
 import styled from 'styled-components';
 
-import colors from '../../assets/styles/colors';
+import { colors, sizes } from 'strapi-helper-plugin';
-import sizes from '../../assets/styles/sizes';
 
 const FooterModal = styled.div`
   padding-top: ${sizes.margin * 0.9}px;

packages/strapi-plugin-content-type-builder/admin/src/components/HeaderModal/index.js

@@ -6,8 +6,7 @@
 
 import styled from 'styled-components';
 
-import colors from '../../assets/styles/colors';
+import { colors, sizes } from 'strapi-helper-plugin';
-import sizes from '../../assets/styles/sizes';
 
 const HeaderModal = styled.div`
   color: ${colors.black};

packages/strapi-plugin-content-type-builder/admin/src/containers/App/tests/actions.test.js

@@ -246,7 +246,7 @@ describe('Content Type Builder Action utils', () => {
   });
 
   describe('BuildGroupAttributes', () => {
-    it('should generate an array of object with an object', () => {
+    it('should generate an array of attribute objects given an object', () => {
       const attributes = {
         name: {
           type: 'string',

packages/strapi-plugin-content-type-builder/admin/src/containers/LeftMenu/StyledLeftMenu.js

@@ -6,20 +6,12 @@
 
 import styled from 'styled-components';
 
-import sizes from '../../assets/styles/sizes';
+import { colors, sizes } from 'strapi-helper-plugin';
-
-// Specific colors for left menu
-const colors = {
-  black: '#2D3138',
-  grey: '#666B74',
-  mediumGrey: '#f2f3f4',
-  lightGrey: '#E9EAEB',
-};
 
 const StyledLeftMenu = styled.div`
   width: 100%;
   min-height: calc(100vh - ${sizes.header.height});
-  background-color: ${colors.mediumGrey};
+  background-color: ${colors.leftMenu.mediumGrey};
   padding-top: 0.5rem;
   padding-left: 2rem;
   padding-right: 2rem;
@@ -79,7 +71,7 @@ const StyledLeftMenu = styled.div`
         display: block;
         text-decoration: none;
         p {
-          color: ${colors.black};
+          color: ${colors.leftMenu.black};
         }
         i {
           font-size: 11px;
@@ -87,10 +79,10 @@ const StyledLeftMenu = styled.div`
           color: ${colors.grey};
         }
         &.active {
-          background-color: ${colors.lightGrey};
+          background-color: ${colors.leftMenu.lightGrey};
           font-weight: 700;
           i {
-            color: ${colors.black};
+            color: ${colors.leftMenu.black};
           }
         }
       }

packages/strapi-plugin-content-type-builder/admin/src/containers/LeftMenu/tests/index.test.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import { shallow } from 'enzyme';
 import formatMessagesWithPluginId from 'testUtils/formatMessages';
 import pluginTradsEn from '../../../translations/en.json';
 import { BrowserRouter } from 'react-router-dom';
@@ -119,17 +120,25 @@ describe('CTB <LeftMenu />', () => {
   it('Should not crash', () => {
     renderCompo(context);
   });
+  describe('<LeftMenu /> lifecycle', () => {
+    let topCompo;
+    afterEach(() => {
+      topCompo.unmount();
+    });
 
-  describe('CTB <ModelPage /> render', () => {
+    describe('Render links', () => {
-    it('should render 5 links in the menu', () => {
+      it('should render 5 links in the menu', () => {
-      const wrapper = renderComponent();
+        topCompo = renderComponent();
-      const links = wrapper.find(LeftMenuLink);
+        const links = topCompo.find(LeftMenuLink);
 
-      expect(links).toHaveLength(5);
+        expect(links).toHaveLength(5);
+      });
     });
   });
 
-  it('should return a plural string for the user', () => {
+  describe('Retrieve section title', () => {
-    expect(getSectionTitle('model', [])).toContain('singular');
+    it('should return a plural string for the user', () => {
+      expect(getSectionTitle('model', [])).toContain('singular');
+    });
   });
 });

packages/strapi-plugin-content-type-builder/admin/src/containers/ViewContainer/StyledViewContainer.js

@@ -6,8 +6,7 @@
 
 import styled from 'styled-components';
 
-import colors from '../../assets/styles/colors';
+import { colors, sizes } from 'strapi-helper-plugin';
-import sizes from '../../assets/styles/sizes';
 
 const StyledViewContainer = styled.div`
   min-height: calc(100vh - ${sizes.header.height});

packages/strapi-plugin-content-type-builder/admin/src/containers/ViewContainer/tests/index.test.js

@@ -10,7 +10,6 @@ const renderCompo = (props = {}) => {
 const defaultProps = {
   children: null,
   featureType: 'group',
-  handleClickIcon: jest.fn(),
   headerTitle: 'Ingredients',
   headerDescription: 'description',
   match: {
@@ -18,6 +17,7 @@ const defaultProps = {
       groupName: 'ingredients',
     },
   },
+  onClickIcon: jest.fn(),
   pluginHeaderActions: [],
 };