Merge pull request #13 from xproglabs/modules/navigator

Modules/navigator

.eslintignore

@@ -1 +1,4 @@
-/example
+/example
+/index.js
+/templates.js
+/teasers.js

.npmignore

@@ -5,3 +5,4 @@
 .eslintignore
 .eslintrc.json
 /stories
+/mockup

.storybook/main.js

@@ -2,6 +2,7 @@ module.exports = {
   stories: ['../stories/**/*.stories.(js|mdx)'],
   addons: [
     '@storybook/addon-knobs/register',
+    '@storybook/addon-storysource',
     {
       name: '@storybook/addon-docs',
       options: {

.storybook/preview-head.html

@@ -0,0 +1 @@
+<link href="https://fonts.googleapis.com/css2?family=Arvo:wght@700&family=Merriweather:wght@400;700&family=Work+Sans:wght@400;700&display=swap" rel="stylesheet">

CHANGELOG.md

@@ -1,3 +1,17 @@
+# v1.2.1 (Sun Jun 29 2020)
+- Adiciona Templates
+- Adiciona Teasers
+- Adiciona Block
+- Adiciona Article
+- Adiciona Grid
+- Adiciona folder navigator com o SideMenu e TopBar
+- Adiciona componente Subject
+- Adiciona componente Typography
+- Separa build do rollup em três paths: xprog-ds/ xprog-ds/templates xprog-ds/teasers
+- Atualiza readme com novo passo para uso nos projetos
+- Atualiza .ignores
+- Remove componente Icon
+
 # v1.2.0 (Sun Jun 02 2020)
 - Add storybook
 - Change grayscale colors to neutral

README.md

@@ -6,7 +6,8 @@ Prerequisites:
 
 Use xprog-ds on your project:
 - npm install xprog-ds
-- Create index.scss file (here goes your stylesheet import [@forward 'xprog-ds/styles']
+- Create index.scss file (here you can redefine tokens [@forward 'xprog-ds/styles']
+- Import xprog-ds router in your index.scss file [@forward 'xprog-ds/styles/router.scss']
 - Create router.scss file (here goes all imports from your components [@forward 'path-to-component']
 - Import router.scss in your root index.js file (pages.js for next)
 - For every file SCSS you want to use the xprog-ds you must `@use 'path-to-your-index.scss' as *`; 

components/Article/index.js

@@ -0,0 +1,21 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+
+import Block from '../Block';
+
+const Article = () => {
+  return (
+    <Block 
+      custom="xp-article">
+      Article
+    </Block>
+  );
+};
+/* required props */
+Article.propTypes = {
+  content: PropTypes.object
+};
+Article.defaultProps = {
+  content: {}
+};
+export default Article;

components/Article/index.scss

@@ -0,0 +1,5 @@
+@use '../../styles' as *;
+
+.xp-article {
+
+}

components/Block/index.js

@@ -0,0 +1,164 @@
+import classnames from 'classnames';
+import PropTypes from 'prop-types';
+import React from 'react';
+
+const Block = (props) => {
+  const {
+    alignBetween,
+    alignBottom,
+    alignCenter,
+    alignEvenly,
+    alignLeft,
+    alignMiddle,
+    alignRight,
+    alignTop,
+    bgColor,
+    custom,
+    functions,
+    fColor,
+    fitH,
+    fitW,
+    m,
+    mb,
+    ml,
+    mr,
+    mt,
+    p,
+    pb,
+    pl,
+    pr,
+    pt,
+    row,
+    height,
+    width,
+    style
+  } = props;
+
+  const getStyle = () => {
+    switch(style) {
+      case '3-col':
+        return 'block-three-col';
+      case '4-col':
+        return 'block-four-col';
+      default:
+        return '';
+    }
+  };
+
+  const classes = classnames({
+    'ds-block': true,
+    'fx-align-between': !row && alignBetween,
+    'fx-align-bottom': !row && alignBottom,
+    'fx-align-center': !row && alignCenter,
+    'fx-align-evenly': !row && alignEvenly,
+    'fx-align-left': !row && alignLeft,
+    'fx-align-middle': !row && alignMiddle,
+    'fx-align-right': !row && alignRight,
+    'fx-align-top': !row && alignTop,
+    'fy-align-between': row && alignBetween,
+    'fy-align-bottom': row && alignBottom,
+    'fy-align-center': row && alignCenter,
+    'fy-align-evenly': row && alignEvenly,
+    'fy-align-left': row && alignLeft,
+    'fy-align-middle': row && alignMiddle,
+    'fy-align-right': row && alignRight,
+    'fy-align-top': row && alignTop,
+    'fx-dir-col': !row,
+    'fx-dir-row': row,
+    'fx-fit-h': fitH,
+    'fx-fit-w': fitW,
+    [`xp-bg-${bgColor}`]: bgColor,
+    [`xp-f-${fColor}`]: fColor,
+    [`xp-h-${height}`]: height,
+    [`xp-m-${m}`]: m,
+    [`xp-mb-${mb}`]: mb,
+    [`xp-ml-${ml}`]: ml,
+    [`xp-mr-${mr}`]: mr,
+    [`xp-mt-${mt}`]: mt,
+    [`xp-p-${p}`]: p,
+    [`xp-pb-${pb}`]: pb,
+    [`xp-pl-${pl}`]: pl,
+    [`xp-pr-${pr}`]: pr,
+    [`xp-pt-${pt}`]: pt,
+    [`xp-w-${width}`]: width,
+    [`${custom}`]: custom
+  });
+
+  const {handleClick} = functions;
+  return (
+    <div className={classnames(classes, getStyle())} 
+      onClick={handleClick && handleClick}
+    >
+      {props.children && props.children}
+    </div>
+  );
+};
+
+Block.propTypes = {
+  alignBetween: PropTypes.bool,
+  alignBottom: PropTypes.bool,
+  alignCenter: PropTypes.bool,
+  alignEvenly: PropTypes.bool,
+  alignLeft: PropTypes.bool,
+  alignMiddle: PropTypes.bool,
+  alignRight: PropTypes.bool,
+  alignTop: PropTypes.bool,
+  bgColor: PropTypes.string,
+  children: PropTypes.oneOfType([
+    PropTypes.array,
+    PropTypes.object,
+    PropTypes.node
+  ]),
+  custom: PropTypes.string,
+  functions: PropTypes.object,
+  fColor: PropTypes.string,
+  fitH: PropTypes.bool,
+  fitW: PropTypes.bool,
+  m: PropTypes.oneOf([
+    '0', 'xs', 'sm', 'md', 'lg', 'xl'
+  ]),
+  mb: PropTypes.oneOf([
+    '0', 'xs', 'sm', 'md', 'lg', 'xl'
+  ]),
+  ml: PropTypes.oneOf([
+    '0', 'xs', 'sm', 'md', 'lg', 'xl'
+  ]),
+  mr: PropTypes.oneOf([
+    '0', 'xs', 'sm', 'md', 'lg', 'xl'
+  ]),
+  mt: PropTypes.oneOf([
+    '0', 'xs', 'sm', 'md', 'lg', 'xl'
+  ]),
+  p: PropTypes.oneOf([
+    '0', 'xs', 'sm', 'md', 'lg', 'xl'
+  ]),
+  pb: PropTypes.oneOf([
+    '0', 'xs', 'sm', 'md', 'lg', 'xl'
+  ]),
+  pl: PropTypes.oneOf([
+    '0', 'xs', 'sm', 'md', 'lg', 'xl'
+  ]),
+  pr: PropTypes.oneOf([
+    '0', 'xs', 'sm', 'md', 'lg', 'xl'
+  ]),
+  pt: PropTypes.oneOf([
+    '0', 'xs', 'sm', 'md', 'lg', 'xl'
+  ]),
+  row: PropTypes.bool,
+  height: PropTypes.oneOf([
+    'xs', 'sm', 'md', 'lg', 'xl', 'full'
+  ]),
+  width: PropTypes.oneOf([
+    'xs', 'sm', 'md', 'lg', 'xl', 'full'
+  ]),
+  style: PropTypes.oneOf([
+    '3-col', '4-col'
+  ])
+};
+
+Block.defaultProps = {
+  functions: {},
+  p: '0'
+};
+
+export default Block;