@storybook/angular 8.3.0-alpha.6 → 8.3.0-alpha.7

package/dist/client/docs/__testfixtures__/doc-button/input.d.ts

@@ -14,9 +14,8 @@ export interface ISomeInterface {
  * This is a simple button that demonstrates various JSDoc handling in Storybook Docs for Angular.
  *
  * It supports [markdown](https://en.wikipedia.org/wiki/Markdown), so you can embed formatted text,
- * like **bold**, _italic_, and `inline code`.
- *
- * > How you like dem apples?! It's never been easier to document all your components.
+ * like **bold**, _italic_, and `inline code`.> How you like dem apples?! It's never been easier to
+ * document all your components.
  *
  * @string Hello world
  * @link [Example](http://example.com)
@@ -54,7 +53,8 @@ export declare class InputComponent<T> {
      */
     onClick: EventEmitter<Event>;
     /**
-     * This is an internal method that we don't want to document and have added the `ignore` annotation to.
+     * This is an internal method that we don't want to document and have added the `ignore`
+     * annotation to.
      *
      * @ignore
      */
@@ -72,9 +72,7 @@ export declare class InputComponent<T> {
      * @ignore
      */
     get classes(): string[];
-    /**
-     * @ignore
-     */
+    /** @ignore */
     ignoredProperty: string;
     /** Public value. */
     internalProperty: string;
@@ -88,7 +86,8 @@ export declare class InputComponent<T> {
      * An internal calculation method which adds `x` and `y` together.
      *
      * @param x Some number you'd like to use.
-     * @param y Some other number or string you'd like to use, will have `parseInt()` applied before calculation.
+     * @param y Some other number or string you'd like to use, will have `parseInt()` applied before
+     *   calculation.
      */
     calc(x: number, y: string | number): number;
     /** A public method using an interface. */

package/dist/client/docs/__testfixtures__/doc-button/input.js

@@ -24,9 +24,8 @@ var ButtonAccent;
  * This is a simple button that demonstrates various JSDoc handling in Storybook Docs for Angular.
  *
  * It supports [markdown](https://en.wikipedia.org/wiki/Markdown), so you can embed formatted text,
- * like **bold**, _italic_, and `inline code`.
- *
- * > How you like dem apples?! It's never been easier to document all your components.
+ * like **bold**, _italic_, and `inline code`.> How you like dem apples?! It's never been easier to
+ * document all your components.
  *
  * @string Hello world
  * @link [Example](http://example.com)
@@ -55,9 +54,7 @@ let InputComponent = class InputComponent {
         this.onClick = new core_1.EventEmitter();
         this._inputValue = 'some value';
         this.focus = false;
-        /**
-         * @ignore
-         */
+        /** @ignore */
         this.ignoredProperty = 'Ignore me';
         /** Public value. */
         this.internalProperty = 'Public hello';
@@ -65,7 +62,8 @@ let InputComponent = class InputComponent {
         this._value = 'Private hello';
     }
     /**
-     * This is an internal method that we don't want to document and have added the `ignore` annotation to.
+     * This is an internal method that we don't want to document and have added the `ignore`
+     * annotation to.
      *
      * @ignore
      */
@@ -108,7 +106,8 @@ let InputComponent = class InputComponent {
      * An internal calculation method which adds `x` and `y` together.
      *
      * @param x Some number you'd like to use.
-     * @param y Some other number or string you'd like to use, will have `parseInt()` applied before calculation.
+     * @param y Some other number or string you'd like to use, will have `parseInt()` applied before
+     *   calculation.
      */
     calc(x, y) {
         return x + parseInt(`${y}`, 10);

package/dist/client/docs/sourceDecorator.d.ts

@@ -3,7 +3,8 @@ import { AngularRenderer, StoryContext } from '../types';
 export declare const skipSourceRender: (context: StoryContext) => any;
 /**
  * Angular source decorator.
+ *
  * @param storyFn Fn
- * @param context  StoryContext
+ * @param context StoryContext
  */
 export declare const sourceDecorator: (storyFn: PartialStoryFn<AngularRenderer>, context: StoryContext) => import("../types").StoryFnAngularReturnType;

package/dist/client/docs/sourceDecorator.js

@@ -17,8 +17,9 @@ const skipSourceRender = (context) => {
 exports.skipSourceRender = skipSourceRender;
 /**
  * Angular source decorator.
+ *
  * @param storyFn Fn
- * @param context  StoryContext
+ * @param context StoryContext
  */
 const sourceDecorator = (storyFn, context) => {
     const story = storyFn();

package/dist/client/globals.d.ts

@@ -1,23 +1,21 @@
 /**
- * This file includes polyfills needed by Angular and is loaded before the app.
- * You can add your own extra polyfills to this file.
+ * This file includes polyfills needed by Angular and is loaded before the app. You can add your own
+ * extra polyfills to this file.
  *
  * This file is divided into 2 sections:
- *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
- *   2. Application imports. Files imported after ZoneJS that should be loaded before your main
- *      file.
+ *
+ * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
+ * 2. Application imports. Files imported after ZoneJS that should be loaded before your main file.
  *
  * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
  * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
- * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
+ * Edge> = 13 on the desktop, and iOS 10 and Chrome on mobile.
  *
  * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html
  */
 /**
- * Required to support Web Animations `@angular/animation`.
- * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation
- * */
-/** *************************************************************************************************
- * Zone JS is required by Angular itself.
+ * Required to support Web Animations `@angular/animation`. Needed for: All but Chrome, Firefox and
+ * Opera. http://caniuse.com/#feat=web-animation
  */
+/** Zone JS is required by Angular itself. */
 import 'zone.js';

package/dist/client/globals.js

@@ -2,40 +2,34 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const global_1 = require("@storybook/global");
 /**
- * This file includes polyfills needed by Angular and is loaded before the app.
- * You can add your own extra polyfills to this file.
+ * This file includes polyfills needed by Angular and is loaded before the app. You can add your own
+ * extra polyfills to this file.
  *
  * This file is divided into 2 sections:
- *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
- *   2. Application imports. Files imported after ZoneJS that should be loaded before your main
- *      file.
+ *
+ * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
+ * 2. Application imports. Files imported after ZoneJS that should be loaded before your main file.
  *
  * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
  * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
- * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
+ * Edge> = 13 on the desktop, and iOS 10 and Chrome on mobile.
  *
  * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html
  */
 /**
- * Required to support Web Animations `@angular/animation`.
- * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation
- * */
-// import 'web-animations-js';  // Run `npm install --save web-animations-js`.
-/** *************************************************************************************************
- * Zone JS is required by Angular itself.
+ * Required to support Web Animations `@angular/animation`. Needed for: All but Chrome, Firefox and
+ * Opera. http://caniuse.com/#feat=web-animation
  */
+// import 'web-animations-js';  // Run `npm install --save web-animations-js`.
+/** Zone JS is required by Angular itself. */
 require("zone.js");
 // Included with Angular CLI.
-/** *************************************************************************************************
- * APPLICATION IMPORTS
- */
+/** APPLICATION IMPORTS */
 /**
- * Date, currency, decimal and percent pipes.
- * Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10
+ * Date, currency, decimal and percent pipes. Needed for: All but Chrome, Firefox, Edge, IE11 and
+ * Safari 10
  */
 // import 'intl';  // Run `npm install --save intl`.
-/**
- * Need to import at least one locale-data with intl.
- */
+/** Need to import at least one locale-data with intl. */
 // import 'intl/locale-data/jsonp/en';
 global_1.global.STORYBOOK_ENV = 'angular';

package/dist/client/types.d.ts

@@ -2,20 +2,20 @@ import { Parameters as DefaultParameters, StoryContext as DefaultStoryContext, W
 import { Provider } from '@angular/core';
 import { ApplicationConfig } from '@angular/platform-browser';
 export interface NgModuleMetadata {
-    /**
-     * List of components, directives, and pipes that belong to your component.
-     */
+    /** List of components, directives, and pipes that belong to your component. */
     declarations?: any[];
     entryComponents?: any[];
     /**
      * List of modules that should be available to the root Storybook Component and all its children.
-     * If you want to register application providers or if you want to use the forRoot() pattern, please use the `applicationConfig` decorator in combination with the importProvidersFrom helper function from @angular/core instead.
+     * If you want to register application providers or if you want to use the forRoot() pattern,
+     * please use the `applicationConfig` decorator in combination with the importProvidersFrom helper
+     * function from @angular/core instead.
      */
     imports?: any[];
     schemas?: any[];
     /**
-     * List of providers that should be available on the root component and all its children.
-     * Use the `applicationConfig` decorator to register environemt and application-wide providers.
+     * List of providers that should be available on the root component and all its children. Use the
+     * `applicationConfig` decorator to register environemt and application-wide providers.
      */
     providers?: Provider[];
 }

package/dist/server/angular-cli-webpack.js

@@ -27,17 +27,15 @@ const getAngularWebpackUtils = () => {
     }
 };
 /**
- * Extract webpack config from angular-cli 13.x.x
- * ⚠️ This file is in JavaScript to not use TypeScript. Because current storybook TypeScript version is not compatible with Angular CLI.
+ * Extract webpack config from angular-cli 13.x.x ⚠️ This file is in JavaScript to not use
+ * TypeScript. Because current storybook TypeScript version is not compatible with Angular CLI.
  * FIXME: Try another way with TypeScript on future storybook version (7 maybe 🤞)
  *
- * @param {*} baseConfig Previous webpack config from storybook
- * @param {*} options { builderOptions, builderContext }
+ * @param {any} baseConfig Previous webpack config from storybook
+ * @param {any} options { builderOptions, builderContext }
  */
 exports.getWebpackConfig = async (baseConfig, { builderOptions, builderContext }) => {
-    /**
-     * Get angular-cli Webpack config
-     */
+    /** Get angular-cli Webpack config */
     const { getCommonConfig, getStylesConfig, getDevServerConfig, getTypeScriptConfig } = getAngularWebpackUtils();
     const { config: cliConfig } = await generateI18nBrowserWebpackConfigFromContext({
         // Default options
@@ -62,9 +60,7 @@ exports.getWebpackConfig = async (baseConfig, { builderOptions, builderContext }
         getStylesConfig(wco),
         getTypeScriptConfig ? getTypeScriptConfig(wco) : getDevServerConfig(wco),
     ]);
-    /**
-     * Merge baseConfig Webpack with angular-cli Webpack
-     */
+    /** Merge baseConfig Webpack with angular-cli Webpack */
     const entry = [
         ...baseConfig.entry,
         ...(cliConfig.entry.styles ?? []),

package/dist/server/framework-preset-angular-cli.js

@@ -25,10 +25,7 @@ async function webpackFinal(baseConfig, options) {
     });
 }
 exports.webpackFinal = webpackFinal;
-/**
- * Get Builder Context
- * If storybook is not start by angular builder create dumb BuilderContext
- */
+/** Get Builder Context If storybook is not start by angular builder create dumb BuilderContext */
 function getBuilderContext(options) {
     return (options.angularBuilderContext ??
         {
@@ -39,23 +36,16 @@ function getBuilderContext(options) {
             logger: new core_1.logging.Logger('Storybook'),
         });
 }
-/**
- * Get builder options
- * Merge target options from browser target and from storybook options
- */
+/** Get builder options Merge target options from browser target and from storybook options */
 async function getBuilderOptions(options, builderContext) {
-    /**
-     * Get Browser Target options
-     */
+    /** Get Browser Target options */
     let browserTargetOptions = {};
     if (options.angularBrowserTarget) {
         const browserTarget = (0, architect_1.targetFromTargetString)(options.angularBrowserTarget);
         node_logger_1.logger.info(`=> Using angular browser target options from "${browserTarget.project}:${browserTarget.target}${browserTarget.configuration ? `:${browserTarget.configuration}` : ''}"`);
         browserTargetOptions = await builderContext.getTargetOptions(browserTarget);
     }
-    /**
-     * Merge target options from browser target options and from storybook options
-     */
+    /** Merge target options from browser target options and from storybook options */
     const builderOptions = {
         ...browserTargetOptions,
         ...options.angularBuilderOptions,
@@ -67,7 +57,8 @@ async function getBuilderOptions(options, builderContext) {
     return builderOptions;
 }
 /**
- * Checks if using legacy configuration that doesn't use builder and logs message referring to migration docs.
+ * Checks if using legacy configuration that doesn't use builder and logs message referring to
+ * migration docs.
  */
 function checkForLegacyBuildOptions(options) {
     if (options.angularBrowserTarget !== undefined) {

package/dist/server/framework-preset-angular-ivy.d.ts

@@ -1,8 +1,8 @@
 import { Configuration } from 'webpack';
 import { PresetOptions } from './preset-options';
 /**
- * Run ngcc for converting modules to ivy format before starting storybook
- * This step is needed in order to support Ivy in storybook
+ * Run ngcc for converting modules to ivy format before starting storybook This step is needed in
+ * order to support Ivy in storybook
  *
  * Information about Ivy can be found here https://angular.io/guide/ivy
  */

package/dist/server/framework-preset-angular-ivy.js

@@ -4,14 +4,14 @@ exports.webpack = exports.runNgcc = void 0;
 const node_fs_1 = require("node:fs");
 const node_path_1 = require("node:path");
 /**
- * Source : https://github.com/angular/angular-cli/blob/ebccb5de4a455af813c5e82483db6af20666bdbd/packages/angular_devkit/build_angular/src/utils/load-esm.ts#L23
- * This uses a dynamic import to load a module which may be ESM.
- * CommonJS code can load ESM code via a dynamic import. Unfortunately, TypeScript
- * will currently, unconditionally downlevel dynamic import into a require call.
- * require calls cannot load ESM code and will result in a runtime error. To workaround
- * this, a Function constructor is used to prevent TypeScript from changing the dynamic import.
- * Once TypeScript provides support for keeping the dynamic import this workaround can
- * be dropped.
+ * Source :
+ * https://github.com/angular/angular-cli/blob/ebccb5de4a455af813c5e82483db6af20666bdbd/packages/angular_devkit/build_angular/src/utils/load-esm.ts#L23
+ * This uses a dynamic import to load a module which may be ESM. CommonJS code can load ESM code via
+ * a dynamic import. Unfortunately, TypeScript will currently, unconditionally downlevel dynamic
+ * import into a require call. require calls cannot load ESM code and will result in a runtime
+ * error. To workaround this, a Function constructor is used to prevent TypeScript from changing the
+ * dynamic import. Once TypeScript provides support for keeping the dynamic import this workaround
+ * can be dropped.
  *
  * @param modulePath The path of the module to load.
  * @returns A Promise that resolves to the dynamically imported module.
@@ -21,8 +21,8 @@ function loadEsmModule(modulePath) {
     return new Function('modulePath', `return import(modulePath);`)(modulePath);
 }
 /**
- * Run ngcc for converting modules to ivy format before starting storybook
- * This step is needed in order to support Ivy in storybook
+ * Run ngcc for converting modules to ivy format before starting storybook This step is needed in
+ * order to support Ivy in storybook
  *
  * Information about Ivy can be found here https://angular.io/guide/ivy
  */

package/dist/server/plugins/storybook-normalize-angular-entry-plugin.d.ts

@@ -1,7 +1,8 @@
 /**
- * This plugin is designed to modify the Webpack configuration for Storybook projects that use Angular,
- * specifically to prevent multiple runtime bundle issues by merging 'main' and 'styles' entry points.
- * It ensures that only one runtime bundle is generated to avoid '__webpack_require__.nmd is not a function' errors.
+ * This plugin is designed to modify the Webpack configuration for Storybook projects that use
+ * Angular, specifically to prevent multiple runtime bundle issues by merging 'main' and 'styles'
+ * entry points. It ensures that only one runtime bundle is generated to avoid
+ * '**webpack_require**.nmd is not a function' errors.
  */
 export default class StorybookNormalizeAngularEntryPlugin {
     constructor(options: any);

package/dist/server/plugins/storybook-normalize-angular-entry-plugin.js

@@ -2,9 +2,10 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const PLUGIN_NAME = 'storybook-normalize-angular-entry-plugin';
 /**
- * This plugin is designed to modify the Webpack configuration for Storybook projects that use Angular,
- * specifically to prevent multiple runtime bundle issues by merging 'main' and 'styles' entry points.
- * It ensures that only one runtime bundle is generated to avoid '__webpack_require__.nmd is not a function' errors.
+ * This plugin is designed to modify the Webpack configuration for Storybook projects that use
+ * Angular, specifically to prevent multiple runtime bundle issues by merging 'main' and 'styles'
+ * entry points. It ensures that only one runtime bundle is generated to avoid
+ * '**webpack_require**.nmd is not a function' errors.
  */
 class StorybookNormalizeAngularEntryPlugin {
     constructor(options) {

package/dist/types.d.ts

@@ -19,9 +19,7 @@ type StorybookConfigFramework = {
     };
     typescript?: Partial<TypescriptOptionsBuilder & TypescriptOptionsReact> & StorybookConfigBase['typescript'];
 };
-/**
- * The interface for Storybook configuration in `main.ts` files.
- */
+/** The interface for Storybook configuration in `main.ts` files. */
 export type StorybookConfig = Omit<StorybookConfigBase, keyof StorybookConfigWebpack | keyof StorybookConfigFramework> & StorybookConfigWebpack & StorybookConfigFramework;
 export interface AngularOptions {
     enableIvy?: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/angular",
-  "version": "8.3.0-alpha.6",
+  "version": "8.3.0-alpha.7",
   "description": "Storybook for Angular: Develop Angular components in isolation with hot reloading.",
   "keywords": [
     "storybook",
@@ -37,13 +37,13 @@
     "prep": "rimraf dist && jiti ../../../scripts/prepare/tsc.ts"
   },
   "dependencies": {
-    "@storybook/builder-webpack5": "8.3.0-alpha.6",
-    "@storybook/components": "^8.3.0-alpha.6",
-    "@storybook/core-webpack": "8.3.0-alpha.6",
+    "@storybook/builder-webpack5": "8.3.0-alpha.7",
+    "@storybook/components": "^8.3.0-alpha.7",
+    "@storybook/core-webpack": "8.3.0-alpha.7",
     "@storybook/global": "^5.0.0",
-    "@storybook/manager-api": "^8.3.0-alpha.6",
-    "@storybook/preview-api": "^8.3.0-alpha.6",
-    "@storybook/theming": "^8.3.0-alpha.6",
+    "@storybook/manager-api": "^8.3.0-alpha.7",
+    "@storybook/preview-api": "^8.3.0-alpha.7",
+    "@storybook/theming": "^8.3.0-alpha.7",
     "@types/node": "^22.0.0",
     "@types/react": "^18.0.37",
     "@types/react-dom": "^18.0.11",
@@ -93,7 +93,7 @@
     "@angular/platform-browser": ">=15.0.0 < 19.0.0",
     "@angular/platform-browser-dynamic": ">=15.0.0 < 19.0.0",
     "rxjs": "^6.0.0 || ^7.4.0",
-    "storybook": "^8.3.0-alpha.6",
+    "storybook": "^8.3.0-alpha.7",
     "typescript": "^4.0.0 || ^5.0.0",
     "zone.js": ">= 0.11.1 < 1.0.0"
   },

package/scripts/postbuild.js

@@ -1,8 +1,9 @@
 /**
- * This postbuild fix is needed to add a ts-ignore to the generated public-types.d.ts file.
- * The AngularCore.InputSignal and AngularCore.InputSignalWithTransform types do not exist in Angular
- * versions < 17.2. In these versions, the unresolved types will error and prevent Storybook from starting/building.
- * This postbuild script adds a ts-ignore statement above the unresolved types to prevent the errors.
+ * This postbuild fix is needed to add a ts-ignore to the generated public-types.d.ts file. The
+ * AngularCore.InputSignal and AngularCore.InputSignalWithTransform types do not exist in Angular
+ * versions < 17.2. In these versions, the unresolved types will error and prevent Storybook from
+ * starting/building. This postbuild script adds a ts-ignore statement above the unresolved types to
+ * prevent the errors.
  */
 
 const fs = require('fs');

package/template/cli/button.component.ts

@@ -6,31 +6,25 @@ import { Component, Input, Output, EventEmitter } from '@angular/core';
   standalone: true,
   imports: [CommonModule],
   template: ` <button
-    type="button"
-    (click)="onClick.emit($event)"
-    [ngClass]="classes"
-    [ngStyle]="{ 'background-color': backgroundColor }"
-  >
-    {{ label }}
-  </button>`,
+  type="button"
+  (click)="onClick.emit($event)"
+  [ngClass]="classes"
+  [ngStyle]="{ 'background-color': backgroundColor }"
+>
+  {{ label }}
+</button>`,
   styleUrls: ['./button.css'],
 })
 export class ButtonComponent {
-  /**
-   * Is this the principal call to action on the page?
-   */
+  /** Is this the principal call to action on the page? */
   @Input()
   primary = false;
 
-  /**
-   * What background color to use
-   */
+  /** What background color to use */
   @Input()
   backgroundColor?: string;
 
-  /**
-   * How large should the button be?
-   */
+  /** How large should the button be? */
   @Input()
   size: 'small' | 'medium' | 'large' = 'medium';
 
@@ -42,9 +36,7 @@ export class ButtonComponent {
   @Input()
   label = 'Button';
 
-  /**
-   * Optional click handler
-   */
+  /** Optional click handler */
   @Output()
   onClick = new EventEmitter<Event>();
 

package/template/cli/header.component.ts

@@ -9,59 +9,56 @@ import type { User } from './user';
   standalone: true,
   imports: [CommonModule, ButtonComponent],
   template: `<header>
-    <div class="storybook-header">
-      <div>
-        <svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
-          <g fill="none" fillRule="evenodd">
-            <path
-              d="M10 0h12a10 10 0 0110 10v12a10 10 0 01-10 10H10A10 10 0 010 22V10A10 10 0 0110 0z"
-              fill="#FFF"
-            />
-            <path
-              d="M5.3 10.6l10.4 6v11.1l-10.4-6v-11zm11.4-6.2l9.7 5.5-9.7 5.6V4.4z"
-              fill="#555AB9"
-            />
-            <path
-              d="M27.2 10.6v11.2l-10.5 6V16.5l10.5-6zM15.7 4.4v11L6 10l9.7-5.5z"
-              fill="#91BAF8"
-            />
-          </g>
-        </svg>
-        <h1>Acme</h1>
+  <div class="storybook-header">
+    <div>
+      <svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+        <g fill="none" fillRule="evenodd">
+          <path
+            d="M10 0h12a10 10 0 0110 10v12a10 10 0 01-10 10H10A10 10 0 010 22V10A10 10 0 0110 0z"
+            fill="#FFF"
+          />
+          <path
+            d="M5.3 10.6l10.4 6v11.1l-10.4-6v-11zm11.4-6.2l9.7 5.5-9.7 5.6V4.4z"
+            fill="#555AB9"
+          />
+          <path d="M27.2 10.6v11.2l-10.5 6V16.5l10.5-6zM15.7 4.4v11L6 10l9.7-5.5z" fill="#91BAF8" />
+        </g>
+      </svg>
+      <h1>Acme</h1>
+    </div>
+    <div>
+      <div *ngIf="user">
+        <span class="welcome">
+          Welcome, <b>{{ user.name }}</b
+          >!
+        </span>
+        <storybook-button
+          *ngIf="user"
+          size="small"
+          (onClick)="onLogout.emit($event)"
+          label="Log out"
+        ></storybook-button>
       </div>
-      <div>
-        <div *ngIf="user">
-          <span class="welcome">
-            Welcome, <b>{{ user.name }}</b
-            >!
-          </span>
-          <storybook-button
-            *ngIf="user"
-            size="small"
-            (onClick)="onLogout.emit($event)"
-            label="Log out"
-          ></storybook-button>
-        </div>
-        <div *ngIf="!user">
-          <storybook-button
-            *ngIf="!user"
-            size="small"
-            class="margin-left"
-            (onClick)="onLogin.emit($event)"
-            label="Log in"
-          ></storybook-button>
-          <storybook-button
-            *ngIf="!user"
-            size="small"
-            [primary]="true"
-            class="margin-left"
-            (onClick)="onCreateAccount.emit($event)"
-            label="Sign up"
-          ></storybook-button>
-        </div>
+      <div *ngIf="!user">
+        <storybook-button
+          *ngIf="!user"
+          size="small"
+          class="margin-left"
+          (onClick)="onLogin.emit($event)"
+          label="Log in"
+        ></storybook-button>
+        <storybook-button
+          *ngIf="!user"
+          size="small"
+          [primary]="true"
+          class="margin-left"
+          (onClick)="onCreateAccount.emit($event)"
+          label="Sign up"
+        ></storybook-button>
       </div>
     </div>
-  </header>`,
+  </div>
+</header>`,
   styleUrls: ['./header.css'],
 })
 export class HeaderComponent {