@digigov/ui 0.8.4 → 0.9.0

package/es/layouts/Basic/Main/index.js

@@ -1,21 +1,3 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["children"];
-import React from 'react';
-import Grid from '@material-ui/core/Grid';
-/**
- * The *Main* section of the layout.
- */
-
-export var Main = function Main(_ref) {
-  var children = _ref.children,
-      props = _objectWithoutProperties(_ref, _excluded);
-
-  return /*#__PURE__*/React.createElement(Grid, _extends({
-    zeroMinWidth: true,
-    id: props.id || 'content',
-    item: true,
-    xs: 12,
-    md: 8
-  }, props), children);
-};
+import Main from '@digigov/react-core/Main';
+export { Main };
+export default Main;

package/es/layouts/Basic/Masthead/index.js

@@ -1,47 +1,4 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["children", "className", "variant"];
-import React from 'react';
-import { Content } from '@digigov/ui/layouts/Basic';
-import { makeStyles } from '@material-ui/core';
-import clsx from 'clsx';
-var useMastheadStyles = makeStyles(function (theme) {
-  return {
-    banner: {
-      backgroundColor: theme.palette.secondary.main,
-      color: theme.palette.common.white,
-      padding: theme.spacing(2, 0),
-      width: '100%'
-    },
-    bannerTitle: {
-      margin: theme.spacing(0, 0, 1, 0)
-    },
-    grey: {
-      backgroundColor: theme.palette.grey['300'],
-      color: theme.palette.getContrastText(theme.palette.grey['300'])
-    },
-    button: {
-      backgroundColor: theme.palette.success.main,
-      '&:hover': {
-        backgroundColor: theme.palette.success.dark
-      },
-      border: "1px solid ".concat(theme.palette.grey['500'])
-    }
-  };
-}, {
-  name: 'MuiMasthead'
-});
-export var Masthead = function Masthead(_ref) {
-  var children = _ref.children,
-      className = _ref.className,
-      _ref$variant = _ref.variant,
-      variant = _ref$variant === void 0 ? 'default' : _ref$variant,
-      props = _objectWithoutProperties(_ref, _excluded);
-
-  var classes = useMastheadStyles();
-  return /*#__PURE__*/React.createElement("div", {
-    className: clsx(className, classes.banner)
-  }, /*#__PURE__*/React.createElement(Content, _extends({
-    dense: true
-  }, props), children));
-};
+import Masthead from '@digigov/react-core/Masthead';
+import MastheadBody from '@digigov/react-core/MastheadBody';
+export { Masthead, MastheadBody };
+export default Masthead;

package/es/layouts/Basic/Masthead/index.mdx

@@ -13,7 +13,7 @@ import StylesDoc from '@docs-components/stylesDoc';
 import PropsDoc from '@docs-components/propsDoc';
 import Header, { HeaderTitle } from '@digigov/ui/app/Header';
 import GovGRLogo from '@digigov/ui/govgr/Logo';
-import Grid from '@material-ui/core/Grid';
+import Grid from '@digigov/react-core/Grid';
 import Paragraph from '@digigov/ui/typography/Paragraph';
 
 function Masthead{

package/es/layouts/Basic/Side/index.js

@@ -1,29 +1,7 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["children", "className"];
-import React from 'react';
-import clsx from 'clsx';
-import Grid from '@material-ui/core/Grid';
-import { makeStyles } from '@material-ui/core';
-var useSideStyles = makeStyles(function (theme) {
-  return {
-    root: {
-      paddingTop: theme.spacing(1)
-    }
-  };
-}, {
-  name: 'MuiBasicLayoutSide'
+import Aside from '@digigov/react-core/Aside';
+import withDeprecation from '@digigov/ui/utils/withDeprecation';
+export var Side = withDeprecation(Aside, {
+  name: 'Side',
+  rename: '@digigov/react-core/Aside.\nYou need to install the `@digigov/react-core` library to use this new component.'
 });
-export var Side = function Side(_ref) {
-  var children = _ref.children,
-      className = _ref.className,
-      props = _objectWithoutProperties(_ref, _excluded);
-
-  var styles = useSideStyles();
-  return /*#__PURE__*/React.createElement(Grid, _extends({
-    className: clsx(className, styles.root),
-    item: true,
-    xs: 12,
-    md: 4
-  }, props), children);
-};
+export default Side;

package/es/layouts/Basic/Top/index.js

@@ -1,40 +1,11 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["children", "dense"];
-import React from 'react';
-import Grid from '@material-ui/core/Grid';
-import clsx from 'clsx';
-import { makeStyles } from '@material-ui/core';
-var useTopStyles = makeStyles(function (theme) {
-  return {
-    root: {
-      marginBottom: theme.spacing(2)
-    },
+import CoreTop from '@digigov/react-core/Top';
+import withDeprecation from '@digigov/ui/utils/withDeprecation';
+export var Top = withDeprecation(CoreTop, {
+  name: 'Top',
+  props: {
     dense: {
-      marginBottom: 0
+      error: true
     }
-  };
-}, {
-  name: 'MuiBasicLayoutTop'
+  }
 });
-/**
- * The *Top* section of the layout.
- *
- * Top section covers the full width of the page. Suggested height of the
- * elements inside the section is 50-100px.
- */
-
-export var Top = function Top(_ref) {
-  var children = _ref.children,
-      _ref$dense = _ref.dense,
-      dense = _ref$dense === void 0 ? false : _ref$dense,
-      props = _objectWithoutProperties(_ref, _excluded);
-
-  var classes = useTopStyles();
-  return /*#__PURE__*/React.createElement(Grid, _extends({
-    container: true
-  }, props, {
-    className: clsx(props.className, classes.root, dense && classes.dense)
-  }), children);
-};
 export default Top;

package/es/layouts/Basic/index.js

@@ -1,54 +1,8 @@
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["skipToContentLabel", "children"];
-import React from 'react';
-import { makeStyles } from '@material-ui/core';
-export var useLayoutStyles = makeStyles(function () {
-  return {
-    root: {
-      display: 'flex',
-      flexDirection: 'column',
-      flexWrap: 'wrap',
-      minHeight: '100vh'
-    },
-    skipToContent: {
-      display: 'inline-block',
-      position: 'absolute',
-      left: '-9999em',
-      '&:focus': {
-        left: 0,
-        zIndex: 1
-      }
-    }
-  };
-}, {
-  name: 'MuiBasicLayout'
-});
-
-/**
- * *Layout* component for the basic layout.
- *
- */
-export var Layout = function Layout(_ref) {
-  var _ref$skipToContentLab = _ref.skipToContentLabel,
-      skipToContentLabel = _ref$skipToContentLab === void 0 ? 'skip to nav' : _ref$skipToContentLab,
-      children = _ref.children,
-      props = _objectWithoutProperties(_ref, _excluded);
-
-  var styles = useLayoutStyles({
-    props: props
-  });
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("a", {
-    className: styles.skipToContent,
-    href: "#content"
-  }, skipToContentLabel), /*#__PURE__*/React.createElement("div", {
-    className: styles.root
-  }, children));
-};
-var BasicLayout = Layout;
-export default BasicLayout;
+import Layout from '@digigov/react-core/Layout';
 export * from '@digigov/ui/layouts/Basic/Top';
 export * from '@digigov/ui/layouts/Basic/Side';
 export * from '@digigov/ui/layouts/Basic/Main';
 export * from '@digigov/ui/layouts/Basic/Content';
 export * from '@digigov/ui/layouts/Basic/Bottom';
-export * from '@digigov/ui/layouts/Basic/Masthead';
+export * from '@digigov/ui/layouts/Basic/Masthead';
+export default Layout;

package/es/themes/grnet.js

@@ -8,7 +8,7 @@ import Title from '@digigov/ui/typography/Title';
 import Container from '@material-ui/core/Container';
 import Toolbar from '@material-ui/core/Toolbar';
 import Typography from '@material-ui/core/Typography';
-import Grid from '@material-ui/core/Grid';
+import Grid from '@digigov/react-core/Grid';
 import MuiAppBar from '@material-ui/core/AppBar';
 var useStyles = makeStyles(function (theme) {
   return {

package/es/typography/Caption.js

@@ -1,23 +1,7 @@
-import _extends from "@babel/runtime/helpers/extends";
-import React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
-import Typography from '@material-ui/core/Typography';
-import clsx from 'clsx';
-var useStyles = makeStyles(function () {
-  return {
-    caption: {
-      color: '#4d4d4d',
-      fontWeight: 'normal'
-    }
-  };
+import HeadingCaption from '@digigov/react-core/HeadingCaption';
+import withDeprecation from '@digigov/ui/utils/withDeprecation';
+export var Caption = withDeprecation(HeadingCaption, {
+  name: 'Caption',
+  rename: '@digigov/react-core/HeadingCaption.\nYou need to install the `@digigov/react-core` library to use this new component.'
 });
-export var Caption = function Caption(_ref) {
-  var props = _extends({}, _ref);
-
-  var classes = useStyles(props);
-  return /*#__PURE__*/React.createElement(Typography, {
-    className: clsx(props.className, classes.caption),
-    variant: "h6"
-  }, props.children);
-};
 export default Caption;

package/es/typography/NormalText.js

@@ -1,11 +1,3 @@
-import _extends from "@babel/runtime/helpers/extends";
-// @flow
-import React from 'react';
-import Typography from '@material-ui/core/Typography';
-export var NormalText = function NormalText(props) {
-  return /*#__PURE__*/React.createElement(Typography, _extends({
-    component: "span",
-    variant: "body1"
-  }, props), props.children);
-};
+import NormalText from '@digigov/react-core/NormalText';
+export { NormalText };
 export default NormalText;

package/es/typography/Paragraph.js

@@ -1,30 +1,2 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["paragraph"];
-import React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
-import Typography from '@material-ui/core/Typography';
-export var useParagraphStyles = makeStyles(function (theme) {
-  return {
-    paragraph: {
-      // here be thy styles
-      margin: theme.spacing(0, 0, 2),
-      marginBottom: theme.spacing(4)
-    }
-  };
-}, {
-  name: 'MuiParagraph'
-});
-;
-export var Paragraph = function Paragraph(props) {
-  var _useParagraphStyles = useParagraphStyles(),
-      paragraph = _useParagraphStyles.paragraph,
-      classes = _objectWithoutProperties(_useParagraphStyles, _excluded);
-
-  return /*#__PURE__*/React.createElement(Typography, _extends({
-    className: paragraph,
-    variant: "body1",
-    classes: classes
-  }, props), props.children);
-};
+import Paragraph from '@digigov/react-core/Paragraph';
 export default Paragraph;

package/es/typography/Title.js

@@ -1,95 +1,48 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-var _excluded = ["size", "children", "dense", "classes", "component"],
-    _excluded2 = ["className"];
+var _excluded = ["size", "component", "children"];
 import React from 'react';
-import clsx from 'clsx';
-import { makeStyles } from '@material-ui/core/styles';
-var useStyles = makeStyles(function (theme) {
-  var _xl;
+import Heading from '@digigov/react-core/Heading';
+import withDeprecation from '@digigov/ui/utils/withDeprecation';
+var sizeMappings = {
+  xl: 'xl',
+  lg: 'l',
+  md: 'm',
+  sm: 's'
+};
+export var Title = withDeprecation(function (_ref) {
+  var _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 'xl' : _ref$size,
+      component = _ref.component,
+      children = _ref.children,
+      props = _objectWithoutProperties(_ref, _excluded);
 
-  return {
-    root: {
-      margin: 0,
-      display: 'block',
-      fontWeight: 'bolder'
-    },
-    xl: (_xl = {}, _defineProperty(_xl, theme.breakpoints.down('sm'), {
-      fontSize: '2.25rem'
-    }), _defineProperty(_xl, "margin", theme.spacing(0, 0, 6, 0)), _defineProperty(_xl, "fontSize", '3rem'), _xl),
-    lg: {
-      margin: theme.spacing(0, 0, 4, 0),
-      fontSize: '2.25rem'
-    },
-    md: {
-      margin: theme.spacing(0, 0, 3, 0),
-      fontSize: '1.5rem'
-    },
-    sm: {
-      margin: theme.spacing(0, 0, 2, 0),
-      fontSize: '1.2rem'
+  var newSize = sizeMappings[size];
+  return /*#__PURE__*/React.createElement(Heading, _extends({
+    size: newSize,
+    element: component
+  }, props), children);
+}, {
+  name: 'Title',
+  rename: '@digigov/react-core/Heading.\nYou need to install the `@digigov/react-core` library to use this new component.',
+  props: {
+    dense: {
+      error: true
     },
-    xs: {
-      margin: theme.spacing(0, 0, 1, 0),
-      fontSize: '1rem'
+    size: {
+      values: {
+        xs: {
+          error: true
+        }
+      }
     },
-    dense: {
-      margin: 0
+    component: {
+      values: {
+        h5: {
+          error: true
+        }
+      }
     }
-  };
-}, {
-  name: 'MuiDigigovTitle'
-});
-
-var getComponentBySize = function getComponentBySize(size) {
-  switch (size) {
-    case 'xl':
-      return 'h1';
-
-    case 'lg':
-      return 'h2';
-
-    case 'md':
-      return 'h3';
-
-    case 'sm':
-      return 'h4';
-
-    case 'xs':
-      return 'h5';
-
-    default:
-      return 'h4';
   }
-};
-
-var Title = function Title(_ref, ref) {
-  var size = _ref.size,
-      children = _ref.children,
-      dense = _ref.dense,
-      classesObj = _ref.classes,
-      component = _ref.component,
-      props = _objectWithoutProperties(_ref, _excluded);
-
-  var classes = useStyles({
-    classes: classesObj
-  });
-  var cls = classes[size || 'sm'];
-  var Tag = component || getComponentBySize(size);
-
-  var className = props.className,
-      otherProps = _objectWithoutProperties(props, _excluded2);
-
-  return /*#__PURE__*/React.createElement(Tag, _extends({
-    ref: ref,
-    className: clsx(className, classes.root, cls, dense && classes.dense)
-  }, otherProps), children);
-};
-
-var RefTitle = /*#__PURE__*/React.forwardRef(Title);
-RefTitle.defaultProps = {
-  size: 'sm',
-  dense: false
-};
-export default RefTitle;
+});
+export default Title;

package/es/utils/withDeprecation.js

@@ -0,0 +1,93 @@
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _inherits from "@babel/runtime/helpers/inherits";
+import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+import _wrapNativeSuper from "@babel/runtime/helpers/wrapNativeSuper";
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+import React from 'react';
+
+var DigigovError = /*#__PURE__*/function (_Error) {
+  _inherits(DigigovError, _Error);
+
+  var _super = _createSuper(DigigovError);
+
+  function DigigovError(message) {
+    var _this;
+
+    _classCallCheck(this, DigigovError);
+
+    _this = _super.call(this, message); // (1)
+
+    _this.name = 'DigigovError'; // (2)
+
+    return _this;
+  }
+
+  return DigigovError;
+}( /*#__PURE__*/_wrapNativeSuper(Error));
+
+var handleErrorWarning = function handleErrorWarning(componentName, name, _ref, type) {
+  var error = _ref.error,
+      warning = _ref.warning;
+
+  if (warning === true) {
+    console.warn("\u26A0\uFE0F  ".concat(componentName, ": ").concat(name, " ").concat(type, " will be deprecated."));
+  } else if (typeof warning === 'string') {
+    console.warn(warning);
+  }
+
+  if (error === true) {
+    throw new DigigovError("".concat(componentName, ": !! ").concat(name, " ").concat(type, " is deprecated."));
+  } else if (typeof error === 'string') {
+    throw new DigigovError("Component `".concat(componentName, "` with `").concat(name, "` prop: ").concat(error));
+  }
+};
+
+export default function withDeprecation(Component, deprecations) {
+  var _Component$render;
+
+  var componentName = // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+  deprecations.name || Component.name || (Component === null || Component === void 0 ? void 0 : (_Component$render = Component.render) === null || _Component$render === void 0 ? void 0 : _Component$render.name); // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+
+  return function withDeprecationComponent(props) {
+    if (deprecations.rename) {
+      console.warn("\u267B\uFE0F  ".concat(componentName, " is renamed to ").concat(deprecations.rename, "\n"));
+    }
+
+    handleErrorWarning(componentName, componentName, deprecations, 'component');
+
+    if (deprecations.props) {
+      Object.keys(deprecations.props).forEach(function (propName) {
+        var _deprecations$props, _propDeprecation$valu;
+
+        var value = props[propName];
+
+        if (!value) {
+          return;
+        }
+
+        var propDeprecation = deprecations === null || deprecations === void 0 ? void 0 : (_deprecations$props = deprecations.props) === null || _deprecations$props === void 0 ? void 0 : _deprecations$props[propName];
+
+        if (propDeprecation !== null && propDeprecation !== void 0 && (_propDeprecation$valu = propDeprecation.values) !== null && _propDeprecation$valu !== void 0 && _propDeprecation$valu[value]) {
+          var _propDeprecation$valu2;
+
+          return handleErrorWarning(componentName, "".concat(propName, " ").concat(value), propDeprecation === null || propDeprecation === void 0 ? void 0 : (_propDeprecation$valu2 = propDeprecation.values) === null || _propDeprecation$valu2 === void 0 ? void 0 : _propDeprecation$valu2[value], 'property value');
+        }
+
+        if (propDeprecation !== null && propDeprecation !== void 0 && propDeprecation.error || propDeprecation !== null && propDeprecation !== void 0 && propDeprecation.warning) {
+          return handleErrorWarning(componentName, propName, propDeprecation, 'property');
+        }
+      });
+    } // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+
+
+    return /*#__PURE__*/React.createElement(Component, props);
+  };
+}

package/esm/app/App.js

@@ -5,25 +5,23 @@ export var useAppStyles = makeStyles({
   root: {}
 });
 
-var _ref2 = /*#__PURE__*/React.createElement(CssBaseline, null);
-
 var App = function App(_ref) {
   var theme = _ref.theme,
       children = _ref.children;
   return /*#__PURE__*/React.createElement(ThemeProvider, {
     theme: theme
-  }, _ref2, /*#__PURE__*/React.createElement(Suspense, {
+  }, /*#__PURE__*/React.createElement(Suspense, {
     fallback: 'loading...'
   }, children));
 };
 
-var _ref4 = /*#__PURE__*/React.createElement(CssBaseline, null);
+var _ref3 = /*#__PURE__*/React.createElement(CssBaseline, null);
 
-export var StaticApp = function StaticApp(_ref3) {
-  var theme = _ref3.theme,
-      children = _ref3.children;
+export var StaticApp = function StaticApp(_ref2) {
+  var theme = _ref2.theme,
+      children = _ref2.children;
   return /*#__PURE__*/React.createElement(ThemeProvider, {
     theme: theme
-  }, _ref4, children);
+  }, _ref3, children);
 };
 export default App;

package/esm/app/Header/HeaderLogo.js

@@ -1,32 +1,17 @@
-import React from 'react';
-import clsx from 'clsx';
-import HeaderTitle from '@digigov/ui/app/Header/HeaderTitle';
-import { makeStyles } from '@material-ui/core';
-export var useHeaderLogoStyles = makeStyles(function () {
-  return {
-    root: {}
-  };
-}, {
-  name: 'MuiHeaderLogo'
+import CoreHeaderLogo from '@digigov/react-core/HeaderLogo';
+import withDeprecation from '@digigov/ui/utils/withDeprecation';
+export var HeaderLogo = withDeprecation(CoreHeaderLogo, {
+  name: 'HeaderLogo',
+  props: {
+    height: {
+      warning: true
+    },
+    linkprops: {
+      warning: true
+    },
+    label: {
+      warning: true
+    }
+  }
 });
-export var HeaderLogo = function HeaderLogo(_ref) {
-  var _ref$href = _ref.href,
-      href = _ref$href === void 0 ? '' : _ref$href,
-      src = _ref.src,
-      label = _ref.label,
-      height = _ref.height,
-      className = _ref.className,
-      children = _ref.children,
-      linkProps = _ref.linkProps;
-  var styles = useHeaderLogoStyles();
-  return /*#__PURE__*/React.createElement(HeaderTitle, {
-    linkComponent: "a",
-    href: href,
-    linkProps: linkProps,
-    className: clsx(className, styles.root)
-  }, src ? /*#__PURE__*/React.createElement("img", {
-    src: src,
-    height: height || 40
-  }) : children || label || '');
-};
 export default HeaderLogo;