@digigov/ui 0.8.3 → 0.9.2

package/core/SummaryList/index.js

@@ -1,146 +1,79 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.SummaryListItemValue = exports.SummaryListItemKey = exports.SummaryListItemAction = exports.SummaryListItem = exports.SummaryList = void 0;
-
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-
-var _react = _interopRequireDefault(require("react"));
-
-var _clsx = _interopRequireDefault(require("clsx"));
-
-var _styles = require("@material-ui/core/styles");
-
-var _Divider = _interopRequireDefault(require("@material-ui/core/Divider"));
-
-var _Grid = _interopRequireDefault(require("@material-ui/core/Grid"));
-
-var _excluded = ["children", "className", "handleClick"],
-    _excluded2 = ["children"],
-    _excluded3 = ["children", "className"];
-var useSummaryListItemActionStyles = (0, _styles.makeStyles)(function () {
-  return {
-    action: {
-      '& :hover': {
-        cursor: 'pointer',
-        color: '#1d70b8'
-      },
-      textAlign: 'right',
-      color: '#4c2c92',
-      textDecoration: 'underline'
+var _exportNames = {};
+exports["default"] = void 0;
+
+var _SummaryList = require("@digigov/react-core/SummaryList");
+
+Object.keys(_SummaryList).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _SummaryList[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _SummaryList[key];
     }
-  };
+  });
 });
 
-var SummaryListItemAction = function SummaryListItemAction(_ref) {
-  var children = _ref.children,
-      className = _ref.className,
-      handleClick = _ref.handleClick,
-      props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
-  var classes = useSummaryListItemActionStyles();
-  return /*#__PURE__*/_react["default"].createElement(_Grid["default"], (0, _extends2["default"])({
-    item: true,
-    xs: 12,
-    sm: 2,
-    className: (0, _clsx["default"])(className, classes.action)
-  }, props), /*#__PURE__*/_react["default"].createElement("span", {
-    onClick: handleClick
-  }, children));
-};
+var _SummaryListItemAction = require("@digigov/react-core/SummaryListItemAction");
 
-exports.SummaryListItemAction = SummaryListItemAction;
-var useSummaryListItemValueStyles = (0, _styles.makeStyles)(function () {
-  return {
-    value: {
-      display: 'flex',
-      alignItems: 'flex-end'
+Object.keys(_SummaryListItemAction).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _SummaryListItemAction[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _SummaryListItemAction[key];
     }
-  };
+  });
 });
 
-var SummaryListItemValue = function SummaryListItemValue(_ref2) {
-  var children = _ref2.children,
-      props = (0, _objectWithoutProperties2["default"])(_ref2, _excluded2);
-  var classes = useSummaryListItemValueStyles();
-  return /*#__PURE__*/_react["default"].createElement(_Grid["default"], (0, _extends2["default"])({
-    item: true,
-    xs: 12,
-    sm: 7,
-    className: classes.value
-  }, props), /*#__PURE__*/_react["default"].createElement("span", null, children));
-};
+var _SummaryListItem = require("@digigov/react-core/SummaryListItem");
 
-exports.SummaryListItemValue = SummaryListItemValue;
-var useSummaryListItemKeyStyles = (0, _styles.makeStyles)(function () {
-  return {
-    key: {
-      fontWeight: 600
+Object.keys(_SummaryListItem).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _SummaryListItem[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _SummaryListItem[key];
     }
-  };
+  });
 });
 
-var SummaryListItemKey = function SummaryListItemKey(_ref3) {
-  var children = _ref3.children,
-      className = _ref3.className,
-      props = (0, _objectWithoutProperties2["default"])(_ref3, _excluded3);
-  var classes = useSummaryListItemKeyStyles();
-  return /*#__PURE__*/_react["default"].createElement(_Grid["default"], (0, _extends2["default"])({
-    item: true,
-    xs: 12,
-    sm: 3,
-    className: (0, _clsx["default"])(className, classes.key)
-  }, props), children);
-};
+var _SummaryListItemKey = require("@digigov/react-core/SummaryListItemKey");
 
-exports.SummaryListItemKey = SummaryListItemKey;
-var useSummaryListItemStyles = (0, _styles.makeStyles)(function (theme) {
-  return {
-    dividerWrapper: {
-      padding: theme.spacing(1, 0)
+Object.keys(_SummaryListItemKey).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _SummaryListItemKey[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _SummaryListItemKey[key];
     }
-  };
+  });
 });
 
-var _ref5 = /*#__PURE__*/_react["default"].createElement(_Divider["default"], null);
-
-var SummaryListItem = function SummaryListItem(_ref4) {
-  var children = _ref4.children,
-      className = _ref4.className;
-  var classes = useSummaryListItemStyles();
-  return /*#__PURE__*/_react["default"].createElement(_Grid["default"], {
-    item: true,
-    container: true,
-    className: className
-  }, children, /*#__PURE__*/_react["default"].createElement(_Grid["default"], {
-    xs: 12,
-    item: true,
-    className: classes.dividerWrapper
-  }, _ref5));
-};
+var _SummaryListItemValue = require("@digigov/react-core/SummaryListItemValue");
 
-exports.SummaryListItem = SummaryListItem;
-var useSummaryListStyles = (0, _styles.makeStyles)(function (theme) {
-  return {
-    root: (0, _extends2["default"])({}, theme.typography.body1, {
-      marginBottom: theme.spacing(4)
-    })
-  };
+Object.keys(_SummaryListItemValue).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _SummaryListItemValue[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _SummaryListItemValue[key];
+    }
+  });
 });
-
-var SummaryList = function SummaryList(_ref6) {
-  var children = _ref6.children,
-      className = _ref6.className;
-  var classes = useSummaryListStyles();
-  return /*#__PURE__*/_react["default"].createElement(_Grid["default"], {
-    container: true,
-    className: (0, _clsx["default"])(className, classes.root)
-  }, children);
-};
-
-exports.SummaryList = SummaryList;
+var _default = _SummaryList.SummaryList;
+exports["default"] = _default;

package/core/Tabs/index.js

@@ -5,117 +5,84 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.Tabs = exports.TabPanel = exports.Tab = void 0;
-exports.getA11yProps = getA11yProps;
-
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+Object.defineProperty(exports, "Tabs", {
+  enumerable: true,
+  get: function get() {
+    return _Tabs["default"];
+  }
+});
+Object.defineProperty(exports, "TabsHeading", {
+  enumerable: true,
+  get: function get() {
+    return _TabsHeading["default"];
+  }
+});
+Object.defineProperty(exports, "TabsList", {
+  enumerable: true,
+  get: function get() {
+    return _TabsList["default"];
+  }
+});
+Object.defineProperty(exports, "TabsListItem", {
+  enumerable: true,
+  get: function get() {
+    return _TabsListItem["default"];
+  }
+});
+Object.defineProperty(exports, "TabsPanel", {
+  enumerable: true,
+  get: function get() {
+    return _TabsPanel["default"];
+  }
+});
+exports.useTabs = exports["default"] = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-var _react = _interopRequireDefault(require("react"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
-var _Tabs = _interopRequireDefault(require("@material-ui/core/Tabs"));
+var _react = require("react");
 
-var _Tab = _interopRequireDefault(require("@material-ui/core/Tab"));
+var _Tabs = _interopRequireDefault(require("@digigov/react-core/Tabs"));
 
-var _styles = require("@material-ui/core/styles");
+var _TabsList = _interopRequireDefault(require("@digigov/react-core/TabsList"));
 
-var _excluded = ["children"],
-    _excluded2 = ["children", "value", "index"];
-var useTabsStyles = (0, _styles.makeStyles)(function (theme) {
-  return {
-    flexContainer: {
-      borderBottom: "1px solid ".concat(theme.palette.grey['400'])
-    },
-    indicator: {
-      display: 'none'
-    }
-  };
-});
-var useTabStyles = (0, _styles.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: (0, _extends2["default"])({
-      textDecoration: 'underline',
-      textTransform: 'none',
-      background: theme.palette.grey['200'],
-      color: theme.palette.text.primary,
-      padding: theme.spacing(1, 2)
-    }, theme.typography.body1)
-  };
-});
-var useTabPanelStyles = (0, _styles.makeStyles)(function (theme) {
-  return {
-    root: {
-      border: "1px solid ".concat(theme.palette.grey['400']),
-      borderTop: 0,
-      background: theme.palette.common.white,
-      padding: theme.spacing(3)
-    }
-  };
-});
+var _TabsListItem = _interopRequireDefault(require("@digigov/react-core/TabsListItem"));
 
-function getA11yProps(index) {
-  return {
-    id: "digigov-ui-tab-".concat(index),
-    'aria-controls': "digigov-ui-tabpanel-".concat(index)
-  };
-}
+var _TabsPanel = _interopRequireDefault(require("@digigov/react-core/TabsPanel"));
 
-var Tabs = function Tabs(_ref) {
-  var children = _ref.children,
-      props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
-  var classes = useTabsStyles();
-  return /*#__PURE__*/_react["default"].createElement(_Tabs["default"], (0, _extends2["default"])({
-    classes: classes,
-    indicatorColor: "primary"
-  }, props), children);
-};
+var _TabsHeading = _interopRequireDefault(require("@digigov/react-core/TabsHeading"));
 
-exports.Tabs = Tabs;
+var _useTogglableSections2 = require("@digigov/ui/hooks/useTogglableSections");
 
-var Tab = function Tab(props) {
-  var classes = useTabStyles();
-  return /*#__PURE__*/_react["default"].createElement(_Tab["default"], (0, _extends2["default"])({
-    classes: classes
-  }, props));
-};
+var _excluded = ["register", "opened"];
 
-exports.Tab = Tab;
+var useTabs = function useTabs() {
+  var _useTogglableSections = (0, _useTogglableSections2.useTogglableSections)({
+    singleOpen: true,
+    toggleProperty: 'selected',
+    onToggleProperty: 'onClick',
+    firstOpen: true,
+    ariaNavigation: true
+  }),
+      register = _useTogglableSections.register,
+      opened = _useTogglableSections.opened,
+      rest = (0, _objectWithoutProperties2["default"])(_useTogglableSections, _excluded);
 
-var TabPanel = function TabPanel(props) {
-  var classes = useTabPanelStyles();
-  var children = props.children,
-      value = props.value,
-      index = props.index,
-      other = (0, _objectWithoutProperties2["default"])(props, _excluded2);
-  return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({
-    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 = (0, _react.useCallback)(function (key) {
+    return {
+      active: opened[key],
+      id: key,
+      tabIndex: opened[key] ? 1 : -1
+    };
+  }, [opened]);
+  return (0, _extends2["default"])({
+    register: register,
+    opened: opened,
+    panel: panel
+  }, rest);
 };
 
-exports.TabPanel = TabPanel;
-var _default = Tabs;
+exports.useTabs = useTabs;
+var _default = _Tabs["default"];
 exports["default"] = _default;

package/core/WarningText/index.js

@@ -5,48 +5,15 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useWarningTextStyles = exports["default"] = exports.WarningText = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _clsx = _interopRequireDefault(require("clsx"));
-
-var _styles = require("@material-ui/core/styles");
-
-var _Error = _interopRequireDefault(require("@material-ui/icons/Error"));
-
-var useWarningTextStyles = (0, _styles.makeStyles)(function (theme) {
-  return {
-    root: {
-      margin: theme.spacing(4, 0)
-    },
-    icon: {
-      "float": 'left',
-      marginLeft: theme.spacing(1)
-    },
-    text: {
-      paddingLeft: theme.spacing(8)
-    }
-  };
-}, {
-  name: 'MuiWarningText'
+Object.defineProperty(exports, "WarningText", {
+  enumerable: true,
+  get: function get() {
+    return _WarningText["default"];
+  }
 });
-exports.useWarningTextStyles = useWarningTextStyles;
+exports["default"] = void 0;
 
-var WarningText = function WarningText(_ref) {
-  var className = _ref.className,
-      children = _ref.children;
-  var classes = useWarningTextStyles();
-  return /*#__PURE__*/_react["default"].createElement("div", {
-    className: (0, _clsx["default"])(className, classes.root)
-  }, /*#__PURE__*/_react["default"].createElement(_Error["default"], {
-    className: classes.icon,
-    fontSize: "large"
-  }), /*#__PURE__*/_react["default"].createElement("div", {
-    className: classes.text
-  }, children));
-};
+var _WarningText = _interopRequireDefault(require("@digigov/react-core/WarningText"));
 
-exports.WarningText = WarningText;
-var _default = WarningText;
+var _default = _WarningText["default"];
 exports["default"] = _default;

package/es/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/es/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/es/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/es/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;