@storybook/components 6.4.0-rc.2 → 6.4.0-rc.6

package/dist/cjs/bar/button.js

@@ -146,7 +146,9 @@ var IconPlaceholder = _theming.styled.div(function (_ref6) {
 
 var IconButtonSkeletonWrapper = _theming.styled.div(function () {
   return {
-    padding: 5
+    marginTop: 6,
+    padding: 7,
+    height: 28
   };
 });
 

package/dist/cjs/blocks/ArgsTable/ArgRow.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ArgRow = exports.argRowLoadingData = void 0;
+exports.ArgRow = void 0;
 
 require("core-js/modules/es.object.assign.js");
 
@@ -31,15 +31,6 @@ var _shared = require("../../typography/shared");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var argRowLoadingData = {
-  row: {
-    name: 'loading',
-    description: 'loading'
-  },
-  arg: 0
-};
-exports.argRowLoadingData = argRowLoadingData;
-
 var Name = _theming.styled.span({
   fontWeight: 'bold'
 });
@@ -110,14 +101,11 @@ var StyledTd = _theming.styled.td(function (_ref5) {
 var ArgRow = function ArgRow(props) {
   var _row$type;
 
-  // const isLoading = 'isLoading' in props;
-  var _ref6 = 'row' in props ? props : argRowLoadingData,
-      row = _ref6.row,
-      updateArgs = _ref6.updateArgs,
-      compact = _ref6.compact,
-      expandable = _ref6.expandable,
-      initialExpandedArgs = _ref6.initialExpandedArgs;
-
+  var row = props.row,
+      updateArgs = props.updateArgs,
+      compact = props.compact,
+      expandable = props.expandable,
+      initialExpandedArgs = props.initialExpandedArgs;
   var name = row.name,
       description = row.description;
   var table = row.table || {};

package/dist/cjs/blocks/ArgsTable/ArgRow.stories.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.StringNoControlsCompact = exports.StringNoControls = exports.StringCompact = exports.Markdown = exports.ComplexUnion = exports.LongEnum = exports.Enum = exports.Func = exports.ComplexObject = exports.ArrayOf = exports.ObjectOf = exports.MultiSelect = exports.Select = exports.InlineCheck = exports.Check = exports.InlineRadio = exports.Radio = exports.Range = exports.Number = exports.Date = exports.Color = exports.Boolean = exports.LongDesc = exports.LongName = exports.String = exports.Loading = exports.default = void 0;
+exports.StringNoControlsCompact = exports.StringNoControls = exports.StringCompact = exports.Markdown = exports.ComplexUnion = exports.LongEnum = exports.Enum = exports.Func = exports.ComplexObject = exports.ArrayOf = exports.ObjectOf = exports.MultiSelect = exports.Select = exports.InlineCheck = exports.Check = exports.InlineRadio = exports.Radio = exports.Range = exports.Number = exports.Date = exports.Color = exports.Boolean = exports.LongDesc = exports.LongName = exports.String = exports.default = void 0;
 
 require("core-js/modules/es.object.assign.js");
 
@@ -36,11 +36,6 @@ Template.displayName = "Template";
 var baseArgs = {
   updateArgs: (0, _addonActions.action)('updateArgs')
 };
-var Loading = Template.bind({});
-exports.Loading = Loading;
-Loading.args = {
-  isLoading: true
-};
 var String = Template.bind({});
 exports.String = String;
 String.args = Object.assign({}, baseArgs, {

package/dist/cjs/blocks/ArgsTable/ArgsTable.js

@@ -21,7 +21,7 @@ require("core-js/modules/es.array.from.js");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ArgsTable = exports.argTableLoadingData = exports.ArgsTableError = exports.TableWrapper = void 0;
+exports.ArgsTable = exports.argsTableLoadingData = exports.ArgsTableError = exports.TableWrapper = void 0;
 
 require("core-js/modules/es.object.assign.js");
 
@@ -189,12 +189,25 @@ var TableWrapper = _theming.styled.table(function (_ref) {
       }
     }), _)
   };
+}, function (_ref3) {
+  var isLoading = _ref3.isLoading,
+      theme = _ref3.theme;
+  return isLoading ? {
+    'th span, td span, td button': {
+      display: 'inline',
+      backgroundColor: theme.appBorderColor,
+      animation: "".concat(theme.animation.glow, " 1.5s ease-in-out infinite"),
+      color: 'transparent',
+      boxShadow: 'none',
+      borderRadius: 0
+    }
+  } : {};
 });
 
 exports.TableWrapper = TableWrapper;
 
-var ResetButton = _theming.styled.button(function (_ref3) {
-  var theme = _ref3.theme;
+var ResetButton = _theming.styled.button(function (_ref4) {
+  var theme = _ref4.theme;
   return {
     border: 0,
     borderRadius: '3em',
@@ -248,14 +261,34 @@ var sortFns = {
   },
   none: undefined
 };
-var argTableLoadingData = {
+
+var rowLoadingData = function rowLoadingData(key) {
+  return {
+    key: key,
+    name: 'propertyName',
+    description: 'This is a short description',
+    control: {
+      type: 'text'
+    },
+    table: {
+      type: {
+        summary: 'summary'
+      },
+      defaultValue: {
+        summary: 'defaultValue'
+      }
+    }
+  };
+};
+
+var argsTableLoadingData = {
   rows: {
-    row1: _ArgRow.argRowLoadingData.row,
-    row2: _ArgRow.argRowLoadingData.row,
-    row3: _ArgRow.argRowLoadingData.row
+    row1: rowLoadingData('row1'),
+    row2: rowLoadingData('row2'),
+    row3: rowLoadingData('row3')
   }
 };
-exports.argTableLoadingData = argTableLoadingData;
+exports.argsTableLoadingData = argsTableLoadingData;
 
 var groupRows = function groupRows(rows, sort) {
   var sections = {
@@ -264,14 +297,14 @@ var groupRows = function groupRows(rows, sort) {
     sections: {}
   };
   if (!rows) return sections;
-  Object.entries(rows).forEach(function (_ref4) {
-    var _ref5 = _slicedToArray(_ref4, 2),
-        key = _ref5[0],
-        row = _ref5[1];
+  Object.entries(rows).forEach(function (_ref5) {
+    var _ref6 = _slicedToArray(_ref5, 2),
+        key = _ref6[0],
+        row = _ref6[1];
 
-    var _ref6 = (row === null || row === void 0 ? void 0 : row.table) || {},
-        category = _ref6.category,
-        subcategory = _ref6.subcategory;
+    var _ref7 = (row === null || row === void 0 ? void 0 : row.table) || {},
+        category = _ref7.category,
+        subcategory = _ref7.subcategory;
 
     if (category) {
       var section = sections.sections[category] || {
@@ -328,93 +361,12 @@ var groupRows = function groupRows(rows, sort) {
   };
   return sorted;
 };
-
-var SkeletonHeader = _theming.styled.div(function (_ref7) {
-  var theme = _ref7.theme;
-  return {
-    alignContent: 'stretch',
-    display: 'flex',
-    gap: 16,
-    marginTop: 25,
-    padding: '10px 20px',
-    div: {
-      animation: "".concat(theme.animation.glow, " 1.5s ease-in-out infinite"),
-      background: theme.appBorderColor,
-      flexShrink: 0,
-      height: 20,
-      '&:first-child, &:nth-child(4)': {
-        width: '20%'
-      },
-      '&:nth-child(2)': {
-        width: '30%'
-      },
-      '&:nth-child(3)': {
-        flexGrow: 1
-      },
-      '&:last-child': {
-        width: 30
-      },
-      '@media ( max-width: 500px )': {
-        '&:nth-child( n + 4 )': {
-          display: 'none'
-        }
-      }
-    }
-  };
-});
-
-var SkeletonBody = _theming.styled.div(function (_ref8) {
-  var theme = _ref8.theme;
-  return {
-    background: theme.background.content,
-    boxShadow: theme.base === 'light' ? "rgba(0, 0, 0, 0.10) 0 1px 3px 1px,\n          ".concat((0, _polished.transparentize)(0.035, theme.appBorderColor), " 0 0 0 1px") : "rgba(0, 0, 0, 0.20) 0 2px 5px 1px,\n          ".concat((0, _polished.opacify)(0.05, theme.appBorderColor), " 0 0 0 1px"),
-    borderRadius: theme.appBorderRadius,
-    '> div': {
-      alignContent: 'stretch',
-      borderTopColor: theme.base === 'light' ? (0, _polished.darken)(0.1, theme.background.content) : (0, _polished.lighten)(0.05, theme.background.content),
-      borderTopStyle: 'solid',
-      borderTopWidth: 1,
-      display: 'flex',
-      gap: 16,
-      padding: 20,
-      '&:first-child': {
-        borderTop: 0
-      }
-    },
-    '> div div': {
-      animation: "".concat(theme.animation.glow, " 1.5s ease-in-out infinite"),
-      background: theme.appBorderColor,
-      flexShrink: 0,
-      height: 20,
-      '&:first-child': {
-        width: '20%'
-      },
-      '&:nth-child(2)': {
-        width: '30%'
-      },
-      '&:nth-child(3)': {
-        flexGrow: 1
-      },
-      '&:last-child': {
-        width: 'calc(20% + 47px)',
-        '@media ( max-width: 500px )': {
-          display: 'none'
-        }
-      }
-    }
-  };
-});
-
-var Skeleton = function Skeleton() {
-  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(SkeletonHeader, null, /*#__PURE__*/_react.default.createElement("div", null), /*#__PURE__*/_react.default.createElement("div", null), /*#__PURE__*/_react.default.createElement("div", null), /*#__PURE__*/_react.default.createElement("div", null), /*#__PURE__*/_react.default.createElement("div", null)), /*#__PURE__*/_react.default.createElement(SkeletonBody, null, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", null), /*#__PURE__*/_react.default.createElement("div", null), /*#__PURE__*/_react.default.createElement("div", null), /*#__PURE__*/_react.default.createElement("div", null)), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", null), /*#__PURE__*/_react.default.createElement("div", null), /*#__PURE__*/_react.default.createElement("div", null), /*#__PURE__*/_react.default.createElement("div", null)), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", null), /*#__PURE__*/_react.default.createElement("div", null), /*#__PURE__*/_react.default.createElement("div", null), /*#__PURE__*/_react.default.createElement("div", null))));
-};
-
-Skeleton.displayName = "Skeleton";
-
 /**
  * Display the props for a component as a props table. Each row is a collection of
  * ArgDefs, usually derived from docgen info for the component.
  */
+
+
 var ArgsTable = function ArgsTable(props) {
   if ('error' in props) {
     return /*#__PURE__*/_react.default.createElement(_EmptyBlock.EmptyBlock, null, props.error, "\xA0", /*#__PURE__*/_react.default.createElement(_link.Link, {
@@ -424,22 +376,18 @@ var ArgsTable = function ArgsTable(props) {
     }, "Read the docs"));
   }
 
+  var updateArgs = props.updateArgs,
+      resetArgs = props.resetArgs,
+      compact = props.compact,
+      inAddonPanel = props.inAddonPanel,
+      initialExpandedArgs = props.initialExpandedArgs,
+      _props$sort = props.sort,
+      sort = _props$sort === void 0 ? 'none' : _props$sort;
   var isLoading = ('isLoading' in props);
 
-  var _ref9 = 'rows' in props ? props : argTableLoadingData,
-      rows = _ref9.rows,
-      args = _ref9.args,
-      updateArgs = _ref9.updateArgs,
-      resetArgs = _ref9.resetArgs,
-      compact = _ref9.compact,
-      inAddonPanel = _ref9.inAddonPanel,
-      initialExpandedArgs = _ref9.initialExpandedArgs,
-      _ref9$sort = _ref9.sort,
-      sort = _ref9$sort === void 0 ? 'none' : _ref9$sort;
-
-  if (isLoading) {
-    return /*#__PURE__*/_react.default.createElement(Skeleton, null);
-  }
+  var _ref8 = 'rows' in props ? props : argsTableLoadingData,
+      rows = _ref8.rows,
+      args = _ref8.args;
 
   var groups = groupRows((0, _pickBy.default)(rows, function (row) {
     var _row$table;
@@ -466,12 +414,14 @@ var ArgsTable = function ArgsTable(props) {
     initialExpandedArgs: initialExpandedArgs
   };
   return /*#__PURE__*/_react.default.createElement(_DocumentFormatting.ResetWrapper, null, /*#__PURE__*/_react.default.createElement(TableWrapper, {
+    "aria-hidden": isLoading,
     compact: compact,
     inAddonPanel: inAddonPanel,
+    isLoading: isLoading,
     className: "docblock-argstable"
   }, /*#__PURE__*/_react.default.createElement("thead", {
     className: "docblock-argstable-head"
-  }, /*#__PURE__*/_react.default.createElement("tr", null, /*#__PURE__*/_react.default.createElement("th", null, "Name"), compact || /*#__PURE__*/_react.default.createElement("th", null, "Description"), compact || /*#__PURE__*/_react.default.createElement("th", null, "Default"), updateArgs && /*#__PURE__*/_react.default.createElement("th", null, /*#__PURE__*/_react.default.createElement(ControlHeadingWrapper, null, "Control", ' ', resetArgs && /*#__PURE__*/_react.default.createElement(ResetButton, {
+  }, /*#__PURE__*/_react.default.createElement("tr", null, /*#__PURE__*/_react.default.createElement("th", null, /*#__PURE__*/_react.default.createElement("span", null, "Name")), compact ? null : /*#__PURE__*/_react.default.createElement("th", null, /*#__PURE__*/_react.default.createElement("span", null, "Description")), compact ? null : /*#__PURE__*/_react.default.createElement("th", null, /*#__PURE__*/_react.default.createElement("span", null, "Default")), updateArgs ? /*#__PURE__*/_react.default.createElement("th", null, /*#__PURE__*/_react.default.createElement(ControlHeadingWrapper, null, "Control", ' ', !isLoading && resetArgs && /*#__PURE__*/_react.default.createElement(ResetButton, {
     onClick: function onClick() {
       return resetArgs();
     },
@@ -479,7 +429,7 @@ var ArgsTable = function ArgsTable(props) {
   }, /*#__PURE__*/_react.default.createElement(_icon.Icons, {
     icon: "undo",
     "aria-hidden": true
-  })))), null)), /*#__PURE__*/_react.default.createElement("tbody", {
+  })))) : null)), /*#__PURE__*/_react.default.createElement("tbody", {
     className: "docblock-argstable-body"
   }, groups.ungrouped.map(function (row) {
     return /*#__PURE__*/_react.default.createElement(_ArgRow.ArgRow, _extends({
@@ -487,10 +437,10 @@ var ArgsTable = function ArgsTable(props) {
       row: row,
       arg: args && args[row.key]
     }, common));
-  }), Object.entries(groups.ungroupedSubsections).map(function (_ref10) {
-    var _ref11 = _slicedToArray(_ref10, 2),
-        subcategory = _ref11[0],
-        subsection = _ref11[1];
+  }), Object.entries(groups.ungroupedSubsections).map(function (_ref9) {
+    var _ref10 = _slicedToArray(_ref9, 2),
+        subcategory = _ref10[0],
+        subsection = _ref10[1];
 
     return /*#__PURE__*/_react.default.createElement(_SectionRow.SectionRow, {
       key: subcategory,
@@ -505,10 +455,10 @@ var ArgsTable = function ArgsTable(props) {
         expandable: expandable
       }, common));
     }));
-  }), Object.entries(groups.sections).map(function (_ref12) {
-    var _ref13 = _slicedToArray(_ref12, 2),
-        category = _ref13[0],
-        section = _ref13[1];
+  }), Object.entries(groups.sections).map(function (_ref11) {
+    var _ref12 = _slicedToArray(_ref11, 2),
+        category = _ref12[0],
+        section = _ref12[1];
 
     return /*#__PURE__*/_react.default.createElement(_SectionRow.SectionRow, {
       key: category,
@@ -521,10 +471,10 @@ var ArgsTable = function ArgsTable(props) {
         row: row,
         arg: args && args[row.key]
       }, common));
-    }), Object.entries(section.subsections).map(function (_ref14) {
-      var _ref15 = _slicedToArray(_ref14, 2),
-          subcategory = _ref15[0],
-          subsection = _ref15[1];
+    }), Object.entries(section.subsections).map(function (_ref13) {
+      var _ref14 = _slicedToArray(_ref13, 2),
+          subcategory = _ref14[0],
+          subsection = _ref14[1];
 
       return /*#__PURE__*/_react.default.createElement(_SectionRow.SectionRow, {
         key: subcategory,

package/dist/cjs/blocks/DocsPage.stories.js

@@ -57,7 +57,7 @@ var _ref = process.env.NODE_ENV === "production" ? {
 } : {
   name: "11oe0k1",
   styles: "ul,ol{list-style:none;}",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9ibG9ja3MvRG9jc1BhZ2Uuc3Rvcmllcy50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBb0JxQiIsImZpbGUiOiIuLi8uLi8uLi9zcmMvYmxvY2tzL0RvY3NQYWdlLnN0b3JpZXMudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFJlYWN0IGZyb20gJ3JlYWN0JztcbmltcG9ydCB7IEdsb2JhbCwgY3NzIH0gZnJvbSAnQGVtb3Rpb24vY29yZSc7XG5cbmltcG9ydCB7IFRpdGxlLCBTdWJ0aXRsZSwgRG9jc1BhZ2VXcmFwcGVyIH0gZnJvbSAnLi9Eb2NzUGFnZSc7XG5pbXBvcnQgeyBBcmdzVGFibGUsIFNvdXJjZSwgRGVzY3JpcHRpb24gfSBmcm9tICcuL2luZGV4JztcbmltcG9ydCAqIGFzIFN0b3J5IGZyb20gJy4vU3Rvcnkuc3Rvcmllcyc7XG5pbXBvcnQgKiBhcyBQcmV2aWV3IGZyb20gJy4vUHJldmlldy5zdG9yaWVzJztcbmltcG9ydCAqIGFzIGFyZ3NUYWJsZSBmcm9tICcuL0FyZ3NUYWJsZS9BcmdzVGFibGUuc3Rvcmllcyc7XG5pbXBvcnQgKiBhcyBzb3VyY2UgZnJvbSAnLi9Tb3VyY2Uuc3Rvcmllcyc7XG5pbXBvcnQgKiBhcyBkZXNjcmlwdGlvbiBmcm9tICcuL0Rlc2NyaXB0aW9uLnN0b3JpZXMnO1xuXG5leHBvcnQgZGVmYXVsdCB7XG4gIHRpdGxlOiAnRG9jcy9Eb2NzUGFnZScsXG4gIGNvbXBvbmVudDogRG9jc1BhZ2VXcmFwcGVyLFxuICAvLyBUaGUgZ29hbCBvZiB0aGlzIGRlY29yYXRvciBpcyB0byBtaW1pYyBzb21lIENTUyByZXNldC5cbiAgLy8gTGlrZSBUYWlsd2luZCBDU1Mgb3IgQnVsbWEgZG8sIGZvciBleGFtcGxlLlxuICBkZWNvcmF0b3JzOiBbXG4gICAgKHN0b3J5Rm4pID0+IChcbiAgICAgIDw+XG4gICAgICAgIDxHbG9iYWxcbiAgICAgICAgICBzdHlsZXM9e2Nzc2BcbiAgICAgICAgICAgIHVsLFxuICAgICAgICAgICAgb2wge1xuICAgICAgICAgICAgICBsaXN0LXN0eWxlOiBub25lO1xuICAgICAgICAgICAgfVxuICAgICAgICAgIGB9XG4gICAgICAgIC8+XG4gICAgICAgIHtzdG9yeUZuKCl9XG4gICAgICA8Lz5cbiAgICApLFxuICBdLFxuICBwYXJhbWV0ZXJzOiB7XG4gICAgbGF5b3V0OiAnZnVsbHNjcmVlbicsXG4gIH0sXG59O1xuXG5leHBvcnQgY29uc3QgTG9hZGluZyA9ICgpID0+IChcbiAgPERvY3NQYWdlV3JhcHBlcj5cbiAgICA8VGl0bGU+RG9jc1BhZ2U8L1RpdGxlPlxuICAgIDxTdWJ0aXRsZT5cbiAgICAgIFdoYXQgdGhlIERvY3NQYWdlIGxvb2tzIGxpa2UuIE1lYW50IHRvIGJlIFFBZWQgaW4gQ2FudmFzIHRhYiBub3QgaW4gRG9jcyB0YWIuXG4gICAgPC9TdWJ0aXRsZT5cbiAgICA8RGVzY3JpcHRpb24gey4uLmRlc2NyaXB0aW9uLlRleHQuYXJnc30gLz5cbiAgICA8UHJldmlldy5Mb2FkaW5nIC8+XG4gICAgPGFyZ3NUYWJsZS5Mb2FkaW5nIC8+XG4gICAgPFNvdXJjZSB7Li4uc291cmNlLkxvYWRpbmcuYXJnc30gLz5cbiAgPC9Eb2NzUGFnZVdyYXBwZXI+XG4pO1xuXG5leHBvcnQgY29uc3QgV2l0aFN1YnRpdGxlID0gKCkgPT4gKFxuICA8RG9jc1BhZ2VXcmFwcGVyPlxuICAgIDxUaXRsZT5Eb2NzUGFnZTwvVGl0bGU+XG4gICAgPFN1YnRpdGxlPlxuICAgICAgV2hhdCB0aGUgRG9jc1BhZ2UgbG9va3MgbGlrZS4gTWVhbnQgdG8gYmUgUUFlZCBpbiBDYW52YXMgdGFiIG5vdCBpbiBEb2NzIHRhYi5cbiAgICA8L1N1YnRpdGxlPlxuICAgIDxEZXNjcmlwdGlvbiB7Li4uZGVzY3JpcHRpb24uVGV4dC5hcmdzfSAvPlxuICAgIDxQcmV2aWV3LlNpbmdsZSAvPlxuICAgIDxBcmdzVGFibGUgey4uLmFyZ3NUYWJsZS5Ob3JtYWwuYXJnc30gLz5cbiAgICA8U291cmNlIHsuLi5zb3VyY2UuSlNYLmFyZ3N9IC8+XG4gIDwvRG9jc1BhZ2VXcmFwcGVyPlxuKTtcblxuZXhwb3J0IGNvbnN0IEVtcHR5ID0gKCkgPT4gKFxuICA8RG9jc1BhZ2VXcmFwcGVyPlxuICAgIDxTdG9yeS5FcnJvciAvPlxuICAgIDxBcmdzVGFibGUgey4uLmFyZ3NUYWJsZS5FcnJvci5hcmdzfSAvPlxuICAgIDxTb3VyY2Ugey4uLnNvdXJjZS5Tb3VyY2VVbmF2YWlsYWJsZS5hcmdzfSAvPlxuICA8L0RvY3NQYWdlV3JhcHBlcj5cbik7XG5cbmV4cG9ydCBjb25zdCBOb1RleHQgPSAoKSA9PiAoXG4gIDxEb2NzUGFnZVdyYXBwZXI+XG4gICAgPFRpdGxlPm5vIHRleHQ8L1RpdGxlPlxuICAgIDxQcmV2aWV3LlNpbmdsZSAvPlxuICAgIDxBcmdzVGFibGUgey4uLmFyZ3NUYWJsZS5Ob3JtYWwuYXJnc30gLz5cbiAgICA8U291cmNlIHsuLi5zb3VyY2UuSlNYLmFyZ3N9IC8+XG4gIDwvRG9jc1BhZ2VXcmFwcGVyPlxuKTtcblxuZXhwb3J0IGNvbnN0IFRleHQgPSAoKSA9PiAoXG4gIDxEb2NzUGFnZVdyYXBwZXI+XG4gICAgPFRpdGxlPlNlbnNvcml1bTwvVGl0bGU+XG4gICAgPERlc2NyaXB0aW9uIHsuLi5kZXNjcmlwdGlvbi5UZXh0LmFyZ3N9IC8+XG4gICAgPFByZXZpZXcuU2luZ2xlIC8+XG4gICAgPEFyZ3NUYWJsZSB7Li4uYXJnc1RhYmxlLk5vcm1hbC5hcmdzfSAvPlxuICAgIDxTb3VyY2Ugey4uLnNvdXJjZS5KU1guYXJnc30gLz5cbiAgPC9Eb2NzUGFnZVdyYXBwZXI+XG4pO1xuXG5leHBvcnQgY29uc3QgTWFya2Rvd24gPSAoKSA9PiAoXG4gIDxEb2NzUGFnZVdyYXBwZXI+XG4gICAgPFRpdGxlPm1hcmtkb3duPC9UaXRsZT5cbiAgICA8RGVzY3JpcHRpb24gey4uLmRlc2NyaXB0aW9uLk1hcmtkb3duLmFyZ3N9IC8+XG4gICAgPFByZXZpZXcuU2luZ2xlIC8+XG4gICAgPEFyZ3NUYWJsZSB7Li4uYXJnc1RhYmxlLk5vcm1hbC5hcmdzfSAvPlxuICAgIDxTb3VyY2Ugey4uLnNvdXJjZS5KU1guYXJnc30gLz5cbiAgPC9Eb2NzUGFnZVdyYXBwZXI+XG4pO1xuIl19 */",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9ibG9ja3MvRG9jc1BhZ2Uuc3Rvcmllcy50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBb0JxQiIsImZpbGUiOiIuLi8uLi8uLi9zcmMvYmxvY2tzL0RvY3NQYWdlLnN0b3JpZXMudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFJlYWN0IGZyb20gJ3JlYWN0JztcbmltcG9ydCB7IEdsb2JhbCwgY3NzIH0gZnJvbSAnQGVtb3Rpb24vY29yZSc7XG5cbmltcG9ydCB7IFRpdGxlLCBTdWJ0aXRsZSwgRG9jc1BhZ2VXcmFwcGVyIH0gZnJvbSAnLi9Eb2NzUGFnZSc7XG5pbXBvcnQgeyBBcmdzVGFibGUsIFNvdXJjZSwgRGVzY3JpcHRpb24gfSBmcm9tICcuL2luZGV4JztcbmltcG9ydCAqIGFzIFN0b3J5IGZyb20gJy4vU3Rvcnkuc3Rvcmllcyc7XG5pbXBvcnQgKiBhcyBQcmV2aWV3IGZyb20gJy4vUHJldmlldy5zdG9yaWVzJztcbmltcG9ydCAqIGFzIGFyZ3NUYWJsZSBmcm9tICcuL0FyZ3NUYWJsZS9BcmdzVGFibGUuc3Rvcmllcyc7XG5pbXBvcnQgKiBhcyBzb3VyY2UgZnJvbSAnLi9Tb3VyY2Uuc3Rvcmllcyc7XG5pbXBvcnQgKiBhcyBkZXNjcmlwdGlvbiBmcm9tICcuL0Rlc2NyaXB0aW9uLnN0b3JpZXMnO1xuXG5leHBvcnQgZGVmYXVsdCB7XG4gIHRpdGxlOiAnRG9jcy9Eb2NzUGFnZScsXG4gIGNvbXBvbmVudDogRG9jc1BhZ2VXcmFwcGVyLFxuICAvLyBUaGUgZ29hbCBvZiB0aGlzIGRlY29yYXRvciBpcyB0byBtaW1pYyBzb21lIENTUyByZXNldC5cbiAgLy8gTGlrZSBUYWlsd2luZCBDU1Mgb3IgQnVsbWEgZG8sIGZvciBleGFtcGxlLlxuICBkZWNvcmF0b3JzOiBbXG4gICAgKHN0b3J5Rm4pID0+IChcbiAgICAgIDw+XG4gICAgICAgIDxHbG9iYWxcbiAgICAgICAgICBzdHlsZXM9e2Nzc2BcbiAgICAgICAgICAgIHVsLFxuICAgICAgICAgICAgb2wge1xuICAgICAgICAgICAgICBsaXN0LXN0eWxlOiBub25lO1xuICAgICAgICAgICAgfVxuICAgICAgICAgIGB9XG4gICAgICAgIC8+XG4gICAgICAgIHtzdG9yeUZuKCl9XG4gICAgICA8Lz5cbiAgICApLFxuICBdLFxuICBwYXJhbWV0ZXJzOiB7XG4gICAgbGF5b3V0OiAnZnVsbHNjcmVlbicsXG4gIH0sXG59O1xuXG5leHBvcnQgY29uc3QgTG9hZGluZyA9ICgpID0+IChcbiAgPERvY3NQYWdlV3JhcHBlcj5cbiAgICA8VGl0bGU+RG9jc1BhZ2U8L1RpdGxlPlxuICAgIDxTdWJ0aXRsZT5cbiAgICAgIFdoYXQgdGhlIERvY3NQYWdlIGxvb2tzIGxpa2UuIE1lYW50IHRvIGJlIFFBZWQgaW4gQ2FudmFzIHRhYiBub3QgaW4gRG9jcyB0YWIuXG4gICAgPC9TdWJ0aXRsZT5cbiAgICA8RGVzY3JpcHRpb24gey4uLmRlc2NyaXB0aW9uLlRleHQuYXJnc30gLz5cbiAgICA8UHJldmlldy5Mb2FkaW5nIC8+XG4gICAgPGFyZ3NUYWJsZS5Mb2FkaW5nIHsuLi5hcmdzVGFibGUuTG9hZGluZy5hcmdzfSAvPlxuICAgIDxTb3VyY2Ugey4uLnNvdXJjZS5Mb2FkaW5nLmFyZ3N9IC8+XG4gIDwvRG9jc1BhZ2VXcmFwcGVyPlxuKTtcblxuZXhwb3J0IGNvbnN0IFdpdGhTdWJ0aXRsZSA9ICgpID0+IChcbiAgPERvY3NQYWdlV3JhcHBlcj5cbiAgICA8VGl0bGU+RG9jc1BhZ2U8L1RpdGxlPlxuICAgIDxTdWJ0aXRsZT5cbiAgICAgIFdoYXQgdGhlIERvY3NQYWdlIGxvb2tzIGxpa2UuIE1lYW50IHRvIGJlIFFBZWQgaW4gQ2FudmFzIHRhYiBub3QgaW4gRG9jcyB0YWIuXG4gICAgPC9TdWJ0aXRsZT5cbiAgICA8RGVzY3JpcHRpb24gey4uLmRlc2NyaXB0aW9uLlRleHQuYXJnc30gLz5cbiAgICA8UHJldmlldy5TaW5nbGUgLz5cbiAgICA8QXJnc1RhYmxlIHsuLi5hcmdzVGFibGUuTm9ybWFsLmFyZ3N9IC8+XG4gICAgPFNvdXJjZSB7Li4uc291cmNlLkpTWC5hcmdzfSAvPlxuICA8L0RvY3NQYWdlV3JhcHBlcj5cbik7XG5cbmV4cG9ydCBjb25zdCBFbXB0eSA9ICgpID0+IChcbiAgPERvY3NQYWdlV3JhcHBlcj5cbiAgICA8U3RvcnkuRXJyb3IgLz5cbiAgICA8QXJnc1RhYmxlIHsuLi5hcmdzVGFibGUuRXJyb3IuYXJnc30gLz5cbiAgICA8U291cmNlIHsuLi5zb3VyY2UuU291cmNlVW5hdmFpbGFibGUuYXJnc30gLz5cbiAgPC9Eb2NzUGFnZVdyYXBwZXI+XG4pO1xuXG5leHBvcnQgY29uc3QgTm9UZXh0ID0gKCkgPT4gKFxuICA8RG9jc1BhZ2VXcmFwcGVyPlxuICAgIDxUaXRsZT5ubyB0ZXh0PC9UaXRsZT5cbiAgICA8UHJldmlldy5TaW5nbGUgLz5cbiAgICA8QXJnc1RhYmxlIHsuLi5hcmdzVGFibGUuTm9ybWFsLmFyZ3N9IC8+XG4gICAgPFNvdXJjZSB7Li4uc291cmNlLkpTWC5hcmdzfSAvPlxuICA8L0RvY3NQYWdlV3JhcHBlcj5cbik7XG5cbmV4cG9ydCBjb25zdCBUZXh0ID0gKCkgPT4gKFxuICA8RG9jc1BhZ2VXcmFwcGVyPlxuICAgIDxUaXRsZT5TZW5zb3JpdW08L1RpdGxlPlxuICAgIDxEZXNjcmlwdGlvbiB7Li4uZGVzY3JpcHRpb24uVGV4dC5hcmdzfSAvPlxuICAgIDxQcmV2aWV3LlNpbmdsZSAvPlxuICAgIDxBcmdzVGFibGUgey4uLmFyZ3NUYWJsZS5Ob3JtYWwuYXJnc30gLz5cbiAgICA8U291cmNlIHsuLi5zb3VyY2UuSlNYLmFyZ3N9IC8+XG4gIDwvRG9jc1BhZ2VXcmFwcGVyPlxuKTtcblxuZXhwb3J0IGNvbnN0IE1hcmtkb3duID0gKCkgPT4gKFxuICA8RG9jc1BhZ2VXcmFwcGVyPlxuICAgIDxUaXRsZT5tYXJrZG93bjwvVGl0bGU+XG4gICAgPERlc2NyaXB0aW9uIHsuLi5kZXNjcmlwdGlvbi5NYXJrZG93bi5hcmdzfSAvPlxuICAgIDxQcmV2aWV3LlNpbmdsZSAvPlxuICAgIDxBcmdzVGFibGUgey4uLmFyZ3NUYWJsZS5Ob3JtYWwuYXJnc30gLz5cbiAgICA8U291cmNlIHsuLi5zb3VyY2UuSlNYLmFyZ3N9IC8+XG4gIDwvRG9jc1BhZ2VXcmFwcGVyPlxuKTtcbiJdfQ== */",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
 
@@ -78,7 +78,7 @@ var _default = {
 exports.default = _default;
 
 var Loading = function Loading() {
-  return /*#__PURE__*/_react.default.createElement(_DocsPage.DocsPageWrapper, null, /*#__PURE__*/_react.default.createElement(_DocsPage.Title, null, "DocsPage"), /*#__PURE__*/_react.default.createElement(_DocsPage.Subtitle, null, "What the DocsPage looks like. Meant to be QAed in Canvas tab not in Docs tab."), /*#__PURE__*/_react.default.createElement(_index.Description, description.Text.args), /*#__PURE__*/_react.default.createElement(Preview.Loading, null), /*#__PURE__*/_react.default.createElement(argsTable.Loading, null), /*#__PURE__*/_react.default.createElement(_index.Source, source.Loading.args));
+  return /*#__PURE__*/_react.default.createElement(_DocsPage.DocsPageWrapper, null, /*#__PURE__*/_react.default.createElement(_DocsPage.Title, null, "DocsPage"), /*#__PURE__*/_react.default.createElement(_DocsPage.Subtitle, null, "What the DocsPage looks like. Meant to be QAed in Canvas tab not in Docs tab."), /*#__PURE__*/_react.default.createElement(_index.Description, description.Text.args), /*#__PURE__*/_react.default.createElement(Preview.Loading, null), /*#__PURE__*/_react.default.createElement(argsTable.Loading, argsTable.Loading.args), /*#__PURE__*/_react.default.createElement(_index.Source, source.Loading.args));
 };
 
 exports.Loading = Loading;

package/dist/cjs/blocks/Preview.js

@@ -287,7 +287,8 @@ var getLayout = function getLayout(children) {
 
 
 var Preview = function Preview(_ref8) {
-  var isColumn = _ref8.isColumn,
+  var isLoading = _ref8.isLoading,
+      isColumn = _ref8.isColumn,
       columns = _ref8.columns,
       children = _ref8.children,
       withSource = _ref8.withSource,
@@ -297,7 +298,7 @@ var Preview = function Preview(_ref8) {
       isExpanded = _ref8$isExpanded === void 0 ? false : _ref8$isExpanded,
       additionalActions = _ref8.additionalActions,
       className = _ref8.className,
-      props = _objectWithoutProperties(_ref8, ["isColumn", "columns", "children", "withSource", "withToolbar", "isExpanded", "additionalActions", "className"]);
+      props = _objectWithoutProperties(_ref8, ["isLoading", "isColumn", "columns", "children", "withSource", "withToolbar", "isExpanded", "additionalActions", "className"]);
 
   var _useState = (0, _react.useState)(isExpanded),
       _useState2 = _slicedToArray(_useState, 2),
@@ -382,6 +383,7 @@ var Preview = function Preview(_ref8) {
   }, props, {
     className: previewClasses.join(' ')
   }), withToolbar && /*#__PURE__*/_react.default.createElement(PositionedToolbar, {
+    isLoading: isLoading,
     border: true,
     zoom: function zoom(z) {
       return setScale(scale * z);
@@ -416,9 +418,18 @@ var Preview = function Preview(_ref8) {
 
 exports.Preview = Preview;
 Preview.displayName = "Preview";
+var StyledPreview = (0, _theming.styled)(Preview)(function () {
+  return {
+    '.docs-story': {
+      paddingTop: 32,
+      paddingBottom: 40
+    }
+  };
+});
 
 var PreviewSkeleton = function PreviewSkeleton() {
-  return /*#__PURE__*/_react.default.createElement(Preview, {
+  return /*#__PURE__*/_react.default.createElement(StyledPreview, {
+    isLoading: true,
     withToolbar: true
   }, /*#__PURE__*/_react.default.createElement(_.StorySkeleton, null));
 };

package/dist/cjs/blocks/Toolbar.js

@@ -29,6 +29,8 @@ exports.Toolbar = void 0;
 
 require("core-js/modules/es.array.concat.js");
 
+require("core-js/modules/es.array.map.js");
+
 var _react = _interopRequireWildcard(require("react"));
 
 var _theming = require("@storybook/theming");
@@ -103,23 +105,28 @@ var Bar = (0, _theming.styled)(_bar.FlexBar)({
 });
 
 var Toolbar = function Toolbar(_ref3) {
-  var storyId = _ref3.storyId,
+  var isLoading = _ref3.isLoading,
+      storyId = _ref3.storyId,
       baseUrl = _ref3.baseUrl,
       zoom = _ref3.zoom,
       resetZoom = _ref3.resetZoom,
-      rest = _objectWithoutProperties(_ref3, ["storyId", "baseUrl", "zoom", "resetZoom"]);
+      rest = _objectWithoutProperties(_ref3, ["isLoading", "storyId", "baseUrl", "zoom", "resetZoom"]);
 
   return /*#__PURE__*/_react.default.createElement(Bar, rest, /*#__PURE__*/_react.default.createElement(_react.Fragment, {
     key: "left"
-  }, /*#__PURE__*/_react.default.createElement(Zoom, {
+  }, isLoading ? [1, 2, 3].map(function (key) {
+    return /*#__PURE__*/_react.default.createElement(_button.IconButtonSkeleton, {
+      key: key
+    });
+  }) : /*#__PURE__*/_react.default.createElement(Zoom, {
     zoom: zoom,
     resetZoom: resetZoom
   })), /*#__PURE__*/_react.default.createElement(_react.Fragment, {
     key: "right"
-  }, storyId && /*#__PURE__*/_react.default.createElement(Eject, {
+  }, storyId && (isLoading ? /*#__PURE__*/_react.default.createElement(_button.IconButtonSkeleton, null) : /*#__PURE__*/_react.default.createElement(Eject, {
     storyId: storyId,
     baseUrl: baseUrl
-  })));
+  }))));
 };
 
 exports.Toolbar = Toolbar;

package/dist/esm/bar/button.js

@@ -128,7 +128,9 @@ var IconPlaceholder = styled.div(function (_ref6) {
 });
 var IconButtonSkeletonWrapper = styled.div(function () {
   return {
-    padding: 5
+    marginTop: 6,
+    padding: 7,
+    height: 28
   };
 });
 export var IconButtonSkeleton = function IconButtonSkeleton() {

package/dist/esm/blocks/ArgsTable/ArgRow.js

@@ -10,13 +10,6 @@ import { ArgJsDoc } from './ArgJsDoc';
 import { ArgValue } from './ArgValue';
 import { ArgControl } from './ArgControl';
 import { codeCommon } from '../../typography/shared';
-export var argRowLoadingData = {
-  row: {
-    name: 'loading',
-    description: 'loading'
-  },
-  arg: 0
-};
 var Name = styled.span({
   fontWeight: 'bold'
 });
@@ -81,14 +74,11 @@ var StyledTd = styled.td(function (_ref5) {
 export var ArgRow = function ArgRow(props) {
   var _row$type;
 
-  // const isLoading = 'isLoading' in props;
-  var _ref6 = 'row' in props ? props : argRowLoadingData,
-      row = _ref6.row,
-      updateArgs = _ref6.updateArgs,
-      compact = _ref6.compact,
-      expandable = _ref6.expandable,
-      initialExpandedArgs = _ref6.initialExpandedArgs;
-
+  var row = props.row,
+      updateArgs = props.updateArgs,
+      compact = props.compact,
+      expandable = props.expandable,
+      initialExpandedArgs = props.initialExpandedArgs;
   var name = row.name,
       description = row.description;
   var table = row.table || {};

package/dist/esm/blocks/ArgsTable/ArgRow.stories.js

@@ -20,10 +20,6 @@ Template.displayName = "Template";
 var baseArgs = {
   updateArgs: action('updateArgs')
 };
-export var Loading = Template.bind({});
-Loading.args = {
-  isLoading: true
-};
 export var String = Template.bind({});
 String.args = Object.assign({}, baseArgs, {
   row: {