add teaching popover to semantic style hooks

packages/react-components/semantic-style-hooks-preview/library/etc/semantic-style-hooks-preview.api.md

@@ -76,6 +76,18 @@ import { TableSelectionCellState } from '@fluentui/react-table';
 import { TableState } from '@fluentui/react-table';
 import { TabListState } from '@fluentui/react-tabs';
 import { TabState } from '@fluentui/react-tabs';
+import { TeachingPopoverBodyState } from '@fluentui/react-teaching-popover';
+import { TeachingPopoverCarouselCardState } from '@fluentui/react-teaching-popover';
+import { TeachingPopoverCarouselFooterButtonState } from '@fluentui/react-teaching-popover';
+import { TeachingPopoverCarouselFooterState } from '@fluentui/react-teaching-popover';
+import { TeachingPopoverCarouselNavButtonState } from '@fluentui/react-teaching-popover';
+import { TeachingPopoverCarouselNavState } from '@fluentui/react-teaching-popover';
+import { TeachingPopoverCarouselPageCountState } from '@fluentui/react-teaching-popover';
+import { TeachingPopoverCarouselState } from '@fluentui/react-teaching-popover';
+import { TeachingPopoverFooterState } from '@fluentui/react-teaching-popover';
+import { TeachingPopoverHeaderState } from '@fluentui/react-teaching-popover';
+import { TeachingPopoverSurfaceState } from '@fluentui/react-teaching-popover';
+import { TeachingPopoverTitleState } from '@fluentui/react-teaching-popover';
 import { TextareaState } from '@fluentui/react-textarea';
 import { TextState } from '@fluentui/react-text';
 import { ToastBodyState } from '@fluentui/react-toast';
@@ -321,6 +333,42 @@ export const useSemanticTabListStyles: (_state: unknown) => TabListState;
 // @public
 export const useSemanticTabStyles: (_state: unknown) => TabState;
 
+// @public
+export const useSemanticTeachingPopoverBodyStyles: (_state: unknown) => TeachingPopoverBodyState;
+
+// @public
+export const useSemanticTeachingPopoverCarouselCardStyles: (_state: unknown) => TeachingPopoverCarouselCardState;
+
+// @public
+export const useSemanticTeachingPopoverCarouselFooterButtonStyles: (_state: unknown) => TeachingPopoverCarouselFooterButtonState;
+
+// @public
+export const useSemanticTeachingPopoverCarouselFooterStyles: (_state: unknown) => TeachingPopoverCarouselFooterState;
+
+// @public
+export const useSemanticTeachingPopoverCarouselNavButtonStyles: (_state: unknown) => TeachingPopoverCarouselNavButtonState;
+
+// @public
+export const useSemanticTeachingPopoverCarouselNavStyles: (_state: unknown) => TeachingPopoverCarouselNavState;
+
+// @public
+export const useSemanticTeachingPopoverCarouselPageCountStyles: (_state: unknown) => TeachingPopoverCarouselPageCountState;
+
+// @public
+export const useSemanticTeachingPopoverCarouselStyles: (_state: unknown) => TeachingPopoverCarouselState;
+
+// @public
+export const useSemanticTeachingPopoverFooterStyles: (_state: unknown) => TeachingPopoverFooterState;
+
+// @public
+export const useSemanticTeachingPopoverHeaderStyles: (_state: unknown) => TeachingPopoverHeaderState;
+
+// @public
+export const useSemanticTeachingPopoverSurfaceStyles: (_state: unknown) => TeachingPopoverSurfaceState;
+
+// @public
+export const useSemanticTeachingPopoverTitleStyles: (_state: unknown) => TeachingPopoverTitleState;
+
 // @public
 export const useSemanticTextareaStyles: (_state: unknown) => TextareaState;
 

packages/react-components/semantic-style-hooks-preview/library/package.json

@@ -47,6 +47,7 @@
     "@fluentui/react-message-bar": "^9.4.7",
     "@fluentui/react-positioning": "^9.16.7",
     "@fluentui/react-persona": "^9.3.6",
+    "@fluentui/react-popover": "^9.10.6",
     "@fluentui/react-progress": "^9.2.6",
     "@fluentui/react-provider": "^9.20.6",
     "@fluentui/react-radio": "^9.3.6",
@@ -60,6 +61,7 @@
     "@fluentui/react-table": "^9.16.6",
     "@fluentui/react-tabs": "^9.7.6",
     "@fluentui/react-tabster": "^9.24.6",
+    "@fluentui/react-teaching-popover": "^9.4.5",
     "@fluentui/react-text": "^9.4.36",
     "@fluentui/react-textarea": "^9.4.6",
     "@fluentui/react-theme": "^9.1.24",

packages/react-components/semantic-style-hooks-preview/library/src/component-styles/TeachingPopover/index.ts

@@ -0,0 +1,12 @@
+export { useSemanticTeachingPopoverBodyStyles } from './useSemanticTeachingPopoverBodyStyles.styles';
+export { useSemanticTeachingPopoverCarouselCardStyles } from './useSemanticTeachingPopoverCarouselCardStyles.styles';
+export { useSemanticTeachingPopoverCarouselFooterButtonStyles } from './useSemanticTeachingPopoverCarouselFooterButtonStyles.styles';
+export { useSemanticTeachingPopoverCarouselFooterStyles } from './useSemanticTeachingPopoverCarouselFooterStyles.styles';
+export { useSemanticTeachingPopoverCarouselNavButtonStyles } from './useSemanticTeachingPopoverCarouselNavButtonStyles.styles';
+export { useSemanticTeachingPopoverCarouselNavStyles } from './useSemanticTeachingPopoverCarouselNavStyles.styles';
+export { useSemanticTeachingPopoverCarouselPageCountStyles } from './useSemanticTeachingPopoverCarouselPageCountStyles.styles';
+export { useSemanticTeachingPopoverCarouselStyles } from './useSemanticTeachingPopoverCarouselStyles.styles';
+export { useSemanticTeachingPopoverFooterStyles } from './useSemanticTeachingPopoverFooterStyles.styles';
+export { useSemanticTeachingPopoverHeaderStyles } from './useSemanticTeachingPopoverHeaderStyles.styles';
+export { useSemanticTeachingPopoverSurfaceStyles } from './useSemanticTeachingPopoverSurfaceStyles.styles';
+export { useSemanticTeachingPopoverTitleStyles } from './useSemanticTeachingPopoverTitleStyles.styles';

packages/react-components/semantic-style-hooks-preview/library/src/component-styles/TeachingPopover/useSemanticTeachingPopoverBodyStyles.styles.ts

@@ -0,0 +1,73 @@
+import { makeStyles, mergeClasses } from '@griffel/react';
+import { teachingPopoverBodyClassNames, type TeachingPopoverBodyState } from '@fluentui/react-teaching-popover';
+import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities';
+
+const popoverBodyDimension = 288;
+
+export const useMediaStyles = makeStyles({
+  base: {
+    gridArea: 'media',
+    overflow: 'hidden',
+    width: 'auto',
+    marginBottom: '12px',
+    verticalAlign: 'middle',
+    justifyContent: 'center',
+    display: 'flex',
+  },
+  short: {
+    aspectRatio: popoverBodyDimension / 117,
+    '@supports not (aspect-ratio)': {
+      height: '117px',
+    },
+  },
+  medium: {
+    aspectRatio: popoverBodyDimension / 176,
+    '@supports not (aspect-ratio)': {
+      height: '176px',
+    },
+  },
+  tall: {
+    aspectRatio: 1,
+    '@supports not (aspect-ratio)': {
+      height: `${popoverBodyDimension}px`,
+    },
+  },
+});
+
+const useStyles = makeStyles({
+  root: {
+    display: 'flex',
+    flexDirection: 'column',
+    paddingBottom: '12px',
+  },
+});
+
+/** Applies style classnames to slots */
+export const useSemanticTeachingPopoverBodyStyles = (_state: unknown) => {
+  'use no memo';
+
+  const state = _state as TeachingPopoverBodyState;
+
+  const { mediaLength } = state;
+  const styles = useStyles();
+  const mediaStyles = useMediaStyles();
+
+  state.root.className = mergeClasses(
+    state.root.className,
+    teachingPopoverBodyClassNames.root,
+    styles.root,
+    getSlotClassNameProp_unstable(state.root),
+  );
+
+  if (state.media) {
+    state.media.className = mergeClasses(
+      state.media.className,
+      teachingPopoverBodyClassNames.media,
+      mediaStyles.base,
+      mediaStyles[mediaLength],
+      getSlotClassNameProp_unstable(state.media),
+    );
+  }
+
+  return state;
+};

packages/react-components/semantic-style-hooks-preview/library/src/component-styles/TeachingPopover/useSemanticTeachingPopoverCarouselCardStyles.styles.ts

@@ -0,0 +1,28 @@
+import { makeStyles, mergeClasses } from '@griffel/react';
+import {
+  teachingPopoverCarouselCardClassNames,
+  type TeachingPopoverCarouselCardState,
+} from '@fluentui/react-teaching-popover';
+import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities';
+
+const useStyles = makeStyles({
+  root: {},
+});
+
+/** Applies style classnames to slots */
+export const useSemanticTeachingPopoverCarouselCardStyles = (_state: unknown) => {
+  'use no memo';
+
+  const state = _state as TeachingPopoverCarouselCardState;
+
+  const styles = useStyles();
+
+  state.root.className = mergeClasses(
+    state.root.className,
+    teachingPopoverCarouselCardClassNames.root,
+    styles.root,
+    getSlotClassNameProp_unstable(state.root),
+  );
+
+  return state;
+};

packages/react-components/semantic-style-hooks-preview/library/src/component-styles/TeachingPopover/useSemanticTeachingPopoverCarouselFooterButtonStyles.styles.ts

@@ -0,0 +1,74 @@
+import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
+import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities';
+import {
+  teachingPopoverCarouselFooterButtonClassNames,
+  type TeachingPopoverCarouselFooterButtonState,
+} from '@fluentui/react-teaching-popover';
+import { useSemanticButtonStyles } from '../Button';
+import * as semanticTokens from '@fluentui/semantic-tokens';
+
+const useStyles = makeStyles({
+  root: {
+    minWidth: '96px',
+  },
+  brandNext: {
+    color: semanticTokens.foregroundContentBrandPrimary,
+    backgroundColor: semanticTokens.foregroundCtrlOnBrandRest,
+    ...shorthands.borderColor(semanticTokens.nullColor),
+    ':hover': {
+      color: semanticTokens.foregroundCtrlActiveBrandHover,
+      backgroundColor: semanticTokens.foregroundCtrlOnBrandHover,
+    },
+    ':hover:active': {
+      color: semanticTokens.foregroundCtrlActiveBrandPressed,
+      backgroundColor: semanticTokens.foregroundCtrlOnBrandPressed,
+    },
+  },
+  brandPrevious: {
+    // In brand, this is always 'NeutralForegroundOnBrand'
+    color: semanticTokens.foregroundCtrlOnBrandRest,
+    backgroundColor: semanticTokens.backgroundCtrlBrandRest,
+    ...shorthands.borderColor(semanticTokens.strokeCtrlOnActiveBrandRest),
+    ':hover': {
+      color: semanticTokens.foregroundCtrlOnBrandHover,
+      ...shorthands.borderColor(semanticTokens.strokeCtrlOnActiveBrandRest),
+      backgroundColor: semanticTokens.backgroundCtrlBrandHover,
+    },
+    ':hover:active': {
+      color: semanticTokens.foregroundCtrlOnBrandPressed,
+      ...shorthands.borderColor(semanticTokens.strokeCtrlOnActiveBrandRest),
+      backgroundColor: semanticTokens.backgroundCtrlBrandPressed,
+    },
+  },
+});
+
+/**
+ * Apply styling to the TeachingPopoverCarouselFooterButton slots based on the state
+ */
+export const useSemanticTeachingPopoverCarouselFooterButtonStyles = (
+  _state: unknown,
+): TeachingPopoverCarouselFooterButtonState => {
+  'use no memo';
+
+  let state = _state as TeachingPopoverCarouselFooterButtonState;
+
+  const styles = useStyles();
+  const { navType, popoverAppearance } = state;
+
+  // Apply underlying fluent Button styles
+  state = {
+    ...state,
+    ...useSemanticButtonStyles(state),
+  };
+
+  state.root.className = mergeClasses(
+    state.root.className,
+    teachingPopoverCarouselFooterButtonClassNames.root,
+    styles.root,
+    navType === 'prev' && popoverAppearance === 'brand' && styles.brandPrevious,
+    navType === 'next' && popoverAppearance === 'brand' && styles.brandNext,
+    getSlotClassNameProp_unstable(state.root),
+  );
+
+  return state;
+};

packages/react-components/semantic-style-hooks-preview/library/src/component-styles/TeachingPopover/useSemanticTeachingPopoverCarouselFooterStyles.styles.ts

@@ -0,0 +1,58 @@
+import { makeStyles, mergeClasses } from '@griffel/react';
+import {
+  teachingPopoverCarouselFooterClassNames,
+  type TeachingPopoverCarouselFooterState,
+} from '@fluentui/react-teaching-popover';
+import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities';
+
+// Todo: Page change animation & styles
+const useStyles = makeStyles({
+  root: {
+    display: 'flex',
+    flexDirection: 'row',
+  },
+  rootCentered: {
+    justifyContent: 'space-between',
+    gap: '8px',
+  },
+  rootRightAligned: {
+    gap: '8px',
+    '& :first-child': {
+      marginInlineEnd: 'auto',
+    },
+  },
+});
+
+/** Applies style classnames to slots */
+export const useSemanticTeachingPopoverCarouselFooterStyles = (_state: unknown) => {
+  'use no memo';
+
+  const state = _state as TeachingPopoverCarouselFooterState;
+
+  const styles = useStyles();
+  const { layout } = state;
+
+  state.root.className = mergeClasses(
+    state.root.className,
+    teachingPopoverCarouselFooterClassNames.root,
+    styles.root,
+    layout === 'centered' ? styles.rootCentered : styles.rootRightAligned,
+    getSlotClassNameProp_unstable(state.root),
+  );
+
+  if (state.previous) {
+    state.previous.className = mergeClasses(
+      state.previous.className,
+      teachingPopoverCarouselFooterClassNames.previous,
+      getSlotClassNameProp_unstable(state.previous),
+    );
+  }
+
+  state.next.className = mergeClasses(
+    state.next.className,
+    teachingPopoverCarouselFooterClassNames.next,
+    getSlotClassNameProp_unstable(state.next),
+  );
+
+  return state;
+};