@digigov/ui 0.8.3 → 0.9.2

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: 'SectionBreak'
+});
+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: 'PhaseBanner'
 });
-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;

package/es/core/Tabs/index.js

@@ -1,97 +1,37 @@
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _extends from "@babel/runtime/helpers/extends";
-var _excluded = ["children"],
-    _excluded2 = ["children", "value", "index"];
-import React from 'react';
-import MuiTabs from '@material-ui/core/Tabs';
-import MuiTab from '@material-ui/core/Tab';
-import { makeStyles } from '@material-ui/core/styles';
-var useTabsStyles = makeStyles(function (theme) {
-  return {
-    flexContainer: {
-      borderBottom: "1px solid ".concat(theme.palette.grey['400'])
-    },
-    indicator: {
-      display: 'none'
-    }
-  };
-});
-var useTabStyles = makeStyles(function (theme) {
-  return {
-    root: {
-      padding: theme.spacing(1)
-    },
-    selected: {
-      borderTop: "1px solid ".concat(theme.palette.grey['400']),
-      borderRight: "1px solid ".concat(theme.palette.grey['400']),
-      borderLeft: "1px solid ".concat(theme.palette.grey['400']),
-      borderBottom: "1px solid ".concat(theme.palette.common.white),
-      position: 'relative',
-      background: theme.palette.common.white,
-      top: 3,
-      '& .MuiTab-wrapper': {
-        textDecoration: 'none',
-        background: theme.palette.common.white
-      }
-    },
-    textColorInherit: {
-      opacity: 1
-    },
-    wrapper: _extends({
-      textDecoration: 'underline',
-      textTransform: 'none',
-      background: theme.palette.grey['200'],
-      color: theme.palette.text.primary,
-      padding: theme.spacing(1, 2)
-    }, theme.typography.body1)
-  };
-});
-var useTabPanelStyles = makeStyles(function (theme) {
-  return {
-    root: {
-      border: "1px solid ".concat(theme.palette.grey['400']),
-      borderTop: 0,
-      background: theme.palette.common.white,
-      padding: theme.spacing(3)
-    }
-  };
-});
-export function getA11yProps(index) {
-  return {
-    id: "digigov-ui-tab-".concat(index),
-    'aria-controls': "digigov-ui-tabpanel-".concat(index)
-  };
-}
-export var Tabs = function Tabs(_ref) {
-  var children = _ref.children,
-      props = _objectWithoutProperties(_ref, _excluded);
-
-  var classes = useTabsStyles();
-  return /*#__PURE__*/React.createElement(MuiTabs, _extends({
-    classes: classes,
-    indicatorColor: "primary"
-  }, props), children);
-};
-export var Tab = function Tab(props) {
-  var classes = useTabStyles();
-  return /*#__PURE__*/React.createElement(MuiTab, _extends({
-    classes: classes
-  }, props));
-};
-export var TabPanel = function TabPanel(props) {
-  var classes = useTabPanelStyles();
-
-  var children = props.children,
-      value = props.value,
-      index = props.index,
-      other = _objectWithoutProperties(props, _excluded2);
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["register", "opened"];
+import { useCallback } from 'react';
+import Tabs from '@digigov/react-core/Tabs';
+import TabsList from '@digigov/react-core/TabsList';
+import TabsListItem from '@digigov/react-core/TabsListItem';
+import TabsPanel from '@digigov/react-core/TabsPanel';
+import TabsHeading from '@digigov/react-core/TabsHeading';
+import { useTogglableSections } from '@digigov/ui/hooks/useTogglableSections';
+export { Tabs, TabsList, TabsListItem, TabsPanel, TabsHeading };
+export var useTabs = function useTabs() {
+  var _useTogglableSections = useTogglableSections({
+    singleOpen: true,
+    toggleProperty: 'selected',
+    onToggleProperty: 'onClick',
+    firstOpen: true,
+    ariaNavigation: true
+  }),
+      register = _useTogglableSections.register,
+      opened = _useTogglableSections.opened,
+      rest = _objectWithoutProperties(_useTogglableSections, _excluded);
 
-  return /*#__PURE__*/React.createElement("div", _extends({
-    className: classes.root,
-    role: "tabpanel",
-    hidden: value !== index,
-    id: "simple-tabpanel-".concat(index),
-    "aria-labelledby": "simple-tab-".concat(index)
-  }, other), value === index && children);
+  var panel = useCallback(function (key) {
+    return {
+      active: opened[key],
+      id: key,
+      tabIndex: opened[key] ? 1 : -1
+    };
+  }, [opened]);
+  return _extends({
+    register: register,
+    opened: opened,
+    panel: panel
+  }, rest);
 };
 export default Tabs;

package/es/core/WarningText/index.js

@@ -1,34 +1,3 @@
-import React from 'react';
-import clsx from 'clsx';
-import { makeStyles } from '@material-ui/core/styles';
-import ErrorIcon from '@material-ui/icons/Error';
-export var useWarningTextStyles = makeStyles(function (theme) {
-  return {
-    root: {
-      margin: theme.spacing(4, 0)
-    },
-    icon: {
-      "float": 'left',
-      marginLeft: theme.spacing(1)
-    },
-    text: {
-      paddingLeft: theme.spacing(8)
-    }
-  };
-}, {
-  name: 'MuiWarningText'
-});
-export var WarningText = function WarningText(_ref) {
-  var className = _ref.className,
-      children = _ref.children;
-  var classes = useWarningTextStyles();
-  return /*#__PURE__*/React.createElement("div", {
-    className: clsx(className, classes.root)
-  }, /*#__PURE__*/React.createElement(ErrorIcon, {
-    className: classes.icon,
-    fontSize: "large"
-  }), /*#__PURE__*/React.createElement("div", {
-    className: classes.text
-  }, children));
-};
+import WarningText from '@digigov/react-core/WarningText';
+export { WarningText };
 export default WarningText;