@nulogy/components 8.4.1 → 8.4.2

package/dist/main.js

@@ -42699,6 +42699,162 @@
     onHidden: function onHidden() {}
   };
 
+  var SummaryContext = /*#__PURE__*/React.createContext(undefined);
+  function useSummaryContext() {
+    var context = React.useContext(SummaryContext);
+
+    if (!context) {
+      throw new Error("Summary compound components cannot be rendered outside the Summary component");
+    }
+
+    return context;
+  }
+  var SummaryContextProvider = function SummaryContextProvider(_ref) {
+    var breakpoint = _ref.breakpoint,
+        children = _ref.children;
+    return /*#__PURE__*/React__default['default'].createElement(SummaryContext.Provider, {
+      value: {
+        breakpoint: breakpoint
+      }
+    }, children);
+  };
+
+  var SummaryWrapper = styled__default['default'](Box).withConfig({
+    displayName: "Summary__SummaryWrapper",
+    componentId: "sc-1hzufqo-0"
+  })(function (_ref) {
+    var _ref2;
+
+    var theme = _ref.theme,
+        breakpoint = _ref.breakpoint;
+    return _ref2 = {
+      display: "flex",
+      background: theme.colors.white,
+      gap: theme.space.x2,
+      paddingTop: theme.space.x1,
+      paddingBottom: theme.space.x1,
+      paddingLeft: theme.space.x2,
+      paddingRight: theme.space.x2,
+      borderRadius: theme.radii.medium,
+      width: "fit-content"
+    }, _ref2["@media (max-width: " + breakpoint + "px)"] = {
+      background: "none",
+      flexFlow: "wrap",
+      padding: 0,
+      paddingTop: theme.space.x2,
+      rowGap: 0
+    }, _ref2;
+  });
+  var DEFAULT_BREAKPOINT = Theme.breakpoints.medium;
+
+  var Summary = function Summary(_a) {
+    var _a$breakpoint = _a.breakpoint,
+        breakpoint = _a$breakpoint === void 0 ? DEFAULT_BREAKPOINT : _a$breakpoint,
+        children = _a.children,
+        rest = __rest(_a, ["breakpoint", "children"]);
+
+    var breakpointPx = pixelDigitsFrom$1(breakpoint);
+    return /*#__PURE__*/React__default['default'].createElement(SummaryContextProvider, {
+      breakpoint: breakpointPx
+    }, /*#__PURE__*/React__default['default'].createElement(SummaryWrapper, Object.assign({
+      breakpoint: breakpointPx
+    }, rest), children));
+  };
+
+  function useMediaQuery(query) {
+    var isUnsupported = typeof window === "undefined" || typeof window.matchMedia === "undefined";
+
+    var getMatches = function getMatches(query) {
+      if (isUnsupported) {
+        return false;
+      }
+
+      return window.matchMedia(query).matches;
+    };
+
+    var _useState = React.useState(getMatches(query)),
+        matches = _useState[0],
+        setMatches = _useState[1];
+
+    function handleChange() {
+      setMatches(getMatches(query));
+    }
+
+    React.useEffect(function () {
+      if (isUnsupported) return;
+      var matchMedia = window.matchMedia(query);
+      handleChange();
+      matchMedia.addEventListener("change", handleChange);
+      return function () {
+        matchMedia.removeEventListener("change", handleChange);
+      };
+    }, [query]);
+    return matches;
+  }
+
+  var SummaryItemWrapper = styled__default['default'](Flex).withConfig({
+    displayName: "SummaryItem__SummaryItemWrapper",
+    componentId: "kqzify-0"
+  })(function (_ref) {
+    var _ref2;
+
+    var theme = _ref.theme,
+        breakpoint = _ref.breakpoint;
+    return _ref2 = {
+      gap: theme.space.half,
+      flexDirection: "column"
+    }, _ref2["@media (max-width: " + breakpoint + "px)"] = {
+      flexDirection: "row"
+    }, _ref2;
+  });
+
+  var SummaryItem = function SummaryItem(_a) {
+    var value = _a.value,
+        status = _a.status,
+        rest = __rest(_a, ["value", "status"]);
+
+    var _useSummaryContext = useSummaryContext(),
+        breakpoint = _useSummaryContext.breakpoint;
+
+    var matches = useMediaQuery("(max-width: " + breakpoint + "px)");
+    delete rest["children"];
+    return /*#__PURE__*/React__default['default'].createElement(SummaryItemWrapper, Object.assign({
+      breakpoint: breakpoint
+    }, rest), /*#__PURE__*/React__default['default'].createElement(Text, {
+      fontWeight: "medium",
+      fontSize: !matches ? "heading4" : undefined
+    }, value), status);
+  };
+
+  var Divider$1 = styled__default['default'](Box).withConfig({
+    displayName: "SummaryDivider__Divider",
+    componentId: "sc-1amkaa8-0"
+  })(function (_ref) {
+    var _ref2;
+
+    var theme = _ref.theme,
+        breakpoint = _ref.breakpoint;
+    return _ref2 = {
+      display: "block",
+      alignSelf: "stretch",
+      width: 1,
+      marginRight: theme.space.x1,
+      marginLeft: theme.space.x1,
+      background: theme.colors.grey
+    }, _ref2["@media (max-width: " + breakpoint + "px)"] = {
+      display: "none"
+    }, _ref2;
+  });
+
+  var SummaryDivider = function SummaryDivider(props) {
+    var _useSummaryContext = useSummaryContext(),
+        breakpoint = _useSummaryContext.breakpoint;
+
+    return /*#__PURE__*/React__default['default'].createElement(Divider$1, Object.assign({
+      breakpoint: pixelDigitsFrom$1(breakpoint)
+    }, props));
+  };
+
   var StatelessNavBarDropdownMenuClass = /*#__PURE__*/function (_React$Component) {
     _inheritsLoose__default['default'](StatelessNavBarDropdownMenuClass, _React$Component);
 
@@ -50749,24 +50905,6 @@
     }, children));
   };
 
-  var useMediaQuery = function useMediaQuery(query) {
-    var _useState = React.useState(window.matchMedia(query).matches),
-        matches = _useState[0],
-        setMatches = _useState[1];
-
-    React.useEffect(function () {
-      var handler = function handler(e) {
-        setMatches(e.matches);
-      };
-
-      window.matchMedia(query).addEventListener("change", handler);
-      return function () {
-        window.removeEventListener("change", handler);
-      };
-    }, []);
-    return matches;
-  };
-
   var Header = function Header(_a) {
     var _b, _c;
 
@@ -51248,6 +51386,9 @@
   exports.SmallNavBar = SmallNavBar;
   exports.SortingTable = SortingTable;
   exports.StatusIndicator = StatusIndicator;
+  exports.Summary = Summary;
+  exports.SummaryDivider = SummaryDivider;
+  exports.SummaryItem = SummaryItem;
   exports.Switch = Switch;
   exports.Switcher = Switcher;
   exports.Tab = Tab;

package/dist/main.module.js

@@ -42673,6 +42673,162 @@ Toast.defaultProps = {
   onHidden: function onHidden() {}
 };
 
+var SummaryContext = /*#__PURE__*/createContext(undefined);
+function useSummaryContext() {
+  var context = useContext(SummaryContext);
+
+  if (!context) {
+    throw new Error("Summary compound components cannot be rendered outside the Summary component");
+  }
+
+  return context;
+}
+var SummaryContextProvider = function SummaryContextProvider(_ref) {
+  var breakpoint = _ref.breakpoint,
+      children = _ref.children;
+  return /*#__PURE__*/React__default.createElement(SummaryContext.Provider, {
+    value: {
+      breakpoint: breakpoint
+    }
+  }, children);
+};
+
+var SummaryWrapper = styled(Box).withConfig({
+  displayName: "Summary__SummaryWrapper",
+  componentId: "sc-1hzufqo-0"
+})(function (_ref) {
+  var _ref2;
+
+  var theme = _ref.theme,
+      breakpoint = _ref.breakpoint;
+  return _ref2 = {
+    display: "flex",
+    background: theme.colors.white,
+    gap: theme.space.x2,
+    paddingTop: theme.space.x1,
+    paddingBottom: theme.space.x1,
+    paddingLeft: theme.space.x2,
+    paddingRight: theme.space.x2,
+    borderRadius: theme.radii.medium,
+    width: "fit-content"
+  }, _ref2["@media (max-width: " + breakpoint + "px)"] = {
+    background: "none",
+    flexFlow: "wrap",
+    padding: 0,
+    paddingTop: theme.space.x2,
+    rowGap: 0
+  }, _ref2;
+});
+var DEFAULT_BREAKPOINT = Theme.breakpoints.medium;
+
+var Summary = function Summary(_a) {
+  var _a$breakpoint = _a.breakpoint,
+      breakpoint = _a$breakpoint === void 0 ? DEFAULT_BREAKPOINT : _a$breakpoint,
+      children = _a.children,
+      rest = __rest(_a, ["breakpoint", "children"]);
+
+  var breakpointPx = pixelDigitsFrom$1(breakpoint);
+  return /*#__PURE__*/React__default.createElement(SummaryContextProvider, {
+    breakpoint: breakpointPx
+  }, /*#__PURE__*/React__default.createElement(SummaryWrapper, Object.assign({
+    breakpoint: breakpointPx
+  }, rest), children));
+};
+
+function useMediaQuery(query) {
+  var isUnsupported = typeof window === "undefined" || typeof window.matchMedia === "undefined";
+
+  var getMatches = function getMatches(query) {
+    if (isUnsupported) {
+      return false;
+    }
+
+    return window.matchMedia(query).matches;
+  };
+
+  var _useState = useState(getMatches(query)),
+      matches = _useState[0],
+      setMatches = _useState[1];
+
+  function handleChange() {
+    setMatches(getMatches(query));
+  }
+
+  useEffect(function () {
+    if (isUnsupported) return;
+    var matchMedia = window.matchMedia(query);
+    handleChange();
+    matchMedia.addEventListener("change", handleChange);
+    return function () {
+      matchMedia.removeEventListener("change", handleChange);
+    };
+  }, [query]);
+  return matches;
+}
+
+var SummaryItemWrapper = styled(Flex).withConfig({
+  displayName: "SummaryItem__SummaryItemWrapper",
+  componentId: "kqzify-0"
+})(function (_ref) {
+  var _ref2;
+
+  var theme = _ref.theme,
+      breakpoint = _ref.breakpoint;
+  return _ref2 = {
+    gap: theme.space.half,
+    flexDirection: "column"
+  }, _ref2["@media (max-width: " + breakpoint + "px)"] = {
+    flexDirection: "row"
+  }, _ref2;
+});
+
+var SummaryItem = function SummaryItem(_a) {
+  var value = _a.value,
+      status = _a.status,
+      rest = __rest(_a, ["value", "status"]);
+
+  var _useSummaryContext = useSummaryContext(),
+      breakpoint = _useSummaryContext.breakpoint;
+
+  var matches = useMediaQuery("(max-width: " + breakpoint + "px)");
+  delete rest["children"];
+  return /*#__PURE__*/React__default.createElement(SummaryItemWrapper, Object.assign({
+    breakpoint: breakpoint
+  }, rest), /*#__PURE__*/React__default.createElement(Text, {
+    fontWeight: "medium",
+    fontSize: !matches ? "heading4" : undefined
+  }, value), status);
+};
+
+var Divider$1 = styled(Box).withConfig({
+  displayName: "SummaryDivider__Divider",
+  componentId: "sc-1amkaa8-0"
+})(function (_ref) {
+  var _ref2;
+
+  var theme = _ref.theme,
+      breakpoint = _ref.breakpoint;
+  return _ref2 = {
+    display: "block",
+    alignSelf: "stretch",
+    width: 1,
+    marginRight: theme.space.x1,
+    marginLeft: theme.space.x1,
+    background: theme.colors.grey
+  }, _ref2["@media (max-width: " + breakpoint + "px)"] = {
+    display: "none"
+  }, _ref2;
+});
+
+var SummaryDivider = function SummaryDivider(props) {
+  var _useSummaryContext = useSummaryContext(),
+      breakpoint = _useSummaryContext.breakpoint;
+
+  return /*#__PURE__*/React__default.createElement(Divider$1, Object.assign({
+    breakpoint: pixelDigitsFrom$1(breakpoint)
+  }, props));
+};
+
 var StatelessNavBarDropdownMenuClass = /*#__PURE__*/function (_React$Component) {
   _inheritsLoose$2(StatelessNavBarDropdownMenuClass, _React$Component);
 
@@ -50723,24 +50879,6 @@ var ApplicationFrame = function ApplicationFrame(_a) {
   }, children));
 };
 
-var useMediaQuery = function useMediaQuery(query) {
-  var _useState = useState(window.matchMedia(query).matches),
-      matches = _useState[0],
-      setMatches = _useState[1];
-
-  useEffect(function () {
-    var handler = function handler(e) {
-      setMatches(e.matches);
-    };
-
-    window.matchMedia(query).addEventListener("change", handler);
-    return function () {
-      window.removeEventListener("change", handler);
-    };
-  }, []);
-  return matches;
-};
-
 var Header = function Header(_a) {
   var _b, _c;
 
@@ -51146,4 +51284,4 @@ var SortingTable = function SortingTable(_a) {
   }, props));
 };
 
-export { ALL_NDS_LOCALES, Alert, AnimatedBox, ApplicationFrame, AsyncSelect, Box, BrandLogoContainer, NavBar as BrandedNavBar, Branding, Breadcrumbs, Button, ButtonGroup, Card, CardSet, Checkbox, CheckboxGroup, ControlIcon, DangerButton, DatePicker, DateRange, DesktopMenu, Divider, DropdownButton, DropdownItem, DropdownLink, DropdownMenu, DropdownText, EnvironmentBanner, Field, FieldLabel, Fieldset, Flex, Form, FormSection, Header, Heading1, Heading2, Heading3, Heading4, HelpText, Icon, IconicButton, InlineIcon, InlineValidation, Input$1 as Input, Link, List, ListItem, LoadingAnimation, MenuTrigger, Modal, NDSProvider, NavBar$1 as NavBar, NavBarBackground, Overlay, Page, Pagination, PrimaryButton, QuietButton, Radio, RadioGroup, RangeContainer, RequirementText, ReactSelect as Select, SelectClearIndicator, SelectContainer$1 as SelectContainer, SelectControl, SelectDropdownIndicator, SelectInput, SelectMenu, SelectMultiValue, SelectOption, Sidebar, SmallNavBar, SortingTable, StatusIndicator, Switch, Switcher, Tab, Table, Tabs, Text, Textarea, TimePicker, TimeRange, Toast, ToggleComponent as Toggle, Tooltip, TruncatedText, addStyledProps, Theme as theme, useWindowDimensions };
+export { ALL_NDS_LOCALES, Alert, AnimatedBox, ApplicationFrame, AsyncSelect, Box, BrandLogoContainer, NavBar as BrandedNavBar, Branding, Breadcrumbs, Button, ButtonGroup, Card, CardSet, Checkbox, CheckboxGroup, ControlIcon, DangerButton, DatePicker, DateRange, DesktopMenu, Divider, DropdownButton, DropdownItem, DropdownLink, DropdownMenu, DropdownText, EnvironmentBanner, Field, FieldLabel, Fieldset, Flex, Form, FormSection, Header, Heading1, Heading2, Heading3, Heading4, HelpText, Icon, IconicButton, InlineIcon, InlineValidation, Input$1 as Input, Link, List, ListItem, LoadingAnimation, MenuTrigger, Modal, NDSProvider, NavBar$1 as NavBar, NavBarBackground, Overlay, Page, Pagination, PrimaryButton, QuietButton, Radio, RadioGroup, RangeContainer, RequirementText, ReactSelect as Select, SelectClearIndicator, SelectContainer$1 as SelectContainer, SelectControl, SelectDropdownIndicator, SelectInput, SelectMenu, SelectMultiValue, SelectOption, Sidebar, SmallNavBar, SortingTable, StatusIndicator, Summary, SummaryDivider, SummaryItem, Switch, Switcher, Tab, Table, Tabs, Text, Textarea, TimePicker, TimeRange, Toast, ToggleComponent as Toggle, Tooltip, TruncatedText, addStyledProps, Theme as theme, useWindowDimensions };

package/dist/src/Layout/Header.story.d.ts

@@ -11,6 +11,9 @@ declare const _default: {
     title: string;
     parameters: {
         layout: string;
+        chromatic: {
+            viewports: number[];
+        };
     };
 };
 export default _default;

package/dist/src/Summary/Summary.story.d.ts

@@ -3,14 +3,5 @@ export declare function Default(): JSX.Element;
 export declare function WithMainInfoOnly(): JSX.Element;
 declare const _default: {
     title: string;
-    parameters: {
-        backgrounds: {
-            default: string;
-            values: {
-                name: string;
-                value: string;
-            }[];
-        };
-    };
 };
 export default _default;

package/dist/src/Summary/index.d.ts

@@ -1 +1,3 @@
 export { default as Summary } from "./Summary";
+export { default as SummaryItem } from "./SummaryItem";
+export { default as SummaryDivider } from "./SummaryDivider";

package/dist/src/hooks/useMediaQuery/index.d.ts

@@ -0,0 +1,2 @@
+import useMediaQuery from "./useMediaQuery";
+export default useMediaQuery;

package/dist/src/hooks/useMediaQuery/useMediaQuery.d.ts

@@ -0,0 +1,2 @@
+declare function useMediaQuery(query: string): boolean;
+export default useMediaQuery;

package/dist/src/index.d.ts

@@ -43,6 +43,7 @@ export { Breadcrumbs } from "./Breadcrumbs";
 export { ALL_NDS_LOCALES } from "./locales.const";
 export { TruncatedText } from "./TruncatedText";
 export { Toast } from "./Toast";
+export { Summary, SummaryItem, SummaryDivider } from "./Summary/index";
 export { BrandedNavBar, MenuTrigger, EnvironmentBanner, NavBarBackground, BrandLogoContainer, DesktopMenu, SmallNavBar, } from "./BrandedNavBar";
 export type { MenuTriggerProps, EnvironmentBannerProps, NavBarBackgroundProps, BrandLogoContainerProps, DesktopMenuProps, SmallNavBarProps, RenderMenuButtonProps, } from "./BrandedNavBar";
 export { AsyncSelect } from "./AsyncSelect";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nulogy/components",
-  "version": "8.4.1",
+  "version": "8.4.2",
   "description": "Component library for the Nulogy Design System - http://nulogy.design",
   "private": false,
   "publishConfig": {

package/dist/src/hooks/useMediaQuery.d.ts

@@ -1,2 +0,0 @@
-declare const useMediaQuery: (query: string) => boolean;
-export default useMediaQuery;