0
Fork 0
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:
Rishabh 2023-05-19 21:19:29 +05:30
parent 53ae2ecf4c
commit a588ace346
3 changed files with 15 additions and 15 deletions

View file

@ -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>
</>
)
}
};

View file

@ -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;

View file

@ -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 = (