feat(molecule): setup card divider molecule

- setup carddivider molecule
- setup styleguidist for the carddivider
- write tests for the carddivider molecule
- add title font size variable attribute
- refactor divider to display inline
- add webpack molecule module resolver
- add jest config molecule module resolver
- add molecule sections to styleguide configuration

[Finishes #167271157]

package.json

@@ -9,7 +9,9 @@
       "^<variables>/(.*)$": "<rootDir>/src/styles/variables/$1",
       "^<pages>/(.*)$": "<rootDir>/src/components/pages/$1",
       "^<core>/(.*)$": "<rootDir>/src/core/$1",
-      "^<fixtures>/(.*)$": "<rootDir>/src/fixtures/$1"
+      "^<fixtures>/(.*)$": "<rootDir>/src/fixtures/$1",
+      "^<atoms>/(.*)$": "<rootDir>/src/components/UI/atoms/$1",
+      "^<molecules>/(.*)$": "<rootDir>/src/components/UI/molecules/$1"
     },
     "coverageReporters": [
       "json-summary",

src/components/UI/atoms/Divider/Divider.jsx

@@ -10,20 +10,20 @@ import spacing from '<variables>/spacing';
  *
  * @prop {string} height - height
  * @prop {string} color - color
- * @prop {string} maxWidth - maxWidth
+ * @prop {string} width - width
  * @prop {string} margin - margin
 
  *
  * @return {component} Divider
  */
 const Divider = ({
-  maxWidth,
+  width,
   height,
   margin,
   color,
 }) => (
   <Divider.Container
-    maxWidth={maxWidth}
+    width={width}
     height={height}
     margin={margin}
     color={color}
@@ -32,31 +32,33 @@ const Divider = ({
 );
 
 Divider.propTypes = {
-  maxWidth: PropTypes.oneOf(Object.keys(spacing)),
+  width: PropTypes.oneOf(Object.keys(spacing)),
   height: PropTypes.oneOf(Object.keys(spacing)),
   margin: PropTypes.oneOf(Object.keys(spacing)),
   color: PropTypes.oneOf(Object.keys(borderColors)),
 };
 
 Divider.defaultProps = {
   color: 'primary',
-  maxWidth: 'xxl',
+  width: 'xxl',
   height: 'zero',
-  margin: 'md',
+  margin: 'xs',
 };
 
 Divider.Container = styled.div`
 ${({
-    maxWidth,
+    width,
     height,
     margin,
     color,
     theme,
   }) => `
-border: 1px solid ${theme.borderColors[color]}
-max-width: ${theme.spacing[maxWidth]}
-height: ${theme.spacing[height]}
-margin: ${theme.spacing[margin]}
+content: '';
+display: inline-block;
+border: 1px solid ${theme.borderColors[color]};
+width: ${theme.spacing[width]};
+height: ${theme.spacing[height]};
+margin: ${theme.spacing[margin]};
 `}
 `;
 export default Divider;

src/components/UI/atoms/Divider/Divider.md

@@ -7,15 +7,15 @@ Divider Default:
 Divider with all attributes: 
 ```jsx
 <Divider
-  maxWidth="xxl"
+  width="xxl"
   heigth="zero"
   color="black" />
 ```
 
 Divider with max-width:
 ```jsx
 <Divider
-  maxWidth="md"
+  width="md"
   />
 ```
 

src/components/UI/atoms/Divider/Divider.spec.js

@@ -15,10 +15,10 @@ describe('Divider', () => {
   });
 
   it('should render the Divider Component with max-width', () => {
-    const { container } = render(<Divider maxWidth="md" />);
+    const { container } = render(<Divider width="md" />);
 
     expect(container.lastChild).toHaveStyle(`
-            maxWidth: md
+            width: md
         `);
   });
 

src/components/UI/molecules/CardDivider/CardDivider.jsx

@@ -0,0 +1,120 @@
+import React, { Fragment } from 'react';
+import PropTypes from 'prop-types';
+
+import FlexContainer from '<atoms>/layouts/FlexContainer/FlexContainer';
+import Divider from '<atoms>/Divider/Divider';
+import Text from '<atoms>/Text/Text';
+import spacing from '<variables>/spacing';
+import { fontWeights, fontSizes } from '<variables>/fonts';
+import { textColors, borderColors } from '<variables>/colorPalette';
+
+/**
+ * @description - CardDivider Component
+ *
+ * @prop {string} text - divider text
+ * @prop {string} cardDividerMargin - divider margin
+ * @prop {string} width - maxWidth
+ * @prop {string} height - height
+ * @prop {string} dividerColor - color
+ * @prop {string} margin - margin
+ * @prop {string} fontSize - font Size
+ * @prop {string} textAlign - text Align
+ * @prop {string} textColor - color
+ * @prop {string} textDisplay - display
+ * @prop {string} textTransform - text transform
+ * @prop {string} fontWeight - fontWeight
+ * @prop {string} textPadding - text padding
+ * @prop {string} content - content
+ * @prop {string} cardDividerPadding - card divider padding
+ * @prop {string} display - container display
+ *
+ * @return {component} CardDivider
+ */
+const CardDivider = ({
+  text,
+  cardDividerMargin,
+  width,
+  height,
+  margin,
+  dividerColor,
+  fontSize,
+  textAlign,
+  textColor,
+  textDisplay,
+  textTransform,
+  fontWeight,
+  textPadding,
+  content,
+  display,
+  cardDividerPadding,
+}) => {
+  const SingleDivider = () => (
+    <Divider
+      width={width}
+      height={height}
+      margin={margin}
+      dividerColor={dividerColor}
+    />
+  );
+  const DividerText = () => (
+    <Text
+      fontSize={fontSize}
+      textAlign={textAlign}
+      color={textColor}
+      display={textDisplay}
+      textTransform={textTransform}
+      padding={textPadding}
+      content={content}
+      fontWeight={fontWeight}
+    >
+      {text}
+    </Text>
+  );
+
+  return (
+    <FlexContainer
+      display={display}
+      margin={cardDividerMargin}
+      padding={cardDividerPadding}
+    >
+      <SingleDivider />
+      {text && (
+        <Fragment>
+          <DividerText />
+          <SingleDivider />
+        </Fragment>
+      )}
+    </FlexContainer>
+  );
+};
+
+CardDivider.propTypes = {
+  text: PropTypes.string,
+  textDisplay: PropTypes.oneOf(['block', 'inline', 'inline-block', 'none']),
+  textColor: PropTypes.oneOf(Object.keys(textColors)),
+  fontSize: PropTypes.oneOf(Object.keys(fontSizes)),
+  textAlign: PropTypes.oneOf(['left', 'center', 'right', 'justify']),
+  textTransform: PropTypes.oneOf([
+    'none',
+    'capitalize',
+    'uppercase',
+    'lowercase',
+  ]),
+  content: PropTypes.oneOf(['true', 'false']),
+  textPadding: PropTypes.oneOf(Object.keys(spacing)),
+  fontWeight: PropTypes.oneOf(Object.keys(fontWeights)),
+  width: PropTypes.oneOf(Object.keys(spacing)),
+  height: PropTypes.oneOf(Object.keys(spacing)),
+  margin: PropTypes.oneOf(Object.keys(spacing)),
+  dividerColor: PropTypes.oneOf(Object.keys(borderColors)),
+  cardDividerMargin: PropTypes.oneOf(Object.keys(spacing)),
+  cardDividerPadding: PropTypes.oneOf(Object.keys(spacing)),
+  display: PropTypes.oneOf(['block', 'inline', 'flex', 'inline-block', 'none']),
+};
+
+CardDivider.defaultProps = {
+  display: 'block',
+  cardDividerPadding: 'sm',
+};
+
+export default CardDivider;

src/components/UI/molecules/CardDivider/CardDivider.md

@@ -0,0 +1,27 @@
+CardDivider Default:
+
+```jsx
+<CardDivider />
+```
+
+CardDivider With All Props:
+```jsx
+  <CardDivider
+    text='Sign In With'
+    fontSize='title'
+    textColor='primary'
+    cardDividerMargin='md'
+    textAlign='justify'
+    textDisplay='inline-block'
+    textTransform='capitalize'
+    textPadding='xs'
+    content='false'
+    fontWeight='bold'
+    width='xxl'
+    height='zero'
+    margin='xs'
+    dividerColor='primary'
+    cardDividerPadding='sm'
+    display='block'
+  />
+```

src/components/UI/molecules/CardDivider/CardDivider.spec.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import { render, cleanup } from '<src>/helpers/testUtils';
+import CardDivider from './CardDivider';
+import '@testing-library/jest-dom/extend-expect';
+
+afterEach(cleanup);
+
+describe('CardDivider', () => {
+  it('should render the CardDivider component', () => {
+    const { container } = render(<CardDivider />);
+
+    expect(container.lastChild).toBeTruthy();
+  });
+
+  it('should render card divider with text', () => {
+    const { getByText } = render(<CardDivider text='Sign In With' />);
+
+    expect(getByText('Sign In With')).toBeTruthy();
+  });
+});

src/styles/variables/fonts.js

@@ -1,6 +1,7 @@
 export const fontSizes = {
   small: '0.8rem',
   normal: '1.6rem',
+  title: '2.0rem',
   medium: '2.4rem',
   large: '3.2rem',
   xlarge: '4.8rem',

styleguide.config.js

@@ -6,6 +6,10 @@ module.exports = {
       name: 'Atoms',
       components: 'src/components/UI/atoms/**/[A-Z]*.jsx',
     },
+    {
+      name: 'Molecules',
+      components: 'src/components/UI/molecules/**/[A-Z]*.jsx',
+    },
   ],
   styleguideComponents: {
     Wrapper: path.join(__dirname, '/src/styles/ThemeWrapper/ThemeWrapper.jsx'),

webpack/webpack.common.js

@@ -57,6 +57,7 @@ module.exports = {
       '<core>': path.resolve(__dirname, '../src/core'),
       '<atoms>': path.resolve(__dirname, '../src/components/UI/atoms'),
       '<image>':path.resolve(__dirname,'../public/assets/images'),
+      '<molecules>': path.resolve(__dirname, '../src/components/UI/molecules'),
     },
     extensions: [' ', '.js', '.jsx'],
   },