@spaced-out/ui-design-system 0.3.51-beta.0 → 0.4.1

package/.cspell/custom-words.txt

@@ -96,6 +96,7 @@ rerouter
 rgba
 Rica
 Rothera
+Sahil
 Sakhalin
 sanskar
 Santo
@@ -103,6 +104,7 @@ sbdocs
 Scoresbysund
 senseai
 sharad
+Shrivastava
 Stapleton
 storysource
 subproject

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, keshavsensehq
+          ALLOWED_USERS: superrover, Anant-Raj, diwakersurya, ashwini-sensehq, vish-sah, VishalBarnawal, sanskar-s, VivekJangid, sharad-kushwah, Swatantramishra1, bhatiarush27, darsh-mecwan-sense, keshavsensehq, SahilShrivastava1
         if: ${{ !contains(env.ALLOWED_USERS, github.actor) }}
         run: |
           echo "You don't have correct permissions to do this release"

package/CHANGELOG.md

@@ -2,6 +2,15 @@
 
 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.4.1](https://github.com/spaced-out/ui-design-system/compare/v0.4.0...v0.4.1) (2025-07-15)
+
+
+### Features
+
+* **GDS-518:** accordian component ([#359](https://github.com/spaced-out/ui-design-system/issues/359)) ([c48b2c9](https://github.com/spaced-out/ui-design-system/commit/c48b2c985538e56cc359bbabc1fee25605220c0c))
+
+## [0.4.0](https://github.com/spaced-out/ui-design-system/compare/v0.3.51-beta.0...v0.4.0) (2025-07-14)
+
 ### [0.3.51-beta.0](https://github.com/spaced-out/ui-design-system/compare/v0.3.50...v0.3.51-beta.0) (2025-07-09)
 
 

package/lib/components/Accordion/Accordion.js

@@ -0,0 +1,70 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Accordion = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _classify = _interopRequireDefault(require("../../utils/classify"));
+var _Button = require("../Button");
+var _Toggle = require("../Toggle");
+var _AccordionModule = _interopRequireDefault(require("./Accordion.module.css"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const Accordion = exports.Accordion = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+    id,
+    header,
+    onChange,
+    onToggle,
+    disabled = false,
+    classNames,
+    isOpen = false,
+    showToggle = false,
+    children
+  } = _ref;
+  const [accordionIsOpen, setAccordionIsOpen] = React.useState(isOpen);
+  const [checked, setChecked] = React.useState(false);
+  const handleToggle = () => {
+    setChecked(!checked);
+    onToggle?.(id, !checked);
+  };
+  const handleAccordionClick = () => {
+    if (!disabled) {
+      onChange?.(id, !accordionIsOpen);
+      setAccordionIsOpen(prev => !prev);
+    }
+  };
+  React.useEffect(() => {
+    setAccordionIsOpen(isOpen);
+  }, [isOpen]);
+  return /*#__PURE__*/React.createElement("div", {
+    ref: ref,
+    "data-testid": "Accordion",
+    className: (0, _classify.default)(_AccordionModule.default.wrapper, classNames?.wrapper)
+  }, /*#__PURE__*/React.createElement("div", {
+    className: (0, _classify.default)(_AccordionModule.default.headerWrapper, classNames?.headerWrapper),
+    onClick: handleAccordionClick
+  }, /*#__PURE__*/React.createElement("div", {
+    className: (0, _classify.default)(_AccordionModule.default.header, classNames?.header)
+  }, showToggle && /*#__PURE__*/React.createElement("div", {
+    onClick: e => {
+      e.stopPropagation(); // prevent toggle click from triggering accordion toggle
+    }
+  }, /*#__PURE__*/React.createElement(_Toggle.Toggle, {
+    checked: checked,
+    onChange: handleToggle,
+    ariaLabel: 'toggle'
+  })), header), /*#__PURE__*/React.createElement(_Button.Button, {
+    iconLeftName: accordionIsOpen ? 'chevron-up' : 'chevron-down',
+    disabled: disabled,
+    size: "small",
+    type: "ghost",
+    className: _AccordionModule.default.icon,
+    ariaLabel: 'Collapse button'
+    // we are not defining onClick here as we are using onClick of the parent here.
+  })), accordionIsOpen && /*#__PURE__*/React.createElement("div", {
+    className: (0, _classify.default)(_AccordionModule.default.content, classNames?.content)
+  }, children));
+});
+Accordion.displayName = 'Accordion';

package/lib/components/Accordion/Accordion.js.flow

@@ -0,0 +1,116 @@
+// @flow strict
+
+import * as React from 'react';
+
+import classify from '../../utils/classify';
+import {Button} from '../Button';
+import {Toggle} from '../Toggle';
+
+import css from './Accordion.module.css';
+
+
+export type AccordionClassNames = $ReadOnly<{
+  wrapper?: string,
+  headerWrapper?: string,
+  header?: string,
+  content?: string,
+}>;
+
+export type AccordionPropsType = {
+  id: string,
+  header: React.Node,
+  children: React.Node,
+  classNames?: AccordionClassNames,
+  isOpen?: boolean,
+  disabled?: boolean,
+  showToggle?: boolean,
+  onChange?: ?(id?: string, isOpen: boolean) => mixed,
+  onToggle?: ?(id?: string, checked?: boolean) => mixed,
+};
+
+export const Accordion: React$AbstractComponent<
+  AccordionPropsType,
+  HTMLDivElement,
+> = React.forwardRef<AccordionPropsType, HTMLDivElement>(
+  (
+    {
+      id,
+      header,
+      onChange,
+      onToggle,
+      disabled = false,
+      classNames,
+      isOpen = false,
+      showToggle = false,
+      children,
+    }: AccordionPropsType,
+    ref,
+  ) => {
+    const [accordionIsOpen, setAccordionIsOpen] = React.useState(isOpen);
+
+    const [checked, setChecked] = React.useState<boolean>(false);
+
+    const handleToggle = () => {
+      setChecked(!checked);
+      onToggle?.(id, !checked);
+    };
+
+    const handleAccordionClick = () => {
+      if (!disabled) {
+        onChange?.(id, !accordionIsOpen);
+        setAccordionIsOpen((prev) => !prev);
+      }
+    };
+
+    React.useEffect(() => {
+      setAccordionIsOpen(isOpen);
+    }, [isOpen]);
+
+    return (
+      <div
+        ref={ref}
+        data-testid="Accordion"
+        className={classify(css.wrapper, classNames?.wrapper)}
+      >
+        <div
+          className={classify(css.headerWrapper, classNames?.headerWrapper)}
+          onClick={handleAccordionClick}
+        >
+          <div className={classify(css.header, classNames?.header)}>
+            {showToggle && (
+              <div
+                onClick={(e) => {
+                  e.stopPropagation(); // prevent toggle click from triggering accordion toggle
+                }}
+              >
+                <Toggle
+                  checked={checked}
+                  onChange={handleToggle}
+                  ariaLabel={'toggle'}
+                />
+              </div>
+            )}
+            {header}
+          </div>
+          <Button
+            iconLeftName={accordionIsOpen ? 'chevron-up' : 'chevron-down'}
+            disabled={disabled}
+            size="small"
+            type="ghost"
+            className={css.icon}
+            ariaLabel={'Collapse button'}
+            // we are not defining onClick here as we are using onClick of the parent here.
+          />
+        </div>
+
+        {accordionIsOpen && (
+          <div className={classify(css.content, classNames?.content)}>
+            {children}
+          </div>
+        )}
+      </div>
+    );
+  },
+);
+
+Accordion.displayName = 'Accordion';

package/lib/components/Accordion/Accordion.module.css

@@ -0,0 +1,71 @@
+@value (
+  colorBorderPrimary,
+  colorBackgroundTertiary,
+  colorTextSecondary
+) from '../../styles/variables/_color.css';
+@value (
+  sizeFluid, 
+  size58
+) from '../../styles/variables/_size.css';
+@value (
+  spaceNone,
+  spaceSmall, 
+  spaceMedium,
+  spaceXSmall,
+  spaceXXSmall
+) from '../../styles/variables/_space.css';
+@value (
+  elevationCard
+) from '../../styles/variables/_elevation.css';
+@value (
+  borderWidthNone,
+  borderWidthPrimary,
+  borderRadiusSmall,
+  borderRadiusMedium,
+  borderRadiusNone,
+  borderWidthTertiary
+) from '../../styles/variables/_border.css';
+
+.wrapper {
+  composes: borderPrimary from '../../styles/border.module.css';
+  display: flex;
+  flex-flow: column;
+  width: sizeFluid;
+}
+
+.headerWrapper {
+  composes: subTitleSmall from '../../styles/typography.module.css';
+  display: flex;
+  min-height: size58;
+  cursor: pointer;
+  align-items: center;
+  width: sizeFluid;
+  justify-content: space-between;
+  gap: spaceXSmall;
+  padding-left: spaceMedium;
+  padding-right: spaceMedium;
+  padding-top: spaceSmall;
+  padding-bottom: spaceSmall;
+  background-color: colorBackgroundTertiary;
+  z-index: elevationCard;
+  color: colorTextSecondary;
+}
+
+.icon {
+  padding-right: spaceMedium;
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  gap: spaceXSmall;
+}
+
+.content {
+  composes: borderTopPrimary from '../../styles/border.module.css';
+  display: flex;
+  flex-flow: column;
+  background-color: colorBackgroundTertiary;
+  padding: spaceSmall;
+  gap: spaceXXSmall;
+}

package/lib/components/Accordion/AccordionGroup.js

@@ -0,0 +1,56 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AccordionGroup = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _classify = _interopRequireDefault(require("../../utils/classify"));
+var _AccordionGroupModule = _interopRequireDefault(require("./AccordionGroup.module.css"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const AccordionGroup = _ref => {
+  let {
+    children,
+    onAccordionClick,
+    onToggle,
+    enabledToggleIds = [],
+    initialOpenId = '',
+    classNames
+  } = _ref;
+  const [openId, setOpenedId] = React.useState(initialOpenId);
+  const [checks, setChecks] = React.useState(enabledToggleIds);
+  const handleAccordionChange = (id, isOpen) => {
+    setOpenedId(isOpen ? id : '');
+    onAccordionClick?.(id, isOpen);
+  };
+  const handleToggle = (id, checked) => {
+    setChecks(prev => checked ? [...prev, id] : prev.filter(x => x !== id));
+    setOpenedId(prev => checked ? id : prev === id ? '' : prev);
+    onToggle?.(id, checked);
+  };
+  const enhancedChildren = React.Children.map(children, child => {
+    if (! /*#__PURE__*/React.isValidElement(child)) {
+      return null;
+    }
+    const childId = child.props.id;
+    const isDisabled = !checks.includes(childId);
+    const isOpen = openId === childId;
+    return /*#__PURE__*/React.cloneElement(child, {
+      classNames: {
+        headerWrapper: _AccordionGroupModule.default.accordionHeaderWrapper,
+        wrapper: _AccordionGroupModule.default.accordionWrapper
+      },
+      onChange: handleAccordionChange,
+      onToggle: handleToggle,
+      showToggle: true,
+      disabled: isDisabled,
+      isOpen
+    });
+  });
+  return /*#__PURE__*/React.createElement("div", {
+    className: (0, _classify.default)(_AccordionGroupModule.default.wrapper, classNames?.wrapper)
+  }, enhancedChildren);
+};
+exports.AccordionGroup = AccordionGroup;
+AccordionGroup.displayName = 'AccordionGroup';

package/lib/components/Accordion/AccordionGroup.js.flow

@@ -0,0 +1,75 @@
+// @flow strict
+
+import * as React from 'react';
+
+import classify from '../../utils/classify';
+
+import css from './AccordionGroup.module.css';
+
+
+export type AccordionGroupClassNames = $ReadOnly<{
+  wrapper?: string,
+}>;
+
+export type AccordionGroupPropsType = {
+  children: React.Node,
+  onAccordionClick?: (id: string, isOpen: boolean) => mixed,
+  onToggle?: (id: string, checked?: boolean) => mixed,
+  enabledToggleIds?: Array<string>,
+  initialOpenId?: string,
+  classNames?: AccordionGroupClassNames,
+};
+
+export const AccordionGroup = ({
+  children,
+  onAccordionClick,
+  onToggle,
+  enabledToggleIds = [],
+  initialOpenId = '',
+  classNames,
+}: AccordionGroupPropsType): React.Node => {
+  const [openId, setOpenedId] = React.useState(initialOpenId);
+  const [checks, setChecks] = React.useState(enabledToggleIds);
+  const handleAccordionChange = (id, isOpen) => {
+    setOpenedId(isOpen ? id : '');
+    onAccordionClick?.(id, isOpen);
+  };
+  const handleToggle = (id, checked) => {
+    setChecks((prev) =>
+      checked ? [...prev, id] : prev.filter((x) => x !== id),
+    );
+    setOpenedId((prev) => (checked ? id : prev === id ? '' : prev));
+    onToggle?.(id, checked);
+  };
+  const enhancedChildren = React.Children.map(children, (child) => {
+    if (!React.isValidElement(child)) {
+      return null;
+    }
+
+    const childId = child.props.id;
+
+    const isDisabled = !checks.includes(childId);
+
+    const isOpen = openId === childId;
+
+    return React.cloneElement(child, {
+      classNames: {
+        headerWrapper: css.accordionHeaderWrapper,
+        wrapper: css.accordionWrapper,
+      },
+      onChange: handleAccordionChange,
+      onToggle: handleToggle,
+      showToggle: true,
+      disabled: isDisabled,
+      isOpen,
+    });
+  });
+
+  return (
+    <div className={classify(css.wrapper, classNames?.wrapper)}>
+      {enhancedChildren}
+    </div>
+  );
+};
+
+AccordionGroup.displayName = 'AccordionGroup';

package/lib/components/Accordion/AccordionGroup.module.css

@@ -0,0 +1,29 @@
+@value (
+  sizeFluid
+) from '../../styles/variables/_size.css';
+
+@value (
+  borderWidthNone,
+  borderWidthPrimary
+) from '../../styles/variables/_border.css';
+@value (
+  colorBorderPrimary
+) from '../../styles/variables/_color.css';
+
+.wrapper {
+  composes: borderPrimary from '../../styles/border.module.css';
+  display: flex;
+  flex-flow: column;
+  width: sizeFluid;
+  overflow: auto;
+}
+
+.accordionWrapper {
+  border-top: borderWidthNone;
+  border-left: borderWidthNone;
+  border-right: borderWidthNone;
+}
+
+.accordionWrapper:last-child {
+  border-bottom: borderWidthNone;
+}

package/lib/components/Accordion/index.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _Accordion = require("./Accordion");
+Object.keys(_Accordion).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Accordion[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _Accordion[key];
+    }
+  });
+});
+var _AccordionGroup = require("./AccordionGroup");
+Object.keys(_AccordionGroup).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _AccordionGroup[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _AccordionGroup[key];
+    }
+  });
+});

package/lib/components/Accordion/index.js.flow

@@ -0,0 +1,4 @@
+// @flow strict
+
+export * from './Accordion';
+export * from './AccordionGroup';

package/lib/components/index.js

@@ -3,6 +3,17 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+var _Accordion = require("./Accordion");
+Object.keys(_Accordion).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Accordion[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _Accordion[key];
+    }
+  });
+});
 var _Avatar = require("./Avatar");
 Object.keys(_Avatar).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/lib/components/index.js.flow

@@ -1,5 +1,6 @@
 // @flow strict
 
+export * from './Accordion';
 export * from './Avatar';
 export * from './AvatarGroup';
 export * from './Badge';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spaced-out/ui-design-system",
-  "version": "0.3.51-beta.0",
+  "version": "0.4.1",
   "main": "index.js",
   "description": "Sense UI components library",
   "author": {
@@ -78,7 +78,7 @@
     "babel-preset-react-app": "^10.0.0",
     "chalk": "^5.0.1",
     "chromatic": "^6.11.4",
-    "cspell": "^6.14.1",
+    "cspell": "^9.1.2",
     "eslint": "^8.22.0",
     "eslint-plugin-flowtype": "^8.0.3",
     "eslint-plugin-import": "^2.26.0",