Added support of Brand target in create configuration

MIGRATION.md

@@ -2160,6 +2160,7 @@ addParameters({
       base: 'light',
       brandTitle: 'Storybook',
       brandUrl: 'https://storybook.js.org',
+      brandTarget: '_self',
       // To control appearance:
       // brandImage: 'http://url.of/some.svg',
     }),

docs/snippets/common/storybook-theme-example-variables.ts.mdx

@@ -8,5 +8,6 @@ export default create({
   brandTitle: 'My custom storybook',
   brandUrl: 'https://example.com',
   brandImage: 'https://place-hold.it/350x150',
+  brandTarget: '_self',
 });
-```
+```

docs/snippets/common/your-theme.js.mdx

@@ -37,5 +37,6 @@ export default create({
   brandTitle: 'My custom storybook',
   brandUrl: 'https://example.com',
   brandImage: 'https://place-hold.it/350x150',
+  brandTarget: '_self',
 });
-```
+```

examples/cra-kitchen-sink/.storybook/manager.js

@@ -9,6 +9,7 @@ addons.setConfig({
     base: 'light',
     brandTitle: 'CRA Kitchen Sink',
     brandUrl: 'https://github.com/storybookjs/storybook/tree/master/examples/cra-kitchen-sink',
+    brandTarget: '_self',
     gridCellSize: 12,
   }),
 });

examples/cra-ts-kitchen-sink/.storybook/preview.ts

@@ -2,5 +2,6 @@ export const parameters = {
   options: {
     brandTitle: 'CRA TypeScript Kitchen Sink',
     brandUrl: 'https://github.com/storybookjs/storybook/tree/master/examples/cra-ts-kitchen-sink',
+    brandTarget: '_self',
   },
 };

lib/theming/src/convert.ts

@@ -95,6 +95,7 @@ export const convert = (inherit: ThemeVars = themes[getPreferredColorScheme()]):
     brandTitle,
     brandUrl,
     brandImage,
+    brandTarget,
     gridCellSize,
     ...rest
   } = inherit;
@@ -148,6 +149,7 @@ export const convert = (inherit: ThemeVars = themes[getPreferredColorScheme()]):
       title: brandTitle,
       url: brandUrl,
       image: brandImage || (brandTitle ? null : undefined),
+      target: brandTarget,
     },
 
     code: createSyntax({

lib/theming/src/tests/convert.test.js

@@ -41,6 +41,7 @@ describe('convert', () => {
     const customVars = create({
       base: 'light',
       brandTitle: 'my custom storybook',
+      brandTarget: '_self',
       gridCellSize: 12,
     });
 
@@ -52,6 +53,7 @@ describe('convert', () => {
       }),
       brand: expect.objectContaining({
         title: 'my custom storybook',
+        target: '_self',
       }),
     });
   });

lib/theming/src/tests/create.test.js

@@ -53,14 +53,16 @@ describe('create brand', () => {
     expect(result.brandImage).not.toBeDefined();
     expect(result.brandTitle).not.toBeDefined();
     expect(result.brandUrl).not.toBeDefined();
+    expect(result.brandTarget).not.toBeDefined();
   });
   it('should accept null', () => {
-    const result = create({ base: 'light', brandTitle: null, brandUrl: null, brandImage: null });
+    const result = create({ base: 'light', brandTitle: null, brandUrl: null, brandImage: null, brandTarget: null });
 
     expect(result).toMatchObject({
       brandImage: null,
       brandTitle: null,
       brandUrl: null,
+      brandTarget: null,
     });
   });
   it('should accept values', () => {
@@ -69,12 +71,14 @@ describe('create brand', () => {
       brandImage: 'https://place-hold.it/350x150',
       brandTitle: 'my custom storybook',
       brandUrl: 'https://example.com',
+      brandTarget: '_top',
     });
 
     expect(result).toMatchObject({
       brandImage: 'https://place-hold.it/350x150',
       brandTitle: 'my custom storybook',
       brandUrl: 'https://example.com',
+      brandTarget: '_top',
     });
   });
 });

lib/theming/src/types.ts

@@ -37,6 +37,7 @@ export interface ThemeVars {
   brandTitle?: string;
   brandUrl?: string;
   brandImage?: string;
+  brandTarget?: string;
 
   gridCellSize?: number;
 }
@@ -52,6 +53,7 @@ export interface Brand {
   title: string | undefined;
   url: string | null | undefined;
   image: string | null | undefined;
+  target: string | null | undefined;
 }
 
 export interface Theme {

lib/ui/src/components/sidebar/Brand.tsx

@@ -32,8 +32,8 @@ export const LogoLink = styled.a(({ theme }) => ({
 }));
 
 export const Brand = withTheme(({ theme }) => {
-  const { title = 'Storybook', url = './', image } = theme.brand;
-  const targetValue = url === './' ? '' : '_blank';
+  const { title = 'Storybook', url = './', image, target } = theme.brand;
+  const targetValue = target ? target : (url === './' ? '' : '_blank');
 
   // When image is explicitly set to null, enable custom HTML support
   if (image === null) {

lib/ui/src/components/sidebar/Heading.stories.tsx

@@ -41,6 +41,7 @@ export const Standard: Story = () => {
           title: undefined,
           url: undefined,
           image: undefined,
+          target: undefined,
         },
       }}
     >
@@ -59,6 +60,7 @@ export const StandardNoLink: Story = () => {
           title: undefined,
           url: null,
           image: undefined,
+          target: undefined,
         },
       }}
     >
@@ -77,6 +79,7 @@ export const LinkAndText: Story = () => {
           title: 'My title',
           url: 'https://example.com',
           image: null,
+          target: '_blank',
         },
       }}
     >
@@ -95,6 +98,7 @@ export const OnlyText: Story = () => {
           title: 'My title',
           url: null,
           image: null,
+          target: null,
         },
       }}
     >
@@ -113,6 +117,7 @@ export const LongText: Story = () => {
           title: 'My title is way to long to actually fit',
           url: null,
           image: null,
+          target: null,
         },
       }}
     >
@@ -131,6 +136,7 @@ export const CustomTitle: Story = () => {
           title: '<span style="color:red">My custom title</span>',
           url: null,
           image: null,
+          target: null,
         },
       }}
     >
@@ -149,6 +155,7 @@ export const CustomBrandImage: Story = () => {
           title: 'My Title',
           url: 'https://example.com',
           image: 'https://via.placeholder.com/150x22',
+          target: '_blank',
         },
       }}
     >
@@ -167,6 +174,7 @@ export const CustomBrandImageTall: Story = () => {
           title: 'My Title',
           url: 'https://example.com',
           image: 'https://via.placeholder.com/100x150',
+          target: '_blank',
         },
       }}
     >
@@ -185,6 +193,7 @@ export const CustomBrandImageUnsizedSVG: Story = () => {
           title: 'My Title',
           url: 'https://example.com',
           image: 'https://s.cdpn.io/91525/potofgold.svg',
+          target: '_blank',
         },
       }}
     >
@@ -203,6 +212,7 @@ export const NoBrand: Story = () => {
           title: null,
           url: null,
           image: null,
+          target: null,
         },
       }}
     >