Fix: 'Dist' files build

ingresse · Oct 5, 2018 · 9e27afc · 9e27afc
1 parent 9aa7393
commit 9e27afc
Show file tree

Hide file tree

Showing 18 changed files with 107 additions and 25 deletions.
diff --git a/.docz/app/db.json b/.docz/app/db.json
@@ -117,6 +117,11 @@
  "depth": 2,
  "slug": "block",
  "value": "Block"
+ },
+ {
+ "depth": 2,
+ "slug": "disabled",
+ "value": "Disabled"
  }
  ]
  }

diff --git a/README.md b/README.md
@@ -1,4 +1,4 @@
-# Aphrodite
+# Aphrodite React
 ### UI framework from ingresse.com
 
 A front-end framework with Ingresse styles, using `React` 16.
@@ -38,16 +38,17 @@ _
 
 ## Development
 ```
-yarn docz
+yarn dev
 ```
 
 _
 
 
-## Build Documentation
+## Build
 ```
-yarn docz:build
+yarn build
 ```
+Distribution files will be in `dist` folder.
 
 _
 

diff --git a/dist/components/Button/Bordered/Bordered.js b/dist/components/Button/Bordered/Bordered.js
@@ -44,7 +44,12 @@ var StyledButton =
  return _objectSpread({}, props.styles, {
  borderColor: props.color ? _constants.COLORS[props.color.toUpperCase()] : _constants.COLORS.PRIMARY,
  color: props.color ? _constants.COLORS[props.color.toUpperCase()] : _constants.COLORS.PRIMARY,
- background: 'transparent'
+ background: 'transparent',
+ '&:disabled': {
+ cursor: 'not-allowed',
+ color: _constants.COLORS.GREY,
+ borderColor: _constants.COLORS.GREY
+ }
  });
 });
 /* Component */

diff --git a/dist/components/Button/Regular/Regular.js b/dist/components/Button/Regular/Regular.js
@@ -42,9 +42,15 @@ var StyledButton =
  target: "e1bfgx1g0"
 })(function (props) {
  return _objectSpread({}, props.styles, {
- borderColor: props.color ? _constants.COLORS[props.color.toUpperCase()] : _constants.COLORS.PRIMARY,
  color: props.color && props.color !== 'white' ? _constants.COLORS.WHITE : _constants.COLORS.BLACK,
- background: props.color ? _constants.COLORS[props.color.toUpperCase()] : _constants.COLORS.PRIMARY
+ background: props.color ? _constants.COLORS[props.color.toUpperCase()] : _constants.COLORS.PRIMARY,
+ borderColor: props.color ? _constants.COLORS[props.color.toUpperCase()] : _constants.COLORS.PRIMARY,
+ '&:disabled': {
+ cursor: 'not-allowed',
+ color: _constants.COLORS.GREY,
+ background: _constants.COLORS.LIGHT_GREY,
+ borderColor: _constants.COLORS.LIGHT_GREY
+ }
  });
 });
 /* Component */

diff --git a/dist/components/Button/constants/buttonStyles.constants.js b/dist/components/Button/constants/buttonStyles.constants.js
@@ -18,6 +18,7 @@ var BUTTON_STYLES = {
  minWidth: '140px',
  borderRadius: '25px',
  textTransform: 'uppercase',
+ userSelect: 'none',
  '&:hover,&:focus,&:active,&:disabled': {
  outline: 0
  }

diff --git a/dist/constants/colors.constants.js b/dist/constants/colors.constants.js
@@ -5,13 +5,36 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.COLORS = void 0;
 var _COLORS = {
- BLACK: 'rgb(42, 42, 42)',
+ BLACK: 'rgb(45, 45, 45)',
+ // #2D2D2D
  WHITE: 'rgb(255, 255, 255)',
+ // #FFFFFF
+ SMOKE: 'rgb(248, 248, 248)',
+ // #F8F8F8
+ GREY_SMOKE: 'rgb(238, 238, 238)',
+ // #EEEEEE
+ LIGHT_GREY: 'rgb(212, 215, 217)',
+ // #D4D7D9
+ GREY: 'rgb(157, 166, 173)',
+ // #9DA6AD
+ DARK_GREY: 'rgb(122, 128, 133)',
+ // #7A8085
  ORANGE: 'rgb(252, 163, 17)',
+ // #FCA311
+ LIGHT_ORANGE: 'rgb(255, 141, 80)',
+ // #FF8D50
  YELLOW: 'rgb(255, 198, 30)',
+ // #FFC61E
  RED: 'rgb(241, 51, 53)',
+ // #F13335
  GREEN: 'rgb(96,198,89)',
- BLUE: 'rgb(0, 165, 219)'
+ // #60C659
+ BLUE: 'rgb(0, 165, 219)',
+ // #00A5DB
+ PURPLE: 'rgb(172, 108, 184)',
+ // #AC6CB8
+ LIGHT_PINK: 'rgb(248, 130, 184)' // #F882B8
+
 };
 var COLORS = Object.assign({}, _COLORS, {
  PRIMARY: _COLORS.BLUE,

diff --git a/docs/assets.json b/docs/assets.json
@@ -1,8 +1,8 @@
 {
- "app.js": "/aphrodite-react/static/js/app.88e81424.js",
+ "app.js": "/aphrodite-react/static/js/app.90134ebc.js",
  "index.js": "/aphrodite-react/static/js/index.b08238ea.js",
- "components-button-button.js": "/aphrodite-react/static/js/components-button-button.448c39e5.js",
+ "components-button-button.js": "/aphrodite-react/static/js/components-button-button.524e7864.js",
  "vendors.js": "/aphrodite-react/static/js/vendors.575afc31.js",
- "runtime~app.js": "/aphrodite-react/static/js/runtime~app.c533064f040ed52505ba.js",
+ "runtime~app.js": "/aphrodite-react/static/js/runtime~app.aa6bf30e95bcfb462a9d.js",
  "index.html": "/aphrodite-react/index.html"
 }
diff --git a/docs/index.html b/docs/index.html
@@ -1 +1 @@
-<!doctype html><html lang="en"><head><meta charset="UTF-8"><meta name="description" content="UI framework from ingresse.com"><meta name="viewport" content="width=device-width,initial-scale=1"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>APHRODITE</title><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,600,700"></head><body><div id="root"/><script src="/aphrodite-react/static/js/runtime~app.c533064f040ed52505ba.js"></script><script src="/aphrodite-react/static/js/vendors.575afc31.js"></script><script src="/aphrodite-react/static/js/app.88e81424.js"></script></body></html>
+<!doctype html><html lang="en"><head><meta charset="UTF-8"><meta name="description" content="UI framework from ingresse.com"><meta name="viewport" content="width=device-width,initial-scale=1"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>APHRODITE</title><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,600,700"></head><body><div id="root"/><script src="/aphrodite-react/static/js/runtime~app.aa6bf30e95bcfb462a9d.js"></script><script src="/aphrodite-react/static/js/vendors.575afc31.js"></script><script src="/aphrodite-react/static/js/app.90134ebc.js"></script></body></html>
diff --git a/docs/static/js/app.88e81424.js → docs/static/js/app.90134ebc.js b/docs/static/js/app.88e81424.js → docs/static/js/app.90134ebc.js
diff --git a/docs/static/js/components-button-button.448c39e5.js b/docs/static/js/components-button-button.448c39e5.js
diff --git a/docs/static/js/components-button-button.524e7864.js b/docs/static/js/components-button-button.524e7864.js
diff --git a/...ic/js/runtime~app.c533064f040ed52505ba.js → ...ic/js/runtime~app.aa6bf30e95bcfb462a9d.js b/...ic/js/runtime~app.c533064f040ed52505ba.js → ...ic/js/runtime~app.aa6bf30e95bcfb462a9d.js
diff --git a/package.json b/package.json
@@ -36,6 +36,7 @@
  "test": "react-scripts test",
  "docz": "docz build",
  "start": "docz dev",
+ "dev": "npm run start",
  "build": "npm run docz && rimraf dist && NODE_ENV=production babel src --out-dir dist --ignore \"src/setupTests.js\",\"src/**/*.test.js\",\"src/**/*.test.jsx\",\"src/**/**/*.test.jsx\",\"src/*.mdx\",\"src/**/*.mdx\",\"src/**/**/*.mdx\""
  },
  "eslintConfig": {

diff --git a/src/components/Button/Bordered/Bordered.jsx b/src/components/Button/Bordered/Bordered.jsx
@@ -12,6 +12,12 @@ const StyledButton = styled('button')(props => ({
  borderColor: (props.color ? COLORS[props.color.toUpperCase()] : COLORS.PRIMARY),
  color : (props.color ? COLORS[props.color.toUpperCase()] : COLORS.PRIMARY),
  background : 'transparent',
+
+ '&:disabled': {
+ cursor : 'not-allowed',
+ color : COLORS.GREY,
+ borderColor: COLORS.GREY,
+ },
 }));
 
 /* Component */

diff --git a/src/components/Button/Button.mdx b/src/components/Button/Button.mdx
@@ -85,3 +85,17 @@ import { Button } from '../';
  Block
  </Button>
 </Playground>
+
+## Disabled
+Ignore `color` attribute
+
+.
+
+<Playground>
+ <Button color="black" disabled>
+ Regular Disabled
+ </Button>
+ <Button color="red" bordered disabled>
+ Bordered Disabled
+ </Button>
+</Playground>
diff --git a/src/components/Button/Regular/Regular.jsx b/src/components/Button/Regular/Regular.jsx
@@ -9,9 +9,16 @@ import { COLORS } from '../../../constants';
 const StyledButton = styled('button')(props => ({
  ...props.styles,
 
- borderColor: (props.color ? COLORS[props.color.toUpperCase()] : COLORS.PRIMARY),
  color : (props.color && props.color !== 'white' ? COLORS.WHITE : COLORS.BLACK),
  background : (props.color ? COLORS[props.color.toUpperCase()] : COLORS.PRIMARY),
+ borderColor: (props.color ? COLORS[props.color.toUpperCase()] : COLORS.PRIMARY),
+
+ '&:disabled': {
+ cursor : 'not-allowed',
+ color : COLORS.GREY,
+ background : COLORS.LIGHT_GREY,
+ borderColor: COLORS.LIGHT_GREY,
+ },
 }));
 
 /* Component */

diff --git a/src/components/Button/constants/buttonStyles.constants.js b/src/components/Button/constants/buttonStyles.constants.js
@@ -18,6 +18,8 @@ export const BUTTON_STYLES = {
 
  textTransform: 'uppercase',
 
+ userSelect: 'none',
+
  '&:hover,&:focus,&:active,&:disabled': {
  outline: 0,
  },

diff --git a/src/constants/colors.constants.js b/src/constants/colors.constants.js
@@ -1,13 +1,24 @@
 
 const _COLORS = {
- BLACK: 'rgb(42, 42, 42)',
- WHITE: 'rgb(255, 255, 255)',
-
- ORANGE: 'rgb(252, 163, 17)',
- YELLOW: 'rgb(255, 198, 30)',
- RED : 'rgb(241, 51, 53)',
- GREEN : 'rgb(96,198,89)',
- BLUE : 'rgb(0, 165, 219)',
+ BLACK: 'rgb(45, 45, 45)', // #2D2D2D
+ WHITE: 'rgb(255, 255, 255)', // #FFFFFF
+
+ SMOKE: 'rgb(248, 248, 248)', // #F8F8F8
+
+ GREY_SMOKE: 'rgb(238, 238, 238)', // #EEEEEE
+
+ LIGHT_GREY: 'rgb(212, 215, 217)', // #D4D7D9
+ GREY : 'rgb(157, 166, 173)', // #9DA6AD
+ DARK_GREY : 'rgb(122, 128, 133)', // #7A8085
+
+ ORANGE : 'rgb(252, 163, 17)', // #FCA311
+ LIGHT_ORANGE: 'rgb(255, 141, 80)', // #FF8D50
+ YELLOW : 'rgb(255, 198, 30)', // #FFC61E
+ RED : 'rgb(241, 51, 53)', // #F13335
+ GREEN : 'rgb(96,198,89)', // #60C659
+ BLUE : 'rgb(0, 165, 219)', // #00A5DB
+ PURPLE : 'rgb(172, 108, 184)', // #AC6CB8
+ LIGHT_PINK : 'rgb(248, 130, 184)', // #F882B8
 };
 
 export const COLORS = Object.assign({}, _COLORS, {