@granto-umbrella/umbrella-components 3.0.34 → 3.0.37

package/src/styles/tokens/shadows.ts

@@ -1,22 +1,22 @@
-import { semanticColors } from "./colors";
-
-export const primitiveShadows = {
-  shadow: {
-    primary: `0px 0px 0px 2px ${semanticColors.branding.border.enabled}`,
-    danger: `0px 0px 0px 2px ${semanticColors.danger.border.enabled}`,
-    none: "none",
-    default:
-      "0px 2px 4px rgba(158, 158, 158, 0.05), 0px 7px 7px rgba(158, 158, 158, 0.04), 0px 16px 9px rgba(158, 158, 158, 0.03), 0px 28px 11px rgba(158, 158, 158, 0.01), 0px 44px 12px rgba(158, 158, 158, 0)",
-    md: "0px 2px 4px rgba(158, 158, 158, 0.2), 0px 8px 8px rgba(158, 158, 158, 0.17), 0px 17px 10px rgba(158, 158, 158, 0.1), 0px 30px 12px rgba(158, 158, 158, 0.03), 0px 47px 13px rgba(158, 158, 158, 0)",
-    lg: "1px 1px 3px rgba(214, 214, 214, 0.2), 4px 4px 6px rgba(214, 214, 214, 0.17), 9px 10px 8px rgba(214, 214, 214, 0.1), 15px 17px 9px rgba(214, 214, 214, 0.03), 24px 26px 10px rgba(214, 214, 214, 0)",
-  },
-};
-
-export const semanticShadows = {
-  shadow: {
-    none: primitiveShadows.shadow.none,
-    default: primitiveShadows.shadow.default,
-    md: primitiveShadows.shadow.md,
-    lg: primitiveShadows.shadow.lg,
-  },
-};
+import { semanticColors } from './colors';
+
+export const primitiveShadows = {
+  shadow: {
+    primary: `0px 0px 0px 2px ${semanticColors.branding.border.enabled}`,
+    danger: `0px 0px 0px 2px ${semanticColors.danger.border.enabled}`,
+    none: 'none',
+    default:
+      '0px 2px 4px rgba(158, 158, 158, 0.05), 0px 7px 7px rgba(158, 158, 158, 0.04), 0px 16px 9px rgba(158, 158, 158, 0.03), 0px 28px 11px rgba(158, 158, 158, 0.01), 0px 44px 12px rgba(158, 158, 158, 0)',
+    md: '0px 2px 4px rgba(158, 158, 158, 0.2), 0px 8px 8px rgba(158, 158, 158, 0.17), 0px 17px 10px rgba(158, 158, 158, 0.1), 0px 30px 12px rgba(158, 158, 158, 0.03), 0px 47px 13px rgba(158, 158, 158, 0)',
+    lg: '1px 1px 3px rgba(214, 214, 214, 0.2), 4px 4px 6px rgba(214, 214, 214, 0.17), 9px 10px 8px rgba(214, 214, 214, 0.1), 15px 17px 9px rgba(214, 214, 214, 0.03), 24px 26px 10px rgba(214, 214, 214, 0)',
+  },
+};
+
+export const semanticShadows = {
+  shadow: {
+    none: primitiveShadows.shadow.none,
+    default: primitiveShadows.shadow.default,
+    md: primitiveShadows.shadow.md,
+    lg: primitiveShadows.shadow.lg,
+  },
+};

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 };
+}