From 9106fbf1079c8d1eab277cde2191bb802b06bdc4 Mon Sep 17 00:00:00 2001
From: andresin87 <andresin87@gmail.com>
Date: Fri, 17 Jan 2025 11:38:10 +0100
Subject: [PATCH] feat(components/atom/label): open classnames

---
 components/atom/label/src/index.tsx       | 41 ++++++++++++++++++-----
 components/atom/label/test/index.test.tsx |  4 +--
 2 files changed, 34 insertions(+), 11 deletions(-)

diff --git a/components/atom/label/src/index.tsx b/components/atom/label/src/index.tsx
index 449643a81..373108ace 100644
--- a/components/atom/label/src/index.tsx
+++ b/components/atom/label/src/index.tsx
@@ -34,18 +34,41 @@ export interface AtomLabelProps extends Pick<LabelHTMLAttributes<HTMLLabelElemen
    * Font size: set different font sizes, use AtomLabelFontSizes
    */
   fontSize?: FontSize
+  /**
+   * class attribute
+   */
+  className?: string
 }
 
-const getClass = ({inline, type, fontSize}: Pick<AtomLabelProps, 'inline' | 'type' | 'fontSize'>) =>
-  cx(CLASSNAME, {
-    [`${CLASSNAME}--${fontSize as string}`]: Boolean(fontSize),
-    [`${CLASSNAME}--${type as string}`]: Boolean(type),
-    [`${CLASSNAME}--inlineLeft`]: inline === 'left',
-    [`${CLASSNAME}--inlineRight`]: inline === 'right'
-  })
+const getClass = ({
+  inline,
+  type,
+  fontSize,
+  className
+}: Pick<AtomLabelProps, 'inline' | 'type' | 'fontSize' | 'className'>) =>
+  cx(
+    CLASSNAME,
+    {
+      [`${CLASSNAME}--${fontSize as string}`]: Boolean(fontSize),
+      [`${CLASSNAME}--${type as string}`]: Boolean(type),
+      [`${CLASSNAME}--inlineLeft`]: inline === 'left',
+      [`${CLASSNAME}--inlineRight`]: inline === 'right'
+    },
+    className
+  )
 
-const AtomLabel: FC<AtomLabelProps> = ({name, text, inline, optionalText, type, fontSize, htmlFor, onClick}) => (
-  <label htmlFor={htmlFor ?? name} className={getClass({inline, type, fontSize})} onClick={onClick}>
+const AtomLabel: FC<AtomLabelProps> = ({
+  name,
+  text,
+  inline,
+  optionalText,
+  type,
+  fontSize,
+  htmlFor,
+  onClick,
+  className
+}) => (
+  <label htmlFor={htmlFor ?? name} className={getClass({inline, type, fontSize, className})} onClick={onClick}>
     {text}
     {Boolean(optionalText) && <span className="sui-AtomLabel-optionalText">{optionalText}</span>}
   </label>
diff --git a/components/atom/label/test/index.test.tsx b/components/atom/label/test/index.test.tsx
index 6291a01ad..db65a4db8 100644
--- a/components/atom/label/test/index.test.tsx
+++ b/components/atom/label/test/index.test.tsx
@@ -65,7 +65,7 @@ describe(json.name, () => {
       expect(container.innerHTML).to.not.have.lengthOf(0)
     })
 
-    it('should NOT extend classNames', () => {
+    it('should extend classNames', () => {
       // Given
       const props = {className: 'extended-classNames'}
       const findSentence = (str: string) => (string: string) => string.match(new RegExp(`S*${str}S*`))
@@ -75,7 +75,7 @@ describe(json.name, () => {
       const findClassName = findSentence(props.className)
 
       // Then
-      expect(findClassName(container.innerHTML)).to.be.null
+      expect(findClassName(container.innerHTML)).to.not.be.null
     })
   })