@granto-umbrella/umbrella-components 3.0.34 → 3.0.36

package/src/components/atoms/Breadcrumb/Breadcrumb.styles.ts

@@ -1,43 +1,43 @@
-import styled, { css } from "styled-components";
-import {
-  semanticColors,
-  semanticSizes,
-  typographyTokens,
-} from "../../../styles/tokens";
-
-import { textStyles } from "../../../styles/tokens/typography"; 
-
-export const BreadcrumbContainer = styled.nav`
-  display: flex;
-  align-items: center;
-  font-family: ${typographyTokens.fontFamily.base};
-  ${css(textStyles.labelS)};
-`;
-
-export const BreadcrumbItem = styled.span<{ $isActive?: boolean }>`
-  display: flex;
-  align-items: center;
-  gap: ${semanticSizes.global.gap.xs};
-  cursor: pointer;
-  
-  color: ${({ $isActive }) =>
-    $isActive
-      ? semanticColors.branding.text.accent.enabled 
-      : semanticColors.global.text.onSurface.subtitle}; 
-
-  font-weight: ${({ $isActive }) => 
-    $isActive 
-      ? typographyTokens.fontWeights.semibold 
-      : typographyTokens.fontWeights.regular};
-
-  &:hover {
-    color: ${semanticColors.branding.text.accent.hover}; 
-  }
-`;
-
-export const BreadcrumbSeparator = styled.span`
-  display: flex;
-  align-items: center;
-  margin: 0 ${semanticSizes.global.gap.xs}; 
-  color: ${semanticColors.global.text.onSurface.subtitle}; 
-`;
+import styled, { css } from 'styled-components';
+import {
+  semanticColors,
+  semanticSizes,
+  typographyTokens,
+} from '../../../styles/tokens';
+
+import { textStyles } from '../../../styles/tokens/typography';
+
+export const BreadcrumbContainer = styled.nav`
+  display: flex;
+  align-items: center;
+  font-family: ${typographyTokens.fontFamily.base};
+  ${css(textStyles.labelS)};
+`;
+
+export const BreadcrumbItem = styled.span<{ $isActive?: boolean }>`
+  display: flex;
+  align-items: center;
+  gap: ${semanticSizes.global.gap.xs};
+  cursor: pointer;
+
+  color: ${({ $isActive }) =>
+    $isActive
+      ? semanticColors.branding.text.accent.enabled
+      : semanticColors.global.text.onSurface.subtitle};
+
+  font-weight: ${({ $isActive }) =>
+    $isActive
+      ? typographyTokens.fontWeights.semibold
+      : typographyTokens.fontWeights.regular};
+
+  &:hover {
+    color: ${semanticColors.branding.text.accent.hover};
+  }
+`;
+
+export const BreadcrumbSeparator = styled.span`
+  display: flex;
+  align-items: center;
+  margin: 0 ${semanticSizes.global.gap.xs};
+  color: ${semanticColors.global.text.onSurface.subtitle};
+`;

package/src/components/atoms/Breadcrumb/Breadcrumb.tsx

@@ -1,48 +1,46 @@
-// src/components/atoms/Breadcrumb/Breadcrumb.tsx
-
-import React from "react";
-import * as Icons from "@phosphor-icons/react";
-import { BreadcrumbProps } from "./Breadcrumb.types";
-import {
-  BreadcrumbContainer,
-  BreadcrumbItem,
-  BreadcrumbSeparator,
-} from "./Breadcrumb.styles";
-
-
-import { semanticSizes } from "../../../styles/tokens/sizes"; 
-
-const Breadcrumb: React.FC<BreadcrumbProps> = ({
-  items,
-  separator = "chevron-right",
-}) => {
-  const SeparatorIcon = Icons[
-    separator as keyof typeof Icons
-  ] as React.ElementType;
-
-
-  const iconSize = parseInt(semanticSizes.global.padding.lg);
-
-  return (
-    <BreadcrumbContainer>
-      {items.map((item, index) => (
-        <React.Fragment key={item.label}>
-          <BreadcrumbItem
-            onClick={() => item.onClick && item.onClick()}
-            $isActive={index === items.length - 1}
-          >
-            {item.icon && <item.icon size={iconSize} />}
-            {item.label}
-          </BreadcrumbItem>
-          {index < items.length - 1 && (
-            <BreadcrumbSeparator>
-              {SeparatorIcon && <SeparatorIcon size={iconSize} />}
-            </BreadcrumbSeparator>
-          )}
-        </React.Fragment>
-      ))}
-    </BreadcrumbContainer>
-  );
-};
-
-export default Breadcrumb;
+// src/components/atoms/Breadcrumb/Breadcrumb.tsx
+
+import React from 'react';
+import * as Icons from '@phosphor-icons/react';
+import { BreadcrumbProps } from './Breadcrumb.types';
+import {
+  BreadcrumbContainer,
+  BreadcrumbItem,
+  BreadcrumbSeparator,
+} from './Breadcrumb.styles';
+
+import { semanticSizes } from '../../../styles/tokens/sizes';
+
+const Breadcrumb: React.FC<BreadcrumbProps> = ({
+  items,
+  separator = 'chevron-right',
+}) => {
+  const SeparatorIcon = Icons[
+    separator as keyof typeof Icons
+  ] as React.ElementType;
+
+  const iconSize = parseInt(semanticSizes.global.padding.lg);
+
+  return (
+    <BreadcrumbContainer>
+      {items.map((item, index) => (
+        <React.Fragment key={item.label}>
+          <BreadcrumbItem
+            onClick={() => item.onClick && item.onClick()}
+            $isActive={index === items.length - 1}
+          >
+            {item.icon && <item.icon size={iconSize} />}
+            {item.label}
+          </BreadcrumbItem>
+          {index < items.length - 1 && (
+            <BreadcrumbSeparator>
+              {SeparatorIcon && <SeparatorIcon size={iconSize} />}
+            </BreadcrumbSeparator>
+          )}
+        </React.Fragment>
+      ))}
+    </BreadcrumbContainer>
+  );
+};
+
+export default Breadcrumb;

package/src/components/atoms/Breadcrumb/Breadcrumb.types.ts

@@ -1,12 +1,12 @@
-import { IconProps } from "@phosphor-icons/react";
-
-export interface BreadcrumbItemProps {
-  label: string;
-  icon?: React.ElementType<IconProps>;
-  onClick?: () => void;
-}
-
-export interface BreadcrumbProps {
-  items: BreadcrumbItemProps[];
-  separator?: string;
-}
+import { IconProps } from '@phosphor-icons/react';
+
+export interface BreadcrumbItemProps {
+  label: string;
+  icon?: React.ElementType<IconProps>;
+  onClick?: () => void;
+}
+
+export interface BreadcrumbProps {
+  items: BreadcrumbItemProps[];
+  separator?: string;
+}