mirror of
https://github.com/TryGhost/Ghost.git
synced 2024-12-24 19:33:02 +03:00
80b9030805
refs https://github.com/TryGhost/Team/issues/3338 * background and button color can be passed in the script tag dataset * text color is calculated automatically from background/button color
37 lines
1.1 KiB
TypeScript
37 lines
1.1 KiB
TypeScript
import React from 'react';
|
|
|
|
import type { Preview } from "@storybook/react";
|
|
import './storybook.css';
|
|
|
|
const transparencyGrid = `url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Ctitle%3ERectangle%3C/title%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath fill='%23F2F6F8' d='M0 0h24v24H0z'/%3E%3Cpath fill='%23E5ECF0' d='M0 0h12v12H0zM12 12h12v12H12z'/%3E%3C/g%3E%3C/svg%3E")`
|
|
|
|
const preview: Preview = {
|
|
parameters: {
|
|
actions: { argTypesRegex: "^on[A-Z].*" },
|
|
controls: {
|
|
matchers: {
|
|
color: /(background|color)$/i,
|
|
date: /Date$/,
|
|
},
|
|
},
|
|
options: {
|
|
storySort: {
|
|
order: ['Global', 'Settings', 'Experimental'],
|
|
},
|
|
},
|
|
},
|
|
decorators: [
|
|
(Story, context) => (
|
|
<div className="signup-form" style={{
|
|
padding: '24px',
|
|
backgroundImage: context.tags.includes('transparency-grid') ? transparencyGrid : undefined
|
|
}}>
|
|
{/* 👇 Decorators in Storybook also accept a function. Replace <Story/> with Story() to enable it */}
|
|
<Story />
|
|
</div>
|
|
),
|
|
],
|
|
};
|
|
|
|
export default preview;
|