mirror of
https://github.com/TryGhost/Ghost.git
synced 2025-01-20 22:42:53 -05:00
Updated Hint component for custom react node
refs https://github.com/TryGhost/Team/issues/3151 - updates hint to apply default styling to custom react nodes as well - cleans up hint usage for publication language - updates hint story to include new option
This commit is contained in:
parent
53ae2ecf4c
commit
a588ace346
3 changed files with 15 additions and 15 deletions
|
@ -15,4 +15,14 @@ export const Default: Story = {
|
|||
args: {
|
||||
children: 'This is a hint'
|
||||
}
|
||||
};
|
||||
|
||||
export const UsingReactNode: Story = {
|
||||
args: {
|
||||
children: (
|
||||
<>
|
||||
This is a <strong>bold</strong> hint with <a className='text-green-400' href="https://ghost.org">a link</a>
|
||||
</>
|
||||
)
|
||||
}
|
||||
};
|
|
@ -10,19 +10,9 @@ const Hint: React.FC<HintProps> = ({children, color, ...props}) => {
|
|||
return null;
|
||||
}
|
||||
|
||||
if (typeof children === 'string') {
|
||||
return (
|
||||
<span className={`mt-2 inline-block text-xs ${color ? `text-${color}` : `text-grey-700`}`} {...props}>{children}</span>
|
||||
);
|
||||
}
|
||||
|
||||
if (React.isValidElement(children)) {
|
||||
return (
|
||||
<span className={`mt-2 inline-block text-xs ${color ? `text-${color}` : `text-grey-700`}`} {...props}>{children}</span>
|
||||
);
|
||||
}
|
||||
|
||||
return null;
|
||||
return (
|
||||
<span className={`mt-2 inline-block text-xs ${color ? `text-${color}` : `text-grey-700`}`} {...props}>{children}</span>
|
||||
);
|
||||
};
|
||||
|
||||
export default Hint;
|
||||
|
|
|
@ -46,10 +46,10 @@ const PublicationLanguage: React.FC = () => {
|
|||
];
|
||||
|
||||
const hint = (
|
||||
<p className={`mt-2 inline-block text-xs text-grey-700`}>
|
||||
<>
|
||||
Default: English (<strong>en</strong>); find out more about
|
||||
<a className='text-green-400' href="https://ghost.org/docs/faq/translation/" rel="noopener noreferrer" target="_blank"> using Ghost in other languages</a>
|
||||
</p>
|
||||
</>
|
||||
);
|
||||
|
||||
const inputFields = (
|
||||
|
|
Loading…
Add table
Reference in a new issue