Merge pull request #20 from ingresse/fixes

Version: 2.1.0
ingresse · Jul 27, 2020 · 8665d13 · 8665d13
2 parents cf741db + bacbeb5
commit 8665d13
Show file tree

Hide file tree

Showing 28 changed files with 27,601 additions and 26,540 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@ingresse/aphrodite",
- "version": "2.0.3",
+ "version": "2.1.0",
  "private": false,
  "license": "MIT",
  "description": "React UI library from ingresse.com",
@@ -74,6 +74,7 @@
  "Ana Paula de Oliveira",
  "Ana Flávia Rodrigues",
  "Maicon Silva",
+ "Marcelo Bissuh",
  "Udimberto Silvestre Junior"
  ],
  "bugs": {

diff --git a/settings/docs.theme.js b/settings/docs.theme.js
@@ -12,9 +12,9 @@ const theme = {
  * Typography
  */
  fonts: {
- code : 'monospace',
- body : '"Roboto", sans-serif',
- title: '"Roboto", sans-serif',
+ mono  : 'monospace',
+ display: '"Roboto", sans-serif',
+ ui : '"Roboto", sans-serif',
  },
 };
 

diff --git a/src/components/BlurBackground/BlurBackground.jsx b/src/components/BlurBackground/BlurBackground.jsx
@@ -1,5 +1,6 @@
 /* Core Packages */
 import React from 'react';
+import propTypes from 'prop-types';
 
 /* Component Styles */
 import {
@@ -9,27 +10,64 @@ import {
 
 /* Component Itself */
 function BlurBackground({
- blur,
- image,
- opacity,
+ blur = '12px',
  children,
+ image,
+ opacity = 0.65,
+ styles,
+ wrapperStyles,
  ...rest
 }) {
  /**
  * Render
  */
  return (
  <BlurBackgroundWrapper
- {...rest}>
+ aphWrapperStyles={wrapperStyles}>
  <BlurBackgroundImage
- blur={blur}
- image={image}
- opacity={opacity}
+ aphBlur={blur}
+ aphImage={image}
+ aphStyles={styles}
+ aphOpacity={opacity}
+ {...rest}
  />
  {children}
  </BlurBackgroundWrapper>
  );
 }
 
+/* Properties Types */
+BlurBackground.propTypes = {
+ /**
+ * Blur radius
+ */
+ blur: propTypes.string,
+
+ /**
+ * Background image URL
+ */
+ image: propTypes.string.isRequired,
+
+ /**
+ * Blur opacity
+ */
+ opacity: propTypes.number,
+
+ /**
+ * Content inside
+ */
+ children: propTypes.any,
+
+ /**
+ * Custom image element styles
+ */
+ styles: propTypes.object,
+
+ /**
+ * Custom wrapper Styles
+ */
+ wrapperStyles: propTypes.object,
+};
+
 /* Exporting */
 export default BlurBackground;
diff --git a/src/components/BlurBackground/BlurBackground.mdx b/src/components/BlurBackground/BlurBackground.mdx
@@ -0,0 +1,57 @@
+---
+name : BlurBackground
+menu : › Components
+route: /components/blur-background
+---
+
+import { Playground, Props } from 'docz';
+import { BlurBackground, Segment, Container } from '../';
+
+
+# BlurBackground
+
+## Example
+
+<Playground>
+ <Container styles={{ lineHeight: '20px' }}>
+ <BlurBackground
+ image="https://event-kraken.s3.amazonaws.com/event/posters/41621/large.jpg">
+ <Segment
+ padding="120px 40px"
+ textAlign="center"
+ textSize="XL">
+ Hi, there
+ </Segment>
+ </BlurBackground>
+ </Container>
+</Playground>
+
+## Full Example
+
+<Playground>
+ <Container styles={{ lineHeight: '20px' }}>
+ <BlurBackground
+ blur="10px"
+ opacity={0.9}
+ image="https://event-kraken.s3.amazonaws.com/event/posters/41621/large.jpg"
+ styles={{
+ backgroundSize: '50%',
+ }}
+ wrapperStyles={{
+ borderRadius: '20px',
+ backgroundColor: 'pink',
+ }}>
+ <Segment
+ padding="120px 40px"
+ textAlign="center"
+ textSize="XL">
+ Hi, there
+ </Segment>
+ </BlurBackground>
+ </Container>
+</Playground>
+
+
+## BlurBackground properties
+
+<Props of={BlurBackground} />
diff --git a/src/components/BlurBackground/BlurBackgroundStyles.js b/src/components/BlurBackground/BlurBackgroundStyles.js
@@ -4,7 +4,7 @@ import styled from '@emotion/styled';
 /* Utilities */
 import {
  colors,
-} from '~/utils';
+} from '../../utils';
 
 /* Wrapper Styles */
 export const BlurBackgroundWrapper = styled.div`
@@ -16,15 +16,17 @@ export const BlurBackgroundWrapper = styled.div`
  overflow : hidden;
 
  color : ${props => colors.getFromTheme(props, 'inverse')};
- background-color: ${props => colors.getFromTheme(props, 'base', undefined, 0.5)};
+ background-color: ${props => colors.getFromTheme(props, 'base', 'original', 0.5)};
 
  .aph-placeholder {
  background: linear-gradient(
  90deg,
- ${props => colors.getFromTheme(props, 'base', undefined, 0.05)},
- ${props => colors.getFromTheme(props, 'base', undefined, 0.25)}
+ ${props => colors.getFromTheme(props, 'base', 'original', 0.05)},
+ ${props => colors.getFromTheme(props, 'base', 'original', 0.25)}
  );
  }
+
+ ${({ aphWrapperStyles }) => aphWrapperStyles};
 `;
 
 /* Image Blurred Styles */
@@ -38,12 +40,14 @@ export const BlurBackgroundImage = styled.div`
  min-width : 100%;
  min-height: 100%;
 
- opacity : ${props => props.opacity || 0.65};
- filter : blur(${props => props.blur || '12px'});
+ opacity : ${props => props.aphOpacity};
+ filter : blur(${props => props.aphBlur});
  transform: scale(1.2);
 
  background-size : cover;
  background-repeat : no-repeat;
  background-position: 50%;
- background-image : url(${props => props.image || null});
+ background-image : url(${props => props.aphImage || null});
+
+ ${({ aphStyles }) => aphStyles};
 `;
diff --git a/src/components/Dropdown/DropdownStyled.js b/src/components/Dropdown/DropdownStyled.js
@@ -15,7 +15,6 @@ const DropdownStyled = styled.div`
  position: relative;
  display : block;
  width : 100%;
- z-index : 901;
 
  -webkit-box-orient : vertical;
  -webkit-box-direction: normal;
@@ -48,6 +47,7 @@ const DropdownStyled = styled.div`
  transform: ${props => (props.center ? 'translateX(-50%)' : null)};
 
  opacity: 0;
+ z-index: 901;
  width : ${props => (props.contentWidth || null)};
 
  will-change: z-index, opacity;
@@ -58,7 +58,7 @@ const DropdownStyled = styled.div`
 
  color : ${props => colors.getFromTheme(props, 'black')};
  background: ${props => colors.getFromTheme(props, 'white')};
- box-shadow: 0 0 5px ${props => colors.getFromTheme(props, 'shadow')};
+ box-shadow: 0 2px 10px 0 ${props => colors.getFromTheme(props, 'shadow', 'crystal')};
 
  padding: ${props => (props.thin ? '0' : '15px 10px')};
  border-radius: ${RADIUS.XS}px;
@@ -79,10 +79,7 @@ const DropdownStyled = styled.div`
  }
 
  &-list {
- &__item:not(.aph-list__item--with-link) {
- padding-right: 20px;
- padding-left : 20px;
- }
+ overflow: hidden;
  }
  }
 

diff --git a/src/components/Form/FormControlStyled.jsx b/src/components/Form/FormControlStyled.jsx
@@ -16,7 +16,7 @@ const FormControlStyled = styled.input`
  width : 100%;
  margin : 0;
  min-height: 50px;
- padding : ${props => props.hasLabel ? 2 : 1}0px 10px 0;
+ padding : ${({ hasLabel }) => hasLabel ? '20px 10px 0' : '10px'};
 
  font-weight: ${SIZES.MD.FONT_WEIGHT};
  font-size : ${SIZES.MD.FONT_SIZE};
@@ -68,7 +68,8 @@ const FormControlStyled = styled.input`
 
  &.disabled,
  &:disabled {
- cursor: not-allowed;
+ cursor : not-allowed;
+ opacity: 1;
 
  color : ${props => colors.getFromTheme(props, 'base')};
  background-color: ${props => colors.getFromTheme(props, 'disabled', 'crystal')};

diff --git a/src/components/Form/FormControlWrapperStyled.js b/src/components/Form/FormControlWrapperStyled.js
@@ -1,11 +1,36 @@
 /* Packages */
 import styled from '@emotion/styled';
 
+/* Framework Definitions */
+import { colors } from '../../utils';
+
 /* Component Styles */
 const AphFormControlWrapperStyled = styled.div`
  box-sizing: border-box;
  position : relative;
  display : block;
+
+ .aph-form-control {
+ padding: ${({ hasLabel }) => !hasLabel ? null : '20px 10px 0'};
+ }
+
+ ${props => !props.hasError ? null : `
+ .aph-form-control {
+ color: ${colors.getFromTheme(props, 'error')};
+
+ + .aph-form-label {
+ color: ${colors.getFromTheme(props, 'error')};
+ }
+
+ &:hover,
+ &:active,
+ &:focus {
+ + .aph-form-label {
+ color: ${colors.getFromTheme(props, 'error')};
+ }
+ }
+ }
+ `}
 `;
 
 /* Exporting */

diff --git a/src/components/Form/InputCurrency/InputCurrency.jsx b/src/components/Form/InputCurrency/InputCurrency.jsx
@@ -26,10 +26,10 @@ const InputNumber = memo(forwardRef((props, ref) => {
  /* Inherit Props */
  let inheritProps = Object.assign({}, props);
  let excludedProps = [
+ 'error',
+ 'errorMessage',
  'label',
  'labelProps',
-
- 'errorMessage',
  ];
 
  excludedProps.map((excludedProp) => {
@@ -52,15 +52,16 @@ const InputNumber = memo(forwardRef((props, ref) => {
  }
 
  return (
- <AphFormControlWrapperStyled>
+ <AphFormControlWrapperStyled
+ hasError={!!error}
+ hasLabel={!!label}>
  <AphFormControlStyled
  {...inheritProps}
  as={CurrencyInput}
  ref={ref}
- hasLabel={label ? true : false}
- error={error ? 'true' : null}
  onChange={() => {}}
  onChangeEvent={handleChange}
+ selectAllOnFocus={true}
  className={`aph-form-control ${className || ''}`}
  />
  {(!label) ? (null) : (
@@ -91,11 +92,11 @@ InputNumber.defaultProps = {
  inputType : 'tel',
  thousandSeparator: '.',
  decimalSeparator : ',',
- prefix : 'R$',
+ prefix : 'R$ ',
  value : 0,
  precision : 2,
  allowEmpty : true,
- allowNegative : true,
+ allowNegative : false,
 };
 
 /* Properties Types */