Merge pull request #18 from ingresse/feature/icn-coupon

Add: New Icons

README.md

@@ -17,7 +17,7 @@ Re-export the Aphrodite tools through your React application folder structure.
 ```js
 export {
  colors,
-} from 'aphrodite-react';
+} from '@ingresse/aphrodite';
 ```
 
 `src/components/index.js`:
@@ -26,7 +26,7 @@ export {
  Button,
  Container,
  Segment,
-} from 'aphrodite-react';
+} from '@ingresse/aphrodite';
 ```
 
 `src/App.jsx`:
@@ -37,6 +37,7 @@ import React from 'react';
 /* Your Project Components */
 import {
  Button,
+ Container,
  Segment,
 } from './components';
 
@@ -46,12 +47,18 @@ function App() {
  }
 
  return (
- <Segment
- textAlign="center">
- <Button onClick={handleClick}>
- Aphrodite Button
- </Button>
- </Segment>
+ <Container>
+ <Segment
+ as="section"
+ textAlign="center"
+ background="helper">
+ <Button
+ color="bamboo"
+ onClick={handleClick}>
+ Aphrodite Button
+ </Button>
+ </Segment>
+ </Container>
  );
 }
 

package.json

@@ -1,6 +1,6 @@
 {
  "name": "@ingresse/aphrodite",
- "version": "2.0.0",
+ "version": "2.0.2",
  "private": false,
  "license": "MIT",
  "description": "React UI library from ingresse.com",
@@ -71,9 +71,10 @@
  ],
  "authors": [
  "Ingresse",
- "Udimberto Silvestre Junior",
  "Ana Paula de Oliveira",
- "Maicon Silva"
+ "Ana Flávia Rodrigues",
+ "Maicon Silva",
+ "Udimberto Silvestre Junior"
  ],
  "bugs": {
  "url": "https://github.com/ingresse/aphrodite-react/issues"

src/components/ActionBar/ActionBar.mdx

@@ -13,7 +13,7 @@ import { ActionBar, Button, Container, Segment } from '../';
 ### Toggle visibility of action elements
 
 ```jsx
-import { ActionBar, Button } from 'aphrodite-react';
+import { ActionBar, Button } from '@ingresse/aphrodite';
 
 <ActionBar
  visible={true}

src/components/Badge/Badge.mdx

@@ -16,7 +16,7 @@ import {
 ### Badge styled with Aphrodite definitions.
 
 ```jsx
-import { Badge } from 'aphrodite-react';
+import { Badge } from '@ingresse/aphrodite';
 
 <Badge>
  Hello, you

src/components/Button/Button.mdx

@@ -14,7 +14,7 @@ import { Button, Container, Segment, Row, Col } from '../';
 ### Button styled with Aphrodite definitions.
 
 ```jsx
-import { Button } from 'aphrodite-react';
+import { Button } from '@ingresse/aphrodite';
 
 <Button>Hello, you</Button>
 ```

src/components/Card/Card.mdx

@@ -17,7 +17,7 @@ import {
 ### Used as base on `Collapsible` component.
 
 ```jsx
-import { Card } from 'aphrodite-react';
+import { Card } from '@ingresse/aphrodite';
 
 ...
 

src/components/Clipboard/Clipboard.mdx

@@ -17,7 +17,7 @@ import {
 
 
 ```jsx
-import { Clipboard } from 'aphrodite-react';
+import { Clipboard } from '@ingresse/aphrodite';
 
 ...
 

src/components/Collapsible/Collapsible.mdx

@@ -17,7 +17,7 @@ import {
 ### An alternative to accordion.
 
 ```jsx
-import { Collapsible, Segment } from 'aphrodite-react';
+import { Collapsible, Segment } from '@ingresse/aphrodite';
 ...
 <Collapsible header="Hi">
  <Segment padding="5px 10px">

src/components/Countdown/Countdown.mdx

@@ -24,7 +24,7 @@ import { colors } from '../../utils';
 ### Regressive seconds visual timer
 
 ```jsx
-import { Countdown } from 'aphrodite-react';
+import { Countdown } from '@ingresse/aphrodite';
 
 ...
 

src/components/Dialog/Dialog.mdx

@@ -21,7 +21,7 @@ import {
 ### Dialog boxes tell users about a task and can contain critical information, require decisions, or involve multiple tasks.
 
 ```jsx
-import { Dialog } from 'aphrodite-react';
+import { Dialog } from '@ingresse/aphrodite';
 
 ...
 

src/components/Dropdown/Dropdown.mdx

@@ -22,12 +22,14 @@ import {
 ### A white block, rounded, with simple shadow effect, downing from some other component.
 
 ```jsx
-import { Dropdown } from 'aphrodite-react';
+import { Dropdown } from '@ingresse/aphrodite';
 
 ...
 
-<Dropdown>
- Hello
+<Dropdown
+ center
+ toggle="Dropdown toggle">
+ Dropdown content
 </Dropdown>
 ```
 

src/components/ExpansionPanel/ExpansionPanel.mdx

@@ -4,7 +4,7 @@ menu : › Components
 route: /components/expansion-panel
 ---
 
-import { useState } from 'react';
+import { useState, Fragment } from 'react';
 import { Playground, Props } from 'docz';
 import {
  ExpansionPanel,
@@ -24,7 +24,7 @@ import { colors } from '../../utils';
 
 <Playground>
  {() => {
- // import { ExpansionPanel } from 'aphrodite-react';
+ // import { ExpansionPanel } from '@ingresse/aphrodite';
 
  return (
  <ExpansionPanel
@@ -118,7 +118,7 @@ import { colors } from '../../utils';
  }
 
  return (
- <>
+ <Fragment>
  <Row horizontal="center">
  <Col sm={4}>
  <Button
@@ -147,7 +147,7 @@ import { colors } from '../../utils';
 
  )}
  </Row>
- </>
+ </Fragment>
  );
  }}
 </Playground>

src/components/Flex/Flex.mdx

@@ -20,7 +20,7 @@ import {
 
 <Playground style={{ margin: '-20px', padding: '0 !important' }}>
  {() => {
- // import { Flex } from 'aphrodite-react';
+ // import { Flex } from '@ingresse/aphrodite';
 
  const wrapperStyles = {
  width : '100%',

src/components/Form/InputMask/InputMask.mdx

@@ -4,7 +4,7 @@ menu : › Components
 route: /components/form/input-mask
 ---
 
-import { useState } from 'react';
+import { useState, Fragment } from 'react';
 import { Playground, Props } from 'docz';
 import {
  InputMask,
@@ -39,7 +39,7 @@ import {
  }
 
  return (
- <>
+ <Fragment>
  <Row>
  <Col xs={12} sm={6}>
  <Segment padding="10px 0">
@@ -63,7 +63,7 @@ import {
  </Segment>
  </Col>
  </Row>
- </>
+ </Fragment>
  );
  }}
 </Playground>

src/components/Form/Select/Select.jsx

@@ -79,7 +79,7 @@ const Select = memo(forwardRef((props, ref) => {
  <Icon
  size={30}
  slug="arrow-down"
- color={props.disabled ? 'disabled' : 'base'}
+ color={props.disabled ? 'helper' : 'base'}
  />
  </AphFormControlButtonStyled>
  <AphFormControlErrorMsgStyled

src/components/Form/Select/Select.mdx

@@ -33,6 +33,22 @@ import {
 </Playground>
 
 
+## Disabled
+
+<Playground>
+ <Container xs>
+ <Segment padding="10px 0">
+ <Select disabled label="Disabled example">
+ <option value=""></option>
+ <option value="ingresse">Ingresse</option>
+ <option value="aphrodite">Aphrodite</option>
+ <option value="react">React</option>
+ </Select>
+ </Segment>
+ </Container>
+</Playground>
+
+
 ## Delayed
 
 <Playground>

src/components/Grid/grid.mdx

@@ -14,7 +14,7 @@ import { GRID, RADIUS } from '../../constants';
 ### Align the components with Aphrodite standards
 
 ```jsx
-import { Container, Row, Col } from 'aphrodite-react';
+import { Container, Row, Col } from '@ingresse/aphrodite';
 ...
 <Container>
  <Row>

src/components/HoverActions/HoverActions.mdx

@@ -4,27 +4,28 @@ menu : › Components
 route: /components/hover-actions
 ---
 
+import { Fragment } from 'react';
 import { Playground, Props } from 'docz';
 import { HoverActions, HoverActionsItem, Img, Container } from '../';
 
 # HoverActions
 ### On some content hovered, display another content over the original.
 
 ```jsx
-import { HoverActions, HoverActionsItem } from 'aphrodite-react';
+import { HoverActions, HoverActionsItem } from '@ingresse/aphrodite';
 
 ...
 
 <HoverActions
  actions={(
- <>
+ <Fragment>
  <HoverActionsItem>
  Useless
  </HoverActionsItem>
  <HoverActionsItem>
  Useless
  </HoverActionsItem>
- </>
+ </Fragment>
  )}>
  My Hoverable Element expecting some surprising actions
 </HoverActions>
@@ -37,14 +38,14 @@ import { HoverActions, HoverActionsItem } from 'aphrodite-react';
  <Container styles={{ padding: '20px', textAlign: 'center' }}>
  <HoverActions
  actions={(
- <>
+ <Fragment>
  <HoverActionsItem color="ocean">
  A button for some action
  </HoverActionsItem>
  <HoverActionsItem>
  Another button
  </HoverActionsItem>
- </>
+ </Fragment>
  )}>
  My Hoverable Element expecting some surprising actions
  </HoverActions>
@@ -59,7 +60,7 @@ import { HoverActions, HoverActionsItem } from 'aphrodite-react';
  <Container styles={{ padding: '20px', textAlign: 'center' }}>
  <HoverActions
  actions={(
- <>
+ <Fragment>
  <HoverActionsItem
  as="a"
  target="_blank"
@@ -68,7 +69,7 @@ import { HoverActions, HoverActionsItem } from 'aphrodite-react';
  styles={{ padding: '6px 5px 4px' }}>
  Open image in a new tab
  </HoverActionsItem>
- </>
+ </Fragment>
  )}>
  <Img
  circle