From 2aa0bba8d4c8840c1a6151e537ff6b55abb166d6 Mon Sep 17 00:00:00 2001 From: Peter Zimon Date: Tue, 30 May 2023 14:33:08 +0200 Subject: [PATCH] Moved assets to AdminX Design System refs. https://github.com/TryGhost/Team/issues/3318 Until now all assets was part of the main app and not the AdminX Design System which could be problematic later when the system becomes a standalone library. Moved the assets folder under the design system for better reusability, less redundancy and for a more self-encapsulated system --- .../{ => admin-x-ds}/assets/fonts/Inter.ttf | Bin .../assets/icons/check-circle.svg | 0 .../assets/icons/lock-locked.svg | 0 .../assets/icons/lock-unlocked.svg | 0 .../assets/icons/magnifying-glass.svg | 0 .../assets/icons/single-user-fill.svg | 0 .../icons/single-user-neutral-block.svg | 0 .../assets/images/google-logo.svg | 0 .../src/admin-x-ds/global/Avatar.tsx | 22 ++++++++++-------- .../src/admin-x-ds/global/Icon.tsx | 2 +- ghost/admin-x-settings/src/assets/react.svg | 1 - .../components/settings/general/LockSite.tsx | 7 +++--- .../components/settings/general/Metadata.tsx | 4 ++-- .../src/components/settings/general/Users.tsx | 4 ++-- .../general/modals/UserDetailModal.tsx | 2 +- ghost/admin-x-settings/src/styles/demo.css | 2 +- 16 files changed, 22 insertions(+), 22 deletions(-) rename ghost/admin-x-settings/src/{ => admin-x-ds}/assets/fonts/Inter.ttf (100%) rename ghost/admin-x-settings/src/{ => admin-x-ds}/assets/icons/check-circle.svg (100%) rename ghost/admin-x-settings/src/{ => admin-x-ds}/assets/icons/lock-locked.svg (100%) rename ghost/admin-x-settings/src/{ => admin-x-ds}/assets/icons/lock-unlocked.svg (100%) rename ghost/admin-x-settings/src/{ => admin-x-ds}/assets/icons/magnifying-glass.svg (100%) rename ghost/admin-x-settings/src/{ => admin-x-ds}/assets/icons/single-user-fill.svg (100%) rename ghost/admin-x-settings/src/{ => admin-x-ds}/assets/icons/single-user-neutral-block.svg (100%) rename ghost/admin-x-settings/src/{ => admin-x-ds}/assets/images/google-logo.svg (100%) delete mode 100644 ghost/admin-x-settings/src/assets/react.svg diff --git a/ghost/admin-x-settings/src/assets/fonts/Inter.ttf b/ghost/admin-x-settings/src/admin-x-ds/assets/fonts/Inter.ttf similarity index 100% rename from ghost/admin-x-settings/src/assets/fonts/Inter.ttf rename to ghost/admin-x-settings/src/admin-x-ds/assets/fonts/Inter.ttf diff --git a/ghost/admin-x-settings/src/assets/icons/check-circle.svg b/ghost/admin-x-settings/src/admin-x-ds/assets/icons/check-circle.svg similarity index 100% rename from ghost/admin-x-settings/src/assets/icons/check-circle.svg rename to ghost/admin-x-settings/src/admin-x-ds/assets/icons/check-circle.svg diff --git a/ghost/admin-x-settings/src/assets/icons/lock-locked.svg b/ghost/admin-x-settings/src/admin-x-ds/assets/icons/lock-locked.svg similarity index 100% rename from ghost/admin-x-settings/src/assets/icons/lock-locked.svg rename to ghost/admin-x-settings/src/admin-x-ds/assets/icons/lock-locked.svg diff --git a/ghost/admin-x-settings/src/assets/icons/lock-unlocked.svg b/ghost/admin-x-settings/src/admin-x-ds/assets/icons/lock-unlocked.svg similarity index 100% rename from ghost/admin-x-settings/src/assets/icons/lock-unlocked.svg rename to ghost/admin-x-settings/src/admin-x-ds/assets/icons/lock-unlocked.svg diff --git a/ghost/admin-x-settings/src/assets/icons/magnifying-glass.svg b/ghost/admin-x-settings/src/admin-x-ds/assets/icons/magnifying-glass.svg similarity index 100% rename from ghost/admin-x-settings/src/assets/icons/magnifying-glass.svg rename to ghost/admin-x-settings/src/admin-x-ds/assets/icons/magnifying-glass.svg diff --git a/ghost/admin-x-settings/src/assets/icons/single-user-fill.svg b/ghost/admin-x-settings/src/admin-x-ds/assets/icons/single-user-fill.svg similarity index 100% rename from ghost/admin-x-settings/src/assets/icons/single-user-fill.svg rename to ghost/admin-x-settings/src/admin-x-ds/assets/icons/single-user-fill.svg diff --git a/ghost/admin-x-settings/src/assets/icons/single-user-neutral-block.svg b/ghost/admin-x-settings/src/admin-x-ds/assets/icons/single-user-neutral-block.svg similarity index 100% rename from ghost/admin-x-settings/src/assets/icons/single-user-neutral-block.svg rename to ghost/admin-x-settings/src/admin-x-ds/assets/icons/single-user-neutral-block.svg diff --git a/ghost/admin-x-settings/src/assets/images/google-logo.svg b/ghost/admin-x-settings/src/admin-x-ds/assets/images/google-logo.svg similarity index 100% rename from ghost/admin-x-settings/src/assets/images/google-logo.svg rename to ghost/admin-x-settings/src/admin-x-ds/assets/images/google-logo.svg diff --git a/ghost/admin-x-settings/src/admin-x-ds/global/Avatar.tsx b/ghost/admin-x-settings/src/admin-x-ds/global/Avatar.tsx index 7c8e9983f6..0864a43bfe 100644 --- a/ghost/admin-x-settings/src/admin-x-ds/global/Avatar.tsx +++ b/ghost/admin-x-settings/src/admin-x-ds/global/Avatar.tsx @@ -1,12 +1,20 @@ import React from 'react'; -import {ReactComponent as UserIcon} from '../../assets/icons/single-user-fill.svg'; +import {ReactComponent as UserIcon} from '../assets/icons/single-user-fill.svg'; type AvatarSize = 'sm' | 'md' | 'lg' | 'xl'; interface AvatarProps { image?: string; label?: string; + + /** + * Accepts any valid Tailwindcolor e.g. `black`, `green` + */ labelColor?: string; + + /** + * Accepts any valid CSS value e.g. #ffca03 + */ bgColor?: string; size?: AvatarSize; className?: string; @@ -14,20 +22,14 @@ interface AvatarProps { const Avatar: React.FC = ({image, label, labelColor, bgColor, size, className}) => { let avatarSize = ''; - let fallbackPosition = ''; + let fallbackPosition = ' -mb-2 '; switch (size) { case 'sm': avatarSize = ' w-7 h-7 text-sm '; - fallbackPosition = ' -mb-2 '; - break; - case 'md': - avatarSize = ' w-10 h-10 text-md '; - fallbackPosition = ' -mb-2 '; break; case 'lg': - avatarSize = ' w-12 h-12 text-md '; - fallbackPosition = ' -mb-2 '; + avatarSize = ' w-12 h-12 text-xl '; break; case 'xl': avatarSize = ' w-16 h-16 text-2xl '; @@ -44,7 +46,7 @@ const Avatar: React.FC = ({image, label, labelColor, bgColor, size, ); } else if (label) { return ( -
{label}
+
{label}
); } else { return ( diff --git a/ghost/admin-x-settings/src/admin-x-ds/global/Icon.tsx b/ghost/admin-x-settings/src/admin-x-ds/global/Icon.tsx index 8ae835d215..fc1a9860b5 100644 --- a/ghost/admin-x-settings/src/admin-x-ds/global/Icon.tsx +++ b/ghost/admin-x-settings/src/admin-x-ds/global/Icon.tsx @@ -22,7 +22,7 @@ function useDynamicSVGImport( const importIcon = async (): Promise => { try { ImportedIconRef.current = ( - await import(`../../assets/icons/${name}.svg`) + await import(`../assets/icons/${name}.svg`) ).ReactComponent; onCompleted?.(name, ImportedIconRef.current); } catch (err: any) { diff --git a/ghost/admin-x-settings/src/assets/react.svg b/ghost/admin-x-settings/src/assets/react.svg deleted file mode 100644 index 6c87de9bb3..0000000000 --- a/ghost/admin-x-settings/src/assets/react.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/ghost/admin-x-settings/src/components/settings/general/LockSite.tsx b/ghost/admin-x-settings/src/components/settings/general/LockSite.tsx index 0a105fb8d8..b4cc95a20c 100644 --- a/ghost/admin-x-settings/src/components/settings/general/LockSite.tsx +++ b/ghost/admin-x-settings/src/components/settings/general/LockSite.tsx @@ -1,3 +1,4 @@ +import Icon from '../../../admin-x-ds/global/Icon'; import Link from '../../../admin-x-ds/global/Link'; import React from 'react'; import SettingGroup from '../../../admin-x-ds/settings/SettingGroup'; @@ -5,8 +6,6 @@ import SettingGroupContent from '../../../admin-x-ds/settings/SettingGroupConten import TextField from '../../../admin-x-ds/global/TextField'; import Toggle from '../../../admin-x-ds/global/Toggle'; import useSettingGroup from '../../../hooks/useSettingGroup'; -import {ReactComponent as LockedIcon} from '../../../assets/icons/lock-locked.svg'; -import {ReactComponent as UnLockedIcon} from '../../../assets/icons/lock-unlocked.svg'; const LockSite: React.FC = () => { const { @@ -35,12 +34,12 @@ const LockSite: React.FC = () => { key: 'private', value: passwordEnabled ? (
- + Your site is password protected
) : (
- + Your site is not password protected
) diff --git a/ghost/admin-x-settings/src/components/settings/general/Metadata.tsx b/ghost/admin-x-settings/src/components/settings/general/Metadata.tsx index f9e2cccb0c..f3494afbf6 100644 --- a/ghost/admin-x-settings/src/components/settings/general/Metadata.tsx +++ b/ghost/admin-x-settings/src/components/settings/general/Metadata.tsx @@ -4,8 +4,8 @@ import SettingGroup from '../../../admin-x-ds/settings/SettingGroup'; import SettingGroupContent from '../../../admin-x-ds/settings/SettingGroupContent'; import TextField from '../../../admin-x-ds/global/TextField'; import useSettingGroup from '../../../hooks/useSettingGroup'; -import {ReactComponent as GoogleLogo} from '../../../assets/images/google-logo.svg'; -import {ReactComponent as MagnifyingGlass} from '../../../assets/icons/magnifying-glass.svg'; +import {ReactComponent as GoogleLogo} from '../../../admin-x-ds/assets/images/google-logo.svg'; +import {ReactComponent as MagnifyingGlass} from '../../../admin-x-ds/assets/icons/magnifying-glass.svg'; const Metadata: React.FC = () => { const { diff --git a/ghost/admin-x-settings/src/components/settings/general/Users.tsx b/ghost/admin-x-settings/src/components/settings/general/Users.tsx index 2b88b2fb28..d195282951 100644 --- a/ghost/admin-x-settings/src/components/settings/general/Users.tsx +++ b/ghost/admin-x-settings/src/components/settings/general/Users.tsx @@ -24,7 +24,7 @@ const Owner: React.FC<{user: User}> = ({user}) => { return (
- +
{user.name} — Owner Edit {user.email} @@ -58,7 +58,7 @@ const UsersList: React.FC = ({users, updateUser}) => { showDetailModal(user)}/>} - avatar={()} + avatar={()} detail={user.email} hideActions={true} id={`list-item-${user.id}`} diff --git a/ghost/admin-x-settings/src/components/settings/general/modals/UserDetailModal.tsx b/ghost/admin-x-settings/src/components/settings/general/modals/UserDetailModal.tsx index 1317ed3439..2f69357f78 100644 --- a/ghost/admin-x-settings/src/components/settings/general/modals/UserDetailModal.tsx +++ b/ghost/admin-x-settings/src/components/settings/general/modals/UserDetailModal.tsx @@ -255,7 +255,7 @@ const UserDetailModal:React.FC = ({user, updateUser}) => {
- + {user.name} Administrator
diff --git a/ghost/admin-x-settings/src/styles/demo.css b/ghost/admin-x-settings/src/styles/demo.css index 9acc078b99..7b78e515c9 100644 --- a/ghost/admin-x-settings/src/styles/demo.css +++ b/ghost/admin-x-settings/src/styles/demo.css @@ -8,7 +8,7 @@ @layer base { @font-face { font-family: "Inter"; - src: url("./src/assets/fonts/Inter.ttf") format("truetype-variations"); + src: url("./src/admin-x-ds/assets/fonts/Inter.ttf") format("truetype-variations"); font-weight: 100 900; }