@digigov/ui 0.8.4 → 0.9.0

package/es/core/Button/index.js

@@ -1,96 +1,35 @@
-import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-var _excluded = ["children", "xsFullWidth"],
-    _excluded2 = ["responsive"],
-    _excluded3 = ["label"];
-import React, { useMemo } from 'react';
-import { makeStyles } from '@material-ui/core/styles';
-import Link from '@digigov/ui/core/Link';
-import MuiButton from '@material-ui/core/Button';
-import clsx from 'clsx';
-export var useButtonStyles = makeStyles(function (theme) {
-  return {
-    // Styles applied to the root element.
-    root: {
-      textTransform: 'none'
+var _excluded = ["label", "children"];
+import React from 'react';
+import CoreButton from '@digigov/react-core/Button';
+import withDeprecation from '@digigov/ui/utils/withDeprecation';
+export var Button = withDeprecation(CoreButton, {
+  name: 'Button',
+  props: {
+    href: {
+      error: 'To use a button with a link import ButtonLink instead'
     },
-    containedPrimary: {
-      background: theme.palette.success.main,
-      color: theme.palette.common.white,
-      '&:hover': {
-        color: theme.palette.common.white,
-        background: theme.palette.success.dark
-      },
-      '&:visited': {
-        color: theme.palette.common.white
-      }
+    variant: {
+      error: true
     },
-    containedSecondary: {
-      background: theme.palette.grey['300'],
-      color: theme.palette.text.primary,
-      '&:hover': {
-        color: theme.palette.text.primary,
-        background: theme.palette.grey['400']
-      },
-      '&:visited': {
-        color: theme.palette.text.primary
-      }
+    size: {
+      error: true
     },
-    disabled: {
-      opacity: 0.7
-    },
-
-    /**
-     * Styles applied if the xsFullWidth property is true
-     **/
-    responsive: _defineProperty({
-      textTransform: 'none'
-    }, theme.breakpoints.down('xs'), {
-      width: '100%'
-    })
-  };
-}, {
-  name: 'MuiButton'
-});
-// A component used for call to action
-export var Button = function Button(_ref) {
-  var children = _ref.children,
-      xsFullWidth = _ref.xsFullWidth,
-      props = _objectWithoutProperties(_ref, _excluded);
-
-  var _useButtonStyles = useButtonStyles(),
-      responsive = _useButtonStyles.responsive,
-      buttonClasses = _objectWithoutProperties(_useButtonStyles, _excluded2);
-
-  var classes = useMemo(function () {
-    if (xsFullWidth) {
-      buttonClasses.root = clsx(buttonClasses.root, responsive);
+    xsFullWidth: {
+      error: true
     }
-
-    return buttonClasses;
-  }, [xsFullWidth]);
-  var component = useMemo(function () {
-    return props.href ? Link : props.type === 'submit' ? 'button' : undefined;
-  }, [props.href, props.type]);
-  return /*#__PURE__*/React.createElement(MuiButton, _extends({
-    component: component,
-    classes: classes
-  }, props), children);
-};
-Button.defaultProps = {
-  color: 'primary',
-  variant: 'contained',
-  size: 'large',
-  xsFullWidth: false
-};
+  }
+});
 export default Button;
-export var ContinueButton = function ContinueButton(_ref2) {
-  var _ref2$label = _ref2.label,
-      label = _ref2$label === void 0 ? 'Continue' : _ref2$label,
-      props = _objectWithoutProperties(_ref2, _excluded3);
+export var ContinueButton = function ContinueButton(_ref) {
+  var _ref$label = _ref.label,
+      label = _ref$label === void 0 ? 'Continue' : _ref$label,
+      children = _ref.children,
+      props = _objectWithoutProperties(_ref, _excluded);
 
-  return /*#__PURE__*/React.createElement(Button, props, label);
+  return /*#__PURE__*/React.createElement(Button, props, label || children);
 };
 export * from '@digigov/ui/core/Button/BackButton';
-export * from '@digigov/ui/core/Button/CallToAction';
+export * from '@digigov/ui/core/Button/CallToAction';
+export * from '@digigov/ui/core/Button/ButtonLink';
+export * from '@digigov/ui/core/Button/Icon';

package/es/core/Details/index.js

@@ -1,62 +1,5 @@
-import React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
-import clsx from 'clsx';
-var useDetailsSummaryStyles = makeStyles(function () {
-  return {
-    root: {
-      outline: 'none',
-      cursor: 'pointer'
-    },
-    text: {
-      textDecoration: 'underline'
-    }
-  };
-}, {
-  name: 'MuiDetailsSummary'
-});
-export var DetailsSummary = function DetailsSummary(_ref) {
-  var children = _ref.children,
-      className = _ref.className;
-  var classes = useDetailsSummaryStyles();
-  return /*#__PURE__*/React.createElement("summary", {
-    className: clsx(className, classes.root)
-  }, /*#__PURE__*/React.createElement("span", {
-    className: classes.text
-  }, children));
-};
-var useDetailsContentStyles = makeStyles(function (theme) {
-  return {
-    root: {
-      borderLeft: "2px solid ".concat(theme.palette.grey['500']),
-      margin: theme.spacing(0.5),
-      padding: theme.spacing(2)
-    }
-  };
-}, {
-  name: 'MuiDetailsContent'
-});
-export var DetailsContent = function DetailsContent(_ref2) {
-  var children = _ref2.children,
-      className = _ref2.className;
-  var classes = useDetailsContentStyles();
-  return /*#__PURE__*/React.createElement("div", {
-    className: clsx(className, classes.root)
-  }, children);
-};
-var useDetailsStyles = makeStyles(function () {
-  return {
-    root: {}
-  };
-}, {
-  name: 'MuiDetails'
-});
-export var Details = function Details(_ref3) {
-  var children = _ref3.children,
-      open = _ref3.open,
-      className = _ref3.className;
-  var classes = useDetailsStyles();
-  return /*#__PURE__*/React.createElement("details", {
-    className: clsx(className, classes.root),
-    open: open
-  }, children);
-};
+import Details from '@digigov/react-core/Details';
+import DetailsContent from '@digigov/react-core/DetailsContent';
+import DetailsSummary from '@digigov/react-core/DetailsSummary';
+export { Details, DetailsContent, DetailsSummary };
+export default Details;

package/es/core/Divider/index.js

@@ -1,6 +1,7 @@
-import React from 'react';
-import MuiDivider from '@material-ui/core/Divider';
-export var Divider = function Divider(props) {
-  return /*#__PURE__*/React.createElement(MuiDivider, props);
-};
-export default Divider;
+import CoreSectionBreak from '@digigov/react-core/SectionBreak';
+import withDeprecation from '@digigov/ui/utils/withDeprecation';
+export var SectionBreak = withDeprecation(CoreSectionBreak, {
+  name: 'Divider',
+  rename: '@digigov/react-core/SectionBreak.\nYou need to install the `@digigov/react-core` library to use this new component.'
+});
+export default SectionBreak;

package/es/core/ErrorSummary/index.js

@@ -1,22 +1,3 @@
-import React from 'react';
-import clsx from 'clsx';
-import { makeStyles } from '@material-ui/core/styles';
-export var useErrorSummaryStyles = makeStyles(function (theme) {
-  return {
-    root: {
-      padding: theme.spacing(2),
-      border: "".concat(theme.spacing(1), "px solid ").concat(theme.palette.error.main)
-    }
-  };
-}, {
-  name: 'MuiErrorSummary'
-});
-export var ErrorSummary = function ErrorSummary(_ref) {
-  var className = _ref.className,
-      children = _ref.children;
-  var classes = useErrorSummaryStyles();
-  return /*#__PURE__*/React.createElement("div", {
-    className: clsx(className, classes.root)
-  }, children);
-};
+import ErrorSummary from '@digigov/react-core/ErrorSummary';
+export { ErrorSummary };
 export default ErrorSummary;

package/es/core/List/List.js

@@ -1,27 +1,3 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["className", "children"];
-import React from 'react';
-import clsx from 'clsx';
-import { makeStyles } from '@material-ui/core/styles';
-export var useListStyles = makeStyles(function (theme) {
-  return {
-    root: {
-      padding: 0,
-      margin: theme.spacing(0, 0, 2, 0)
-    }
-  };
-}, {
-  name: 'MuiList'
-});
-export var List = function List(_ref) {
-  var className = _ref.className,
-      children = _ref.children,
-      props = _objectWithoutProperties(_ref, _excluded);
-
-  var classes = useListStyles();
-  return /*#__PURE__*/React.createElement("ul", _extends({
-    className: clsx(className, classes.root)
-  }, props), children);
-};
+import List from '@digigov/react-core/List';
+export { List };
 export default List;

package/es/core/List/ListItem.js

@@ -1,31 +1,3 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["className", "children"];
-import React from 'react';
-import clsx from 'clsx';
-import { makeStyles } from '@material-ui/core/styles';
-export var useListItemStyles = makeStyles(function (theme) {
-  return {
-    root: {
-      display: 'flex',
-      listStyle: 'none',
-      padding: theme.spacing(1),
-      '&:hover': {
-        background: theme.palette.grey['200']
-      }
-    }
-  };
-}, {
-  name: 'MuiListItem'
-});
-export var ListItem = function ListItem(_ref) {
-  var className = _ref.className,
-      children = _ref.children,
-      props = _objectWithoutProperties(_ref, _excluded);
-
-  var classes = useListItemStyles();
-  return /*#__PURE__*/React.createElement("li", _extends({
-    className: clsx(className, classes.root)
-  }, props), children);
-};
+import ListItem from '@digigov/react-core/ListItem';
+export { ListItem };
 export default ListItem;

package/es/core/List/ListItemTitle.js

@@ -18,9 +18,7 @@ export var ListItemTitle = function ListItemTitle(_ref) {
       children = _ref.children,
       props = _objectWithoutProperties(_ref, _excluded);
 
-  return /*#__PURE__*/React.createElement(Title, _extends({
-    dense: true
-  }, props), href ? /*#__PURE__*/React.createElement(Link, _extends({
+  return /*#__PURE__*/React.createElement(Title, props, href ? /*#__PURE__*/React.createElement(Link, _extends({
     href: href
   }, linkProps), children) : children);
 };

package/es/core/NavList/NavListItem.js

@@ -4,7 +4,7 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 var _excluded = ["name", "expandOn", "children", "href", "className", "selected"];
 import React, { useContext, useEffect, useRef, useState } from 'react';
 import clsx from 'clsx';
-import Divider from '@material-ui/core/Divider';
+import Divider from '@digigov/react-core/SectionBreak';
 import { makeStyles } from '@material-ui/core/styles';
 import NavListItemBase from '@digigov/ui/core/NavList/NavListItemBase';
 import NavListSubMenu from '@digigov/ui/core/NavList/NavListSubMenu';

package/es/core/NotificationBanner/index.js

@@ -1,49 +1,31 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["variant", "title", "children"];
 import React from 'react';
-import clsx from 'clsx';
-import { makeStyles } from '@material-ui/core';
-import { Title } from '@digigov/ui/typography';
-var useNotificationBannerStyles = makeStyles(function (theme) {
-  return {
-    root: {
-      marginBottom: theme.spacing(2),
-      border: "".concat(theme.spacing(0.5), "px solid ").concat(theme.palette.secondary.main)
-    },
-    success: {
-      border: "".concat(theme.spacing(0.5), "px solid ").concat(theme.palette.success.main)
-    },
-    header: {
-      backgroundColor: theme.palette.secondary.main,
-      color: theme.palette.common.white,
-      padding: theme.spacing(0, 2)
-    },
-    headerSuccess: {
-      backgroundColor: theme.palette.success.main
-    },
-    content: {
-      padding: theme.spacing(2)
-    }
-  };
+import withDeprecation from '@digigov/ui/utils/withDeprecation';
+import CoreNotificationBanner from '@digigov/react-core/NotificationBanner';
+import NotificationBannerHeader from '@digigov/react-core/NotificationBannerHeader';
+import NotificationBannerHeading from '@digigov/react-core/NotificationBannerHeading';
+import NotificationBannerContent from '@digigov/react-core/NotificationBannerContent';
+export var NotificationBanner = withDeprecation(function (_ref) {
+  var _ref$variant = _ref.variant,
+      variant = _ref$variant === void 0 ? 'important' : _ref$variant,
+      title = _ref.title,
+      children = _ref.children,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  var success = variant === 'success';
+  title = title ? title : success ? 'Success' : 'Important';
+  return /*#__PURE__*/React.createElement(CoreNotificationBanner, _extends({
+    success: success
+  }, props), /*#__PURE__*/React.createElement(NotificationBannerHeader, null, title), /*#__PURE__*/React.createElement(NotificationBannerContent, null, /*#__PURE__*/React.createElement(NotificationBannerHeading, null, children)));
 }, {
-  name: 'MuiCoreNotificationBanner'
+  name: 'NotificationBanner',
+  props: {
+    variant: {
+      warning: 'variant prop will be deprecated. Use success:boolean instead'
+    }
+  }
 });
-export var NotificationBanner = function NotificationBanner(_ref) {
-  var children = _ref.children,
-      className = _ref.className,
-      _ref$variant = _ref.variant,
-      variant = _ref$variant === void 0 ? 'important' : _ref$variant;
-  var classes = useNotificationBannerStyles();
-  return /*#__PURE__*/React.createElement("div", {
-    className: clsx(className, classes.root, variant === 'success' && classes.success)
-  }, /*#__PURE__*/React.createElement("header", {
-    className: clsx(className, classes.header, variant === 'success' && classes.headerSuccess)
-  }, /*#__PURE__*/React.createElement(Title, {
-    size: "sm",
-    dense: true
-  }, variant === 'success' ? 'Success' : 'Important')), /*#__PURE__*/React.createElement("div", {
-    className: classes.content
-  }, /*#__PURE__*/React.createElement(Title, {
-    size: "md",
-    dense: true
-  }, children)));
-};
+export { NotificationBannerHeader, NotificationBannerContent, NotificationBannerHeading };
 export default NotificationBanner;

package/es/core/NotificationBanner/index.spec.js

@@ -2,7 +2,9 @@ import * as React from 'react';
 import mountWithTheme from '@digigov/ui/test-utils/mountWithTheme';
 import Component from '@digigov/ui/core/NotificationBanner';
 
-var _ref = /*#__PURE__*/React.createElement(Component, null, "this is a notification");
+var _ref = /*#__PURE__*/React.createElement(Component, {
+  title: "Notification Banner Example"
+}, "this is a notification");
 
 it('renders the notification banner', function () {
   expect(mountWithTheme(_ref)).toMatchSnapshot();

package/es/core/ServiceBadge/index.js

@@ -1,28 +1,18 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["label", "children"];
 import React from 'react';
-import clsx from 'clsx';
-import { makeStyles } from '@material-ui/core/styles';
-var useStyles = makeStyles(function (theme) {
-  return {
-    root: {
-      display: 'inline-block',
-      backgroundColor: theme.palette.secondary.main,
-      borderRadius: 2,
-      margin: theme.spacing(1, 0),
-      padding: theme.spacing(0.5, 1.5),
-      fontSize: theme.typography.fontSize,
-      color: theme.palette.common.white,
-      maxHeight: "".concat(theme.spacing(3.5), "px")
-    }
-  };
+import withDeprecation from '@digigov/ui/utils/withDeprecation';
+import PhaseBanner from '@digigov/react-core/PhaseBanner';
+import PhaseBannerTag from '@digigov/react-core/PhaseBannerTag';
+export var ServiceBadge = withDeprecation(function (_ref) {
+  var _ref$label = _ref.label,
+      label = _ref$label === void 0 ? 'BETA' : _ref$label,
+      children = _ref.children,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  return /*#__PURE__*/React.createElement(PhaseBanner, props, /*#__PURE__*/React.createElement(PhaseBannerTag, null, children || label));
+}, {
+  name: 'ServiceBadge',
+  rename: '@digigov/react-core/PhaseBanner.\nYou need to install the `@digigov/react-core` library to use this new component.'
 });
-export var ServiceBadge = function ServiceBadge(_ref) {
-  var _ref$className = _ref.className,
-      className = _ref$className === void 0 ? '' : _ref$className,
-      _ref$label = _ref.label,
-      label = _ref$label === void 0 ? 'BETA' : _ref$label;
-  var classes = useStyles();
-  return /*#__PURE__*/React.createElement("div", {
-    className: clsx(className, classes.root)
-  }, label);
-};
 export default ServiceBadge;

package/es/core/SummaryList/index.js

@@ -1,119 +1,7 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["children", "className", "handleClick"],
-    _excluded2 = ["children"],
-    _excluded3 = ["children", "className"];
-import React from 'react';
-import clsx from 'clsx';
-import { makeStyles } from '@material-ui/core/styles';
-import Divider from '@material-ui/core/Divider';
-import Grid from '@material-ui/core/Grid';
-var useSummaryListItemActionStyles = makeStyles(function () {
-  return {
-    action: {
-      '& :hover': {
-        cursor: 'pointer',
-        color: '#1d70b8'
-      },
-      textAlign: 'right',
-      color: '#4c2c92',
-      textDecoration: 'underline'
-    }
-  };
-});
-export var SummaryListItemAction = function SummaryListItemAction(_ref) {
-  var children = _ref.children,
-      className = _ref.className,
-      handleClick = _ref.handleClick,
-      props = _objectWithoutProperties(_ref, _excluded);
-
-  var classes = useSummaryListItemActionStyles();
-  return /*#__PURE__*/React.createElement(Grid, _extends({
-    item: true,
-    xs: 12,
-    sm: 2,
-    className: clsx(className, classes.action)
-  }, props), /*#__PURE__*/React.createElement("span", {
-    onClick: handleClick
-  }, children));
-};
-var useSummaryListItemValueStyles = makeStyles(function () {
-  return {
-    value: {
-      display: 'flex',
-      alignItems: 'flex-end'
-    }
-  };
-});
-export var SummaryListItemValue = function SummaryListItemValue(_ref2) {
-  var children = _ref2.children,
-      props = _objectWithoutProperties(_ref2, _excluded2);
-
-  var classes = useSummaryListItemValueStyles();
-  return /*#__PURE__*/React.createElement(Grid, _extends({
-    item: true,
-    xs: 12,
-    sm: 7,
-    className: classes.value
-  }, props), /*#__PURE__*/React.createElement("span", null, children));
-};
-var useSummaryListItemKeyStyles = makeStyles(function () {
-  return {
-    key: {
-      fontWeight: 600
-    }
-  };
-});
-export var SummaryListItemKey = function SummaryListItemKey(_ref3) {
-  var children = _ref3.children,
-      className = _ref3.className,
-      props = _objectWithoutProperties(_ref3, _excluded3);
-
-  var classes = useSummaryListItemKeyStyles();
-  return /*#__PURE__*/React.createElement(Grid, _extends({
-    item: true,
-    xs: 12,
-    sm: 3,
-    className: clsx(className, classes.key)
-  }, props), children);
-};
-var useSummaryListItemStyles = makeStyles(function (theme) {
-  return {
-    dividerWrapper: {
-      padding: theme.spacing(1, 0)
-    }
-  };
-});
-
-var _ref5 = /*#__PURE__*/React.createElement(Divider, null);
-
-export var SummaryListItem = function SummaryListItem(_ref4) {
-  var children = _ref4.children,
-      className = _ref4.className;
-  var classes = useSummaryListItemStyles();
-  return /*#__PURE__*/React.createElement(Grid, {
-    item: true,
-    container: true,
-    className: className
-  }, children, /*#__PURE__*/React.createElement(Grid, {
-    xs: 12,
-    item: true,
-    className: classes.dividerWrapper
-  }, _ref5));
-};
-var useSummaryListStyles = makeStyles(function (theme) {
-  return {
-    root: _extends({}, theme.typography.body1, {
-      marginBottom: theme.spacing(4)
-    })
-  };
-});
-export var SummaryList = function SummaryList(_ref6) {
-  var children = _ref6.children,
-      className = _ref6.className;
-  var classes = useSummaryListStyles();
-  return /*#__PURE__*/React.createElement(Grid, {
-    container: true,
-    className: clsx(className, classes.root)
-  }, children);
-};
+import { SummaryList } from '@digigov/react-core/SummaryList';
+export * from '@digigov/react-core/SummaryList';
+export * from '@digigov/react-core/SummaryListItemAction';
+export * from '@digigov/react-core/SummaryListItem';
+export * from '@digigov/react-core/SummaryListItemKey';
+export * from '@digigov/react-core/SummaryListItemValue';
+export default SummaryList;