From 0a17972db60f7de5ee33f3a52eadd7f93f5f2284 Mon Sep 17 00:00:00 2001 From: Peter Zimon Date: Wed, 23 Oct 2024 10:46:56 +0200 Subject: [PATCH] Refined font dropdown --- .../src/global/form/Select.tsx | 2 +- .../admin-x-design-system/tailwind.config.cjs | 1 + .../site/designAndBranding/GlobalSettings.tsx | 68 +++++++++++-------- 3 files changed, 43 insertions(+), 28 deletions(-) diff --git a/apps/admin-x-design-system/src/global/form/Select.tsx b/apps/admin-x-design-system/src/global/form/Select.tsx index f41eb9ccda..d4fa1b0e11 100644 --- a/apps/admin-x-design-system/src/global/form/Select.tsx +++ b/apps/admin-x-design-system/src/global/form/Select.tsx @@ -82,7 +82,7 @@ const ClearIndicator: React.FC> = props const Option: React.FC> = ({children, ...optionProps}) => ( - {children} + {children}{optionProps.isSelected && } {optionProps.data.hint && {optionProps.data.hint}} ); diff --git a/apps/admin-x-design-system/tailwind.config.cjs b/apps/admin-x-design-system/tailwind.config.cjs index 1626a85ea0..04a305e427 100644 --- a/apps/admin-x-design-system/tailwind.config.cjs +++ b/apps/admin-x-design-system/tailwind.config.cjs @@ -93,6 +93,7 @@ module.exports = { manrope: 'Manrope', merriweather: 'Merriweather', nunito: 'Nunito', + 'tenor-sans': 'Tenor Sans', 'old-standard-tt': 'Old Standard TT', prata: 'Prata', roboto: 'Roboto', diff --git a/apps/admin-x-settings/src/components/settings/site/designAndBranding/GlobalSettings.tsx b/apps/admin-x-settings/src/components/settings/site/designAndBranding/GlobalSettings.tsx index a72d6ebb81..de9aa9d3e6 100644 --- a/apps/admin-x-settings/src/components/settings/site/designAndBranding/GlobalSettings.tsx +++ b/apps/admin-x-settings/src/components/settings/site/designAndBranding/GlobalSettings.tsx @@ -1,6 +1,7 @@ import BehindFeatureFlag from '../../../BehindFeatureFlag'; import React, {useState} from 'react'; import UnsplashSelector from '../../../selectors/UnsplashSelector'; +import clsx from 'clsx'; import usePinturaEditor from '../../../../hooks/usePinturaEditor'; import {APIError} from '@tryghost/admin-x-framework/errors'; import {CUSTOM_FONTS} from '@tryghost/custom-fonts'; @@ -14,7 +15,8 @@ import type {BodyFont, HeadingFont} from '@tryghost/custom-fonts'; type BodyFontOption = { value: BodyFont | typeof DEFAULT_FONT, - label: BodyFont | typeof DEFAULT_FONT + label: BodyFont | typeof DEFAULT_FONT, + className?: string }; type HeadingFontOption = { value: HeadingFont | typeof DEFAULT_FONT, @@ -47,64 +49,72 @@ const GlobalSettings: React.FC<{ values: GlobalSettingValues, updateSetting: (ke const [headingFont, setHeadingFont] = useState(values.headingFont || DEFAULT_FONT); const [bodyFont, setBodyFont] = useState(values.bodyFont || DEFAULT_FONT); - const fontClassName = (fontName: string) => { + const fontClassName = (fontName: string, heading: boolean = true) => { + let className = ''; if (fontName === 'Cardo') { - return 'font-cardo'; + className = clsx('font-cardo', heading && 'font-bold'); } else if (fontName === 'Manrope') { - return 'font-manrope'; + className = clsx('font-manrope', heading && 'font-bold'); } else if (fontName === 'Merriweather') { - return 'font-merriweather'; + className = clsx('font-merriweather', heading && 'font-bold'); } else if (fontName === 'Nunito') { - return 'font-nunito'; + className = clsx('font-nunito', heading && 'font-semibold'); } else if (fontName === 'Old Standard TT') { - return 'font-old-standard-tt'; + className = clsx('font-old-standard-tt', heading && 'font-bold'); } else if (fontName === 'Prata') { - return 'font-prata'; + className = clsx('font-prata', heading && 'font-normal'); } else if (fontName === 'Roboto') { - return 'font-roboto'; + className = clsx('font-roboto', heading && 'font-bold'); } else if (fontName === 'Rufina') { - return 'font-rufina'; + className = clsx('font-rufina', heading && 'font-bold'); } else if (fontName === 'Tenor Sans') { - return 'font-tenor-sans'; + className = clsx('font-tenor-sans', heading && 'font-normal'); } else if (fontName === 'Chakra Petch') { - return 'font-chakra-petch'; + className = clsx('font-chakra-petch', heading && 'font-normal'); } else if (fontName === 'Fira Mono') { - return 'font-fira-mono'; + className = clsx('font-fira-mono', heading && 'font-bold'); } else if (fontName === 'Fira Sans') { - return 'font-fira-sans'; + className = clsx('font-fira-sans', heading && 'font-bold'); } else if (fontName === 'IBM Plex Serif') { - return 'font-ibm-plex-serif'; + className = clsx('font-ibm-plex-serif', heading && 'font-bold'); } else if (fontName === 'JetBrains Mono') { - return 'font-jetbrains-mono'; + className = clsx('font-jetbrains-mono', heading && 'font-bold'); } else if (fontName === 'Lora') { - return 'font-lora'; + className = clsx('font-lora', heading && 'font-bold'); } else if (fontName === 'Noto Sans') { - return 'font-noto-sans'; + className = clsx('font-noto-sans', heading && 'font-bold'); } else if (fontName === 'Noto Serif') { - return 'font-noto-serif'; + className = clsx('font-noto-serif', heading && 'font-bold'); } else if (fontName === 'Poppins') { - return 'font-poppins'; + className = clsx('font-poppins', heading && 'font-bold'); } else if (fontName === 'Space Grotesk') { - return 'font-space-grotesk'; + className = clsx('font-space-grotesk', heading && 'font-bold'); } else if (fontName === 'Space Mono') { - return 'font-space-mono'; + className = clsx('font-space-mono', heading && 'font-bold'); } - return ''; + return className; }; // TODO: replace with getCustomFonts() once custom-fonts is updated and differentiates // between heading and body fonts const customHeadingFonts: HeadingFontOption[] = CUSTOM_FONTS.heading.map((x) => { - let className = fontClassName(x); + let className = fontClassName(x, true); return {label: x, value: x, className}; }); - customHeadingFonts.unshift({label: DEFAULT_FONT, value: DEFAULT_FONT}); + customHeadingFonts.unshift({label: DEFAULT_FONT, value: DEFAULT_FONT, className: 'font-sans font-normal'}); const customBodyFonts: BodyFontOption[] = CUSTOM_FONTS.body.map((x) => { - let className = fontClassName(x); + let className = fontClassName(x, false); return {label: x, value: x, className}; }); - customBodyFonts.unshift({label: DEFAULT_FONT, value: DEFAULT_FONT}); + customBodyFonts.unshift({label: DEFAULT_FONT, value: DEFAULT_FONT, className: 'font-sans font-normal'}); + + const selectFont = (fontName: string, heading: boolean) => { + if (fontName === DEFAULT_FONT) { + return ''; + } + return fontClassName(fontName, heading); + }; const selectedHeadingFont = {label: headingFont, value: headingFont}; const selectedBodyFont = {label: bodyFont, value: bodyFont}; @@ -248,7 +258,9 @@ const GlobalSettings: React.FC<{ values: GlobalSettingValues, updateSetting: (ke