Fixed type antipattern in Admin X Settings

refs. https://github.com/TryGhost/Team/issues/3150

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',
+            control: 'select'
-            options: ButtonColors
         }
     }
 } satisfies Meta<typeof Button>;
@@ -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
     }
 };

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 = {
+export type ButtonColor = 'clear' | 'black' | 'green' | 'red';
-    Clear: 'Clear',
-    Black: 'Black',
-    Green: 'Green',
-    Red: 'Red'
-};
 
 export interface IButton {
     label: string;
@@ -33,25 +22,25 @@ const Button: React.FC<IButton> = ({
     ...props
 }) => {
     if (!color) {
-        color = ButtonColors.Clear;
+        color = 'clear';
     }
     
-    let styles = 'flex items-center justify-center rounded-sm text-sm';
+    let styles = 'transition 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';
+    styles += ((link && color !== 'clear' && color !== 'black') || (!link && color !== 'clear')) ? ' font-bold' : ' font-semibold';
     styles += !link ? ' px-4 h-9' : '';
 
     switch (color) {
-    case ButtonColors.Black:
+    case 'black':
-        styles += link ? ' text-black' : ' bg-black text-white';
+        styles += link ? ' text-black hover:text-grey-800' : ' bg-black text-white hover:bg-grey-900';
         break;
-    case ButtonColors.Green:
+    case 'green':
-        styles += link ? ' text-green' : ' bg-green text-white';
+        styles += link ? ' text-green hover:text-green-400' : ' bg-green text-white hover:bg-green-400';
         break;
-    case ButtonColors.Red:
+    case 'red':
-        styles += link ? ' text-red' : ' bg-red text-white';
+        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;
     }
 

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<typeof ButtonGroupMeta>;
 const defaultButtons = [
     {
         label: 'Cancel',
-        key: 'cancel',
+        key: 'cancel'
-        color: ButtonColors.Clear
     },
     {
         label: 'Save',
         key: 'save',
-        color: ButtonColors.Black
+        color: 'black'
     }
 ];
 
@@ -36,13 +34,12 @@ export const Default: Story = {
 const linkButtons = [
     {
         label: 'Cancel',
-        key: 'cancel',
+        key: 'cancel'
-        color: ButtonColors.Clear
     },
     {
         label: 'Save',
         key: 'save',
-        color: ButtonColors.Green
+        color: 'green'
     }
 ];
 

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<typeof meta>;
 
-const customButtons = <ButtonGroup buttons={[{label: 'My action', color: ButtonColors.Green}]} link={true} />;
+const customButtons = <ButtonGroup buttons={[{label: 'My action', color: 'green'}]} link={true} />;
 const customHeader = <SettingGroupHeader {...SettingGroupHeaderStories.CustomHeader.args} />;
 const singleColContent = <SettingGroupValues {...SettingGroupValueStories.SingleColumn.args} />;
 const twoColView = <SettingGroupValues {...SettingGroupValueStories.TwoColumns.args} />;

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<SettingGroupProps> = ({title, description, state, c
         {
             label: 'Edit',
             key: 'edit',
-            color: ButtonColors.Green,
+            color: 'green',
             onClick: handleEdit
         }
     ];
@@ -82,7 +82,7 @@ const SettingGroup: React.FC<SettingGroupProps> = ({title, description, state, c
             {
                 label: 'Save',
                 key: 'save',
-                color: ButtonColors.Green,
+                color: 'green',
                 onClick: handleSave
             }
         );

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: <ButtonGroup 
-            buttons={
+            buttons={[{label: 'Edit', color: 'green'}]} 
-                [
-                    {label: 'Edit', color: ButtonColors.Green}
-                ]
-            } 
             link={true} 
         />
     }
@@ -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 = {
                     <span className='text-xs text-grey-500'>cristofer@example.com</span>
                 </div>
                 <ButtonGroup 
-                    buttons={[{label: 'Invite users', color: ButtonColors.Green}]} 
+                    buttons={[{label: 'Invite users', color: 'green'}]} 
                     link={true} 
                 />
             </>

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'
         }
     ];
 

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'
         }
     ];
 

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'
             }
         }
     }