From 61e506808182e3e54c22e9ae0bd745b29758c8b1 Mon Sep 17 00:00:00 2001 From: Peter Zimon Date: Fri, 19 May 2023 06:13:22 +0200 Subject: [PATCH] Fixed type antipattern in Admin X Settings refs. https://github.com/TryGhost/Team/issues/3150 --- .../src/admin-x-ds/global/Button.stories.tsx | 12 +++---- .../src/admin-x-ds/global/Button.tsx | 33 +++++++------------ .../admin-x-ds/global/ButtonGroup.stories.tsx | 11 +++---- .../settings/SettingGroup.stories.tsx | 3 +- .../src/admin-x-ds/settings/SettingGroup.tsx | 6 ++-- .../settings/SettingGroupHeader.stories.tsx | 11 ++----- .../settings/general/PublicationLanguage.tsx | 3 +- .../components/settings/general/TimeZone.tsx | 3 +- ghost/admin-x-settings/tailwind.config.cjs | 3 ++ 9 files changed, 32 insertions(+), 53 deletions(-) diff --git a/ghost/admin-x-settings/src/admin-x-ds/global/Button.stories.tsx b/ghost/admin-x-settings/src/admin-x-ds/global/Button.stories.tsx index c29dfe05d1..de3c1467a8 100644 --- a/ghost/admin-x-settings/src/admin-x-ds/global/Button.stories.tsx +++ b/ghost/admin-x-settings/src/admin-x-ds/global/Button.stories.tsx @@ -1,7 +1,6 @@ import type {Meta, StoryObj} from '@storybook/react'; import Button from './Button'; -import {ButtonColors} from './Button'; const meta = { title: 'Global / Button', @@ -9,8 +8,7 @@ const meta = { tags: ['autodocs'], argTypes: { color: { - control: 'select', - options: ButtonColors + control: 'select' } } } satisfies Meta; @@ -27,28 +25,28 @@ export const Default: Story = { export const Black: Story = { args: { label: 'Button', - color: ButtonColors.Black + color: 'black' } }; export const Green: Story = { args: { label: 'Button', - color: ButtonColors.Green + color: 'green' } }; export const Red: Story = { args: { label: 'Button', - color: ButtonColors.Red + color: 'red' } }; export const Link: Story = { args: { label: 'Button', - color: ButtonColors.Green, + color: 'green', link: true } }; \ No newline at end of file diff --git a/ghost/admin-x-settings/src/admin-x-ds/global/Button.tsx b/ghost/admin-x-settings/src/admin-x-ds/global/Button.tsx index 4b54d74e39..a7cd699b76 100644 --- a/ghost/admin-x-settings/src/admin-x-ds/global/Button.tsx +++ b/ghost/admin-x-settings/src/admin-x-ds/global/Button.tsx @@ -1,17 +1,6 @@ import React from 'react'; -export interface ButtonColorsType { - Clear: string; - Black: string; - Green: string; - Red: string; -} -export const ButtonColors: ButtonColorsType = { - Clear: 'Clear', - Black: 'Black', - Green: 'Green', - Red: 'Red' -}; +export type ButtonColor = 'clear' | 'black' | 'green' | 'red'; export interface IButton { label: string; @@ -33,25 +22,25 @@ const Button: React.FC = ({ ...props }) => { if (!color) { - color = ButtonColors.Clear; + color = 'clear'; } - let styles = 'flex items-center justify-center rounded-sm text-sm'; - styles += ((link && color !== ButtonColors.Clear && color !== ButtonColors.Black) || (!link && color !== ButtonColors.Clear)) ? ' font-bold' : ' font-semibold'; + let styles = 'transition flex items-center justify-center rounded-sm text-sm'; + styles += ((link && color !== 'clear' && color !== 'black') || (!link && color !== 'clear')) ? ' font-bold' : ' font-semibold'; styles += !link ? ' px-4 h-9' : ''; switch (color) { - case ButtonColors.Black: - styles += link ? ' text-black' : ' bg-black text-white'; + case 'black': + styles += link ? ' text-black hover:text-grey-800' : ' bg-black text-white hover:bg-grey-900'; break; - case ButtonColors.Green: - styles += link ? ' text-green' : ' bg-green text-white'; + case 'green': + styles += link ? ' text-green hover:text-green-400' : ' bg-green text-white hover:bg-green-400'; break; - case ButtonColors.Red: - styles += link ? ' text-red' : ' bg-red text-white'; + case 'red': + styles += link ? ' text-red hover:text-red-400' : ' bg-red text-white hover:bg-red-400'; break; default: - styles += link ? ' text-black' : ' bg-transparent text-black'; + styles += link ? ' text-black hover:text-grey-800' : ' bg-transparent text-black hover:text-grey-800'; break; } diff --git a/ghost/admin-x-settings/src/admin-x-ds/global/ButtonGroup.stories.tsx b/ghost/admin-x-settings/src/admin-x-ds/global/ButtonGroup.stories.tsx index 2fbf9f4d47..046f1a24b5 100644 --- a/ghost/admin-x-settings/src/admin-x-ds/global/ButtonGroup.stories.tsx +++ b/ghost/admin-x-settings/src/admin-x-ds/global/ButtonGroup.stories.tsx @@ -1,7 +1,6 @@ import type {Meta, StoryObj} from '@storybook/react'; import ButtonGroup from './ButtonGroup'; -import {ButtonColors} from './Button'; const ButtonGroupMeta = { title: 'Global / Button Group', @@ -16,13 +15,12 @@ type Story = StoryObj; const defaultButtons = [ { label: 'Cancel', - key: 'cancel', - color: ButtonColors.Clear + key: 'cancel' }, { label: 'Save', key: 'save', - color: ButtonColors.Black + color: 'black' } ]; @@ -36,13 +34,12 @@ export const Default: Story = { const linkButtons = [ { label: 'Cancel', - key: 'cancel', - color: ButtonColors.Clear + key: 'cancel' }, { label: 'Save', key: 'save', - color: ButtonColors.Green + color: 'green' } ]; diff --git a/ghost/admin-x-settings/src/admin-x-ds/settings/SettingGroup.stories.tsx b/ghost/admin-x-settings/src/admin-x-ds/settings/SettingGroup.stories.tsx index 37eadbb29d..2c6c8fd1ad 100644 --- a/ghost/admin-x-settings/src/admin-x-ds/settings/SettingGroup.stories.tsx +++ b/ghost/admin-x-settings/src/admin-x-ds/settings/SettingGroup.stories.tsx @@ -9,7 +9,6 @@ import SettingGroup from './SettingGroup'; import SettingGroupHeader from './SettingGroupHeader'; import SettingGroupInputs from './SettingGroupInputs'; import SettingGroupValues from './SettingGroupValues'; -import {ButtonColors} from '../global/Button'; const meta = { title: 'Settings / Setting Group', @@ -21,7 +20,7 @@ const meta = { export default meta; type Story = StoryObj; -const customButtons = ; +const customButtons = ; const customHeader = ; const singleColContent = ; const twoColView = ; diff --git a/ghost/admin-x-settings/src/admin-x-ds/settings/SettingGroup.tsx b/ghost/admin-x-settings/src/admin-x-ds/settings/SettingGroup.tsx index 209d0b6e87..6bf3a972da 100644 --- a/ghost/admin-x-settings/src/admin-x-ds/settings/SettingGroup.tsx +++ b/ghost/admin-x-settings/src/admin-x-ds/settings/SettingGroup.tsx @@ -1,7 +1,7 @@ import ButtonGroup from '../global/ButtonGroup'; import React, {useState} from 'react'; import SettingGroupHeader from './SettingGroupHeader'; -import {ButtonColors, IButton} from '../global/Button'; +import {IButton} from '../global/Button'; export type TSettingGroupStates = 'view' | 'edit' | 'unsaved'; @@ -64,7 +64,7 @@ const SettingGroup: React.FC = ({title, description, state, c { label: 'Edit', key: 'edit', - color: ButtonColors.Green, + color: 'green', onClick: handleEdit } ]; @@ -82,7 +82,7 @@ const SettingGroup: React.FC = ({title, description, state, c { label: 'Save', key: 'save', - color: ButtonColors.Green, + color: 'green', onClick: handleSave } ); diff --git a/ghost/admin-x-settings/src/admin-x-ds/settings/SettingGroupHeader.stories.tsx b/ghost/admin-x-settings/src/admin-x-ds/settings/SettingGroupHeader.stories.tsx index 266f9a576f..ead4b9dbdd 100644 --- a/ghost/admin-x-settings/src/admin-x-ds/settings/SettingGroupHeader.stories.tsx +++ b/ghost/admin-x-settings/src/admin-x-ds/settings/SettingGroupHeader.stories.tsx @@ -4,7 +4,6 @@ import ButtonGroup from '../global/ButtonGroup'; import SettingGroupHeader from './SettingGroupHeader'; import Heading from '../global/Heading'; -import {ButtonColors} from '../global/Button'; const meta = { title: 'Settings / Setting Group Header', @@ -20,11 +19,7 @@ export const Default: Story = { title: 'Section group title', description: 'Section group description', children: } @@ -38,7 +33,7 @@ export const Editing: Story = { buttons={ [ {label: 'Cancel'}, - {label: 'Save', color: ButtonColors.Green} + {label: 'Save', color: 'green'} ] } link={true} @@ -56,7 +51,7 @@ export const CustomHeader: Story = { cristofer@example.com diff --git a/ghost/admin-x-settings/src/components/settings/general/PublicationLanguage.tsx b/ghost/admin-x-settings/src/components/settings/general/PublicationLanguage.tsx index 305a8b6b1e..6670f149d5 100644 --- a/ghost/admin-x-settings/src/components/settings/general/PublicationLanguage.tsx +++ b/ghost/admin-x-settings/src/components/settings/general/PublicationLanguage.tsx @@ -3,7 +3,6 @@ import React, {useContext} from 'react'; import SettingGroup from '../../../admin-x-ds/settings/SettingGroup'; import SettingGroupHeader from '../../../admin-x-ds/settings/SettingGroupHeader'; import SettingGroupValues from '../../../admin-x-ds/settings/SettingGroupValues'; -import {ButtonColors} from '../../../admin-x-ds/global/Button'; import {SettingsContext} from '../../SettingsProvider'; import {getSettingValue} from '../../../utils/helpers'; @@ -13,7 +12,7 @@ const PublicationLanguage: React.FC = () => { const buttons = [ { label: 'Edit', - color: ButtonColors.Green + color: 'green' } ]; diff --git a/ghost/admin-x-settings/src/components/settings/general/TimeZone.tsx b/ghost/admin-x-settings/src/components/settings/general/TimeZone.tsx index 6e56b0c5e3..a33fa925ed 100644 --- a/ghost/admin-x-settings/src/components/settings/general/TimeZone.tsx +++ b/ghost/admin-x-settings/src/components/settings/general/TimeZone.tsx @@ -3,7 +3,6 @@ import React, {useContext, useEffect, useState} from 'react'; import SettingGroup from '../../../admin-x-ds/settings/SettingGroup'; import SettingGroupHeader from '../../../admin-x-ds/settings/SettingGroupHeader'; import SettingGroupValues from '../../../admin-x-ds/settings/SettingGroupValues'; -import {ButtonColors} from '../../../admin-x-ds/global/Button'; import {SettingsContext} from '../../SettingsProvider'; import {getLocalTime, getSettingValue} from '../../../utils/helpers'; @@ -25,7 +24,7 @@ const TimeZone: React.FC = () => { const buttons = [ { label: 'Edit', - color: ButtonColors.Green + color: 'green' } ]; diff --git a/ghost/admin-x-settings/tailwind.config.cjs b/ghost/admin-x-settings/tailwind.config.cjs index e5e0f925de..d4a23fe584 100644 --- a/ghost/admin-x-settings/tailwind.config.cjs +++ b/ghost/admin-x-settings/tailwind.config.cjs @@ -184,6 +184,9 @@ module.exports = { tight: '1.35em', tighter: '1.25em', supertight: '1.1em' + }, + transition: { + basic: 'all 0.4 ease' } } }