fix(components/atom/button): google translate

components/atom/button/demo/TypeDeprecatedArticle.js

@@ -39,20 +39,17 @@ const TypeDeprecatedArticle = () => {
       <H2>TYPES</H2>
       <H4>Correct usage</H4>
       <Paragraph>
-        HTML button <Code>type</Code> attribute is used for specifying the
-        behavior of button.
+        HTML button <Code>type</Code> attribute is used for specifying the behavior of button.
       </Paragraph>
       <Paragraph>
-        <Strong>Tip</Strong>: Always specify the type attribute for the button
-        element. Different browsers may use different default types for the
-        button element
+        <Strong>Tip</Strong>: Always specify the type attribute for the button element. Different browsers may use
+        different default types for the button element
       </Paragraph>
       <Grid cols={1} gutter={[8, 8]}>
         {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]) => (
           <Fragment key={key}>
             <Cell style={{...flexCenteredStyle, justifyContent: 'flex-start'}}>
@@ -66,22 +63,10 @@ const TypeDeprecatedArticle = () => {
       <form onSubmit={handleSubmit}>
         <Grid cols={3} gutter={[8, 8]}>
           <Cell span={3}>
-            <Input
-              fullWidth
-              type="text"
-              id="fname"
-              name="fname"
-              placeholder="first name"
-            />
+            <Input fullWidth type="text" id="fname" name="fname" placeholder="first name" />
           </Cell>
           <Cell span={3}>
-            <Input
-              fullWidth
-              type="text"
-              id="lname"
-              name="lname"
-              placeholder="Last name"
-            />
+            <Input fullWidth type="text" id="lname" name="lname" placeholder="Last name" />
           </Cell>
           <Cell>
             <AtomButton fullWidth type="submit">
@@ -101,13 +86,10 @@ const TypeDeprecatedArticle = () => {
         </Grid>
       </form>
       <H4 deprecated>Deprecated usage</H4>
+      <Paragraph>Type of button: 'primary' (default), 'accent', 'secondary', 'tertiary'</Paragraph>
       <Paragraph>
-        Type of button: 'primary' (default), 'accent', 'secondary', 'tertiary'
-      </Paragraph>
-      <Paragraph>
-        This prop should <Bold>NEVER</Bold> be combined with <Code>color</Code>{' '}
-        and <Code>design</Code> props. It causes unexpected behaviors. This prop
-        is priorized over the 2 others previously mentioned.
+        This prop should <Bold>NEVER</Bold> be combined with <Code>color</Code> and <Code>design</Code> props. It causes
+        unexpected behaviors. This prop is priorized over the 2 others previously mentioned.
       </Paragraph>
       <Grid gutter={[8, 8]} cols={atomButtonTypes.length + 1}>
         {stackMap(

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 (
+    <Article className={className}>
+      <H2>Alignment</H2>
+      <Paragraph>
+        Button content alignment, under the prop <Code>alignment</Code> exported from <Code>atomButtonAlignment</Code>
+      </Paragraph>
+      <Paragraph>Button can have {atomButtonAlignmentIterator.length} alignments:</Paragraph>
+      <UnorderedList>
+        {atomButtonAlignmentIterator.map(([{key, alignment}]) => (
+          <ListItem key={key}>
+            <Code>atomButtonAlignment.{key}</Code>: "{alignment}"
+          </ListItem>
+        ))}
+      </UnorderedList>
+      <Grid cols={atomButtonAlignmentIterator.length} gutter={[10, 10]}>
+        {atomButtonAlignmentIterator.map(([{key, alignment}]) => (
+          <Cell key={key}>
+            <Grid cols={1} gutter={10}>
+              <Cell style={{...flexCenteredStyle, justifyContent: 'flex-start'}}>
+                <Label>{key}</Label>
+              </Cell>
+              <Cell style={{...flexCenteredStyle, justifyContent: 'flex-start'}}>
+                <Button alignment={alignment} fullWidth>
+                  Button
+                </Button>
+              </Cell>
+            </Grid>
+          </Cell>
+        ))}
+      </Grid>
+    </Article>
+  )
+}
+
+ArticleAlignment.displayName = 'ArticleAlignment'
+
+ArticleAlignment.propTypes = {
+  className: PropTypes.string
+}
+
+export default ArticleAlignment

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 (
+    <Article className={className}>
+      <H2>Color</H2>
+      <Paragraph>Button can have {atomButtonColorsIterator.length} colors:</Paragraph>
+      <UnorderedList>
+        {atomButtonColorsIterator.map(([{key, color}]) => (
+          <ListItem key={key}>
+            <Code>atomButtonColor.{key}</Code>: "{color}"
+          </ListItem>
+        ))}
+      </UnorderedList>
+      <Grid cols={atomButtonColorsIterator.length} gutter={10}>
+        {atomButtonColorsIterator.map(([{key, color}]) => (
+          <Cell key={key}>
+            <Grid cols={1} gutter={10}>
+              <Cell style={{...flexCenteredStyle, justifyContent: 'flex-start'}}>
+                <Label>{key}</Label>
+              </Cell>
+              <Cell style={{...flexCenteredStyle, justifyContent: 'flex-start'}}>
+                <Button color={color}>Button</Button>
+              </Cell>
+            </Grid>
+          </Cell>
+        ))}
+      </Grid>
+    </Article>
+  )
+}
+
+ArticleColor.displayName = 'ArticleColor'
+
+ArticleColor.propTypes = {
+  className: PropTypes.string
+}
+
+export default ArticleColor

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 (
+    <Article className={className}>
+      <H2>Design</H2>
+      <Paragraph>Button can have {Object.values(atomButtonDesignsIterator).length} designs:</Paragraph>
+      <UnorderedList>
+        {atomButtonDesignsIterator.map(([{key, design}]) => (
+          <ListItem key={key}>
+            <Code>atomButtonDesign.{key}</Code>: "{design}"
+          </ListItem>
+        ))}
+      </UnorderedList>
+      <Grid cols={Object.values(atomButtonDesignsIterator).length} gutter={10}>
+        {atomButtonDesignsIterator.map(([{key, design}]) => (
+          <Cell key={key}>
+            <Grid cols={1} gutter={10}>
+              <Cell style={{...flexCenteredStyle, justifyContent: 'flex-start'}}>
+                <Label>{key}</Label>
+              </Cell>
+              <Cell style={{...flexCenteredStyle, justifyContent: 'flex-start'}}>
+                <Button design={design}>Button</Button>
+              </Cell>
+            </Grid>
+          </Cell>
+        ))}
+      </Grid>
+    </Article>
+  )
+}
+
+ArticleDesign.displayName = 'ArticleDesign'
+
+ArticleDesign.propTypes = {
+  className: PropTypes.string
+}
+
+export default ArticleDesign

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 (
+    <Article className={className}>
+      <H2>Colors and Designs</H2>
+      <Paragraph>
+        These are the available <Code>color</Code> types of button, which are solid by default for each{' '}
+        <Code>design</Code>.
+      </Paragraph>
+      <Grid cols={7} gutter={10}>
+        <Cell />
+        {atomButtonColorsIterator.map(([{color}], index) => (
+          <Cell key={index} style={flexCenteredStyle}>
+            <Label>{color}</Label>
+          </Cell>
+        ))}
+        {atomButtonDesignsIterator.map(([{design}], index) => (
+          <Fragment key={index}>
+            <Cell style={{...flexCenteredStyle, justifyContent: 'flex-start'}}>
+              <Label>{design}</Label>
+            </Cell>
+            {atomButtonColorsIterator.map(([{color}], index) => (
+              <Cell key={index} style={flexCenteredStyle}>
+                <AtomButton design={design} color={color}>
+                  Button
+                </AtomButton>
+              </Cell>
+            ))}
+          </Fragment>
+        ))}
+      </Grid>
+      <Paragraph>All the designs can also get social network color intents</Paragraph>
+      <Grid cols={7} gutter={10}>
+        <Cell />
+        {atomButtonSocialColorsIterator.map(([{color}], index) => (
+          <Cell key={index} style={flexCenteredStyle}>
+            <Label>{color}</Label>
+          </Cell>
+        ))}
+        {atomButtonDesignsIterator.map(([{design}], index) => (
+          <Fragment key={index}>
+            <Cell style={{...flexCenteredStyle, justifyContent: 'flex-start'}}>
+              <Label>{design}</Label>
+            </Cell>
+            {atomButtonSocialColorsIterator.map(([{color}], index) => (
+              <Cell key={index} style={flexCenteredStyle}>
+                <AtomButton design={design} color={color}>
+                  Button
+                </AtomButton>
+              </Cell>
+            ))}
+          </Fragment>
+        ))}
+      </Grid>
+    </Article>
+  )
+}
+
+ArticleDesignColor.displayName = 'ArticleDesignColor'
+
+ArticleDesignColor.propTypes = {
+  className: PropTypes.string
+}
+
+export default ArticleDesignColor

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 (
+    <Article className={className}>
+      <H2>Elevation</H2>
+      <Paragraph>
+        Use <Code>elevation</Code> prop to display a shadow around the button. If it's not set no shadow will be shown.
+      </Paragraph>
+      <Paragraph>Button can have {atomButtonElevationsIterator.length} elevations:</Paragraph>
+      <UnorderedList>
+        {atomButtonElevationsIterator.map(([{key, elevation}]) => (
+          <ListItem key={key}>
+            <Code>atomButtonElevation.{key}</Code>: "{elevation}"
+          </ListItem>
+        ))}
+      </UnorderedList>
+      <Grid cols={atomButtonElevationsIterator.length} gutter={10}>
+        {atomButtonElevationsIterator.map(([{key, elevation}]) => (
+          <Cell key={key}>
+            <Grid cols={1} gutter={10}>
+              <Cell style={{...flexCenteredStyle, justifyContent: 'flex-start'}}>
+                <Label>{key}</Label>
+              </Cell>
+              <Cell style={{...flexCenteredStyle, justifyContent: 'flex-start'}}>
+                <Button elevation={elevation}>Button</Button>
+              </Cell>
+            </Grid>
+          </Cell>
+        ))}
+      </Grid>
+    </Article>
+  )
+}
+
+ArticleElevation.displayName = 'ArticleElevation'
+
+ArticleElevation.propTypes = {
+  className: PropTypes.string
+}
+
+export default ArticleElevation