@granto-umbrella/umbrella-components 3.0.34 → 3.0.36

package/src/styles/tokens/sizes.ts

@@ -1,64 +1,60 @@
-export const primitiveSizes = {
-  size: {
-    quarter: "0.0625rem", // 1px
-    half: "0.125rem", // 2px
-    x1: "0.25rem", // 4px
-    x2: "0.5rem", // 8px
-    x3: "0.75rem", // 12px
-    x4: "1rem", // 16px
-    x5: "1.25rem", // 20px
-    x6: "1.5rem", // 24px
-    x7: "1.75rem", // 28px
-    x8: "2rem", // 32px
-    x9: "2.25rem", // 36px
-    x10: "2.5rem", // 40px
-    x11: "2.75rem", // 44px
-    x12: "3rem", // 48px
-    x13: "3.25rem", // 52px
-    x14: "3.5rem", // 56px
-    x15: "3.75rem", // 60px
-    x16: "4rem", // 64px
-    x28: "6.9375rem", //111px
-    x44: "10.9375rem", //175px
-  },
-};
-
-export const semanticSizes = {
-  global: {
-    gap: {
-      xs: primitiveSizes.size.x1, // 4px
-      sm: primitiveSizes.size.x2, // 8px
-      md: primitiveSizes.size.x3, // 12px
-      lg: primitiveSizes.size.x4, // 16px
-      xl: primitiveSizes.size.x6, // 24px
-      "2xl": primitiveSizes.size.x8, // 32px
-      "3xl": primitiveSizes.size.x10, // 40px
-      "4xl": primitiveSizes.size.x12, // 48px
-      "5xl": primitiveSizes.size.x14, // 56px
-      "6xl": primitiveSizes.size.x16, // 64px
-
-      
-    },
-    padding: {
-      "2xs": primitiveSizes.size.half, // 2px
-      xs: primitiveSizes.size.x1, // 4px
-      sm: primitiveSizes.size.x2, // 8px
-      md: primitiveSizes.size.x3, // 12px
-      lg: primitiveSizes.size.x4, // 16px
-      xl: primitiveSizes.size.x5, // 20px
-      "2xl": primitiveSizes.size.x6, // 24px
-      "3xl": primitiveSizes.size.x8, // 32px
-      "4xl": primitiveSizes.size.x16, // 64px
-      "5xl": primitiveSizes.size.x28, // 111px
-      "6xl": primitiveSizes.size.x44, // 175px 
-
-
-    },
-    spacings: {
-      sm: primitiveSizes.size.x6, // 24px
-      md: primitiveSizes.size.x8, // 32px
-      lg: primitiveSizes.size.x10, // 40px
-    },
-    full: "100%",
-  },
-}as const;
+export const primitiveSizes = {
+  size: {
+    quarter: '0.0625rem', // 1px
+    half: '0.125rem', // 2px
+    x1: '0.25rem', // 4px
+    x2: '0.5rem', // 8px
+    x3: '0.75rem', // 12px
+    x4: '1rem', // 16px
+    x5: '1.25rem', // 20px
+    x6: '1.5rem', // 24px
+    x7: '1.75rem', // 28px
+    x8: '2rem', // 32px
+    x9: '2.25rem', // 36px
+    x10: '2.5rem', // 40px
+    x11: '2.75rem', // 44px
+    x12: '3rem', // 48px
+    x13: '3.25rem', // 52px
+    x14: '3.5rem', // 56px
+    x15: '3.75rem', // 60px
+    x16: '4rem', // 64px
+    x28: '6.9375rem', //111px
+    x44: '10.9375rem', //175px
+  },
+};
+
+export const semanticSizes = {
+  global: {
+    gap: {
+      xs: primitiveSizes.size.x1, // 4px
+      sm: primitiveSizes.size.x2, // 8px
+      md: primitiveSizes.size.x3, // 12px
+      lg: primitiveSizes.size.x4, // 16px
+      xl: primitiveSizes.size.x6, // 24px
+      '2xl': primitiveSizes.size.x8, // 32px
+      '3xl': primitiveSizes.size.x10, // 40px
+      '4xl': primitiveSizes.size.x12, // 48px
+      '5xl': primitiveSizes.size.x14, // 56px
+      '6xl': primitiveSizes.size.x16, // 64px
+    },
+    padding: {
+      '2xs': primitiveSizes.size.half, // 2px
+      xs: primitiveSizes.size.x1, // 4px
+      sm: primitiveSizes.size.x2, // 8px
+      md: primitiveSizes.size.x3, // 12px
+      lg: primitiveSizes.size.x4, // 16px
+      xl: primitiveSizes.size.x5, // 20px
+      '2xl': primitiveSizes.size.x6, // 24px
+      '3xl': primitiveSizes.size.x8, // 32px
+      '4xl': primitiveSizes.size.x16, // 64px
+      '5xl': primitiveSizes.size.x28, // 111px
+      '6xl': primitiveSizes.size.x44, // 175px
+    },
+    spacings: {
+      sm: primitiveSizes.size.x6, // 24px
+      md: primitiveSizes.size.x8, // 32px
+      lg: primitiveSizes.size.x10, // 40px
+    },
+    full: '100%',
+  },
+} as const;

package/src/types/radius.types.ts

@@ -1 +1 @@
-export type Radius = "global" | "--border-0" | "--border-1" | "--border-2";
+export type Radius = 'global' | '--border-0' | '--border-1' | '--border-2';

package/src/types/shadows.types.ts

@@ -1 +1 @@
-export type Shadows = "shadow" | "shadow-md" | "shadow-lg";
+export type Shadows = 'shadow' | 'shadow-md' | 'shadow-lg';

package/src/utils/renderHighlightsCard.tsx

@@ -0,0 +1,21 @@
+import { render } from '@testing-library/react';
+import { HighlightsCard } from '../components/molecules/HighlightsCard/HighlightsCard';
+
+export type HighlightItem = {
+  label: string;
+  value: number;
+  color: 'red' | 'orange' | 'blue' | 'gray';
+  icon?: string;
+};
+
+const DEFAULT_ITEMS: HighlightItem[] = [
+  { label: 'Teste 1', value: 0, color: 'blue', icon: 'Star' },
+  { label: 'Teste 2', value: 1, color: 'orange' },
+  { label: 'Teste 3', value: 2, color: 'red', icon: 'Medal' },
+  { label: 'Teste 4', value: 3, color: 'gray' },
+];
+
+export function renderHighlightsCard(items: HighlightItem[] = DEFAULT_ITEMS) {
+  const utils = render(<HighlightsCard items={items} />);
+  return { ...utils, items };
+}