@uniformdev/design-system 19.0.0 → 19.1.0

package/dist/esm/index.js

@@ -440,7 +440,6 @@ var inputIcon = css2`
   display: flex;
   position: absolute;
   inset: 0 var(--spacing-base) 0 auto;
-  pointer-events: none;
 `;
 var inputWithIcon = css2`
   padding-right: var(--spacing-2xl);
@@ -12895,8 +12894,8 @@ var LimitsBar = ({ current, max, label }) => {
 
 // src/components/LinkList/LinkList.styles.ts
 import { css as css44 } from "@emotion/react";
-var LinkListContainer = css44`
-  padding: var(--spacing-md);
+var LinkListContainer = (padding) => css44`
+  padding: ${padding};
 
   ${mq("sm")} {
     grid-column: last-col / span 1;
@@ -12906,8 +12905,8 @@ var LinkListContainer = css44`
 
 // src/components/LinkList/LinkList.tsx
 import { jsx as jsx57, jsxs as jsxs34 } from "@emotion/react/jsx-runtime";
-var LinkList = ({ title, children, ...props }) => {
-  return /* @__PURE__ */ jsxs34("div", { css: LinkListContainer, ...props, children: [
+var LinkList = ({ title, padding = "var(--spacing-md)", children, ...props }) => {
+  return /* @__PURE__ */ jsxs34("div", { css: LinkListContainer(padding), ...props, children: [
     /* @__PURE__ */ jsx57(Heading, { level: 3, children: title }),
     children
   ] });
@@ -13955,33 +13954,39 @@ var ObjectListItemLoadingText = (textLength) => css59`
   background: var(--gray-300);
   display: block;
   width: ${textLength};
-  height: var(--fs-sm);
+  height: var(--fs-base);
 `;
 var ObjectListItemInlineGroup = css59`
   align-items: center;
+  color: var(--gray-500);
   display: flex;
-  gap: var(--spacing-sm);
+  gap: var(--spacing-base);
+`;
+var ObjectListItemIconTextGroup = css59`
+  align-items: center;
+  display: flex;
+  gap: var(--spacing-xs);
 `;
 var ObjectListItemInlineHeadingGroup = css59`
   justify-content: space-between;
 `;
 var ObjectListItemTitle = css59`
   color: var(--brand-secondary-1);
-  font-size: var(--fs-sm);
+  font-size: var(--fs-base);
+  line-height: 1;
 `;
 var ObjectListItemSmallText = css59`
-  color: var(--brand-secondary-1);
-  font-size: var(--fs-xs);
+  font-size: var(--fs-sm);
   min-width: max-content;
 `;
 var ObjectListKeyText = css59`
   color: var(--gray-400);
-  font-size: var(--fs-xs);
+  font-size: var(--fs-sm);
   text-transform: capitalize;
 `;
 var ObjectListValueText = css59`
   color: var(--gray-500);
-  font-size: var(--fs-xs);
+  font-size: var(--fs-sm);
   text-transform: none;
 `;
 
@@ -14005,11 +14010,11 @@ var ObjectCompositionListItem = forwardRef8(
         /* @__PURE__ */ jsx74("time", { role: "time", dateTime: `${date}`, css: ObjectListItemSmallText, children: formatDate(date) })
       ] }),
       /* @__PURE__ */ jsxs48("div", { css: ObjectListItemInlineGroup, children: [
-        !icon && !componentName ? null : /* @__PURE__ */ jsxs48("div", { css: [ObjectListItemInlineGroup, ObjectListItemSmallText], children: [
+        !icon && !componentName ? null : /* @__PURE__ */ jsxs48("div", { css: [ObjectListItemIconTextGroup, ObjectListItemSmallText], children: [
           !icon ? null : /* @__PURE__ */ jsx74(Icon, { icon, size: "1rem" }),
           !componentName ? null : /* @__PURE__ */ jsx74("span", { children: componentName })
         ] }),
-        !publishStatus ? null : /* @__PURE__ */ jsx74(StatusBullet, { status: publishStatus, size: "sm" })
+        !publishStatus ? null : /* @__PURE__ */ jsx74(StatusBullet, { status: publishStatus })
       ] })
     ] }) });
   }
@@ -14200,7 +14205,7 @@ var SegmentedControl = ({
           Tooltip,
           {
             title: isDisabled || !option.tooltip ? "" : option.tooltip,
-            children: /* @__PURE__ */ jsx76("div", { css: segmentedControlItemStyles, children: /* @__PURE__ */ jsxs50(
+            children: /* @__PURE__ */ jsx76("div", { css: segmentedControlItemStyles, "data-test-id": "container-segmented-control", children: /* @__PURE__ */ jsxs50(
               "label",
               {
                 css: [
@@ -14263,6 +14268,11 @@ var FilterGroup = css63`
   ${InlineGroup}
   justify-content: space-between
 `;
+var FilterGroupTitle = css63`
+  font-weight: var(--fw-bold);
+  font-size: var(--fs-sm);
+  text-transform: uppercase;
+`;
 var GroupLabel = css63`
   font-size: var(--fs-sm);
 `;
@@ -14275,6 +14285,8 @@ var ObjectListContainer = ({
   filterOptions,
   filterValue,
   isLoading,
+  isDisabled,
+  hideControls,
   onSetFilterOption,
   resolveDefaultComponent = (value) => /* @__PURE__ */ jsx78(ObjectCompositionListItem, { ...value }),
   children,
@@ -14288,8 +14300,8 @@ var ObjectListContainer = ({
   }, [list]);
   return /* @__PURE__ */ jsxs52(VerticalRhythm, { ...props, children: [
     /* @__PURE__ */ jsxs52("div", { css: FilterGroup, children: [
-      /* @__PURE__ */ jsx78(Heading, { level: 4, withMarginBottom: false, children: title }),
-      /* @__PURE__ */ jsxs52("div", { css: InlineGroup, children: [
+      /* @__PURE__ */ jsx78("span", { css: FilterGroupTitle, role: "headin", children: title }),
+      hideControls ? null : /* @__PURE__ */ jsxs52("div", { css: InlineGroup, children: [
         /* @__PURE__ */ jsx78("span", { css: GroupLabel, children: "Show" }),
         /* @__PURE__ */ jsx78(
           SegmentedControl,
@@ -14299,7 +14311,7 @@ var ObjectListContainer = ({
             value: filterValue,
             onChange: (e) => onSetFilterOption(e),
             noCheckmark: true,
-            disabled: list.length === 0
+            disabled: isDisabled
           }
         )
       ] })
@@ -15382,6 +15394,8 @@ var Popover = css69`
 import { Fragment as Fragment13, jsx as jsx95, jsxs as jsxs65 } from "@emotion/react/jsx-runtime";
 var Popover2 = ({
   iconColor = "green",
+  icon = "info",
+  iconSize = "1rem",
   buttonText,
   ariaLabel,
   placement = "bottom",
@@ -15390,7 +15404,7 @@ var Popover2 = ({
   const popover = usePopoverState({ placement });
   return /* @__PURE__ */ jsxs65(Fragment13, { children: [
     /* @__PURE__ */ jsxs65(PopoverDisclosure, { ...popover, css: PopoverBtn, title: buttonText, children: [
-      /* @__PURE__ */ jsx95(Icon, { icon: "info", iconColor, size: "1rem" }),
+      /* @__PURE__ */ jsx95(Icon, { icon, iconColor, size: iconSize }),
       /* @__PURE__ */ jsx95("span", { hidden: true, children: buttonText })
     ] }),
     /* @__PURE__ */ jsx95(Portal2, { children: /* @__PURE__ */ jsx95(ReakitPopover, { css: Popover, ...popover, "aria-label": ariaLabel, children }) })

package/dist/index.d.ts

@@ -21019,10 +21019,14 @@ declare const LimitsBar: ({ current, max, label }: LimitsBarProps) => _emotion_r
 type LinkListProps = React$1.HTMLAttributes<HTMLDivElement> & {
     /** sets the title field */
     title: string;
+    /** sets padding value
+     * @default 'var(--spacing-md)'
+     */
+    padding?: string;
     /** (optional) sets react child component */
     children?: React$1.ReactNode;
 };
-declare const LinkList: ({ title, children, ...props }: LinkListProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
+declare const LinkList: ({ title, padding, children, ...props }: LinkListProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
 
 type ScrollableListProps = React$1.HTMLAttributes<HTMLDivElement> & {
     /** (optional) sets the label value */
@@ -21432,13 +21436,17 @@ type ObjectListContainerProps = {
      * @default 'ObjectCompositionListItem'
      */
     resolveDefaultComponent?: (value: ObjectCompositionListItemProps) => React$1.ReactNode;
+    /** sets the disabled state on the segmented control filter options */
+    isDisabled?: boolean;
+    /** sets whether to show or hide the controls */
+    hideControls?: boolean;
     children?: React$1.ReactNode;
 } & React$1.HTMLAttributes<HTMLDivElement>;
 /**
  * @description
  * @example <ObjectListContainer
  */
-declare const ObjectListContainer: ({ title, list, filterOptions, filterValue, isLoading, onSetFilterOption, resolveDefaultComponent, children, ...props }: ObjectListContainerProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
+declare const ObjectListContainer: ({ title, list, filterOptions, filterValue, isLoading, isDisabled, hideControls, onSetFilterOption, resolveDefaultComponent, children, ...props }: ObjectListContainerProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
 
 declare const ObjectListItemLoadingSkeleton: () => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
 
@@ -21786,6 +21794,14 @@ type PopoverProps = PopoverProps$1 & {
      * @default 'green'
      */
     iconColor?: IconColor;
+    /** sets the icon type
+     * @default 'info'
+     */
+    icon?: IconType;
+    /** sets the icon size
+     * @default '1rem'
+     */
+    iconSize?: string;
     /** sets the aria label attribute on the popover */
     ariaLabel?: string;
     /** sets the title attr and text of the button */
@@ -21796,7 +21812,7 @@ type PopoverProps = PopoverProps$1 & {
     placement?: PopoverInitialState['placement'];
     children: ReactNode;
 };
-declare const Popover: ({ iconColor, buttonText, ariaLabel, placement, children, }: PopoverProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
+declare const Popover: ({ iconColor, icon, iconSize, buttonText, ariaLabel, placement, children, }: PopoverProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
 
 type ProgressListItemStatus = 'completed' | 'inProgress' | 'queued';
 type ProgressListProps = React__default.HTMLAttributes<HTMLOListElement> & {

package/dist/index.js

@@ -654,7 +654,6 @@ var inputIcon = import_react4.css`
   display: flex;
   position: absolute;
   inset: 0 var(--spacing-base) 0 auto;
-  pointer-events: none;
 `;
 var inputWithIcon = import_react4.css`
   padding-right: var(--spacing-2xl);
@@ -13105,8 +13104,8 @@ var LimitsBar = ({ current, max, label }) => {
 
 // src/components/LinkList/LinkList.styles.ts
 var import_react57 = require("@emotion/react");
-var LinkListContainer = import_react57.css`
-  padding: var(--spacing-md);
+var LinkListContainer = (padding) => import_react57.css`
+  padding: ${padding};
 
   ${mq("sm")} {
     grid-column: last-col / span 1;
@@ -13116,8 +13115,8 @@ var LinkListContainer = import_react57.css`
 
 // src/components/LinkList/LinkList.tsx
 var import_jsx_runtime56 = require("@emotion/react/jsx-runtime");
-var LinkList = ({ title, children, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { css: LinkListContainer, ...props, children: [
+var LinkList = ({ title, padding = "var(--spacing-md)", children, ...props }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { css: LinkListContainer(padding), ...props, children: [
     /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Heading, { level: 3, children: title }),
     children
   ] });
@@ -14165,33 +14164,39 @@ var ObjectListItemLoadingText = (textLength) => import_react74.css`
   background: var(--gray-300);
   display: block;
   width: ${textLength};
-  height: var(--fs-sm);
+  height: var(--fs-base);
 `;
 var ObjectListItemInlineGroup = import_react74.css`
   align-items: center;
+  color: var(--gray-500);
   display: flex;
-  gap: var(--spacing-sm);
+  gap: var(--spacing-base);
+`;
+var ObjectListItemIconTextGroup = import_react74.css`
+  align-items: center;
+  display: flex;
+  gap: var(--spacing-xs);
 `;
 var ObjectListItemInlineHeadingGroup = import_react74.css`
   justify-content: space-between;
 `;
 var ObjectListItemTitle = import_react74.css`
   color: var(--brand-secondary-1);
-  font-size: var(--fs-sm);
+  font-size: var(--fs-base);
+  line-height: 1;
 `;
 var ObjectListItemSmallText = import_react74.css`
-  color: var(--brand-secondary-1);
-  font-size: var(--fs-xs);
+  font-size: var(--fs-sm);
   min-width: max-content;
 `;
 var ObjectListKeyText = import_react74.css`
   color: var(--gray-400);
-  font-size: var(--fs-xs);
+  font-size: var(--fs-sm);
   text-transform: capitalize;
 `;
 var ObjectListValueText = import_react74.css`
   color: var(--gray-500);
-  font-size: var(--fs-xs);
+  font-size: var(--fs-sm);
   text-transform: none;
 `;
 
@@ -14215,11 +14220,11 @@ var ObjectCompositionListItem = (0, import_react75.forwardRef)(
         /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("time", { role: "time", dateTime: `${date}`, css: ObjectListItemSmallText, children: formatDate(date) })
       ] }),
       /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("div", { css: ObjectListItemInlineGroup, children: [
-        !icon && !componentName ? null : /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("div", { css: [ObjectListItemInlineGroup, ObjectListItemSmallText], children: [
+        !icon && !componentName ? null : /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("div", { css: [ObjectListItemIconTextGroup, ObjectListItemSmallText], children: [
           !icon ? null : /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(Icon, { icon, size: "1rem" }),
           !componentName ? null : /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("span", { children: componentName })
         ] }),
-        !publishStatus ? null : /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(StatusBullet, { status: publishStatus, size: "sm" })
+        !publishStatus ? null : /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(StatusBullet, { status: publishStatus })
       ] })
     ] }) });
   }
@@ -14405,7 +14410,7 @@ var SegmentedControl = ({
           Tooltip,
           {
             title: isDisabled || !option.tooltip ? "" : option.tooltip,
-            children: /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("div", { css: segmentedControlItemStyles, children: /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("div", { css: segmentedControlItemStyles, "data-test-id": "container-segmented-control", children: /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)(
               "label",
               {
                 css: [
@@ -14468,6 +14473,11 @@ var FilterGroup = import_react81.css`
   ${InlineGroup}
   justify-content: space-between
 `;
+var FilterGroupTitle = import_react81.css`
+  font-weight: var(--fw-bold);
+  font-size: var(--fs-sm);
+  text-transform: uppercase;
+`;
 var GroupLabel = import_react81.css`
   font-size: var(--fs-sm);
 `;
@@ -14480,6 +14490,8 @@ var ObjectListContainer = ({
   filterOptions,
   filterValue,
   isLoading,
+  isDisabled,
+  hideControls,
   onSetFilterOption,
   resolveDefaultComponent = (value) => /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(ObjectCompositionListItem, { ...value }),
   children,
@@ -14493,8 +14505,8 @@ var ObjectListContainer = ({
   }, [list]);
   return /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)(VerticalRhythm, { ...props, children: [
     /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)("div", { css: FilterGroup, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(Heading, { level: 4, withMarginBottom: false, children: title }),
-      /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)("div", { css: InlineGroup, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("span", { css: FilterGroupTitle, role: "headin", children: title }),
+      hideControls ? null : /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)("div", { css: InlineGroup, children: [
         /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("span", { css: GroupLabel, children: "Show" }),
         /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
           SegmentedControl,
@@ -14504,7 +14516,7 @@ var ObjectListContainer = ({
             value: filterValue,
             onChange: (e) => onSetFilterOption(e),
             noCheckmark: true,
-            disabled: list.length === 0
+            disabled: isDisabled
           }
         )
       ] })
@@ -15583,6 +15595,8 @@ var Popover = import_react99.css`
 var import_jsx_runtime94 = require("@emotion/react/jsx-runtime");
 var Popover2 = ({
   iconColor = "green",
+  icon = "info",
+  iconSize = "1rem",
   buttonText,
   ariaLabel,
   placement = "bottom",
@@ -15591,7 +15605,7 @@ var Popover2 = ({
   const popover = (0, import_Popover.usePopoverState)({ placement });
   return /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)(import_jsx_runtime94.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)(import_Popover.PopoverDisclosure, { ...popover, css: PopoverBtn, title: buttonText, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(Icon, { icon: "info", iconColor, size: "1rem" }),
+      /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(Icon, { icon, iconColor, size: iconSize }),
       /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("span", { hidden: true, children: buttonText })
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(import_Portal2.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(import_Popover.Popover, { css: Popover, ...popover, "aria-label": ariaLabel, children }) })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniformdev/design-system",
-  "version": "19.0.0",
+  "version": "19.1.0",
   "description": "Uniform design system components",
   "license": "SEE LICENSE IN LICENSE.txt",
   "main": "./dist/index.js",
@@ -22,10 +22,10 @@
     "@storybook/addon-docs": "6.5.16",
     "@storybook/client-api": "6.5.16",
     "@storybook/react": "6.5.16",
-    "@types/react": "18.0.35",
+    "@types/react": "18.0.37",
     "autoprefixer": "10.4.14",
     "hygen": "6.2.11",
-    "postcss": "8.4.21",
+    "postcss": "8.4.23",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "tsup": "6.7.0"
@@ -54,5 +54,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "e104985924b24a8de1d8dcfcca6c9167611adf85"
+  "gitHead": "0a06bc3cbf5a3ef7eb72b7ba237e76df645a4a88"
 }