From 77ed1a5d5976db8c08041f83e3391abda96908d2 Mon Sep 17 00:00:00 2001
From: andresin87 <andresin87@gmail.com>
Date: Mon, 20 Jan 2025 09:09:21 +0100
Subject: [PATCH] docs(components/atom/label): label documentation articles

---
 .../label/demo/articles/ArticleFontSize.tsx   |  34 ++++++
 .../label/demo/articles/ArticleInline.tsx     |  44 +++++++
 .../atom/label/demo/articles/ArticleType.tsx  |  36 ++++++
 components/atom/label/demo/index.tsx          | 111 ++----------------
 components/atom/label/demo/settings.js        |  25 ++++
 package-lock.json                             |   2 +-
 6 files changed, 148 insertions(+), 104 deletions(-)
 create mode 100644 components/atom/label/demo/articles/ArticleFontSize.tsx
 create mode 100644 components/atom/label/demo/articles/ArticleInline.tsx
 create mode 100644 components/atom/label/demo/articles/ArticleType.tsx
 create mode 100644 components/atom/label/demo/settings.js

diff --git a/components/atom/label/demo/articles/ArticleFontSize.tsx b/components/atom/label/demo/articles/ArticleFontSize.tsx
new file mode 100644
index 000000000..44841ad4a
--- /dev/null
+++ b/components/atom/label/demo/articles/ArticleFontSize.tsx
@@ -0,0 +1,34 @@
+import {Article, Box, Cell, Code, Grid, H2, Paragraph} from '@s-ui/documentation-library'
+import AtomInput from '@s-ui/react-atom-input'
+
+import AtomLabel, {type FontSize, AtomLabelFontSizes} from '../../src/index'
+import {flexCenteredStyle} from '../settings.js'
+
+const ArticleFontSize = ({className}: {className?: string}) => {
+  const labelFontSizes = [['default', undefined], ...Object.entries(AtomLabelFontSizes)] as Array<[string, FontSize]>
+  return (
+    <Article>
+      <H2>FontSize</H2>
+      <Paragraph>
+        The component provides 4 different sizes provided using the <Code>fontSize</Code> prop
+      </Paragraph>
+      <Grid cols={5} gutter={[8, 8]}>
+        {labelFontSizes.map(([key, value], index) => (
+          <Cell key={index} style={flexCenteredStyle}>
+            <Box>
+              <AtomLabel
+                name={`atomLabelName-${key}`}
+                htmlFor={`labelName-${key}`}
+                text={`Size ${value as string}`}
+                fontSize={value}
+              />
+              <AtomInput />
+            </Box>
+          </Cell>
+        ))}
+      </Grid>
+    </Article>
+  )
+}
+
+export default ArticleFontSize
diff --git a/components/atom/label/demo/articles/ArticleInline.tsx b/components/atom/label/demo/articles/ArticleInline.tsx
new file mode 100644
index 000000000..71fba8b4a
--- /dev/null
+++ b/components/atom/label/demo/articles/ArticleInline.tsx
@@ -0,0 +1,44 @@
+import {Article, Box, Cell, Code, Grid, H2, Paragraph} from '@s-ui/documentation-library'
+import AtomButton from '@s-ui/react-atom-button'
+import AtomCheckbox from '@s-ui/react-atom-checkbox'
+import AtomInput from '@s-ui/react-atom-input'
+
+import AtomLabel, {type Inline} from '../../src/index'
+import {CheckedIcon, flexCenteredStyle, IndeterminateIcon} from '../settings.js'
+
+const ArticleInline = ({className}: {className?: string}) => {
+  return (
+    <Article className={className}>
+      <H2>Inline</H2>
+      <Paragraph>
+        <Code>inline</Code> prop can be used to define where teh element is going to be inline positioned. The value
+        options are 'left' and 'right'
+      </Paragraph>
+      <Grid cols={3} gutter={[8, 8]}>
+        {[
+          <AtomInput key={0} />,
+          <AtomCheckbox key={1} checkedIcon={CheckedIcon} intermediateIcon={IndeterminateIcon} />,
+          <AtomButton key={2}>Button</AtomButton>
+        ].map((component, index) =>
+          ['left', undefined, 'right'].map((value, index) => (
+            <Cell key={index} style={flexCenteredStyle}>
+              <Box>
+                {value === 'right' && component}
+                <AtomLabel
+                  name={`atomLabelName-${value as string}`}
+                  htmlFor={`labelName-${value as string}`}
+                  text={`Label ${value as string}`}
+                  optionalText="(Optional)"
+                  inline={value as Inline}
+                />
+                {value !== 'right' && component}
+              </Box>
+            </Cell>
+          ))
+        )}
+      </Grid>
+    </Article>
+  )
+}
+
+export default ArticleInline
diff --git a/components/atom/label/demo/articles/ArticleType.tsx b/components/atom/label/demo/articles/ArticleType.tsx
new file mode 100644
index 000000000..1929ea3bf
--- /dev/null
+++ b/components/atom/label/demo/articles/ArticleType.tsx
@@ -0,0 +1,36 @@
+import {Article, Box, Cell, Code, Grid, H2, Paragraph} from '@s-ui/documentation-library'
+import AtomInput from '@s-ui/react-atom-input'
+
+import AtomLabel, {type Type, AtomLabelTypes} from '../../src/index'
+import {flexCenteredStyle} from '../settings.js'
+
+const ArticleType = ({className}: {className?: string}) => {
+  const labelTypes = [['default', undefined], ...Object.entries(AtomLabelTypes)] as Array<[string, Type]>
+
+  return (
+    <Article className={className}>
+      <H2>Type</H2>
+      <Paragraph>
+        You can select any of the available predefined types using the <Code>type</Code> prop.
+      </Paragraph>
+      <Grid cols={labelTypes.length} gutter={[8, 8]}>
+        {labelTypes.map(([key, value]: [string, Type], index) => (
+          <Cell key={index} style={flexCenteredStyle}>
+            <Box mode={value === AtomLabelTypes.CONTRAST ? 'dark' : 'light'}>
+              <AtomLabel
+                name={`atomLabelName-${key}`}
+                htmlFor={`labelName-${key}`}
+                text={`Label ${value as string}`}
+                optionalText="(Optional)"
+                type={value}
+              />
+              <AtomInput />
+            </Box>
+          </Cell>
+        ))}
+      </Grid>
+    </Article>
+  )
+}
+
+export default ArticleType
diff --git a/components/atom/label/demo/index.tsx b/components/atom/label/demo/index.tsx
index 0ec469a17..bb9e75bdc 100644
--- a/components/atom/label/demo/index.tsx
+++ b/components/atom/label/demo/index.tsx
@@ -1,36 +1,11 @@
-import {AntDesignIcon, Article, Box, Cell, Code, Grid, H1, H2, Paragraph} from '@s-ui/documentation-library'
-import AtomButton from '@s-ui/react-atom-button'
-import AtomCheckbox from '@s-ui/react-atom-checkbox'
-import AtomIcon from '@s-ui/react-atom-icon'
-import AtomInput from '@s-ui/react-atom-input'
+import {H1, Paragraph} from '@s-ui/documentation-library'
 
-import AtomLabel, {type FontSize, type Inline, type Type, AtomLabelFontSizes, AtomLabelTypes} from '../src/index'
-
-const flexCenteredStyle = {
-  display: 'flex',
-  justifyContent: 'center',
-  flexDirection: 'row',
-  wrap: 'nowrap',
-  alignItems: 'center',
-  alignContent: 'center'
-}
-
-const CheckedIcon = () => (
-  <AtomIcon>
-    <AntDesignIcon icon="AiOutlineCheck" style={{color: 'currentColor'}} />
-  </AtomIcon>
-)
-
-const IndeterminateIcon = () => (
-  <AtomIcon>
-    <AntDesignIcon icon="AiOutlineLine" style={{color: 'currentColor'}} />
-  </AtomIcon>
-)
+import ArticleFontSize from './articles/ArticleFontSize'
+import ArticleInline from './articles/ArticleInline'
+import ArticleType from './articles/ArticleType'
+import {CLASS_SECTION} from './settings'
 
 const Demo = () => {
-  const labelTypes = [['default', undefined], ...Object.entries(AtomLabelTypes)] as Array<[string, Type]>
-  const labelFontSizes = [['default', undefined], ...Object.entries(AtomLabelFontSizes)] as Array<[string, FontSize]>
-
   return (
     <div className="sui-StudioPreview">
       <H1>Label</H1>
@@ -38,81 +13,11 @@ const Demo = () => {
         The Label is the name of the associated field, that explains what is the about. It should be clear, concise and
         short.
       </Paragraph>
-      <Article>
-        <H2>Type</H2>
-        <Paragraph>
-          You can select any of the avaliable predefined types using the <Code>type</Code> prop.
-        </Paragraph>
-        <Grid cols={labelTypes.length} gutter={[8, 8]}>
-          {labelTypes.map(([key, value], index) => (
-            <Cell key={index} style={flexCenteredStyle}>
-              <Box mode={value === AtomLabelTypes.CONTRAST ? 'dark' : 'light'}>
-                <AtomLabel
-                  name={`atomLabelName-${key}`}
-                  htmlFor={`labelName-${key}`}
-                  text={`Label ${value}`}
-                  optionalText="(Optional)"
-                  type={value}
-                />
-                <AtomInput />
-              </Box>
-            </Cell>
-          ))}
-        </Grid>
-      </Article>
+      <ArticleType className={CLASS_SECTION} />
       <br />
-      <Article>
-        <H2>Inline</H2>
-        <Paragraph>
-          <Code>inline</Code> prop can be used to define where teh element is going to be inline positioned. The value
-          options are 'left' and 'right'
-        </Paragraph>
-        <Grid cols={3} gutter={[8, 8]}>
-          {[
-            <AtomInput key={0} />,
-            <AtomCheckbox key={1} checkedIcon={CheckedIcon} intermediateIcon={IndeterminateIcon} />,
-            <AtomButton key={2}>Button</AtomButton>
-          ].map((component, index) =>
-            ['left', undefined, 'right'].map((value, index) => (
-              <Cell key={index} style={flexCenteredStyle}>
-                <Box>
-                  {value === 'right' && component}
-                  <AtomLabel
-                    name={`atomLabelName-${value as string}`}
-                    htmlFor={`labelName-${value as string}`}
-                    text={`Label ${value as string}`}
-                    optionalText="(Optional)"
-                    inline={value as Inline}
-                  />
-                  {value !== 'right' && component}
-                </Box>
-              </Cell>
-            ))
-          )}
-        </Grid>
-      </Article>
+      <ArticleInline className={CLASS_SECTION} />
       <br />
-      <Article>
-        <H2>FontSize</H2>
-        <Paragraph>
-          The component provides 4 diferent sizes provided using the <Code>fontSize</Code> prop
-        </Paragraph>
-        <Grid cols={5} gutter={[8, 8]}>
-          {labelFontSizes.map(([key, value], index) => (
-            <Cell key={index} style={flexCenteredStyle}>
-              <Box>
-                <AtomLabel
-                  name={`atomLabelName-${key}`}
-                  htmlFor={`labelName-${key}`}
-                  text={`Size ${value as string}`}
-                  fontSize={value}
-                />
-                <AtomInput />
-              </Box>
-            </Cell>
-          ))}
-        </Grid>
-      </Article>
+      <ArticleFontSize className={CLASS_SECTION} />
     </div>
   )
 }
diff --git a/components/atom/label/demo/settings.js b/components/atom/label/demo/settings.js
new file mode 100644
index 000000000..441ce40df
--- /dev/null
+++ b/components/atom/label/demo/settings.js
@@ -0,0 +1,25 @@
+import {AntDesignIcon} from '@s-ui/documentation-library'
+import AtomIcon from '@s-ui/react-atom-icon'
+
+export const BASE_CLASS_DEMO = `DemoAtomLabel`
+export const CLASS_SECTION = `${BASE_CLASS_DEMO}-section`
+
+export const flexCenteredStyle = {
+  display: 'flex',
+  justifyContent: 'center',
+  wrap: 'nowrap',
+  alignItems: 'center',
+  alignContent: 'center'
+}
+
+export const CheckedIcon = () => (
+  <AtomIcon>
+    <AntDesignIcon icon="AiOutlineCheck" style={{color: 'currentColor'}} />
+  </AtomIcon>
+)
+
+export const IndeterminateIcon = () => (
+  <AtomIcon>
+    <AntDesignIcon icon="AiOutlineLine" style={{color: 'currentColor'}} />
+  </AtomIcon>
+)
diff --git a/package-lock.json b/package-lock.json
index 0e691e3d7..0c4a120ae 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -263,7 +263,7 @@
     },
     "components/atom/label": {
       "name": "@s-ui/react-atom-label",
-      "version": "1.25.0",
+      "version": "1.27.0",
       "license": "MIT",
       "dependencies": {
         "@s-ui/component-dependencies": "1",