@storybook/cli 6.5.0-beta.0 → 6.5.0-beta.1

package/dist/esm/frameworks/html/js/Header.stories.js

@@ -2,6 +2,11 @@ import { createHeader } from './Header';
 
 export default {
   title: 'Example/Header',
+  parameters: {
+    // More on Story layout: https://storybook.js.org/docs/html/configure/story-layout
+    layout: 'fullscreen',
+  },
+  // More on argTypes: https://storybook.js.org/docs/html/api/argtypes
   argTypes: {
     onLogin: { action: 'onLogin' },
     onLogout: { action: 'onLogout' },
@@ -13,7 +18,9 @@ const Template = (args) => createHeader(args);
 
 export const LoggedIn = Template.bind({});
 LoggedIn.args = {
-  user: {},
+  user: {
+    name: 'Jane Doe',
+  },
 };
 
 export const LoggedOut = Template.bind({});

package/dist/esm/frameworks/html/js/Page.js

@@ -1,11 +1,38 @@
 import './page.css';
 import { createHeader } from './Header';
 
-export const createPage = ({ user, onLogout, onLogin, onCreateAccount }) => {
+export const createPage = () => {
   const article = document.createElement('article');
+  let user = null;
+  let header = null;
 
-  const header = createHeader({ onLogin, onLogout, onCreateAccount, user });
+  const rerenderHeader = () => {
+    const wrapper = document.getElementsByTagName('article')[0];
+    wrapper.replaceChild(createHeaderElement(), wrapper.firstChild);
+  };
+
+  const onLogin = () => {
+    user = { name: 'Jane Doe' };
+    rerenderHeader();
+  };
+
+  const onLogout = () => {
+    user = null;
+    rerenderHeader();
+  };
+
+  const onCreateAccount = () => {
+    user = { name: 'Jane Doe' };
+    rerenderHeader();
+  };
+
+  const createHeaderElement = () => {
+    return createHeader({ onLogin, onLogout, onCreateAccount, user });
+  };
+
+  header = createHeaderElement();
   article.appendChild(header);
+
   const section = `
   <section>
     <h2>Pages in Storybook</h2>

package/dist/esm/frameworks/html/js/Page.stories.js

@@ -1,24 +1,23 @@
+import { within, userEvent } from '@storybook/testing-library';
 import { createPage } from './Page';
-import * as HeaderStories from './Header.stories';
 
 export default {
   title: 'Example/Page',
-  argTypes: {
-    onLogin: { action: 'onLogin' },
-    onLogout: { action: 'onLogout' },
-    onCreateAccount: { action: 'onCreateAccount' },
+  parameters: {
+    // More on Story layout: https://storybook.js.org/docs/html/configure/story-layout
+    layout: 'fullscreen',
   },
 };
 
-const Template = (args) => createPage(args);
+const Template = () => createPage();
+
+export const LoggedOut = Template.bind({});
 
 export const LoggedIn = Template.bind({});
-LoggedIn.args = {
-  // More on composing args: https://storybook.js.org/docs/html/writing-stories/args#args-composition
-  ...HeaderStories.LoggedIn.args,
-};
 
-export const LoggedOut = Template.bind({});
-LoggedOut.args = {
-  ...HeaderStories.LoggedOut.args,
+// More on interaction testing: https://storybook.js.org/docs/html/writing-tests/interaction-testing
+LoggedIn.play = async ({ canvasElement }) => {
+  const canvas = within(canvasElement);
+  const loginButton = await canvas.getByRole('button', { name: /Log in/i });
+  await userEvent.click(loginButton);
 };

package/dist/esm/frameworks/html/ts/Header.stories.ts

@@ -3,6 +3,11 @@ import { createHeader, HeaderProps } from './Header';
 
 export default {
   title: 'Example/Header',
+  parameters: {
+    // More on Story layout: https://storybook.js.org/docs/html/configure/story-layout
+    layout: 'fullscreen',
+  },
+  // More on argTypes: https://storybook.js.org/docs/html/api/argtypes
   argTypes: {
     onLogin: { action: 'onLogin' },
     onLogout: { action: 'onLogout' },

package/dist/esm/frameworks/html/ts/Header.ts

@@ -2,7 +2,7 @@ import './header.css';
 import { createButton } from './Button';
 
 export interface HeaderProps {
-  user?: {};
+  user?: { name: string };
   onLogin: () => void;
   onLogout: () => void;
   onCreateAccount: () => void;
@@ -33,6 +33,8 @@ export const createHeader = ({ user, onLogout, onLogin, onCreateAccount }: Heade
 
   const account = document.createElement('div');
   if (user) {
+    const welcomeMessage = `<span class="welcome">Welcome, <b>${user.name}</b>!</span>`;
+    account.innerHTML = welcomeMessage;
     account.appendChild(createButton({ size: 'small', label: 'Log out', onClick: onLogout }));
   } else {
     account.appendChild(createButton({ size: 'small', label: 'Log in', onClick: onLogin }));

package/dist/esm/frameworks/html/ts/Page.stories.ts

@@ -1,26 +1,24 @@
+import { within, userEvent } from '@storybook/testing-library';
 import { Story, Meta } from '@storybook/html';
 import { createPage } from './Page';
-import * as HeaderStories from './Header.stories';
-import { HeaderProps } from './Header';
 
 export default {
   title: 'Example/Page',
-  argTypes: {
-    onLogin: { action: 'onLogin' },
-    onLogout: { action: 'onLogout' },
-    onCreateAccount: { action: 'onCreateAccount' },
+  parameters: {
+    // More on Story layout: https://storybook.js.org/docs/html/configure/story-layout
+    layout: 'fullscreen',
   },
 } as Meta;
 
-const Template: Story<HeaderProps> = (args) => createPage(args);
+const Template: Story = () => createPage();
+
+export const LoggedOut = Template.bind({});
 
 export const LoggedIn = Template.bind({});
-LoggedIn.args = {
-  // More on composing args: https://storybook.js.org/docs/html/writing-stories/args#args-composition
-  ...HeaderStories.LoggedIn.args,
-};
 
-export const LoggedOut = Template.bind({});
-LoggedOut.args = {
-  ...HeaderStories.LoggedOut.args,
+// More on interaction testing: https://storybook.js.org/docs/html/writing-tests/interaction-testing
+LoggedIn.play = async ({ canvasElement }) => {
+  const canvas = within(canvasElement);
+  const loginButton = await canvas.getByRole('button', { name: /Log in/i });
+  await userEvent.click(loginButton);
 };

package/dist/esm/frameworks/html/ts/Page.ts

@@ -1,18 +1,42 @@
 import './page.css';
 import { createHeader } from './Header';
 
-export interface PageProps {
-  user?: {};
-  onLogin: () => void;
-  onLogout: () => void;
-  onCreateAccount: () => void;
-}
+type User = {
+  name: string;
+};
 
-export const createPage = ({ user, onLogout, onLogin, onCreateAccount }: PageProps) => {
+export const createPage = () => {
   const article = document.createElement('article');
+  let user: User = null;
+  let header = null;
+
+  const rerenderHeader = () => {
+    const wrapper = document.getElementsByTagName('article')[0];
+    wrapper.replaceChild(createHeaderElement(), wrapper.firstChild);
+  };
+
+  const onLogin = () => {
+    user = { name: 'Jane Doe' };
+    rerenderHeader();
+  };
+
+  const onLogout = () => {
+    user = null;
+    rerenderHeader();
+  };
 
-  const header = createHeader({ onLogin, onLogout, onCreateAccount, user });
+  const onCreateAccount = () => {
+    user = { name: 'Jane Doe' };
+    rerenderHeader();
+  };
+
+  const createHeaderElement = () => {
+    return createHeader({ onLogin, onLogout, onCreateAccount, user });
+  };
+
+  header = createHeaderElement();
   article.appendChild(header);
+
   const section = `
   <section>
     <h2>Pages in Storybook</h2>

package/dist/esm/frameworks/vue/Header.stories.js

@@ -3,6 +3,10 @@ import MyHeader from './Header';
 export default {
   title: 'Example/Header',
   component: MyHeader,
+  parameters: {
+    // More on Story layout: https://storybook.js.org/docs/vue/configure/story-layout
+    layout: 'fullscreen',
+  },
 };
 
 const Template = (args, { argTypes }) => ({
@@ -14,7 +18,9 @@ const Template = (args, { argTypes }) => ({
 
 export const LoggedIn = Template.bind({});
 LoggedIn.args = {
-  user: {},
+  user: {
+    name: 'Jane Doe',
+  },
 };
 
 export const LoggedOut = Template.bind({});

package/dist/esm/frameworks/vue/Header.vue

@@ -21,6 +21,7 @@
         <h1>Acme</h1>
       </div>
       <div>
+        <span class="welcome" v-if="user">Welcome, <b>{{ user.name }}</b>!</span>
         <my-button size="small" @onClick="onLogout" label="Log out" v-if="user" />
         <my-button size="small" @onClick="onLogin" label="Log in" v-if="!user" />
         <my-button primary size="small" @onClick="onCreateAccount" label="Sign up" v-if="!user" />

package/dist/esm/frameworks/vue/Page.stories.js

@@ -1,25 +1,27 @@
+import { within, userEvent } from '@storybook/testing-library';
+
 import MyPage from './Page';
-import * as HeaderStories from './Header.stories';
 
 export default {
   title: 'Example/Page',
   component: MyPage,
+  parameters: {
+    // More on Story layout: https://storybook.js.org/docs/vue/configure/story-layout
+    layout: 'fullscreen',
+  },
 };
 
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
+const Template = () => ({
   components: { MyPage },
-  template:
-    '<my-page :user="user" @onLogin="onLogin" @onLogout="onLogout" @onCreateAccount="onCreateAccount" />',
+  template: '<my-page />',
 });
 
-export const LoggedIn = Template.bind({});
-LoggedIn.args = {
-  // More on composing args: https://storybook.js.org/docs/vue/writing-stories/args#args-composition
-  ...HeaderStories.LoggedIn.args,
-};
-
 export const LoggedOut = Template.bind({});
-LoggedOut.args = {
-  ...HeaderStories.LoggedOut.args,
+
+// More on interaction testing: https://storybook.js.org/docs/vue/writing-tests/interaction-testing
+export const LoggedIn = Template.bind({});
+LoggedIn.play = async ({ canvasElement }) => {
+  const canvas = within(canvasElement);
+  const loginButton = await canvas.getByRole('button', { name: /Log in/i });
+  await userEvent.click(loginButton);
 };

package/dist/esm/frameworks/vue/Page.vue

@@ -67,21 +67,21 @@ export default {
 
   components: { MyHeader },
 
-  props: {
-    user: {
-      type: Object,
-    },
+  data() {
+    return {
+      user: null,
+    };
   },
 
   methods: {
     onLogin() {
-      this.$emit('onLogin');
+      this.user = { name: 'Jane Doe' };
     },
     onLogout() {
-      this.$emit('onLogout');
+      this.user = null;
     },
     onCreateAccount() {
-      this.$emit('onCreateAccount');
+      this.user = { name: 'Jane Doe' };
     },
   },
 };

package/dist/esm/generators/ANGULAR/index.js

@@ -55,7 +55,7 @@ const generator = async (packageManager, npmOptions, options) => {
   const updatedOptions = isWebpack5 ? Object.assign({}, options, {
     builder: _project_types.CoreBuilder.Webpack5
   }) : options;
-  (0, _baseGenerator.baseGenerator)(packageManager, npmOptions, updatedOptions, 'angular', {
+  await (0, _baseGenerator.baseGenerator)(packageManager, npmOptions, updatedOptions, 'angular', {
     extraPackages: ['@compodoc/compodoc'],
     addScripts: false
   });

package/dist/esm/generators/AURELIA/index.js

@@ -33,7 +33,7 @@ function addStorybookExcludeGlobToTsConfig() {
 
 const generator = async (packageManager, npmOptions, options) => {
   addStorybookExcludeGlobToTsConfig();
-  (0, _baseGenerator.baseGenerator)(packageManager, npmOptions, options, 'aurelia', {
+  await (0, _baseGenerator.baseGenerator)(packageManager, npmOptions, options, 'aurelia', {
     extraPackages: ['aurelia']
   });
   (0, _helpers.copyTemplate)(__dirname);

package/dist/esm/generators/EMBER/index.js

@@ -10,7 +10,7 @@ require("core-js/modules/es.promise.js");
 var _baseGenerator = require("../baseGenerator");
 
 const generator = async (packageManager, npmOptions, options) => {
-  (0, _baseGenerator.baseGenerator)(packageManager, npmOptions, options, 'ember', {
+  await (0, _baseGenerator.baseGenerator)(packageManager, npmOptions, options, 'ember', {
     extraPackages: [// babel-plugin-ember-modules-api-polyfill is a peerDep of @storybook/ember
     'babel-plugin-ember-modules-api-polyfill', // babel-plugin-htmlbars-inline-precompile is a peerDep of @storybook/ember
     'babel-plugin-htmlbars-inline-precompile'],

package/dist/esm/generators/HTML/index.js

@@ -10,7 +10,7 @@ require("core-js/modules/es.promise.js");
 var _baseGenerator = require("../baseGenerator");
 
 const generator = async (packageManager, npmOptions, options) => {
-  (0, _baseGenerator.baseGenerator)(packageManager, npmOptions, options, 'html');
+  await (0, _baseGenerator.baseGenerator)(packageManager, npmOptions, options, 'html');
 };
 
 var _default = generator;

package/dist/esm/generators/METEOR/index.js

@@ -16,7 +16,7 @@ var _baseGenerator = require("../baseGenerator");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 const generator = async (packageManager, npmOptions, options) => {
-  (0, _baseGenerator.baseGenerator)(packageManager, npmOptions, options, 'react', {
+  await (0, _baseGenerator.baseGenerator)(packageManager, npmOptions, options, 'react', {
     extraPackages: ['react', 'react-dom', '@babel/preset-env', '@babel/preset-react'],
     staticDir: 'dist'
   }); // create or update .babelrc

package/dist/esm/generators/MITHRIL/index.js

@@ -10,7 +10,7 @@ require("core-js/modules/es.promise.js");
 var _baseGenerator = require("../baseGenerator");
 
 const generator = async (packageManager, npmOptions, options) => {
-  (0, _baseGenerator.baseGenerator)(packageManager, npmOptions, options, 'mithril');
+  await (0, _baseGenerator.baseGenerator)(packageManager, npmOptions, options, 'mithril');
 };
 
 var _default = generator;

package/dist/esm/generators/PREACT/index.js

@@ -10,7 +10,7 @@ require("core-js/modules/es.promise.js");
 var _baseGenerator = require("../baseGenerator");
 
 const generator = async (packageManager, npmOptions, options) => {
-  (0, _baseGenerator.baseGenerator)(packageManager, npmOptions, options, 'preact', {
+  await (0, _baseGenerator.baseGenerator)(packageManager, npmOptions, options, 'preact', {
     extraPackages: ['core-js']
   });
 };

package/dist/esm/generators/RAX/index.js

@@ -23,7 +23,7 @@ const generator = async (packageManager, npmOptions, options) => {
   packageJson.dependencies['rax-text'] = packageJson.dependencies['rax-text'] || raxVersion;
   packageJson.dependencies['rax-view'] = packageJson.dependencies['rax-view'] || raxVersion;
   (0, _jsPackageManager.writePackageJson)(packageJson);
-  (0, _baseGenerator.baseGenerator)(packageManager, npmOptions, options, 'rax', {
+  await (0, _baseGenerator.baseGenerator)(packageManager, npmOptions, options, 'rax', {
     extraPackages: ['rax']
   });
 };

package/dist/esm/generators/RIOT/index.js

@@ -10,7 +10,7 @@ require("core-js/modules/es.promise.js");
 var _baseGenerator = require("../baseGenerator");
 
 const generator = async (packageManager, npmOptions, options) => {
-  (0, _baseGenerator.baseGenerator)(packageManager, npmOptions, options, 'riot', {
+  await (0, _baseGenerator.baseGenerator)(packageManager, npmOptions, options, 'riot', {
     extraPackages: ['riot-tag-loader']
   });
 };

package/dist/esm/generators/SERVER/index.js

@@ -12,7 +12,7 @@ var _baseGenerator = require("../baseGenerator");
 var _helpers = require("../../helpers");
 
 const generator = async (packageManager, npmOptions, options) => {
-  (0, _baseGenerator.baseGenerator)(packageManager, npmOptions, options, 'server', {
+  await (0, _baseGenerator.baseGenerator)(packageManager, npmOptions, options, 'server', {
     extensions: ['json']
   });
   (0, _helpers.copyTemplate)(__dirname);

package/dist/esm/generators/SFC_VUE/index.js

@@ -10,7 +10,7 @@ require("core-js/modules/es.promise.js");
 var _baseGenerator = require("../baseGenerator");
 
 const generator = async (packageManager, npmOptions, options) => {
-  (0, _baseGenerator.baseGenerator)(packageManager, npmOptions, options, 'vue');
+  await (0, _baseGenerator.baseGenerator)(packageManager, npmOptions, options, 'vue');
 };
 
 var _default = generator;

package/dist/esm/generators/VUE/index.js

@@ -10,7 +10,7 @@ require("core-js/modules/es.promise.js");
 var _baseGenerator = require("../baseGenerator");
 
 const generator = async (packageManager, npmOptions, options) => {
-  (0, _baseGenerator.baseGenerator)(packageManager, npmOptions, options, 'vue', {
+  await (0, _baseGenerator.baseGenerator)(packageManager, npmOptions, options, 'vue', {
     extraPackages: ['vue-loader@^15.7.0']
   });
 };

package/dist/esm/generators/VUE3/index.js

@@ -10,7 +10,7 @@ require("core-js/modules/es.promise.js");
 var _baseGenerator = require("../baseGenerator");
 
 const generator = async (packageManager, npmOptions, options) => {
-  (0, _baseGenerator.baseGenerator)(packageManager, npmOptions, options, 'vue3', {
+  await (0, _baseGenerator.baseGenerator)(packageManager, npmOptions, options, 'vue3', {
     extraPackages: ['vue-loader@^16.0.0']
   });
 };

package/dist/esm/generators/WEBPACK_REACT/index.js

@@ -10,7 +10,7 @@ require("core-js/modules/es.promise.js");
 var _baseGenerator = require("../baseGenerator");
 
 const generator = async (packageManager, npmOptions, options) => {
-  (0, _baseGenerator.baseGenerator)(packageManager, npmOptions, options, 'react');
+  await (0, _baseGenerator.baseGenerator)(packageManager, npmOptions, options, 'react');
 };
 
 var _default = generator;

package/dist/esm/generators/baseGenerator.js

@@ -56,7 +56,7 @@ const builderDependencies = builder => {
 
 const stripVersions = addons => addons.map(addon => (0, _jsPackageManager.getPackageDetails)(addon)[0]);
 
-const hasInteractiveStories = framework => ['react', 'angular', 'preact', 'svelte', 'vue3'].includes(framework);
+const hasInteractiveStories = framework => ['react', 'angular', 'preact', 'svelte', 'vue', 'vue3', 'html'].includes(framework);
 
 async function baseGenerator(packageManager, npmOptions, {
   language,

package/dist/esm/versions.js

@@ -6,61 +6,61 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 // auto generated file, do not edit
 var _default = {
-  '@storybook/addon-a11y': '6.5.0-beta.0',
-  '@storybook/addon-actions': '6.5.0-beta.0',
-  '@storybook/addon-backgrounds': '6.5.0-beta.0',
-  '@storybook/addon-controls': '6.5.0-beta.0',
-  '@storybook/addon-docs': '6.5.0-beta.0',
-  '@storybook/addon-essentials': '6.5.0-beta.0',
-  '@storybook/addon-interactions': '6.5.0-beta.0',
-  '@storybook/addon-jest': '6.5.0-beta.0',
-  '@storybook/addon-links': '6.5.0-beta.0',
-  '@storybook/addon-measure': '6.5.0-beta.0',
-  '@storybook/addon-outline': '6.5.0-beta.0',
-  '@storybook/addon-storyshots': '6.5.0-beta.0',
-  '@storybook/addon-storyshots-puppeteer': '6.5.0-beta.0',
-  '@storybook/addon-storysource': '6.5.0-beta.0',
-  '@storybook/addon-toolbars': '6.5.0-beta.0',
-  '@storybook/addon-viewport': '6.5.0-beta.0',
-  '@storybook/addons': '6.5.0-beta.0',
-  '@storybook/angular': '6.5.0-beta.0',
-  '@storybook/api': '6.5.0-beta.0',
-  '@storybook/builder-webpack4': '6.5.0-beta.0',
-  '@storybook/builder-webpack5': '6.5.0-beta.0',
-  '@storybook/channel-postmessage': '6.5.0-beta.0',
-  '@storybook/channel-websocket': '6.5.0-beta.0',
-  '@storybook/channels': '6.5.0-beta.0',
-  '@storybook/cli': '6.5.0-beta.0',
-  '@storybook/client-api': '6.5.0-beta.0',
-  '@storybook/client-logger': '6.5.0-beta.0',
-  '@storybook/codemod': '6.5.0-beta.0',
-  '@storybook/components': '6.5.0-beta.0',
-  '@storybook/core': '6.5.0-beta.0',
-  '@storybook/core-client': '6.5.0-beta.0',
-  '@storybook/core-common': '6.5.0-beta.0',
-  '@storybook/core-events': '6.5.0-beta.0',
-  '@storybook/core-server': '6.5.0-beta.0',
-  '@storybook/csf-tools': '6.5.0-beta.0',
-  '@storybook/docs-tools': '6.5.0-beta.0',
-  '@storybook/ember': '6.5.0-beta.0',
-  '@storybook/html': '6.5.0-beta.0',
-  '@storybook/instrumenter': '6.5.0-beta.0',
-  '@storybook/manager-webpack4': '6.5.0-beta.0',
-  '@storybook/manager-webpack5': '6.5.0-beta.0',
-  '@storybook/node-logger': '6.5.0-beta.0',
-  '@storybook/postinstall': '6.5.0-beta.0',
-  '@storybook/preact': '6.5.0-beta.0',
-  '@storybook/preview-web': '6.5.0-beta.0',
-  '@storybook/react': '6.5.0-beta.0',
-  '@storybook/router': '6.5.0-beta.0',
-  '@storybook/server': '6.5.0-beta.0',
-  '@storybook/source-loader': '6.5.0-beta.0',
-  '@storybook/store': '6.5.0-beta.0',
-  '@storybook/svelte': '6.5.0-beta.0',
-  '@storybook/theming': '6.5.0-beta.0',
-  '@storybook/ui': '6.5.0-beta.0',
-  '@storybook/vue': '6.5.0-beta.0',
-  '@storybook/vue3': '6.5.0-beta.0',
-  '@storybook/web-components': '6.5.0-beta.0'
+  '@storybook/addon-a11y': '6.5.0-beta.1',
+  '@storybook/addon-actions': '6.5.0-beta.1',
+  '@storybook/addon-backgrounds': '6.5.0-beta.1',
+  '@storybook/addon-controls': '6.5.0-beta.1',
+  '@storybook/addon-docs': '6.5.0-beta.1',
+  '@storybook/addon-essentials': '6.5.0-beta.1',
+  '@storybook/addon-interactions': '6.5.0-beta.1',
+  '@storybook/addon-jest': '6.5.0-beta.1',
+  '@storybook/addon-links': '6.5.0-beta.1',
+  '@storybook/addon-measure': '6.5.0-beta.1',
+  '@storybook/addon-outline': '6.5.0-beta.1',
+  '@storybook/addon-storyshots': '6.5.0-beta.1',
+  '@storybook/addon-storyshots-puppeteer': '6.5.0-beta.1',
+  '@storybook/addon-storysource': '6.5.0-beta.1',
+  '@storybook/addon-toolbars': '6.5.0-beta.1',
+  '@storybook/addon-viewport': '6.5.0-beta.1',
+  '@storybook/addons': '6.5.0-beta.1',
+  '@storybook/angular': '6.5.0-beta.1',
+  '@storybook/api': '6.5.0-beta.1',
+  '@storybook/builder-webpack4': '6.5.0-beta.1',
+  '@storybook/builder-webpack5': '6.5.0-beta.1',
+  '@storybook/channel-postmessage': '6.5.0-beta.1',
+  '@storybook/channel-websocket': '6.5.0-beta.1',
+  '@storybook/channels': '6.5.0-beta.1',
+  '@storybook/cli': '6.5.0-beta.1',
+  '@storybook/client-api': '6.5.0-beta.1',
+  '@storybook/client-logger': '6.5.0-beta.1',
+  '@storybook/codemod': '6.5.0-beta.1',
+  '@storybook/components': '6.5.0-beta.1',
+  '@storybook/core': '6.5.0-beta.1',
+  '@storybook/core-client': '6.5.0-beta.1',
+  '@storybook/core-common': '6.5.0-beta.1',
+  '@storybook/core-events': '6.5.0-beta.1',
+  '@storybook/core-server': '6.5.0-beta.1',
+  '@storybook/csf-tools': '6.5.0-beta.1',
+  '@storybook/docs-tools': '6.5.0-beta.1',
+  '@storybook/ember': '6.5.0-beta.1',
+  '@storybook/html': '6.5.0-beta.1',
+  '@storybook/instrumenter': '6.5.0-beta.1',
+  '@storybook/manager-webpack4': '6.5.0-beta.1',
+  '@storybook/manager-webpack5': '6.5.0-beta.1',
+  '@storybook/node-logger': '6.5.0-beta.1',
+  '@storybook/postinstall': '6.5.0-beta.1',
+  '@storybook/preact': '6.5.0-beta.1',
+  '@storybook/preview-web': '6.5.0-beta.1',
+  '@storybook/react': '6.5.0-beta.1',
+  '@storybook/router': '6.5.0-beta.1',
+  '@storybook/server': '6.5.0-beta.1',
+  '@storybook/source-loader': '6.5.0-beta.1',
+  '@storybook/store': '6.5.0-beta.1',
+  '@storybook/svelte': '6.5.0-beta.1',
+  '@storybook/theming': '6.5.0-beta.1',
+  '@storybook/ui': '6.5.0-beta.1',
+  '@storybook/vue': '6.5.0-beta.1',
+  '@storybook/vue3': '6.5.0-beta.1',
+  '@storybook/web-components': '6.5.0-beta.1'
 };
 exports.default = _default;

package/dist/modern/frameworks/html/js/Header.js

@@ -26,6 +26,8 @@ export const createHeader = ({ user, onLogout, onLogin, onCreateAccount }) => {
 
   const account = document.createElement('div');
   if (user) {
+    const welcomeMessage = `<span class="welcome">Welcome, <b>${user.name}</b>!</span>`;
+    account.innerHTML = welcomeMessage;
     account.appendChild(createButton({ size: 'small', label: 'Log out', onClick: onLogout }));
   } else {
     account.appendChild(createButton({ size: 'small', label: 'Log in', onClick: onLogin }));

package/dist/modern/frameworks/html/js/Header.stories.js

@@ -2,6 +2,11 @@ import { createHeader } from './Header';
 
 export default {
   title: 'Example/Header',
+  parameters: {
+    // More on Story layout: https://storybook.js.org/docs/html/configure/story-layout
+    layout: 'fullscreen',
+  },
+  // More on argTypes: https://storybook.js.org/docs/html/api/argtypes
   argTypes: {
     onLogin: { action: 'onLogin' },
     onLogout: { action: 'onLogout' },
@@ -13,7 +18,9 @@ const Template = (args) => createHeader(args);
 
 export const LoggedIn = Template.bind({});
 LoggedIn.args = {
-  user: {},
+  user: {
+    name: 'Jane Doe',
+  },
 };
 
 export const LoggedOut = Template.bind({});