From 8d912d2058dd2a21e4d7549a9402b3d2e91fffba Mon Sep 17 00:00:00 2001
From: Dionysos Dajka <diondiondion@gmail.com>
Date: Wed, 17 Nov 2021 12:43:28 +0100
Subject: [PATCH] fix(ThemeSection): Make "name" prop optional, noissue

---
 src/ThemeSection/getThemeSection.ts |  7 ++++---
 src/ThemeSection/index.tsx          | 11 ++++++++++-
 2 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/src/ThemeSection/getThemeSection.ts b/src/ThemeSection/getThemeSection.ts
index 72a6f650..8aa8a61f 100644
--- a/src/ThemeSection/getThemeSection.ts
+++ b/src/ThemeSection/getThemeSection.ts
@@ -23,7 +23,7 @@ import {ConfigThemeSection, LocalThemeSection} from '../theme/types';
 
 interface SectionGetterOptions {
 	theme: LocalThemeSection;
-	name: string;
+	name?: string;
 	withBackgroundImage?: boolean;
 }
 
@@ -31,7 +31,7 @@ function getThemeSection({
 	theme,
 	name,
 	withBackgroundImage,
-}: SectionGetterOptions): ConfigThemeSection {
+}: SectionGetterOptions): ConfigThemeSection | undefined {
 	// If the passed in name isn't the name of a section,
 	// we treat it as a "color block"
 	const isThemeSection = Boolean(theme.sections?.[name]);
@@ -68,8 +68,9 @@ function getThemeSection({
 	// and we need to dynamically construct a readable section
 	const background = getColorBlock(name, theme);
 
+	// If this turns out not to be a valid colour, we give up
 	if (!isValidColor(background)) {
-		return localThemeSection;
+		return undefined;
 	}
 
 	const [contrastingText, contrastingShade] = isDark(background)
diff --git a/src/ThemeSection/index.tsx b/src/ThemeSection/index.tsx
index 2f4f36e5..30667e8a 100644
--- a/src/ThemeSection/index.tsx
+++ b/src/ThemeSection/index.tsx
@@ -13,7 +13,7 @@ interface ThemeSectionProps {
 	 * The key (name) of the theme section, as defined in `baseTheme.sections`,
 	 * or a color block from e.g. `baseTheme.globals.colorBlocks`
 	 */
-	name: ThemeSectionName;
+	name?: ThemeSectionName;
 	/**
 	 * Theme object to use as the base for all nested
 	 * ThemeSections. Usually this prop only needs to be
@@ -34,11 +34,20 @@ function ThemeSection(props: ThemeSectionProps): React.ReactElement {
 
 	const constructLocalTheme = useCallback(
 		(parentTheme = baseTheme): LocalThemeSection => {
+			if (!name && !withBackgroundImage) {
+				return parentTheme;
+			}
+
 			const localThemeSection = getThemeSection({
 				theme: parentTheme,
 				name,
 				withBackgroundImage,
 			});
+
+			if (!localThemeSection) {
+				return parentTheme;
+			}
+
 			const parentThemeSectionName = parentTheme.currentThemeSectionName;
 
 			return {