Merge pull request #17814 from silversonicaxel/feature/brand-target

feature request: Added support of Brand target in create configuration

docs/configure/theming.md

@@ -85,6 +85,7 @@ Above, we're creating a new theme that will:
 - Use Storybook's `light` theme as a baseline.
 - Replace Storybook's logo in the sidebar with our own (defined in the brandImage variable).
 - Add custom branding information.
+- Set the brand link to open in the same window (as opposed to a new one), via the `target` attribute.
 
 Finally, we'll need to import the theme into Storybook. Create a new file called `manager.js` in your `.storybook` directory and add the following:
 
@@ -226,4 +227,4 @@ Or with template literals:
   ]}
 />
 
-<!-- prettier-ignore-end -->
+<!-- prettier-ignore-end -->

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',
 });
-```
+```

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,
         },
       }}
     >