@digigov/ui 0.8.3 → 0.9.2

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: 'HeadingCaption'
 });
-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: 'Heading',
+  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,102 @@
+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 loggedDeprecations = new Set();
+
+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);
+
+  if (loggedDeprecations.has(componentName)) {
+    return Component;
+  } else {
+    loggedDeprecations.add(componentName);
+  } // 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;

package/esm/app/Header/HeaderSection.js

@@ -1,38 +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';
-export var useHeaderSectionStyles = makeStyles(function (theme) {
-  return {
-    root: {
-      display: 'flex',
-      alignItems: 'center',
-      padding: theme.spacing(2, 0)
-    },
-    container: {
-      padding: theme.spacing(2, 0)
-    }
-  };
-}, {
-  name: 'MuiHeaderSection'
+import CoreHeaderSection from '@digigov/react-core/HeaderSection';
+import withDeprecation from '@digigov/ui/utils/withDeprecation';
+export var HeaderSection = withDeprecation(CoreHeaderSection, {
+  name: 'HeaderSection',
+  rename: 'HeaderSection'
 });
-export var HeaderSection = function HeaderSection(_ref) {
-  var children = _ref.children,
-      className = _ref.className,
-      props = _objectWithoutProperties(_ref, _excluded);
-
-  var styles = useHeaderSectionStyles();
-  return /*#__PURE__*/React.createElement(Grid, _extends({
-    item: true,
-    className: clsx(className, styles.root)
-  }, props), /*#__PURE__*/React.createElement(Grid, {
-    container: true,
-    alignItems: "center",
-    spacing: 2,
-    className: styles.container
-  }, children));
-};
 export default HeaderSection;

package/esm/app/Header/HeaderTitle.js

@@ -1,82 +1,17 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["children", "className", "href", "linkComponent", "linkProps"],
-    _excluded2 = ["children"];
-import React from 'react';
-import clsx from 'clsx';
-import MuiButton from '@material-ui/core/ButtonBase';
-import Title from '@digigov/ui/typography/Title';
-import Link from '@digigov/ui/core/Link';
-import Grid from '@material-ui/core/Grid';
-import { makeStyles } from '@material-ui/core';
-export var useHeaderTitleStyles = makeStyles(function (theme) {
-  return {
-    link: {},
-    grid: {
-      display: 'flex',
-      alignItems: 'center'
+import CoreHeaderTitle from '@digigov/react-core/HeaderTitle';
+import withDeprecation from '@digigov/ui/utils/withDeprecation';
+export var HeaderTitle = withDeprecation(CoreHeaderTitle, {
+  name: 'Header',
+  props: {
+    xs: {
+      error: true
     },
-    root: {
-      color: theme.palette.primary.contrastText,
-      marginTop: 0,
-      marginBottom: 0,
-      padding: theme.spacing(0, 1),
-      lineHeight: '1.5rem'
-    }
-  };
-}, {
-  name: 'MuiHeaderTitle'
-});
-export var HeaderTitle = function HeaderTitle(_ref) {
-  var children = _ref.children,
-      className = _ref.className,
-      _ref$href = _ref.href,
-      href = _ref$href === void 0 ? '/' : _ref$href,
-      _ref$linkComponent = _ref.linkComponent,
-      linkComponent = _ref$linkComponent === void 0 ? Link : _ref$linkComponent,
-      linkProps = _ref.linkProps,
-      props = _objectWithoutProperties(_ref, _excluded);
-
-  var styles = useHeaderTitleStyles(props);
-  var xs = props.xs === undefined ? 'auto' : props.xs;
-  return /*#__PURE__*/React.createElement(Grid, {
-    item: true,
-    xs: xs,
-    className: clsx(className, styles.grid)
-  }, /*#__PURE__*/React.createElement(MuiButton, _extends({
-    className: styles.link,
-    disableRipple: true,
-    component: linkComponent,
-    href: href
-  }, linkProps), /*#__PURE__*/React.createElement(Title, {
-    className: styles.root,
-    size: "md"
-  }, children)));
-};
-export var useHeaderSubtitleStyles = makeStyles(function (theme) {
-  return {
-    root: {
-      marginLeft: theme.spacing(1),
-      fontSize: '1.2rem',
-      '& a': {
-        color: theme.palette.common.white,
-        '&:visited': {
-          color: theme.palette.common.white
-        }
-      }
+    linkProps: {
+      error: 'The `linkProps` property is deprecated. You can use native anchor link props instead.'
+    },
+    linkComponent: {
+      error: 'The `linkComponent` property is deprecated.'
     }
-  };
-}, {
-  name: 'MuiHeaderSubtitle'
+  }
 });
-export var HeaderSubtitle = function HeaderSubtitle(_ref2) {
-  var children = _ref2.children,
-      props = _objectWithoutProperties(_ref2, _excluded2);
-
-  var styles = useHeaderSubtitleStyles(props);
-  return /*#__PURE__*/React.createElement(Grid, {
-    item: true,
-    className: styles.root
-  }, children);
-};
 export default HeaderTitle;

package/esm/app/Header/index.js

@@ -1,61 +1,11 @@
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["children", "className", "maxWidth"];
-import React from 'react';
-import clsx from 'clsx';
-import Grid from '@material-ui/core/Grid';
-import Container from '@material-ui/core/Container';
-import AppBar from '@material-ui/core/AppBar';
-import Toolbar from '@material-ui/core/Toolbar';
-import { makeStyles, useTheme } from '@material-ui/core';
-import useMediaQuery from '@material-ui/core/useMediaQuery';
-export var useHeaderStyles = makeStyles(function (theme) {
-  return {
-    root: {
-      backgroundColor: theme.palette.primary.main
-    },
-    toolbar: {
-      minHeight: 75
-    },
-    coloredBar: {
-      background: theme.palette.secondary.main,
-      width: '100%',
-      height: theme.spacing(1),
-      marginLeft: 'auto',
-      marginRight: 'auto'
-    }
-  };
-}, {
-  name: 'MuiHeader'
+import CoreHeader from '@digigov/react-core/Header';
+import withDeprecation from '@digigov/ui/utils/withDeprecation';
+export var Header = withDeprecation(CoreHeader, {
+  name: 'Header',
+  props: {}
 });
-export var Header = function Header(_ref) {
-  var children = _ref.children,
-      className = _ref.className,
-      maxWidth = _ref.maxWidth,
-      props = _objectWithoutProperties(_ref, _excluded);
-
-  var styles = useHeaderStyles(props);
-  var theme = useTheme();
-  var xs = useMediaQuery(theme.breakpoints.down('xs'));
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(AppBar, {
-    elevation: 0,
-    className: clsx(styles.root, className),
-    position: "static"
-  }, /*#__PURE__*/React.createElement(Container, {
-    maxWidth: maxWidth
-  }, /*#__PURE__*/React.createElement(Toolbar, {
-    variant: "dense",
-    disableGutters: true,
-    className: styles.toolbar
-  }, /*#__PURE__*/React.createElement(Grid, {
-    container: true,
-    alignItems: "center",
-    justify: xs ? 'space-between' : 'flex-start',
-    spacing: 1
-  }, children))), /*#__PURE__*/React.createElement("div", {
-    className: styles.coloredBar
-  })));
-};
 export * from '@digigov/ui/app/Header/HeaderTitle';
+export * from '@digigov/react-core/HeaderSubtitle';
 export * from '@digigov/ui/app/Header/HeaderLogo';
 export * from '@digigov/ui/app/Header/HeaderSection';
 export default Header;