@storybook/components 6.4.0-beta.24 → 6.4.0-beta.25

package/dist/modern/blocks/EmptyBlock.js

@@ -0,0 +1,24 @@
+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); }
+
+import React from 'react';
+import { styled } from '@storybook/theming';
+import { transparentize } from 'polished';
+import { withReset } from '../typography/shared';
+const Wrapper = styled.div(withReset, ({
+  theme
+}) => ({
+  backgroundColor: theme.base === 'light' ? 'rgba(0,0,0,.01)' : 'rgba(255,255,255,.01)',
+  borderRadius: theme.appBorderRadius,
+  border: `1px dashed ${theme.appBorderColor}`,
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  padding: 20,
+  margin: '25px 0 40px',
+  color: transparentize(0.3, theme.color.defaultText),
+  fontSize: theme.typography.size.s2
+}));
+export const EmptyBlock = props => /*#__PURE__*/React.createElement(Wrapper, _extends({}, props, {
+  className: "docblock-emptyblock"
+}));
+EmptyBlock.displayName = "EmptyBlock";

package/dist/modern/blocks/EmptyBlock.stories.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import { EmptyBlock } from './EmptyBlock';
+export default {
+  title: 'Docs/EmptyBlock',
+  component: EmptyBlock
+};
+export const error = () => /*#__PURE__*/React.createElement(EmptyBlock, null, "Generic error message");
+error.displayName = "error";

package/dist/modern/blocks/IFrame.js

@@ -0,0 +1,65 @@
+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); }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+import React, { Component } from 'react';
+import global from 'global';
+const {
+  window: globalWindow
+} = global;
+export class IFrame extends Component {
+  constructor(...args) {
+    super(...args);
+    this.iframe = null;
+  }
+
+  componentDidMount() {
+    const {
+      id
+    } = this.props;
+    this.iframe = globalWindow.document.getElementById(id);
+  }
+
+  shouldComponentUpdate(nextProps) {
+    const {
+      scale
+    } = nextProps; // eslint-disable-next-line react/destructuring-assignment
+
+    if (scale !== this.props.scale) {
+      this.setIframeBodyStyle({
+        width: `${scale * 100}%`,
+        height: `${scale * 100}%`,
+        transform: `scale(${1 / scale})`,
+        transformOrigin: 'top left'
+      });
+    }
+
+    return false;
+  }
+
+  setIframeBodyStyle(style) {
+    return Object.assign(this.iframe.contentDocument.body.style, style);
+  }
+
+  render() {
+    const _this$props = this.props,
+          {
+      id,
+      title,
+      src,
+      allowFullScreen
+    } = _this$props,
+          rest = _objectWithoutPropertiesLoose(_this$props, ["id", "title", "src", "allowFullScreen", "scale"]);
+
+    return /*#__PURE__*/React.createElement("iframe", _extends({
+      id: id,
+      title: title,
+      src: src,
+      allowFullScreen: allowFullScreen // @ts-ignore
+      ,
+      loading: "lazy"
+    }, rest));
+  }
+
+}
+IFrame.displayName = "IFrame";

package/dist/modern/blocks/IconGallery.js

@@ -0,0 +1,68 @@
+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); }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+import React from 'react';
+import { styled } from '@storybook/theming';
+import { ResetWrapper } from '../typography/DocumentFormatting';
+import { getBlockBackgroundStyle } from './BlockBackgroundStyles';
+const ItemLabel = styled.div(({
+  theme
+}) => ({
+  fontFamily: theme.typography.fonts.base,
+  fontSize: theme.typography.size.s2,
+  color: theme.color.defaultText,
+  marginLeft: 10,
+  lineHeight: 1.2
+}));
+const ItemSpecimen = styled.div(({
+  theme
+}) => Object.assign({}, getBlockBackgroundStyle(theme), {
+  overflow: 'hidden',
+  height: 40,
+  width: 40,
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  flex: 'none',
+  '> img, > svg': {
+    width: 20,
+    height: 20
+  }
+}));
+const Item = styled.div({
+  display: 'inline-flex',
+  flexDirection: 'row',
+  alignItems: 'center',
+  flex: '0 1 calc(20% - 10px)',
+  minWidth: 120,
+  margin: '0px 10px 30px 0'
+});
+const List = styled.div({
+  display: 'flex',
+  flexFlow: 'row wrap'
+});
+
+/**
+ * An individual icon with a caption and an example (passed as `children`).
+ */
+export const IconItem = ({
+  name,
+  children
+}) => /*#__PURE__*/React.createElement(Item, null, /*#__PURE__*/React.createElement(ItemSpecimen, null, children), /*#__PURE__*/React.createElement(ItemLabel, null, name));
+IconItem.displayName = "IconItem";
+
+/**
+ * Show a grid of icons, as specified by `IconItem`.
+ */
+export const IconGallery = (_ref) => {
+  let {
+    children
+  } = _ref,
+      props = _objectWithoutPropertiesLoose(_ref, ["children"]);
+
+  return /*#__PURE__*/React.createElement(ResetWrapper, null, /*#__PURE__*/React.createElement(List, _extends({}, props, {
+    className: "docblock-icongallery"
+  }), children));
+};
+IconGallery.displayName = "IconGallery";

package/dist/modern/blocks/IconGallery.stories.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import { IconItem, IconGallery } from './IconGallery';
+import { Icons as ExampleIcon } from '../icon/icon';
+export default {
+  title: 'Docs/IconGallery',
+  component: IconGallery
+};
+export const defaultStyle = () => /*#__PURE__*/React.createElement(IconGallery, null, /*#__PURE__*/React.createElement(IconItem, {
+  name: "add"
+}, /*#__PURE__*/React.createElement(ExampleIcon, {
+  icon: "add"
+})), /*#__PURE__*/React.createElement(IconItem, {
+  name: "subtract"
+}, /*#__PURE__*/React.createElement(ExampleIcon, {
+  icon: "subtract"
+})), /*#__PURE__*/React.createElement(IconItem, {
+  name: "home"
+}, /*#__PURE__*/React.createElement(ExampleIcon, {
+  icon: "home"
+})), /*#__PURE__*/React.createElement(IconItem, {
+  name: "facehappy"
+}, /*#__PURE__*/React.createElement(ExampleIcon, {
+  icon: "facehappy"
+})), /*#__PURE__*/React.createElement(IconItem, {
+  name: "bar"
+}, /*#__PURE__*/React.createElement("img", {
+  src: "https://place-hold.it/50x50",
+  alt: "example"
+})), /*#__PURE__*/React.createElement(IconItem, {
+  name: "bar"
+}, /*#__PURE__*/React.createElement("img", {
+  src: "https://place-hold.it/50x50",
+  alt: "example"
+})));
+defaultStyle.displayName = "defaultStyle";

package/dist/modern/blocks/Preview.js

@@ -0,0 +1,262 @@
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+import "core-js/modules/es.array.reduce.js";
+
+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); }
+
+import React, { Children, useCallback, useState } from 'react';
+import { darken } from 'polished';
+import { styled } from '@storybook/theming';
+import global from 'global';
+import { getBlockBackgroundStyle } from './BlockBackgroundStyles';
+import { Source } from './Source';
+import { ActionBar } from '../ActionBar/ActionBar';
+import { Toolbar } from './Toolbar';
+import { ZoomContext } from './ZoomContext';
+import { Zoom } from '../Zoom/Zoom';
+const ChildrenContainer = styled.div(({
+  isColumn,
+  columns,
+  layout
+}) => ({
+  display: isColumn || !columns ? 'block' : 'flex',
+  position: 'relative',
+  flexWrap: 'wrap',
+  overflow: 'auto',
+  flexDirection: isColumn ? 'column' : 'row',
+  '& .innerZoomElementWrapper > *': isColumn ? {
+    width: layout !== 'fullscreen' ? 'calc(100% - 20px)' : '100%',
+    display: 'block'
+  } : {
+    maxWidth: layout !== 'fullscreen' ? 'calc(100% - 20px)' : '100%',
+    display: 'inline-block'
+  }
+}), ({
+  layout = 'padded'
+}) => layout === 'centered' || layout === 'padded' ? {
+  padding: '30px 20px',
+  margin: -10,
+  '& .innerZoomElementWrapper > *': {
+    width: 'auto',
+    border: '10px solid transparent!important'
+  }
+} : {}, ({
+  layout = 'padded'
+}) => layout === 'centered' ? {
+  display: 'flex',
+  justifyContent: 'center',
+  justifyItems: 'center',
+  alignContent: 'center',
+  alignItems: 'center'
+} : {}, ({
+  columns
+}) => columns && columns > 1 ? {
+  '.innerZoomElementWrapper > *': {
+    minWidth: `calc(100% / ${columns} - 20px)`
+  }
+} : {});
+const StyledSource = styled(Source)(({
+  theme
+}) => ({
+  margin: 0,
+  borderTopLeftRadius: 0,
+  borderTopRightRadius: 0,
+  borderBottomLeftRadius: theme.appBorderRadius,
+  borderBottomRightRadius: theme.appBorderRadius,
+  border: 'none',
+  background: theme.base === 'light' ? 'rgba(0, 0, 0, 0.85)' : darken(0.05, theme.background.content),
+  color: theme.color.lightest,
+  button: {
+    background: theme.base === 'light' ? 'rgba(0, 0, 0, 0.85)' : darken(0.05, theme.background.content)
+  }
+}));
+const PreviewContainer = styled.div(({
+  theme,
+  withSource,
+  isExpanded
+}) => Object.assign({
+  position: 'relative',
+  overflow: 'hidden',
+  margin: '25px 0 40px'
+}, getBlockBackgroundStyle(theme), {
+  borderBottomLeftRadius: withSource && isExpanded && 0,
+  borderBottomRightRadius: withSource && isExpanded && 0,
+  borderBottomWidth: isExpanded && 0
+}), ({
+  withToolbar
+}) => withToolbar && {
+  paddingTop: 40
+});
+
+const getSource = (withSource, expanded, setExpanded) => {
+  switch (true) {
+    case !!(withSource && withSource.error):
+      {
+        return {
+          source: null,
+          actionItem: {
+            title: 'No code available',
+            className: 'docblock-code-toggle docblock-code-toggle--disabled',
+            disabled: true,
+            onClick: () => setExpanded(false)
+          }
+        };
+      }
+
+    case expanded:
+      {
+        return {
+          source: /*#__PURE__*/React.createElement(StyledSource, _extends({}, withSource, {
+            dark: true
+          })),
+          actionItem: {
+            title: 'Hide code',
+            className: 'docblock-code-toggle docblock-code-toggle--expanded',
+            onClick: () => setExpanded(false)
+          }
+        };
+      }
+
+    default:
+      {
+        return {
+          source: /*#__PURE__*/React.createElement(StyledSource, _extends({}, withSource, {
+            dark: true
+          })),
+          actionItem: {
+            title: 'Show code',
+            className: 'docblock-code-toggle',
+            onClick: () => setExpanded(true)
+          }
+        };
+      }
+  }
+};
+
+function getStoryId(children) {
+  if (Children.count(children) === 1) {
+    const elt = children;
+
+    if (elt.props) {
+      return elt.props.id;
+    }
+  }
+
+  return null;
+}
+
+const PositionedToolbar = styled(Toolbar)({
+  position: 'absolute',
+  top: 0,
+  left: 0,
+  right: 0,
+  height: 40
+});
+const Relative = styled.div({
+  overflow: 'hidden',
+  position: 'relative'
+});
+
+const getLayout = children => {
+  return children.reduce((result, c) => {
+    if (result) {
+      return result;
+    }
+
+    if (typeof c === 'string' || typeof c === 'number') {
+      return 'padded';
+    }
+
+    return c.props && c.props.parameters && c.props.parameters.layout || 'padded';
+  }, undefined);
+};
+/**
+ * A preview component for showing one or more component `Story`
+ * items. The preview also shows the source for the component
+ * as a drop-down.
+ */
+
+
+const Preview = (_ref) => {
+  let {
+    isColumn,
+    columns,
+    children,
+    withSource,
+    withToolbar = false,
+    isExpanded = false,
+    additionalActions,
+    className
+  } = _ref,
+      props = _objectWithoutPropertiesLoose(_ref, ["isColumn", "columns", "children", "withSource", "withToolbar", "isExpanded", "additionalActions", "className"]);
+
+  const [expanded, setExpanded] = useState(isExpanded);
+  const {
+    source,
+    actionItem
+  } = getSource(withSource, expanded, setExpanded);
+  const [scale, setScale] = useState(1);
+  const previewClasses = [className].concat(['sbdocs', 'sbdocs-preview']);
+  const defaultActionItems = withSource ? [actionItem] : [];
+  const [additionalActionItems, setAdditionalActionItems] = useState(additionalActions ? [...additionalActions] : []);
+  const actionItems = [...defaultActionItems, ...additionalActionItems]; // @ts-ignore
+
+  const layout = getLayout(Children.count(children) === 1 ? [children] : children);
+  const {
+    window: globalWindow
+  } = global;
+  const copyToClipboard = useCallback(async text => {
+    const {
+      createCopyToClipboardFunction
+    } = await import('../syntaxhighlighter/syntaxhighlighter');
+    createCopyToClipboardFunction();
+  }, []);
+
+  const onCopyCapture = e => {
+    e.preventDefault();
+
+    if (additionalActionItems.filter(item => item.title === 'Copied').length === 0) {
+      copyToClipboard(source.props.code).then(() => {
+        setAdditionalActionItems([...additionalActionItems, {
+          title: 'Copied',
+          onClick: () => {}
+        }]);
+        globalWindow.setTimeout(() => setAdditionalActionItems(additionalActionItems.filter(item => item.title !== 'Copied')), 1500);
+      });
+    }
+  };
+
+  return /*#__PURE__*/React.createElement(PreviewContainer, _extends({
+    withSource,
+    withToolbar
+  }, props, {
+    className: previewClasses.join(' ')
+  }), withToolbar && /*#__PURE__*/React.createElement(PositionedToolbar, {
+    border: true,
+    zoom: z => setScale(scale * z),
+    resetZoom: () => setScale(1),
+    storyId: getStoryId(children),
+    baseUrl: "./iframe.html"
+  }), /*#__PURE__*/React.createElement(ZoomContext.Provider, {
+    value: {
+      scale
+    }
+  }, /*#__PURE__*/React.createElement(Relative, {
+    className: "docs-story",
+    onCopyCapture: withSource && onCopyCapture
+  }, /*#__PURE__*/React.createElement(ChildrenContainer, {
+    isColumn: isColumn || !Array.isArray(children),
+    columns: columns,
+    layout: layout
+  }, /*#__PURE__*/React.createElement(Zoom.Element, {
+    scale: scale
+  }, Array.isArray(children) ? // eslint-disable-next-line react/no-array-index-key
+  children.map((child, i) => /*#__PURE__*/React.createElement("div", {
+    key: i
+  }, child)) : /*#__PURE__*/React.createElement("div", null, children))), /*#__PURE__*/React.createElement(ActionBar, {
+    actionItems: actionItems
+  }))), withSource && expanded && source);
+};
+
+Preview.displayName = "Preview";
+export { Preview };

package/dist/modern/blocks/Preview.stories.js

@@ -0,0 +1,217 @@
+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); }
+
+import React from 'react';
+import { styled } from '@storybook/theming';
+import global from 'global';
+import { Spaced } from '../spaced/Spaced';
+import { Preview } from './Preview';
+import { Story } from './Story';
+import { Button } from '../Button/Button';
+import * as Source from './Source.stories';
+const {
+  window: globalWindow
+} = global;
+export default {
+  title: 'Docs/Preview',
+  component: Preview
+};
+export const CodeCollapsed = () => /*#__PURE__*/React.createElement(Preview, {
+  isExpanded: false,
+  withSource: Source.JSX.args
+}, /*#__PURE__*/React.createElement(Button, {
+  secondary: true
+}, "Button 1"));
+CodeCollapsed.displayName = "CodeCollapsed";
+export const CodeExpanded = () => /*#__PURE__*/React.createElement(Preview, {
+  isExpanded: true,
+  withSource: Source.JSX.args
+}, /*#__PURE__*/React.createElement(Button, {
+  secondary: true
+}, "Button 1"));
+CodeExpanded.displayName = "CodeExpanded";
+export const CodeError = () => /*#__PURE__*/React.createElement(Preview, {
+  isExpanded: true,
+  withSource: Source.SourceUnavailable.args
+}, /*#__PURE__*/React.createElement(Button, {
+  secondary: true
+}, "Button 1"));
+CodeError.displayName = "CodeError";
+export const Single = () => /*#__PURE__*/React.createElement(Preview, null, /*#__PURE__*/React.createElement(Button, {
+  secondary: true
+}, "Button 1"));
+Single.displayName = "Single";
+export const Row = () => /*#__PURE__*/React.createElement(Preview, null, /*#__PURE__*/React.createElement(Button, {
+  secondary: true
+}, "Button 1"), /*#__PURE__*/React.createElement(Button, {
+  secondary: true
+}, "Button 2"), /*#__PURE__*/React.createElement(Button, {
+  secondary: true
+}, "Button 3"), /*#__PURE__*/React.createElement(Button, {
+  secondary: true
+}, "Button 4"), /*#__PURE__*/React.createElement(Button, {
+  secondary: true
+}, "Button 5"), /*#__PURE__*/React.createElement(Button, {
+  secondary: true
+}, "Button 6"), /*#__PURE__*/React.createElement(Button, {
+  secondary: true
+}, "Button 7"));
+Row.displayName = "Row";
+export const Column = () => /*#__PURE__*/React.createElement(Preview, {
+  isColumn: true
+}, /*#__PURE__*/React.createElement(Button, {
+  secondary: true
+}, "Button 1"), /*#__PURE__*/React.createElement(Button, {
+  secondary: true
+}, "Button 2"), /*#__PURE__*/React.createElement(Button, {
+  secondary: true
+}, "Button 3"));
+Column.displayName = "Column";
+export const GridWith3Columns = () => /*#__PURE__*/React.createElement(Preview, {
+  columns: 3
+}, /*#__PURE__*/React.createElement(Button, {
+  secondary: true
+}, "Button 1"), /*#__PURE__*/React.createElement(Button, {
+  secondary: true
+}, "Button 2"), /*#__PURE__*/React.createElement(Button, {
+  secondary: true
+}, "Button 3"), /*#__PURE__*/React.createElement(Button, {
+  secondary: true
+}, "Button 4"), /*#__PURE__*/React.createElement(Button, {
+  secondary: true
+}, "Button 5"), /*#__PURE__*/React.createElement(Button, {
+  secondary: true
+}, "Button 6"), /*#__PURE__*/React.createElement(Button, {
+  secondary: true
+}, "Button 7 long long long long long title"), /*#__PURE__*/React.createElement(Button, {
+  secondary: true
+}, "Button 8"), /*#__PURE__*/React.createElement(Button, {
+  secondary: true
+}, "Button 9"), /*#__PURE__*/React.createElement(Button, {
+  secondary: true
+}, "Button 10"), /*#__PURE__*/React.createElement(Button, {
+  secondary: true
+}, "Button 11"), /*#__PURE__*/React.createElement(Button, {
+  secondary: true
+}, "Button 12"), /*#__PURE__*/React.createElement(Button, {
+  secondary: true
+}, "Button 13"), /*#__PURE__*/React.createElement(Button, {
+  secondary: true
+}, "Button 14"), /*#__PURE__*/React.createElement(Button, {
+  secondary: true
+}, "Button 15"), /*#__PURE__*/React.createElement(Button, {
+  secondary: true
+}, "Button 16"), /*#__PURE__*/React.createElement(Button, {
+  secondary: true
+}, "Button 17"), /*#__PURE__*/React.createElement(Button, {
+  secondary: true
+}, "Button 18"), /*#__PURE__*/React.createElement(Button, {
+  secondary: true
+}, "Button 19"), /*#__PURE__*/React.createElement(Button, {
+  secondary: true
+}, "Button 20"));
+GridWith3Columns.displayName = "GridWith3Columns";
+
+const buttonFn = () => /*#__PURE__*/React.createElement(Button, {
+  secondary: true
+}, "Hello Button");
+
+buttonFn.displayName = "buttonFn";
+export const WithToolbar = () => /*#__PURE__*/React.createElement(Preview, {
+  withToolbar: true
+}, /*#__PURE__*/React.createElement(Story, {
+  inline: true,
+  storyFn: buttonFn,
+  title: "with toolbar"
+}));
+WithToolbar.displayName = "WithToolbar";
+const Horizontal = styled(props => /*#__PURE__*/React.createElement(Spaced, _extends({
+  col: 1
+}, props)))({
+  display: 'grid',
+  gridTemplateColumns: '100px calc(100vw + 100px) 100px'
+});
+export const Wide = () => /*#__PURE__*/React.createElement(Preview, {
+  withToolbar: true
+}, /*#__PURE__*/React.createElement(Horizontal, null, /*#__PURE__*/React.createElement("div", null, "START"), /*#__PURE__*/React.createElement("div", null, "middle"), /*#__PURE__*/React.createElement("div", null, "END")));
+Wide.displayName = "Wide";
+export const WithToolbarMulti = () => /*#__PURE__*/React.createElement(Preview, {
+  withToolbar: true
+}, /*#__PURE__*/React.createElement(Story, {
+  inline: true,
+  storyFn: buttonFn,
+  title: "story1"
+}), /*#__PURE__*/React.createElement(Story, {
+  inline: true,
+  storyFn: buttonFn,
+  title: "story2"
+}));
+WithToolbarMulti.displayName = "WithToolbarMulti";
+export const WithFullscreenSingle = () => /*#__PURE__*/React.createElement(Preview, {
+  withToolbar: true
+}, /*#__PURE__*/React.createElement(Story, {
+  inline: true,
+  storyFn: buttonFn,
+  title: "story1",
+  parameters: {
+    layout: 'fullscreen'
+  }
+}));
+WithFullscreenSingle.displayName = "WithFullscreenSingle";
+export const WithFullscreenMulti = () => /*#__PURE__*/React.createElement(Preview, {
+  withToolbar: true
+}, /*#__PURE__*/React.createElement(Story, {
+  inline: true,
+  storyFn: buttonFn,
+  title: "story1",
+  parameters: {
+    layout: 'fullscreen'
+  }
+}), /*#__PURE__*/React.createElement(Story, {
+  inline: true,
+  storyFn: buttonFn,
+  title: "story2",
+  parameters: {
+    layout: 'fullscreen'
+  }
+}));
+WithFullscreenMulti.displayName = "WithFullscreenMulti";
+export const WithCenteredSingle = () => /*#__PURE__*/React.createElement(Preview, {
+  withToolbar: true
+}, /*#__PURE__*/React.createElement(Story, {
+  inline: true,
+  storyFn: buttonFn,
+  title: "story1",
+  parameters: {
+    layout: 'centered'
+  }
+}));
+WithCenteredSingle.displayName = "WithCenteredSingle";
+export const WithCenteredMulti = () => /*#__PURE__*/React.createElement(Preview, {
+  withToolbar: true
+}, /*#__PURE__*/React.createElement(Story, {
+  inline: true,
+  storyFn: buttonFn,
+  title: "story1",
+  parameters: {
+    layout: 'centered'
+  }
+}), /*#__PURE__*/React.createElement(Story, {
+  inline: true,
+  storyFn: buttonFn,
+  title: "story2",
+  parameters: {
+    layout: 'centered'
+  }
+}));
+WithCenteredMulti.displayName = "WithCenteredMulti";
+export const WithAdditionalActions = () => /*#__PURE__*/React.createElement(Preview, {
+  additionalActions: [{
+    title: 'Open on GitHub',
+    onClick: () => {
+      globalWindow.location.href = 'https://github.com/storybookjs/storybook/blob/next/lib/components/src/blocks/Preview.stories.tsx#L140-L147';
+    }
+  }]
+}, /*#__PURE__*/React.createElement(Button, {
+  secondary: true
+}, "Button 1"));
+WithAdditionalActions.displayName = "WithAdditionalActions";