From a4fde1f44bb7c2fa65e2c32c0277e6dee4fe0999 Mon Sep 17 00:00:00 2001 From: Peter Zimon Date: Thu, 10 Oct 2024 17:33:59 +0100 Subject: [PATCH] Displaying fonts in dropdown --- .../src/global/form/Select.tsx | 13 ++++-- apps/admin-x-design-system/styles.css | 15 ++++++ .../admin-x-design-system/tailwind.config.cjs | 15 +++++- .../components/settings/site/DesignModal.tsx | 2 +- .../site/designAndBranding/GlobalSettings.tsx | 46 +++++++++++++++++-- 5 files changed, 83 insertions(+), 8 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 2fec485998..f41eb9ccda 100644 --- a/apps/admin-x-design-system/src/global/form/Select.tsx +++ b/apps/admin-x-design-system/src/global/form/Select.tsx @@ -1,6 +1,6 @@ import clsx from 'clsx'; import React, {useId, useMemo, useEffect} from 'react'; -import ReactSelect, {ClearIndicatorProps, DropdownIndicatorProps, GroupBase, OptionProps, OptionsOrGroups, Props, components} from 'react-select'; +import ReactSelect, {ClearIndicatorProps, DropdownIndicatorProps, GroupBase, MenuPlacement, OptionProps, OptionsOrGroups, Props, components} from 'react-select'; import AsyncSelect from 'react-select/async'; import {useFocusContext} from '../../providers/DesignSystemProvider'; import Heading from '../Heading'; @@ -190,7 +190,13 @@ const Select: React.FC = ({ control: () => customClasses.control, placeholder: () => customClasses.placeHolder, menu: () => customClasses.menu, - option: () => customClasses.option, + /* eslint-disable @typescript-eslint/no-explicit-any */ + option: (state: any) => { + if (state.data.className) { + return clsx(customClasses.option, state.data.className); + } + return customClasses.option; + }, noOptionsMessage: () => customClasses.noOptionsMessage, groupHeading: () => customClasses.groupHeading, clearIndicator: () => customClasses.clearIndicator @@ -206,7 +212,8 @@ const Select: React.FC = ({ unstyled: true, onChange: onSelect, onFocus: handleFocus, - onBlur: handleBlur + onBlur: handleBlur, + menuPlacement: 'auto' as MenuPlacement }; const select = ( diff --git a/apps/admin-x-design-system/styles.css b/apps/admin-x-design-system/styles.css index 5ba0b87bf7..33ef936b41 100644 --- a/apps/admin-x-design-system/styles.css +++ b/apps/admin-x-design-system/styles.css @@ -4,6 +4,21 @@ @import 'tailwindcss/components'; @import 'tailwindcss/utilities'; +@import url(https://fonts.bunny.net/css?family=space-grotesk:700); +@import url(https://fonts.bunny.net/css?family=playfair-display:400); +@import url(https://fonts.bunny.net/css?family=chakra-petch:400); +@import url(https://fonts.bunny.net/css?family=noto-sans:400,700); +@import url(https://fonts.bunny.net/css?family=poppins:400,700); +@import url(https://fonts.bunny.net/css?family=fira-sans:400,700); +@import url(https://fonts.bunny.net/css?family=inter:400,700); +@import url(https://fonts.bunny.net/css?family=noto-serif:400,700); +@import url(https://fonts.bunny.net/css?family=lora:400,700); +@import url(https://fonts.bunny.net/css?family=ibm-plex-serif:400,700); +@import url(https://fonts.bunny.net/css?family=eb-garamond:400,700); +@import url(https://fonts.bunny.net/css?family=space-mono:400,700); +@import url(https://fonts.bunny.net/css?family=fira-mono:400,700); +@import url(https://fonts.bunny.net/css?family=jetbrains-mono:400,700); + /* Defaults */ @layer base { /* This just serves as a placeholder; we actually load Inter from a font file in Ember admin */ diff --git a/apps/admin-x-design-system/tailwind.config.cjs b/apps/admin-x-design-system/tailwind.config.cjs index dad518c758..dad2d494c5 100644 --- a/apps/admin-x-design-system/tailwind.config.cjs +++ b/apps/admin-x-design-system/tailwind.config.cjs @@ -93,7 +93,20 @@ module.exports = { sans: 'Inter, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif', serif: 'Georgia, serif', mono: 'Consolas, Liberation Mono, Menlo, Courier, monospace', - inherit: 'inherit' + inherit: 'inherit', + 'space-grotesk': 'Space Grotesk', + 'playfair-display': 'Playfair Display', + 'chakra-petch': 'Chakra Petch', + 'noto-sans': 'Noto Sans', + poppins: 'Poppins', + 'fira-sans': 'Fira Sans', + 'noto-serif': 'Noto Serif', + lora: 'Lora', + 'ibm-plex-serif': 'IBM Plex Serif', + 'eb-garamond': 'EB Garamond', + 'space-mono': 'Space Mono', + 'fira-mono': 'Fira Mono', + 'jetbrains-mono': 'JetBrains Mono' }, boxShadow: { DEFAULT: '0 0 1px rgba(0,0,0,.05), 0 5px 18px rgba(0,0,0,.08)', diff --git a/apps/admin-x-settings/src/components/settings/site/DesignModal.tsx b/apps/admin-x-settings/src/components/settings/site/DesignModal.tsx index a2442a9a96..3cd93fccc3 100644 --- a/apps/admin-x-settings/src/components/settings/site/DesignModal.tsx +++ b/apps/admin-x-settings/src/components/settings/site/DesignModal.tsx @@ -48,7 +48,7 @@ const Sidebar: React.FC<{ return (
-
+
{tabs.length > 1 ? : 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 75c287895f..3f79ea69ce 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 @@ -18,7 +18,8 @@ type BodyFontOption = { }; type HeadingFontOption = { value: HeadingFont | typeof DEFAULT_FONT, - label: HeadingFont | typeof DEFAULT_FONT + label: HeadingFont | typeof DEFAULT_FONT, + className?: string }; export interface GlobalSettingValues { @@ -46,10 +47,47 @@ 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 customHeadingFonts: HeadingFontOption[] = CUSTOM_FONTS.heading.map(x => ({label: x, value: x})); + const fontClassName = (fontName: string) => { + if (fontName === 'Space Grotesk') { + return 'font-space-grotesk'; + } else if (fontName === 'Chakra Petch') { + return 'font-chakra-petch'; + } else if (fontName === 'Noto Sans') { + return 'font-noto-sans'; + } else if (fontName === 'Poppins') { + return 'font-poppins'; + } else if (fontName === 'Fira Sans') { + return 'font-fira-sans'; + } else if (fontName === 'Noto Serif') { + return 'font-noto-serif'; + } else if (fontName === 'Lora') { + return 'font-lora'; + } else if (fontName === 'IBM Plex Serif') { + return 'font-ibm-plex-serif'; + } else if (fontName === 'EB Garamond') { + return 'font-eb-garamond'; + } else if (fontName === 'Space Mono') { + return 'font-space-mono'; + } else if (fontName === 'Fira Mono') { + return 'font-fira-mono'; + } else if (fontName === 'JetBrains Mono') { + return 'font-jetbrains-mono'; + } + return ''; + }; + + // 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); + return {label: x, value: x, className}; + }); customHeadingFonts.unshift({label: DEFAULT_FONT, value: DEFAULT_FONT}); - const customBodyFonts: BodyFontOption[] = CUSTOM_FONTS.body.map(x => ({label: x, value: x})); + const customBodyFonts: BodyFontOption[] = CUSTOM_FONTS.body.map((x) => { + let className = fontClassName(x); + return {label: x, value: x, className}; + }); customBodyFonts.unshift({label: DEFAULT_FONT, value: DEFAULT_FONT}); const selectedHeadingFont = {label: headingFont, value: headingFont}; @@ -210,6 +248,8 @@ const GlobalSettings: React.FC<{ values: GlobalSettingValues, updateSetting: (ke />