@phillips/seldon 1.42.0 → 1.43.0

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/components/ViewingsList/ViewingsListCard.js

@@ -1,13 +1,13 @@
-import { jsxs as u, jsx as t, Fragment as E } from "react/jsx-runtime";
+import { jsxs as m, jsx as t, Fragment as $ } from "react/jsx-runtime";
 import * as a from "react";
 import mt from "../../node_modules/classnames/index.js";
-import { px as d } from "../../utils/index.js";
+import { px as u } from "../../utils/index.js";
 import y from "../Input/Input.js";
 import c from "../Button/Button.js";
 import { ButtonVariants as l } from "../Button/types.js";
 import ft from "./ViewingsListCardForm.js";
-const i = `${d}-viewings-list-card`, $t = ({
-  address1: $,
+const i = `${u}-viewings-list-card`, dt = ({
+  address1: d,
   address1Label: C,
   addressUrl: O,
   addressUrlLabel: w,
@@ -19,8 +19,8 @@ const i = `${d}-viewings-list-card`, $t = ({
   cardTitle: T = "Add New Viewing",
   deleteBtnLabel: V = "DELETE",
   editBtnLabel: _ = "EDIT",
-  isEditState: s,
-  enableOnSite: m = "false",
+  isEditState: o,
+  enableOnSite: f = "false",
   enableOnSiteToggleLabel: k = "Enabled on website",
   email: I,
   emailLabel: N = "Email",
@@ -32,10 +32,10 @@ const i = `${d}-viewings-list-card`, $t = ({
   invalidFields: n,
   location: R,
   locationLabel: q = "Location",
-  onCancel: f,
-  onEdit: p,
-  onDelete: h,
-  onSave: b,
+  onCancel: p,
+  onEdit: h,
+  onDelete: b,
+  onSave: g,
   previewDates: G,
   previewDatesLabel: H,
   previewHours1: J,
@@ -52,37 +52,37 @@ const i = `${d}-viewings-list-card`, $t = ({
   viewingDates: tt,
   viewingDatesLabel: et,
   viewingHours1: nt,
-  viewingHours1Label: st,
-  viewingHours2: ot,
-  viewingHours2Label: rt
+  viewingHours1Label: ot,
+  viewingHours2: rt,
+  viewingHours2Label: st
 }) => {
-  const [at, ct] = a.useState(m === "true"), r = a.useRef(null);
+  const [at, ct] = a.useState(f === "true"), s = a.useRef(null);
   a.useEffect(() => {
-    s && r.current && r.current.focus();
-  }, [s]), a.useEffect(() => {
-    var o, g;
-    n && r.current && ((g = (o = r.current.closest(".phillips-viewings-list-card")) == null ? void 0 : o.querySelector(".phillips-input--invalid input")) == null || g.focus());
+    o && s.current && s.current.focus();
+  }, [o]), a.useEffect(() => {
+    var r, E;
+    n && s.current && ((E = (r = s.current.closest(`.${u}-viewings-list-card`)) == null ? void 0 : r.querySelector(`.${u}-input--invalid input`)) == null || E.focus());
   }, [n]);
   const lt = () => {
-    typeof f == "function" && f();
-  }, it = () => {
     typeof p == "function" && p();
-  }, ut = (o) => {
-    typeof b == "function" && b(o);
+  }, it = () => {
+    typeof h == "function" && h();
+  }, ut = (r) => {
+    typeof g == "function" && g(r);
   };
-  return /* @__PURE__ */ u(
+  return /* @__PURE__ */ m(
     "section",
     {
       "data-testid": `viewings-list-card-${e}`,
       id: e,
-      className: mt(`${i}`, { [`${i}--edit-state`]: s }),
+      className: mt(`${i}`, { [`${i}--edit-state`]: o }),
       children: [
         /* @__PURE__ */ t("h3", { className: `${i}__title`, children: T }),
         /* @__PURE__ */ t("input", { type: "hidden", name: "id", value: e }),
         /* @__PURE__ */ t(
           y,
           {
-            ref: r,
+            ref: s,
             id: `location-${e}`,
             defaultValue: R,
             labelText: q,
@@ -90,13 +90,13 @@ const i = `${d}-viewings-list-card`, $t = ({
             name: "location",
             invalid: n == null ? void 0 : n.location,
             invalidText: n == null ? void 0 : n.location,
-            readOnly: !s
+            readOnly: !o
           }
         ),
-        s ? /* @__PURE__ */ t(
+        o ? /* @__PURE__ */ t(
           ft,
           {
-            address1: $,
+            address1: d,
             address1Label: C,
             addressUrl: O,
             addressUrlLabel: w,
@@ -127,9 +127,9 @@ const i = `${d}-viewings-list-card`, $t = ({
             viewingDates: tt,
             viewingDatesLabel: et,
             viewingHours1: nt,
-            viewingHours1Label: st,
-            viewingHours2: ot,
-            viewingHours2Label: rt
+            viewingHours1Label: ot,
+            viewingHours2: rt,
+            viewingHours2Label: st
           }
         ) : null,
         /* @__PURE__ */ t(
@@ -137,19 +137,19 @@ const i = `${d}-viewings-list-card`, $t = ({
           {
             id: `enableOnSite-${e}`,
             type: "toggle",
-            defaultChecked: m === "true",
+            defaultChecked: f === "true",
             labelText: k,
             size: "md",
             inline: !0,
             value: "true",
             name: "enableOnSite",
-            onChange: () => ct((o) => !o),
-            readOnly: !s
+            onChange: () => ct((r) => !r),
+            readOnly: !o
           }
         ),
         at ? null : /* @__PURE__ */ t("input", { type: "hidden", name: "enableOnSite", value: "false" }),
         /* @__PURE__ */ t("hr", {}),
-        /* @__PURE__ */ t("div", { className: `${i}__btn-group ${d}-button__group`, children: s ? /* @__PURE__ */ u(E, { children: [
+        /* @__PURE__ */ t("div", { className: `${i}__btn-group ${u}-button__group`, children: o ? /* @__PURE__ */ m($, { children: [
           /* @__PURE__ */ t(
             c,
             {
@@ -172,7 +172,7 @@ const i = `${d}-viewings-list-card`, $t = ({
               children: L
             }
           )
-        ] }) : /* @__PURE__ */ u(E, { children: [
+        ] }) : /* @__PURE__ */ m($, { children: [
           /* @__PURE__ */ t(
             c,
             {
@@ -191,7 +191,7 @@ const i = `${d}-viewings-list-card`, $t = ({
               variant: l.ghost,
               type: "button",
               size: "sm",
-              onClick: () => typeof h == "function" && h(e),
+              onClick: () => typeof b == "function" && b(e),
               children: V
             }
           )
@@ -201,5 +201,5 @@ const i = `${d}-viewings-list-card`, $t = ({
   );
 };
 export {
-  $t as default
+  dt as default
 };

package/dist/scss/_vars.scss

@@ -1,5 +1,5 @@
 // prefix
-$px: phillips;
+$px: seldon;
 
 ////////////////////////
 /// COlORS:

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/dist/utils/index.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-export declare const px = "phillips";
+export declare const px = "seldon";
 /**
  * Returns standard props values incorporating the component name into the class name and data-testid
  */

package/dist/utils/index.js

@@ -1,15 +1,15 @@
 import { jsx as m } from "react/jsx-runtime";
 import { kebabCase as d } from "../node_modules/change-case/dist/index.js";
 import * as u from "react";
-const i = "phillips", x = ({ id: e, ...n }, a) => {
+const s = "seldon", x = ({ id: e, ...n }, a) => {
   const t = d(a);
   return {
     ...n,
     "data-testid": e ? `${t}-${e}` : `${t}`,
-    className: `${i}-${t}`
+    className: `${s}-${t}`
   };
 };
-var p = /* @__PURE__ */ ((e) => (e.xs = "xs", e.sm = "sm", e.md = "md", e.lg = "lg", e.xl = "xl", e.xxl = "xxl", e))(p || {});
+var $ = /* @__PURE__ */ ((e) => (e.xs = "xs", e.sm = "sm", e.md = "md", e.lg = "lg", e.xl = "xl", e.xxl = "xxl", e))($ || {});
 const v = () => {
 };
 function g({
@@ -18,7 +18,7 @@ function g({
   invalid: a = !1,
   invalidText: t = "invalid",
   readOnly: r = !1,
-  type: s,
+  type: i,
   warn: l = !1,
   warnText: c
 }) {
@@ -26,14 +26,14 @@ function g({
     disabled: !r && e,
     invalid: !r && !e && a,
     invalidId: `${n}-error-msg`,
-    type: s === "toggle" ? "checkbox" : s,
+    type: i === "toggle" ? "checkbox" : i,
     warn: !r && !e && !a && l,
     warnId: `${n}-warn-msg`,
     validation: null
   };
-  return o.invalid && (o.validation = /* @__PURE__ */ m("div", { className: `${i}-input__validation ${i}-${s}-input--invalid`, id: o.invalidId, children: t })), o.warn && (o.validation = /* @__PURE__ */ m("div", { className: `${i}-input__validation ${i}-${s}-input--warn`, id: o.warnId, children: c })), o;
+  return o.invalid && (o.validation = /* @__PURE__ */ m("div", { className: `${s}-input__validation ${s}-${i}-input--invalid`, id: o.invalidId, children: t })), o.warn && (o.validation = /* @__PURE__ */ m("div", { className: `${s}-input__validation ${s}-${i}-input--warn`, id: o.warnId, children: c })), o;
 }
-const C = (/* @__PURE__ */ new Date()).getFullYear(), w = (e, n = "end", a = "vertical") => `${i}-padding-${a}-${e}-${n}`, h = (e) => /(.+)@(.+){2,}\.(.+){2,}/i.test(e), I = function(e, n, a = !1) {
+const C = (/* @__PURE__ */ new Date()).getFullYear(), w = (e, n = "end", a = "vertical") => `${s}-padding-${a}-${e}-${n}`, h = (e) => /(.+)@(.+){2,}\.(.+){2,}/i.test(e), I = function(e, n, a = !1) {
   const t = u.Children.toArray(e).filter((r) => r && r.type === n && !a ? r : r && r.type !== n && a);
   return t.length > 0 ? t : null;
 }, N = (e) => {
@@ -41,7 +41,7 @@ const C = (/* @__PURE__ */ new Date()).getFullYear(), w = (e, n = "end", a = "ve
   return `${n[0]}?${r}`;
 };
 export {
-  p as PaddingTokens,
+  $ as PaddingTokens,
   C as defaultYear,
   h as emailValidation,
   N as encodeURLSearchParams,
@@ -49,6 +49,6 @@ export {
   w as generatePaddingClassName,
   x as getCommonProps,
   v as noOp,
-  i as px,
+  s as px,
   g as useNormalizedInputProps
 };

package/package.json

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