@phillips/seldon 1.7.1 → 1.8.0

package/dist/components/ViewingsList/ViewingsListCard.d.ts

@@ -0,0 +1,85 @@
+import * as React from 'react';
+import { ViewingsListCardFormProps } from './ViewingsListCardForm';
+export interface ViewingsListCardProps extends ViewingsListCardFormProps, Record<string, unknown> {
+    /**
+     * Title of card
+     */
+    cardTitle?: string;
+    /**
+     * Optional string to pass for cancel button
+     */
+    cancelBtnLabel?: string;
+    /**
+     * Optional string to pass for delete button
+     */
+    deleteBtnLabel?: string;
+    /**
+     * Optional string to pass for edit button
+     */
+    editBtnLabel?: string;
+    /**
+     * Location of viewing
+     */
+    editState?: boolean;
+    /**
+     * Default boolean to determine whether viewing is enabled on site
+     */
+    enableOnSite?: string;
+    /**
+     * Label for enable on site toggle
+     */
+    enableOnSiteToggleLabel?: string;
+    /**
+     * Location of viewing
+     */
+    location?: string;
+    /**
+     * Location of viewing
+     */
+    locationLabel?: string;
+    /**
+     * Unique id for component
+     */
+    id: string;
+    /**
+     * Validation error message object
+     */
+    invalidFields?: {
+        address1?: string | undefined;
+        address1Url?: string | undefined;
+        address2?: string | undefined;
+        address3?: string | undefined;
+        location?: string | undefined;
+        previewDates?: string | undefined;
+        previewHours1?: string | undefined;
+        previewHours2?: string | undefined;
+        previewLabelValue?: string | undefined;
+        previewOn?: string | undefined;
+        viewingLabelValue?: string | undefined;
+        viewingDates?: string | undefined;
+        viewingHours1?: string | undefined;
+        viewingHours2?: string | undefined;
+    };
+    /**
+     * Callback for when Viewings edits are cancelled
+     */
+    onCancel?: () => void | unknown;
+    /**
+     * Callback for when Viewings item is deleted
+     */
+    onDelete?: (id: string) => void | unknown;
+    /**
+     * Callback for when Viewings item is placed in an editable mode
+     */
+    onEdit?: () => void | unknown;
+    /**
+     * Callback for when form is saved/submitted
+     */
+    onSave?: (e: React.MouseEvent<HTMLElement>) => void | unknown;
+    /**
+     * Optional string to pass for edit button
+     */
+    saveBtnLabel?: string;
+}
+declare const ViewingsListCard: ({ address1, address1Label, addressUrl, addressUrlLabel, address2, address2Label, address3, address3Label, cancelBtnLabel, cardTitle, deleteBtnLabel, editBtnLabel, editState, enableOnSite, enableOnSiteToggleLabel, id, invalidFields, location, locationLabel, onCancel, onEdit, onDelete, onSave, previewDates, previewDatesLabel, previewHours1, previewHours1Label, previewHours2, previewHours2Label, previewLabel, previewLabelValue, previewOn, previewToggleLabel, saveBtnLabel, viewingLabel, viewingLabelValue, viewingDates, viewingDatesLabel, viewingHours1, viewingHours1Label, viewingHours2, viewingHours2Label, }: ViewingsListCardProps) => import("react/jsx-runtime").JSX.Element;
+export default ViewingsListCard;

package/dist/components/ViewingsList/ViewingsListCard.js

@@ -0,0 +1,162 @@
+import { jsxs as a, jsx as t, Fragment as y } from "react/jsx-runtime";
+import * as r from "react";
+import st from "../../node_modules/classnames/index.js";
+import { px as $ } from "../../utils/index.js";
+import g from "../Input/Input.js";
+import u from "../Button/Button.js";
+import ct from "./ViewingsListCardForm.js";
+const l = `${$}-viewings-list-card`, ft = ({
+  address1: C,
+  address1Label: E,
+  addressUrl: T,
+  addressUrlLabel: O,
+  address2: w,
+  address2Label: d,
+  address3: x,
+  address3Label: z,
+  cancelBtnLabel: L = "CANCEL",
+  cardTitle: _ = "Add New Viewing",
+  deleteBtnLabel: k = "DELETE",
+  editBtnLabel: N = "EDIT",
+  editState: o,
+  enableOnSite: i = "false",
+  enableOnSiteToggleLabel: V = "Enabled on website",
+  id: e,
+  invalidFields: n,
+  location: A,
+  locationLabel: I = "Location",
+  onCancel: p,
+  onEdit: f,
+  onDelete: m,
+  onSave: h,
+  previewDates: S,
+  previewDatesLabel: v,
+  previewHours1: j,
+  previewHours1Label: D,
+  previewHours2: R,
+  previewHours2Label: q,
+  previewLabel: B,
+  previewLabelValue: G,
+  previewOn: H,
+  previewToggleLabel: J,
+  saveBtnLabel: K = "SAVE DETAILS",
+  viewingLabel: M,
+  viewingLabelValue: P,
+  viewingDates: Q,
+  viewingDatesLabel: U,
+  viewingHours1: W,
+  viewingHours1Label: X,
+  viewingHours2: Y,
+  viewingHours2Label: Z
+}) => {
+  const [F, tt] = r.useState(i === "true"), c = r.useRef(null);
+  r.useEffect(() => {
+    o && c.current && c.current.focus();
+  }, [o]), r.useEffect(() => {
+    var s, b;
+    n && c.current && ((b = (s = c.current.closest(".phillips-viewings-list-card")) == null ? void 0 : s.querySelector(".phillips-input--invalid input")) == null || b.focus());
+  }, [n]);
+  const et = () => {
+    typeof p == "function" && p();
+  }, nt = () => {
+    typeof f == "function" && f();
+  }, ot = (s) => {
+    typeof h == "function" && h(s);
+  };
+  return /* @__PURE__ */ a(
+    "section",
+    {
+      "data-testid": `viewings-list-card-${e}`,
+      id: e,
+      className: st(`${l}`, { [`${l}--edit-state`]: o }),
+      children: [
+        /* @__PURE__ */ t("h3", { className: `${l}__title`, children: _ }),
+        /* @__PURE__ */ t("input", { type: "hidden", name: "id", value: e }),
+        /* @__PURE__ */ t(
+          g,
+          {
+            ref: c,
+            id: `location-${e}`,
+            defaultValue: A,
+            labelText: I,
+            size: "sm",
+            name: "location",
+            invalid: n == null ? void 0 : n.location,
+            invalidText: n == null ? void 0 : n.location,
+            readOnly: !o
+          }
+        ),
+        o ? /* @__PURE__ */ t(
+          ct,
+          {
+            address1: C,
+            address1Label: E,
+            addressUrl: T,
+            addressUrlLabel: O,
+            address2: w,
+            address2Label: d,
+            address3: x,
+            address3Label: z,
+            id: e,
+            invalidFields: n,
+            previewDates: S,
+            previewDatesLabel: v,
+            previewHours1: j,
+            previewHours1Label: D,
+            previewHours2: R,
+            previewHours2Label: q,
+            previewLabel: B,
+            previewLabelValue: G,
+            previewOn: H,
+            previewToggleLabel: J,
+            viewingLabel: M,
+            viewingLabelValue: P,
+            viewingDates: Q,
+            viewingDatesLabel: U,
+            viewingHours1: W,
+            viewingHours1Label: X,
+            viewingHours2: Y,
+            viewingHours2Label: Z
+          }
+        ) : null,
+        /* @__PURE__ */ t(
+          g,
+          {
+            id: `enableOnSite-${e}`,
+            type: "toggle",
+            defaultChecked: i === "true",
+            labelText: V,
+            size: "md",
+            inline: !0,
+            value: "true",
+            name: "enableOnSite",
+            onChange: () => tt((s) => !s),
+            readOnly: !o
+          }
+        ),
+        F ? null : /* @__PURE__ */ t("input", { type: "hidden", name: "enableOnSite", value: "false" }),
+        /* @__PURE__ */ t("hr", {}),
+        /* @__PURE__ */ t("div", { className: `${l}__btn-group ${$}-button__group`, children: o ? /* @__PURE__ */ a(y, { children: [
+          /* @__PURE__ */ t(u, { id: `vlc-save-btn-${e}`, buttonType: "ghost", type: "submit", size: "sm", onClick: ot, children: K }),
+          /* @__PURE__ */ t(u, { id: `vlc-cancel-btn-${e}`, buttonType: "ghost", type: "button", size: "sm", onClick: et, children: L })
+        ] }) : /* @__PURE__ */ a(y, { children: [
+          /* @__PURE__ */ t(u, { id: `vlc-edit-btn-${e}`, buttonType: "ghost", type: "button", size: "sm", onClick: nt, children: N }),
+          /* @__PURE__ */ t(
+            u,
+            {
+              id: `vlc-delete-btn-${e}`,
+              buttonType: "ghost",
+              type: "button",
+              size: "sm",
+              onClick: () => typeof m == "function" && m(e),
+              children: k
+            }
+          )
+        ] }) })
+      ]
+    }
+  );
+};
+export {
+  ft as default
+};

package/dist/components/ViewingsList/ViewingsListCardForm.d.ts

@@ -0,0 +1,131 @@
+export interface ViewingsListCardFormProps {
+    /**
+     * Address1 of viewing
+     */
+    address1?: string;
+    /**
+     * Label for address1 input
+     */
+    address1Label?: string;
+    /**
+     * URL for a map link to address1
+     */
+    addressUrl?: string;
+    /**
+     * Label for address1 url input
+     */
+    addressUrlLabel?: string;
+    /**
+     * Address2 of viewing
+     */
+    address2?: string;
+    /**
+     * Label for address2 input
+     */
+    address2Label?: string;
+    /**
+     * Address3 of viewing
+     */
+    address3?: string;
+    /**
+     * Label for address3 input
+     */
+    address3Label?: string;
+    /**
+     * Unique id for ViewingListCard component
+     */
+    id: string;
+    /**
+     * Validation error message object
+     */
+    invalidFields?: {
+        address1?: string | undefined;
+        addressUrl?: string | undefined;
+        address2?: string | undefined;
+        address3?: string | undefined;
+        location?: string | undefined;
+        previewDates?: string | undefined;
+        previewHours1?: string | undefined;
+        previewHours2?: string | undefined;
+        previewLabelValue?: string | undefined;
+        previewOn?: string | undefined;
+        viewingLabelValue?: string | undefined;
+        viewingDates?: string | undefined;
+        viewingHours1?: string | undefined;
+        viewingHours2?: string | undefined;
+    };
+    /**
+     * Label for preview label input
+     */
+    previewLabel?: string;
+    /**
+     * Value for preview label input
+     */
+    previewLabelValue?: string;
+    /**
+     * How large should the button be?
+     */
+    previewDates?: string;
+    /**
+     * Label for preview date input
+     */
+    previewDatesLabel?: string;
+    /**
+     * Default value for preview hours input
+     */
+    previewHours1?: string;
+    /**
+     * Label for preview Hours1 input
+     */
+    previewHours1Label?: string;
+    /**
+     * Default value for preview hours 2 input
+     */
+    previewHours2?: string;
+    /**
+     * Label for preview Hours1 input
+     */
+    previewHours2Label?: string;
+    /**
+     * How large should the button be?
+     */
+    previewOn?: string;
+    /**
+     * Label for preview sectioin toggle
+     */
+    previewToggleLabel?: string;
+    /**
+     * Label for viewing label input
+     */
+    viewingLabel?: string;
+    /**
+     * Value for viewing label input
+     */
+    viewingLabelValue?: string;
+    /**
+     * How large should the button be?
+     */
+    viewingDates?: string;
+    /**
+     * Label for viewing date input
+     */
+    viewingDatesLabel?: string;
+    /**
+     * Default value for viewing hours input
+     */
+    viewingHours1?: string;
+    /**
+     * Label for viewing Hours1 input
+     */
+    viewingHours1Label?: string;
+    /**
+     * Default value for viewing hours 2 input
+     */
+    viewingHours2?: string;
+    /**
+     * Label for viewing Hours1 input
+     */
+    viewingHours2Label?: string;
+}
+declare const ViewingsListCardForm: ({ address1, address1Label, addressUrl, addressUrlLabel, address2, address2Label, address3, address3Label, id, invalidFields, previewDates, previewDatesLabel, previewHours1, previewHours1Label, previewHours2, previewHours2Label, previewLabel, previewLabelValue, previewOn, previewToggleLabel, viewingLabel, viewingLabelValue, viewingDates, viewingDatesLabel, viewingHours1, viewingHours1Label, viewingHours2, viewingHours2Label, }: ViewingsListCardFormProps) => import("react/jsx-runtime").JSX.Element;
+export default ViewingsListCardForm;

package/dist/components/ViewingsList/ViewingsListCardForm.js

@@ -0,0 +1,218 @@
+import { jsxs as p, Fragment as Y, jsx as t } from "react/jsx-runtime";
+import Z from "../../node_modules/classnames/index.js";
+import * as x from "react";
+import { px as q } from "../../utils/index.js";
+import u from "../Input/Input.js";
+const T = `${q}-viewings-list-card-form`, M = ({
+  address1: b,
+  address1Label: f = "Address ('432 Park Ave', ETC)",
+  addressUrl: g,
+  addressUrlLabel: H = "URL for map link ('http://www.website.com')",
+  address2: V,
+  address2Label: a = "City, State, Zip ('New York, NY 10019')",
+  address3: $,
+  address3Label: c = "Country (United States)",
+  id: r,
+  invalidFields: e,
+  previewDates: z,
+  previewDatesLabel: h = "Date(s)",
+  previewHours1: L,
+  previewHours1Label: D = "Hours1",
+  previewHours2: C,
+  previewHours2Label: O = "Hours2",
+  previewLabel: U = "Label ('Preview', 'Opening NIght', etc)",
+  previewLabelValue: y,
+  previewOn: m = "false",
+  previewToggleLabel: S = "Preview/ Reception",
+  viewingLabel: k = "Label ('Open to public')",
+  viewingLabelValue: N,
+  viewingDates: P,
+  viewingDatesLabel: _ = "Date(s)",
+  viewingHours1: R,
+  viewingHours1Label: j = "Hours1",
+  viewingHours2: A,
+  viewingHours2Label: E = "Hours2"
+}) => {
+  const [w, o] = x.useState(m === "true");
+  return x.useEffect(() => {
+    o(m === "true");
+  }, [m]), /* @__PURE__ */ p(Y, { children: [
+    /* @__PURE__ */ t(
+      u,
+      {
+        id: `previewOn-${r}`,
+        type: "toggle",
+        labelText: S,
+        size: "md",
+        defaultChecked: w,
+        inline: !0,
+        invalid: e == null ? void 0 : e.previewOn,
+        invalidText: e == null ? void 0 : e.previewOn,
+        value: !0,
+        name: "previewOn",
+        onChange: () => o((I) => !I)
+      }
+    ),
+    w ? null : /* @__PURE__ */ t("input", { type: "hidden", name: "previewOn", value: "false" }),
+    /* @__PURE__ */ p(
+      "div",
+      {
+        className: Z(`${T}__preview-set`, { [`${T}__preview-set--hidden`]: !w }),
+        children: [
+          /* @__PURE__ */ t(
+            u,
+            {
+              id: `previewLabel-${r}`,
+              name: "previewLabelValue",
+              defaultValue: y,
+              labelText: U,
+              size: "sm",
+              invalid: e == null ? void 0 : e.previewLabelValue,
+              invalidText: e == null ? void 0 : e.previewLabelValue,
+              hidden: !w
+            }
+          ),
+          /* @__PURE__ */ t(
+            u,
+            {
+              id: `previewDates-${r}`,
+              name: "previewDates",
+              defaultValue: z,
+              labelText: h,
+              size: "sm",
+              invalid: e == null ? void 0 : e.previewDates,
+              invalidText: e == null ? void 0 : e.previewDates,
+              hidden: !w
+            }
+          ),
+          /* @__PURE__ */ t(
+            u,
+            {
+              id: `previewHours1-${r}`,
+              name: "previewHours1",
+              defaultValue: L,
+              labelText: D,
+              size: "sm",
+              invalid: e == null ? void 0 : e.previewHours1,
+              invalidText: e == null ? void 0 : e.previewHours1,
+              hidden: !w
+            }
+          ),
+          /* @__PURE__ */ t(
+            u,
+            {
+              id: `previewHours2-${r}`,
+              name: "previewHours2",
+              defaultValue: C,
+              labelText: O,
+              size: "sm",
+              invalid: e == null ? void 0 : e.previewHours2,
+              invalidText: e == null ? void 0 : e.previewHours2,
+              hidden: !w
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ t(
+      u,
+      {
+        id: `viewingLabel-${r}`,
+        name: "viewingLabelValue",
+        defaultValue: N,
+        labelText: k,
+        size: "sm",
+        invalid: e == null ? void 0 : e.viewingLabelValue,
+        invalidText: e == null ? void 0 : e.viewingLabelValue
+      }
+    ),
+    /* @__PURE__ */ t(
+      u,
+      {
+        id: `viewingDates-${r}`,
+        name: "viewingDates",
+        defaultValue: P,
+        labelText: _,
+        size: "sm",
+        invalid: e == null ? void 0 : e.viewingDates,
+        invalidText: e == null ? void 0 : e.viewingDates
+      }
+    ),
+    /* @__PURE__ */ t(
+      u,
+      {
+        id: `viewingHours1-${r}`,
+        name: "viewingHours1",
+        defaultValue: R,
+        labelText: j,
+        size: "sm",
+        invalid: e == null ? void 0 : e.viewingHours1,
+        invalidText: e == null ? void 0 : e.viewingHours1
+      }
+    ),
+    /* @__PURE__ */ t(
+      u,
+      {
+        id: `viewingHours2-${r}`,
+        name: "viewingHours2",
+        defaultValue: A,
+        labelText: E,
+        size: "sm",
+        invalid: e == null ? void 0 : e.viewingHours2,
+        invalidText: e == null ? void 0 : e.viewingHours2
+      }
+    ),
+    /* @__PURE__ */ t(
+      u,
+      {
+        id: `address1-${r}`,
+        name: "address1",
+        defaultValue: b,
+        labelText: f,
+        size: "sm",
+        invalid: e == null ? void 0 : e.address1,
+        invalidText: e == null ? void 0 : e.address1
+      }
+    ),
+    /* @__PURE__ */ t(
+      u,
+      {
+        id: `address2-${r}`,
+        name: "address2",
+        defaultValue: V,
+        labelText: a,
+        size: "sm",
+        invalid: e == null ? void 0 : e.address2,
+        invalidText: e == null ? void 0 : e.address2
+      }
+    ),
+    /* @__PURE__ */ t(
+      u,
+      {
+        id: `address3-${r}`,
+        name: "address3",
+        defaultValue: $,
+        labelText: c,
+        size: "sm",
+        invalid: e == null ? void 0 : e.address3,
+        invalidText: e == null ? void 0 : e.address3
+      }
+    ),
+    /* @__PURE__ */ t(
+      u,
+      {
+        id: `addressUrl-${r}`,
+        name: "addressUrl",
+        defaultValue: g,
+        labelText: H,
+        size: "sm",
+        type: "url",
+        invalid: e == null ? void 0 : e.addressUrl,
+        invalidText: e == null ? void 0 : e.addressUrl
+      }
+    )
+  ] });
+};
+export {
+  M as default
+};

package/dist/index.d.ts

@@ -4,4 +4,6 @@ export { default as Header } from './components/Header/Header';
 export { default as HeroBanner } from './components/HeroBanner/HeroBanner';
 export { default as Input } from './components/Input/Input';
 export { default as Select } from './components/Select/Select';
+export { default as ViewingsList } from './components/ViewingsList/ViewingsList';
+export { default as StatefulViewingsList } from './components/ViewingsList/StatefulViewingsList';
 export { default as Page } from './pages/Page';

package/dist/index.js

@@ -1,16 +1,20 @@
-import { default as a } from "./components/Button/Button.js";
-import { default as t } from "./components/ErrorBoundary/ErrorBoundary.js";
-import { default as u } from "./components/Header/Header.js";
-import { default as l } from "./components/HeroBanner/HeroBanner.js";
-import { default as m } from "./components/Input/Input.js";
+import { default as r } from "./components/Button/Button.js";
+import { default as o } from "./components/ErrorBoundary/ErrorBoundary.js";
+import { default as s } from "./components/Header/Header.js";
+import { default as d } from "./components/HeroBanner/HeroBanner.js";
+import { default as p } from "./components/Input/Input.js";
 import { default as x } from "./components/Select/Select.js";
-import { default as B } from "./pages/Page.js";
+import { default as i } from "./components/ViewingsList/ViewingsList.js";
+import { default as B } from "./components/ViewingsList/StatefulViewingsList.js";
+import { default as H } from "./pages/Page.js";
 export {
-  a as Button,
-  t as ErrorBoundary,
-  u as Header,
-  l as HeroBanner,
-  m as Input,
-  B as Page,
-  x as Select
+  r as Button,
+  o as ErrorBoundary,
+  s as Header,
+  d as HeroBanner,
+  p as Input,
+  H as Page,
+  x as Select,
+  B as StatefulViewingsList,
+  i as ViewingsList
 };

package/dist/scss/_reset.scss

@@ -1,4 +1,6 @@
-*, *::before, *::after {
+*,
+*::before,
+*::after {
   box-sizing: border-box;
 }
 
@@ -11,19 +13,32 @@ body {
   -webkit-font-smoothing: antialiased;
 }
 
-img, picture, video, canvas, svg {
+img,
+picture,
+video,
+canvas,
+svg {
   display: block;
   max-width: 100%;
 }
 
-input, button, textarea, select {
+input,
+button,
+textarea,
+select {
   font: inherit;
 }
 
-p, h1, h2, h3, h4, h5, h6 {
+p,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
   overflow-wrap: break-word;
 }
 
 #root {
   isolation: isolate;
-}
+}