orcs-design-system 3.2.4 → 3.2.6

package/es/components/Tabs/TabsContainer.stories.js

@@ -2,34 +2,42 @@ import React from "react";
 import Box from "../Box";
 import Popover from "../Popover";
 import { TabsContainer, Tab } from ".";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export default {
   title: "Components/Tabs",
-  decorators: [function (storyFn) {
-    return /*#__PURE__*/React.createElement(Box, {
-      bg: "greyLightest",
-      p: "xl"
-    }, storyFn());
-  }],
+  decorators: [storyFn => /*#__PURE__*/_jsx(Box, {
+    bg: "greyLightest",
+    p: "xl",
+    children: storyFn()
+  })],
   component: TabsContainer
 };
-export var defaultTabs = function defaultTabs() {
-  return /*#__PURE__*/React.createElement(TabsContainer, null, /*#__PURE__*/React.createElement(Tab, null, /*#__PURE__*/React.createElement("a", {
-    href: "#"
-  }, "Details")), /*#__PURE__*/React.createElement(Popover, {
+export const defaultTabs = () => /*#__PURE__*/_jsxs(TabsContainer, {
+  children: [/*#__PURE__*/_jsx(Tab, {
+    children: /*#__PURE__*/_jsx("a", {
+      href: "#",
+      children: "Details"
+    })
+  }), /*#__PURE__*/_jsx(Popover, {
     direction: "top",
     text: "Example with tooltip explaining tab",
-    width: "218px"
-  }, /*#__PURE__*/React.createElement(Tab, {
-    active: true
-  }, /*#__PURE__*/React.createElement("a", {
-    href: "#",
-    tabIndex: "-1"
-  }, "Additional information"))), /*#__PURE__*/React.createElement(Tab, {
-    notification: "97"
-  }, /*#__PURE__*/React.createElement("a", {
-    href: "#"
-  }, "Planning")));
-};
+    width: "218px",
+    children: /*#__PURE__*/_jsx(Tab, {
+      active: true,
+      children: /*#__PURE__*/_jsx("a", {
+        href: "#",
+        tabIndex: "-1",
+        children: "Additional information"
+      })
+    })
+  }), /*#__PURE__*/_jsx(Tab, {
+    notification: "97",
+    children: /*#__PURE__*/_jsx("a", {
+      href: "#",
+      children: "Planning"
+    })
+  })]
+});
 defaultTabs.story = {
   name: "Default Tabs"
 };

package/es/components/Tabs/index.js

@@ -1,14 +1,11 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["theme", "children", "active", "notification"],
-  _excluded2 = ["theme", "children"];
 import React from "react";
 import PropTypes from "prop-types";
 import styled, { ThemeProvider } from "styled-components";
 import { themeGet } from "@styled-system/theme-get";
 import { css } from "@styled-system/css";
 import { space, color } from "styled-system";
-export var TabsContainerItem = styled("div").withConfig({
+import { jsx as _jsx } from "react/jsx-runtime";
+export const TabsContainerItem = styled("div").withConfig({
   displayName: "Tabs__TabsContainerItem",
   componentId: "sc-15tpvnt-0"
 })(css({
@@ -18,95 +15,96 @@ export var TabsContainerItem = styled("div").withConfig({
   flexWrap: "wrap",
   bg: "transparent"
 }), space);
-export var TabItem = styled("div").withConfig({
+export const TabItem = styled("div").withConfig({
   displayName: "Tabs__TabItem",
   componentId: "sc-15tpvnt-1"
-})(function (props) {
-  return css({
-    marginRight: 3,
-    a: {
-      borderRadius: themeGet("radii.2")(props),
-      bg: themeGet("colors.greyLighter")(props),
-      transition: themeGet("transition.transitionDefault")(props),
-      px: 4,
-      py: 3,
-      fontSize: themeGet("fontSizes.1")(props),
-      fontWeight: themeGet("fontWeights.2")(props),
+})(props => css({
+  marginRight: 3,
+  a: {
+    borderRadius: themeGet("radii.2")(props),
+    bg: themeGet("colors.greyLighter")(props),
+    transition: themeGet("transition.transitionDefault")(props),
+    px: 4,
+    py: 3,
+    fontSize: themeGet("fontSizes.1")(props),
+    fontWeight: themeGet("fontWeights.2")(props),
+    color: themeGet("colors.greyDarker")(props),
+    display: "flex",
+    alignItems: "center",
+    position: "relative",
+    whiteSpace: "nowrap",
+    textDecoration: "none",
+    textAlign: "center",
+    textTransform: "uppercase",
+    cursor: "pointer",
+    "&:hover": {
+      bg: themeGet("colors.greyLight")(props),
       color: themeGet("colors.greyDarker")(props),
-      display: "flex",
-      alignItems: "center",
-      position: "relative",
-      whiteSpace: "nowrap",
-      textDecoration: "none",
-      textAlign: "center",
-      textTransform: "uppercase",
-      cursor: "pointer",
-      "&:hover": {
-        bg: themeGet("colors.greyLight")(props),
-        color: themeGet("colors.greyDarker")(props),
-        outline: "0"
-      },
-      "&:focus": {
-        color: themeGet("colors.greyDarker")(props),
-        outline: "0",
-        boxShadow: themeGet("shadows.thinOutline")(props) + " " + themeGet("colors.grey")(props)
-      },
-      button: {
-        marginLeft: 2
-      }
+      outline: "0"
     },
-    "&.active": {
-      a: {
-        color: themeGet("colors.primary")(props),
-        bg: themeGet("colors.white")(props),
-        "&:hover": {
-          cursor: "default"
-        }
-      }
+    "&:focus": {
+      color: themeGet("colors.greyDarker")(props),
+      outline: "0",
+      boxShadow: themeGet("shadows.thinOutline")(props) + " " + themeGet("colors.grey")(props)
     },
-    "&.notification": {
-      a: {
-        "&::after": {
-          position: "absolute",
-          top: "calc(8px * -1)",
-          right: "calc(4px * -2)",
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center",
-          width: "20px",
-          height: "20px",
-          borderRadius: "50%",
-          fontSize: themeGet("fontSizes.0")(props),
-          fontWeight: themeGet("fontWeights.2")(props),
-          content: "\"".concat(props.notification, "\""),
-          bg: themeGet("colors.danger")(props),
-          color: themeGet("colors.white")(props),
-          zIndex: 4
-        }
+    button: {
+      marginLeft: 2
+    }
+  },
+  "&.active": {
+    a: {
+      color: themeGet("colors.primary")(props),
+      bg: themeGet("colors.white")(props),
+      "&:hover": {
+        cursor: "default"
       }
     }
-  });
-}, space, color);
-export var Tab = function Tab(_ref) {
-  var theme = _ref.theme,
-    children = _ref.children,
-    active = _ref.active,
-    notification = _ref.notification,
-    props = _objectWithoutProperties(_ref, _excluded);
-  var component = /*#__PURE__*/React.createElement(TabItem, _extends({
+  },
+  "&.notification": {
+    a: {
+      "&::after": {
+        position: "absolute",
+        top: "calc(8px * -1)",
+        right: "calc(4px * -2)",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        width: "20px",
+        height: "20px",
+        borderRadius: "50%",
+        fontSize: themeGet("fontSizes.0")(props),
+        fontWeight: themeGet("fontWeights.2")(props),
+        content: "\"".concat(props.notification, "\""),
+        bg: themeGet("colors.danger")(props),
+        color: themeGet("colors.white")(props),
+        zIndex: 4
+      }
+    }
+  }
+}), space, color);
+export const Tab = _ref => {
+  let {
+    theme,
+    children,
+    active,
+    notification,
+    ...props
+  } = _ref;
+  const component = /*#__PURE__*/_jsx(TabItem, {
     active: active,
     notification: notification,
     role: "presentation",
-    className: "".concat(active ? "active" : "", " ").concat(notification ? "notification notification-" + notification : "")
-  }, props), React.Children.map(children, function (child) {
-    return /*#__PURE__*/React.cloneElement(child, {
+    className: "".concat(active ? "active" : "", " ").concat(notification ? "notification notification-" + notification : ""),
+    ...props,
+    children: React.Children.map(children, child => /*#__PURE__*/React.cloneElement(child, {
       role: "tab",
       "aria-selected": "".concat(active)
-    });
-  }));
-  return theme ? /*#__PURE__*/React.createElement(ThemeProvider, {
-    theme: theme
-  }, component) : component;
+    }))
+  });
+  return theme ? /*#__PURE__*/_jsx(ThemeProvider, {
+    theme: theme,
+    children: component
+  }) : component;
 };
 Tab.propTypes = {
   /** Specifies whether the tab is the active tab */
@@ -118,16 +116,21 @@ Tab.propTypes = {
   /** The content of the Tab is passed as a child. */
   children: PropTypes.node
 };
-export var TabsContainer = function TabsContainer(_ref2) {
-  var theme = _ref2.theme,
-    children = _ref2.children,
-    props = _objectWithoutProperties(_ref2, _excluded2);
-  var component = /*#__PURE__*/React.createElement(TabsContainerItem, _extends({
-    role: "tablist"
-  }, props), children);
-  return theme ? /*#__PURE__*/React.createElement(ThemeProvider, {
-    theme: theme
-  }, component) : component;
+export const TabsContainer = _ref2 => {
+  let {
+    theme,
+    children,
+    ...props
+  } = _ref2;
+  const component = /*#__PURE__*/_jsx(TabsContainerItem, {
+    role: "tablist",
+    ...props,
+    children: children
+  });
+  return theme ? /*#__PURE__*/_jsx(ThemeProvider, {
+    theme: theme,
+    children: component
+  }) : component;
 };
 TabsContainer.propTypes = {
   /** The contents of the TabsContainer are passed as a child. */