remove unnecessary wrapper css class

storybookjs · Apr 19, 2023 · f93fb35 · f93fb35
1 parent ca3144e
commit f93fb35
Show file tree

Hide file tree

Showing 20 changed files with 34 additions and 28 deletions.
diff --git 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/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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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">