@decisiv/ui-components 2.0.1-alpha.16 → 2.0.1-alpha.161

package/lib/components/Link/index.test.js

@@ -13,54 +13,75 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 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); }
 
 describe('Link', function () {
-  var renderLink = function renderLink() {
-    var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-    return (0, _react2.render)(_react.default.createElement(_.default, _extends({
-      to: "/",
-      text: "text"
-    }, props)));
-  };
+  function testLinkVariations(baseLinkProps) {
+    var renderLink = function renderLink() {
+      var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+      return (0, _react2.render)(_react.default.createElement(_.default, _extends({}, baseLinkProps, props)));
+    };
 
-  it('renders correctly', function () {
-    var _renderLink = renderLink(),
-        container = _renderLink.container;
+    it('renders correctly', function () {
+      var _renderLink = renderLink(),
+          container = _renderLink.container;
 
-    expect(container).toMatchSnapshot();
-  });
-  it('renders correctly with an Icon', function () {
-    var _renderLink2 = renderLink({
-      icon: _Home.default
-    }),
-        container = _renderLink2.container;
+      expect(container).toMatchSnapshot();
+    });
+    it('renders correctly with an Icon', function () {
+      var _renderLink2 = renderLink({
+        icon: _Home.default
+      }),
+          container = _renderLink2.container;
 
-    expect(container).toMatchSnapshot();
-  });
-  it('correctly renders the Icon on each side', function () {
-    var left = renderLink({
-      icon: _Home.default,
-      iconPosition: 'left'
+      expect(container).toMatchSnapshot();
     });
-    var right = renderLink({
-      icon: _Home.default,
-      iconPosition: 'right'
+    it('correctly renders the Icon on each side', function () {
+      var left = renderLink({
+        icon: _Home.default,
+        iconPosition: 'left'
+      });
+      var right = renderLink({
+        icon: _Home.default,
+        iconPosition: 'right'
+      });
+      expect(left.container).toMatchSnapshot();
+      expect(right.container).toMatchSnapshot();
     });
-    expect(left.container).toMatchSnapshot();
-    expect(right.container).toMatchSnapshot();
-  });
-  it('correctly renders the small size', function () {
-    var _renderLink3 = renderLink({
-      size: 'small'
-    }),
-        container = _renderLink3.container;
+    it('correctly renders the small size', function () {
+      var _renderLink3 = renderLink({
+        size: 'small'
+      }),
+          container = _renderLink3.container;
 
-    expect(container).toMatchSnapshot();
-  });
-  it('correctly renders the inverted variant', function () {
-    var _renderLink4 = renderLink({
-      variant: 'inverted'
-    }),
-        container = _renderLink4.container;
+      expect(container).toMatchSnapshot();
+    });
+    it('correctly renders the inverted variant', function () {
+      var _renderLink4 = renderLink({
+        variant: 'inverted'
+      }),
+          container = _renderLink4.container;
 
-    expect(container).toMatchSnapshot();
+      expect(container).toMatchSnapshot();
+    });
+    it('correctly renders with text as HTML', function () {
+      var _renderLink5 = renderLink({
+        text: _react.default.createElement("span", null, "link with", _react.default.createElement("strong", null, "HTML"))
+      }),
+          container = _renderLink5.container;
+
+      expect(container).toMatchSnapshot();
+    });
+  }
+
+  describe('when enabled', function () {
+    testLinkVariations({
+      to: '/somewhere',
+      text: 'when enabled'
+    });
+  });
+  describe('when disabled', function () {
+    testLinkVariations({
+      to: '/elsewhere',
+      text: 'when disabled',
+      disabled: true
+    });
   });
 });

package/lib/components/Link/schema.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../../src/components/Link/schema.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,uBAAuB,cAoBlC,CAAC;AAEH,QAAA,MAAM,MAAM,KAAoC,CAAC;AAIjD,eAAe,MAAM,CAAC"}
+{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../../src/components/Link/schema.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,uBAAuB,cA0BlC,CAAC;AAEH,QAAA,MAAM,MAAM,KAAoC,CAAC;AAIjD,eAAe,MAAM,CAAC"}

package/lib/components/Link/schema.js

@@ -10,8 +10,9 @@ var _reactDesc = require("react-desc");
 // @ts-ignore no module typings
 var makeLinkSchemaPropTypes = function makeLinkSchemaPropTypes() {
   return {
+    disabled: _reactDesc.PropTypes.bool.description('Disables the link if true.').defaultValue('false'),
     to: _reactDesc.PropTypes.string.description('Where to navigate when the link is clicked.').isRequired,
-    text: _reactDesc.PropTypes.string.description("The link's text."),
+    text: _reactDesc.PropTypes.oneOfType([_reactDesc.PropTypes.string, _reactDesc.PropTypes.node]).description("The link's inline text content. Required if no icon is provided."),
     size: _reactDesc.PropTypes.oneOf(['small', 'medium']).description("The size in which to render the link's text and icon").defaultValue('medium'),
     icon: _reactDesc.PropTypes.element.description('Which `iconix` icon to render.'),
     iconPosition: _reactDesc.PropTypes.oneOf(['left', 'right']).description('In which side of the text the icon should be rendered.').defaultValue('left'),

package/lib/components/Link/styles.d.ts

@@ -0,0 +1,20 @@
+import { FlattenSimpleInterpolation, SimpleInterpolation } from 'styled-components';
+import { Color, IconPosition } from './types';
+export declare function linkColorStyles(normalColor: Color, visitedColor: Color, hoverColor: Color, focusColors?: {
+    border: Color;
+    shadow: Color;
+}): FlattenSimpleInterpolation;
+export declare const fontSize: (p: {
+    size?: "small" | "medium" | undefined;
+}) => SimpleInterpolation;
+export declare const IconContainer: import("styled-components").StyledComponent<"span", any, {
+    position: IconPosition;
+    withText: boolean;
+}, never>;
+export declare const sharedLinkStyles: import("styled-components").FlattenInterpolation<import("styled-components").ThemedStyledProps<{
+    size?: "small" | "medium" | undefined;
+}, any>>;
+export declare const linkStyles: import("styled-components").FlattenInterpolation<import("styled-components").ThemedStyledProps<{
+    size?: "small" | "medium" | undefined;
+}, any>>;
+//# sourceMappingURL=styles.d.ts.map

package/lib/components/Link/styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/Link/styles.ts"],"names":[],"mappings":"AAEA,OAAe,EAEb,0BAA0B,EAC1B,mBAAmB,EACpB,MAAM,mBAAmB,CAAC;AAS3B,OAAO,EAAE,KAAK,EAAE,YAAY,EAAY,MAAM,SAAS,CAAC;AAiBxD,wBAAgB,eAAe,CAC7B,WAAW,EAAE,KAAK,EAClB,YAAY,EAAE,KAAK,EACnB,UAAU,EAAE,KAAK,EACjB,WAAW,CAAC,EAAE;IAAE,MAAM,EAAE,KAAK,CAAC;IAAC,MAAM,EAAE,KAAK,CAAA;CAAE,GAC7C,0BAA0B,CAsC5B;AAuDD,eAAO,MAAM,QAAQ;;yBAMpB,CAAC;AAcF,eAAO,MAAM,aAAa;;;SAGzB,CAAC;AAEF,eAAO,MAAM,gBAAgB;;QAkB5B,CAAC;AAEF,eAAO,MAAM,UAAU;;QAItB,CAAC"}

package/lib/components/Link/styles.js

@@ -0,0 +1,131 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.linkColorStyles = linkColorStyles;
+exports.linkStyles = exports.sharedLinkStyles = exports.IconContainer = exports.fontSize = void 0;
+
+var _toColorString = _interopRequireDefault(require("polished/lib/color/toColorString"));
+
+var _rem = _interopRequireDefault(require("polished/lib/helpers/rem"));
+
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+
+var _styledTheming = _interopRequireDefault(require("styled-theming"));
+
+var _designTokens = _interopRequireDefault(require("@decisiv/design-tokens"));
+
+var _ConfigProvider = require("../../providers/ConfigProvider");
+
+var _focusRingWithColor = _interopRequireDefault(require("../../utils/focusRingWithColor"));
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { keys.push.apply(keys, Object.getOwnPropertySymbols(object)); } if (enumerableOnly) keys = keys.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+var _designTokens$color = _designTokens.default.color,
+    base = _designTokens$color.base,
+    interaction = _designTokens$color.interaction,
+    opacity = _designTokens$color.opacity,
+    fontSizes = _designTokens.default.typography.size.alias;
+/*
+  Notes about changing SVG fill color inside visited links:
+
+  1: Changing the color of a node that contains SVG with nodes set to have
+     fill="currentColor" does not work on Safari for :visited links (it does
+     work on Chrome and Firefox). To work around that, we instead change the
+     fill color of those SVG nodes to be the same color as the visited link.
+*/
+
+function linkColorStyles(normalColor, visitedColor, hoverColor, focusColors) {
+  var focusStyles = focusColors ? (0, _styledComponents.css)(["&:focus{border-color:", ";", "}"], (0, _toColorString.default)(focusColors.border), (0, _focusRingWithColor.default)((0, _toColorString.default)(focusColors.shadow))) : (0, _styledComponents.css)(["&:focus{border-color:transparent;box-shadow:none;}"]);
+  var normalColorString = (0, _toColorString.default)(normalColor);
+  var visitedColorString = (0, _toColorString.default)(visitedColor);
+  var hoverColorString = (0, _toColorString.default)(hoverColor);
+  return (0, _styledComponents.css)(["&:link{color:", ";}", " &:visited,&:visited svg [fill='currentColor']{color:", ";fill:", ";}&:hover,&:hover svg [fill='currentColor']{color:", ";fill:", ";}"], normalColorString, focusStyles, visitedColorString, visitedColorString, hoverColorString, hoverColorString);
+}
+
+var modeStateColors = {
+  light: {
+    normal: interaction.pacificOcean,
+    visited: interaction.redWine,
+    hover: interaction.indianOcean,
+    focus: {
+      border: interaction.pacificOcean,
+      shadow: interaction.pacificOcean40
+    }
+  },
+  dark: {
+    normal: interaction.arcticOcean,
+    visited: interaction.roseWine,
+    hover: interaction.atlanticOcean,
+    focus: {
+      border: interaction.arcticOcean,
+      shadow: interaction.arcticOcean40
+    }
+  }
+};
+
+var modeColorStyles = function modeColorStyles(mode) {
+  var modeColors = modeStateColors[mode];
+  return linkColorStyles(modeColors.normal, modeColors.visited, modeColors.hover, modeColors.focus);
+};
+
+var invertedColorStyles = function invertedColorStyles() {
+  return linkColorStyles(base.snowWhite, _objectSpread({}, base.charcoal, {
+    alpha: 0.6
+  }), _objectSpread({}, base.snowWhite, {
+    alpha: 0.7
+  }), {
+    border: base.blackSheep,
+    shadow: opacity.charcoal40
+  });
+};
+
+var color = _styledTheming.default.variants(_ConfigProvider.themeKeys.mode, 'variant', {
+  normal: {
+    light: modeColorStyles('light'),
+    dark: modeColorStyles('dark')
+  },
+  inverted: {
+    light: invertedColorStyles(),
+    dark: invertedColorStyles()
+  }
+});
+
+var fontSize = function fontSize(p) {
+  var size = (0, _rem.default)(fontSizes[p.size === 'small' ? 'paragraph2' : 'default']);
+  return (0, _styledComponents.css)(["font-size:", ";"], size);
+};
+
+exports.fontSize = fontSize;
+var iconMarginProp = {
+  left: 'margin-right',
+  right: 'margin-left'
+};
+
+var iconMargin = function iconMargin(props) {
+  if (props.withText) {
+    return "".concat(iconMarginProp[props.position], ": ").concat((0, _rem.default)(5));
+  }
+
+  return '';
+};
+
+var IconContainer = _styledComponents.default.span.withConfig({
+  displayName: "styles__IconContainer",
+  componentId: "sc-7854xa-0"
+})(["line-height:0;", ";"], iconMargin);
+
+exports.IconContainer = IconContainer;
+var sharedLinkStyles = (0, _styledComponents.css)(["background-color:transparent;align-items:baseline;border:1px solid transparent;border-radius:2px;display:inline-flex;text-decoration:underline;transition:none;&:hover{text-decoration:underline;}", ";", "{align-self:center;}"], fontSize, IconContainer);
+exports.sharedLinkStyles = sharedLinkStyles;
+var linkStyles = (0, _styledComponents.css)(["cursor:pointer;", ";", ";"], color, sharedLinkStyles);
+exports.linkStyles = linkStyles;

package/lib/components/Link/types.d.ts

@@ -0,0 +1,28 @@
+import { ComponentPropsWithRef, ReactNode, Ref } from 'react';
+import { StyledComponent } from 'styled-components';
+import { RgbaColor, RgbColor } from 'polished/lib/types/color';
+import { IconProps } from '@decisiv/iconix';
+import { LinkRenderer, LinkRendererRef } from '../../providers/ConfigProvider';
+export declare type LinkRef = LinkRendererRef;
+export declare type LinkSize = 'medium' | 'small';
+export declare type IconPosition = 'left' | 'right';
+export declare type LinkVariant = 'normal' | 'inverted';
+export declare type Color = RgbColor | RgbaColor;
+export declare type IconComponent = (props: IconProps) => JSX.Element;
+export interface LinkProps extends ComponentPropsWithRef<'a'> {
+    disabled?: boolean;
+    icon?: IconComponent;
+    iconPosition?: IconPosition;
+    size?: LinkSize;
+    text?: string | ReactNode;
+    to: string;
+    variant?: LinkVariant;
+}
+interface RendererProps {
+    children: ReactNode;
+    ref?: Ref<LinkRef>;
+    size?: LinkSize;
+}
+export declare type StyledLinkRenderer = StyledComponent<LinkRenderer, {}, RendererProps>;
+export {};
+//# sourceMappingURL=types.d.ts.map

package/lib/components/Link/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Link/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAC9D,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AAE/D,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAE5C,OAAO,EAAE,YAAY,EAAE,eAAe,EAAE,MAAM,gCAAgC,CAAC;AAE/E,oBAAY,OAAO,GAAG,eAAe,CAAC;AACtC,oBAAY,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;AAC1C,oBAAY,YAAY,GAAG,MAAM,GAAG,OAAO,CAAC;AAC5C,oBAAY,WAAW,GAAG,QAAQ,GAAG,UAAU,CAAC;AAEhD,oBAAY,KAAK,GAAG,QAAQ,GAAG,SAAS,CAAC;AACzC,oBAAY,aAAa,GAAG,CAAC,KAAK,EAAE,SAAS,KAAK,GAAG,CAAC,OAAO,CAAC;AAE9D,MAAM,WAAW,SAAU,SAAQ,qBAAqB,CAAC,GAAG,CAAC;IAC3D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,CAAC,EAAE,WAAW,CAAC;CACvB;AAED,UAAU,aAAa;IACrB,QAAQ,EAAE,SAAS,CAAC;IACpB,GAAG,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC,CAAC;IACnB,IAAI,CAAC,EAAE,QAAQ,CAAC;CACjB;AAED,oBAAY,kBAAkB,GAAG,eAAe,CAC9C,YAAY,EACZ,EAAE,EACF,aAAa,CACd,CAAC"}

package/lib/components/Link/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/lib/components/Loading/Loading.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { LoadingProps } from './types';
+declare const Loading: {
+    ({ title, description, variant, size, ...props }: LoadingProps): JSX.Element;
+    defaultProps: {
+        size: string;
+        variant: string;
+    };
+    propTypes: any;
+};
+export default Loading;
+//# sourceMappingURL=Loading.d.ts.map

package/lib/components/Loading/Loading.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Loading.d.ts","sourceRoot":"","sources":["../../../src/components/Loading/Loading.tsx"],"names":[],"mappings":";AAYA,OAAO,EAAQ,YAAY,EAAE,MAAM,SAAS,CAAC;AAQ7C,QAAA,MAAM,OAAO;;;;;;;CAuCZ,CAAC;AASF,eAAe,OAAO,CAAC"}

package/lib/components/Loading/Loading.js

@@ -0,0 +1,70 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Typography = require("../Typography");
+
+var _schema = _interopRequireDefault(require("./schema"));
+
+var _styles = require("./styles");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+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 _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+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; }
+
+var TITLE_MAP = {
+  small: _Typography.P,
+  medium: _Typography.H4,
+  large: _Typography.H3
+};
+
+var Loading = function Loading(_ref) {
+  var title = _ref.title,
+      description = _ref.description,
+      variant = _ref.variant,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 'medium' : _ref$size,
+      props = _objectWithoutProperties(_ref, ["title", "description", "variant", "size"]);
+
+  var Title = TITLE_MAP[size];
+  var inverted = variant === 'inverted';
+  var textSize = size === 'small' ? 'small' : undefined;
+  var titleColor = inverted ? 'snowWhite' : undefined;
+  var descriptionColor = inverted ? 'fullMoon' : 'alaskanHusky';
+  var showTextContainer = !!title || !!description;
+  return _react.default.createElement(_styles.Container, _extends({
+    loadingSize: size
+  }, props), _react.default.createElement(_styles.AnimationContainer, {
+    size: size
+  }, _react.default.createElement(_styles.Bouncer, {
+    inverted: inverted
+  }), _react.default.createElement(_styles.Bouncer, {
+    inverted: inverted,
+    shadow: true
+  })), showTextContainer && _react.default.createElement(_styles.TextContainer, {
+    size: size
+  }, title && _react.default.createElement(Title, {
+    color: titleColor,
+    size: textSize
+  }, title), description && _react.default.createElement(_Typography.P, {
+    size: textSize,
+    color: descriptionColor
+  }, description)));
+};
+
+Loading.defaultProps = {
+  size: 'medium',
+  variant: 'normal'
+};
+Loading.propTypes = _schema.default.propTypes;
+var _default = Loading;
+exports.default = _default;

package/lib/components/Loading/index.d.ts

@@ -0,0 +1,4 @@
+import Loading from './Loading';
+export { LoadingProps, Size as LoadingSize, Variant as LoadingVariant, } from './types';
+export default Loading;
+//# sourceMappingURL=index.d.ts.map

package/lib/components/Loading/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Loading/index.ts"],"names":[],"mappings":"AAAA,OAAO,OAAO,MAAM,WAAW,CAAC;AAEhC,OAAO,EACL,YAAY,EACZ,IAAI,IAAI,WAAW,EACnB,OAAO,IAAI,cAAc,GAC1B,MAAM,SAAS,CAAC;AAEjB,eAAe,OAAO,CAAC"}

package/lib/components/Loading/index.js

@@ -0,0 +1,33 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "LoadingProps", {
+  enumerable: true,
+  get: function get() {
+    return _types.LoadingProps;
+  }
+});
+Object.defineProperty(exports, "LoadingSize", {
+  enumerable: true,
+  get: function get() {
+    return _types.Size;
+  }
+});
+Object.defineProperty(exports, "LoadingVariant", {
+  enumerable: true,
+  get: function get() {
+    return _types.Variant;
+  }
+});
+exports.default = void 0;
+
+var _Loading = _interopRequireDefault(require("./Loading"));
+
+var _types = require("./types");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _default = _Loading.default;
+exports.default = _default;

package/lib/components/Loading/index.test.js

@@ -0,0 +1,55 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@testing-library/react");
+
+var _ = _interopRequireDefault(require("."));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
+
+function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
+
+describe('Loading', function () {
+  it('renders title', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
+    var _render, getByText;
+
+    return regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            _render = (0, _react2.render)(_react.default.createElement(_.default, {
+              title: "Loading..."
+            })), getByText = _render.getByText;
+            expect(getByText(/loading.../i)).toBeInTheDocument();
+
+          case 2:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee);
+  })));
+  it('renders description', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2() {
+    var _render2, getByText;
+
+    return regeneratorRuntime.wrap(function _callee2$(_context2) {
+      while (1) {
+        switch (_context2.prev = _context2.next) {
+          case 0:
+            _render2 = (0, _react2.render)(_react.default.createElement(_.default, {
+              title: "Loading...",
+              description: "Some description"
+            })), getByText = _render2.getByText;
+            expect(getByText(/some description/i)).toBeInTheDocument();
+
+          case 2:
+          case "end":
+            return _context2.stop();
+        }
+      }
+    }, _callee2);
+  })));
+});

package/lib/components/Loading/schema.d.ts

@@ -0,0 +1,4 @@
+export declare const makeLoadingSchemaPropTypes: () => object;
+declare const schema: any;
+export default schema;
+//# sourceMappingURL=schema.d.ts.map

package/lib/components/Loading/schema.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../../src/components/Loading/schema.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,0BAA0B,cAQrC,CAAC;AAEH,QAAA,MAAM,MAAM,KAAuC,CAAC;AAIpD,eAAe,MAAM,CAAC"}

package/lib/components/Loading/schema.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.makeLoadingSchemaPropTypes = void 0;
+
+var _reactDesc = require("react-desc");
+
+var _spacingSchema = require("../../modifiers/spacingSchema");
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { keys.push.apply(keys, Object.getOwnPropertySymbols(object)); } if (enumerableOnly) keys = keys.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+var makeLoadingSchemaPropTypes = function makeLoadingSchemaPropTypes() {
+  return _objectSpread({}, (0, _spacingSchema.makeSpacingSchemaPropTypes)(), {
+    size: _reactDesc.PropTypes.oneOf(['small', 'medium', 'large']).description("The size in which to render the component's text and icon").defaultValue('medium'),
+    variant: _reactDesc.PropTypes.oneOf(['normal', 'inverted']).description('Which loading variant to render.').defaultValue('normal')
+  });
+};
+
+exports.makeLoadingSchemaPropTypes = makeLoadingSchemaPropTypes;
+var schema = (0, _reactDesc.describe)({
+  displayName: 'Loading'
+});
+schema.propTypes = makeLoadingSchemaPropTypes();
+var _default = schema;
+exports.default = _default;