feat: Add Breadcrumb components and related utilities

Author: pixel-perfectionist

packages/react-cap-theme/src/components/react-breadcrumb/Breadcrumb.ts

@@ -0,0 +1,16 @@
+export type {
+  BreadcrumbContextValues,
+  BreadcrumbProps,
+  BreadcrumbSlots,
+  BreadcrumbState
+} from '@fluentui/react-breadcrumb';
+export {
+  breadcrumbClassNames,
+  BreadcrumbProvider,
+  renderBreadcrumb_unstable as renderBreadcrumb,
+  useBreadcrumb_unstable as useBreadcrumb,
+  useBreadcrumbContext_unstable as useBreadcrumbContext,
+  useBreadcrumbStyles_unstable as useBreadcrumbStyles
+} from '@fluentui/react-breadcrumb';
+
+export { Breadcrumb } from './components/Breadcrumb/Breadcrumb';

packages/react-cap-theme/src/components/react-breadcrumb/BreadcrumbButton.ts

@@ -0,0 +1,13 @@
+export { renderBreadcrumbButton_unstable as renderBreadcrumbButton } from '@fluentui/react-breadcrumb';
+export type {
+  BreadcrumbButtonProps,
+  BreadcrumbButtonSlots,
+  BreadcrumbButtonState
+} from '@fluentui/react-breadcrumb';
+
+export {
+  breadcrumbButtonClassNames,
+  useBreadcrumbButtonStyles
+} from './components/BreadcrumbButton/useBreadcrumbButtonStyles.styles';
+export { BreadcrumbButton } from './components/BreadcrumbButton/BreadcrumbButton';
+export { useBreadcrumbButton } from './components/BreadcrumbButton/useBreadcrumbButton';

packages/react-cap-theme/src/components/react-breadcrumb/BreadcrumbDivider.ts

@@ -0,0 +1,13 @@
+export { renderBreadcrumbDivider_unstable as renderBreadcrumbDivider } from '@fluentui/react-breadcrumb';
+export type {
+  BreadcrumbDividerProps,
+  BreadcrumbDividerSlots,
+  BreadcrumbDividerState
+} from '@fluentui/react-breadcrumb';
+
+export { BreadcrumbDivider } from './components/BreadcrumbDivider/BreadcrumbDivider';
+export { useBreadcrumbDivider } from './components/BreadcrumbDivider/useBreadcrumbDivider';
+export {
+  breadcrumbDividerClassNames,
+  useBreadcrumbDividerStyles
+} from './components/BreadcrumbDivider/useBreadcrumbDividerStyles.styles';

packages/react-cap-theme/src/components/react-breadcrumb/BreadcrumbItem.ts

@@ -0,0 +1,15 @@
+export {
+  renderBreadcrumbItem_unstable as renderBreadcrumbItem,
+  useBreadcrumbItem_unstable as useBreadcrumbItem
+} from '@fluentui/react-breadcrumb';
+export type {
+  BreadcrumbItemProps,
+  BreadcrumbItemSlots,
+  BreadcrumbItemState
+} from '@fluentui/react-breadcrumb';
+
+export { BreadcrumbItem } from './components/BreadcrumbItem/BreadcrumbItem';
+export {
+  breadcrumbItemClassNames,
+  useBreadcrumbItemStyles
+} from './components/BreadcrumbItem/useBreadcrumbItemStyles.styles';

packages/react-cap-theme/src/components/react-breadcrumb/components/Breadcrumb/Breadcrumb.tsx

@@ -0,0 +1,24 @@
+import { Breadcrumb as FluentBreadcrumb } from '@fluentui/react-breadcrumb';
+import type { BreadcrumbProps } from '@fluentui/react-breadcrumb';
+import type { ForwardRefComponent } from '@fluentui/react-utilities';
+
+/**
+ * Breadcrumb is a to navigate through a hierarchy.
+ *
+ * @example
+ * ```tsx
+ * <Breadcrumb>
+ *   <BreadcrumbItem>
+ *     <BreadcrumbButton href='#'>Home</BreadcrumbButton>
+ *   </BreadcrumbItem>
+ *    <BreadcrumbDivider />
+ *   <BreadcrumbItem>
+ *     <BreadcrumbButton href='#/contact-us' current>Contact us</BreadcrumbButton>
+ *   </BreadcrumbItem>
+ * </Breadcrumb>
+ * ```
+ * @alpha
+ */
+export const Breadcrumb: ForwardRefComponent<BreadcrumbProps> = FluentBreadcrumb;
+
+Breadcrumb.displayName = 'Breadcrumb';

packages/react-cap-theme/src/components/react-breadcrumb/components/BreadcrumbButton/BreadcrumbButton.tsx

@@ -0,0 +1,31 @@
+import { forwardRef } from 'react';
+import { renderBreadcrumbButton_unstable } from '@fluentui/react-breadcrumb';
+import type { BreadcrumbButtonProps } from '@fluentui/react-breadcrumb';
+import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
+import type { ForwardRefComponent } from '@fluentui/react-utilities';
+
+import { useBreadcrumbButton } from './useBreadcrumbButton';
+import { useBreadcrumbButtonStyles } from './useBreadcrumbButtonStyles.styles';
+
+/**
+ * BreadcrumbButton is a button to navigate through a hierarchy.
+ *
+ * @example
+ * ```tsx
+ * <BreadcrumbItem>
+ *   <BreadcrumbButton href='#/contact-us' current>Contact us</BreadcrumbButton>
+ * </BreadcrumbItem>
+ * ```
+ *
+ * @alpha
+ */
+export const BreadcrumbButton: ForwardRefComponent<BreadcrumbButtonProps> = forwardRef((props, ref) => {
+  const state = useBreadcrumbButton(props, ref);
+
+  useBreadcrumbButtonStyles(state);
+  useCustomStyleHook_unstable('useBreadcrumbButtonStyles_unstable')(state);
+
+  return renderBreadcrumbButton_unstable(state);
+});
+
+BreadcrumbButton.displayName = 'BreadcrumbButton';

packages/react-cap-theme/src/components/react-breadcrumb/components/BreadcrumbButton/useBreadcrumbButton.ts

@@ -0,0 +1,31 @@
+import { useBreadcrumbButton_unstable } from '@fluentui/react-breadcrumb';
+import type { BreadcrumbButtonProps, BreadcrumbButtonState } from '@fluentui/react-breadcrumb';
+import { useButton } from '../../../react-button/Button';
+
+
+/**
+ * Create the state required to style and render the BreadcrumbButton.
+ * @param props - Props of the BreadcrumbButton
+ * @param ref - Reference to the root button
+ * @returns The BreadcrumbButton state object
+ * @alpha
+ */
+export const useBreadcrumbButton = (
+  props: BreadcrumbButtonProps,
+  ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>
+): BreadcrumbButtonState => {
+  const { root, ...baseState } = useBreadcrumbButton_unstable(props, ref);
+  const buttonState = useButton(
+    {
+      ...baseState,
+      ...root
+    },
+    ref
+  );
+
+  return {
+    ...buttonState,
+    appearance: baseState.appearance,
+    current: baseState.current
+  };
+};

packages/react-cap-theme/src/components/react-breadcrumb/components/BreadcrumbButton/useBreadcrumbButtonStyles.styles.ts

@@ -0,0 +1,88 @@
+import { useBreadcrumbButtonStyles_unstable } from '@fluentui/react-breadcrumb';
+import type { BreadcrumbButtonSlots, BreadcrumbButtonState } from '@fluentui/react-breadcrumb';
+import type { SlotClassNames } from '@fluentui/react-utilities';
+import { makeStyles, mergeClasses } from '@griffel/react';
+import { tokens, typographyStyles } from '../../../tokens/index';
+import { buttonClassNames, useButtonStyles } from '../../../react-button/Button';
+
+/**
+ * CSS class names for the BreadcrumbButton component slots.
+ * @alpha
+ */
+export const breadcrumbButtonClassNames: SlotClassNames<BreadcrumbButtonSlots> = {
+  root: 'fui-BreadcrumbButton',
+  icon: 'fui-BreadcrumbButton__icon'
+};
+
+const fluentButtonIcon = 'fui-Button__icon';
+const iconFilledClassName = 'fui-Icon-filled';
+const iconRegularClassName = 'fui-Icon-regular';
+
+const currentStateStyles = {
+  color: tokens.colorNeutralForeground3,
+  backgroundColor: tokens.colorTransparentBackground,
+  [`& .${iconFilledClassName}`]: { display: 'none' },
+  [`& .${iconRegularClassName}`]: { display: 'inline' },
+  [`& .${fluentButtonIcon}`]: { color: 'unset' }
+};
+
+const useStyles = makeStyles({
+  root: { height: 'unset' },
+  small: {},
+  medium: {},
+  large: {
+    ...typographyStyles.subtitle1,
+    fontWeight: tokens.fontSizeBase400,
+    paddingTop: tokens.spacingVerticalSNudge,
+    paddingBottom: tokens.spacingVerticalSNudge
+  },
+  current: {
+    fontWeight: tokens.fontWeightSemibold,
+    ':hover': currentStateStyles,
+    ':active:hover': {
+      ...currentStateStyles,
+      [`& .${buttonClassNames.icon}`]: { color: 'unset' }
+    }
+  }
+});
+
+const useIconOnlyStyles = makeStyles({
+  small: {},
+  medium: {},
+  large: { paddingTop: tokens.spacingVerticalMNudge, paddingBottom: tokens.spacingVerticalMNudge },
+  icon: { marginRight: tokens.spacingHorizontalNone }
+});
+
+/**
+ * Apply styling to the BreadcrumbButton based on the state.
+ * @param state - The BreadcrumbButton state object
+ * @returns The styled BreadcrumbButton state
+ * @alpha
+ */
+export const useBreadcrumbButtonStyles = (state: BreadcrumbButtonState): BreadcrumbButtonState => {
+  const styles = useStyles();
+  const iconOnlyStyles = useIconOnlyStyles();
+  const { current, iconOnly, size } = state;
+
+  state.root.className = mergeClasses(
+    breadcrumbButtonClassNames.root,
+    styles.root,
+    styles[size],
+    iconOnly && iconOnlyStyles[size],
+    current && styles.current,
+    state.root.className
+  );
+
+  if (state.icon) {
+    state.icon.className = mergeClasses(
+      breadcrumbButtonClassNames.icon,
+      iconOnly && iconOnlyStyles.icon,
+      state.icon.className
+    );
+  }
+
+  useButtonStyles(state);
+  useBreadcrumbButtonStyles_unstable(state);
+
+  return state;
+};

packages/react-cap-theme/src/components/react-breadcrumb/components/BreadcrumbDivider/BreadcrumbDivider.tsx

@@ -0,0 +1,37 @@
+import { forwardRef } from 'react';
+import { renderBreadcrumbDivider_unstable } from '@fluentui/react-breadcrumb';
+import type { BreadcrumbDividerProps } from '@fluentui/react-breadcrumb';
+import type { ForwardRefComponent } from '@fluentui/react-utilities';
+import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
+
+import { useBreadcrumbDivider } from './useBreadcrumbDivider';
+import { useBreadcrumbDividerStyles } from './useBreadcrumbDividerStyles.styles';
+
+/**
+ * A divider to separate each `BreadcrumbItem`.
+ *
+ * @example
+ * ```tsx
+ * <Breadcrumb>
+ *   <BreadcrumbItem>
+ *     <BreadcrumbButton href='#'>Home</BreadcrumbButton>
+ *   </BreadcrumbItem>
+ *    <BreadcrumbDivider />
+ *   <BreadcrumbItem>
+ *     <BreadcrumbButton href='#/contact-us' current>Contact us</BreadcrumbButton>
+ *   </BreadcrumbItem>
+ * </Breadcrumb>
+ * ```
+ *
+ * @alpha
+ */
+export const BreadcrumbDivider: ForwardRefComponent<BreadcrumbDividerProps> = forwardRef((props, ref) => {
+  const state = useBreadcrumbDivider(props, ref);
+
+  useBreadcrumbDividerStyles(state);
+  useCustomStyleHook_unstable('useBreadcrumbDividerStyles_unstable')(state);
+
+  return renderBreadcrumbDivider_unstable(state);
+});
+
+BreadcrumbDivider.displayName = 'BreadcrumbDivider';

packages/react-cap-theme/src/components/react-breadcrumb/components/BreadcrumbDivider/useBreadcrumbDivider.ts

@@ -0,0 +1,14 @@
+import { useBreadcrumbDivider_unstable } from '@fluentui/react-breadcrumb';
+import type { BreadcrumbDividerProps, BreadcrumbDividerState } from '@fluentui/react-breadcrumb';
+
+/**
+ * Create the state required to style and render the BreadcrumbDivider.
+ * @param props - Props of the BreadcrumbDivider
+ * @param ref - Reference to the root element
+ * @returns The BreadcrumbDivider state object
+ * @alpha
+ */
+export const useBreadcrumbDivider = (
+  props: BreadcrumbDividerProps,
+  ref: React.Ref<HTMLLIElement>
+): BreadcrumbDividerState => ({ ...useBreadcrumbDivider_unstable(props, ref), size: 'medium' });