chore: use data attribute util in new components (#64)

* chore: use data attribute util in new components

* Create curvy-waves-burn.md

Co-authored-by: Pietro Maximoff <74987028+pietro-maximoff@users.noreply.github.com>

Author: soulBit

.changeset/curvy-waves-burn.md

@@ -0,0 +1,5 @@
+---
+"@sovryn/ui": patch
+---
+
+chore: use data attribute util in new components

packages/ui/src/1_atoms/Accordion/Accordion.tsx

@@ -2,7 +2,7 @@ import React, { ReactNode, FC, useCallback } from 'react';
 
 import classNames from 'classnames';
 
-import { DATA_ATTRIBUTE } from '../../utils/constants';
+import { applyDataAttr } from '../../utils';
 import { Heading } from '../Heading/Heading';
 import { HeadingType } from '../Heading/Heading.types';
 import { Icon } from '../Icon/Icon';
@@ -40,7 +40,7 @@ export const Accordion: FC<IAccordionProps> = ({
           [styles.disabled]: disabled,
         })}
         onClick={onClickCallback}
-        {...{ [DATA_ATTRIBUTE]: dataLayoutId }}
+        {...applyDataAttr(dataLayoutId)}
       >
         <>
           {typeof label === 'string' ? (
@@ -62,7 +62,7 @@ export const Accordion: FC<IAccordionProps> = ({
       {open && (
         <div
           className={styles.content}
-          {...{ [DATA_ATTRIBUTE]: `${dataLayoutId}-content` }}
+          {...applyDataAttr(`${dataLayoutId}-content`)}
         >
           {children}
         </div>

packages/ui/src/2_molecules/FormGroup/FormGroup.tsx

@@ -3,6 +3,7 @@ import React, { PropsWithChildren, ReactNode } from 'react';
 import classNames from 'classnames';
 
 import { Heading, HeadingType, Paragraph, ParagraphSize } from '../../1_atoms';
+import { applyDataAttr } from '../../utils';
 import styles from './FormGroup.module.css';
 
 type FormGroupProps = {
@@ -24,7 +25,7 @@ export const FormGroup: React.FC<PropsWithChildren<FormGroupProps>> = ({
   dataLayoutId,
 }) => (
   <div
-    data-layout-id={dataLayoutId}
+    {...applyDataAttr(dataLayoutId)}
     className={classNames(className, styles.formGroup)}
   >
     {(label || subtext) && (
@@ -44,7 +45,7 @@ export const FormGroup: React.FC<PropsWithChildren<FormGroupProps>> = ({
     {children}
     {errorLabel && (
       <span
-        data-layout-id={`${dataLayoutId}__error-message`}
+        {...applyDataAttr(`${dataLayoutId}__error-message`)}
         className={styles.errorLabel}
       >
         {errorLabel}

packages/ui/src/2_molecules/RadioButtonGroup/RadioButtonGroup.tsx

@@ -3,6 +3,7 @@ import React, { FC } from 'react';
 import classNames from 'classnames';
 
 import { Heading, HeadingType } from '../../1_atoms';
+import { applyDataAttr } from '../../utils';
 import { RadioButton } from '../RadioButton';
 import styles from './RadioButtonGroup.module.css';
 import {
@@ -20,7 +21,7 @@ export const RadioButtonGroup: FC<RadioButtonGroupProps> = ({
 }) => (
   <fieldset
     className={classNames(styles.radioButtonGroup, className)}
-    data-layout-id={dataLayoutId}
+    {...applyDataAttr(dataLayoutId)}
   >
     {label && (
       <Heading type={HeadingType.h3} className={styles.headingLabel}>

packages/ui/src/2_molecules/TableBase/TableBase.tsx

@@ -2,6 +2,7 @@ import React, { ReactNode } from 'react';
 
 import classNames from 'classnames';
 
+import { applyDataAttr } from '../../utils';
 import styles from './TableBase.module.css';
 import { ColumnOptions, RowObject } from './TableBase.types';
 import { TableRow } from './components/TableRow/TableRow';
@@ -32,7 +33,7 @@ export const TableBase = <RowType extends RowObject>({
   return (
     <table
       className={classNames(styles.table, className)}
-      data-layout-id={dataAttribute}
+      {...applyDataAttr(dataAttribute)}
     >
       <thead>
         <tr>

packages/ui/src/2_molecules/TableBase/components/TableRow/TableRow.tsx

@@ -2,7 +2,7 @@ import React, { useCallback, useState } from 'react';
 
 import classNames from 'classnames';
 
-import { noop } from '../../../../utils';
+import { noop, applyDataAttr } from '../../../../utils';
 import { RowObject, ColumnOptions } from '../../TableBase.types';
 import styles from './TableRow.module.css';
 
@@ -38,7 +38,7 @@ export const TableRow = <RowType extends RowObject>({
           [styles.active]: isClickable && isSelected,
         })}
         onClick={onClick}
-        data-layout-id={`${dataAttribute}-row-${index}`}
+        {...applyDataAttr(`${dataAttribute}-row-${index}`)}
       >
         {columns.map(column => (
           <td