Re-next mosaic

.prettierignore

@@ -11,6 +11,7 @@ LICENSE
 *.png
 *.hbs
 *.jpg
+*.ico
 
 **/build
 **/dist

packages/components-labs/src/index.ts

@@ -1,3 +1,5 @@
+'use client';
+
 import { withMarkdownSpacing } from '@jpmorganchase/mosaic-components';
 import { Diagram } from './Diagram';
 import { Sitemap } from './Sitemap';

packages/components/src/EditionFilterView/index.tsx

@@ -1,10 +1,9 @@
-import React from 'react';
+import { ReactNode, FC } from 'react';
 import classnames from 'clsx';
 
 import { FilterResultCount, FilterView } from '../FilterView';
 import { FilterDropdown, FilterSortDropdown } from '../FilterToolbar';
 import { EditionTileLink } from '../EditionTileLink';
-import { FormattedContent } from '../FormattedContent';
 import styles from './styles.css';
 
 export const createCustomFilter = (view, filters) =>
@@ -38,7 +37,7 @@ export type Edition = {
   group?: string;
   link: string;
   publicationDate: string;
-  formattedDescription?: string;
+  formattedDescription?: ReactNode;
   title?: string;
 };
 
@@ -60,19 +59,15 @@ export type EditionFilterViewProps = {
 
 export const DefaultEditionFilterViewRenderer: EditionFilterViewRenderer = (item, itemIndex) => (
   <EditionTileLink
-    description={
-      item.formattedDescription ? (
-        <FormattedContent>{item.formattedDescription}</FormattedContent>
-      ) : null
-    }
+    description={item.formattedDescription ? item.formattedDescription : null}
     eyebrow={item.eyebrow}
     image={item.image}
     key={`editionTile-${itemIndex}`}
     link={item.link}
     title={item.title}
   />
 );
-export const EditionFilterView: React.FC<React.PropsWithChildren<EditionFilterViewProps>> = ({
+export const EditionFilterView: FC<EditionFilterViewProps> = ({
   className,
   ItemRenderer = DefaultEditionFilterViewRenderer,
   view,

packages/components/src/EditionTileLink/index.tsx

@@ -1,9 +1,9 @@
 import React, { FC, ReactNode } from 'react';
+import { useImageComponent } from '@jpmorganchase/mosaic-store';
 
 import { LinkBase } from '../LinkBase';
 import { LinkText } from '../LinkText';
 import { TileBase, useTileState } from '../TileBase';
-import { useImageComponent } from '../ImageProvider';
 import { useBreakpoint } from '../useBreakpoint';
 import styles, { imageRecipe, tileImageRecipe } from './styles.css';
 

packages/components/src/Feature/Feature.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
 import classnames from 'clsx';
 import { feature } from '@jpmorganchase/mosaic-theme';
+import { useImageComponent } from '@jpmorganchase/mosaic-store';
 
 import styles from './styles.css';
-import { useImageComponent } from '../ImageProvider';
 
 export type FeatureClassesType = {
   content?: string;

packages/components/src/Hero/index.tsx

@@ -1,10 +1,10 @@
-import React, { ReactElement } from 'react';
+import React, { ReactElement, ReactNode } from 'react';
 import classnames from 'clsx';
+import { useImageComponent } from '@jpmorganchase/mosaic-store';
 import { LinkButton } from '../LinkButton';
 
 import styles from './styles.css';
 import { Eyebrow, H1, P2 } from '../Typography';
-import { useImageComponent } from '../ImageProvider';
 
 const formatTitle = (fullWidth: boolean, title: string, key: string): React.ReactNode => {
   const lines = title ? title.split('<br>') : [];
@@ -30,6 +30,8 @@ export interface HeroLink {
  */
 export interface HeroProps {
   backgroundImage?: string;
+  /** Optional children to use instead of links */
+  children?: ReactNode;
   /** Additional class name for root class override. */
   className?: string;
   /** Prop to provide a datestamp. */
@@ -42,7 +44,7 @@ export interface HeroProps {
   /** Image to be displayed. */
   image?: string;
   /** The title of the Hero. */
-  title: string | ReactElement;
+  title?: string | ReactElement;
   links?: HeroLink[];
   /** Defines the variant.
    * @defaultValue `regular`
@@ -95,8 +97,9 @@ function HeroImageContainer({ isFramed, heroBackgroundImage, heroImage, isFullWi
  * />
  * ```
  */
-export const Hero: React.FC<React.PropsWithChildren<HeroProps>> = ({
+export const Hero: React.FC<HeroProps> = ({
   backgroundImage,
+  children,
   className,
   datestamp,
   datestampLabel = 'Last Modified',
@@ -139,7 +142,7 @@ export const Hero: React.FC<React.PropsWithChildren<HeroProps>> = ({
         ) : null}
         {description ? <P2 className={styles.description}>{description}</P2> : null}
         {links ? (
-          <div className={styles.links}>
+          <div className={styles.children}>
             {links.map((link, linkIndex) => {
               const isLastLink = linkIndex === links.length - 1;
               return (
@@ -157,7 +160,9 @@ export const Hero: React.FC<React.PropsWithChildren<HeroProps>> = ({
               );
             })}
           </div>
-        ) : null}
+        ) : (
+          <div className={styles.children}>{children}</div>
+        )}
       </div>
       {image ? (
         <HeroImageContainer

packages/components/src/Hero/styles.css.ts

@@ -91,7 +91,7 @@ export default {
 
   lastLink: responsiveSprinkles({ marginRight: ['none', 'none', 'none', 'none'] }),
   link: responsiveSprinkles({ marginRight: ['x6', 'x6', 'x6', 'x6'] }),
-  links: style([
+  children: style([
     style({
       display: 'flex'
     }),

packages/components/src/Impact/index.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import classnames from 'clsx';
+import { useImageComponent } from '@jpmorganchase/mosaic-store';
 
 import styles from './styles.css';
-import { useImageComponent } from '../ImageProvider';
 
 export interface ImpactProps {
   /** Additional class name for root class override */

packages/components/src/LinkBase/index.tsx

@@ -1,6 +1,6 @@
 import React, { forwardRef, Ref } from 'react';
+import { useLinkComponent } from '@jpmorganchase/mosaic-store';
 
-import { useLinkComponent } from '../LinkProvider';
 import { hasProtocol } from '../utils/hasProtocol';
 
 export interface LinkBaseProps extends Omit<React.HTMLProps<HTMLAnchorElement>, 'ref'> {

packages/components/src/SecondaryNavbar/index.tsx

@@ -3,7 +3,7 @@ import classnames from 'clsx';
 import { findLastIndex } from 'lodash-es';
 import { config } from '@jpmorganchase/mosaic-theme';
 
-import { TabsBase, TabsMenu, TabMenuItemType, TabsLinkItem } from '../TabsBase';
+import { TabsBase, TabsMenu, TabsLinkItem } from '../TabsBase';
 import { canUseDOM } from '../canUseDOM';
 import { StickyHeader } from '../StickyHeader';
 import styles from './styles.css';
@@ -22,7 +22,7 @@ export interface SecondaryNavbarProps {
 
 const getSelectedTabIndex = (items: TabsMenu, itemPath: string): number =>
   findLastIndex(items, (item): boolean => {
-    if (item.type === TabMenuItemType.MENU) {
+    if (item.type === 'menu') {
       return !!item.links.find(link => itemPath.startsWith(link.link));
     }
     return itemPath.startsWith((item as TabsLinkItem).link);

packages/components/src/Story/index.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import classnames from 'clsx';
+import { useImageComponent } from '@jpmorganchase/mosaic-store';
 
 import { LinkButton } from '../LinkButton';
-import { useImageComponent } from '../ImageProvider';
 import styles from './styles.css';
 
 export interface StoryProps {

packages/components/src/Tabs/index.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import classnames from 'clsx';
 
-import { TabsBase, TabsButtonItem, TabMenuItemType } from '../TabsBase';
+import { TabsBase, TabsButtonItem } from '../TabsBase';
 import { ViewStack } from '../ViewStack';
 import type { ViewProps } from '../ViewStack/View';
 import styles from './styles.css';
@@ -36,7 +36,7 @@ export const Tabs: React.FC<TabsProps> = ({ className, children }) => {
     const tabButtonItem: ExtendedTabsButtonItem = {
       title: tabElement.props.id || `Tab ${childIndex}`,
       defaultView: Object.prototype.hasOwnProperty.call(child.props, 'defaultView'),
-      type: TabMenuItemType.BUTTON,
+      type: 'button',
       onSelect: (_event, sourceItem) => setCurrentViewId(sourceItem)
     };
     return tabButtonItem;

packages/components/src/TabsBase/TabsBase.tsx

@@ -6,11 +6,8 @@ import { TabsLink, TabsLinkItem } from './TabsLink';
 import { TabsMenuButton, TabsMenuButtonItem } from './TabsMenuButton';
 import styles from './styles.css';
 
-export enum TabMenuItemType {
-  MENU = 'menu',
-  LINK = 'link',
-  BUTTON = 'button'
-}
+export type TabMenuItemType = 'menu' | 'link' | 'button';
+
 export interface TabsBaseProps {
   /** Additional class name for root class override */
   className?: string;
@@ -24,10 +21,10 @@ export type TabsMenu = (TabsLinkItem | TabsButtonItem | TabsMenuButtonItem)[];
 
 function TabsItem({ children, item }) {
   const { type } = item;
-  if (type === TabMenuItemType.MENU) {
+  if (type === 'menu') {
     return <TabsMenuButton item={item}>{children}</TabsMenuButton>;
   }
-  if (type === TabMenuItemType.BUTTON) {
+  if (type === 'button') {
     return <TabsButton item={item}>{children}</TabsButton>;
   }
   return <TabsLink item={item}>{children}</TabsLink>;

packages/components/src/TabsBase/TabsButton.tsx

@@ -1,6 +1,5 @@
 import React, { FC } from 'react';
 
-import { TabMenuItemType } from './index';
 import styles from './styles.css';
 
 export interface TabsButtonItem {
@@ -13,7 +12,7 @@ export interface TabsButtonItem {
   /** Title of Tab */
   title: string;
   /** Type of Tab */
-  type: TabMenuItemType.BUTTON;
+  type: 'button';
 }
 
 interface TabButtonProps {

packages/components/src/TabsBase/TabsLink.tsx

@@ -1,7 +1,6 @@
 import React, { FC } from 'react';
 
 import { Link } from '../Link';
-import { TabMenuItemType } from './index';
 import styles from './styles.css';
 
 export interface TabsLinkItem {
@@ -14,7 +13,7 @@ export interface TabsLinkItem {
   /** Title of Tab */
   title?: string;
   /** Type of Tab */
-  type: TabMenuItemType.LINK;
+  type: 'link';
 }
 
 export interface TabsLinkProps {

packages/components/src/TabsBase/TabsMenuButton.tsx

@@ -4,7 +4,6 @@ import classnames from 'clsx';
 
 import styles from './tabsMenuButton.css';
 import type { TabsLinkItem } from './TabsLink';
-import type { TabMenuItemType } from './index';
 import { Icon } from '../Icon';
 
 export interface TabsMenuButtonItem {
@@ -19,7 +18,7 @@ export interface TabsMenuButtonItem {
   /** Title of Tab */
   title: string;
   /** Type of Tab */
-  type: TabMenuItemType.MENU;
+  type: 'menu';
 }
 
 export interface TabsMenuButtonProps {

packages/components/src/ThemeProvider.tsx

@@ -31,7 +31,7 @@ export function ThemeProvider({
   children
 }: ThemeProviderProps) {
   const hasHydrated = useHasHydrated();
-  const colorMode = useColorMode();
+  const { colorMode } = useColorMode();
 
   const ssrClassname = hasHydrated ? undefined : ssrClassName;