diff --git a/ghost/admin-x-settings/src/components/design-system/globals/BlockHeading.stories.tsx b/ghost/admin-x-settings/src/components/design-system/globals/BlockHeading.stories.tsx new file mode 100644 index 0000000000..5be8cb55d6 --- /dev/null +++ b/ghost/admin-x-settings/src/components/design-system/globals/BlockHeading.stories.tsx @@ -0,0 +1,32 @@ +import type {Meta, StoryObj} from '@storybook/react'; + +import BlockHeading from './BlockHeading'; + +const meta = { + title: 'Global / Block heading', + component: BlockHeading, + tags: ['autodocs'] +} satisfies Meta; + +export default meta; +type Story = StoryObj; + +export const Default: Story = { + args: { + title: 'Block' + } +}; + +export const Grey: Story = { + args: { + title: 'Block', + color: 'grey' + } +}; + +export const Separator: Story = { + args: { + title: 'Block', + separator: true + } +}; \ No newline at end of file diff --git a/ghost/admin-x-settings/src/components/design-system/globals/BlockHeading.tsx b/ghost/admin-x-settings/src/components/design-system/globals/BlockHeading.tsx new file mode 100644 index 0000000000..0c6c73bde9 --- /dev/null +++ b/ghost/admin-x-settings/src/components/design-system/globals/BlockHeading.tsx @@ -0,0 +1,33 @@ +import React from 'react'; + +type BlockHeadingColors = 'black' | 'grey'; + +interface BlockHeadingProps { + title: string, + color?: BlockHeadingColors, + separator?: boolean +} + +const BlockHeading: React.FC = ({title, color, separator, ...props}) => { + let styles = ''; + + switch (color) { + case 'grey': + styles += 'text-grey-700 '; + break; + + default: + styles += 'text-black '; + break; + } + + if (separator) { + styles += 'pb-1 border-b border-grey-300'; + } + + return ( +

{title}

+ ); +}; + +export default BlockHeading; \ No newline at end of file