Added basic Tiers form (#17304)

refs. https://github.com/TryGhost/Product/issues/3580

Static version of Tiers/Basic properties form was needed so it can be
wired up.

apps/admin-x-settings/src/admin-x-ds/global/Heading.tsx

@@ -37,7 +37,7 @@ type HeadingLabelProps = {
     level?: never,
     grey?: boolean } & HeadingBaseProps & React.LabelHTMLAttributes<HTMLLabelElement>
 
-export const Heading6Styles = 'text-2xs font-semibold uppercase tracking-wide';
+export const Heading6Styles = 'text-2xs font-semibold uppercase tracking-wider';
 
 const Heading: React.FC<Heading1to5Props | Heading6Props | HeadingLabelProps> = ({
     level,

apps/admin-x-settings/src/admin-x-ds/global/Separator.tsx

@@ -4,7 +4,7 @@ interface SeparatorProps {
     className?: string;
 }
 
-const Separator: React.FC<SeparatorProps> = ({className = 'border-grey-300'}) => {
+const Separator: React.FC<SeparatorProps> = ({className = 'border-grey-200'}) => {
     return <hr className={className} />;
 };
 

apps/admin-x-settings/src/admin-x-ds/global/form/Form.tsx

@@ -1,7 +1,9 @@
 import React from 'react';
+import Separator from '../Separator';
 import clsx from 'clsx';
 
 interface FormProps {
+    title?: string;
     gap?: 'sm' | 'md' | 'lg';
     marginTop?: boolean;
     marginBottom?: boolean;
@@ -12,6 +14,7 @@ interface FormProps {
  * A container to group form elements
  */
 const Form: React.FC<FormProps> = ({
+    title,
     gap = 'md',
     marginTop = false,
     marginBottom = true,
@@ -44,6 +47,11 @@ const Form: React.FC<FormProps> = ({
 
     return (
         <div className={classes}>
+            {title &&
+            (<div className='-mb-4'>
+                <div className='text-sm font-semibold text-grey-800'>{title}</div>
+                <Separator />
+            </div>)}
             {children}
         </div>
     );

apps/admin-x-settings/src/admin-x-ds/global/form/TextField.tsx

@@ -6,6 +6,7 @@ import clsx from 'clsx';
 export type TextFieldProps = React.InputHTMLAttributes<HTMLInputElement> & {
     inputRef?: React.RefObject<HTMLInputElement>;
     title?: string;
+    titleColor?: 'auto' | 'black' | 'grey';
     hideTitle?: boolean;
     type?: React.InputHTMLAttributes<HTMLInputElement>['type'];
     value?: string;
@@ -27,6 +28,7 @@ const TextField: React.FC<TextFieldProps> = ({
     type = 'text',
     inputRef,
     title,
+    titleColor = 'auto',
     hideTitle,
     value,
     error,
@@ -68,9 +70,15 @@ const TextField: React.FC<TextFieldProps> = ({
         {...props} />;
 
     if (title || hint) {
+        let titleGrey = false;
+        if (titleColor === 'auto') {
+            titleGrey = value ? true : false;
+        } else {
+            titleGrey = titleColor === 'grey' ? true : false;
+        }
         return (
             <div className={`flex flex-col ${containerClassName}`}>
-                {title && <Heading className={hideTitle ? 'sr-only' : ''} grey={value ? true : false} htmlFor={id} useLabelTag={true}>{title}</Heading>}
+                {title && <Heading className={hideTitle ? 'sr-only' : ''} grey={titleGrey} htmlFor={id} useLabelTag={true}>{title}</Heading>}
                 {field}
                 {hint && <Hint className={hintClassName} color={error ? 'red' : ''}>{hint}</Hint>}
             </div>

apps/admin-x-settings/src/admin-x-ds/global/form/Toggle.tsx

@@ -6,7 +6,6 @@ type ToggleSizes = 'sm' | 'md' | 'lg';
 type ToggleDirections = 'ltr' | 'rtl';
 
 interface ToggleProps {
-    color?: string;
     checked?: boolean;
     disabled?: boolean;
     error?: boolean;

apps/admin-x-settings/src/admin-x-ds/global/modal/Modal.tsx

@@ -211,7 +211,7 @@ const Modal: React.FC<ModalProps> = ({
             <section className={modalClasses} data-testid={testId} style={modalStyles}>
                 <div className={contentClasses}>
                     <div className='h-full'>
-                        {title && <Heading level={4}>{title}</Heading>}
+                        {title && <Heading level={3}>{title}</Heading>}
                         {children}
                     </div>
                 </div>

apps/admin-x-settings/src/admin-x-ds/settings/SettingSectionHeader.tsx

@@ -6,7 +6,7 @@ interface Props {
 }
 
 const SettingSectionHeader: React.FC<Props> = ({title, sticky = false}) => {
-    let styles = 'pb-4 text-2xs font-semibold uppercase tracking-wide text-grey-700 z-10 ';
+    let styles = 'pb-4 text-2xs font-semibold uppercase tracking-wider text-grey-700 z-10 ';
     if (sticky) {
         styles += ' sticky top-0 -mt-4 pt-4 bg-white';
     }

apps/admin-x-settings/src/components/settings/membership/tiers/TierDetailModal.tsx

@@ -1,8 +1,11 @@
 import Form from '../../../../admin-x-ds/global/form/Form';
+import Heading from '../../../../admin-x-ds/global/Heading';
 import Modal from '../../../../admin-x-ds/global/modal/Modal';
 import NiceModal from '@ebay/nice-modal-react';
 import React from 'react';
+import TextField from '../../../../admin-x-ds/global/form/TextField';
 import TierDetailPreview from './TierDetailPreview';
+import Toggle from '../../../../admin-x-ds/global/form/Toggle';
 import useRouting from '../../../../hooks/useRouting';
 
 interface TierDetailModalProps {
@@ -19,10 +22,47 @@ const TierDetailModal: React.FC<TierDetailModalProps> = () => {
         size='lg'
         title='Tier'
         stickyFooter>
-        <div className='mt-5 flex items-start'>
-            <div className='grow'>
-                <Form>
-                    Tier form
+        <div className='mt-8 flex items-start gap-10'>
+            <div className='flex grow flex-col gap-10'>
+                <Form title='Basic'>
+                    <TextField
+                        placeholder='Bronze'
+                        title='Name'
+                    />
+                    <TextField
+                        placeholder='Full access to premium content'
+                        title='Description'
+                    />
+                    <div className='flex gap-10'>
+                        <div className='flex basis-1/2 flex-col gap-2'>
+                            <TextField
+                                placeholder='1'
+                                title='Prices'
+                                value='5'
+                            />
+                            <TextField
+                                placeholder='10'
+                                value='50'
+                            />
+                        </div>
+                        <div className='basis-1/2'>
+                            <div className='flex justify-between'>
+                                <Heading level={6} grey>Add a free trial</Heading>
+                                <Toggle onChange={() => {}} />
+                            </div>
+                            <TextField
+                                hint={<>
+                                    Members will be subscribed at full price once the trial ends. <a href="https://ghost.org/" rel="noreferrer" target="_blank">Learn more</a>
+                                </>}
+                                placeholder='0'
+                                disabled
+                            />
+                        </div>
+                    </div>
+                </Form>
+
+                <Form title='Benefits'>
+                    TBD
                 </Form>
             </div>
             <div className='sticky top-[77px] shrink-0 basis-[380px]'>

apps/admin-x-settings/tailwind.config.cjs

@@ -214,7 +214,7 @@ module.exports = {
                 full: '9999px'
             },
             fontSize: {
-                '2xs': '1.05rem',
+                '2xs': '0.95rem',
                 base: '1.5rem',
                 xs: '1.2rem',
                 sm: '1.35rem',