Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-01-20 22:42:53 -05:00
Code Issues Activity

Added separator to checkbox and radio buttons

Browse source 
refs. https://github.com/TryGhost/Team/issues/3150
This commit is contained in:
Peter Zimon 2023-05-22 10:53:24 +02:00
parent 462f7a402b
commit 8f6d94cd5d
4 changed files with 67 additions and 38 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
ghost/admin-x-settings/src/admin-x-ds/global/Checkbox.stories.tsx
View file

@ -32,3 +32,13 @@ export const WithTitleAndHint: Story = {
checked: true checked: true
} }
}; };
export const WithSeparator: Story = {
args: {
title: 'Title',
label: 'Checkbox 1',
hint: 'Here\'s some hint',
checked: true,
separator: true
}
};

9
ghost/admin-x-settings/src/admin-x-ds/global/Checkbox.tsx
View file

@ -1,6 +1,7 @@
import Heading from './Heading'; import Heading from './Heading';
import Hint from './Hint'; import Hint from './Hint';
import React, {useEffect, useState} from 'react'; import React, {useEffect, useState} from 'react';
import Separator from './Separator';
interface CheckboxProps { interface CheckboxProps {
id: string; id: string;
@ -11,9 +12,10 @@ interface CheckboxProps {
error?:boolean; error?:boolean;
hint?: React.ReactNode; hint?: React.ReactNode;
checked?: boolean; checked?: boolean;
separator?: boolean;
} }
const Checkbox: React.FC<CheckboxProps> = ({id, title, label, value, onChange, error, hint, checked}) => { const Checkbox: React.FC<CheckboxProps> = ({id, title, label, value, onChange, error, hint, checked, separator}) => {
const [isChecked, setIsChecked] = useState(checked); const [isChecked, setIsChecked] = useState(checked);
useEffect(() => { useEffect(() => {
@ -27,7 +29,8 @@ const Checkbox: React.FC<CheckboxProps> = ({id, title, label, value, onChange, e
}; };
return ( return (
<div className='flex flex-col gap-1'> <div>
<div className={`flex flex-col gap-1 ${separator && 'pb-2'}`}>
{title && <Heading grey={true} level={6}>{title}</Heading>} {title && <Heading grey={true} level={6}>{title}</Heading>}
<label className={`flex cursor-pointer items-start ${title && '-mb-1 mt-1'}`} htmlFor={id}> <label className={`flex cursor-pointer items-start ${title && '-mb-1 mt-1'}`} htmlFor={id}>
<input <input
@ -44,6 +47,8 @@ const Checkbox: React.FC<CheckboxProps> = ({id, title, label, value, onChange, e
</div> </div>
</label> </label>
</div> </div>
{(separator || error) && <Separator color={error ? 'red' : ''} />}
</div>
); );
}; };

9
ghost/admin-x-settings/src/admin-x-ds/global/Radio.stories.tsx
View file

@ -55,3 +55,12 @@ export const OptionHints: Story = {
defaultSelectedOption: 'option-1' defaultSelectedOption: 'option-1'
} }
}; };
export const WithSeparator: Story = {
args: {
title: 'Title',
options: radioOptionsWithHints,
defaultSelectedOption: 'option-1',
separator: true
}
};

9
ghost/admin-x-settings/src/admin-x-ds/global/Radio.tsx
View file

@ -1,6 +1,7 @@
import Heading from './Heading'; import Heading from './Heading';
import Hint from './Hint'; import Hint from './Hint';
import React, {useEffect, useState} from 'react'; import React, {useEffect, useState} from 'react';
import Separator from './Separator';
export interface RadioOption { export interface RadioOption {
value: string; value: string;
@ -16,9 +17,10 @@ interface RadioProps {
error?:boolean; error?:boolean;
hint?: React.ReactNode; hint?: React.ReactNode;
defaultSelectedOption?: string; defaultSelectedOption?: string;
separator?: boolean;
} }
const Radio: React.FC<RadioProps> = ({id, title, options, onSelect, error, hint, defaultSelectedOption}) => { const Radio: React.FC<RadioProps> = ({id, title, options, onSelect, error, hint, defaultSelectedOption, separator}) => {
const [selectedOption, setSelectedOption] = useState(defaultSelectedOption); const [selectedOption, setSelectedOption] = useState(defaultSelectedOption);
useEffect(() => { useEffect(() => {
@ -34,7 +36,8 @@ const Radio: React.FC<RadioProps> = ({id, title, options, onSelect, error, hint,
}; };
return ( return (
<div className='flex flex-col gap-1'> <div>
<div className={`flex flex-col gap-1 ${separator && 'pb-2'}`}>
{title && <Heading grey={true} level={6}>{title}</Heading>} {title && <Heading grey={true} level={6}>{title}</Heading>}
{options.map(option => ( {options.map(option => (
<label key={option.value} className={`flex cursor-pointer items-start ${title && '-mb-1 mt-1'}`} htmlFor={option.value}> <label key={option.value} className={`flex cursor-pointer items-start ${title && '-mb-1 mt-1'}`} htmlFor={option.value}>
@ -55,6 +58,8 @@ const Radio: React.FC<RadioProps> = ({id, title, options, onSelect, error, hint,
))} ))}
{hint && <Hint color={error ? 'red' : ''}>{hint}</Hint>} {hint && <Hint color={error ? 'red' : ''}>{hint}</Hint>}
</div> </div>
{(separator || error) && <Separator color={error ? 'red' : ''} />}
</div>
); );
}; };