@digigov/ui 0.8.0 → 0.9.1

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;