| 1 | import "core-js/modules/es.object.assign.js";
|
| 2 |
|
| 3 | function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
| 4 |
|
| 5 | import React from 'react';
|
| 6 | import { styled } from '@storybook/theming';
|
| 7 | import { window } from 'global';
|
| 8 | import { Spaced } from '../spaced/Spaced';
|
| 9 | import { Preview } from './Preview';
|
| 10 | import { Story } from './Story';
|
| 11 | import { Button } from '../Button/Button';
|
| 12 | import * as Source from './Source.stories';
|
| 13 | export default {
|
| 14 | title: 'Docs/Preview',
|
| 15 | component: Preview
|
| 16 | };
|
| 17 | export var CodeCollapsed = function CodeCollapsed() {
|
| 18 | return React.createElement(Preview, {
|
| 19 | isExpanded: false,
|
| 20 | withSource: Source.JSX.args
|
| 21 | }, React.createElement(Button, {
|
| 22 | secondary: true
|
| 23 | }, "Button 1"));
|
| 24 | };
|
| 25 | CodeCollapsed.displayName = "CodeCollapsed";
|
| 26 | export var CodeExpanded = function CodeExpanded() {
|
| 27 | return React.createElement(Preview, {
|
| 28 | isExpanded: true,
|
| 29 | withSource: Source.JSX.args
|
| 30 | }, React.createElement(Button, {
|
| 31 | secondary: true
|
| 32 | }, "Button 1"));
|
| 33 | };
|
| 34 | CodeExpanded.displayName = "CodeExpanded";
|
| 35 | export var CodeError = function CodeError() {
|
| 36 | return React.createElement(Preview, {
|
| 37 | isExpanded: true,
|
| 38 | withSource: Source.SourceUnavailable.args
|
| 39 | }, React.createElement(Button, {
|
| 40 | secondary: true
|
| 41 | }, "Button 1"));
|
| 42 | };
|
| 43 | CodeError.displayName = "CodeError";
|
| 44 | export var Single = function Single() {
|
| 45 | return React.createElement(Preview, null, React.createElement(Button, {
|
| 46 | secondary: true
|
| 47 | }, "Button 1"));
|
| 48 | };
|
| 49 | Single.displayName = "Single";
|
| 50 | export var Row = function Row() {
|
| 51 | return React.createElement(Preview, null, React.createElement(Button, {
|
| 52 | secondary: true
|
| 53 | }, "Button 1"), React.createElement(Button, {
|
| 54 | secondary: true
|
| 55 | }, "Button 2"), React.createElement(Button, {
|
| 56 | secondary: true
|
| 57 | }, "Button 3"), React.createElement(Button, {
|
| 58 | secondary: true
|
| 59 | }, "Button 4"), React.createElement(Button, {
|
| 60 | secondary: true
|
| 61 | }, "Button 5"), React.createElement(Button, {
|
| 62 | secondary: true
|
| 63 | }, "Button 6"), React.createElement(Button, {
|
| 64 | secondary: true
|
| 65 | }, "Button 7"));
|
| 66 | };
|
| 67 | Row.displayName = "Row";
|
| 68 | export var Column = function Column() {
|
| 69 | return React.createElement(Preview, {
|
| 70 | isColumn: true
|
| 71 | }, React.createElement(Button, {
|
| 72 | secondary: true
|
| 73 | }, "Button 1"), React.createElement(Button, {
|
| 74 | secondary: true
|
| 75 | }, "Button 2"), React.createElement(Button, {
|
| 76 | secondary: true
|
| 77 | }, "Button 3"));
|
| 78 | };
|
| 79 | Column.displayName = "Column";
|
| 80 | export var GridWith3Columns = function GridWith3Columns() {
|
| 81 | return React.createElement(Preview, {
|
| 82 | columns: 3
|
| 83 | }, React.createElement(Button, {
|
| 84 | secondary: true
|
| 85 | }, "Button 1"), React.createElement(Button, {
|
| 86 | secondary: true
|
| 87 | }, "Button 2"), React.createElement(Button, {
|
| 88 | secondary: true
|
| 89 | }, "Button 3"), React.createElement(Button, {
|
| 90 | secondary: true
|
| 91 | }, "Button 4"), React.createElement(Button, {
|
| 92 | secondary: true
|
| 93 | }, "Button 5"), React.createElement(Button, {
|
| 94 | secondary: true
|
| 95 | }, "Button 6"), React.createElement(Button, {
|
| 96 | secondary: true
|
| 97 | }, "Button 7 long long long long long title"), React.createElement(Button, {
|
| 98 | secondary: true
|
| 99 | }, "Button 8"), React.createElement(Button, {
|
| 100 | secondary: true
|
| 101 | }, "Button 9"), React.createElement(Button, {
|
| 102 | secondary: true
|
| 103 | }, "Button 10"), React.createElement(Button, {
|
| 104 | secondary: true
|
| 105 | }, "Button 11"), React.createElement(Button, {
|
| 106 | secondary: true
|
| 107 | }, "Button 12"), React.createElement(Button, {
|
| 108 | secondary: true
|
| 109 | }, "Button 13"), React.createElement(Button, {
|
| 110 | secondary: true
|
| 111 | }, "Button 14"), React.createElement(Button, {
|
| 112 | secondary: true
|
| 113 | }, "Button 15"), React.createElement(Button, {
|
| 114 | secondary: true
|
| 115 | }, "Button 16"), React.createElement(Button, {
|
| 116 | secondary: true
|
| 117 | }, "Button 17"), React.createElement(Button, {
|
| 118 | secondary: true
|
| 119 | }, "Button 18"), React.createElement(Button, {
|
| 120 | secondary: true
|
| 121 | }, "Button 19"), React.createElement(Button, {
|
| 122 | secondary: true
|
| 123 | }, "Button 20"));
|
| 124 | };
|
| 125 | GridWith3Columns.displayName = "GridWith3Columns";
|
| 126 |
|
| 127 | var buttonFn = function buttonFn() {
|
| 128 | return React.createElement(Button, {
|
| 129 | secondary: true
|
| 130 | }, "Hello Button");
|
| 131 | };
|
| 132 |
|
| 133 | buttonFn.displayName = "buttonFn";
|
| 134 | export var WithToolbar = function WithToolbar() {
|
| 135 | return React.createElement(Preview, {
|
| 136 | withToolbar: true
|
| 137 | }, React.createElement(Story, {
|
| 138 | inline: true,
|
| 139 | storyFn: buttonFn,
|
| 140 | title: "with toolbar"
|
| 141 | }));
|
| 142 | };
|
| 143 | WithToolbar.displayName = "WithToolbar";
|
| 144 | var Horizontal = styled(function (props) {
|
| 145 | return React.createElement(Spaced, _extends({
|
| 146 | col: 1
|
| 147 | }, props));
|
| 148 | })({
|
| 149 | display: 'grid',
|
| 150 | gridTemplateColumns: '100px calc(100vw + 100px) 100px'
|
| 151 | });
|
| 152 | export var Wide = function Wide() {
|
| 153 | return React.createElement(Preview, {
|
| 154 | withToolbar: true
|
| 155 | }, React.createElement(Horizontal, null, React.createElement("div", null, "START"), React.createElement("div", null, "middle"), React.createElement("div", null, "END")));
|
| 156 | };
|
| 157 | Wide.displayName = "Wide";
|
| 158 | export var WithToolbarMulti = function WithToolbarMulti() {
|
| 159 | return React.createElement(Preview, {
|
| 160 | withToolbar: true
|
| 161 | }, React.createElement(Story, {
|
| 162 | inline: true,
|
| 163 | storyFn: buttonFn,
|
| 164 | title: "story1"
|
| 165 | }), React.createElement(Story, {
|
| 166 | inline: true,
|
| 167 | storyFn: buttonFn,
|
| 168 | title: "story2"
|
| 169 | }));
|
| 170 | };
|
| 171 | WithToolbarMulti.displayName = "WithToolbarMulti";
|
| 172 | export var WithFullscreenSingle = function WithFullscreenSingle() {
|
| 173 | return React.createElement(Preview, {
|
| 174 | withToolbar: true
|
| 175 | }, React.createElement(Story, {
|
| 176 | inline: true,
|
| 177 | storyFn: buttonFn,
|
| 178 | title: "story1",
|
| 179 | parameters: {
|
| 180 | layout: 'fullscreen'
|
| 181 | }
|
| 182 | }));
|
| 183 | };
|
| 184 | WithFullscreenSingle.displayName = "WithFullscreenSingle";
|
| 185 | export var WithFullscreenMulti = function WithFullscreenMulti() {
|
| 186 | return React.createElement(Preview, {
|
| 187 | withToolbar: true
|
| 188 | }, React.createElement(Story, {
|
| 189 | inline: true,
|
| 190 | storyFn: buttonFn,
|
| 191 | title: "story1",
|
| 192 | parameters: {
|
| 193 | layout: 'fullscreen'
|
| 194 | }
|
| 195 | }), React.createElement(Story, {
|
| 196 | inline: true,
|
| 197 | storyFn: buttonFn,
|
| 198 | title: "story2",
|
| 199 | parameters: {
|
| 200 | layout: 'fullscreen'
|
| 201 | }
|
| 202 | }));
|
| 203 | };
|
| 204 | WithFullscreenMulti.displayName = "WithFullscreenMulti";
|
| 205 | export var WithCenteredSingle = function WithCenteredSingle() {
|
| 206 | return React.createElement(Preview, {
|
| 207 | withToolbar: true
|
| 208 | }, React.createElement(Story, {
|
| 209 | inline: true,
|
| 210 | storyFn: buttonFn,
|
| 211 | title: "story1",
|
| 212 | parameters: {
|
| 213 | layout: 'centered'
|
| 214 | }
|
| 215 | }));
|
| 216 | };
|
| 217 | WithCenteredSingle.displayName = "WithCenteredSingle";
|
| 218 | export var WithCenteredMulti = function WithCenteredMulti() {
|
| 219 | return React.createElement(Preview, {
|
| 220 | withToolbar: true
|
| 221 | }, React.createElement(Story, {
|
| 222 | inline: true,
|
| 223 | storyFn: buttonFn,
|
| 224 | title: "story1",
|
| 225 | parameters: {
|
| 226 | layout: 'centered'
|
| 227 | }
|
| 228 | }), React.createElement(Story, {
|
| 229 | inline: true,
|
| 230 | storyFn: buttonFn,
|
| 231 | title: "story2",
|
| 232 | parameters: {
|
| 233 | layout: 'centered'
|
| 234 | }
|
| 235 | }));
|
| 236 | };
|
| 237 | WithCenteredMulti.displayName = "WithCenteredMulti";
|
| 238 | export var WithAdditionalActions = function WithAdditionalActions() {
|
| 239 | return React.createElement(Preview, {
|
| 240 | additionalActions: [{
|
| 241 | title: 'Open on GitHub',
|
| 242 | onClick: function onClick() {
|
| 243 | window.location.href = 'https://github.com/storybookjs/storybook/blob/next/lib/components/src/blocks/Preview.stories.tsx#L140-L147';
|
| 244 | }
|
| 245 | }]
|
| 246 | }, React.createElement(Button, {
|
| 247 | secondary: true
|
| 248 | }, "Button 1"));
|
| 249 | };
|
| 250 | WithAdditionalActions.displayName = "WithAdditionalActions"; |
| \ | No newline at end of file |