@nulogy/components 12.2.0 → 12.2.1

package/dist/main.js

@@ -45012,6 +45012,198 @@
       }, props)));
     });
 
+    var DescriptionListContext = /*#__PURE__*/React__default["default"].createContext({});
+    var useDescriptionListContext = function useDescriptionListContext() {
+      return React__default["default"].useContext(DescriptionListContext);
+    };
+    function DescriptionListProvider(_a) {
+      var children = _a.children,
+          config = __rest$3(_a, ["children"]);
+
+      return /*#__PURE__*/React__default["default"].createElement(DescriptionListContext.Provider, {
+        value: Object.assign({}, config)
+      }, children);
+    }
+
+    function DescriptionList(_ref) {
+      var _ref$descriptionTermM = _ref.descriptionTermMaxWidth,
+          descriptionTermMaxWidth = _ref$descriptionTermM === void 0 ? "50%" : _ref$descriptionTermM,
+          _ref$layout = _ref.layout,
+          layout = _ref$layout === void 0 ? "auto" : _ref$layout,
+          _ref$showDivider = _ref.showDivider,
+          showDivider = _ref$showDivider === void 0 ? false : _ref$showDivider,
+          _ref$density = _ref.density,
+          density = _ref$density === void 0 ? "medium" : _ref$density,
+          _ref$fontSize = _ref.fontSize,
+          fontSize = _ref$fontSize === void 0 ? "medium" : _ref$fontSize,
+          _ref$lineHeight = _ref.lineHeight,
+          lineHeight = _ref$lineHeight === void 0 ? "base" : _ref$lineHeight,
+          _ref$autoLayoutBreakp = _ref.autoLayoutBreakpoint,
+          autoLayoutBreakpoint = _ref$autoLayoutBreakp === void 0 ? "640px" : _ref$autoLayoutBreakp,
+          children = _ref.children;
+      return /*#__PURE__*/React__default["default"].createElement(DescriptionListProvider, {
+        descriptionTermMaxWidth: descriptionTermMaxWidth,
+        layout: layout,
+        showDivider: showDivider,
+        density: density,
+        fontSize: fontSize,
+        lineHeight: lineHeight,
+        autoLayoutBreakpoint: autoLayoutBreakpoint
+      }, /*#__PURE__*/React__default["default"].createElement(DescriptionListContainer, null, /*#__PURE__*/React__default["default"].createElement(StyledDescriptionList, null, children)));
+    }
+    var DescriptionListContainer = styled__default["default"].div.withConfig({
+      displayName: "DescriptionList__DescriptionListContainer",
+      componentId: "sc-11s88xm-0"
+    })({
+      containerType: "inline-size",
+      width: "100%"
+    });
+    var StyledDescriptionList = styled__default["default"].dl.withConfig({
+      displayName: "DescriptionList__StyledDescriptionList",
+      componentId: "sc-11s88xm-1"
+    })(function (_ref2) {
+      var _Object$assign;
+
+      var theme = _ref2.theme;
+
+      var _a, _b;
+
+      var _useDescriptionListCo = useDescriptionListContext(),
+          descriptionTermMaxWidth = _useDescriptionListCo.descriptionTermMaxWidth,
+          layout = _useDescriptionListCo.layout,
+          fontSize = _useDescriptionListCo.fontSize,
+          lineHeight = _useDescriptionListCo.lineHeight,
+          autoLayoutBreakpoint = _useDescriptionListCo.autoLayoutBreakpoint;
+
+      return Object.assign(Object.assign(Object.assign({
+        margin: 0,
+        display: "grid",
+        fontSize: (_a = theme.fontSizes[fontSize]) !== null && _a !== void 0 ? _a : theme.fontSizes.medium,
+        lineHeight: (_b = theme.lineHeights[lineHeight]) !== null && _b !== void 0 ? _b : theme.lineHeights.base
+      }, layout === "inline" && {
+        gridTemplateColumns: "minmax(0, " + descriptionTermMaxWidth + ") auto"
+      }), (layout === "stacked" || layout === "auto") && {
+        gridTemplateColumns: "1fr"
+      }), (_Object$assign = {}, _Object$assign["" + Link] = {
+        fontSize: "inherit",
+        lineHeight: "inherit"
+      }, _Object$assign["@container (min-width: " + autoLayoutBreakpoint + ")"] = Object.assign({}, layout === "auto" && {
+        gridTemplateColumns: "minmax(0, min(50%, " + descriptionTermMaxWidth + ")) auto"
+      }), _Object$assign));
+    });
+
+    var DescriptionTerm = styled.styled.dt.withConfig({
+      displayName: "DescriptionTerm",
+      componentId: "sc-fbwp2v-0"
+    })(function (_ref) {
+      var _Object$assign;
+
+      var theme = _ref.theme;
+
+      var _useDescriptionListCo = useDescriptionListContext(),
+          showDivider = _useDescriptionListCo.showDivider,
+          density = _useDescriptionListCo.density,
+          layout = _useDescriptionListCo.layout,
+          autoLayoutBreakpoint = _useDescriptionListCo.autoLayoutBreakpoint;
+
+      return Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({
+        // narrow stuff + non-auto layout
+        gridColumnStart: 1,
+        color: theme.colors.midGrey,
+        paddingLeft: theme.space.none,
+        paddingRight: theme.space.none
+      }, layout !== "inline" && {
+        paddingBottom: theme.space.none
+      }), density === "compact" && Object.assign({
+        paddingTop: theme.space.x0_25
+      }, layout === "inline" && {
+        paddingBottom: theme.space.x0_25
+      })), density === "medium" && Object.assign({
+        paddingTop: theme.space.x0_75
+      }, layout === "inline" && {
+        paddingBottom: theme.space.x0_75
+      })), density === "relaxed" && Object.assign({
+        paddingTop: theme.space.x1_5,
+        paddingBottom: theme.space.x0_25
+      }, layout === "inline" && {
+        paddingBottom: theme.space.x1_5
+      })), showDivider && {
+        borderTopWidth: "1px",
+        borderTopStyle: "solid",
+        borderTopColor: theme.colors.lightGrey
+      }), (_Object$assign = {
+        "&:first-child": {
+          border: "none"
+        }
+      }, _Object$assign["@container (min-width: " + autoLayoutBreakpoint + ")"] = Object.assign(Object.assign(Object.assign(Object.assign({}, showDivider && layout !== "stacked" && {
+        borderTopWidth: "1px",
+        borderTopStyle: "solid",
+        borderTopColor: theme.colors.lightGrey
+      }), density === "compact" && layout !== "stacked" && {
+        paddingBottom: theme.space.x0_25
+      }), density === "medium" && layout !== "stacked" && {
+        paddingBottom: theme.space.x0_75
+      }), density === "relaxed" && layout !== "stacked" && {
+        paddingBottom: theme.space.x1_5
+      }), _Object$assign));
+    });
+
+    var DescriptionDetails = styled.styled.dd.withConfig({
+      displayName: "DescriptionDetails",
+      componentId: "sc-m5zvn4-0"
+    })(function (_ref) {
+      var _Object$assign;
+
+      var theme = _ref.theme;
+
+      var _useDescriptionListCo = useDescriptionListContext(),
+          autoLayoutBreakpoint = _useDescriptionListCo.autoLayoutBreakpoint,
+          showDivider = _useDescriptionListCo.showDivider,
+          density = _useDescriptionListCo.density,
+          layout = _useDescriptionListCo.layout;
+
+      return Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({
+        // narrow stuff + non-auto layout
+        margin: 0,
+        color: theme.colors.black,
+        paddingLeft: theme.space.none,
+        paddingRight: theme.space.none
+      }, layout !== "inline" && {
+        paddingTop: theme.space.none
+      }), density === "compact" && Object.assign({
+        paddingBottom: theme.space.x0_25
+      }, layout === "inline" && {
+        paddingTop: theme.space.x0_25
+      })), density === "medium" && Object.assign({
+        paddingBottom: theme.space.x0_75
+      }, layout === "inline" && {
+        paddingTop: theme.space.x0_75
+      })), density === "relaxed" && Object.assign({
+        paddingBottom: theme.space.x1_5,
+        paddingTop: theme.space.x0_25
+      }, layout === "inline" && {
+        paddingTop: theme.space.x1_5
+      })), showDivider && layout === "inline" && {
+        borderTopWidth: "1px",
+        borderTopStyle: "solid",
+        borderTopColor: theme.colors.lightGrey
+      }), (_Object$assign = {
+        "&:nth-child(2)": {
+          border: "none"
+        }
+      }, _Object$assign["@container (min-width: " + autoLayoutBreakpoint + ")"] = Object.assign(Object.assign(Object.assign(Object.assign({}, showDivider && layout !== "stacked" && {
+        borderTopWidth: "1px",
+        borderTopStyle: "solid",
+        borderTopColor: theme.colors.lightGrey
+      }), density === "compact" && layout !== "stacked" && {
+        paddingTop: theme.space.x0_25
+      }), density === "medium" && layout !== "stacked" && {
+        paddingTop: theme.space.x0_75
+      }), density === "relaxed" && layout !== "stacked" && {
+        paddingTop: theme.space.x1_5
+      }), _Object$assign));
+    });
+
     var Divider$1 = styled__default["default"].hr.withConfig({
       displayName: "Divider",
       componentId: "sc-1r789ib-0"
@@ -54930,6 +55122,9 @@
     exports.DangerButton = DangerButton;
     exports.DatePicker = DatePicker;
     exports.DateRange = DateRange;
+    exports.DescriptionDetails = DescriptionDetails;
+    exports.DescriptionList = DescriptionList;
+    exports.DescriptionTerm = DescriptionTerm;
     exports.DesktopMenu = DesktopMenu;
     exports.Divider = Divider$1;
     exports.DropdownButton = DropdownButton;

package/dist/main.module.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import React__default, { createContext, useContext, useRef, useEffect, createElement, useLayoutEffect, useCallback, useMemo, forwardRef, Fragment, Component as Component$1, useState, cloneElement, Children, isValidElement, PureComponent, useImperativeHandle } from 'react';
-import styled, { useTheme, createGlobalStyle, ThemeContext as ThemeContext$1, StyleSheetManager, ThemeProvider } from 'styled-components';
+import styled, { useTheme, createGlobalStyle, styled as styled$1, ThemeContext as ThemeContext$1, StyleSheetManager, ThemeProvider } from 'styled-components';
 import assign$1 from 'object-assign';
 import icons from '@nulogy/icons';
 import _extends$5 from '@babel/runtime/helpers/extends';
@@ -44995,6 +44995,198 @@ var DateRange = /*#__PURE__*/forwardRef(function (_a, ref) {
   }, props)));
 });
 
+var DescriptionListContext = /*#__PURE__*/React__default.createContext({});
+var useDescriptionListContext = function useDescriptionListContext() {
+  return React__default.useContext(DescriptionListContext);
+};
+function DescriptionListProvider(_a) {
+  var children = _a.children,
+      config = __rest$3(_a, ["children"]);
+
+  return /*#__PURE__*/React__default.createElement(DescriptionListContext.Provider, {
+    value: Object.assign({}, config)
+  }, children);
+}
+
+function DescriptionList(_ref) {
+  var _ref$descriptionTermM = _ref.descriptionTermMaxWidth,
+      descriptionTermMaxWidth = _ref$descriptionTermM === void 0 ? "50%" : _ref$descriptionTermM,
+      _ref$layout = _ref.layout,
+      layout = _ref$layout === void 0 ? "auto" : _ref$layout,
+      _ref$showDivider = _ref.showDivider,
+      showDivider = _ref$showDivider === void 0 ? false : _ref$showDivider,
+      _ref$density = _ref.density,
+      density = _ref$density === void 0 ? "medium" : _ref$density,
+      _ref$fontSize = _ref.fontSize,
+      fontSize = _ref$fontSize === void 0 ? "medium" : _ref$fontSize,
+      _ref$lineHeight = _ref.lineHeight,
+      lineHeight = _ref$lineHeight === void 0 ? "base" : _ref$lineHeight,
+      _ref$autoLayoutBreakp = _ref.autoLayoutBreakpoint,
+      autoLayoutBreakpoint = _ref$autoLayoutBreakp === void 0 ? "640px" : _ref$autoLayoutBreakp,
+      children = _ref.children;
+  return /*#__PURE__*/React__default.createElement(DescriptionListProvider, {
+    descriptionTermMaxWidth: descriptionTermMaxWidth,
+    layout: layout,
+    showDivider: showDivider,
+    density: density,
+    fontSize: fontSize,
+    lineHeight: lineHeight,
+    autoLayoutBreakpoint: autoLayoutBreakpoint
+  }, /*#__PURE__*/React__default.createElement(DescriptionListContainer, null, /*#__PURE__*/React__default.createElement(StyledDescriptionList, null, children)));
+}
+var DescriptionListContainer = styled.div.withConfig({
+  displayName: "DescriptionList__DescriptionListContainer",
+  componentId: "sc-11s88xm-0"
+})({
+  containerType: "inline-size",
+  width: "100%"
+});
+var StyledDescriptionList = styled.dl.withConfig({
+  displayName: "DescriptionList__StyledDescriptionList",
+  componentId: "sc-11s88xm-1"
+})(function (_ref2) {
+  var _Object$assign;
+
+  var theme = _ref2.theme;
+
+  var _a, _b;
+
+  var _useDescriptionListCo = useDescriptionListContext(),
+      descriptionTermMaxWidth = _useDescriptionListCo.descriptionTermMaxWidth,
+      layout = _useDescriptionListCo.layout,
+      fontSize = _useDescriptionListCo.fontSize,
+      lineHeight = _useDescriptionListCo.lineHeight,
+      autoLayoutBreakpoint = _useDescriptionListCo.autoLayoutBreakpoint;
+
+  return Object.assign(Object.assign(Object.assign({
+    margin: 0,
+    display: "grid",
+    fontSize: (_a = theme.fontSizes[fontSize]) !== null && _a !== void 0 ? _a : theme.fontSizes.medium,
+    lineHeight: (_b = theme.lineHeights[lineHeight]) !== null && _b !== void 0 ? _b : theme.lineHeights.base
+  }, layout === "inline" && {
+    gridTemplateColumns: "minmax(0, " + descriptionTermMaxWidth + ") auto"
+  }), (layout === "stacked" || layout === "auto") && {
+    gridTemplateColumns: "1fr"
+  }), (_Object$assign = {}, _Object$assign["" + Link] = {
+    fontSize: "inherit",
+    lineHeight: "inherit"
+  }, _Object$assign["@container (min-width: " + autoLayoutBreakpoint + ")"] = Object.assign({}, layout === "auto" && {
+    gridTemplateColumns: "minmax(0, min(50%, " + descriptionTermMaxWidth + ")) auto"
+  }), _Object$assign));
+});
+
+var DescriptionTerm = styled$1.dt.withConfig({
+  displayName: "DescriptionTerm",
+  componentId: "sc-fbwp2v-0"
+})(function (_ref) {
+  var _Object$assign;
+
+  var theme = _ref.theme;
+
+  var _useDescriptionListCo = useDescriptionListContext(),
+      showDivider = _useDescriptionListCo.showDivider,
+      density = _useDescriptionListCo.density,
+      layout = _useDescriptionListCo.layout,
+      autoLayoutBreakpoint = _useDescriptionListCo.autoLayoutBreakpoint;
+
+  return Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({
+    // narrow stuff + non-auto layout
+    gridColumnStart: 1,
+    color: theme.colors.midGrey,
+    paddingLeft: theme.space.none,
+    paddingRight: theme.space.none
+  }, layout !== "inline" && {
+    paddingBottom: theme.space.none
+  }), density === "compact" && Object.assign({
+    paddingTop: theme.space.x0_25
+  }, layout === "inline" && {
+    paddingBottom: theme.space.x0_25
+  })), density === "medium" && Object.assign({
+    paddingTop: theme.space.x0_75
+  }, layout === "inline" && {
+    paddingBottom: theme.space.x0_75
+  })), density === "relaxed" && Object.assign({
+    paddingTop: theme.space.x1_5,
+    paddingBottom: theme.space.x0_25
+  }, layout === "inline" && {
+    paddingBottom: theme.space.x1_5
+  })), showDivider && {
+    borderTopWidth: "1px",
+    borderTopStyle: "solid",
+    borderTopColor: theme.colors.lightGrey
+  }), (_Object$assign = {
+    "&:first-child": {
+      border: "none"
+    }
+  }, _Object$assign["@container (min-width: " + autoLayoutBreakpoint + ")"] = Object.assign(Object.assign(Object.assign(Object.assign({}, showDivider && layout !== "stacked" && {
+    borderTopWidth: "1px",
+    borderTopStyle: "solid",
+    borderTopColor: theme.colors.lightGrey
+  }), density === "compact" && layout !== "stacked" && {
+    paddingBottom: theme.space.x0_25
+  }), density === "medium" && layout !== "stacked" && {
+    paddingBottom: theme.space.x0_75
+  }), density === "relaxed" && layout !== "stacked" && {
+    paddingBottom: theme.space.x1_5
+  }), _Object$assign));
+});
+
+var DescriptionDetails = styled$1.dd.withConfig({
+  displayName: "DescriptionDetails",
+  componentId: "sc-m5zvn4-0"
+})(function (_ref) {
+  var _Object$assign;
+
+  var theme = _ref.theme;
+
+  var _useDescriptionListCo = useDescriptionListContext(),
+      autoLayoutBreakpoint = _useDescriptionListCo.autoLayoutBreakpoint,
+      showDivider = _useDescriptionListCo.showDivider,
+      density = _useDescriptionListCo.density,
+      layout = _useDescriptionListCo.layout;
+
+  return Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({
+    // narrow stuff + non-auto layout
+    margin: 0,
+    color: theme.colors.black,
+    paddingLeft: theme.space.none,
+    paddingRight: theme.space.none
+  }, layout !== "inline" && {
+    paddingTop: theme.space.none
+  }), density === "compact" && Object.assign({
+    paddingBottom: theme.space.x0_25
+  }, layout === "inline" && {
+    paddingTop: theme.space.x0_25
+  })), density === "medium" && Object.assign({
+    paddingBottom: theme.space.x0_75
+  }, layout === "inline" && {
+    paddingTop: theme.space.x0_75
+  })), density === "relaxed" && Object.assign({
+    paddingBottom: theme.space.x1_5,
+    paddingTop: theme.space.x0_25
+  }, layout === "inline" && {
+    paddingTop: theme.space.x1_5
+  })), showDivider && layout === "inline" && {
+    borderTopWidth: "1px",
+    borderTopStyle: "solid",
+    borderTopColor: theme.colors.lightGrey
+  }), (_Object$assign = {
+    "&:nth-child(2)": {
+      border: "none"
+    }
+  }, _Object$assign["@container (min-width: " + autoLayoutBreakpoint + ")"] = Object.assign(Object.assign(Object.assign(Object.assign({}, showDivider && layout !== "stacked" && {
+    borderTopWidth: "1px",
+    borderTopStyle: "solid",
+    borderTopColor: theme.colors.lightGrey
+  }), density === "compact" && layout !== "stacked" && {
+    paddingTop: theme.space.x0_25
+  }), density === "medium" && layout !== "stacked" && {
+    paddingTop: theme.space.x0_75
+  }), density === "relaxed" && layout !== "stacked" && {
+    paddingTop: theme.space.x1_5
+  }), _Object$assign));
+});
+
 var Divider$1 = styled.hr.withConfig({
   displayName: "Divider",
   componentId: "sc-1r789ib-0"
@@ -54890,4 +55082,4 @@ var TruncatedText = function TruncatedText(_a) {
   }, props), children);
 };
 
-export { ALL_NDS_LOCALES, Alert$1 as Alert, AnimatedBox, ApplicationFrame, AsyncSelect, Banner, BottomSheet, BottomSheetParts, Box, BrandLogoContainer, NavBar as BrandedNavBar, Branding, Breadcrumbs, Button, ButtonGroup, Card, CardSet, Checkbox, CheckboxGroup, ControlIcon, DangerButton, DatePicker, DateRange, DesktopMenu, Divider$1 as Divider, DropdownButton, DropdownItem, DropdownLink, DropdownMenu, DropdownText, EnvironmentBanner, Field, FieldLabel, Fieldset, Flex, Form, FormSection, Header$1 as Header, Heading1, Heading2, Heading3, Heading4, HelpText$1 as HelpText, Icon, IconicButton, InlineIcon, InlineValidation, Input, Link, List, ListItem, LoadingAnimation, MenuTrigger, Modal, NDSProvider, NavBarBackground, NotificationTypes, Overlay$1 as Overlay, Page, Pagination, PrimaryButton, QuietButton, Radio, RadioGroup, RangeContainer, RequirementText, ReactSelect as Select, SelectClearIndicator, SelectContainer, SelectControl, SelectDropdownIndicator, SelectInput, SelectMenu, SelectMultiValue, SelectOption$1 as SelectOption, Sidebar, SmallNavBar, SortingTable, StatusIndicator, StatusIndicatorValues, Summary, SummaryDivider, SummaryItem, Switch$1 as Switch, Switcher, Tab, Table, Tabs, Text, Textarea, TimePicker, TimeRange, Toast, ToastContainer, ToggleComponent as Toggle, Tooltip, TopBar, TruncatedText, addStyledProps, legacy as desktop, phone, tablet, themes, toast, useMediaQuery, useWindowDimensions };
+export { ALL_NDS_LOCALES, Alert$1 as Alert, AnimatedBox, ApplicationFrame, AsyncSelect, Banner, BottomSheet, BottomSheetParts, Box, BrandLogoContainer, NavBar as BrandedNavBar, Branding, Breadcrumbs, Button, ButtonGroup, Card, CardSet, Checkbox, CheckboxGroup, ControlIcon, DangerButton, DatePicker, DateRange, DescriptionDetails, DescriptionList, DescriptionTerm, DesktopMenu, Divider$1 as Divider, DropdownButton, DropdownItem, DropdownLink, DropdownMenu, DropdownText, EnvironmentBanner, Field, FieldLabel, Fieldset, Flex, Form, FormSection, Header$1 as Header, Heading1, Heading2, Heading3, Heading4, HelpText$1 as HelpText, Icon, IconicButton, InlineIcon, InlineValidation, Input, Link, List, ListItem, LoadingAnimation, MenuTrigger, Modal, NDSProvider, NavBarBackground, NotificationTypes, Overlay$1 as Overlay, Page, Pagination, PrimaryButton, QuietButton, Radio, RadioGroup, RangeContainer, RequirementText, ReactSelect as Select, SelectClearIndicator, SelectContainer, SelectControl, SelectDropdownIndicator, SelectInput, SelectMenu, SelectMultiValue, SelectOption$1 as SelectOption, Sidebar, SmallNavBar, SortingTable, StatusIndicator, StatusIndicatorValues, Summary, SummaryDivider, SummaryItem, Switch$1 as Switch, Switcher, Tab, Table, Tabs, Text, Textarea, TimePicker, TimeRange, Toast, ToastContainer, ToggleComponent as Toggle, Tooltip, TopBar, TruncatedText, addStyledProps, legacy as desktop, phone, tablet, themes, toast, useMediaQuery, useWindowDimensions };

package/dist/src/index.d.ts

@@ -15,6 +15,7 @@ export { Card, CardSet } from "./Card";
 export { Checkbox, CheckboxGroup } from "./Checkbox";
 export { DatePicker } from "./DatePicker";
 export { DateRange } from "./DateRange";
+export { DescriptionDetails, DescriptionList, DescriptionTerm } from "./DescriptionList";
 export { Divider } from "./Divider";
 export { DropdownButton, DropdownItem, DropdownLink, DropdownMenu, DropdownText } from "./DropdownMenu";
 export { FieldLabel, HelpText, RequirementText } from "./FieldLabel";

package/package.json

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