@phillips/seldon 1.42.0 → 1.42.1

package/dist/components/Accordion/AccordionItem.d.ts

@@ -24,10 +24,6 @@ export interface AccordionItemProps extends React.HTMLAttributes<HTMLDivElement>
      * When true applied the transition keyframe animation on item expand. Default as false.
      */
     hasTransition?: boolean;
-    /**
-     * When true, isCollapsed won't be toggled.
-     */
-    isControlled?: boolean;
 }
-declare const AccordionItem: ({ isLocked, variation, label, isLastItem, hasTransition, children, isControlled, ...props }: AccordionItemProps) => import("react/jsx-runtime").JSX.Element;
+declare const AccordionItem: ({ isLocked, variation, label, isLastItem, hasTransition, children, ...props }: AccordionItemProps) => import("react/jsx-runtime").JSX.Element;
 export default AccordionItem;

package/dist/components/Accordion/AccordionItem.js

@@ -1,101 +1,111 @@
-import { jsxs as I, jsx as e, Fragment as _ } from "react/jsx-runtime";
-import { useState as f } from "react";
-import { getCommonProps as h, noOp as C } from "../../utils/index.js";
-import p from "../../assets/plus.svg.js";
-import x from "../../assets/minus.svg.js";
-import v from "../../assets/lock.svg.js";
+import { jsxs as g, jsx as o, Fragment as I } from "react/jsx-runtime";
+import { getCommonProps as $ } from "../../utils/index.js";
+import f from "../../assets/plus.svg.js";
+import h from "../../assets/minus.svg.js";
+import _ from "../../assets/lock.svg.js";
 import d from "../../node_modules/classnames/index.js";
-import { Item as A, Trigger as N, Content as T } from "../../node_modules/@radix-ui/react-accordion/dist/index.js";
-const j = ({
-  children: o,
-  className: r,
+import { Item as p, Trigger as C, Content as v } from "../../node_modules/@radix-ui/react-accordion/dist/index.js";
+import { getIconClasses as u } from "./utils.js";
+const x = ({
+  children: n,
+  className: m,
   baseClassName: t,
-  disable: n,
-  isCollapsed: i,
-  setIsCollapsed: a,
-  isLargeVariation: s,
-  id: c
+  disable: s,
+  isLargeVariation: c,
+  id: e
 }) => {
-  const m = () => !n && a((l) => !l), g = n ? v : i ? p : x, $ = `${c}-` + (n ? "lockedIcon" : i ? "plusIcon" : "minusIcon");
-  return /* @__PURE__ */ e(
-    N,
+  const r = s, l = /* @__PURE__ */ o(
+    "img",
     {
-      "data-disabled": n,
+      className: u(t, c, "lock"),
+      src: _,
+      "data-testid": `${e}-lockedIcon`,
+      "aria-hidden": !0
+    }
+  ), a = /* @__PURE__ */ o(
+    "img",
+    {
+      className: u(t, c, "plus"),
+      src: f,
+      "data-testid": `${e}-plusIcon`,
+      "aria-hidden": !0
+    }
+  ), i = /* @__PURE__ */ o(
+    "img",
+    {
+      className: u(t, c, "minus"),
+      src: h,
+      "data-testid": `${e}-minusIcon`,
+      "aria-hidden": !0
+    }
+  );
+  return /* @__PURE__ */ o(
+    C,
+    {
+      "data-disabled": s,
       asChild: !0,
-      className: d(t, { [`${t}--hoverable`]: !n }, r),
-      children: /* @__PURE__ */ I("div", { onClick: m, "data-testid": `${c}-trigger`, children: [
-        /* @__PURE__ */ e("div", { className: d(`${t}__text`, { [`${t}__text--lg`]: s }), children: o }),
-        /* @__PURE__ */ e(
-          "img",
-          {
-            className: d(`${t}__icon`, { [`${t}__icon--lg`]: s }),
-            src: g,
-            "data-testid": $,
-            "aria-hidden": !0
-          }
-        )
+      className: d(t, { [`${t}--hoverable`]: !s }, m),
+      children: /* @__PURE__ */ g("div", { "data-testid": `${e}-trigger`, children: [
+        /* @__PURE__ */ o("div", { className: d(`${t}__text`, { [`${t}__text--lg`]: c }), children: n }),
+        r && l,
+        !r && a,
+        !r && i
       ] })
     }
   );
-}, k = ({
-  children: o,
-  baseClassName: r,
+}, N = ({
+  children: n,
+  baseClassName: m,
   disable: t,
-  hasTransition: n,
-  isLargeVariation: i,
-  isCollapsed: a,
-  className: s
-}) => /* @__PURE__ */ e(_, { children: t && o ? /* @__PURE__ */ e("div", { children: o }) : /* @__PURE__ */ e(
-  T,
+  hasTransition: s,
+  isLargeVariation: c,
+  className: e
+}) => /* @__PURE__ */ o(I, { children: t && n ? /* @__PURE__ */ o("div", { children: n }) : /* @__PURE__ */ o(
+  v,
   {
     asChild: !0,
     className: d(
-      { [`${r}__content--lg`]: i },
-      { [`${r}--transition`]: n },
-      { [`${r}--expanded`]: !a },
-      s
+      { [`${m}__content--lg`]: c },
+      { [`${m}--transition`]: s },
+      e
     ),
-    children: o
+    children: n
   }
-) }), z = ({
-  isLocked: o,
-  variation: r,
+) }), P = ({
+  isLocked: n,
+  variation: m,
   label: t,
-  isLastItem: n,
-  hasTransition: i = !1,
-  children: a,
-  isControlled: s = !0,
-  ...c
+  isLastItem: s,
+  hasTransition: c = !1,
+  children: e,
+  ...r
 }) => {
-  const [m, g] = f(!0), { className: $ } = h(c, "Accordion"), l = r === "lg", u = `${$}-item`;
-  return /* @__PURE__ */ I(
-    A,
+  const { className: l } = $(r, "Accordion"), a = m === "lg", i = `${l}-item`;
+  return /* @__PURE__ */ g(
+    p,
     {
-      disabled: o,
+      disabled: n,
       value: t,
-      className: d(u, { [`${u}__border-bottom`]: !n }),
+      className: d(i, { [`${i}__border-bottom`]: !s }),
       children: [
-        /* @__PURE__ */ e(
-          j,
+        /* @__PURE__ */ o(
+          x,
           {
-            disable: o,
-            isLargeVariation: l,
-            isCollapsed: m,
-            setIsCollapsed: s ? g : C,
-            id: c == null ? void 0 : c.id,
-            baseClassName: `${u}-label`,
+            disable: n,
+            isLargeVariation: a,
+            id: r == null ? void 0 : r.id,
+            baseClassName: `${i}-label`,
             children: t
           }
         ),
-        /* @__PURE__ */ e(
-          k,
+        /* @__PURE__ */ o(
+          N,
           {
-            disable: o,
-            hasTransition: i,
-            isLargeVariation: l,
-            isCollapsed: m,
-            baseClassName: u,
-            children: a
+            disable: n,
+            hasTransition: c,
+            isLargeVariation: a,
+            baseClassName: i,
+            children: e
           }
         )
       ]
@@ -103,5 +113,5 @@ const j = ({
   );
 };
 export {
-  z as default
+  P as default
 };

package/dist/components/Accordion/types.d.ts

@@ -12,8 +12,6 @@ export interface AccordionHeaderType {
      */
     baseClassName: string;
     disable: boolean;
-    isCollapsed: boolean;
-    setIsCollapsed: React.Dispatch<React.SetStateAction<boolean>>;
     isLargeVariation: boolean;
     /**
      * Unique id for icon component testing
@@ -39,7 +37,6 @@ export interface AccordionContentType {
      */
     hasTransition?: boolean;
     isLargeVariation: boolean;
-    isCollapsed: boolean;
 }
 export declare enum AccordionVariants {
     multiple = "multiple",

package/dist/components/Accordion/utils.d.ts

@@ -15,3 +15,11 @@ export interface AccordionVariantProps {
  * The collapsible prop should only be passed when the variant is single
  */
 export declare const getAccordionVariantProps: (variant?: AccordionVariantKey) => AccordionVariantProps;
+/**
+ * A helper for getting the classes of the Accordion icons
+ * @param className - The className of the component
+ * @param isLargeVariation - Determines whether the variation on text style is large or small.
+ * @param iconName - The name of the icon to be displayed
+ * @returns the classes that should be applied for the icon
+ */
+export declare const getIconClasses: (className: string, isLargeVariation: boolean, iconName: string) => string;

package/dist/components/Accordion/utils.js

@@ -1,8 +1,12 @@
-import { AccordionVariants as i } from "./types.js";
-const s = (e) => {
-  const l = { type: "multiple" };
-  return e === i.singleCollapsible && (l.type = "single", l.collapsible = !0), e === i.singleNonCollapsible && (l.type = "single", l.collapsible = !1), l;
-};
+import n from "../../node_modules/classnames/index.js";
+import { AccordionVariants as l } from "./types.js";
+const r = (i) => {
+  const o = { type: "multiple" };
+  return i === l.singleCollapsible && (o.type = "single", o.collapsible = !0), i === l.singleNonCollapsible && (o.type = "single", o.collapsible = !1), o;
+}, p = (i, o, e) => n(`${i}__icon`, `${i}-${e}__icon`, {
+  [`${i}__icon--lg`]: o
+});
 export {
-  s as getAccordionVariantProps
+  r as getAccordionVariantProps,
+  p as getIconClasses
 };

package/dist/scss/components/Accordion/_accordion.scss

@@ -14,7 +14,7 @@
     border-bottom: 1px solid $keyline-gray;
   }
 
-  &--expanded {
+  &[data-state='open'] {
     display: block;
     font-weight: 400;
     height: auto;
@@ -39,6 +39,26 @@
     animation: slide-up 250ms end;
   }
 
+  &[data-state='open'] {
+    .phillips-accordion-item-label-plus__icon {
+      display: none;
+    }
+
+    .phillips-accordion-item-label-minus__icon {
+      display: block;
+    }
+  }
+
+  &[data-state='closed'] {
+    .phillips-accordion-item-label-plus__icon {
+      display: block;
+    }
+
+    .phillips-accordion-item-label-minus__icon {
+      display: none;
+    }
+  }
+
   @keyframes slide-down {
     from {
       height: 0;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@phillips/seldon",
-  "version": "1.42.0",
+  "version": "1.42.1",
   "repository": {
     "type": "git",
     "url": "https://github.com/PhillipsAuctionHouse/seldon"