orcs-design-system 3.2.4 → 3.2.6

package/es/components/Typography/index.js

@@ -3,355 +3,299 @@ import { typography, space, layout, color, variant, compose } from "styled-syste
 import css from "@styled-system/css";
 import shouldForwardProp from "@styled-system/should-forward-prop";
 import { themeGet } from "@styled-system/theme-get";
-var typeStyles = compose(typography, color, space, layout);
-export var H1 = styled("h1").withConfig({
+const typeStyles = compose(typography, color, space, layout);
+export const H1 = styled("h1").withConfig({
   displayName: "Typography__H1",
   componentId: "sc-1613j99-0"
-})(function (props) {
-  return css({
-    fontFamily: themeGet("fonts.main")(props),
-    fontSize: themeGet("fontSizes.6")(props),
-    fontWeight: themeGet("fontWeights.1")(props),
-    textTransform: props.uppercase ? "uppercase" : "none",
-    wordBreak: props.breakWord ? "break-word" : "normal"
-  });
-}, function (props) {
-  return variant({
-    prop: "weight",
-    variants: {
-      light: {
-        fontWeight: themeGet("fontWeights.0")(props)
-      },
-      bold: {
-        fontWeight: themeGet("fontWeights.2")(props)
-      }
+})(props => css({
+  fontFamily: themeGet("fonts.main")(props),
+  fontSize: themeGet("fontSizes.6")(props),
+  fontWeight: themeGet("fontWeights.1")(props),
+  textTransform: props.uppercase ? "uppercase" : "none",
+  wordBreak: props.breakWord ? "break-word" : "normal"
+}), props => variant({
+  prop: "weight",
+  variants: {
+    light: {
+      fontWeight: themeGet("fontWeights.0")(props)
+    },
+    bold: {
+      fontWeight: themeGet("fontWeights.2")(props)
     }
-  });
-}, function (props) {
-  return variant({
-    prop: "sizing",
-    variants: {
-      large: {
-        fontSize: themeGet("fontSizes.7")(props)
-      },
-      small: {
-        fontSize: themeGet("fontSizes.5")(props)
-      }
+  }
+}), props => variant({
+  prop: "sizing",
+  variants: {
+    large: {
+      fontSize: themeGet("fontSizes.7")(props)
+    },
+    small: {
+      fontSize: themeGet("fontSizes.5")(props)
     }
-  });
-}, typeStyles);
-export var H2 = styled("h2").withConfig({
+  }
+}), typeStyles);
+export const H2 = styled("h2").withConfig({
   displayName: "Typography__H2",
   componentId: "sc-1613j99-1"
-})(function (props) {
-  return css({
-    fontFamily: themeGet("fonts.main")(props),
-    fontSize: themeGet("fontSizes.5")(props),
-    fontWeight: themeGet("fontWeights.1")(props),
-    textTransform: props.uppercase ? "uppercase" : "none",
-    wordBreak: props.breakWord ? "break-word" : "normal"
-  });
-}, function (props) {
-  return variant({
-    prop: "weight",
-    variants: {
-      light: {
-        fontWeight: themeGet("fontWeights.0")(props)
-      },
-      bold: {
-        fontWeight: themeGet("fontWeights.2")(props)
-      }
+})(props => css({
+  fontFamily: themeGet("fonts.main")(props),
+  fontSize: themeGet("fontSizes.5")(props),
+  fontWeight: themeGet("fontWeights.1")(props),
+  textTransform: props.uppercase ? "uppercase" : "none",
+  wordBreak: props.breakWord ? "break-word" : "normal"
+}), props => variant({
+  prop: "weight",
+  variants: {
+    light: {
+      fontWeight: themeGet("fontWeights.0")(props)
+    },
+    bold: {
+      fontWeight: themeGet("fontWeights.2")(props)
     }
-  });
-}, function (props) {
-  return variant({
-    prop: "sizing",
-    variants: {
-      large: {
-        fontSize: themeGet("fontSizes.6")(props)
-      },
-      small: {
-        fontSize: themeGet("fontSizes.4")(props)
-      }
+  }
+}), props => variant({
+  prop: "sizing",
+  variants: {
+    large: {
+      fontSize: themeGet("fontSizes.6")(props)
+    },
+    small: {
+      fontSize: themeGet("fontSizes.4")(props)
     }
-  });
-}, typeStyles);
-export var H3 = styled("h3").withConfig({
+  }
+}), typeStyles);
+export const H3 = styled("h3").withConfig({
   displayName: "Typography__H3",
   componentId: "sc-1613j99-2"
-})(function (props) {
-  return css({
-    fontFamily: themeGet("fonts.main")(props),
-    fontSize: themeGet("fontSizes.4")(props),
-    fontWeight: themeGet("fontWeights.1")(props),
-    textTransform: props.uppercase ? "uppercase" : "none",
-    wordBreak: props.breakWord ? "break-word" : "normal"
-  });
-}, function (props) {
-  return variant({
-    prop: "weight",
-    variants: {
-      light: {
-        fontWeight: themeGet("fontWeights.0")(props)
-      },
-      bold: {
-        fontWeight: themeGet("fontWeights.2")(props)
-      }
+})(props => css({
+  fontFamily: themeGet("fonts.main")(props),
+  fontSize: themeGet("fontSizes.4")(props),
+  fontWeight: themeGet("fontWeights.1")(props),
+  textTransform: props.uppercase ? "uppercase" : "none",
+  wordBreak: props.breakWord ? "break-word" : "normal"
+}), props => variant({
+  prop: "weight",
+  variants: {
+    light: {
+      fontWeight: themeGet("fontWeights.0")(props)
+    },
+    bold: {
+      fontWeight: themeGet("fontWeights.2")(props)
     }
-  });
-}, function (props) {
-  return variant({
-    prop: "sizing",
-    variants: {
-      large: {
-        fontSize: themeGet("fontSizes.5")(props)
-      },
-      small: {
-        fontSize: themeGet("fontSizes.3")(props)
-      }
+  }
+}), props => variant({
+  prop: "sizing",
+  variants: {
+    large: {
+      fontSize: themeGet("fontSizes.5")(props)
+    },
+    small: {
+      fontSize: themeGet("fontSizes.3")(props)
     }
-  });
-}, typeStyles);
-export var H4 = styled("h4").withConfig({
+  }
+}), typeStyles);
+export const H4 = styled("h4").withConfig({
   displayName: "Typography__H4",
   componentId: "sc-1613j99-3"
-})(function (props) {
-  return css({
-    fontFamily: themeGet("fonts.main")(props),
-    fontSize: themeGet("fontSizes.3")(props),
-    fontWeight: themeGet("fontWeights.1")(props),
-    textTransform: props.uppercase ? "uppercase" : "none",
-    wordBreak: props.breakWord ? "break-word" : "normal"
-  });
-}, function (props) {
-  return variant({
-    prop: "weight",
-    variants: {
-      light: {
-        fontWeight: themeGet("fontWeights.0")(props)
-      },
-      bold: {
-        fontWeight: themeGet("fontWeights.2")(props)
-      }
+})(props => css({
+  fontFamily: themeGet("fonts.main")(props),
+  fontSize: themeGet("fontSizes.3")(props),
+  fontWeight: themeGet("fontWeights.1")(props),
+  textTransform: props.uppercase ? "uppercase" : "none",
+  wordBreak: props.breakWord ? "break-word" : "normal"
+}), props => variant({
+  prop: "weight",
+  variants: {
+    light: {
+      fontWeight: themeGet("fontWeights.0")(props)
+    },
+    bold: {
+      fontWeight: themeGet("fontWeights.2")(props)
     }
-  });
-}, function (props) {
-  return variant({
-    prop: "sizing",
-    variants: {
-      large: {
-        fontSize: themeGet("fontSizes.4")(props)
-      },
-      small: {
-        fontSize: themeGet("fontSizes.2")(props)
-      }
+  }
+}), props => variant({
+  prop: "sizing",
+  variants: {
+    large: {
+      fontSize: themeGet("fontSizes.4")(props)
+    },
+    small: {
+      fontSize: themeGet("fontSizes.2")(props)
     }
-  });
-}, typeStyles);
-export var H5 = styled("h5").withConfig({
+  }
+}), typeStyles);
+export const H5 = styled("h5").withConfig({
   displayName: "Typography__H5",
   componentId: "sc-1613j99-4"
-})(function (props) {
-  return css({
-    fontFamily: themeGet("fonts.main")(props),
-    fontSize: themeGet("fontSizes.2")(props),
-    fontWeight: themeGet("fontWeights.1")(props),
-    textTransform: props.uppercase ? "uppercase" : "none",
-    wordBreak: props.breakWord ? "break-word" : "normal"
-  });
-}, function (props) {
-  return variant({
-    prop: "weight",
-    variants: {
-      light: {
-        fontWeight: themeGet("fontWeights.0")(props)
-      },
-      bold: {
-        fontWeight: themeGet("fontWeights.2")(props)
-      }
+})(props => css({
+  fontFamily: themeGet("fonts.main")(props),
+  fontSize: themeGet("fontSizes.2")(props),
+  fontWeight: themeGet("fontWeights.1")(props),
+  textTransform: props.uppercase ? "uppercase" : "none",
+  wordBreak: props.breakWord ? "break-word" : "normal"
+}), props => variant({
+  prop: "weight",
+  variants: {
+    light: {
+      fontWeight: themeGet("fontWeights.0")(props)
+    },
+    bold: {
+      fontWeight: themeGet("fontWeights.2")(props)
     }
-  });
-}, function (props) {
-  return variant({
-    prop: "sizing",
-    variants: {
-      large: {
-        fontSize: themeGet("fontSizes.3")(props)
-      },
-      small: {
-        fontSize: themeGet("fontSizes.1")(props)
-      }
+  }
+}), props => variant({
+  prop: "sizing",
+  variants: {
+    large: {
+      fontSize: themeGet("fontSizes.3")(props)
+    },
+    small: {
+      fontSize: themeGet("fontSizes.1")(props)
     }
-  });
-}, typeStyles);
-export var H6 = styled("h6").withConfig({
+  }
+}), typeStyles);
+export const H6 = styled("h6").withConfig({
   displayName: "Typography__H6",
   componentId: "sc-1613j99-5"
-})(function (props) {
-  return css({
-    fontFamily: themeGet("fonts.main")(props),
-    fontSize: themeGet("fontSizes.1")(props),
-    fontWeight: themeGet("fontWeights.1")(props),
-    textTransform: props.uppercase ? "uppercase" : "none",
-    wordBreak: props.breakWord ? "break-word" : "normal"
-  });
-}, function (props) {
-  return variant({
-    prop: "weight",
-    variants: {
-      light: {
-        fontWeight: themeGet("fontWeights.0")(props)
-      },
-      bold: {
-        fontWeight: themeGet("fontWeights.2")(props)
-      }
+})(props => css({
+  fontFamily: themeGet("fonts.main")(props),
+  fontSize: themeGet("fontSizes.1")(props),
+  fontWeight: themeGet("fontWeights.1")(props),
+  textTransform: props.uppercase ? "uppercase" : "none",
+  wordBreak: props.breakWord ? "break-word" : "normal"
+}), props => variant({
+  prop: "weight",
+  variants: {
+    light: {
+      fontWeight: themeGet("fontWeights.0")(props)
+    },
+    bold: {
+      fontWeight: themeGet("fontWeights.2")(props)
     }
-  });
-}, function (props) {
-  return variant({
-    prop: "sizing",
-    variants: {
-      large: {
-        fontSize: themeGet("fontSizes.2")(props)
-      },
-      small: {
-        fontSize: themeGet("fontSizes.0")(props)
-      }
+  }
+}), props => variant({
+  prop: "sizing",
+  variants: {
+    large: {
+      fontSize: themeGet("fontSizes.2")(props)
+    },
+    small: {
+      fontSize: themeGet("fontSizes.0")(props)
     }
-  });
-}, typeStyles);
-export var P = styled("p").withConfig({
+  }
+}), typeStyles);
+export const P = styled("p").withConfig({
   displayName: "Typography__P",
   componentId: "sc-1613j99-6"
-})(function (props) {
-  return css({
-    fontFamily: themeGet("fonts.main")(props),
-    fontSize: themeGet("fontSizes.2")(props),
-    fontWeight: themeGet("fontWeights.1")(props),
-    textTransform: props.uppercase ? "uppercase" : "none",
-    wordBreak: props.breakWord ? "break-word" : "normal"
-  });
-}, function (props) {
-  return variant({
-    prop: "weight",
-    variants: {
-      light: {
-        fontWeight: themeGet("fontWeights.0")(props)
-      },
-      bold: {
-        fontWeight: themeGet("fontWeights.2")(props)
-      }
+})(props => css({
+  fontFamily: themeGet("fonts.main")(props),
+  fontSize: themeGet("fontSizes.2")(props),
+  fontWeight: themeGet("fontWeights.1")(props),
+  textTransform: props.uppercase ? "uppercase" : "none",
+  wordBreak: props.breakWord ? "break-word" : "normal"
+}), props => variant({
+  prop: "weight",
+  variants: {
+    light: {
+      fontWeight: themeGet("fontWeights.0")(props)
+    },
+    bold: {
+      fontWeight: themeGet("fontWeights.2")(props)
     }
-  });
-}, function (props) {
-  return variant({
-    prop: "sizing",
-    variants: {
-      large: {
-        fontSize: themeGet("fontSizes.3")(props)
-      }
+  }
+}), props => variant({
+  prop: "sizing",
+  variants: {
+    large: {
+      fontSize: themeGet("fontSizes.3")(props)
     }
-  });
-}, typeStyles);
-export var Small = styled("small").withConfig({
-  shouldForwardProp: shouldForwardProp,
+  }
+}), typeStyles);
+export const Small = styled("small").withConfig({
+  shouldForwardProp,
   displayName: "Typography__Small",
   componentId: "sc-1613j99-7"
 }).attrs({
   className: "Small"
-})(function (props) {
-  return css({
-    fontSize: themeGet("fontSizes.1")(props),
-    textTransform: props.uppercase ? "uppercase" : "none",
-    wordBreak: props.breakWord ? "break-word" : "normal"
-  });
-}, function (props) {
-  return variant({
-    prop: "weight",
-    variants: {
-      light: {
-        fontWeight: themeGet("fontWeights.0")(props)
-      },
-      bold: {
-        fontWeight: themeGet("fontWeights.2")(props)
-      }
+})(props => css({
+  fontSize: themeGet("fontSizes.1")(props),
+  textTransform: props.uppercase ? "uppercase" : "none",
+  wordBreak: props.breakWord ? "break-word" : "normal"
+}), props => variant({
+  prop: "weight",
+  variants: {
+    light: {
+      fontWeight: themeGet("fontWeights.0")(props)
+    },
+    bold: {
+      fontWeight: themeGet("fontWeights.2")(props)
     }
-  });
-}, typeStyles);
-export var Text = styled("span").withConfig({
+  }
+}), typeStyles);
+export const Text = styled("span").withConfig({
   displayName: "Typography__Text",
   componentId: "sc-1613j99-8"
-})(function (props) {
-  return css({
-    fontFamily: themeGet("fonts.main")(props),
-    fontSize: themeGet("fontSizes.2")(props),
-    fontWeight: themeGet("fontWeights.1")(props),
-    textTransform: props.uppercase ? "uppercase" : "none",
-    wordBreak: props.breakWord ? "break-word" : "normal"
-  });
-}, function (props) {
-  return variant({
-    prop: "weight",
-    variants: {
-      light: {
-        fontWeight: themeGet("fontWeights.0")(props)
-      },
-      bold: {
-        fontWeight: themeGet("fontWeights.2")(props)
-      }
+})(props => css({
+  fontFamily: themeGet("fonts.main")(props),
+  fontSize: themeGet("fontSizes.2")(props),
+  fontWeight: themeGet("fontWeights.1")(props),
+  textTransform: props.uppercase ? "uppercase" : "none",
+  wordBreak: props.breakWord ? "break-word" : "normal"
+}), props => variant({
+  prop: "weight",
+  variants: {
+    light: {
+      fontWeight: themeGet("fontWeights.0")(props)
+    },
+    bold: {
+      fontWeight: themeGet("fontWeights.2")(props)
     }
-  });
-}, function (props) {
-  return variant({
-    prop: "sizing",
-    variants: {
-      large: {
-        fontSize: themeGet("fontSizes.3")(props)
-      }
+  }
+}), props => variant({
+  prop: "sizing",
+  variants: {
+    large: {
+      fontSize: themeGet("fontSizes.3")(props)
     }
-  });
-}, typeStyles);
-export var Quote = styled("blockquote").withConfig({
+  }
+}), typeStyles);
+export const Quote = styled("blockquote").withConfig({
   displayName: "Typography__Quote",
   componentId: "sc-1613j99-9"
-})(function (props) {
-  return css({
+})(props => css({
+  display: "block",
+  fontSize: themeGet("fontSizes.3")(props),
+  fontWeight: themeGet("fontWeights.1")(props),
+  borderLeftStyle: "solid",
+  borderLeftWidth: 3,
+  borderLeftColor: "greyLight",
+  p: 4,
+  em: {
     display: "block",
-    fontSize: themeGet("fontSizes.3")(props),
-    fontWeight: themeGet("fontWeights.1")(props),
-    borderLeftStyle: "solid",
-    borderLeftWidth: 3,
-    borderLeftColor: "greyLight",
-    p: 4,
-    em: {
-      display: "block",
-      fontStyle: "italic",
-      fontSize: themeGet("fontSizes.2")(props),
-      color: themeGet("colors.greyDark")(props)
-    }
-  });
-}, typeStyles);
-export var Code = styled("div").withConfig({
+    fontStyle: "italic",
+    fontSize: themeGet("fontSizes.2")(props),
+    color: themeGet("colors.greyDark")(props)
+  }
+}), typeStyles);
+export const Code = styled("div").withConfig({
   displayName: "Typography__Code",
   componentId: "sc-1613j99-10"
-})(function (props) {
-  return css({
-    padding: 3,
-    fontSize: themeGet("fontSizes.2")(props),
-    fontFamily: "monospace",
-    backgroundColor: themeGet("colors.warningLightest")(props)
-  });
-});
+})(props => css({
+  padding: 3,
+  fontSize: themeGet("fontSizes.2")(props),
+  fontFamily: "monospace",
+  backgroundColor: themeGet("colors.warningLightest")(props)
+}));
 export default {
-  H1: H1,
-  H2: H2,
-  H3: H3,
-  H4: H4,
-  H5: H5,
-  H6: H6,
-  P: P,
-  Text: Text,
-  Quote: Quote,
-  Small: Small,
-  Code: Code
+  H1,
+  H2,
+  H3,
+  H4,
+  H5,
+  H6,
+  P,
+  Text,
+  Quote,
+  Small,
+  Code
 };

package/es/components.test.js

@@ -1,4 +1,4 @@
 import * as components from ".";
-test("all components exported", function () {
+test("all components exported", () => {
   expect(Object.keys(components)).toMatchInlineSnapshot("\n    Array [\n      \"ActionsMenu\",\n      \"ActionsMenuBody\",\n      \"ActionsMenuHeading\",\n      \"ActionsMenuItem\",\n      \"Avatar\",\n      \"Badge\",\n      \"Box\",\n      \"Button\",\n      \"ButtonGroupContainer\",\n      \"ButtonGroupItem\",\n      \"ButtonLink\",\n      \"Card\",\n      \"Checkbox\",\n      \"Code\",\n      \"DatePicker\",\n      \"Divider\",\n      \"Expandable\",\n      \"Flex\",\n      \"FlexItem\",\n      \"GlobalStyles\",\n      \"Grid\",\n      \"GridItem\",\n      \"H1\",\n      \"H2\",\n      \"H3\",\n      \"H4\",\n      \"H5\",\n      \"H6\",\n      \"Header\",\n      \"HeaderSimple\",\n      \"Icon\",\n      \"Loading\",\n      \"Modal\",\n      \"Notification\",\n      \"P\",\n      \"Popover\",\n      \"ProgressBar\",\n      \"Quote\",\n      \"RadioButton\",\n      \"Range\",\n      \"Select\",\n      \"SideNav\",\n      \"Sidebar\",\n      \"SidebarClose\",\n      \"SidebarPanel\",\n      \"SidebarPanels\",\n      \"SidebarTab\",\n      \"SidebarTabs\",\n      \"Small\",\n      \"Spacer\",\n      \"StatusDot\",\n      \"StyledLink\",\n      \"SystemThemeProvider\",\n      \"Tab\",\n      \"Table\",\n      \"TabsContainer\",\n      \"Tag\",\n      \"Text\",\n      \"TextArea\",\n      \"TextInput\",\n      \"Toggle\",\n      \"TreeNav\",\n      \"Typography\",\n      \"VARIANT_COLORS\",\n      \"getOptionByValue\",\n      \"styleLink\",\n      \"systemThemeCollapsed\",\n      \"systemtheme\",\n    ]\n  ");
 });

package/es/hooks/isVisible.js

@@ -1,22 +1,18 @@
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import { useEffect, useRef, useState } from "react";
 export default function useIsVisible() {
-  var _useState = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    isVisible = _useState2[0],
-    setIsVisible = _useState2[1];
-  var ref = useRef();
-  useEffect(function () {
+  const [isVisible, setIsVisible] = useState(false);
+  const ref = useRef();
+  useEffect(() => {
     if (!ref.current) return;
-    var interval = window.setInterval(function () {
+    const interval = window.setInterval(() => {
       if (ref.current) {
-        var currentIsVisible = window.getComputedStyle(ref.current).visibility === "visible";
+        const currentIsVisible = window.getComputedStyle(ref.current).visibility === "visible";
         if (isVisible !== currentIsVisible) {
           setIsVisible(currentIsVisible);
         }
       }
     }, 250);
-    return function () {
+    return () => {
       clearInterval(interval);
     };
   }, [ref, isVisible]);