docs(components/atom/label): improve the id for label pairing

components/atom/label/demo/articles/ArticleFontSize.tsx

@@ -18,11 +18,11 @@ const ArticleFontSize = ({className}: {className?: string}) => {
             <Box>
               <AtomLabel
                 name={`atomLabelName-${key}`}
-                htmlFor={`labelName-${key}`}
+                htmlFor={`labelFontSize-${key}`}
                 text={`Size ${value as string}`}
                 fontSize={value}
               />
-              <AtomInput />
+              <AtomInput id={`labelFontSize-${key}`} />
             </Box>
           </Cell>
         ))}

components/atom/label/demo/articles/ArticleInline.tsx

@@ -1,5 +1,4 @@
 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'
 
@@ -16,22 +15,26 @@ const ArticleInline = ({className}: {className?: string}) => {
       </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) =>
+          ['input', ({...props}) => <AtomInput key={0} {...props} />],
+          [
+            'checkbox',
+            ({...props}) => (
+              <AtomCheckbox key={1} checkedIcon={CheckedIcon} indeterminateIcon={IndeterminateIcon} {...props} />
+            )
+          ]
+        ].map(([componentId, Component], index) =>
           ['left', undefined, 'right'].map((value, index) => (
             <Cell key={index} style={flexCenteredStyle}>
               <Box>
-                {value === 'right' && component}
+                {value === 'right' && <Component id={`labelInline-${value as string}-${componentId as string}`} />}
                 <AtomLabel
-                  name={`atomLabelName-${value as string}`}
-                  htmlFor={`labelName-${value as string}`}
+                  name={`atomLabelName-${value as string}-${componentId as string}`}
+                  htmlFor={`labelInline-${value as string}-${componentId as string}`}
                   text={`Label ${value as string}`}
                   optionalText="(Optional)"
                   inline={value as Inline}
                 />
-                {value !== 'right' && component}
+                {value !== 'right' && <Component id={`labelInline-${value as string}-${componentId as string}`} />}
               </Box>
             </Cell>
           ))

components/atom/label/demo/articles/ArticleType.tsx

@@ -19,12 +19,12 @@ const ArticleType = ({className}: {className?: string}) => {
             <Box mode={value === AtomLabelTypes.CONTRAST ? 'dark' : 'light'}>
               <AtomLabel
                 name={`atomLabelName-${key}`}
-                htmlFor={`labelName-${key}`}
+                htmlFor={`labelType-${key}`}
                 text={`Label ${value as string}`}
                 optionalText="(Optional)"
                 type={value}
               />
-              <AtomInput />
+              <AtomInput id={`labelType-${key}`} />
             </Box>
           </Cell>
         ))}