From 078e3cf2d92c2738312475e110297c7844652114 Mon Sep 17 00:00:00 2001
From: JW <Amerlander@users.noreply.github.com>
Date: Tue, 11 Oct 2022 09:24:05 +0200
Subject: [PATCH 1/6] Scope Header.css

---
 code/lib/cli/rendererAssets/common/header.css          | 10 +++++-----
 code/renderers/html/template/cli/js/Header.js          |  2 +-
 code/renderers/html/template/cli/ts-3-8/Header.ts      |  2 +-
 code/renderers/preact/template/cli/Header.jsx          |  2 +-
 code/renderers/react/template/cli/js/Header.jsx        |  2 +-
 code/renderers/react/template/cli/ts-3-8/Header.tsx    |  2 +-
 code/renderers/react/template/cli/ts-4-9/Header.tsx    |  2 +-
 code/renderers/svelte/template/cli/js/Header.svelte    |  2 +-
 code/renderers/vue/template/cli/Header.vue             |  2 +-
 code/renderers/vue3/template/cli/js/Header.vue         |  2 +-
 .../renderers/web-components/template/cli/js/Header.js |  2 +-
 .../web-components/template/cli/ts-3-8/Header.ts       |  2 +-
 12 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/code/lib/cli/rendererAssets/common/header.css b/code/lib/cli/rendererAssets/common/header.css
index 44c549da27ce..188f257cdd35 100644
--- a/code/lib/cli/rendererAssets/common/header.css
+++ b/code/lib/cli/rendererAssets/common/header.css
@@ -1,4 +1,4 @@
-.wrapper {
+.storybook-header.wrapper {
   font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
   border-bottom: 1px solid rgba(0, 0, 0, 0.1);
   padding: 15px 20px;
@@ -7,12 +7,12 @@
   justify-content: space-between;
 }
 
-svg {
+.storybook-header svg {
   display: inline-block;
   vertical-align: top;
 }
 
-h1 {
+.storybook-header h1 {
   font-weight: 700;
   font-size: 20px;
   line-height: 1;
@@ -21,11 +21,11 @@ h1 {
   vertical-align: top;
 }
 
-button + button {
+.storybook-header button + button {
   margin-left: 10px;
 }
 
-.welcome {
+.storybook-header .welcome {
   color: #333;
   font-size: 14px;
   margin-right: 10px;
diff --git a/code/renderers/html/template/cli/js/Header.js b/code/renderers/html/template/cli/js/Header.js
index 925652350ede..f6a92514af56 100644
--- a/code/renderers/html/template/cli/js/Header.js
+++ b/code/renderers/html/template/cli/js/Header.js
@@ -5,7 +5,7 @@ export const createHeader = ({ user, onLogout, onLogin, onCreateAccount }) => {
   const header = document.createElement('header');
 
   const wrapper = document.createElement('div');
-  wrapper.className = 'wrapper';
+  wrapper.className = 'storybook-header wrapper';
 
   const logo = `<div>
     <svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
diff --git a/code/renderers/html/template/cli/ts-3-8/Header.ts b/code/renderers/html/template/cli/ts-3-8/Header.ts
index 94a31e6b5317..c7e2df80341f 100644
--- a/code/renderers/html/template/cli/ts-3-8/Header.ts
+++ b/code/renderers/html/template/cli/ts-3-8/Header.ts
@@ -12,7 +12,7 @@ export const createHeader = ({ user, onLogout, onLogin, onCreateAccount }: Heade
   const header = document.createElement('header');
 
   const wrapper = document.createElement('div');
-  wrapper.className = 'wrapper';
+  wrapper.className = 'storybook-header wrapper';
 
   const logo = `<div>
     <svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
diff --git a/code/renderers/preact/template/cli/Header.jsx b/code/renderers/preact/template/cli/Header.jsx
index 99ee8c54b51f..99188a40b670 100644
--- a/code/renderers/preact/template/cli/Header.jsx
+++ b/code/renderers/preact/template/cli/Header.jsx
@@ -5,7 +5,7 @@ import './header.css';
 
 export const Header = ({ user, onLogin, onLogout, onCreateAccount }) => (
   <header>
-    <div className="wrapper">
+    <div className="storybook-header wrapper">
       <div>
         <svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
           <g fill="none" fillRule="evenodd">
diff --git a/code/renderers/react/template/cli/js/Header.jsx b/code/renderers/react/template/cli/js/Header.jsx
index 3862422ed8ec..45f3aaa3e2a9 100644
--- a/code/renderers/react/template/cli/js/Header.jsx
+++ b/code/renderers/react/template/cli/js/Header.jsx
@@ -6,7 +6,7 @@ import './header.css';
 
 export const Header = ({ user, onLogin, onLogout, onCreateAccount }) => (
   <header>
-    <div className="wrapper">
+    <div className="storybook-header wrapper">
       <div>
         <svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
           <g fill="none" fillRule="evenodd">
diff --git a/code/renderers/react/template/cli/ts-3-8/Header.tsx b/code/renderers/react/template/cli/ts-3-8/Header.tsx
index dc3f3c19c31a..7901f160563f 100644
--- a/code/renderers/react/template/cli/ts-3-8/Header.tsx
+++ b/code/renderers/react/template/cli/ts-3-8/Header.tsx
@@ -16,7 +16,7 @@ interface HeaderProps {
 
 export const Header = ({ user, onLogin, onLogout, onCreateAccount }: HeaderProps) => (
   <header>
-    <div className="wrapper">
+    <div className="storybook-header wrapper">
       <div>
         <svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
           <g fill="none" fillRule="evenodd">
diff --git a/code/renderers/react/template/cli/ts-4-9/Header.tsx b/code/renderers/react/template/cli/ts-4-9/Header.tsx
index dc3f3c19c31a..7901f160563f 100644
--- a/code/renderers/react/template/cli/ts-4-9/Header.tsx
+++ b/code/renderers/react/template/cli/ts-4-9/Header.tsx
@@ -16,7 +16,7 @@ interface HeaderProps {
 
 export const Header = ({ user, onLogin, onLogout, onCreateAccount }: HeaderProps) => (
   <header>
-    <div className="wrapper">
+    <div className="storybook-header wrapper">
       <div>
         <svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
           <g fill="none" fillRule="evenodd">
diff --git a/code/renderers/svelte/template/cli/js/Header.svelte b/code/renderers/svelte/template/cli/js/Header.svelte
index 8350b35fd664..0a1957805a80 100644
--- a/code/renderers/svelte/template/cli/js/Header.svelte
+++ b/code/renderers/svelte/template/cli/js/Header.svelte
@@ -20,7 +20,7 @@
 </script>
 
 <header>
-  <div class="wrapper">
+  <div class="storybook-header wrapper">
     <div>
       <svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
         <g fill="none" fill-rule="evenodd">
diff --git a/code/renderers/vue/template/cli/Header.vue b/code/renderers/vue/template/cli/Header.vue
index bb35153df5fd..6ee0826229e8 100644
--- a/code/renderers/vue/template/cli/Header.vue
+++ b/code/renderers/vue/template/cli/Header.vue
@@ -1,6 +1,6 @@
 <template>
   <header>
-    <div class="wrapper">
+    <div class="storybook-header wrapper">
       <div>
         <svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
           <g fill="none" fill-rule="evenodd">
diff --git a/code/renderers/vue3/template/cli/js/Header.vue b/code/renderers/vue3/template/cli/js/Header.vue
index 24980d9256d2..48a6995702d8 100644
--- a/code/renderers/vue3/template/cli/js/Header.vue
+++ b/code/renderers/vue3/template/cli/js/Header.vue
@@ -1,6 +1,6 @@
 <template>
   <header>
-    <div class="wrapper">
+    <div class="storybook-header wrapper">
       <div>
         <svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
           <g fill="none" fill-rule="evenodd">
diff --git a/code/renderers/web-components/template/cli/js/Header.js b/code/renderers/web-components/template/cli/js/Header.js
index 9cb94e208ee3..515b45854dde 100644
--- a/code/renderers/web-components/template/cli/js/Header.js
+++ b/code/renderers/web-components/template/cli/js/Header.js
@@ -5,7 +5,7 @@ import './header.css';
 
 export const Header = ({ user, onLogin, onLogout, onCreateAccount }) => html`
   <header>
-    <div class="wrapper">
+    <div class="storybook-header wrapper">
       <div>
         <svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
           <g fill="none" fillRule="evenodd">
diff --git a/code/renderers/web-components/template/cli/ts-3-8/Header.ts b/code/renderers/web-components/template/cli/ts-3-8/Header.ts
index b14c312a9d85..40d6132dc9b2 100644
--- a/code/renderers/web-components/template/cli/ts-3-8/Header.ts
+++ b/code/renderers/web-components/template/cli/ts-3-8/Header.ts
@@ -16,7 +16,7 @@ export interface HeaderProps {
 
 export const Header = ({ user, onLogin, onLogout, onCreateAccount }: HeaderProps) => html`
   <header>
-    <div class="wrapper">
+    <div class="storybook-header wrapper">
       <div>
         <svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
           <g fill="none" fillRule="evenodd">

From 1ae534cfaf00da846f8d3a1ae2ef7d06c2c68839 Mon Sep 17 00:00:00 2001
From: JW <Amerlander@users.noreply.github.com>
Date: Tue, 11 Oct 2022 09:29:40 +0200
Subject: [PATCH 2/6] Scope page.css

---
 .../angular/template/cli/page.component.ts    |  2 +-
 .../nextjs/template/cli/js/Page.jsx           |  3 +--
 code/lib/cli/rendererAssets/common/page.css   | 20 +++++++++----------
 code/renderers/html/template/cli/js/Page.js   |  2 +-
 .../html/template/cli/ts-3-8/Page.ts          |  2 +-
 code/renderers/preact/template/cli/Page.jsx   |  2 +-
 code/renderers/react/template/cli/js/Page.jsx |  2 +-
 .../react/template/cli/ts-3-8/Page.tsx        |  2 +-
 .../svelte/template/cli/js/Page.svelte        |  2 +-
 code/renderers/vue/template/cli/Page.vue      |  2 +-
 code/renderers/vue3/template/cli/js/Page.vue  |  2 +-
 .../web-components/template/cli/js/Page.js    |  2 +-
 .../template/cli/ts-3-8/Page.ts               |  2 +-
 .../template/cli/ts-4-9/Page.ts               |  2 +-
 14 files changed, 23 insertions(+), 24 deletions(-)

diff --git a/code/frameworks/angular/template/cli/page.component.ts b/code/frameworks/angular/template/cli/page.component.ts
index 02cc3f06abcd..f3ae4868549e 100644
--- a/code/frameworks/angular/template/cli/page.component.ts
+++ b/code/frameworks/angular/template/cli/page.component.ts
@@ -10,7 +10,7 @@ import type { User } from './User';
       (onLogin)="doLogin()"
       (onCreateAccount)="doCreateAccount()"
     ></storybook-header>
-    <section>
+    <section class="storybook-page">
       <h2>Pages in Storybook</h2>
       <p>
         We recommend building UIs with a
diff --git a/code/frameworks/nextjs/template/cli/js/Page.jsx b/code/frameworks/nextjs/template/cli/js/Page.jsx
index c5fffe953be5..b7a31e7aa098 100644
--- a/code/frameworks/nextjs/template/cli/js/Page.jsx
+++ b/code/frameworks/nextjs/template/cli/js/Page.jsx
@@ -14,8 +14,7 @@ export const Page = () => {
         onLogout={() => setUser(undefined)}
         onCreateAccount={() => setUser({ name: 'Jane Doe' })}
       />
-
-      <section>
+      <section class="storybook-page">
         <h2>Pages in Storybook</h2>
         <p>
           We recommend building UIs with a{' '}
diff --git a/code/lib/cli/rendererAssets/common/page.css b/code/lib/cli/rendererAssets/common/page.css
index fb64fe462943..098dad118500 100644
--- a/code/lib/cli/rendererAssets/common/page.css
+++ b/code/lib/cli/rendererAssets/common/page.css
@@ -1,4 +1,4 @@
-section {
+.storybook-page {
   font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
   font-size: 14px;
   line-height: 24px;
@@ -8,7 +8,7 @@ section {
   color: #333;
 }
 
-section h2 {
+.storybook-page h2 {
   font-weight: 700;
   font-size: 32px;
   line-height: 1;
@@ -17,25 +17,25 @@ section h2 {
   vertical-align: top;
 }
 
-section p {
+.storybook-page p {
   margin: 1em 0;
 }
 
-section a {
+.storybook-page a {
   text-decoration: none;
   color: #1ea7fd;
 }
 
-section ul {
+.storybook-page ul {
   padding-left: 30px;
   margin: 1em 0;
 }
 
-section li {
+.storybook-page li {
   margin-bottom: 8px;
 }
 
-section .tip {
+.storybook-page .tip {
   display: inline-block;
   border-radius: 1em;
   font-size: 11px;
@@ -48,14 +48,14 @@ section .tip {
   vertical-align: top;
 }
 
-section .tip-wrapper {
+.storybook-page .tip-wrapper {
   font-size: 13px;
   line-height: 20px;
   margin-top: 40px;
   margin-bottom: 40px;
 }
 
-section .tip-wrapper svg {
+.storybook-page .tip-wrapper svg {
   display: inline-block;
   height: 12px;
   width: 12px;
@@ -64,6 +64,6 @@ section .tip-wrapper svg {
   margin-top: 3px;
 }
 
-section .tip-wrapper svg path {
+.storybook-page .tip-wrapper svg path {
   fill: #1ea7fd;
 }
diff --git a/code/renderers/html/template/cli/js/Page.js b/code/renderers/html/template/cli/js/Page.js
index a2b56d7cd5f6..227cddeb0255 100644
--- a/code/renderers/html/template/cli/js/Page.js
+++ b/code/renderers/html/template/cli/js/Page.js
@@ -34,7 +34,7 @@ export const createPage = () => {
   article.appendChild(header);
 
   const section = `
-  <section>
+  <section class="storybook-page">
     <h2>Pages in Storybook</h2>
     <p>
       We recommend building UIs with a
diff --git a/code/renderers/html/template/cli/ts-3-8/Page.ts b/code/renderers/html/template/cli/ts-3-8/Page.ts
index 4c4028ff1d99..3ff4211d8a8a 100644
--- a/code/renderers/html/template/cli/ts-3-8/Page.ts
+++ b/code/renderers/html/template/cli/ts-3-8/Page.ts
@@ -38,7 +38,7 @@ export const createPage = () => {
   article.appendChild(header);
 
   const section = `
-  <section>
+  <section class="storybook-page">
     <h2>Pages in Storybook</h2>
     <p>
       We recommend building UIs with a
diff --git a/code/renderers/preact/template/cli/Page.jsx b/code/renderers/preact/template/cli/Page.jsx
index 4344c071980c..09efa4c21a5a 100644
--- a/code/renderers/preact/template/cli/Page.jsx
+++ b/code/renderers/preact/template/cli/Page.jsx
@@ -14,7 +14,7 @@ export const Page = () => {
         onCreateAccount={() => setUser({ name: 'Jane Doe' })}
       />
 
-      <section>
+      <section class="storybook-page">
         <h2>Pages in Storybook</h2>
         <p>
           We recommend building UIs with a{' '}
diff --git a/code/renderers/react/template/cli/js/Page.jsx b/code/renderers/react/template/cli/js/Page.jsx
index c5fffe953be5..f7f3e2490ecf 100644
--- a/code/renderers/react/template/cli/js/Page.jsx
+++ b/code/renderers/react/template/cli/js/Page.jsx
@@ -15,7 +15,7 @@ export const Page = () => {
         onCreateAccount={() => setUser({ name: 'Jane Doe' })}
       />
 
-      <section>
+      <section class="storybook-page">
         <h2>Pages in Storybook</h2>
         <p>
           We recommend building UIs with a{' '}
diff --git a/code/renderers/react/template/cli/ts-3-8/Page.tsx b/code/renderers/react/template/cli/ts-3-8/Page.tsx
index 885f2b41f1ee..5bf08e344645 100644
--- a/code/renderers/react/template/cli/ts-3-8/Page.tsx
+++ b/code/renderers/react/template/cli/ts-3-8/Page.tsx
@@ -19,7 +19,7 @@ export const Page: React.FC = () => {
         onCreateAccount={() => setUser({ name: 'Jane Doe' })}
       />
 
-      <section>
+      <section class="storybook-page">
         <h2>Pages in Storybook</h2>
         <p>
           We recommend building UIs with a{' '}
diff --git a/code/renderers/svelte/template/cli/js/Page.svelte b/code/renderers/svelte/template/cli/js/Page.svelte
index d545d908e500..acc473c2518f 100644
--- a/code/renderers/svelte/template/cli/js/Page.svelte
+++ b/code/renderers/svelte/template/cli/js/Page.svelte
@@ -13,7 +13,7 @@
     on:createAccount={() => (user = { name: 'Jane Doe' })}
   />
 
-  <section>
+  <section class="storybook-page">
     <h2>Pages in Storybook</h2>
     <p>
       We recommend building UIs with a
diff --git a/code/renderers/vue/template/cli/Page.vue b/code/renderers/vue/template/cli/Page.vue
index 5a45445ed909..c57bfa7b10d5 100644
--- a/code/renderers/vue/template/cli/Page.vue
+++ b/code/renderers/vue/template/cli/Page.vue
@@ -7,7 +7,7 @@
       @onCreateAccount="onCreateAccount"
     />
 
-    <section>
+    <section class="storybook-page">
       <h2>Pages in Storybook</h2>
       <p>
         We recommend building UIs with a
diff --git a/code/renderers/vue3/template/cli/js/Page.vue b/code/renderers/vue3/template/cli/js/Page.vue
index bb9219ee5364..245401b72c4d 100644
--- a/code/renderers/vue3/template/cli/js/Page.vue
+++ b/code/renderers/vue3/template/cli/js/Page.vue
@@ -2,7 +2,7 @@
   <article>
     <my-header :user="user" @login="onLogin" @logout="onLogout" @createAccount="onCreateAccount" />
 
-    <section>
+    <section class="storybook-page">
       <h2>Pages in Storybook</h2>
       <p>
         We recommend building UIs with a
diff --git a/code/renderers/web-components/template/cli/js/Page.js b/code/renderers/web-components/template/cli/js/Page.js
index 17ea864c2bc2..9ee0db99fcb0 100644
--- a/code/renderers/web-components/template/cli/js/Page.js
+++ b/code/renderers/web-components/template/cli/js/Page.js
@@ -11,7 +11,7 @@ export const Page = ({ user, onLogin, onLogout, onCreateAccount }) => html`
       onCreateAccount,
     })}
 
-    <section>
+    <section class="storybook-page">
       <h2>Pages in Storybook</h2>
       <p>
         We recommend building UIs with a
diff --git a/code/renderers/web-components/template/cli/ts-3-8/Page.ts b/code/renderers/web-components/template/cli/ts-3-8/Page.ts
index 15764da44329..74711e4aa7e7 100644
--- a/code/renderers/web-components/template/cli/ts-3-8/Page.ts
+++ b/code/renderers/web-components/template/cli/ts-3-8/Page.ts
@@ -22,7 +22,7 @@ export const Page = ({ user, onLogin, onLogout, onCreateAccount }: PageProps) =>
       onCreateAccount,
     })}
 
-    <section>
+    <section class="storybook-page">
       <h2>Pages in Storybook</h2>
       <p>
         We recommend building UIs with a
diff --git a/code/renderers/web-components/template/cli/ts-4-9/Page.ts b/code/renderers/web-components/template/cli/ts-4-9/Page.ts
index 15764da44329..74711e4aa7e7 100644
--- a/code/renderers/web-components/template/cli/ts-4-9/Page.ts
+++ b/code/renderers/web-components/template/cli/ts-4-9/Page.ts
@@ -22,7 +22,7 @@ export const Page = ({ user, onLogin, onLogout, onCreateAccount }: PageProps) =>
       onCreateAccount,
     })}
 
-    <section>
+    <section class="storybook-page">
       <h2>Pages in Storybook</h2>
       <p>
         We recommend building UIs with a

From 95e96d99112dc7960f1ad9eaa4cc6532960733b3 Mon Sep 17 00:00:00 2001
From: Yann Braga <yannbf@gmail.com>
Date: Tue, 11 Oct 2022 11:47:26 +0200
Subject: [PATCH 3/6] fix css class assignment in react-like CLI templates

---
 code/renderers/preact/template/cli/Page.jsx           | 2 +-
 code/renderers/react/template/cli/js/Page.jsx         | 2 +-
 code/renderers/react/template/cli/ts-3-8/Page.tsx     | 2 +-
 code/renderers/web-components/template/cli/js/Page.js | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/code/renderers/preact/template/cli/Page.jsx b/code/renderers/preact/template/cli/Page.jsx
index 09efa4c21a5a..12ca119d0b04 100644
--- a/code/renderers/preact/template/cli/Page.jsx
+++ b/code/renderers/preact/template/cli/Page.jsx
@@ -14,7 +14,7 @@ export const Page = () => {
         onCreateAccount={() => setUser({ name: 'Jane Doe' })}
       />
 
-      <section class="storybook-page">
+      <section className="storybook-page">
         <h2>Pages in Storybook</h2>
         <p>
           We recommend building UIs with a{' '}
diff --git a/code/renderers/react/template/cli/js/Page.jsx b/code/renderers/react/template/cli/js/Page.jsx
index f7f3e2490ecf..c421401138ed 100644
--- a/code/renderers/react/template/cli/js/Page.jsx
+++ b/code/renderers/react/template/cli/js/Page.jsx
@@ -15,7 +15,7 @@ export const Page = () => {
         onCreateAccount={() => setUser({ name: 'Jane Doe' })}
       />
 
-      <section class="storybook-page">
+      <section className="storybook-page">
         <h2>Pages in Storybook</h2>
         <p>
           We recommend building UIs with a{' '}
diff --git a/code/renderers/react/template/cli/ts-3-8/Page.tsx b/code/renderers/react/template/cli/ts-3-8/Page.tsx
index 5bf08e344645..994d8908ed4b 100644
--- a/code/renderers/react/template/cli/ts-3-8/Page.tsx
+++ b/code/renderers/react/template/cli/ts-3-8/Page.tsx
@@ -19,7 +19,7 @@ export const Page: React.FC = () => {
         onCreateAccount={() => setUser({ name: 'Jane Doe' })}
       />
 
-      <section class="storybook-page">
+      <section className="storybook-page">
         <h2>Pages in Storybook</h2>
         <p>
           We recommend building UIs with a{' '}
diff --git a/code/renderers/web-components/template/cli/js/Page.js b/code/renderers/web-components/template/cli/js/Page.js
index 9ee0db99fcb0..9ee8789c7838 100644
--- a/code/renderers/web-components/template/cli/js/Page.js
+++ b/code/renderers/web-components/template/cli/js/Page.js
@@ -11,7 +11,7 @@ export const Page = ({ user, onLogin, onLogout, onCreateAccount }) => html`
       onCreateAccount,
     })}
 
-    <section class="storybook-page">
+    <section className="storybook-page">
       <h2>Pages in Storybook</h2>
       <p>
         We recommend building UIs with a

From ca3144ea5599f0d157a9626dcd5ac510d99b48f5 Mon Sep 17 00:00:00 2001
From: Yann Braga <yannbf@gmail.com>
Date: Wed, 12 Oct 2022 10:35:27 +0200
Subject: [PATCH 4/6] add storybook-header to angular template component

---
 code/frameworks/angular/template/cli/header.component.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/code/frameworks/angular/template/cli/header.component.ts b/code/frameworks/angular/template/cli/header.component.ts
index 603ac7cfeef5..608f0fd5e182 100644
--- a/code/frameworks/angular/template/cli/header.component.ts
+++ b/code/frameworks/angular/template/cli/header.component.ts
@@ -4,7 +4,7 @@ import type { User } from './User';
 @Component({
   selector: 'storybook-header',
   template: `<header>
-    <div class="wrapper">
+    <div class="storybook-header wrapper">
       <div>
         <svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
           <g fill="none" fillRule="evenodd">

From ecbcad7b9ddcf4b525c77da6b9e01b78b87eaf19 Mon Sep 17 00:00:00 2001
From: Yann Braga <yannbf@gmail.com>
Date: Wed, 19 Apr 2023 12:20:04 +0200
Subject: [PATCH 5/6] remove unnecessary wrapper css class

---
 .../angular/template/cli/header.component.ts        |  2 +-
 code/lib/cli/rendererAssets/common/header.css       |  2 +-
 code/renderers/html/template/cli/js/Header.js       |  2 +-
 code/renderers/html/template/cli/ts-3-8/Header.ts   |  2 +-
 code/renderers/preact/template/cli/Header.jsx       |  2 +-
 code/renderers/react/template/cli/js/Header.jsx     |  2 +-
 code/renderers/react/template/cli/ts-3-8/Header.tsx |  2 +-
 code/renderers/react/template/cli/ts-4-9/Header.tsx |  2 +-
 code/renderers/react/template/cli/ts-4-9/Page.tsx   |  2 +-
 code/renderers/svelte/template/cli/js/Header.svelte |  2 +-
 .../svelte/template/cli/ts-3-8/Header.svelte        |  2 +-
 .../svelte/template/cli/ts-3-8/Page.svelte          |  2 +-
 .../svelte/template/cli/ts-4-9/Header.svelte        |  2 +-
 .../svelte/template/cli/ts-4-9/Page.svelte          |  2 +-
 code/renderers/vue/template/cli/Header.vue          |  2 +-
 code/renderers/vue3/template/cli/js/Header.vue      |  2 +-
 code/renderers/vue3/template/cli/ts-3-8/Header.vue  |  2 +-
 code/renderers/vue3/template/cli/ts-3-8/Page.vue    | 13 ++++++++-----
 code/renderers/vue3/template/cli/ts-4-9/Header.vue  |  2 +-
 code/renderers/vue3/template/cli/ts-4-9/Page.vue    | 13 ++++++++-----
 .../web-components/template/cli/js/Header.js        |  2 +-
 .../web-components/template/cli/ts-3-8/Header.ts    |  2 +-
 .../web-components/template/cli/ts-4-9/Header.ts    |  2 +-
 23 files changed, 37 insertions(+), 31 deletions(-)

diff --git a/code/frameworks/angular/template/cli/header.component.ts b/code/frameworks/angular/template/cli/header.component.ts
index 608f0fd5e182..2980d3b3202e 100644
--- a/code/frameworks/angular/template/cli/header.component.ts
+++ b/code/frameworks/angular/template/cli/header.component.ts
@@ -4,7 +4,7 @@ import type { User } from './User';
 @Component({
   selector: 'storybook-header',
   template: `<header>
-    <div class="storybook-header wrapper">
+    <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">
diff --git a/code/lib/cli/rendererAssets/common/header.css b/code/lib/cli/rendererAssets/common/header.css
index 188f257cdd35..d9a70528a3a1 100644
--- a/code/lib/cli/rendererAssets/common/header.css
+++ b/code/lib/cli/rendererAssets/common/header.css
@@ -1,4 +1,4 @@
-.storybook-header.wrapper {
+.storybook-header {
   font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
   border-bottom: 1px solid rgba(0, 0, 0, 0.1);
   padding: 15px 20px;
diff --git a/code/renderers/html/template/cli/js/Header.js b/code/renderers/html/template/cli/js/Header.js
index f6a92514af56..30b4c5156ad6 100644
--- a/code/renderers/html/template/cli/js/Header.js
+++ b/code/renderers/html/template/cli/js/Header.js
@@ -5,7 +5,7 @@ export const createHeader = ({ user, onLogout, onLogin, onCreateAccount }) => {
   const header = document.createElement('header');
 
   const wrapper = document.createElement('div');
-  wrapper.className = 'storybook-header wrapper';
+  wrapper.className = 'storybook-header';
 
   const logo = `<div>
     <svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
diff --git a/code/renderers/html/template/cli/ts-3-8/Header.ts b/code/renderers/html/template/cli/ts-3-8/Header.ts
index c7e2df80341f..7bee76259651 100644
--- a/code/renderers/html/template/cli/ts-3-8/Header.ts
+++ b/code/renderers/html/template/cli/ts-3-8/Header.ts
@@ -12,7 +12,7 @@ export const createHeader = ({ user, onLogout, onLogin, onCreateAccount }: Heade
   const header = document.createElement('header');
 
   const wrapper = document.createElement('div');
-  wrapper.className = 'storybook-header wrapper';
+  wrapper.className = 'storybook-header';
 
   const logo = `<div>
     <svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
diff --git a/code/renderers/preact/template/cli/Header.jsx b/code/renderers/preact/template/cli/Header.jsx
index 99188a40b670..8a722e57d331 100644
--- a/code/renderers/preact/template/cli/Header.jsx
+++ b/code/renderers/preact/template/cli/Header.jsx
@@ -5,7 +5,7 @@ import './header.css';
 
 export const Header = ({ user, onLogin, onLogout, onCreateAccount }) => (
   <header>
-    <div className="storybook-header wrapper">
+    <div className="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">
diff --git a/code/renderers/react/template/cli/js/Header.jsx b/code/renderers/react/template/cli/js/Header.jsx
index 45f3aaa3e2a9..39e5226cffc1 100644
--- a/code/renderers/react/template/cli/js/Header.jsx
+++ b/code/renderers/react/template/cli/js/Header.jsx
@@ -6,7 +6,7 @@ import './header.css';
 
 export const Header = ({ user, onLogin, onLogout, onCreateAccount }) => (
   <header>
-    <div className="storybook-header wrapper">
+    <div className="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">
diff --git a/code/renderers/react/template/cli/ts-3-8/Header.tsx b/code/renderers/react/template/cli/ts-3-8/Header.tsx
index 7901f160563f..01504601311d 100644
--- a/code/renderers/react/template/cli/ts-3-8/Header.tsx
+++ b/code/renderers/react/template/cli/ts-3-8/Header.tsx
@@ -16,7 +16,7 @@ interface HeaderProps {
 
 export const Header = ({ user, onLogin, onLogout, onCreateAccount }: HeaderProps) => (
   <header>
-    <div className="storybook-header wrapper">
+    <div className="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">
diff --git a/code/renderers/react/template/cli/ts-4-9/Header.tsx b/code/renderers/react/template/cli/ts-4-9/Header.tsx
index 7901f160563f..01504601311d 100644
--- a/code/renderers/react/template/cli/ts-4-9/Header.tsx
+++ b/code/renderers/react/template/cli/ts-4-9/Header.tsx
@@ -16,7 +16,7 @@ interface HeaderProps {
 
 export const Header = ({ user, onLogin, onLogout, onCreateAccount }: HeaderProps) => (
   <header>
-    <div className="storybook-header wrapper">
+    <div className="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">
diff --git a/code/renderers/react/template/cli/ts-4-9/Page.tsx b/code/renderers/react/template/cli/ts-4-9/Page.tsx
index ec054e813895..e11748301390 100644
--- a/code/renderers/react/template/cli/ts-4-9/Page.tsx
+++ b/code/renderers/react/template/cli/ts-4-9/Page.tsx
@@ -19,7 +19,7 @@ export const Page: React.FC = () => {
         onCreateAccount={() => setUser({ name: 'Jane Doe' })}
       />
 
-      <section>
+      <section className="storybook-page">
         <h2>Pages in Storybook</h2>
         <p>
           We recommend building UIs with a{' '}
diff --git a/code/renderers/svelte/template/cli/js/Header.svelte b/code/renderers/svelte/template/cli/js/Header.svelte
index 0a1957805a80..a9c08f75db7d 100644
--- a/code/renderers/svelte/template/cli/js/Header.svelte
+++ b/code/renderers/svelte/template/cli/js/Header.svelte
@@ -20,7 +20,7 @@
 </script>
 
 <header>
-  <div class="storybook-header wrapper">
+  <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" fill-rule="evenodd">
diff --git a/code/renderers/svelte/template/cli/ts-3-8/Header.svelte b/code/renderers/svelte/template/cli/ts-3-8/Header.svelte
index e3b8d039f864..cb6f82d5e666 100644
--- a/code/renderers/svelte/template/cli/ts-3-8/Header.svelte
+++ b/code/renderers/svelte/template/cli/ts-3-8/Header.svelte
@@ -20,7 +20,7 @@
 </script>
 
 <header>
-  <div class="wrapper">
+  <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" fill-rule="evenodd">
diff --git a/code/renderers/svelte/template/cli/ts-3-8/Page.svelte b/code/renderers/svelte/template/cli/ts-3-8/Page.svelte
index c2c6369f565e..94cdb07ecd39 100644
--- a/code/renderers/svelte/template/cli/ts-3-8/Page.svelte
+++ b/code/renderers/svelte/template/cli/ts-3-8/Page.svelte
@@ -13,7 +13,7 @@
     on:createAccount={() => (user = { name: 'Jane Doe' })}
   />
 
-  <section>
+  <section class="storybook-page">
     <h2>Pages in Storybook</h2>
     <p>
       We recommend building UIs with a
diff --git a/code/renderers/svelte/template/cli/ts-4-9/Header.svelte b/code/renderers/svelte/template/cli/ts-4-9/Header.svelte
index e3b8d039f864..cb6f82d5e666 100644
--- a/code/renderers/svelte/template/cli/ts-4-9/Header.svelte
+++ b/code/renderers/svelte/template/cli/ts-4-9/Header.svelte
@@ -20,7 +20,7 @@
 </script>
 
 <header>
-  <div class="wrapper">
+  <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" fill-rule="evenodd">
diff --git a/code/renderers/svelte/template/cli/ts-4-9/Page.svelte b/code/renderers/svelte/template/cli/ts-4-9/Page.svelte
index c2c6369f565e..94cdb07ecd39 100644
--- a/code/renderers/svelte/template/cli/ts-4-9/Page.svelte
+++ b/code/renderers/svelte/template/cli/ts-4-9/Page.svelte
@@ -13,7 +13,7 @@
     on:createAccount={() => (user = { name: 'Jane Doe' })}
   />
 
-  <section>
+  <section class="storybook-page">
     <h2>Pages in Storybook</h2>
     <p>
       We recommend building UIs with a
diff --git a/code/renderers/vue/template/cli/Header.vue b/code/renderers/vue/template/cli/Header.vue
index 6ee0826229e8..4164c64bb144 100644
--- a/code/renderers/vue/template/cli/Header.vue
+++ b/code/renderers/vue/template/cli/Header.vue
@@ -1,6 +1,6 @@
 <template>
   <header>
-    <div class="storybook-header wrapper">
+    <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" fill-rule="evenodd">
diff --git a/code/renderers/vue3/template/cli/js/Header.vue b/code/renderers/vue3/template/cli/js/Header.vue
index 48a6995702d8..16d7740d96c4 100644
--- a/code/renderers/vue3/template/cli/js/Header.vue
+++ b/code/renderers/vue3/template/cli/js/Header.vue
@@ -1,6 +1,6 @@
 <template>
   <header>
-    <div class="storybook-header wrapper">
+    <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" fill-rule="evenodd">
diff --git a/code/renderers/vue3/template/cli/ts-3-8/Header.vue b/code/renderers/vue3/template/cli/ts-3-8/Header.vue
index bcccd2946325..b716db02b3f5 100644
--- a/code/renderers/vue3/template/cli/ts-3-8/Header.vue
+++ b/code/renderers/vue3/template/cli/ts-3-8/Header.vue
@@ -1,6 +1,6 @@
 <template>
   <header>
-    <div class="wrapper">
+    <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" fill-rule="evenodd">
diff --git a/code/renderers/vue3/template/cli/ts-3-8/Page.vue b/code/renderers/vue3/template/cli/ts-3-8/Page.vue
index 16bbd060a6cc..6a6e5eb1a4af 100644
--- a/code/renderers/vue3/template/cli/ts-3-8/Page.vue
+++ b/code/renderers/vue3/template/cli/ts-3-8/Page.vue
@@ -2,7 +2,7 @@
   <article>
     <my-header :user="user" @login="onLogin" @logout="onLogout" @create-account="onCreateAccount" />
 
-    <section>
+    <section class="storybook-page">
       <h2>Pages in Storybook</h2>
       <p>
         We recommend building UIs with a
@@ -28,7 +28,9 @@
       </ul>
       <p>
         Get a guided tutorial on component-driven development at
-        <a href="https://storybook.js.org/tutorials/" target="_blank" rel="noopener noreferrer">Storybook tutorials</a>
+        <a href="https://storybook.js.org/tutorials/" target="_blank" rel="noopener noreferrer"
+          >Storybook tutorials</a
+        >
         . Read more in the
         <a href="https://storybook.js.org/docs" target="_blank" rel="noopener noreferrer">docs</a>
         .
@@ -40,7 +42,9 @@
           <g fill="none" fill-rule="evenodd">
             <path
               d="M1.5 5.2h4.8c.3 0 .5.2.5.4v5.1c-.1.2-.3.3-.4.3H1.4a.5.5 0 01-.5-.4V5.7c0-.3.2-.5.5-.5zm0-2.1h6.9c.3 0 .5.2.5.4v7a.5.5 0 01-1 0V4H1.5a.5.5 0 010-1zm0-2.1h9c.3 0 .5.2.5.4v9.1a.5.5 0 01-1 0V2H1.5a.5.5 0 010-1zm4.3 5.2H2V10h3.8V6.2z"
-              id="a" fill="#999" />
+              id="a"
+              fill="#999"
+            />
           </g>
         </svg>
         Viewports addon in the toolbar
@@ -55,7 +59,7 @@ import MyHeader from './Header.vue';
 
 import { ref } from 'vue';
 
-const user = ref<{ name: string } | null>(null)
+const user = ref<{ name: string } | null>(null);
 
 const onLogin = () => {
   user.value = { name: 'Jane Doe' };
@@ -66,5 +70,4 @@ const onLogout = () => {
 const onCreateAccount = () => {
   user.value = { name: 'Jane Doe' };
 };
-
 </script>
diff --git a/code/renderers/vue3/template/cli/ts-4-9/Header.vue b/code/renderers/vue3/template/cli/ts-4-9/Header.vue
index bcccd2946325..b716db02b3f5 100644
--- a/code/renderers/vue3/template/cli/ts-4-9/Header.vue
+++ b/code/renderers/vue3/template/cli/ts-4-9/Header.vue
@@ -1,6 +1,6 @@
 <template>
   <header>
-    <div class="wrapper">
+    <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" fill-rule="evenodd">
diff --git a/code/renderers/vue3/template/cli/ts-4-9/Page.vue b/code/renderers/vue3/template/cli/ts-4-9/Page.vue
index 16bbd060a6cc..6a6e5eb1a4af 100644
--- a/code/renderers/vue3/template/cli/ts-4-9/Page.vue
+++ b/code/renderers/vue3/template/cli/ts-4-9/Page.vue
@@ -2,7 +2,7 @@
   <article>
     <my-header :user="user" @login="onLogin" @logout="onLogout" @create-account="onCreateAccount" />
 
-    <section>
+    <section class="storybook-page">
       <h2>Pages in Storybook</h2>
       <p>
         We recommend building UIs with a
@@ -28,7 +28,9 @@
       </ul>
       <p>
         Get a guided tutorial on component-driven development at
-        <a href="https://storybook.js.org/tutorials/" target="_blank" rel="noopener noreferrer">Storybook tutorials</a>
+        <a href="https://storybook.js.org/tutorials/" target="_blank" rel="noopener noreferrer"
+          >Storybook tutorials</a
+        >
         . Read more in the
         <a href="https://storybook.js.org/docs" target="_blank" rel="noopener noreferrer">docs</a>
         .
@@ -40,7 +42,9 @@
           <g fill="none" fill-rule="evenodd">
             <path
               d="M1.5 5.2h4.8c.3 0 .5.2.5.4v5.1c-.1.2-.3.3-.4.3H1.4a.5.5 0 01-.5-.4V5.7c0-.3.2-.5.5-.5zm0-2.1h6.9c.3 0 .5.2.5.4v7a.5.5 0 01-1 0V4H1.5a.5.5 0 010-1zm0-2.1h9c.3 0 .5.2.5.4v9.1a.5.5 0 01-1 0V2H1.5a.5.5 0 010-1zm4.3 5.2H2V10h3.8V6.2z"
-              id="a" fill="#999" />
+              id="a"
+              fill="#999"
+            />
           </g>
         </svg>
         Viewports addon in the toolbar
@@ -55,7 +59,7 @@ import MyHeader from './Header.vue';
 
 import { ref } from 'vue';
 
-const user = ref<{ name: string } | null>(null)
+const user = ref<{ name: string } | null>(null);
 
 const onLogin = () => {
   user.value = { name: 'Jane Doe' };
@@ -66,5 +70,4 @@ const onLogout = () => {
 const onCreateAccount = () => {
   user.value = { name: 'Jane Doe' };
 };
-
 </script>
diff --git a/code/renderers/web-components/template/cli/js/Header.js b/code/renderers/web-components/template/cli/js/Header.js
index 515b45854dde..19fea63604a8 100644
--- a/code/renderers/web-components/template/cli/js/Header.js
+++ b/code/renderers/web-components/template/cli/js/Header.js
@@ -5,7 +5,7 @@ import './header.css';
 
 export const Header = ({ user, onLogin, onLogout, onCreateAccount }) => html`
   <header>
-    <div class="storybook-header wrapper">
+    <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">
diff --git a/code/renderers/web-components/template/cli/ts-3-8/Header.ts b/code/renderers/web-components/template/cli/ts-3-8/Header.ts
index 40d6132dc9b2..d1ca01450c8a 100644
--- a/code/renderers/web-components/template/cli/ts-3-8/Header.ts
+++ b/code/renderers/web-components/template/cli/ts-3-8/Header.ts
@@ -16,7 +16,7 @@ export interface HeaderProps {
 
 export const Header = ({ user, onLogin, onLogout, onCreateAccount }: HeaderProps) => html`
   <header>
-    <div class="storybook-header wrapper">
+    <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">
diff --git a/code/renderers/web-components/template/cli/ts-4-9/Header.ts b/code/renderers/web-components/template/cli/ts-4-9/Header.ts
index b14c312a9d85..d1ca01450c8a 100644
--- a/code/renderers/web-components/template/cli/ts-4-9/Header.ts
+++ b/code/renderers/web-components/template/cli/ts-4-9/Header.ts
@@ -16,7 +16,7 @@ export interface HeaderProps {
 
 export const Header = ({ user, onLogin, onLogout, onCreateAccount }: HeaderProps) => html`
   <header>
-    <div class="wrapper">
+    <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">

From 87e80bc13391fc3907e2147c6517984a9600f114 Mon Sep 17 00:00:00 2001
From: Yann Braga <yannbf@gmail.com>
Date: Tue, 9 May 2023 08:49:33 +0200
Subject: [PATCH 6/6] update classes in more templates

---
 code/frameworks/nextjs/template/cli/js/Header.jsx     | 2 +-
 code/frameworks/nextjs/template/cli/js/Page.jsx       | 2 +-
 code/frameworks/nextjs/template/cli/ts-3-8/Header.tsx | 2 +-
 code/frameworks/nextjs/template/cli/ts-3-8/Page.tsx   | 2 +-
 code/frameworks/nextjs/template/cli/ts/Header.tsx     | 2 +-
 code/frameworks/nextjs/template/cli/ts/Page.tsx       | 2 +-
 code/renderers/html/template/cli/ts-4-9/Header.ts     | 2 +-
 code/renderers/html/template/cli/ts-4-9/Page.ts       | 2 +-
 code/renderers/web-components/template/cli/js/Page.js | 2 +-
 9 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/code/frameworks/nextjs/template/cli/js/Header.jsx b/code/frameworks/nextjs/template/cli/js/Header.jsx
index 3862422ed8ec..39e5226cffc1 100644
--- a/code/frameworks/nextjs/template/cli/js/Header.jsx
+++ b/code/frameworks/nextjs/template/cli/js/Header.jsx
@@ -6,7 +6,7 @@ import './header.css';
 
 export const Header = ({ user, onLogin, onLogout, onCreateAccount }) => (
   <header>
-    <div className="wrapper">
+    <div className="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">
diff --git a/code/frameworks/nextjs/template/cli/js/Page.jsx b/code/frameworks/nextjs/template/cli/js/Page.jsx
index b7a31e7aa098..6db1e0ac3f36 100644
--- a/code/frameworks/nextjs/template/cli/js/Page.jsx
+++ b/code/frameworks/nextjs/template/cli/js/Page.jsx
@@ -14,7 +14,7 @@ export const Page = () => {
         onLogout={() => setUser(undefined)}
         onCreateAccount={() => setUser({ name: 'Jane Doe' })}
       />
-      <section class="storybook-page">
+      <section className="storybook-page">
         <h2>Pages in Storybook</h2>
         <p>
           We recommend building UIs with a{' '}
diff --git a/code/frameworks/nextjs/template/cli/ts-3-8/Header.tsx b/code/frameworks/nextjs/template/cli/ts-3-8/Header.tsx
index dc3f3c19c31a..01504601311d 100644
--- a/code/frameworks/nextjs/template/cli/ts-3-8/Header.tsx
+++ b/code/frameworks/nextjs/template/cli/ts-3-8/Header.tsx
@@ -16,7 +16,7 @@ interface HeaderProps {
 
 export const Header = ({ user, onLogin, onLogout, onCreateAccount }: HeaderProps) => (
   <header>
-    <div className="wrapper">
+    <div className="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">
diff --git a/code/frameworks/nextjs/template/cli/ts-3-8/Page.tsx b/code/frameworks/nextjs/template/cli/ts-3-8/Page.tsx
index ec054e813895..e11748301390 100644
--- a/code/frameworks/nextjs/template/cli/ts-3-8/Page.tsx
+++ b/code/frameworks/nextjs/template/cli/ts-3-8/Page.tsx
@@ -19,7 +19,7 @@ export const Page: React.FC = () => {
         onCreateAccount={() => setUser({ name: 'Jane Doe' })}
       />
 
-      <section>
+      <section className="storybook-page">
         <h2>Pages in Storybook</h2>
         <p>
           We recommend building UIs with a{' '}
diff --git a/code/frameworks/nextjs/template/cli/ts/Header.tsx b/code/frameworks/nextjs/template/cli/ts/Header.tsx
index dc3f3c19c31a..01504601311d 100644
--- a/code/frameworks/nextjs/template/cli/ts/Header.tsx
+++ b/code/frameworks/nextjs/template/cli/ts/Header.tsx
@@ -16,7 +16,7 @@ interface HeaderProps {
 
 export const Header = ({ user, onLogin, onLogout, onCreateAccount }: HeaderProps) => (
   <header>
-    <div className="wrapper">
+    <div className="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">
diff --git a/code/frameworks/nextjs/template/cli/ts/Page.tsx b/code/frameworks/nextjs/template/cli/ts/Page.tsx
index ec054e813895..e11748301390 100644
--- a/code/frameworks/nextjs/template/cli/ts/Page.tsx
+++ b/code/frameworks/nextjs/template/cli/ts/Page.tsx
@@ -19,7 +19,7 @@ export const Page: React.FC = () => {
         onCreateAccount={() => setUser({ name: 'Jane Doe' })}
       />
 
-      <section>
+      <section className="storybook-page">
         <h2>Pages in Storybook</h2>
         <p>
           We recommend building UIs with a{' '}
diff --git a/code/renderers/html/template/cli/ts-4-9/Header.ts b/code/renderers/html/template/cli/ts-4-9/Header.ts
index 94a31e6b5317..7bee76259651 100644
--- a/code/renderers/html/template/cli/ts-4-9/Header.ts
+++ b/code/renderers/html/template/cli/ts-4-9/Header.ts
@@ -12,7 +12,7 @@ export const createHeader = ({ user, onLogout, onLogin, onCreateAccount }: Heade
   const header = document.createElement('header');
 
   const wrapper = document.createElement('div');
-  wrapper.className = 'wrapper';
+  wrapper.className = 'storybook-header';
 
   const logo = `<div>
     <svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
diff --git a/code/renderers/html/template/cli/ts-4-9/Page.ts b/code/renderers/html/template/cli/ts-4-9/Page.ts
index 4c4028ff1d99..3ff4211d8a8a 100644
--- a/code/renderers/html/template/cli/ts-4-9/Page.ts
+++ b/code/renderers/html/template/cli/ts-4-9/Page.ts
@@ -38,7 +38,7 @@ export const createPage = () => {
   article.appendChild(header);
 
   const section = `
-  <section>
+  <section class="storybook-page">
     <h2>Pages in Storybook</h2>
     <p>
       We recommend building UIs with a
diff --git a/code/renderers/web-components/template/cli/js/Page.js b/code/renderers/web-components/template/cli/js/Page.js
index 9ee8789c7838..9ee0db99fcb0 100644
--- a/code/renderers/web-components/template/cli/js/Page.js
+++ b/code/renderers/web-components/template/cli/js/Page.js
@@ -11,7 +11,7 @@ export const Page = ({ user, onLogin, onLogout, onCreateAccount }) => html`
       onCreateAccount,
     })}
 
-    <section className="storybook-page">
+    <section class="storybook-page">
       <h2>Pages in Storybook</h2>
       <p>
         We recommend building UIs with a