chore: sync lace main branch

Author: pczeglik-iohk

src/design-system/action-card/action-card.component.tsx

@@ -1,18 +1,23 @@
 import type { ReactNode } from 'react';
 import React from 'react';
 
+import classNames from 'classnames';
+
 import { Box } from '../box';
 import { Flex } from '../flex';
 import { Text } from '../text';
+import { FontWeights } from '../text/create-text.util';
 
 import * as cx from './action-card.css';
 
 import type { OmitClassName } from '../../types';
 
 type Props = Omit<OmitClassName<'div'>, 'title'> & {
-  title: { text: string; highlight: boolean }[];
+  title: { text: string; highlight?: boolean; weight?: FontWeights }[];
   description?: string;
   icon: ReactNode;
+  rootClassName?: string;
+  iconClassName?: string;
 };
 
 export const ActionCard = ({
@@ -21,9 +26,9 @@ export const ActionCard = ({
   icon,
   ...props
 }: Readonly<Props>): JSX.Element => (
-  <Box {...props} className={cx.root}>
+  <Box {...props} className={classNames([cx.root, props.rootClassName])}>
     <Flex
-      className={cx.iconBox}
+      className={classNames([cx.iconBox, props.iconClassName])}
       mr="$24"
       alignItems="center"
       justifyContent="center"
@@ -33,9 +38,9 @@ export const ActionCard = ({
     <Box w="$fill">
       <Flex justifyContent="center" h="$fill" flexDirection="column">
         <Box>
-          {title.map(({ text, highlight }) => (
+          {title.map(({ text, highlight, weight }) => (
             <Text.Body.Normal
-              weight="$medium"
+              weight={weight || '$medium'}
               color={highlight ? 'highlight' : 'primary'}
               key={text}
             >

src/design-system/auto-suggest-box/auto-suggest-box-icon.component.tsx

@@ -15,7 +15,7 @@ export interface Props {
 }
 
 export const Icon = ({ status }: Readonly<Props>): JSX.Element => {
-  const isValidating = status === ValidationStatus.Validading;
+  const isValidating = status === ValidationStatus.Validating;
   const isValidated = status === ValidationStatus.Validated;
 
   if (status === undefined) {

src/design-system/auto-suggest-box/auto-suggest-box-suggestion.component.tsx

@@ -30,29 +30,29 @@ const getSuggestionComponent = (
 };
 
 export const Suggestion = forwardRef<HTMLDivElement, SuggestionComponentProps>(
-  ({ onClick, suggestion }, ref): JSX.Element => (
-    <Select.Item
-      tabIndex={0}
-      ref={ref}
-      data-testid={`auto-suggest-box-suggestion-${suggestion.value}`}
-      value={suggestion.value}
-      className={cx.suggestion}
-      onClick={(): void => {
-        onClick(suggestion.value);
-      }}
-      onKeyDown={(event): void => {
-        if (event.code === 'Enter') {
+  function Suggestion({ onClick, suggestion }, ref): JSX.Element {
+    return (
+      <Select.Item
+        tabIndex={0}
+        ref={ref}
+        data-testid={`auto-suggest-box-suggestion-${suggestion.value}`}
+        value={suggestion.value}
+        className={cx.suggestion}
+        onClick={(): void => {
           onClick(suggestion.value);
-        }
-      }}
-    >
-      {getSuggestionComponent(suggestion)}
-    </Select.Item>
-  ),
+        }}
+        onKeyDown={(event): void => {
+          if (event.code === 'Enter') {
+            onClick(suggestion.value);
+          }
+        }}
+      >
+        {getSuggestionComponent(suggestion)}
+      </Select.Item>
+    );
+  },
 );
 
-Suggestion.displayName = 'Suggestion';
-
 export const SuggestionClassic = ({
   label,
   value,

src/design-system/auto-suggest-box/auto-suggest-box-types.ts

@@ -1,6 +1,6 @@
 export enum ValidationStatus {
   Idle = 'Idle',
-  Validading = 'Validading',
+  Validating = 'Validating',
   Validated = 'Validated',
 }
 

src/design-system/box/box.component.tsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react';
+import React, { HTMLAttributes, forwardRef } from 'react';
 import type { CSSProperties, PropsWithChildren } from 'react';
 
 import classNames from 'classnames';
@@ -27,7 +27,8 @@ export type BoxProps = Pick<
   | 'w'
 > & { className?: string; style?: CSSProperties };
 
-export type Props = PropsWithChildren<BoxProps>;
+export type Props = PropsWithChildren<BoxProps> &
+  HTMLAttributes<HTMLDivElement>;
 
 export const Box = forwardRef<HTMLDivElement | null, Readonly<Props>>(
   (

src/design-system/text/create-text.util.tsx

@@ -8,7 +8,7 @@ import { bold, medium, regular, semibold, typography } from './text.css';
 import type { TypographyVariants } from './text.css';
 import type { Theme } from '../../design-tokens';
 
-type FontWeights = keyof Theme['fontWeights'];
+export type FontWeights = keyof Theme['fontWeights'];
 
 type TextTypes = TypographyVariants['type'];
 type TextColor = TypographyVariants['color'];

src/design-tokens/sx.css.ts

@@ -32,7 +32,7 @@ const responsiveProperties = defineProperties({
       'grid',
       'inline-flex',
     ],
-    flexDirection: ['row', 'column', 'column-reverse'],
+    flexDirection: ['row', 'column', 'column-reverse', 'row-reverse'],
     justifyContent: [
       'stretch',
       'flex-start',