@spaced-out/ui-design-system 0.3.42 → 0.3.44

package/.cspell/custom-words.txt

@@ -57,6 +57,7 @@ Jangid
 jscodeshift
 Kamchatskiy
 Kemshetty
+keshavsensehq
 khanacademy
 Kiritimati
 Kosrae

package/.github/workflows/pages.yml

@@ -35,7 +35,7 @@ jobs:
         uses: actions/checkout@v4
       - uses: actions/setup-node@v4
         with:
-          node-version: '18.20.5'
+          node-version: '20.19.2'
       - name: Install and Build 🔧
         # Install npm packages and build the Storybook files
         run: |

package/.github/workflows/publish_to_npm.yml

@@ -22,7 +22,7 @@ jobs:
       - name: Check Permissions
         id: check-permissions
         env:
-          ALLOWED_USERS: superrover, Anant-Raj, diwakersurya, ashwini-sensehq, vish-sah, VishalBarnawal, sanskar-s, VivekJangid, sharad-kushwah, Swatantramishra1, bhatiarush27, darsh-mecwan-sense
+          ALLOWED_USERS: superrover, Anant-Raj, diwakersurya, ashwini-sensehq, vish-sah, VishalBarnawal, sanskar-s, VivekJangid, sharad-kushwah, Swatantramishra1, bhatiarush27, darsh-mecwan-sense, keshavsensehq
         if: ${{ !contains(env.ALLOWED_USERS, github.actor) }}
         run: |
           echo "You don't have correct permissions to do this release"
@@ -36,21 +36,11 @@ jobs:
         with:
           token: ${{ secrets.NPM_PUBLISH_USER_ACCESS_TOKEN }}
           fetch-depth: '0'
-
-      # Note(Nishant): Possible cleanup required Setup Node 18 for the base npm package
       - name: Setup Node.js @18
         uses: actions/setup-node@v4
         with:
           registry-url: https://registry.npmjs.org/
-          node-version: '18.20.5'
-
-      # Note(Nishant): Possible cleanup required Setup Node 20 for the dts-generator
-      # We already pin the node versions with volta so this should be fine(but not ideal)
-      - name: Setup Node.js @20
-        uses: actions/setup-node@v4
-        with:
-          registry-url: https://registry.npmjs.org/
-          node-version: '20.9.0'
+          node-version: '20.19.2'
 
       # -------------------------------------------------------------------------------------
       # Note(Nishant): Install isolated dependencies for app and the DTS generator tool

package/.github/workflows/pull_request_checks.yml

@@ -19,21 +19,11 @@ jobs:
     steps:
       - name: Checkout code
         uses: actions/checkout@v3
-
-      # Note(Nishant): Possible cleanup required Setup Node 18 for the base npm package
       - name: Setup Node.js @18
         uses: actions/setup-node@v4
         with:
           registry-url: https://registry.npmjs.org/
-          node-version: '18.20.5'
-
-      # Note(Nishant): Possible cleanup required Setup Node 20 for the dts-generator
-      # We already pin the node versions with volta so this should be fine(but not ideal)
-      - name: Setup Node.js @20
-        uses: actions/setup-node@v4
-        with:
-          registry-url: https://registry.npmjs.org/
-          node-version: '20.9.0'
+          node-version: '20.19.2'
 
       # Install project dependencies
       - name: Install dependencies

package/.storybook/SenseTheme.js

@@ -1,4 +1,4 @@
-import {create} from '@storybook/theming';
+import {create} from 'storybook/theming';
 
 export default create({
   base: 'light',

package/.storybook/main.js

@@ -7,45 +7,21 @@ module.exports = {
   },
 
   // Add any Storybook addons you want here: https://storybook.js.org/addons/
-  addons: [{
-    name: '@storybook/addon-docs',
-    options: {
-      configureJSX: true,
-      babelOptions: {},
-      sourceLoaderOptions: null,
-      transcludeMarkdown: true,
-    },
-  }, 'storybook-css-modules', '@storybook/addon-a11y', '@storybook/addon-essentials', // 'storybook-vscode-component/register', This is not supported in storybook 7
-  '@storybook/testing-react', '@storybook/addon-mdx-gfm', {
-    name: '@storybook/addon-storysource',
-    options: {
-      loaderOptions: {
-        injectStoryParameters: false,
-        prettierConfig: {
-          singleQuote: true,
-          trailingComma: 'all',
-          printWidth: 80,
-          tabWidth: 2,
-          bracketSpacing: false,
-          endOfLine: 'lf',
-          overrides: [
-            {
-              files: ['*.js', '*.jsx'],
-              options: {
-                parser: 'babel-flow',
-              },
-            },
-            {
-              files: ['*.css'],
-              options: {
-                parser: 'css',
-              },
-            },
-          ],
-        },
+  addons: [
+    {
+      name: '@storybook/addon-docs',
+      options: {
+        configureJSX: true,
+        babelOptions: {},
+        sourceLoaderOptions: null,
+        transcludeMarkdown: true,
       },
-    },
-  }, '@storybook/addon-webpack5-compiler-babel', '@chromatic-com/storybook'],
+    }, // 'storybook-vscode-component/register', This is not supported in storybook 7
+    'storybook-css-modules',
+    '@storybook/addon-a11y',
+    '@storybook/addon-webpack5-compiler-babel',
+    '@chromatic-com/storybook',
+  ],
 
   babel: async (options) => ({
     ...options,
@@ -112,6 +88,6 @@ module.exports = {
   },
 
   typescript: {
-    reactDocgen: 'react-docgen-typescript'
-  }
+    reactDocgen: 'react-docgen-typescript',
+  },
 };

package/.storybook/manager.js

@@ -1,10 +1,9 @@
 // .storybook/manager.js
 
-import {addons} from '@storybook/addons';
-import {themes} from '@storybook/theming';
-
+import {addons} from 'storybook/manager-api';
 import senseTheme from './SenseTheme';
 
+
 addons.setConfig({
   theme: senseTheme,
 });

package/.storybook/preview.js

@@ -31,10 +31,30 @@
  * You can set global parameters in this file
  **/
 
-import {themes} from '@storybook/theming';
+import {themes} from 'storybook/theming';
 import {wd} from 'paths.macro';
 
 export const parameters = {
+  // Note(Nishant): This is a workaround to disable the a11y checks for the storybook.
+  // This is because the storybook is not a web application and does not have a viewport.
+  a11y: {
+    config: {
+      rules: [
+        {
+          id: 'landmark-one-main',
+          enabled: false,
+        },
+        {
+          id: 'meta-viewport',
+          enabled: false,
+        },
+        {
+          id: 'page-has-heading-one',
+          enabled: false,
+        },
+      ],
+    },
+  },
   controls: {
     disableSaveFromUI: true,
   },
@@ -46,6 +66,7 @@ export const parameters = {
   },
   docs: {
     theme: themes.light,
+    codePanel: true,
   },
   Canvas: {
     theme: themes.light,

package/.vscode/settings.json

@@ -22,5 +22,6 @@
     "titleBar.inactiveBackground": "#42b88399",
     "titleBar.inactiveForeground": "#15202b99"
   },
-  "peacock.color": "#42b883"
+  "peacock.color": "#42b883",
+  "eslint.notebooks.rules.customizations": []
 }

package/CHANGELOG.md

@@ -2,6 +2,32 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [0.3.44](https://github.com/spaced-out/ui-design-system/compare/v0.3.43...v0.3.44) (2025-06-16)
+
+
+### Features
+
+* (GDS-526) ai icon ([#357](https://github.com/spaced-out/ui-design-system/issues/357)) ([4be6e07](https://github.com/spaced-out/ui-design-system/commit/4be6e07a9163906306250c8b35f5f335d3a0ee88))
+
+### [0.3.43](https://github.com/spaced-out/ui-design-system/compare/v0.3.42...v0.3.43) (2025-06-16)
+
+
+### Features
+
+* added new component filter button dropdown with children support ([#356](https://github.com/spaced-out/ui-design-system/issues/356)) ([968728f](https://github.com/spaced-out/ui-design-system/commit/968728f230497825f1d7a0dc74fee925747fe656))
+* **GDS-511:** infinite pagination with virtualised items list ([#339](https://github.com/spaced-out/ui-design-system/issues/339)) ([f10dc53](https://github.com/spaced-out/ui-design-system/commit/f10dc530f7a093aa5cf9d72d58a93975d2b4b0bc))
+* **icon:** disabled prop in clickable icon ([#354](https://github.com/spaced-out/ui-design-system/issues/354)) ([75f647c](https://github.com/spaced-out/ui-design-system/commit/75f647c875b965bc6bcac09016fe696ebfe4b904))
+* replaces deprecated componentSubtitle with docs.subtitle & stroke-width with strokeWidth ([#352](https://github.com/spaced-out/ui-design-system/issues/352)) ([4e0af03](https://github.com/spaced-out/ui-design-system/commit/4e0af037270ae3539a07741719d1f148b8a0874f))
+* **scripts:** support nested paths in create-component script ([#351](https://github.com/spaced-out/ui-design-system/issues/351)) ([fe20642](https://github.com/spaced-out/ui-design-system/commit/fe20642bc988cce6a0980f018a56be8d87822b98))
+* upgrade to storybook 9 and related changes ([#355](https://github.com/spaced-out/ui-design-system/issues/355)) ([caad155](https://github.com/spaced-out/ui-design-system/commit/caad1553f075f7e0e9f7654a9a901b38cad101bc))
+
+
+### Bug Fixes
+
+* added new node version ([3aa3152](https://github.com/spaced-out/ui-design-system/commit/3aa3152529d5e976be6b0d1f27a0442e24f6df21))
+* added user to release job ([fd3c071](https://github.com/spaced-out/ui-design-system/commit/fd3c071677f3335eea45fd9f2dbb8286090099df))
+* fixes the copy issue in the prerelease version ([cee9be4](https://github.com/spaced-out/ui-design-system/commit/cee9be469888914330e9dd8478933c6c701677d5))
+
 ### [0.3.42](https://github.com/spaced-out/ui-design-system/compare/v0.3.41...v0.3.42) (2025-05-22)
 
 

package/CONTRIBUTING.md

@@ -90,6 +90,25 @@ yarn generate YourComponentName
       index.js
 ```
 
+For nested components (like charts), use the following format:
+
+```bash
+yarn generate ParentFolder/YourComponentName
+```
+
+This will generate:
+```bash
+/src
+  /components
+    /ParentFolderName
+      /YourComponentName
+        YourComponentName.jsx
+        YourComponentName.stories.jsx
+        YourComponentName.module.css
+        YourComponentName.stories.module.css
+        index.js
+```
+
 > The default templates for each file can be modified under `scripts/templates`.
 
 > This script also appends YourComponentName exports in **`src/components/index.js`**.

package/dts-generator/package.json

@@ -10,7 +10,7 @@
     "jscodeshift": "^17.3.0"
   },
   "volta": {
-    "node": "20.9.0",
+    "node": "20.19.2",
     "yarn": "1.22.19"
   }
 }

package/lib/components/EmptyState/EmptyImages/ChartEmptyImage.d.ts

@@ -183,8 +183,8 @@ export const ChartEmptyImage = (): React.ReactNode => (
     <path
       d="M120 68.2411C120 82.6282 113.908 96.1623 104.213 105L25.7991 104.496C24.7996 104.496 24 103.674 24 102.647V35.8498C24 34.8221 24.7996 34 25.7991 34L104 34.5C112.796 43.0295 120 54.6762 120 68.2411Z"
       stroke="#D3D2E0"
-      stroke-width="2"
-      stroke-miterlimit="10"
+      strokeWidth="2"
+      strokeMiterlimit="10"
     />
     <path
       d="M29.5054 29.1312C32.3772 29.1312 34.7054 26.8031 34.7054 23.9312C34.7054 21.0593 32.3772 18.7312 29.5054 18.7312C26.6335 18.7312 24.3054 21.0593 24.3054 23.9312C24.3054 26.8031 26.6335 29.1312 29.5054 29.1312Z"

package/lib/components/EmptyState/EmptyImages/ChartEmptyImage.js

@@ -167,8 +167,8 @@ const ChartEmptyImage = () => /*#__PURE__*/React.createElement("svg", {
 }), /*#__PURE__*/React.createElement("path", {
   d: "M120 68.2411C120 82.6282 113.908 96.1623 104.213 105L25.7991 104.496C24.7996 104.496 24 103.674 24 102.647V35.8498C24 34.8221 24.7996 34 25.7991 34L104 34.5C112.796 43.0295 120 54.6762 120 68.2411Z",
   stroke: "#D3D2E0",
-  "stroke-width": "2",
-  "stroke-miterlimit": "10"
+  strokeWidth: "2",
+  strokeMiterlimit: "10"
 }), /*#__PURE__*/React.createElement("path", {
   d: "M29.5054 29.1312C32.3772 29.1312 34.7054 26.8031 34.7054 23.9312C34.7054 21.0593 32.3772 18.7312 29.5054 18.7312C26.6335 18.7312 24.3054 21.0593 24.3054 23.9312C24.3054 26.8031 26.6335 29.1312 29.5054 29.1312Z",
   fill: "#9F9FBC"

package/lib/components/EmptyState/EmptyImages/ChartEmptyImage.js.flow

@@ -187,8 +187,8 @@ export const ChartEmptyImage = (): React.Node => (
     <path
       d="M120 68.2411C120 82.6282 113.908 96.1623 104.213 105L25.7991 104.496C24.7996 104.496 24 103.674 24 102.647V35.8498C24 34.8221 24.7996 34 25.7991 34L104 34.5C112.796 43.0295 120 54.6762 120 68.2411Z"
       stroke="#D3D2E0"
-      stroke-width="2"
-      stroke-miterlimit="10"
+      strokeWidth="2"
+      strokeMiterlimit="10"
     />
     <path
       d="M29.5054 29.1312C32.3772 29.1312 34.7054 26.8031 34.7054 23.9312C34.7054 21.0593 32.3772 18.7312 29.5054 18.7312C26.6335 18.7312 24.3054 21.0593 24.3054 23.9312C24.3054 26.8031 26.6335 29.1312 29.5054 29.1312Z"

package/lib/components/FilterButtonOverlay/FilterButtonOverlay.d.ts

@@ -0,0 +1,130 @@
+import {$ReadOnly, $Diff} from 'utility-types';
+import * as React from 'react';
+import {
+  // $FlowFixMe[untyped-import]
+  autoUpdate, // $FlowFixMe[untyped-import]
+  flip, // $FlowFixMe[untyped-import]
+  offset, // $FlowFixMe[untyped-import]
+  shift, // $FlowFixMe[untyped-import]
+  useFloating,
+} from '@floating-ui/react';
+import {sizeFluid} from '../../styles/variables/_size';
+import {spaceNone, spaceXXSmall} from '../../styles/variables/_space';
+import type {ClickAwayRefType} from '../../utils';
+import {ClickAway, mergeRefs} from '../../utils';
+import classify from '../../utils/classify';
+import type {ButtonProps, ButtonSize} from '../Button';
+import {Button} from '../Button';
+import type {AnchorType, Strategy} from '../ButtonDropdown';
+import {ANCHOR_POSITION_TYPE, STRATEGY_TYPE} from '../ButtonDropdown';
+import css from './FilterButtonOverlay.module.css';
+type ClassNames = $ReadOnly<{
+  wrapper?: string;
+  overlayContainer?: string;
+}>;
+export type FilterButtonOverlaySizeTypes = 'medium' | 'small';
+export type NewButtonProps = $Diff<
+  ButtonProps,
+  {
+    children?: React.ReactNode;
+  }
+>;
+export type FilterButtonOverlayProps = NewButtonProps & {
+  classNames?: ClassNames;
+  children: React.ReactNode;
+  positionStrategy?: Strategy;
+  anchorPosition?: AnchorType;
+  clickAwayRef?: ClickAwayRefType;
+  isFluid?: boolean;
+  size?: FilterButtonOverlaySizeTypes;
+  buttonLabel?: React.ReactNode;
+  buttonSize?: ButtonSize;
+  buttonIsFluid?: boolean;
+};
+export const FilterButtonOverlay: React$AbstractComponent<
+  FilterButtonOverlayProps,
+  HTMLDivElement
+> = React.forwardRef<FilterButtonOverlayProps, HTMLDivElement>(
+  (
+    {
+      classNames,
+      anchorPosition = ANCHOR_POSITION_TYPE.bottomStart,
+      positionStrategy = STRATEGY_TYPE.absolute,
+      clickAwayRef,
+      size,
+      children,
+      isFluid,
+      buttonLabel,
+      buttonIsFluid,
+      buttonSize,
+      ...restProps
+    }: FilterButtonOverlayProps,
+    ref,
+  ) => {
+    const {x, y, refs, strategy} = useFloating({
+      open: true,
+      strategy: positionStrategy,
+      placement: anchorPosition,
+      whileElementsMounted: autoUpdate,
+      middleware: [shift(), flip(), offset(parseInt(spaceXXSmall))],
+    });
+    return (
+      <ClickAway clickAwayRef={clickAwayRef} closeOnEscapeKeypress>
+        {({isOpen, onOpen, boundaryRef, triggerRef}) => (
+          <div
+            data-testid="FilterButtonOverlay"
+            className={classify(
+              {
+                [css.isFluid]: buttonIsFluid,
+              },
+              classNames?.wrapper,
+            )}
+            ref={ref}
+          >
+            <Button
+              {...restProps}
+              ref={mergeRefs([refs.setReference, triggerRef])}
+              onClick={(e) => {
+                e.stopPropagation();
+                onOpen();
+              }}
+              isFluid={buttonIsFluid}
+              size={buttonSize}
+            >
+              {buttonLabel}
+            </Button>
+
+            {isOpen && (
+              <div
+                ref={mergeRefs([refs.setFloating, boundaryRef])}
+                style={{
+                  display: 'flex',
+                  position: strategy,
+                  top: y ?? spaceNone,
+                  left: x ?? spaceNone,
+                  ...(isFluid && {
+                    width: sizeFluid,
+                  }),
+                }}
+              >
+                <div
+                  className={classify(
+                    css.overlayWrapper,
+                    {
+                      [css.fluid]: isFluid,
+                      [css.medium]: size === 'medium',
+                      [css.small]: size === 'small',
+                    },
+                    classNames?.overlayContainer,
+                  )}
+                >
+                  {children}
+                </div>
+              </div>
+            )}
+          </div>
+        )}
+      </ClickAway>
+    );
+  },
+);

package/lib/components/FilterButtonOverlay/FilterButtonOverlay.js

@@ -0,0 +1,90 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FilterButtonOverlay = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _react2 = require("@floating-ui/react");
+var _size = require("../../styles/variables/_size");
+var _space = require("../../styles/variables/_space");
+var _utils = require("../../utils");
+var _classify = _interopRequireDefault(require("../../utils/classify"));
+var _Button = require("../Button");
+var _ButtonDropdown = require("../ButtonDropdown");
+var _FilterButtonOverlayModule = _interopRequireDefault(require("./FilterButtonOverlay.module.css"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+const FilterButtonOverlay = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+    classNames,
+    anchorPosition = _ButtonDropdown.ANCHOR_POSITION_TYPE.bottomStart,
+    positionStrategy = _ButtonDropdown.STRATEGY_TYPE.absolute,
+    clickAwayRef,
+    size,
+    children,
+    isFluid,
+    buttonLabel,
+    buttonIsFluid,
+    buttonSize,
+    ...restProps
+  } = _ref;
+  const {
+    x,
+    y,
+    refs,
+    strategy
+  } = (0, _react2.useFloating)({
+    open: true,
+    strategy: positionStrategy,
+    placement: anchorPosition,
+    whileElementsMounted: _react2.autoUpdate,
+    middleware: [(0, _react2.shift)(), (0, _react2.flip)(), (0, _react2.offset)(parseInt(_space.spaceXXSmall))]
+  });
+  return /*#__PURE__*/React.createElement(_utils.ClickAway, {
+    clickAwayRef: clickAwayRef,
+    closeOnEscapeKeypress: true
+  }, _ref2 => {
+    let {
+      isOpen,
+      onOpen,
+      boundaryRef,
+      triggerRef
+    } = _ref2;
+    return /*#__PURE__*/React.createElement("div", {
+      "data-testid": "FilterButtonOverlay",
+      className: (0, _classify.default)({
+        [_FilterButtonOverlayModule.default.isFluid]: buttonIsFluid
+      }, classNames?.wrapper),
+      ref: ref
+    }, /*#__PURE__*/React.createElement(_Button.Button, _extends({}, restProps, {
+      ref: (0, _utils.mergeRefs)([refs.setReference, triggerRef]),
+      onClick: e => {
+        e.stopPropagation();
+        onOpen();
+      },
+      isFluid: buttonIsFluid,
+      size: buttonSize
+    }), buttonLabel), isOpen && /*#__PURE__*/React.createElement("div", {
+      ref: (0, _utils.mergeRefs)([refs.setFloating, boundaryRef]),
+      style: {
+        display: 'flex',
+        position: strategy,
+        top: y ?? _space.spaceNone,
+        left: x ?? _space.spaceNone,
+        ...(isFluid && {
+          width: _size.sizeFluid
+        })
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      className: (0, _classify.default)(_FilterButtonOverlayModule.default.overlayWrapper, {
+        [_FilterButtonOverlayModule.default.fluid]: isFluid,
+        [_FilterButtonOverlayModule.default.medium]: size === 'medium',
+        [_FilterButtonOverlayModule.default.small]: size === 'small'
+      }, classNames?.overlayContainer)
+    }, children)));
+  });
+});
+exports.FilterButtonOverlay = FilterButtonOverlay;