@digigov/ui 0.8.3 → 0.9.2

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

package/es/app/Header/index.spec.js

@@ -8,7 +8,6 @@ import Header, { HeaderTitle, HeaderSubtitle, HeaderLogo } from '@digigov/ui/app
 
 var _ref = /*#__PURE__*/React.createElement(Header, null, /*#__PURE__*/React.createElement(HeaderLogo, {
   src: logo,
-  height: '50',
   href: "https://gov.gr"
 }), /*#__PURE__*/React.createElement(HeaderTitle, {
   href: "/some-url"

package/es/app/PageTitle.js

@@ -1,85 +1,57 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["children", "preserveHeight"],
-    _excluded2 = ["children"],
-    _excluded3 = ["children"],
-    _excluded4 = ["children", "className", "dense"],
-    _excluded5 = ["dense"];
+var _excluded = ["component", "children"];
 import React from 'react';
-import clsx from 'clsx';
 import Caption from '@digigov/ui/typography/Caption';
 import Title from '@digigov/ui/typography/Title';
-import { makeStyles } from '@material-ui/core/styles';
-import Grid from '@material-ui/core/Grid';
-var usePageTitleStyles = makeStyles(function (theme) {
-  return {
-    preserveHeight: {
-      maxWidth: '100vh'
-    },
-    root: {
-      margin: theme.spacing(3, 0)
-    }
-  };
+import withDeprecation from '@digigov/ui/utils/withDeprecation';
+export var PageTitle = withDeprecation(function (_ref) {
+  var children = _ref.children;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, children);
 }, {
-  name: 'MuiPageTitle'
+  name: 'PageTitle',
+  warning: 'There is no need to use PageTitle components anymore. It will be removed in a later version'
 });
-export var PageTitle = function PageTitle(_ref) {
-  var children = _ref.children,
-      _ref$preserveHeight = _ref.preserveHeight,
-      preserveHeight = _ref$preserveHeight === void 0 ? true : _ref$preserveHeight,
-      props = _objectWithoutProperties(_ref, _excluded);
-
-  var styles = usePageTitleStyles(props);
-  return /*#__PURE__*/React.createElement(Grid, _extends({
-    container: true,
-    className: clsx(styles.root, preserveHeight && styles.preserveHeight)
-  }, props), children);
-};
 export default PageTitle;
-export var PageTitleSection = function PageTitleSection(_ref2) {
-  var children = _ref2.children,
-      props = _objectWithoutProperties(_ref2, _excluded2);
-
-  return /*#__PURE__*/React.createElement(Grid, _extends({
-    container: true,
-    justify: "space-between"
-  }, props, {
-    className: clsx('MuiPageTitleSection', props.className)
-  }), children);
-};
-export var PageTitleCaption = function PageTitleCaption(_ref3) {
-  var children = _ref3.children,
-      props = _objectWithoutProperties(_ref3, _excluded3);
-
-  return /*#__PURE__*/React.createElement(Caption, props, children);
-};
-var usePageTitleHeadingStyles = makeStyles(function (theme) {
-  return {
-    dense: {
-      margin: theme.spacing(0)
-    }
-  };
+export var PageTitleSection = withDeprecation(function (_ref2) {
+  var children = _ref2.children;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, children);
 }, {
-  name: 'MuiPageTitleHeading'
+  name: 'PageTitleSection',
+  warning: 'There is no need to use PageTitleSection components anymore. It will be removed in a later version'
 });
-export var PageTitleHeading = function PageTitleHeading(_ref4) {
-  var children = _ref4.children,
-      className = _ref4.className,
-      _ref4$dense = _ref4.dense,
-      dense = _ref4$dense === void 0 ? true : _ref4$dense,
-      props = _objectWithoutProperties(_ref4, _excluded4);
-
-  var _usePageTitleHeadingS = usePageTitleHeadingStyles(props),
-      denseClass = _usePageTitleHeadingS.dense,
-      classes = _objectWithoutProperties(_usePageTitleHeadingS, _excluded5);
+export var PageTitleCaption = withDeprecation(Caption, {
+  name: 'PageTitleCaption',
+  rename: 'Caption'
+});
+export var PageTitleHeading = withDeprecation(function (_ref3) {
+  var component = _ref3.component,
+      children = _ref3.children,
+      props = _objectWithoutProperties(_ref3, _excluded);
 
-  return /*#__PURE__*/React.createElement(Grid, {
-    container: true,
-    className: "MuiPageTitleHeadingContainer"
-  }, /*#__PURE__*/React.createElement(Title, _extends({
-    className: clsx(className, dense && denseClass),
-    size: "xl"
-  }, props, {
-    classes: classes
-  }), children));
-};
+  return /*#__PURE__*/React.createElement(Title, _extends({
+    size: "xl",
+    element: component
+  }, props), children);
+}, {
+  name: 'PageTitleHeading',
+  props: {
+    dense: {
+      error: true
+    },
+    size: {
+      values: {
+        xs: {
+          error: true
+        }
+      }
+    },
+    component: {
+      values: {
+        h5: {
+          error: true
+        }
+      }
+    }
+  }
+});

package/es/core/Accordion/index.js

@@ -1,55 +1,67 @@
-import React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
-import ExpansionPanel from '@material-ui/core/ExpansionPanel';
-import ExpansionPanelDetails from '@material-ui/core/ExpansionPanelDetails';
-import ExpansionPanelSummary from '@material-ui/core/ExpansionPanelSummary';
-import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
-import clsx from 'clsx';
-export var AccordionItemDetails = function AccordionItemDetails(_ref) {
-  var children = _ref.children,
-      className = _ref.className;
-  return /*#__PURE__*/React.createElement(ExpansionPanelDetails, {
-    className: className
-  }, children);
-};
-
-var _ref3 = /*#__PURE__*/React.createElement(ExpandMoreIcon, null);
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["register", "setOpened", "opened", "registered"];
 
-export var AccordionItemSummary = function AccordionItemSummary(_ref2) {
-  var children = _ref2.children,
-      className = _ref2.className,
-      _ref2$icon = _ref2.icon,
-      icon = _ref2$icon === void 0 ? _ref3 : _ref2$icon;
-  return /*#__PURE__*/React.createElement(ExpansionPanelSummary, {
-    className: className,
-    expandIcon: icon
-  }, children);
-};
-var useAccordionItemStyles = makeStyles(function () {
-  return {
-    root: {}
-  };
+/* eslint-disable react-hooks/exhaustive-deps */
+import Accordion from '@digigov/react-core/Accordion';
+import AccordionSection from '@digigov/react-core/AccordionSection';
+import AccordionSectionContent from '@digigov/react-core/AccordionSectionContent';
+import AccordionSectionHeader from '@digigov/react-core/AccordionSectionHeader';
+import AccordionControls from '@digigov/react-core/AccordionControls';
+import withDeprecation from '@digigov/ui/utils/withDeprecation';
+import { useTogglableSections } from '@digigov/ui/hooks/useTogglableSections';
+import React, { useCallback, useMemo } from 'react';
+export var AccordionItemDetails = withDeprecation(AccordionSectionContent, {
+  name: 'AccordionItemDetails',
+  rename: 'AccordionSectionContent'
 });
-export var AccordionItem = function AccordionItem(_ref4) {
-  var children = _ref4.children,
-      className = _ref4.className;
-  var classes = useAccordionItemStyles();
-  return /*#__PURE__*/React.createElement(ExpansionPanel, {
-    className: clsx(className, classes.root)
-  }, children);
-};
-var useAccordionStyles = makeStyles(function () {
-  return {
-    root: {
-      width: '100%'
-    }
-  };
+export var AccordionItemSummary = withDeprecation(AccordionSectionHeader, {
+  name: 'AccordionItemSummary',
+  rename: 'AccordionSectionHeader'
+});
+export var AccordionItem = withDeprecation( /*#__PURE__*/React.memo(AccordionSection, function (prev, next) {
+  return prev.open === next.open;
+}), {
+  name: 'AccordionItem',
+  rename: 'AccordionSection'
 });
-export var Accordion = function Accordion(_ref5) {
-  var children = _ref5.children,
-      className = _ref5.className;
-  var classes = useAccordionStyles();
-  return /*#__PURE__*/React.createElement("div", {
-    className: clsx(className, classes.root)
-  }, children);
-};
+
+var useAccordion = function useAccordion(props) {
+  var _useTogglableSections = useTogglableSections({
+    toggleProperty: 'open',
+    onToggleProperty: 'onClick',
+    singleOpen: props && !!props.singleOpen
+  }),
+      register = _useTogglableSections.register,
+      setOpened = _useTogglableSections.setOpened,
+      opened = _useTogglableSections.opened,
+      registered = _useTogglableSections.registered,
+      rest = _objectWithoutProperties(_useTogglableSections, _excluded);
+
+  var keys = useMemo(function () {
+    return Object.keys(registered.current);
+  }, [registered.current.length]);
+  var openAll = useCallback(function () {
+    setOpened(keys.reduce(function (newOpened, key) {
+      return _extends({}, newOpened, _defineProperty({}, key, true));
+    }, {}));
+  }, [keys]);
+  var closeAll = useCallback(function () {
+    return setOpened({});
+  }, []);
+  return _extends({
+    register: register,
+    openAll: openAll,
+    closeAll: closeAll,
+    isOpenAll: keys.length ? keys.every(function (v) {
+      return opened[v];
+    }) : false,
+    setOpened: setOpened,
+    opened: opened,
+    registered: registered
+  }, rest);
+};
+
+export { Accordion, AccordionControls, AccordionSection, AccordionSectionContent, AccordionSectionHeader, useAccordion };
+export default Accordion;

package/es/core/Blockquote/index.js

@@ -1,42 +1,16 @@
-import React from 'react';
-import clsx from 'clsx';
-import { makeStyles } from '@material-ui/core/styles';
-export var useBlockquoteStyles = makeStyles(function (theme) {
-  return {
-    root: {
-      margin: theme.spacing(2, 0),
-      padding: theme.spacing(2),
-      backgroundColor: theme.palette.grey['300'],
-      borderLeft: "".concat(theme.spacing(1), "px solid")
-    },
-    info: {
-      borderLeftColor: theme.palette.grey['500']
-    },
-    warning: {
-      borderLeftColor: theme.palette.warning.main
-    },
-    error: {
-      borderLeftColor: theme.palette.error.main
-    },
-    success: {
-      borderLeftColor: theme.palette.success.main
+import CoreBlockquote from '@digigov/react-core/Blockquote';
+import withDeprecation from '@digigov/ui/utils/withDeprecation';
+export var Blockquote = withDeprecation(CoreBlockquote, {
+  name: 'Blockquote',
+  props: {
+    variant: {
+      values: {
+        info: {
+          warning: true
+        }
+      },
+      error: true
     }
-  };
-}, {
-  name: 'MuiBlockquote'
+  }
 });
-export var Blockquote = function Blockquote(_ref) {
-  var className = _ref.className,
-      _ref$variant = _ref.variant,
-      variant = _ref$variant === void 0 ? 'info' : _ref$variant,
-      children = _ref.children;
-  var classes = useBlockquoteStyles();
-  var variantCls = classes[variant];
-  return /*#__PURE__*/React.createElement("blockquote", {
-    className: clsx(className, variantCls, classes.root)
-  }, children);
-};
-Blockquote.defaultProps = {
-  variant: 'info'
-};
 export default Blockquote;

package/es/core/Button/BackButton.js

@@ -1,39 +1,21 @@
-import _extends from "@babel/runtime/helpers/extends";
-import React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
-import ArrowLeftIcon from '@material-ui/icons/ArrowLeft';
-import Button from '@digigov/ui/core/Button';
-var useBackButtonStyles = makeStyles(function (theme) {
-  return {
-    root: {
-      fontSize: 14,
-      textTransform: 'capitalize',
-      borderRadius: 'unset !important',
-      borderBottom: '1px solid ',
-      backgroundColor: 'transparent',
-      color: theme.palette.common.black,
-      '&:hover': {
-        background: theme.palette.common.white
-      }
+import BackLink from '@digigov/react-core/BackLink';
+import withDeprecation from '@digigov/ui/utils/withDeprecation';
+export var BackButton = withDeprecation(BackLink, {
+  name: 'BackButton',
+  rename: 'BackLink',
+  props: {
+    variant: {
+      error: true
+    },
+    size: {
+      error: true
+    },
+    xsFullWidth: {
+      error: true
+    },
+    startIcon: {
+      error: true
     }
-  };
+  }
 });
-
-var _ref = /*#__PURE__*/React.createElement(ArrowLeftIcon, null);
-
-export var BackButton = function BackButton(props) {
-  var classes = useBackButtonStyles();
-
-  var goBack = function goBack() {
-    window.history.back();
-  };
-
-  return /*#__PURE__*/React.createElement(Button, _extends({
-    variant: "text",
-    onClick: props.onClick || goBack,
-    color: "default",
-    classes: classes,
-    startIcon: _ref
-  }, props), props.children);
-};
 export default BackButton;

package/es/core/Button/ButtonLink.js

@@ -0,0 +1,16 @@
+import CoreButtonLink from '@digigov/react-core/ButtonLink';
+import withDeprecation from '@digigov/ui/utils/withDeprecation';
+export var ButtonLink = withDeprecation(CoreButtonLink, {
+  name: 'ButtonLink',
+  props: {
+    variant: {
+      error: true
+    },
+    size: {
+      error: true
+    },
+    xsFullWidth: {
+      error: true
+    }
+  }
+});

package/es/core/Button/CallToAction.js

@@ -1,17 +1,27 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["label", "children"];
 import React from 'react';
-import Button from '@digigov/ui/core/Button';
-import ChevronRightIcon from '@material-ui/icons/ChevronRight';
-
-var _ref2 = /*#__PURE__*/React.createElement(ChevronRightIcon, null);
-
-export var ButtonIcon = function ButtonIcon(_ref) {
+import CoreCallToAction from '@digigov/react-core/CallToAction';
+import withDeprecation from '@digigov/ui/utils/withDeprecation';
+export var CallToAction = withDeprecation(function (_ref) {
   var _ref$label = _ref.label,
       label = _ref$label === void 0 ? 'Start here' : _ref$label,
       children = _ref.children,
       props = _objectWithoutProperties(_ref, _excluded);
 
-  return /*#__PURE__*/React.createElement(Button, props, children || label, _ref2);
-};
-export default ButtonIcon;
+  return /*#__PURE__*/React.createElement(CoreCallToAction, props, children || label);
+}, {
+  name: 'CallToAction',
+  props: {
+    variant: {
+      error: true
+    },
+    size: {
+      error: true
+    },
+    xsFullWidth: {
+      error: true
+    }
+  }
+});
+export default CallToAction;

package/es/core/Button/Icon.js

@@ -1,37 +1,7 @@
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["Icon", "icon", "children"];
-// @flow
-import React, { useMemo } from 'react';
-import { makeStyles } from '@material-ui/core/styles';
-import Button from '@digigov/ui/core/Button';
-import Box from '@material-ui/core/Box';
-import MuiIcon from '@material-ui/core/Icon';
-var useStyles = makeStyles(function () {
-  return {
-    textInButton: {
-      whiteSpace: 'nowrap'
-    }
-  };
-});
-export var ButtonIcon = function ButtonIcon(_ref) {
-  var Icon = _ref.Icon,
-      icon = _ref.icon,
-      children = _ref.children,
-      props = _objectWithoutProperties(_ref, _excluded);
-
-  var classes = useStyles();
-  var IconComponent = useMemo(function () {
-    var IconComponent = function IconComponent(props) {
-      return /*#__PURE__*/React.createElement(MuiIcon, props, icon);
-    };
+import withDeprecation from '@digigov/ui/utils/withDeprecation'; // eslint-disable-next-line @typescript-eslint/no-empty-function
 
-    return Icon || IconComponent;
-  }, [icon, Icon]);
-  return /*#__PURE__*/React.createElement(Button, props, /*#__PURE__*/React.createElement(Box, {
-    marginRight: 1,
-    display: "flex"
-  }, /*#__PURE__*/React.createElement(IconComponent, null)), /*#__PURE__*/React.createElement("div", {
-    className: classes.textInButton
-  }, children));
-};
+export var ButtonIcon = withDeprecation(function () {}, {
+  name: 'ButtonIcon',
+  error: true
+});
 export default ButtonIcon;

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';