diff --git a/src/title-bar/__tests__/title-bar.stories.tsx b/src/title-bar/__tests__/title-bar.stories.tsx
index ee21f12088..3149ca03aa 100644
--- a/src/title-bar/__tests__/title-bar.stories.tsx
+++ b/src/title-bar/__tests__/title-bar.stories.tsx
@@ -1,166 +1,239 @@
import * as React from 'react';
-import {createTheme, ThemeProvider} from '../../theme';
+import {ThemeProvider} from '../../theme';
import {TitleBar} from '..';
import {Button} from '../../button';
import {LinkStandalone} from '../../link';
-import {Divider} from '../../divider';
-import {Stack} from '../../stack';
-
-import {IconFilledFigma} from '../../icons/filled/custom/icon-filled-figma';
-import {styled} from '../../utils/style';
-import {
- StorybookHeading,
- StorybookSubHeading,
-} from '../../test/storybook-comps';
-
-const myCustomTheme = createTheme({
- name: 'my-custom-title-bar-theme',
- overrides: {
- stylePresets: {
- titleBarCustom: {
- base: {
- color: '{{colors.blue060}}',
- },
- },
- linkInline: {
- base: {
- color: '{{colors.interactivePrimary030}}',
- iconColor: '{{colors.interactivePrimary030}}',
- textDecoration: 'underline',
- },
- },
- },
- },
-});
+import {StorybookCase, StorybookPage} from '../../test/storybook-comps';
+import {IconFilledStarOutline} from '../../icons';
+import {getColorCssFromTheme, styled} from '../../utils/style';
+import {Story as StoryType} from '@storybook/react';
+import {createCustomThemeWithBaseThemeSwitch} from '../../test/theme-select-object';
+import {TextBlock} from '../../text-block';
const link = () => Link;
const button = () => ;
-const HeadlineContainer = styled.span`
- min-width: fit-content;
+const IconContainer = styled.div`
+ display: flex;
+ align-items: center;
`;
+const STRING = 'Title content';
+
export default {
- title: 'Components/title-bar',
+ title: 'Components/Title-bar',
component: () => 'None',
- disabledRules: ['heading-order'],
+ parameters: {
+ nkDocs: {
+ title: 'Title bar',
+ url: 'https://www.newskit.co.uk/components/title-bar/#anatomy',
+ description:
+ 'The title bar provides context and actions related to a particular section of content that follows below on the screen.',
+ },
+ },
+ decorators: [
+ (
+ Story: StoryType,
+ context: {name: string; globals: {backgrounds: {value: string}}},
+ ) => (
+
+
+
+ ),
+ ],
};
-export const StoryTitleBar = () => (
- <>
- Title bar default state
-
-
-
+export const StoryTitleBar = () => {STRING};
+StoryTitleBar.storyName = 'Default';
+
+export const StoryTitleBarLink = () => (
+
+
+ {STRING}
+
+
+ {STRING}
+
+
+
+
+ {STRING}
+
+
+
+
+
+
+ {STRING}
+
+
+
+);
+StoryTitleBarLink.storyName = 'Variations';
+
+export const StoryTitleBarAsH1toh6 = () => (
+
+
+
+ Title content
+
+
+
+
+ Title content
+
+
+
- Title bar with overwritten heading typographyPreset
+ Title content
-
-
+
+
+
+ Title content
+
+
+
+
+ Title content
+
+
+
- H6 with overwritten style preset
+ Title content
-
-
-
- Title bar with link
-
-
- Title bar with button
-
-
- Title bar with Icon
-
-
-
- Title bar with action hidden in sm and md
-
-
-
-
- Title bar with divider and button
-
-
-
-
-
+
+
);
-StoryTitleBar.storyName = 'title-bar';
+StoryTitleBarAsH1toh6.storyName = 'H1 to H6';
-export const StoryTitleBarAsH1toh6 = () => (
- <>
- Title bar as h1
- Title bar as h2
- Title bar as h3
- Title bar as h4
- Title bar as h5
- Title bar as h6
-
-);
-StoryTitleBarAsH1toh6.storyName = 'title-bar-as-h1toh6';
-
-export const StoryTagLogicalProps = () => (
- <>
- TitleBar with Logical Props overrides
-
- marginInline & marginBlock
-
- Title bar
-
+const MarginOverridesWrapper = styled.div`
+ border: 1px dashed;
+ ${getColorCssFromTheme('borderColor', 'red060')}
+`;
-
- paddingInline & paddingBlock
-
- Title bar
-
+export const StoryTitleBarLogicalProps = () => (
+
+
+
+
+ {STRING}
+
+
+
+
+
+
+ {STRING}
+
+
+
+
+
+
+ {STRING}
+
+
+
+
+);
+StoryTitleBarLogicalProps.storyName = 'Logical props';
-
-
- marginInline & marginBlock & paddingInline & paddingBlock
-
-
- Title bar
-
+export const StoryTitleBarStylingOverrides = () => (
+
+ {STRING}
+
+);
+StoryTitleBarStylingOverrides.storyName = 'Styling overrides';
-
-
+export const StoryTitleBarOverrides = () => (
+
+
+
+ Title Content
+
+
+
);
-StoryTagLogicalProps.storyName = 'title-bar-logical-props';
+StoryTitleBarOverrides.storyName = 'Styling overrides';