From 5edf26ed6e47cfb342ef143f517c54e7fb67cf57 Mon Sep 17 00:00:00 2001 From: andresin87 Date: Wed, 22 Nov 2023 21:23:38 +0100 Subject: [PATCH] fix(components/atom/button): google translate --- .../atom/button/demo/TypeDeprecatedArticle.js | 36 +- .../button/demo/articles/ArticleAlignment.js | 49 ++ .../atom/button/demo/articles/ArticleColor.js | 44 ++ .../button/demo/articles/ArticleDesign.js | 44 ++ .../demo/articles/ArticleDesignColor.js | 78 ++ .../button/demo/articles/ArticleElevation.js | 47 ++ .../button/demo/articles/ArticleIsFitted.js | 69 ++ .../atom/button/demo/articles/ArticleLink.js | 33 + .../button/demo/articles/ArticleNegative.js | 80 +++ .../button/demo/articles/ArticlePlayground.js | 300 ++++++++ .../atom/button/demo/articles/ArticleShape.js | 47 ++ .../atom/button/demo/articles/ArticleSize.js | 45 ++ .../demo/articles/ArticleSocialColor.js | 44 ++ components/atom/button/demo/index.js | 677 +----------------- components/atom/button/demo/settings.js | 84 +-- components/atom/button/src/ButtonIcon.js | 12 +- components/atom/button/src/config.js | 25 +- components/atom/button/src/index.js | 23 +- components/atom/button/src/styles/index.scss | 26 +- components/atom/button/test/index.test.js | 113 +-- 20 files changed, 995 insertions(+), 881 deletions(-) create mode 100644 components/atom/button/demo/articles/ArticleAlignment.js create mode 100644 components/atom/button/demo/articles/ArticleColor.js create mode 100644 components/atom/button/demo/articles/ArticleDesign.js create mode 100644 components/atom/button/demo/articles/ArticleDesignColor.js create mode 100644 components/atom/button/demo/articles/ArticleElevation.js create mode 100644 components/atom/button/demo/articles/ArticleIsFitted.js create mode 100644 components/atom/button/demo/articles/ArticleLink.js create mode 100644 components/atom/button/demo/articles/ArticleNegative.js create mode 100644 components/atom/button/demo/articles/ArticlePlayground.js create mode 100644 components/atom/button/demo/articles/ArticleShape.js create mode 100644 components/atom/button/demo/articles/ArticleSize.js create mode 100644 components/atom/button/demo/articles/ArticleSocialColor.js diff --git a/components/atom/button/demo/TypeDeprecatedArticle.js b/components/atom/button/demo/TypeDeprecatedArticle.js index f168f6314f..f371ab7fc3 100644 --- a/components/atom/button/demo/TypeDeprecatedArticle.js +++ b/components/atom/button/demo/TypeDeprecatedArticle.js @@ -39,20 +39,17 @@ const TypeDeprecatedArticle = () => {

TYPES

Correct usage

- HTML button type attribute is used for specifying the - behavior of button. + HTML button type attribute is used for specifying the behavior of button. - Tip: Always specify the type attribute for the button - element. Different browsers may use different default types for the - button element + Tip: Always specify the type attribute for the button element. Different browsers may use + different default types for the button element {Object.entries({ button: 'The button is a clickable button', submit: 'The button is a submit button (submits form-data)', - reset: - 'The button is a reset button (resets the form-data to its initial values)' + reset: 'The button is a reset button (resets the form-data to its initial values)' }).map(([key, value]) => ( @@ -66,22 +63,10 @@ const TypeDeprecatedArticle = () => {
- + - + @@ -101,13 +86,10 @@ const TypeDeprecatedArticle = () => {

Deprecated usage

+ Type of button: 'primary' (default), 'accent', 'secondary', 'tertiary' - Type of button: 'primary' (default), 'accent', 'secondary', 'tertiary' - - - This prop should NEVER be combined with color{' '} - and design props. It causes unexpected behaviors. This prop - is priorized over the 2 others previously mentioned. + This prop should NEVER be combined with color and design props. It causes + unexpected behaviors. This prop is priorized over the 2 others previously mentioned. {stackMap( diff --git a/components/atom/button/demo/articles/ArticleAlignment.js b/components/atom/button/demo/articles/ArticleAlignment.js new file mode 100644 index 0000000000..767ec8fb4e --- /dev/null +++ b/components/atom/button/demo/articles/ArticleAlignment.js @@ -0,0 +1,49 @@ +import PropTypes from 'prop-types' + +import {Article, Cell, Code, Grid, H2, Label, ListItem, Paragraph, UnorderedList} from '@s-ui/documentation-library' + +import Button from '../../src/index.js' +import {atomButtonAlignmentIterator, flexCenteredStyle} from '../settings.js' + +const ArticleAlignment = ({className}) => { + return ( +
+

Alignment

+ + Button content alignment, under the prop alignment exported from atomButtonAlignment + + Button can have {atomButtonAlignmentIterator.length} alignments: + + {atomButtonAlignmentIterator.map(([{key, alignment}]) => ( + + atomButtonAlignment.{key}: "{alignment}" + + ))} + + + {atomButtonAlignmentIterator.map(([{key, alignment}]) => ( + + + + + + + + + + + ))} + +
+ ) +} + +ArticleAlignment.displayName = 'ArticleAlignment' + +ArticleAlignment.propTypes = { + className: PropTypes.string +} + +export default ArticleAlignment diff --git a/components/atom/button/demo/articles/ArticleColor.js b/components/atom/button/demo/articles/ArticleColor.js new file mode 100644 index 0000000000..52802de4f2 --- /dev/null +++ b/components/atom/button/demo/articles/ArticleColor.js @@ -0,0 +1,44 @@ +import PropTypes from 'prop-types' + +import {Article, Cell, Code, Grid, H2, Label, ListItem, Paragraph, UnorderedList} from '@s-ui/documentation-library' + +import Button from '../../src/index.js' +import {atomButtonColorsIterator, flexCenteredStyle} from '../settings.js' + +const ArticleColor = ({className}) => { + return ( +
+

Color

+ Button can have {atomButtonColorsIterator.length} colors: + + {atomButtonColorsIterator.map(([{key, color}]) => ( + + atomButtonColor.{key}: "{color}" + + ))} + + + {atomButtonColorsIterator.map(([{key, color}]) => ( + + + + + + + + + + + ))} + +
+ ) +} + +ArticleColor.displayName = 'ArticleColor' + +ArticleColor.propTypes = { + className: PropTypes.string +} + +export default ArticleColor diff --git a/components/atom/button/demo/articles/ArticleDesign.js b/components/atom/button/demo/articles/ArticleDesign.js new file mode 100644 index 0000000000..1d0ccb1988 --- /dev/null +++ b/components/atom/button/demo/articles/ArticleDesign.js @@ -0,0 +1,44 @@ +import PropTypes from 'prop-types' + +import {Article, Cell, Code, Grid, H2, Label, ListItem, Paragraph, UnorderedList} from '@s-ui/documentation-library' + +import Button from '../../src/index.js' +import {atomButtonDesignsIterator, flexCenteredStyle} from '../settings.js' + +const ArticleDesign = ({className}) => { + return ( +
+

Design

+ Button can have {Object.values(atomButtonDesignsIterator).length} designs: + + {atomButtonDesignsIterator.map(([{key, design}]) => ( + + atomButtonDesign.{key}: "{design}" + + ))} + + + {atomButtonDesignsIterator.map(([{key, design}]) => ( + + + + + + + + + + + ))} + +
+ ) +} + +ArticleDesign.displayName = 'ArticleDesign' + +ArticleDesign.propTypes = { + className: PropTypes.string +} + +export default ArticleDesign diff --git a/components/atom/button/demo/articles/ArticleDesignColor.js b/components/atom/button/demo/articles/ArticleDesignColor.js new file mode 100644 index 0000000000..cff600b3a8 --- /dev/null +++ b/components/atom/button/demo/articles/ArticleDesignColor.js @@ -0,0 +1,78 @@ +import {Fragment} from 'react' + +import PropTypes from 'prop-types' + +import {Article, Cell, Code, Grid, H2, Label, Paragraph} from '@s-ui/documentation-library' + +import AtomButton from '../../src/index.js' +import { + atomButtonColorsIterator, + atomButtonDesignsIterator, + atomButtonSocialColorsIterator, + flexCenteredStyle +} from '../settings.js' + +const ArticleDesignColor = ({className}) => { + return ( +
+

Colors and Designs

+ + These are the available color types of button, which are solid by default for each{' '} + design. + + + + {atomButtonColorsIterator.map(([{color}], index) => ( + + + + ))} + {atomButtonDesignsIterator.map(([{design}], index) => ( + + + + + {atomButtonColorsIterator.map(([{color}], index) => ( + + + Button + + + ))} + + ))} + + All the designs can also get social network color intents + + + {atomButtonSocialColorsIterator.map(([{color}], index) => ( + + + + ))} + {atomButtonDesignsIterator.map(([{design}], index) => ( + + + + + {atomButtonSocialColorsIterator.map(([{color}], index) => ( + + + Button + + + ))} + + ))} + +
+ ) +} + +ArticleDesignColor.displayName = 'ArticleDesignColor' + +ArticleDesignColor.propTypes = { + className: PropTypes.string +} + +export default ArticleDesignColor diff --git a/components/atom/button/demo/articles/ArticleElevation.js b/components/atom/button/demo/articles/ArticleElevation.js new file mode 100644 index 0000000000..e23158fe60 --- /dev/null +++ b/components/atom/button/demo/articles/ArticleElevation.js @@ -0,0 +1,47 @@ +import PropTypes from 'prop-types' + +import {Article, Cell, Code, Grid, H2, Label, ListItem, Paragraph, UnorderedList} from '@s-ui/documentation-library' + +import Button from '../../src/index.js' +import {atomButtonElevationsIterator, flexCenteredStyle} from '../settings.js' + +const ArticleElevation = ({className}) => { + return ( +
+

Elevation

+ + Use elevation prop to display a shadow around the button. If it's not set no shadow will be shown. + + Button can have {atomButtonElevationsIterator.length} elevations: + + {atomButtonElevationsIterator.map(([{key, elevation}]) => ( + + atomButtonElevation.{key}: "{elevation}" + + ))} + + + {atomButtonElevationsIterator.map(([{key, elevation}]) => ( + + + + + + + + + + + ))} + +
+ ) +} + +ArticleElevation.displayName = 'ArticleElevation' + +ArticleElevation.propTypes = { + className: PropTypes.string +} + +export default ArticleElevation diff --git a/components/atom/button/demo/articles/ArticleIsFitted.js b/components/atom/button/demo/articles/ArticleIsFitted.js new file mode 100644 index 0000000000..700d0fd7ea --- /dev/null +++ b/components/atom/button/demo/articles/ArticleIsFitted.js @@ -0,0 +1,69 @@ +import {useState} from 'react' + +import PropTypes from 'prop-types' + +import {Article, Box, Code, H2, ListItem, Paragraph, RadioButton, UnorderedList} from '@s-ui/documentation-library' + +import AtomButton, {atomButtonGroupPositions} from '../../src/index.js' + +const ArticleIsFitted = ({className}) => { + const [isFitted, setIsFitted] = useState() + return ( +
+

isFitted

+
+ + isFitted Boolean prop for make buttons have no: + + + Border + Padding + Margin + + + Default undefined value. + + { + setIsFitted(!isFitted) + }} + value={isFitted} + label={`isFitted ${isFitted}`} + /> + + button 1 + button 2 + button 3 + button 4 + button 5 + + It works even with group not affecting its spacings + + + button 1 + + + button 2 + + + button 3 + + + button 4 + + + button 5 + + +
+
+ ) +} + +ArticleIsFitted.displayName = 'ArticleIsFitted' + +ArticleIsFitted.propTypes = { + className: PropTypes.string +} + +export default ArticleIsFitted diff --git a/components/atom/button/demo/articles/ArticleLink.js b/components/atom/button/demo/articles/ArticleLink.js new file mode 100644 index 0000000000..e546f50991 --- /dev/null +++ b/components/atom/button/demo/articles/ArticleLink.js @@ -0,0 +1,33 @@ +import PropTypes from 'prop-types' + +import {Article, Code, H2, Paragraph} from '@s-ui/documentation-library' + +import AtomButton from '../../src/index.js' + +const ArticleLink = ({className}) => { + return ( +
+

Link Design

+
+ + Buttons, can also look like links in some cases under the design 'link' prop value + +
+
+ "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore + magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea{' '} + commodo consequat. Duis aute irure dolor in reprehenderit in voluptate + velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non{' '} + proident, sunt in culpa qui officia deserunt mollit anim id est laborum." +
+
+ ) +} + +ArticleLink.displayName = 'ArticleLink' + +ArticleLink.propTypes = { + className: PropTypes.string +} + +export default ArticleLink diff --git a/components/atom/button/demo/articles/ArticleNegative.js b/components/atom/button/demo/articles/ArticleNegative.js new file mode 100644 index 0000000000..de146d9d19 --- /dev/null +++ b/components/atom/button/demo/articles/ArticleNegative.js @@ -0,0 +1,80 @@ +import {Fragment} from 'react' + +import PropTypes from 'prop-types' + +import {Article, Cell, Code, Grid, H2, Label, Paragraph} from '@s-ui/documentation-library' + +import AtomButton from '../../src/index.js' +import { + atomButtonColorsIterator, + atomButtonDesignsIterator, + atomButtonSocialColorsIterator, + flexCenteredStyle, + socialIconsMapper +} from '../settings.js' + +const ArticleNegative = ({className}) => { + return ( +
+

Negative Colors and Designs

+ + Buttons can also have the negative boolean prop for dark backgrounds. + +
+ + + {atomButtonColorsIterator.map(([{color}], index) => ( + + + + ))} + {atomButtonDesignsIterator.map(([{design}], index) => ( + + + + + {atomButtonColorsIterator.map(([{color}], index) => ( + + + Button + + + ))} + + ))} + +
+ + + {atomButtonSocialColorsIterator.map(([{color}], index) => ( + + + + ))} + {atomButtonDesignsIterator.map(([{design}], index) => ( + + + + + {atomButtonSocialColorsIterator.map(([{color}], index) => ( + + + Button + + + ))} + + ))} + +
+
+ ) +} + +ArticleNegative.displayName = 'ArticleNegative' + +ArticleNegative.propTypes = { + className: PropTypes.string +} + +export default ArticleNegative diff --git a/components/atom/button/demo/articles/ArticlePlayground.js b/components/atom/button/demo/articles/ArticlePlayground.js new file mode 100644 index 0000000000..d647d4e800 --- /dev/null +++ b/components/atom/button/demo/articles/ArticlePlayground.js @@ -0,0 +1,300 @@ +import {Fragment, useState} from 'react' + +import PropTypes from 'prop-types' + +import { + Article, + Box, + Cell, + Code, + Grid, + H2, + Input, + Label, + Paragraph, + RadioButton, + RadioButtonGroup +} from '@s-ui/documentation-library' + +import AtomButton from '../../src/index.js' +import { + atomButtonColorsIterator, + atomButtonDesignsIterator, + atomButtonSocialColorsIterator, + CLASS_SECTION, + flexCenteredStyle, + starIcon +} from '../settings.js' + +const ArticlePlayground = ({className}) => { + const [state, setState] = useState({content: 'button', link: false}) + const {negative, content, icon, leftIcon, rightIcon, socialButtons, link} = state + return ( +
+

Other extra button boolean props

+ + negative: proper usage with dark backgrounds. + + + disabled: button is not trigerable. + + + isLoading and loadingText: button status loading and its replacement text displayed. + + + focused: button status activated. + + + fullWidth: fits all the available with given. + + + link: converts the button element to an anchor element, keeping its own configured design. A simple + way to replace its own HTML element for an anchor ('a') element using the boolean link prop combined with the + href prop for the destination url. + + + + + { + const newState = { + ...state, + negative: undefined, + disabled: undefined, + isLoading: undefined, + focused: undefined, + fullWidth: undefined + } + switch (value) { + case 'negative': + setState({...newState, negative: true}) + break + case 'disabled': + setState({...newState, disabled: true}) + break + case 'isLoading': + setState({ + ...newState, + isLoading: true + }) + break + case 'focused': + setState({...newState, focused: true}) + break + case 'fullWidth': + setState({...newState, fullWidth: true}) + break + default: + setState({...newState}) + break + } + }} + > + + + + + + + + + + { + const content = ev.target.value + setState({...state, content, loadingText: content}) + }} + placeholder="content" + /> + + + + { + setState({...state, size: value}) + }} + > + + + + + + + + { + setState({...state, icon: value ? starIcon : undefined}) + }} + label={starIcon} + /> + + + + { + setState({...state, socialButtons: !socialButtons}) + }} + label={socialButtons ? 'disable' : 'enable'} + /> + + + {icon && ( + <> + + { + const status = { + leftIcon: value === 'leftIcon' ? starIcon : undefined, + rightIcon: value === 'rightIcon' ? starIcon : undefined + } + setState({...state, ...status}) + }} + > + + + + + )} + + + + { + setState({...state, link: !link}) + }} + label={link ? 'disable' : 'enable'} + /> + + + + + + {[[{design: undefined}], ...atomButtonDesignsIterator].map(([{design}], index) => ( + + + + + + ))} + + {[ + ...atomButtonColorsIterator, + [{color: undefined}], + ...(socialButtons ? atomButtonSocialColorsIterator : []) + ].map(([{color}], index) => ( + + + + + {[[{design: undefined}], ...atomButtonDesignsIterator].map(([{design}], key) => ( + + + + {icon && !leftIcon && !rightIcon ? starIcon : content} + + + + ))} + + + + + ))} + + {[[{design: undefined}], ...atomButtonDesignsIterator].map(([{design}], index) => ( + + + + + + ))} + + + + + +
+ ) +} + +ArticlePlayground.displayName = 'ArticlePlayground' + +ArticlePlayground.propTypes = { + className: PropTypes.string +} + +export default ArticlePlayground diff --git a/components/atom/button/demo/articles/ArticleShape.js b/components/atom/button/demo/articles/ArticleShape.js new file mode 100644 index 0000000000..1b6c465cc1 --- /dev/null +++ b/components/atom/button/demo/articles/ArticleShape.js @@ -0,0 +1,47 @@ +import PropTypes from 'prop-types' + +import {Article, Cell, Code, Grid, H2, Label, ListItem, Paragraph, UnorderedList} from '@s-ui/documentation-library' + +import Button from '../../src/index.js' +import {atomButtonShapesIterator, flexCenteredStyle} from '../settings.js' + +const ArticleShape = ({className}) => { + return ( +
+

Shape

+ + Use shape prop to modify the border radius of the component. + + Button can have {atomButtonShapesIterator.length} shapes: + + {atomButtonShapesIterator.map(([{key, shape}]) => ( + + atomButtonShape.{key}: "{shape}" + + ))} + + + {atomButtonShapesIterator.map(([{key, shape}]) => ( + + + + + + + + + + + ))} + +
+ ) +} + +ArticleShape.displayName = 'ArticleShape' + +ArticleShape.propTypes = { + className: PropTypes.string +} + +export default ArticleShape diff --git a/components/atom/button/demo/articles/ArticleSize.js b/components/atom/button/demo/articles/ArticleSize.js new file mode 100644 index 0000000000..2ecbb8ca09 --- /dev/null +++ b/components/atom/button/demo/articles/ArticleSize.js @@ -0,0 +1,45 @@ +import PropTypes from 'prop-types' + +import {Article, Cell, Code, Grid, H2, Label, ListItem, Paragraph, UnorderedList} from '@s-ui/documentation-library' + +import Button from '../../src/index.js' +import {atomButtonSizesIterator, flexCenteredStyle} from '../settings.js' + +const ArticleSize = ({className}) => { + return ( +
+

Size

+ Button can have {atomButtonSizesIterator.length} extra sizes: + + {atomButtonSizesIterator.map(([{key, size}]) => ( + + atomButtonSizes.{key}: "{size}" + + ))} + undefined: equivalent to a medium size + + + {atomButtonSizesIterator.map(([{key, size}]) => ( + + + + + + + + + + + ))} + +
+ ) +} + +ArticleSize.displayName = 'ArticleSize' + +ArticleSize.propTypes = { + className: PropTypes.string +} + +export default ArticleSize diff --git a/components/atom/button/demo/articles/ArticleSocialColor.js b/components/atom/button/demo/articles/ArticleSocialColor.js new file mode 100644 index 0000000000..245fcb3807 --- /dev/null +++ b/components/atom/button/demo/articles/ArticleSocialColor.js @@ -0,0 +1,44 @@ +import PropTypes from 'prop-types' + +import {Article, Cell, Code, Grid, H2, Label, ListItem, Paragraph, UnorderedList} from '@s-ui/documentation-library' + +import Button from '../../src/index.js' +import {atomButtonSocialColorsIterator, flexCenteredStyle} from '../settings.js' + +const ArticleSocialColor = ({className}) => { + return ( +
+

Social Network Color

+ Button can have {atomButtonSocialColorsIterator.length} social network colors: + + {atomButtonSocialColorsIterator.map(([{key, color}]) => ( + + atomButtonColor.{key}: "{color}" + + ))} + + + {atomButtonSocialColorsIterator.map(([{key, color}]) => ( + + + + + + + + + + + ))} + +
+ ) +} + +ArticleSocialColor.displayName = 'ArticleSocialColor' + +ArticleSocialColor.propTypes = { + className: PropTypes.string +} + +export default ArticleSocialColor diff --git a/components/atom/button/demo/index.js b/components/atom/button/demo/index.js index 7dd76eb4ef..4e35c473e0 100644 --- a/components/atom/button/demo/index.js +++ b/components/atom/button/demo/index.js @@ -1,667 +1,52 @@ /* eslint-disable react/prop-types, no-unused-vars, no-console */ -import {Fragment, useState} from 'react' +import {H1, Paragraph} from '@s-ui/documentation-library' -import AtomButton, {atomButtonGroupPositions} from 'components/atom/button/src' - -import { - Article, - Box, - Cell, - Code, - Grid, - H1, - H2, - Input, - Label, - ListItem, - Paragraph, - RadioButton, - RadioButtonGroup, - UnorderedList -} from '@s-ui/documentation-library' - -import { - atomButtonAlignmentIterator, - atomButtonColorsIterator, - atomButtonDesignsIterator, - atomButtonElevationsIterator, - atomButtonShapesIterator, - atomButtonSizesIterator, - atomButtonSocialColorsIterator, - CLASS_SECTION, - flexCenteredStyle, - socialIconsMapper, - starIcon -} from './settings.js' +import ArticleAlignment from './articles/ArticleAlignment.js' +import ArticleColor from './articles/ArticleColor.js' +import ArticleDesign from './articles/ArticleDesign.js' +import ArticleDesignColor from './articles/ArticleDesignColor.js' +import ArticleElevation from './articles/ArticleElevation.js' +import ArticleIsFitted from './articles/ArticleIsFitted.js' +import ArticleLink from './articles/ArticleLink.js' +import ArticleNegative from './articles/ArticleNegative.js' +import ArticlePlayground from './articles/ArticlePlayground.js' +import ArticleShape from './articles/ArticleShape.js' +import ArticleSize from './articles/ArticleSize.js' +import ArticleSocialColor from './articles/ArticleSocialColor.js' +import {CLASS_SECTION} from './settings.js' import TypeDeprecatedArticle from './TypeDeprecatedArticle.js' const Demo = () => { - const [state, setState] = useState({content: 'button', link: false}) - const [isFitted, setIsFitted] = useState() - const {negative, content, icon, leftIcon, rightIcon, socialButtons, link} = - state return (

Button

- - A button means an operation. Clicking a button will trigger - corresponding business logic. - -
-

Colors and Designs

-
- - These are the available color types of button, which - are solid by default for each design. - -
- - - {atomButtonColorsIterator.map(([{color}], index) => ( - - - - ))} - {atomButtonDesignsIterator.map(([{design}], index) => ( - - - - - {atomButtonColorsIterator.map(([{color}], index) => ( - - - Button - - - ))} - - ))} - -
-
- - Buttons can also have the negative boolean prop for - dark backgrounds. - -
- - - {atomButtonColorsIterator.map(([{color}], index) => ( - - - - ))} - {atomButtonDesignsIterator.map(([{design}], index) => ( - - - - - {atomButtonColorsIterator.map(([{color}], index) => ( - - - Button - - - ))} - - ))} - -
-
-
+ A button means an operation. Clicking a button will trigger corresponding business logic. +
-
-

Social network colors

-
- - These are the available social network color types of button, which - are solid by default for each design. - -
- - - {atomButtonSocialColorsIterator.map(([{color}], index) => ( - - - - ))} - {atomButtonDesignsIterator.map(([{design}], index) => ( - - - - - {atomButtonSocialColorsIterator.map(([{color}], index) => ( - - - Button - - - ))} - - ))} - -
-
- - Buttons can also have the negative boolean prop for - dark backgrounds. - -
- - - {atomButtonSocialColorsIterator.map(([{color}], index) => ( - - - - ))} - {atomButtonDesignsIterator.map(([{design}], index) => ( - - - - - {atomButtonSocialColorsIterator.map(([{color}], index) => ( - - - Button - - - ))} - - ))} - -
-
-
+
-
-

Size

-
- - Size of the button, under the prop size exported from{' '} - atomButtonSizes - -
- - {atomButtonSizesIterator.map(([{size}], index) => ( - - - - - - ))} - {atomButtonSizesIterator.map(([{size}], index) => ( - - - Button - - - ))} - -
-
-

Elevation

-
- - Use elevation prop to display a shadow around the - button. If it's not set no shadow will be shown. - -
- - {atomButtonElevationsIterator.map(([{elevation}], index) => ( - - - - - - ))} - {atomButtonElevationsIterator.map(([{elevation}], index) => ( - - - Button - - - ))} - -
+
-
-

Alignment

-
- - Button content alignment, under the prop alignment{' '} - exported from atomButtonAlignment - -
- - {atomButtonAlignmentIterator.map(([{alignment}], index) => ( - - - - - - ))} - {atomButtonAlignmentIterator.map(([{alignment}], index) => ( - - - Button - - - ))} - -
+
-
-

Shape

-
- - Use shape prop to modify the border radius of the - component. Choose between: squared,{' '} - rounded and circular - -
- - - - {atomButtonShapesIterator.map(([{shape}], index) => ( - - - - ))} - {atomButtonSizesIterator.map(([{size}], index) => ( - - - - - {atomButtonShapesIterator.map(([{shape}], index) => ( - - - Button - - - ))} - - ))} - -
+ +
+ +
+ +
+ +
+
-
-

Link Design

-
- - Buttons, can also look like links in some cases under the{' '} - design 'link' prop value - -
-
- "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do - eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad - minim veniam, quis nostrud exercitation ullamco laboris nisi ut - aliquip ex ea commodo{' '} - consequat. Duis aute irure dolor in reprehenderit in voluptate velit - esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat - cupidatat non proident, sunt in culpa qui officia - deserunt mollit anim id est laborum." -
-
+

-
-

Other extra button boolean props

- - negative: proper usage with dark backgrounds. - - - disabled: button is not trigerable. - - - isLoading and loadingText: button status - loading and its replacement text displayed. - - - focused: button status activated. - - - fullWidth: fits all the available with given. - - - link: converts the button element to an anchor element, - keeping its own configured design. A simple way to replace its own - HTML element for an anchor ('a') element using the boolean link prop - combined with the href prop for the destination url. - - - - - { - const newState = { - ...state, - negative: undefined, - disabled: undefined, - isLoading: undefined, - focused: undefined, - fullWidth: undefined - } - switch (value) { - case 'negative': - setState({...newState, negative: true}) - break - case 'disabled': - setState({...newState, disabled: true}) - break - case 'isLoading': - setState({ - ...newState, - isLoading: true - }) - break - case 'focused': - setState({...newState, focused: true}) - break - case 'fullWidth': - setState({...newState, fullWidth: true}) - break - default: - setState({...newState}) - break - } - }} - > - - - - - - - - - - { - const content = ev.target.value - setState({...state, content, loadingText: content}) - }} - placeholder="content" - /> - - - - { - setState({...state, size: value}) - }} - > - - - - - - - - { - setState({...state, icon: value ? starIcon : undefined}) - }} - label={starIcon} - /> - - - - { - setState({...state, socialButtons: !socialButtons}) - }} - label={socialButtons ? 'disable' : 'enable'} - /> - - - {icon && ( - <> - - { - const status = { - leftIcon: value === 'leftIcon' ? starIcon : undefined, - rightIcon: value === 'rightIcon' ? starIcon : undefined - } - setState({...state, ...status}) - }} - > - - - - - )} - - - - { - setState({...state, link: !link}) - }} - label={link ? 'disable' : 'enable'} - /> - - - - - - {[[{design: undefined}], ...atomButtonDesignsIterator].map( - ([{design}], index) => ( - - - - - - ) - )} - - {[ - ...atomButtonColorsIterator, - [{color: undefined}], - ...(socialButtons ? atomButtonSocialColorsIterator : []) - ].map(([{color}], index) => ( - - - - - {[[{design: undefined}], ...atomButtonDesignsIterator].map( - ([{design}], key) => ( - - - - {icon && !leftIcon && !rightIcon - ? starIcon - : content} - - - - ) - )} - - - - - ))} - - {[[{design: undefined}], ...atomButtonDesignsIterator].map( - ([{design}], index) => ( - - - - - - ) - )} - - - - - -
+
-
-

isFitted

-
- - isFitted Boolean prop for make buttons have no: - - - Border - Padding - Margin - - - Default undefined value. - - { - setIsFitted(!isFitted) - }} - value={isFitted} - label={`isFitted ${isFitted}`} - /> - - button 1 - button 2 - button 3 - button 4 - button 5 - - - It works even with group not affecting its spacings - - - - button 1 - - - button 2 - - - button 3 - - - button 4 - - - button 5 - - -
-
+
) diff --git a/components/atom/button/demo/settings.js b/components/atom/button/demo/settings.js index 16a339fce6..6b9bf3e9a1 100644 --- a/components/atom/button/demo/settings.js +++ b/components/atom/button/demo/settings.js @@ -14,43 +14,23 @@ export const CLASS_SECTION = `${BASE_CLASS_DEMO}-section` export const stackMap = (arr = [], ...mappingCallbacks) => mappingCallbacks.flatMap(function (e, index) { - return this.map((value, innerIndex) => - e(value, innerIndex + this.length * index) - ) + return this.map((value, innerIndex) => e(value, innerIndex + this.length * index)) }, arr) -export const facebookIcon = ( - -) -export const twitterIcon = ( - -) -export const googleIcon = ( - -) -export const youtubeIcon = ( - -) -export const whatsappIcon = ( - -) -export const instagramIcon = ( - -) -export const starIcon = ( - -) +export const facebookIcon = +export const twitterIcon = +export const googleIcon = +export const youtubeIcon = +export const whatsappIcon = +export const instagramIcon = +export const starIcon = -export const atomButtonColorsIterator = Object.values(atomButtonColors) - .filter(color => - ['primary', 'accent', 'neutral', 'success', 'alert', 'error'].includes( - color - ) - ) - .map((color, index) => [{color}, index]) +export const atomButtonColorsIterator = Object.entries(atomButtonColors) + .filter(([, color]) => ['primary', 'accent', 'neutral', 'success', 'alert', 'error'].includes(color)) + .map(([key, color], index) => [{key, color}, index]) -export const atomButtonSocialColorsIterator = Object.values(atomButtonColors) - .filter(color => +export const atomButtonSocialColorsIterator = Object.entries(atomButtonColors) + .filter(([, color]) => [ 'social-facebook', 'social-twitter', @@ -60,31 +40,29 @@ export const atomButtonSocialColorsIterator = Object.values(atomButtonColors) 'social-instagram' ].includes(color) ) - .map((color, index) => [{color}, index]) + .map(([key, color], index) => [{key, color}, index]) -export const atomButtonDesignsIterator = Object.values(atomButtonDesigns).map( - (design, index) => [{design}, index] -) +export const atomButtonDesignsIterator = Object.entries(atomButtonDesigns).map(([designKey, designValue], index) => [ + {key: designKey, design: designValue}, + index +]) -export const atomButtonElevationsIterator = Object.values( - atomButtonElevations -).map((elevation, index) => [{elevation}, index]) +export const atomButtonElevationsIterator = Object.entries(atomButtonElevations).map(([key, elevation], index) => [ + {key, elevation}, + index +]) -export const atomButtonSizesIterator = [ - atomButtonSizes.SMALL, - undefined, - atomButtonSizes.LARGE -].map((size, index) => [{size}, index]) +export const atomButtonSizesIterator = Object.entries(atomButtonSizes).map(([key, size], index) => [{key, size}, index]) -export const atomButtonAlignmentIterator = [ - undefined, - atomButtonAlignment.LEFT, - atomButtonAlignment.RIGHT -].map((alignment, index) => [{alignment}, index]) +export const atomButtonAlignmentIterator = Object.entries(atomButtonAlignment).map(([key, alignment], index) => [ + {key, alignment}, + index +]) -export const atomButtonShapesIterator = Object.values(atomButtonShapes).map( - (shape, index) => [{shape}, index] -) +export const atomButtonShapesIterator = Object.entries(atomButtonShapes).map(([key, shape], index) => [ + {key, shape}, + index +]) export const socialIconsMapper = { 'social-facebook': facebookIcon, diff --git a/components/atom/button/src/ButtonIcon.js b/components/atom/button/src/ButtonIcon.js index 4896d0bc04..587e676786 100644 --- a/components/atom/button/src/ButtonIcon.js +++ b/components/atom/button/src/ButtonIcon.js @@ -1,19 +1,11 @@ import PropTypes from 'prop-types' -import { - CLASS, - ICON_POSITIONS, - isAtomIcon, - prepareAtomIcon, - SIZES -} from './config.js' +import {CLASS, ICON_POSITIONS, isAtomIcon, prepareAtomIcon, SIZES} from './config.js' const ButtonIcon = ({children, position, size}) => { if (!children) return null // if the icon is an AtomIcon we've to be sure correct props are used - const iconToRender = isAtomIcon(children) - ? prepareAtomIcon(children, {size}) - : children + const iconToRender = isAtomIcon(children) ? prepareAtomIcon(children, {size}) : children return {iconToRender} } diff --git a/components/atom/button/src/config.js b/components/atom/button/src/config.js index 5cd055fc70..ea03c9ec74 100644 --- a/components/atom/button/src/config.js +++ b/components/atom/button/src/config.js @@ -78,13 +78,7 @@ export const SIZES = {SMALL: 'small', LARGE: 'large'} /** * All the available modifiers for the button */ -export const MODIFIERS = [ - 'disabled', - 'fullWidth', - 'focused', - 'negative', - 'link' -] +export const MODIFIERS = ['disabled', 'fullWidth', 'focused', 'negative', 'link'] /** * Icon available positions @@ -170,9 +164,7 @@ export const cleanProps = props => { * @return {Array} */ export const getModifiers = props => { - return Object.keys(props).filter( - name => props[name] && MODIFIERS.includes(name) - ) + return Object.keys(props).filter(name => props[name] && MODIFIERS.includes(name)) } export function deprecated( @@ -223,15 +215,7 @@ export const typeConversion = ({type, design, color, link, href, ...other}) => { return result } -export const getPropsWithDefaultValues = ({ - type, - design, - color, - alignment, - link, - href, - ...other -}) => ({ +export const getPropsWithDefaultValues = ({type, design, color, alignment, link, href, ...other}) => ({ ...other, link, type, @@ -244,8 +228,7 @@ export const getPropsWithDefaultValues = ({ * Detect if element is an AtomIcon to force correct size * @param {React.ReactElement} icon */ -export const isAtomIcon = icon => - icon?.type?.displayName === ATOM_ICON_DISPLAY_NAME +export const isAtomIcon = icon => icon?.type?.displayName === ATOM_ICON_DISPLAY_NAME /** * Prepare the AtomIcon element to use the correct size diff --git a/components/atom/button/src/index.js b/components/atom/button/src/index.js index e2c68b6cec..e8fadf152f 100644 --- a/components/atom/button/src/index.js +++ b/components/atom/button/src/index.js @@ -61,9 +61,7 @@ const AtomButton = forwardRef((props, ref) => { groupPosition && focused && `${CLASS}-group--focused`, groupPosition && selected && `${CLASS}-group--selected`, size && CLASSES[size], - getModifiers({...props, disabled: disabled || isLoading}).map( - key => CLASSES[key] - ), + getModifiers({...props, disabled: disabled || isLoading}).map(key => CLASSES[key]), !children && CLASSES.empty, {[`${CLASS}--${shape}`]: Object.values(SHAPES).includes(shape)}, { @@ -90,30 +88,17 @@ const AtomButton = forwardRef((props, ref) => { {isLoading ? ( <> - + {loader} - {children && loadingText ? ( - loadingText - ) : ( - {children} - )} + {children && loadingText ? loadingText : {children}} ) : ( <> {leftIcon} - {leftIcon || rightIcon ? ( - {children} - ) : ( - children - )} + {children} {rightIcon} diff --git a/components/atom/button/src/styles/index.scss b/components/atom/button/src/styles/index.scss index c09d04e4fe..1638328cef 100644 --- a/components/atom/button/src/styles/index.scss +++ b/components/atom/button/src/styles/index.scss @@ -80,7 +80,7 @@ $base-class: '.sui-AtomButton'; justify-content: center; } - #{$base-class}-text { + #{$base-class}-content { opacity: 0; } } @@ -142,17 +142,8 @@ $base-class: '.sui-AtomButton'; text-decoration-line: none; @include button-focused { - background: if( - length($pair) > 2, - nth($pair, 3), - color-variation($color, -1) - ); - - border-color: if( - length($pair) > 2, - nth($pair, 3), - color-variation($color, -1) - ); + background: if(length($pair) > 2, nth($pair, 3), color-variation($color, -1)); + border-color: if(length($pair) > 2, nth($pair, 3), color-variation($color, -1)); } &#{$base-class}--negative { @@ -179,11 +170,7 @@ $base-class: '.sui-AtomButton'; text-decoration-line: none; @include button-focused { - background: if( - length($pair) > 2, - nth($pair, 4), - $bgc-atom-button-focused - ); + background: if(length($pair) > 2, nth($pair, 4), $bgc-atom-button-focused); @if ($color != $c-atom-button-focused) { color: $c-atom-button-focused; @@ -205,10 +192,7 @@ $base-class: '.sui-AtomButton'; &#{$base-class}--link:not(#{$base-class}--solid):not(#{$base-class}--outline):not(#{$base-class}--flat) { $c-atom-button-focused: color-variation($color, -1) !default; $c-atom-button-link-focused: $c-atom-button-focused !default; - $c-atom-button-focused-invert: color-variation( - $color-invert, - -1 - ) !default; + $c-atom-button-focused-invert: color-variation($color-invert, -1) !default; color: $color; @include button-focused { diff --git a/components/atom/button/test/index.test.js b/components/atom/button/test/index.test.js index f93a3858f6..2247748f1a 100644 --- a/components/atom/button/test/index.test.js +++ b/components/atom/button/test/index.test.js @@ -86,8 +86,7 @@ describe(json.name, () => { it.skip('should NOT extend classNames', () => { // Given const props = {className: 'extended-classNames'} - const findSentence = str => string => - string.match(new RegExp(`S*${str}S*`)) + const findSentence = str => string => string.match(new RegExp(`S*${str}S*`)) // When const {container} = setup(props) @@ -140,19 +139,13 @@ describe(json.name, () => { const props = { type: 'primary' } - const classes = createClasses([ - ...Object.values(atomButtonColors), - ...Object.values(atomButtonDesigns) - ]) - const findSentence = str => string => - string.match(new RegExp(`S*${str}S*`)) + const classes = createClasses([...Object.values(atomButtonColors), ...Object.values(atomButtonDesigns)]) + const findSentence = str => string => string.match(new RegExp(`S*${str}S*`)) // When const {container} = setup(props) const findColorClassName = findSentence(classes.primary) - const findDesignClassName = findSentence( - classes[atomButtonDesigns.SOLID] - ) + const findDesignClassName = findSentence(classes[atomButtonDesigns.SOLID]) // Then expect(findColorClassName(container.innerHTML)).to.not.be.null @@ -165,19 +158,13 @@ describe(json.name, () => { type: 'primary', link: true } - const classes = createClasses([ - ...Object.values(atomButtonColors), - ...Object.values(atomButtonDesigns) - ]) - const findSentence = str => string => - string.match(new RegExp(`S*${str}S*`)) + const classes = createClasses([...Object.values(atomButtonColors), ...Object.values(atomButtonDesigns)]) + const findSentence = str => string => string.match(new RegExp(`S*${str}S*`)) // When const {container} = setup(props) const findColorClassName = findSentence(classes.primary) - const findDesignClassName = findSentence( - classes[atomButtonDesigns.LINK] - ) + const findDesignClassName = findSentence(classes[atomButtonDesigns.LINK]) // Then expect(findColorClassName(container.innerHTML)).to.not.be.null @@ -191,19 +178,13 @@ describe(json.name, () => { const props = { type: 'accent' } - const classes = createClasses([ - ...Object.values(atomButtonColors), - ...Object.values(atomButtonDesigns) - ]) - const findSentence = str => string => - string.match(new RegExp(`S*${str}S*`)) + const classes = createClasses([...Object.values(atomButtonColors), ...Object.values(atomButtonDesigns)]) + const findSentence = str => string => string.match(new RegExp(`S*${str}S*`)) // When const {container} = setup(props) const findColorClassName = findSentence(classes.accent) - const findDesignClassName = findSentence( - classes[atomButtonDesigns.SOLID] - ) + const findDesignClassName = findSentence(classes[atomButtonDesigns.SOLID]) // Then expect(findColorClassName(container.innerHTML)).to.not.be.null @@ -216,19 +197,13 @@ describe(json.name, () => { type: 'accent', link: true } - const classes = createClasses([ - ...Object.values(atomButtonColors), - ...Object.values(atomButtonDesigns) - ]) - const findSentence = str => string => - string.match(new RegExp(`S*${str}S*`)) + const classes = createClasses([...Object.values(atomButtonColors), ...Object.values(atomButtonDesigns)]) + const findSentence = str => string => string.match(new RegExp(`S*${str}S*`)) // When const {container} = setup(props) const findColorClassName = findSentence(classes.accent) - const findDesignClassName = findSentence( - classes[atomButtonDesigns.LINK] - ) + const findDesignClassName = findSentence(classes[atomButtonDesigns.LINK]) // Then expect(findColorClassName(container.innerHTML)).to.not.be.null @@ -242,19 +217,13 @@ describe(json.name, () => { const props = { type: 'secondary' } - const classes = createClasses([ - ...Object.values(atomButtonColors), - ...Object.values(atomButtonDesigns) - ]) - const findSentence = str => string => - string.match(new RegExp(`S*${str}S*`)) + const classes = createClasses([...Object.values(atomButtonColors), ...Object.values(atomButtonDesigns)]) + const findSentence = str => string => string.match(new RegExp(`S*${str}S*`)) // When const {container} = setup(props) const findColorClassName = findSentence(classes.primary) - const findDesignClassName = findSentence( - classes[atomButtonDesigns.OUTLINE] - ) + const findDesignClassName = findSentence(classes[atomButtonDesigns.OUTLINE]) // Then expect(findColorClassName(container.innerHTML)).to.not.be.null @@ -267,19 +236,13 @@ describe(json.name, () => { type: 'secondary', link: true } - const classes = createClasses([ - ...Object.values(atomButtonColors), - ...Object.values(atomButtonDesigns) - ]) - const findSentence = str => string => - string.match(new RegExp(`S*${str}S*`)) + const classes = createClasses([...Object.values(atomButtonColors), ...Object.values(atomButtonDesigns)]) + const findSentence = str => string => string.match(new RegExp(`S*${str}S*`)) // When const {container} = setup(props) const findColorClassName = findSentence(classes.primary) - const findDesignClassName = findSentence( - classes[atomButtonDesigns.LINK] - ) + const findDesignClassName = findSentence(classes[atomButtonDesigns.LINK]) // Then expect(findColorClassName(container.innerHTML)).to.not.be.null @@ -293,19 +256,13 @@ describe(json.name, () => { const props = { type: 'tertiary' } - const classes = createClasses([ - ...Object.values(atomButtonColors), - ...Object.values(atomButtonDesigns) - ]) - const findSentence = str => string => - string.match(new RegExp(`S*${str}S*`)) + const classes = createClasses([...Object.values(atomButtonColors), ...Object.values(atomButtonDesigns)]) + const findSentence = str => string => string.match(new RegExp(`S*${str}S*`)) // When const {container} = setup(props) const findColorClassName = findSentence(classes.primary) - const findDesignClassName = findSentence( - classes[atomButtonDesigns.FLAT] - ) + const findDesignClassName = findSentence(classes[atomButtonDesigns.FLAT]) // Then expect(findColorClassName(container.innerHTML)).to.not.be.null @@ -318,19 +275,13 @@ describe(json.name, () => { type: 'tertiary', link: true } - const classes = createClasses([ - ...Object.values(atomButtonColors), - ...Object.values(atomButtonDesigns) - ]) - const findSentence = str => string => - string.match(new RegExp(`S*${str}S*`)) + const classes = createClasses([...Object.values(atomButtonColors), ...Object.values(atomButtonDesigns)]) + const findSentence = str => string => string.match(new RegExp(`S*${str}S*`)) // When const {container} = setup(props) const findColorClassName = findSentence(classes.primary) - const findDesignClassName = findSentence( - classes[atomButtonDesigns.LINK] - ) + const findDesignClassName = findSentence(classes[atomButtonDesigns.LINK]) // Then expect(findColorClassName(container.innerHTML)).to.not.be.null @@ -344,14 +295,11 @@ describe(json.name, () => { // Given const props = {} const classes = createClasses([...Object.values(atomButtonDesigns)]) - const findSentence = str => string => - string.match(new RegExp(`S*${str}S*`)) + const findSentence = str => string => string.match(new RegExp(`S*${str}S*`)) // When const {container} = setup(props) - const findDesignClassName = findSentence( - classes[atomButtonDesigns.SOLID] - ) + const findDesignClassName = findSentence(classes[atomButtonDesigns.SOLID]) // Then expect(findDesignClassName(container.innerHTML)).to.not.be.null @@ -361,14 +309,11 @@ describe(json.name, () => { // Given const props = {link: true} const classes = createClasses([...Object.values(atomButtonDesigns)]) - const findSentence = str => string => - string.match(new RegExp(`S*${str}S*`)) + const findSentence = str => string => string.match(new RegExp(`S*${str}S*`)) // When const {container} = setup(props) - const findDesignClassName = findSentence( - classes[atomButtonDesigns.LINK] - ) + const findDesignClassName = findSentence(classes[atomButtonDesigns.LINK]) // Then expect(findDesignClassName(container.innerHTML)).to.not.be.null