diff --git a/ghost/admin-x-settings/src/components/Sidebar.tsx b/ghost/admin-x-settings/src/components/Sidebar.tsx index f9255817bd..acaa4e0266 100644 --- a/ghost/admin-x-settings/src/components/Sidebar.tsx +++ b/ghost/admin-x-settings/src/components/Sidebar.tsx @@ -5,7 +5,7 @@ import SettingNavSection from './design-system/settings/SettingNavSection'; const Sidebar: React.FC = () => { return (
- + @@ -17,25 +17,25 @@ const Sidebar: React.FC = () => { - + - + - + - + diff --git a/ghost/admin-x-settings/src/components/design-system/docs/Install.mdx b/ghost/admin-x-settings/src/components/design-system/docs/Install.mdx new file mode 100644 index 0000000000..02c9b8117e --- /dev/null +++ b/ghost/admin-x-settings/src/components/design-system/docs/Install.mdx @@ -0,0 +1,7 @@ +import { Meta } from '@storybook/blocks'; + + + +# Install + +Work in progress but should be something like `yarn add @tryghost/admin-x-ds` \ No newline at end of file diff --git a/ghost/admin-x-settings/src/components/design-system/docs/Introduction.mdx b/ghost/admin-x-settings/src/components/design-system/docs/Introduction.mdx new file mode 100644 index 0000000000..4feaae087d --- /dev/null +++ b/ghost/admin-x-settings/src/components/design-system/docs/Introduction.mdx @@ -0,0 +1,7 @@ +import { Meta } from '@storybook/blocks'; + + + +# Welcome to Admin X Design System + +Work in progress \ No newline at end of file diff --git a/ghost/admin-x-settings/src/components/design-system/docs/assets/code-brackets.svg b/ghost/admin-x-settings/src/components/design-system/docs/assets/code-brackets.svg new file mode 100644 index 0000000000..73de947760 --- /dev/null +++ b/ghost/admin-x-settings/src/components/design-system/docs/assets/code-brackets.svg @@ -0,0 +1 @@ +illustration/code-brackets \ No newline at end of file diff --git a/ghost/admin-x-settings/src/components/design-system/docs/assets/colors.svg b/ghost/admin-x-settings/src/components/design-system/docs/assets/colors.svg new file mode 100644 index 0000000000..17d58d516e --- /dev/null +++ b/ghost/admin-x-settings/src/components/design-system/docs/assets/colors.svg @@ -0,0 +1 @@ +illustration/colors \ No newline at end of file diff --git a/ghost/admin-x-settings/src/components/design-system/docs/assets/comments.svg b/ghost/admin-x-settings/src/components/design-system/docs/assets/comments.svg new file mode 100644 index 0000000000..6493a139f5 --- /dev/null +++ b/ghost/admin-x-settings/src/components/design-system/docs/assets/comments.svg @@ -0,0 +1 @@ +illustration/comments \ No newline at end of file diff --git a/ghost/admin-x-settings/src/components/design-system/docs/assets/direction.svg b/ghost/admin-x-settings/src/components/design-system/docs/assets/direction.svg new file mode 100644 index 0000000000..65676ac272 --- /dev/null +++ b/ghost/admin-x-settings/src/components/design-system/docs/assets/direction.svg @@ -0,0 +1 @@ +illustration/direction \ No newline at end of file diff --git a/ghost/admin-x-settings/src/components/design-system/docs/assets/flow.svg b/ghost/admin-x-settings/src/components/design-system/docs/assets/flow.svg new file mode 100644 index 0000000000..8ac27db403 --- /dev/null +++ b/ghost/admin-x-settings/src/components/design-system/docs/assets/flow.svg @@ -0,0 +1 @@ +illustration/flow \ No newline at end of file diff --git a/ghost/admin-x-settings/src/components/design-system/docs/assets/plugin.svg b/ghost/admin-x-settings/src/components/design-system/docs/assets/plugin.svg new file mode 100644 index 0000000000..29e5c690c0 --- /dev/null +++ b/ghost/admin-x-settings/src/components/design-system/docs/assets/plugin.svg @@ -0,0 +1 @@ +illustration/plugin \ No newline at end of file diff --git a/ghost/admin-x-settings/src/components/design-system/docs/assets/repo.svg b/ghost/admin-x-settings/src/components/design-system/docs/assets/repo.svg new file mode 100644 index 0000000000..f386ee902c --- /dev/null +++ b/ghost/admin-x-settings/src/components/design-system/docs/assets/repo.svg @@ -0,0 +1 @@ +illustration/repo \ No newline at end of file diff --git a/ghost/admin-x-settings/src/components/design-system/docs/assets/stackalt.svg b/ghost/admin-x-settings/src/components/design-system/docs/assets/stackalt.svg new file mode 100644 index 0000000000..9b7ad27435 --- /dev/null +++ b/ghost/admin-x-settings/src/components/design-system/docs/assets/stackalt.svg @@ -0,0 +1 @@ +illustration/stackalt \ No newline at end of file diff --git a/ghost/admin-x-settings/src/components/design-system/experimental/Introduction.mdx b/ghost/admin-x-settings/src/components/design-system/experimental/Introduction.mdx deleted file mode 100644 index ff7fc71fbf..0000000000 --- a/ghost/admin-x-settings/src/components/design-system/experimental/Introduction.mdx +++ /dev/null @@ -1,213 +0,0 @@ -import { Meta } from '@storybook/blocks'; -import Code from './assets/code-brackets.svg'; -import Colors from './assets/colors.svg'; -import Comments from './assets/comments.svg'; -import Direction from './assets/direction.svg'; -import Flow from './assets/flow.svg'; -import Plugin from './assets/plugin.svg'; -import Repo from './assets/repo.svg'; -import StackAlt from './assets/stackalt.svg'; - - - - - -# Welcome to Storybook - -Storybook helps you build UI components in isolation from your app's business logic, data, and context. -That makes it easy to develop hard-to-reach states. Save these UI states as **stories** to revisit during development, testing, or QA. - -Browse example stories now by navigating to them in the sidebar. -View their code in the `stories` directory to learn how they work. -We recommend building UIs with a [**component-driven**](https://componentdriven.org) process starting with atomic components and ending with pages. - -
Configure
- - - -
Learn
- - - -
- TipEdit the Markdown in{' '} - stories/Introduction.stories.mdx -
diff --git a/ghost/admin-x-settings/src/components/design-system/settings/SettingGroup.stories.tsx b/ghost/admin-x-settings/src/components/design-system/settings/SettingGroup.stories.tsx new file mode 100644 index 0000000000..f6a33de872 --- /dev/null +++ b/ghost/admin-x-settings/src/components/design-system/settings/SettingGroup.stories.tsx @@ -0,0 +1,36 @@ +import type {Meta, StoryObj} from '@storybook/react'; + +import SettingGroup from './SettingGroup'; +import SettingGroupHeader from './SettingGroupHeader'; +import {Default as DefaultGroupHeader} from './SettingGroupHeader.stories' + +const meta = { + title: 'Settings / Setting group', + component: SettingGroup, + tags: ['autodocs'], + decorators: [(_story: any) =>
{_story()}
], +} satisfies Meta; + +export default meta; +type Story = StoryObj; + +export const Default: Story = { + args: { + state: 'view', + children: + } +}; + +export const Editing: Story = { + args: { + state: 'edit', + children: + } +}; + +export const Unsaved: Story = { + args: { + state: 'unsaved', + children: + } +}; \ No newline at end of file diff --git a/ghost/admin-x-settings/src/components/design-system/settings/SettingGroupHeader.stories.tsx b/ghost/admin-x-settings/src/components/design-system/settings/SettingGroupHeader.stories.tsx new file mode 100644 index 0000000000..6f64582aa2 --- /dev/null +++ b/ghost/admin-x-settings/src/components/design-system/settings/SettingGroupHeader.stories.tsx @@ -0,0 +1,29 @@ +import type {Meta, StoryObj} from '@storybook/react'; + +import SettingGroupHeader from './SettingGroupHeader'; +import ButtonGroup from '../globals/ButtonGroup'; +import { ButtonColors } from '../globals/Button'; + +const meta = { + title: 'Settings / Setting group header', + component: SettingGroupHeader, + tags: ['autodocs'] +} satisfies Meta; + +export default meta; +type Story = StoryObj; + +const buttons = [ + { + label: 'Edit', + color: ButtonColors.Green + } +]; + +export const Default: Story = { + args: { + title: 'Section group title', + description: 'Section group description', + children: + } +}; \ No newline at end of file diff --git a/ghost/admin-x-settings/src/components/design-system/settings/SettingNavSection.tsx b/ghost/admin-x-settings/src/components/design-system/settings/SettingNavSection.tsx index 690b212d48..bfea196c1a 100644 --- a/ghost/admin-x-settings/src/components/design-system/settings/SettingNavSection.tsx +++ b/ghost/admin-x-settings/src/components/design-system/settings/SettingNavSection.tsx @@ -2,14 +2,14 @@ import React from 'react'; import SettingSectionHeader from './SettingSectionHeader'; interface Props { - name?: string; + title?: string; children?: React.ReactNode; } -const SettingNavSection: React.FC = ({name, children}) => { +const SettingNavSection: React.FC = ({title, children}) => { return ( <> - {name && } + {title && } {children &&
    {children} diff --git a/ghost/admin-x-settings/src/components/design-system/settings/SettingSection.stories.tsx b/ghost/admin-x-settings/src/components/design-system/settings/SettingSection.stories.tsx new file mode 100644 index 0000000000..2fc52d32ac --- /dev/null +++ b/ghost/admin-x-settings/src/components/design-system/settings/SettingSection.stories.tsx @@ -0,0 +1,27 @@ +import type {Meta, StoryObj} from '@storybook/react'; + +import SettingSection from './SettingSection'; +import SettingGroup from './SettingGroup'; +import * as SettingGroupStories from './SettingGroup.stories'; + +const meta = { + title: 'Settings / Setting section', + component: SettingSection, + tags: ['autodocs'], + decorators: [(_story: any) =>
    {_story()}
    ], +} satisfies Meta; + +export default meta; +type Story = StoryObj; + +export const Default: Story = { + args: { + title: 'Section header', + children: + <> + + + + + } +}; \ No newline at end of file diff --git a/ghost/admin-x-settings/src/components/design-system/settings/SettingSection.tsx b/ghost/admin-x-settings/src/components/design-system/settings/SettingSection.tsx index 895e728814..3e92c3c8b5 100644 --- a/ghost/admin-x-settings/src/components/design-system/settings/SettingSection.tsx +++ b/ghost/admin-x-settings/src/components/design-system/settings/SettingSection.tsx @@ -2,14 +2,14 @@ import React from 'react'; import SettingSectionHeader from './SettingSectionHeader'; interface Props { - name?: string; + title?: string; children?: React.ReactNode; } -const SettingSection: React.FC = ({name, children}) => { +const SettingSection: React.FC = ({title, children}) => { return ( <> - {name && } + {title && } {children &&
    {children} diff --git a/ghost/admin-x-settings/src/components/design-system/settings/SettingSectionHeader.stories.tsx b/ghost/admin-x-settings/src/components/design-system/settings/SettingSectionHeader.stories.tsx new file mode 100644 index 0000000000..fb14f03334 --- /dev/null +++ b/ghost/admin-x-settings/src/components/design-system/settings/SettingSectionHeader.stories.tsx @@ -0,0 +1,18 @@ +import type {Meta, StoryObj} from '@storybook/react'; + +import SettingSectionHeader from './SettingSectionHeader'; + +const meta = { + title: 'Settings / Section header', + component: SettingSectionHeader, + tags: ['autodocs'] +} satisfies Meta; + +export default meta; +type Story = StoryObj; + +export const Default: Story = { + args: { + title: 'Section header' + } +}; \ No newline at end of file diff --git a/ghost/admin-x-settings/src/components/design-system/settings/SettingSectionHeader.tsx b/ghost/admin-x-settings/src/components/design-system/settings/SettingSectionHeader.tsx index 03d3e88368..900b965925 100644 --- a/ghost/admin-x-settings/src/components/design-system/settings/SettingSectionHeader.tsx +++ b/ghost/admin-x-settings/src/components/design-system/settings/SettingSectionHeader.tsx @@ -1,12 +1,12 @@ import React from 'react'; interface Props { - name: string; + title: string; } -const SettingSectionHeader: React.FC = ({name}) => { +const SettingSectionHeader: React.FC = ({title}) => { return ( -

    {name}

    +

    {title}

    ); }; diff --git a/ghost/admin-x-settings/src/components/settings/general/GeneralSettings.tsx b/ghost/admin-x-settings/src/components/settings/general/GeneralSettings.tsx index b260c07262..4905ab51f7 100644 --- a/ghost/admin-x-settings/src/components/settings/general/GeneralSettings.tsx +++ b/ghost/admin-x-settings/src/components/settings/general/GeneralSettings.tsx @@ -8,7 +8,7 @@ import TitleAndDescription from './TitleAndDescription'; const GeneralSettings: React.FC = () => { return ( <> - +