Merge pull request #53 from smartive-education/feature/label-refactoring

feature/label-refactoring

src/components/typography/label.tsx

@@ -10,15 +10,15 @@ export enum LabelSize {
 
 export type LabelProps = {
   /**
-   * Label text
+   * Label/span text
    */
   children: ReactNode;
   /**
-   * For attribute for the label
+   * For-attribute for the label. If prop is set, component creates a HTML-Label, else a HTML-Span.
    */
   htmlFor?: string;
   /**
-   * Label font size
+   * Label/span font size
    */
   size: LabelSize;
 };
@@ -31,8 +31,11 @@ const classMap: Record<LabelSize, string> = {
   placeholder: 'font-poppins font-medium text-sm leading-none text-slate-300',
 };
 
-export const Label: FC<LabelProps> = ({ children, size = LabelSize.m, htmlFor }) => (
-  <label htmlFor={htmlFor} className={classMap[size]}>
-    {children}
-  </label>
-);
+export const Label: FC<LabelProps> = ({ children, size = LabelSize.m, htmlFor }) =>
+  htmlFor ? (
+    <label htmlFor={htmlFor} className={classMap[size]}>
+      {children}
+    </label>
+  ) : (
+    <span className={classMap[size]}>{children}</span>
+  );