@phillips/seldon 1.84.1 → 1.85.0

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

@@ -1,8 +1,12 @@
 import { AccordionProps } from './Accordion';
+import { AccordionItemProps } from './AccordionItem';
 import { AccordionVariants } from './types';
 declare const meta: {
     title: string;
     component: ({ className, children, ...props }: AccordionProps) => import("react/jsx-runtime").JSX.Element;
+    args: {
+        transitionTimeInMs: number;
+    };
     argTypes: {
         variant: {
             options: AccordionVariants[];
@@ -13,6 +17,6 @@ declare const meta: {
     };
 };
 export default meta;
-export declare const AccordionLarge: (props: AccordionProps) => import("react/jsx-runtime").JSX.Element;
-export declare const AccordionSmall: (props: AccordionProps) => import("react/jsx-runtime").JSX.Element;
-export declare const AccordionSubmenu: (props: AccordionProps) => import("react/jsx-runtime").JSX.Element;
+export declare const AccordionLarge: ({ transitionTimeInMs, ...props }: AccordionProps & AccordionItemProps) => import("react/jsx-runtime").JSX.Element;
+export declare const AccordionSmall: ({ transitionTimeInMs, ...props }: AccordionProps & AccordionItemProps) => import("react/jsx-runtime").JSX.Element;
+export declare const AccordionSubmenu: ({ transitionTimeInMs, ...props }: AccordionProps & AccordionItemProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -29,6 +29,10 @@ export interface AccordionItemProps extends React.HTMLAttributes<HTMLDivElement>
      * When true applied the transition keyframe animation on item expand. Default as false.
      */
     hasTransition?: boolean;
+    /**
+     * Number of milliseconds for the expansion transition. Defaults to 250.
+     */
+    transitionTimeInMs?: number;
 }
 declare const AccordionItem: React.ForwardRefExoticComponent<AccordionItemProps & React.RefAttributes<HTMLDivElement>>;
 export default AccordionItem;

package/dist/components/Accordion/AccordionItem.js

@@ -1,37 +1,37 @@
 import { jsxs as h, jsx as t } from "react/jsx-runtime";
-import { forwardRef as g } from "react";
-import { getCommonProps as v } from "../../utils/index.js";
-import I from "../../assets/plus.svg.js";
-import _ from "../../assets/minus.svg.js";
-import x from "../../assets/lock.svg.js";
-import s from "../../node_modules/classnames/index.js";
-import { Item as A, Trigger as N, Content as k } from "../../node_modules/@radix-ui/react-accordion/dist/index.js";
-import { AccordionItemVariant as $ } from "./types.js";
+import { Item as I, Trigger as _, Content as x } from "../../node_modules/@radix-ui/react-accordion/dist/index.js";
+import m from "../../node_modules/classnames/index.js";
+import { forwardRef as A } from "react";
+import N from "../../assets/lock.svg.js";
+import k from "../../assets/minus.svg.js";
+import C from "../../assets/plus.svg.js";
+import { getCommonProps as S } from "../../utils/index.js";
+import { AccordionItemVariant as f } from "./types.js";
 import { getIconClasses as u } from "./utils.js";
-const C = ({
+const j = ({
   children: n,
   className: r,
   baseClassName: o,
-  disable: d,
+  disable: i,
   isLargeVariation: c,
   id: e
 }) => {
-  const i = d, l = /* @__PURE__ */ t("div", { children: /* @__PURE__ */ t(
-    x,
+  const d = i, l = /* @__PURE__ */ t("div", { children: /* @__PURE__ */ t(
+    N,
     {
       className: u(o, c, "lock"),
       "data-testid": `${e}-lockedIcon`,
       "aria-hidden": !0
     }
   ) }), a = /* @__PURE__ */ t("div", { children: /* @__PURE__ */ t(
-    I,
+    C,
     {
       className: u(o, c, "plus"),
       "data-testid": `${e}-plusIcon`,
       "aria-hidden": !0
     }
   ) }), p = /* @__PURE__ */ t("div", { children: /* @__PURE__ */ t(
-    _,
+    k,
     {
       className: u(o, c, "minus"),
       "data-testid": `${e}-minusIcon`,
@@ -39,84 +39,87 @@ const C = ({
     }
   ) });
   return /* @__PURE__ */ t(
-    N,
+    _,
     {
-      "data-disabled": d,
+      "data-disabled": i,
       asChild: !0,
-      className: s(
+      className: m(
         o,
         { [`${o}--large`]: c },
-        { [`${o}--hoverable`]: !d },
+        { [`${o}--hoverable`]: !i },
         r
       ),
       children: /* @__PURE__ */ h("div", { "data-testid": `${e}-trigger`, children: [
-        /* @__PURE__ */ t("div", { className: s(`${o}__text`, { [`${o}__text--lg`]: c }), children: n }),
-        i && l,
-        !i && a,
-        !i && p
+        /* @__PURE__ */ t("div", { className: m(`${o}__text`, { [`${o}__text--lg`]: c }), children: n }),
+        d && l,
+        !d && a,
+        !d && p
       ] })
     }
   );
-}, S = ({
+}, w = ({
   children: n,
   baseClassName: r,
   disable: o,
-  hasTransition: d,
+  hasTransition: i,
   isLargeVariation: c,
   className: e
 }) => o && n ? /* @__PURE__ */ t("div", { className: `${r}__content--locked`, children: n }) : /* @__PURE__ */ t(
-  k,
+  x,
   {
     asChild: !0,
-    className: s(
+    className: m(
       `${r}__content`,
       { [`${r}__content--lg`]: c },
-      { [`${r}--transition`]: d },
+      { [`${r}--transition`]: i },
       e
     ),
     children: n
   }
-), j = g(
+), y = A(
   ({
     isLocked: n = !1,
-    variant: r = $.sm,
+    variant: r = f.sm,
     id: o,
-    label: d,
+    label: i,
     isLastItem: c,
     hasTransition: e = !1,
-    children: i,
-    ...l
-  }, a) => {
-    const { className: p } = v({ id: o }, "Accordion"), f = r === $.lg, m = `${p}-item`;
+    children: d,
+    className: l,
+    transitionTimeInMs: a = 250,
+    ...p
+  }, g) => {
+    const { className: v } = S({ id: o }, "Accordion"), $ = r === f.lg, s = `${v}-item`;
     return /* @__PURE__ */ h(
-      A,
+      I,
       {
         disabled: n,
         value: o,
-        className: s(m, {
-          [`${m}__border-bottom`]: !c
+        style: { "--seldon-accordion-transition-time": `${a}ms` },
+        className: m(s, l, {
+          [`${s}__border-bottom`]: !c
         }),
-        ref: a,
-        ...l,
+        ref: g,
+        ...p,
         children: [
           /* @__PURE__ */ t(
-            C,
+            j,
             {
               disable: n,
-              isLargeVariation: f,
+              isLargeVariation: $,
               id: o,
-              baseClassName: `${m}-label`,
-              children: d
+              baseClassName: `${s}-label`,
+              children: i
             }
           ),
           /* @__PURE__ */ t(
-            S,
+            w,
             {
               disable: n,
               hasTransition: e,
-              isLargeVariation: f,
-              baseClassName: m,
-              children: /* @__PURE__ */ t("div", { className: "radix-accordion-content", children: i })
+              isLargeVariation: $,
+              baseClassName: s,
+              children: /* @__PURE__ */ t("div", { className: "radix-accordion-content", children: d })
             }
           )
         ]
@@ -124,7 +127,7 @@ const C = ({
     );
   }
 );
-j.displayName = "AccordionItem";
+y.displayName = "AccordionItem";
 export {
-  j as default
+  y as default
 };

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

@@ -0,0 +1 @@
+export {};

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

@@ -37,16 +37,24 @@
     @include text($body2);
   }
 
+  &--transition[data-state='open'] {
+    animation: slide-down var(--seldon-accordion-transition-time) ease-in-out;
+  }
+
+  &--transition[data-state='closed'] {
+    animation: slide-up var(--seldon-accordion-transition-time) ease-in-out;
+  }
+
   &--transition {
     overflow: hidden;
   }
 
   &--transition[data-state='open'] {
-    animation: slide-down 250ms ease-in-out;
+    animation: slide-down var(--seldon-accordion-transition-time) ease-in-out;
   }
 
   &--transition[data-state='closed'] {
-    animation: slide-up 250ms ease-in-out;
+    animation: slide-up var(--seldon-accordion-transition-time) ease-in-out;
   }
 
   &[data-state='open'] {

package/package.json

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