From fd94ad0e41cb5e16477a964ac4b7ae9968f3ee15 Mon Sep 17 00:00:00 2001
From: VladislavPetyukevich <pet.vladislav@gmail.com>
Date: Tue, 22 Feb 2022 14:55:21 +0300
Subject: [PATCH 1/2] feat(plasma-temple): Custom title component in
 GalleryPage

---
 .../src/pages/GalleryPage/GalleryPage.tsx             | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/packages/plasma-temple/src/pages/GalleryPage/GalleryPage.tsx b/packages/plasma-temple/src/pages/GalleryPage/GalleryPage.tsx
index f8295623b..2ccf9ff8b 100644
--- a/packages/plasma-temple/src/pages/GalleryPage/GalleryPage.tsx
+++ b/packages/plasma-temple/src/pages/GalleryPage/GalleryPage.tsx
@@ -21,6 +21,7 @@ interface GalleryPageProps<T extends AnyObject = AnyObject> extends ComponentPro
     changeState: (state: GalleryPageState<T>) => void;
     onCardClick: (card: GalleryCardParams<T>) => void;
     galleryCard?: React.ComponentType<GalleryCardProps<T>>;
+    titleComponent?: React.ComponentType<{ title: string }>;
 }
 
 interface StyledSectionWrapperProps {
@@ -54,6 +55,7 @@ const StyledSectionTitle = styled(Headline3)<{ active: boolean }>`
 interface FocusableGalleryProps {
     index: number;
     title?: string;
+    TitleComponent?: React.ComponentType<{ title: string }>;
     activeCardIndex?: number;
     isMultiple?: boolean;
 }
@@ -61,6 +63,7 @@ interface FocusableGalleryProps {
 const FocusableGallery: React.FC<FocusableGalleryProps & GalleryProps> = ({
     index,
     title,
+    TitleComponent,
     activeCardIndex = -1,
     isMultiple = false,
     ...props
@@ -81,12 +84,13 @@ const FocusableGallery: React.FC<FocusableGalleryProps & GalleryProps> = ({
         if (!title) {
             return null;
         }
+        const titleContent = TitleComponent ? <TitleComponent title={title} /> : title;
 
         if (isMultiple) {
-            return <StyledSectionTitle active={isActive}>{title}</StyledSectionTitle>;
+            return <StyledSectionTitle active={isActive}>{titleContent}</StyledSectionTitle>;
         }
 
-        return <Headline3>{title}</Headline3>;
+        return <Headline3>{titleContent}</Headline3>;
     }, [isActive, isMultiple, title]);
 
     return (
@@ -102,7 +106,7 @@ export interface GalleryPageControl {
 }
 
 export const GalleryPage = React.forwardRef<GalleryPageControl, GalleryPageProps<AnyObject>>(
-    ({ state, header, changeState, onCardClick, galleryCard }, ref): React.ReactElement => {
+    ({ state, header, changeState, onCardClick, galleryCard, titleComponent }, ref): React.ReactElement => {
         const { gallery, activeGalleryIndex } = state;
         const galleries = React.useMemo(() => (Array.isArray(gallery) ? gallery : [{ id: 'id', ...gallery }]), [
             gallery,
@@ -171,6 +175,7 @@ export const GalleryPage = React.forwardRef<GalleryPageControl, GalleryPageProps
                     index={index}
                     items={galleryData.items}
                     title={galleryData.title}
+                    TitleComponent={titleComponent}
                     activeCardIndex={galleryData.activeCardIndex}
                     onItemFocus={() => changeGallery(index)}
                     onItemClick={handleItemClick}

From 1548998421a7ad8dd98842df81d1a39e9d2c6a8f Mon Sep 17 00:00:00 2001
From: VladislavPetyukevich <pet.vladislav@gmail.com>
Date: Tue, 22 Feb 2022 17:15:33 +0300
Subject: [PATCH 2/2] feat(plasma-temple): Pass ReactNode to GalleryPage titles

---
 .../src/pages/GalleryPage/GalleryPage.tsx           | 13 ++++---------
 .../plasma-temple/src/pages/GalleryPage/types.ts    |  6 ++++--
 2 files changed, 8 insertions(+), 11 deletions(-)

diff --git a/packages/plasma-temple/src/pages/GalleryPage/GalleryPage.tsx b/packages/plasma-temple/src/pages/GalleryPage/GalleryPage.tsx
index 2ccf9ff8b..fbcf611e5 100644
--- a/packages/plasma-temple/src/pages/GalleryPage/GalleryPage.tsx
+++ b/packages/plasma-temple/src/pages/GalleryPage/GalleryPage.tsx
@@ -21,7 +21,6 @@ interface GalleryPageProps<T extends AnyObject = AnyObject> extends ComponentPro
     changeState: (state: GalleryPageState<T>) => void;
     onCardClick: (card: GalleryCardParams<T>) => void;
     galleryCard?: React.ComponentType<GalleryCardProps<T>>;
-    titleComponent?: React.ComponentType<{ title: string }>;
 }
 
 interface StyledSectionWrapperProps {
@@ -54,8 +53,7 @@ const StyledSectionTitle = styled(Headline3)<{ active: boolean }>`
 
 interface FocusableGalleryProps {
     index: number;
-    title?: string;
-    TitleComponent?: React.ComponentType<{ title: string }>;
+    title?: React.ReactNode;
     activeCardIndex?: number;
     isMultiple?: boolean;
 }
@@ -63,7 +61,6 @@ interface FocusableGalleryProps {
 const FocusableGallery: React.FC<FocusableGalleryProps & GalleryProps> = ({
     index,
     title,
-    TitleComponent,
     activeCardIndex = -1,
     isMultiple = false,
     ...props
@@ -84,13 +81,12 @@ const FocusableGallery: React.FC<FocusableGalleryProps & GalleryProps> = ({
         if (!title) {
             return null;
         }
-        const titleContent = TitleComponent ? <TitleComponent title={title} /> : title;
 
         if (isMultiple) {
-            return <StyledSectionTitle active={isActive}>{titleContent}</StyledSectionTitle>;
+            return <StyledSectionTitle active={isActive}>{title}</StyledSectionTitle>;
         }
 
-        return <Headline3>{titleContent}</Headline3>;
+        return <Headline3>{title}</Headline3>;
     }, [isActive, isMultiple, title]);
 
     return (
@@ -106,7 +102,7 @@ export interface GalleryPageControl {
 }
 
 export const GalleryPage = React.forwardRef<GalleryPageControl, GalleryPageProps<AnyObject>>(
-    ({ state, header, changeState, onCardClick, galleryCard, titleComponent }, ref): React.ReactElement => {
+    ({ state, header, changeState, onCardClick, galleryCard }, ref): React.ReactElement => {
         const { gallery, activeGalleryIndex } = state;
         const galleries = React.useMemo(() => (Array.isArray(gallery) ? gallery : [{ id: 'id', ...gallery }]), [
             gallery,
@@ -175,7 +171,6 @@ export const GalleryPage = React.forwardRef<GalleryPageControl, GalleryPageProps
                     index={index}
                     items={galleryData.items}
                     title={galleryData.title}
-                    TitleComponent={titleComponent}
                     activeCardIndex={galleryData.activeCardIndex}
                     onItemFocus={() => changeGallery(index)}
                     onItemClick={handleItemClick}
diff --git a/packages/plasma-temple/src/pages/GalleryPage/types.ts b/packages/plasma-temple/src/pages/GalleryPage/types.ts
index ebf6d5a61..d203f8d5f 100644
--- a/packages/plasma-temple/src/pages/GalleryPage/types.ts
+++ b/packages/plasma-temple/src/pages/GalleryPage/types.ts
@@ -1,15 +1,17 @@
+import React from 'react';
+
 import { GalleryCardParams } from '../../components/GalleryCard/types';
 import { AnyObject } from '../../types';
 
 export interface SingleGallery<T> {
-    title?: string;
+    title?: React.ReactNode;
     items: GalleryCardParams<T>[];
     activeCardIndex: number;
 }
 
 export interface MultipleGallery<T> {
     id: string;
-    title: string;
+    title: React.ReactNode;
     items: GalleryCardParams<T>[];
     activeCardIndex: number;
 }