Merge branch 'main' into feat/kadena-tools/sidebar-account-transactions

.github/CODEOWNERS

@@ -20,6 +20,5 @@
 /packages/tools/eslint-config                   @alber70g @webpro
 /packages/tools/eslint-plugin                   @alber70g @webpro
 /packages/tools/heft-rig                        @alber70g @webpro
-/packages/tools/integration-tests               @ggobugi27
 /packages/tools/remark-plugins                  @webpro
 /packages/tools/rush-fix-versions               @alber70g @webpro

common/config/rush/repo-state.json

@@ -1,5 +1,5 @@
 // DO NOT MODIFY THIS FILE MANUALLY BUT DO COMMIT IT. It is generated and used by Rush.
 {
-  "pnpmShrinkwrapHash": "48c1105dd2167eda84f82ddfcb54cf79f62d3577",
+  "pnpmShrinkwrapHash": "902dd9410361f1e4ab5a7a0f3a110aeb318ff6bf",
   "preferredVersionsHash": "bf21a9e8fbc5a3846fb05b4fa0859e0917b2202f"
 }

packages/apps/docs/src/components/Layout/Blog/Blog.tsx

@@ -45,7 +45,7 @@ export const Blog: FC<IPageProps> = ({
             {children}
 
             <div className={bottomWrapperClass}>
-              <Grid.Root spacing={'xl'} columns={12}>
+              <Grid.Root spacing="$xl" columns={12}>
                 <Grid.Item columnSpan={4}>
                   <Stack
                     alignItems="flex-start"

packages/libs/react-ui/package.json

@@ -60,8 +60,8 @@
     "@rushstack/eslint-config": "~3.3.0",
     "@rushstack/heft": "~0.50.6",
     "@rushstack/heft-jest-plugin": "~0.5.12",
-    "@storybook/addon-actions": "^7.1.0",
     "@storybook/addon-a11y": "7.1.0",
+    "@storybook/addon-actions": "^7.1.0",
     "@storybook/addon-controls": "^7.1.0",
     "@storybook/addon-essentials": "^7.1.0",
     "@storybook/addon-interactions": "^7.1.0",

packages/libs/react-ui/src/components/Grid/Grid.css.ts

@@ -15,14 +15,14 @@ export const gridItemClass = style([
 ]);
 
 export const gapVariants = styleVariants({
-  '2xs': [sprinkles({ gridGap: '$2xs' })],
-  xs: [sprinkles({ gridGap: '$xs' })],
-  sm: [sprinkles({ gridGap: '$sm' })],
-  md: [sprinkles({ gridGap: '$md' })],
-  lg: [sprinkles({ gridGap: '$lg' })],
-  xl: [sprinkles({ gridGap: '$xl' })],
-  '2xl': [sprinkles({ gridGap: '$2xl' })],
-  '3xl': [sprinkles({ gridGap: '$3xl' })],
+  $2xs: [sprinkles({ gridGap: '$2xs' })],
+  $xs: [sprinkles({ gridGap: '$xs' })],
+  $sm: [sprinkles({ gridGap: '$sm' })],
+  $md: [sprinkles({ gridGap: '$md' })],
+  $lg: [sprinkles({ gridGap: '$lg' })],
+  $xl: [sprinkles({ gridGap: '$xl' })],
+  $2xl: [sprinkles({ gridGap: '$2xl' })],
+  $3xl: [sprinkles({ gridGap: '$3xl' })],
 });
 
 export const rowSpanVariants = styleVariants({
@@ -61,7 +61,7 @@ const containerColumnVariantsArray = Object.keys(breakpoints).map((key) => {
       {
         '@media': {
           [breakpoints[key]]: {
-            gridTemplateColumns: `repeat(${count}, 1fr)`,
+            gridTemplateColumns: `repeat(${count}, minmax(0, 1fr))`,
           },
         },
       },
@@ -72,7 +72,7 @@ const containerColumnVariantsArray = Object.keys(breakpoints).map((key) => {
 export const explicitColumnVariant = styleVariants(columnCount, (count) => {
   return [
     {
-      gridTemplateColumns: `repeat(${count}, 1fr)`,
+      gridTemplateColumns: `repeat(${count}, minmax(0, 1fr))`,
     },
   ];
 });

packages/libs/react-ui/src/components/Grid/Grid.stories.tsx

@@ -57,7 +57,7 @@ type Story = StoryObj<
 export const GridRoot: Story = {
   name: 'Grid',
   args: {
-    spacing: 'xl',
+    spacing: '$xl',
     columns: {
       sm: 2,
       md: 4,
@@ -104,7 +104,7 @@ export const GridRoot: Story = {
 
 export const GridItem: Story = {
   args: {
-    spacing: 'xl',
+    spacing: '$xl',
     columns: 12,
     columnSpan: {
       sm: 2,

packages/libs/react-ui/src/components/Grid/GridRoot.tsx

@@ -36,7 +36,7 @@ const assembleColumnVariants = (
 const GridRoot: FC<IGridRootProps> = ({
   children,
   columns,
-  spacing = 'md',
+  spacing = '$md',
 }) => {
   const classList = classNames(
     gapVariants[spacing],

packages/libs/react-ui/src/components/TrackerCard/TrackerCard.css.ts

@@ -1,5 +1,5 @@
-import { sprinkles } from '../../styles';
-
+import { sprinkles } from '@theme/sprinkles.css';
+import { darkThemeClass, vars } from '@theme/vars.css';
 import { style, styleVariants } from '@vanilla-extract/css';
 
 export const layoutVariant = styleVariants({
@@ -77,13 +77,24 @@ export const CardContainer = style([
   sprinkles({
     display: 'grid',
     padding: '$3',
-    gap: '$4',
+    gap: '$2',
     marginTop: '$sm',
     borderRadius: '$sm',
     alignItems: 'flex-start',
     fontSize: '$sm',
-    background: '$background',
+    background: {
+      lightMode: '$white',
+      darkMode: '$gray100',
+    },
   }),
+  {
+    border: `1px solid ${vars.colors.$borderDefault}`,
+    selectors: {
+      [`${darkThemeClass} &`]: {
+        border: `1px solid ${vars.colors.$gray60}`,
+      },
+    },
+  },
 ]);
 
 export const ContentContainer = style([

packages/libs/react-ui/src/components/TrackerCard/TrackerCard.tsx

@@ -23,7 +23,7 @@ export interface ITrackerCardProps {
   helperText?: string;
   helperTextType?: 'mild' | 'severe';
   icon?: (typeof ProductIcon)[keyof typeof ProductIcon];
-  variant: keyof typeof layoutVariant;
+  variant?: keyof typeof layoutVariant;
 }
 
 export interface ILabelValue {
@@ -40,7 +40,7 @@ export const TrackerCard: FC<ITrackerCardProps> = ({
   icon,
   helperText,
   helperTextType = 'mild',
-  variant,
+  variant = 'vertical',
 }): JSX.Element => {
   const classCardContainer = classNames(
     CardContainer,
@@ -64,7 +64,7 @@ export const TrackerCard: FC<ITrackerCardProps> = ({
 
   return (
     <div className={classCardContainer} data-testid="kda-tracker-card">
-      {Icon ? <Icon data-testid="kda-icon" /> : <div />}
+      {Icon ? <Icon data-testid="kda-icon" size="xl" /> : null}
       <div className={ContentContainer}>
         <div className={DataContainer} data-testid="kda-data-container">
           {labelValues?.map((item, index) => {