@granto-umbrella/umbrella-components 3.0.77 → 3.0.78

package/src/components/molecules/HighlightsCard/HighlightsCard.styles.tsx

@@ -1,67 +0,0 @@
-/* eslint-disable react-refresh/only-export-components */
-import styled from 'styled-components';
-import {
-  primitiveColors,
-  semanticColors,
-  semanticSizes,
-  typographyTokens,
-} from '../../../styles/tokens';
-import { HighlightProps } from './HighlightsCard.types';
-
-export const CardWrapper = styled.div`
-  display: grid;
-  grid-template-columns: repeat(2, 225px);
-  gap: ${semanticSizes.global.gap['lg']};
-  width: 100%;
-`;
-
-export const backgroundColors: Record<HighlightProps['color'], string> = {
-  red: primitiveColors.red[600], // #CB2C2D
-  orange: primitiveColors.orange[600], // #CB712C
-  blue: primitiveColors.blue[400], // #5F73E0
-  gray: primitiveColors.gray[400], // #CFCFCF
-};
-
-export const Card = styled.div<{ color: HighlightProps['color'] }>`
-  width: 225px;
-  background-color: ${({ color }) => backgroundColors[color]};
-  padding: ${semanticSizes.global.padding.xl};
-  border-radius: 8px;
-  position: relative;
-  min-height: 120px;
-  box-sizing: border-box;
-`;
-
-export const IconWrapper = styled.div`
-  position: absolute;
-  top: ${semanticSizes.global.padding.xl};
-  right: ${semanticSizes.global.padding.xl};
-  background-color: ${semanticColors.base.background};
-  border-radius: 50%;
-  width: 40px;
-  height: 40px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-`;
-
-export const CardContent = styled.div`
-  width: 100%;
-  margin-top: 60px;
-  text-align: left;
-
-  p {
-    font-size: ${typographyTokens.fontSizes.bodyXS};
-    font-weight: ${typographyTokens.fontWeights.medium};
-    margin: 0;
-    margin-bottom: ${semanticSizes.global.padding.sm};
-    color: ${semanticColors.base.background};
-  }
-
-  h3 {
-    font-size: ${typographyTokens.fontSizes.displayXL};
-    font-weight: ${typographyTokens.fontWeights.bold};
-    margin: 0;
-    color: ${semanticColors.base.background};
-  }
-`;

package/src/components/molecules/HighlightsCard/HighlightsCard.tsx

@@ -1,35 +0,0 @@
-import React from 'react';
-import {
-  Card,
-  CardWrapper,
-  IconWrapper,
-  CardContent,
-} from './HighlightsCard.styles';
-import { HighlightsCardProps } from './HighlightsCard.types';
-import Icon from '../../atoms/Icon/Icon';
-
-const HighlightsCard: React.FC<HighlightsCardProps> = ({ items }) => {
-  return (
-    <CardWrapper data-testid="highlights-wrapper">
-      {items.map((item, index) => (
-        <Card
-          key={index}
-          color={item.color}
-          data-testid={`highlight-card-${index}`}
-        >
-          {item.icon && (
-            <IconWrapper data-testid={`highlight-card-icon-${index}`}>
-              <Icon name={item.icon} size="xs" />
-            </IconWrapper>
-          )}
-          <CardContent>
-            <p>{item.label}</p>
-            <h3>{item.value}</h3>
-          </CardContent>
-        </Card>
-      ))}
-    </CardWrapper>
-  );
-};
-
-export { HighlightsCard };

package/src/components/molecules/HighlightsCard/HighlightsCard.types.ts

@@ -1,10 +0,0 @@
-export interface HighlightProps {
-  label: string;
-  value: number;
-  color: string;
-  icon?: string;
-}
-
-export interface HighlightsCardProps {
-  items: HighlightProps[];
-}

package/src/components/molecules/InsuranceCard/InsuranceCard.styles.tsx

@@ -1,237 +0,0 @@
-/* eslint-disable react-refresh/only-export-components */
-import styled from 'styled-components';
-import { semanticColors } from '../../../styles/tokens';
-import { StatusVariant } from './InsuranceCard.types';
-
-export const PageContainer = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-  max-width: 600px;
-  margin: 0 auto;
-  padding: 24px;
-`;
-
-export const Title = styled.h2`
-  font-size: 1.25rem;
-  font-weight: 600;
-  color: #2d3748;
-`;
-
-export const TabBar = styled.div`
-  display: flex;
-  gap: 12px;
-`;
-
-export const Tab = styled.button<{ active?: boolean }>`
-  padding: 8px 16px;
-  font-size: 0.875rem;
-  font-weight: 600;
-  border: none;
-  border-bottom: 2px solid transparent;
-  background: none;
-  cursor: pointer;
-  color: ${(props) =>
-    props.active ? semanticColors.branding.surface.enabled : '#718096'};
-  border-color: ${(props) =>
-    props.active ? semanticColors.branding.border.enabled : 'transparent'};
-`;
-
-export const ListContainer = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-`;
-
-export const CardContainer = styled.div<{ $variant: StatusVariant }>`
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  width: 100%;
-  gap: 8px;
-  padding: 16px;
-  border-top: 4px solid ${(props) => variantColors[props.$variant]};
-  border-radius: 8px;
-  background-color: #fff;
-`;
-
-export const HeaderRow = styled.div`
-  display: flex;
-  align-items: center;
-  gap: 24px;
-`;
-
-export const BodyRow = styled.div`
-  display: flex;
-  gap: 24px;
-  justify-content: space-between;
-
-  @media (max-width: 768px) {
-    flex-direction: column;
-    gap: 16px;
-  }
-`;
-
-export const variantColors: Record<StatusVariant, string> = {
-  primary: semanticColors.global.border.feedback.info,
-  success: semanticColors.global.border.feedback.success,
-  warning: semanticColors.global.border.feedback.warning,
-  danger: semanticColors.global.border.feedback.error,
-};
-
-export const variantColorsText: Record<StatusVariant, string> = {
-  primary: semanticColors.global.text.onSurface.enabled,
-  success: semanticColors.global.text.feedback.success,
-  warning: semanticColors.global.text.feedback.warning,
-  danger: semanticColors.global.text.feedback.error,
-};
-
-export const Text = styled.span<{ $variant?: StatusVariant }>`
-  font-size: 10px;
-  color: ${(props) =>
-    props.$variant ? variantColors[props.$variant] : variantColorsText.primary};
-`;
-
-export const StatusBadge = styled.span<{ $variant: StatusVariant }>`
-  padding: 4px 8px;
-  font-size: 0.75rem;
-  font-weight: 600;
-  border-radius: 4px;
-  color: #fff;
-  background-color: ${(props) => variantColors[props.$variant]};
-`;
-export const InfoGroup = styled.div`
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
-  gap: 32px;
-  align-items: start;
-  width: 100%;
-  @media (max-width: 1200px) {
-    gap: 24px;
-  }
-
-  @media (max-width: 768px) {
-    grid-template-columns: 1fr;
-    gap: 16px;
-  }
-`;
-
-export const InfoRow = styled.div`
-  display: flex;
-  width: 100%;
-  flex-direction: column;
-  justify-content: flex-start;
-  align-items: flex-start;
-  min-width: 0;
-`;
-
-export const InfoLabel = styled.span`
-  font-size: 12px;
-  color: #4a5568;
-  margin-bottom: 12px;
-`;
-
-export const InfoValue = styled.span`
-  font-size: 14px;
-  font-weight: 900;
-  color: #2d3748;
-`;
-
-export const TruncatedValue = styled(InfoValue)`
-  display: inline-block;
-  max-width: 100%;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-`;
-
-export const ProdValue = styled(InfoValue)`
-  display: inline-block;
-  max-width: 100%;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-`;
-
-export const ProcessValue = styled(InfoValue)`
-  display: inline-block;
-  max-width: 100%;
-`;
-
-export const InfoSubValue = styled.span`
-  font-size: 12px;
-  color: #2d3748;
-  line-height: 1.4;
-`;
-
-export const Actions = styled.div`
-  display: flex;
-  justify-content: flex-end;
-`;
-
-export const DropdownWrapper = styled.div`
-  position: relative;
-`;
-
-export const ActionButton = styled.button`
-  display: inline-flex;
-  justify-content: space-between;
-  min-width: 170px;
-  max-width: 100%;
-  align-items: center;
-  gap: 0.5rem;
-  padding: 8px 12px;
-  font-size: 0.875rem;
-  font-weight: 600;
-  border: none;
-  border-radius: 4px;
-  background-color: ${semanticColors.branding.border.enabled};
-  color: #fff;
-  cursor: pointer;
-  transition: opacity 0.2s;
-
-  @media (max-width: 768px) {
-    width: 100%;
-  }
-
-  &:hover {
-    opacity: 0.9;
-  }
-`;
-
-export const DropdownMenu = styled.div`
-  position: absolute;
-  right: 0;
-  background-color: #fff;
-  border-radius: 4px;
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-  display: grid;
-  gap: 4px;
-  padding: 8px 0;
-  width: 100%;
-  z-index: 10;
-`;
-
-export interface MenuItemProps {
-  icon: React.ReactNode;
-  danger?: boolean;
-  children: React.ReactNode;
-  onClick?: () => void;
-  id?: string;
-}
-
-export const StyledMenuItem = styled.div<{ $danger?: boolean }>`
-  color: ${(props) =>
-    props.$danger ? semanticColors.danger.text.enabled : '#2d3748'};
-  display: inline-grid;
-  grid-auto-flow: column;
-  align-items: center;
-  justify-content: flex-start;
-  gap: 8px;
-  padding: 8px 12px;
-  font-size: 0.875rem;
-  cursor: pointer;
-  &:hover {
-    background-color: rgba(0, 0, 0, 0.05);
-  }
-`;