@storybook/components 6.4.0-beta.8 → 6.4.0-rc.2

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.ArgsTableError = exports.TableWrapper = void 0;
+exports.ArgsTable = exports.argTableLoadingData = exports.ArgsTableError = exports.TableWrapper = void 0;
 
 require("core-js/modules/es.object.assign.js");
 
@@ -248,6 +248,14 @@ var sortFns = {
   },
   none: undefined
 };
+var argTableLoadingData = {
+  rows: {
+    row1: _ArgRow.argRowLoadingData.row,
+    row2: _ArgRow.argRowLoadingData.row,
+    row3: _ArgRow.argRowLoadingData.row
+  }
+};
+exports.argTableLoadingData = argTableLoadingData;
 
 var groupRows = function groupRows(rows, sort) {
   var sections = {
@@ -320,34 +328,119 @@ 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) {
-  var _ref7 = props,
-      error = _ref7.error;
-
-  if (error) {
-    return /*#__PURE__*/_react.default.createElement(_EmptyBlock.EmptyBlock, null, error, "\xA0", /*#__PURE__*/_react.default.createElement(_link.Link, {
+  if ('error' in props) {
+    return /*#__PURE__*/_react.default.createElement(_EmptyBlock.EmptyBlock, null, props.error, "\xA0", /*#__PURE__*/_react.default.createElement(_link.Link, {
       href: "http://storybook.js.org/docs/",
       target: "_blank",
       withArrow: true
     }, "Read the docs"));
   }
 
-  var _ref8 = props,
-      rows = _ref8.rows,
-      args = _ref8.args,
-      updateArgs = _ref8.updateArgs,
-      resetArgs = _ref8.resetArgs,
-      compact = _ref8.compact,
-      inAddonPanel = _ref8.inAddonPanel,
-      initialExpandedArgs = _ref8.initialExpandedArgs,
-      _ref8$sort = _ref8.sort,
-      sort = _ref8$sort === void 0 ? 'none' : _ref8$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 groups = groupRows((0, _pickBy.default)(rows, function (row) {
     var _row$table;
 
@@ -378,7 +471,7 @@ var ArgsTable = function ArgsTable(props) {
     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 ? null : /*#__PURE__*/_react.default.createElement("th", null, "Description"), compact ? null : /*#__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, "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, {
     onClick: function onClick() {
       return resetArgs();
     },
@@ -386,7 +479,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({
@@ -394,10 +487,10 @@ var ArgsTable = function ArgsTable(props) {
       row: row,
       arg: args && args[row.key]
     }, common));
-  }), Object.entries(groups.ungroupedSubsections).map(function (_ref9) {
-    var _ref10 = _slicedToArray(_ref9, 2),
-        subcategory = _ref10[0],
-        subsection = _ref10[1];
+  }), Object.entries(groups.ungroupedSubsections).map(function (_ref10) {
+    var _ref11 = _slicedToArray(_ref10, 2),
+        subcategory = _ref11[0],
+        subsection = _ref11[1];
 
     return /*#__PURE__*/_react.default.createElement(_SectionRow.SectionRow, {
       key: subcategory,
@@ -412,10 +505,10 @@ var ArgsTable = function ArgsTable(props) {
         expandable: expandable
       }, common));
     }));
-  }), Object.entries(groups.sections).map(function (_ref11) {
-    var _ref12 = _slicedToArray(_ref11, 2),
-        category = _ref12[0],
-        section = _ref12[1];
+  }), Object.entries(groups.sections).map(function (_ref12) {
+    var _ref13 = _slicedToArray(_ref12, 2),
+        category = _ref13[0],
+        section = _ref13[1];
 
     return /*#__PURE__*/_react.default.createElement(_SectionRow.SectionRow, {
       key: category,
@@ -428,10 +521,10 @@ var ArgsTable = function ArgsTable(props) {
         row: row,
         arg: args && args[row.key]
       }, common));
-    }), Object.entries(section.subsections).map(function (_ref13) {
-      var _ref14 = _slicedToArray(_ref13, 2),
-          subcategory = _ref14[0],
-          subsection = _ref14[1];
+    }), Object.entries(section.subsections).map(function (_ref14) {
+      var _ref15 = _slicedToArray(_ref14, 2),
+          subcategory = _ref15[0],
+          subsection = _ref15[1];
 
       return /*#__PURE__*/_react.default.createElement(_SectionRow.SectionRow, {
         key: subcategory,

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

@@ -23,7 +23,7 @@ require("core-js/modules/es.symbol.iterator.js");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.WithDefaultExpandedArgs = exports.Empty = exports.Error = exports.AllControls = exports.SubsectionsOnly = exports.SectionsAndSubsections = exports.SectionsCompact = exports.Sections = exports.InAddonPanelWithWarning = exports.InAddonPanel = exports.Compact = exports.Normal = exports.default = void 0;
+exports.WithDefaultExpandedArgs = exports.Empty = exports.Error = exports.AllControls = exports.SubsectionsOnly = exports.SectionsAndSubsections = exports.SectionsCompact = exports.Sections = exports.InAddonPanelWithWarning = exports.InAddonPanel = exports.Compact = exports.Normal = exports.Loading = exports.default = void 0;
 
 require("core-js/modules/es.object.assign.js");
 
@@ -75,6 +75,11 @@ var Template = function Template(args) {
 };
 
 Template.displayName = "Template";
+var Loading = Template.bind({});
+exports.Loading = Loading;
+Loading.args = {
+  isLoading: true
+};
 var Normal = Template.bind({});
 exports.Normal = Normal;
 Normal.args = {

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.NamedColors = exports.defaultStyle = exports.default = void 0;
+exports.NamedColors = exports.DefaultStyle = exports.default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
@@ -17,7 +17,7 @@ var _default = {
 };
 exports.default = _default;
 
-var defaultStyle = function defaultStyle() {
+var DefaultStyle = function DefaultStyle() {
   return /*#__PURE__*/_react.default.createElement(_ColorPalette.ColorPalette, null, /*#__PURE__*/_react.default.createElement(_ColorPalette.ColorItem, {
     title: "theme.color.greyscale",
     subtitle: "Some of the greys",
@@ -41,8 +41,8 @@ var defaultStyle = function defaultStyle() {
   }));
 };
 
-exports.defaultStyle = defaultStyle;
-defaultStyle.displayName = "defaultStyle";
+exports.DefaultStyle = DefaultStyle;
+DefaultStyle.displayName = "DefaultStyle";
 
 var NamedColors = function NamedColors() {
   return /*#__PURE__*/_react.default.createElement(_ColorPalette.ColorPalette, null, /*#__PURE__*/_react.default.createElement(_ColorPalette.ColorItem, {

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

@@ -23,7 +23,7 @@ require("core-js/modules/es.symbol.iterator.js");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Markdown = exports.Text = exports.NoText = exports.Empty = exports.WithSubtitle = exports.default = void 0;
+exports.Markdown = exports.Text = exports.NoText = exports.Empty = exports.WithSubtitle = exports.Loading = exports.default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
@@ -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+XG4gICAgICAgIHtzdG9yeUZuKCl9XG4gICAgICA8Lz5cbiAgICApLFxuICBdLFxuICBwYXJhbWV0ZXJzOiB7XG4gICAgbGF5b3V0OiAnZnVsbHNjcmVlbicsXG4gIH0sXG59O1xuXG5leHBvcnQgY29uc3QgV2l0aFN1YnRpdGxlID0gKCkgPT4gKFxuICA8RG9jc1BhZ2VXcmFwcGVyPlxuICAgIDxUaXRsZT5Eb2NzUGFnZTwvVGl0bGU+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+XG4gICAgPGFyZ3NUYWJsZS5Mb2FkaW5nIC8+XG4gICAgPFNvdXJjZSB7Li4uc291cmNlLkxvYWRpbmcuYXJnc30gLz5cbiAgPC9Eb2NzUGFnZVdyYXBwZXI+XG4pO1xuXG5leHBvcnQgY29uc3QgV2l0aFN1YnRpdGxlID0gKCkgPT4gKFxuICA8RG9jc1BhZ2VXcmFwcGVyPlxuICAgIDxUaXRsZT5Eb2NzUGFnZTwvVGl0bGU+XG4gICAgPFN1YnRpdGxlPlxuICAgICAgV2hhdCB0aGUgRG9jc1BhZ2UgbG9va3MgbGlrZS4gTWVhbnQgdG8gYmUgUUFlZCBpbiBDYW52YXMgdGFiIG5vdCBpbiBEb2NzIHRhYi5cbiAgICA8L1N1YnRpdGxlPlxuICAgIDxEZXNjcmlwdGlvbiB7Li4uZGVzY3JpcHRpb24uVGV4dC5hcmdzfSAvPlxuICAgIDxQcmV2aWV3LlNpbmdsZSAvPlxuICAgIDxBcmdzVGFibGUgey4uLmFyZ3NUYWJsZS5Ob3JtYWwuYXJnc30gLz5cbiAgICA8U291cmNlIHsuLi5zb3VyY2UuSlNYLmFyZ3N9IC8+XG4gIDwvRG9jc1BhZ2VXcmFwcGVyPlxuKTtcblxuZXhwb3J0IGNvbnN0IEVtcHR5ID0gKCkgPT4gKFxuICA8RG9jc1BhZ2VXcmFwcGVyPlxuICAgIDxTdG9yeS5FcnJvciAvPlxuICAgIDxBcmdzVGFibGUgey4uLmFyZ3NUYWJsZS5FcnJvci5hcmdzfSAvPlxuICAgIDxTb3VyY2Ugey4uLnNvdXJjZS5Tb3VyY2VVbmF2YWlsYWJsZS5hcmdzfSAvPlxuICA8L0RvY3NQYWdlV3JhcHBlcj5cbik7XG5cbmV4cG9ydCBjb25zdCBOb1RleHQgPSAoKSA9PiAoXG4gIDxEb2NzUGFnZVdyYXBwZXI+XG4gICAgPFRpdGxlPm5vIHRleHQ8L1RpdGxlPlxuICAgIDxQcmV2aWV3LlNpbmdsZSAvPlxuICAgIDxBcmdzVGFibGUgey4uLmFyZ3NUYWJsZS5Ob3JtYWwuYXJnc30gLz5cbiAgICA8U291cmNlIHsuLi5zb3VyY2UuSlNYLmFyZ3N9IC8+XG4gIDwvRG9jc1BhZ2VXcmFwcGVyPlxuKTtcblxuZXhwb3J0IGNvbnN0IFRleHQgPSAoKSA9PiAoXG4gIDxEb2NzUGFnZVdyYXBwZXI+XG4gICAgPFRpdGxlPlNlbnNvcml1bTwvVGl0bGU+XG4gICAgPERlc2NyaXB0aW9uIHsuLi5kZXNjcmlwdGlvbi5UZXh0LmFyZ3N9IC8+XG4gICAgPFByZXZpZXcuU2luZ2xlIC8+XG4gICAgPEFyZ3NUYWJsZSB7Li4uYXJnc1RhYmxlLk5vcm1hbC5hcmdzfSAvPlxuICAgIDxTb3VyY2Ugey4uLnNvdXJjZS5KU1guYXJnc30gLz5cbiAgPC9Eb2NzUGFnZVdyYXBwZXI+XG4pO1xuXG5leHBvcnQgY29uc3QgTWFya2Rvd24gPSAoKSA9PiAoXG4gIDxEb2NzUGFnZVdyYXBwZXI+XG4gICAgPFRpdGxlPm1hcmtkb3duPC9UaXRsZT5cbiAgICA8RGVzY3JpcHRpb24gey4uLmRlc2NyaXB0aW9uLk1hcmtkb3duLmFyZ3N9IC8+XG4gICAgPFByZXZpZXcuU2luZ2xlIC8+XG4gICAgPEFyZ3NUYWJsZSB7Li4uYXJnc1RhYmxlLk5vcm1hbC5hcmdzfSAvPlxuICAgIDxTb3VyY2Ugey4uLnNvdXJjZS5KU1guYXJnc30gLz5cbiAgPC9Eb2NzUGFnZVdyYXBwZXI+XG4pO1xuIl19 */",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
 
@@ -77,6 +77,13 @@ 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));
+};
+
+exports.Loading = Loading;
+Loading.displayName = "Loading";
+
 var WithSubtitle = function WithSubtitle() {
   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.Single, null), /*#__PURE__*/_react.default.createElement(_index.ArgsTable, argsTable.Normal.args), /*#__PURE__*/_react.default.createElement(_index.Source, source.JSX.args));
 };

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.error = exports.default = void 0;
+exports.Error = exports.default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
@@ -17,9 +17,9 @@ var _default = {
 };
 exports.default = _default;
 
-var error = function error() {
+var Error = function Error() {
   return /*#__PURE__*/_react.default.createElement(_EmptyBlock.EmptyBlock, null, "Generic error message");
 };
 
-exports.error = error;
-error.displayName = "error";
+exports.Error = Error;
+Error.displayName = "Error";

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.defaultStyle = exports.default = void 0;
+exports.DefaultStyle = exports.default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
@@ -19,7 +19,7 @@ var _default = {
 };
 exports.default = _default;
 
-var defaultStyle = function defaultStyle() {
+var DefaultStyle = function DefaultStyle() {
   return /*#__PURE__*/_react.default.createElement(_IconGallery.IconGallery, null, /*#__PURE__*/_react.default.createElement(_IconGallery.IconItem, {
     name: "add"
   }, /*#__PURE__*/_react.default.createElement(_icon.Icons, {
@@ -49,5 +49,5 @@ var defaultStyle = function defaultStyle() {
   })));
 };
 
-exports.defaultStyle = defaultStyle;
-defaultStyle.displayName = "defaultStyle";
+exports.DefaultStyle = DefaultStyle;
+DefaultStyle.displayName = "DefaultStyle";

package/dist/cjs/blocks/Preview.js

@@ -29,7 +29,7 @@ require("core-js/modules/es.object.get-own-property-descriptor.js");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Preview = void 0;
+exports.PreviewSkeleton = exports.Preview = void 0;
 
 require("regenerator-runtime/runtime.js");
 
@@ -67,6 +67,8 @@ var _ZoomContext = require("./ZoomContext");
 
 var _Zoom = require("../Zoom/Zoom");
 
+var _ = require(".");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
@@ -413,4 +415,13 @@ var Preview = function Preview(_ref8) {
 };
 
 exports.Preview = Preview;
-Preview.displayName = "Preview";
+Preview.displayName = "Preview";
+
+var PreviewSkeleton = function PreviewSkeleton() {
+  return /*#__PURE__*/_react.default.createElement(Preview, {
+    withToolbar: true
+  }, /*#__PURE__*/_react.default.createElement(_.StorySkeleton, null));
+};
+
+exports.PreviewSkeleton = PreviewSkeleton;
+PreviewSkeleton.displayName = "PreviewSkeleton";

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

@@ -23,7 +23,7 @@ require("core-js/modules/es.symbol.iterator.js");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.WithAdditionalActions = exports.WithCenteredMulti = exports.WithCenteredSingle = exports.WithFullscreenMulti = exports.WithFullscreenSingle = exports.WithToolbarMulti = exports.Wide = exports.WithToolbar = exports.GridWith3Columns = exports.Column = exports.Row = exports.Single = exports.CodeError = exports.CodeExpanded = exports.CodeCollapsed = exports.default = void 0;
+exports.WithAdditionalActions = exports.WithCenteredMulti = exports.WithCenteredSingle = exports.WithFullscreenMulti = exports.WithFullscreenSingle = exports.WithToolbarMulti = exports.Wide = exports.WithToolbar = exports.GridWith3Columns = exports.Column = exports.Row = exports.Single = exports.CodeError = exports.CodeExpanded = exports.CodeCollapsed = exports.Loading = exports.default = void 0;
 
 require("core-js/modules/es.object.assign.js");
 
@@ -58,6 +58,13 @@ var _default = {
 };
 exports.default = _default;
 
+var Loading = function Loading() {
+  return /*#__PURE__*/_react.default.createElement(_Preview.PreviewSkeleton, null);
+};
+
+exports.Loading = Loading;
+Loading.displayName = "Loading";
+
 var CodeCollapsed = function CodeCollapsed() {
   return /*#__PURE__*/_react.default.createElement(_Preview.Preview, {
     isExpanded: false,

package/dist/cjs/blocks/Source.js

@@ -51,23 +51,72 @@ exports.SourceError = SourceError;
   SourceError["SOURCE_UNAVAILABLE"] = "Oh no! The source is not available.";
 })(SourceError || (exports.SourceError = SourceError = {}));
 
+var SourceSkeletonWrapper = _theming.styled.div(function (_ref2) {
+  var theme = _ref2.theme;
+  return {
+    background: theme.background.content,
+    borderRadius: theme.appBorderRadius,
+    border: "1px solid ".concat(theme.appBorderColor),
+    boxShadow: theme.base === 'light' ? 'rgba(0, 0, 0, 0.10) 0 1px 3px 0' : 'rgba(0, 0, 0, 0.20) 0 2px 5px 0',
+    margin: '25px 0 40px',
+    padding: '20px 20px 20px 22px'
+  };
+});
+
+var SourceSkeletonPlaceholder = _theming.styled.div(function (_ref3) {
+  var theme = _ref3.theme;
+  return {
+    animation: "".concat(theme.animation.glow, " 1.5s ease-in-out infinite"),
+    background: theme.appBorderColor,
+    height: 17,
+    marginTop: 1,
+    width: '60%',
+    '&:first-child': {
+      margin: 0
+    }
+  };
+});
+
+var SourceSkeleton = function SourceSkeleton() {
+  return /*#__PURE__*/_react.default.createElement(SourceSkeletonWrapper, null, /*#__PURE__*/_react.default.createElement(SourceSkeletonPlaceholder, null), /*#__PURE__*/_react.default.createElement(SourceSkeletonPlaceholder, {
+    style: {
+      width: '80%'
+    }
+  }), /*#__PURE__*/_react.default.createElement(SourceSkeletonPlaceholder, {
+    style: {
+      width: '30%'
+    }
+  }), /*#__PURE__*/_react.default.createElement(SourceSkeletonPlaceholder, {
+    style: {
+      width: '80%'
+    }
+  }));
+};
+
+SourceSkeleton.displayName = "SourceSkeleton";
+
 /**
  * Syntax-highlighted source code for a component (or anything!)
  */
 var Source = function Source(props) {
-  var _ref2 = props,
-      error = _ref2.error;
+  var _ref4 = props,
+      isLoading = _ref4.isLoading,
+      error = _ref4.error;
+
+  if (isLoading) {
+    return /*#__PURE__*/_react.default.createElement(SourceSkeleton, null);
+  }
 
   if (error) {
     return /*#__PURE__*/_react.default.createElement(_EmptyBlock.EmptyBlock, null, error);
   }
 
-  var _ref3 = props,
-      language = _ref3.language,
-      code = _ref3.code,
-      dark = _ref3.dark,
-      format = _ref3.format,
-      rest = _objectWithoutProperties(_ref3, ["language", "code", "dark", "format"]);
+  var _ref5 = props,
+      language = _ref5.language,
+      code = _ref5.code,
+      dark = _ref5.dark,
+      format = _ref5.format,
+      rest = _objectWithoutProperties(_ref5, ["language", "code", "dark", "format"]);
 
   var syntaxHighlighter = /*#__PURE__*/_react.default.createElement(StyledSyntaxHighlighter, _extends({
     bordered: true,

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.SourceUnavailable = exports.NoStory = exports.CSS = exports.JSX = exports.default = void 0;
+exports.SourceUnavailable = exports.NoStory = exports.CSS = exports.JSX = exports.Loading = exports.default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
@@ -16,6 +16,16 @@ var _default = {
   component: _Source.Source
 };
 exports.default = _default;
+
+var Loading = function Loading(args) {
+  return /*#__PURE__*/_react.default.createElement(_Source.Source, args);
+};
+
+exports.Loading = Loading;
+Loading.displayName = "Loading";
+Loading.args = {
+  isLoading: true
+};
 var jsxCode = "\n<MyComponent boolProp scalarProp={1} complexProp={{ foo: 1, bar: '2' }}>\n  <SomeOtherComponent funcProp={(a) => a.id} />\n</MyComponent>\n";
 
 var JSX = function JSX(args) {

package/dist/cjs/blocks/Story.js

@@ -25,7 +25,7 @@ require("core-js/modules/es.symbol.iterator.js");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Story = exports.StoryError = void 0;
+exports.StorySkeleton = exports.Story = exports.StoryError = void 0;
 
 require("core-js/modules/es.array.concat.js");
 
@@ -37,6 +37,8 @@ var _EmptyBlock = require("./EmptyBlock");
 
 var _ZoomContext = require("./ZoomContext");
 
+var _ = require("..");
+
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
 
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -126,4 +128,11 @@ var Story = function Story(_ref4) {
   });
 };
 
-exports.Story = Story;
+exports.Story = Story;
+
+var StorySkeleton = function StorySkeleton() {
+  return /*#__PURE__*/_react.default.createElement(_.Loader, null);
+};
+
+exports.StorySkeleton = StorySkeleton;
+StorySkeleton.displayName = "StorySkeleton";

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

@@ -29,7 +29,7 @@ require("core-js/modules/es.object.get-own-property-descriptor.js");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ReactHook = exports.Error = exports.Inline = exports.default = void 0;
+exports.ReactHook = exports.Error = exports.Inline = exports.Loading = exports.default = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
@@ -83,8 +83,16 @@ var buttonHookFn = function buttonHookFn() {
 
 buttonHookFn.displayName = "buttonHookFn";
 
+var Loading = function Loading() {
+  return /*#__PURE__*/_react.default.createElement(_Story.StorySkeleton, null);
+};
+
+exports.Loading = Loading;
+Loading.displayName = "Loading";
+
 var Inline = function Inline() {
   return /*#__PURE__*/_react.default.createElement(_Story.Story, {
+    id: "id",
     inline: true,
     storyFn: buttonFn,
     title: "hello button"
@@ -96,6 +104,7 @@ Inline.displayName = "Inline";
 
 var Error = function Error() {
   return /*#__PURE__*/_react.default.createElement(_Story.Story, {
+    id: "id",
     error: _Story.StoryError.NO_STORY
   });
 };
@@ -105,6 +114,7 @@ Error.displayName = "Error";
 
 var ReactHook = function ReactHook() {
   return /*#__PURE__*/_react.default.createElement(_Story.Story, {
+    id: "id",
     inline: true,
     storyFn: buttonHookFn,
     title: "hello button"