Migrate Text component from useStyles to useDefinition

Signed-off-by: Johan Persson <johanopersson@gmail.com>

packages/ui/src/components/Text/Text.tsx

@@ -15,35 +15,27 @@
  */
 
 import { forwardRef } from 'react';
-import clsx from 'clsx';
 import type { ElementType } from 'react';
 import type { TextProps } from './types';
-import { useStyles } from '../../hooks/useStyles';
-import styles from './Text.module.css';
+import { useDefinition } from '../../hooks/useDefinition';
 import { TextDefinition } from './definition';
 
 function TextComponent<T extends ElementType = 'span'>(
   props: TextProps<T>,
   ref: React.Ref<any>,
 ) {
-  const Component = props.as || 'span';
-
-  const { classNames, dataAttributes, cleanedProps } = useStyles(
+  const { ownProps, restProps, dataAttributes } = useDefinition(
     TextDefinition,
-    {
-      variant: 'body-medium',
-      weight: 'regular',
-      color: 'primary',
-      ...props,
-    },
+    props,
   );
+  const { classes, as } = ownProps;
 
-  const { className, truncate, ...restProps } = cleanedProps;
+  const Component = as;
 
   return (
     <Component
       ref={ref}
-      className={clsx(classNames.root, styles[classNames.root], className)}
+      className={classes.root}
       {...dataAttributes}
       {...restProps}
     />

packages/ui/src/components/Text/definition.ts

@@ -14,27 +14,25 @@
  * limitations under the License.
  */
 
-import type { ComponentDefinition } from '../../types';
+import { defineComponent } from '../../hooks/useDefinition';
+import type { TextOwnProps } from './types';
+import styles from './Text.module.css';
 
 /**
  * Component definition for Text
  * @public
  */
-export const TextDefinition = {
+export const TextDefinition = defineComponent<TextOwnProps>()({
+  styles,
   classNames: {
     root: 'bui-Text',
   },
-  dataAttributes: {
-    variant: ['subtitle', 'body', 'caption', 'label'] as const,
-    weight: ['regular', 'bold'] as const,
-    color: [
-      'primary',
-      'secondary',
-      'danger',
-      'warning',
-      'success',
-      'info',
-    ] as const,
-    truncate: [true, false] as const,
+  propDefs: {
+    as: { default: 'span' },
+    variant: { dataAttribute: true, default: 'body-medium' },
+    weight: { dataAttribute: true, default: 'regular' },
+    color: { dataAttribute: true, default: 'primary' },
+    truncate: { dataAttribute: true },
+    className: {},
   },
-} as const satisfies ComponentDefinition;
+});

packages/ui/src/components/Text/types.ts

@@ -47,6 +47,7 @@ export type TextOwnProps = {
     | TextColorStatus
     | Partial<Record<Breakpoint, TextColors | TextColorStatus>>;
   truncate?: boolean;
+  className?: string;
 };
 
 /** @public */