GitHub/storybook
1
0
Fork 0
mirror of https://github.com/storybookjs/storybook.git synced 2025-04-07 07:21:17 +08:00
Code Issues Packages Projects Releases Wiki Activity

remove unnecessary wrapper css class

Browse Source
This commit is contained in:
Yann Braga 2023-04-19 12:20:04 +02:00
parent ca3144ea55
commit ecbcad7b9d
23 changed files with 37 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
code/frameworks/angular/template/cli/header.component.ts
View File

@ -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">

2
code/lib/cli/rendererAssets/common/header.css
View File

@ -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;

2
code/renderers/html/template/cli/js/Header.js
View File

@ -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">

2
code/renderers/html/template/cli/ts-3-8/Header.ts
View File

@ -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">

2
code/renderers/preact/template/cli/Header.jsx
View File

@ -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">

2
code/renderers/react/template/cli/js/Header.jsx
View File

@ -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">

2
code/renderers/react/template/cli/ts-3-8/Header.tsx
View File

@ -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">

2
code/renderers/react/template/cli/ts-4-9/Header.tsx
View File

@ -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">

2
code/renderers/react/template/cli/ts-4-9/Page.tsx
View File

@ -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{' '}

2
code/renderers/svelte/template/cli/js/Header.svelte
View File

@ -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">

2
code/renderers/svelte/template/cli/ts-3-8/Header.svelte
View File

@ -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">

2
code/renderers/svelte/template/cli/ts-3-8/Page.svelte
View File

@ -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

2
code/renderers/svelte/template/cli/ts-4-9/Header.svelte
View File

@ -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">

2
code/renderers/svelte/template/cli/ts-4-9/Page.svelte
View File

@ -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

2
code/renderers/vue/template/cli/Header.vue
View File

@ -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">

2
code/renderers/vue3/template/cli/js/Header.vue
View File

@ -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">

2
code/renderers/vue3/template/cli/ts-3-8/Header.vue
View File

@ -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">

13
code/renderers/vue3/template/cli/ts-3-8/Page.vue
View File

@ -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>

2
code/renderers/vue3/template/cli/ts-4-9/Header.vue
View File

@ -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">

13
code/renderers/vue3/template/cli/ts-4-9/Page.vue
View File

@ -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>

2
code/renderers/web-components/template/cli/js/Header.js
View File

@ -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">

2
code/renderers/web-components/template/cli/ts-3-8/Header.ts
View File

@ -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">

2
code/renderers/web-components/template/cli/ts-4-9/Header.ts
View File

@ -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">