trepur_components 2.3.6 → 2.3.8

package/lib/components/ComponentWrapper/index.d.ts

@@ -0,0 +1,14 @@
+import { Colours } from '../../utils/controls';
+import { CSSProperties } from 'react';
+
+export interface Props {
+    id?: string;
+    className?: string;
+    title?: string;
+    description?: string;
+    bgColour?: Colours;
+    children?: any;
+    styles?: CSSProperties;
+    withContainerPadding?: boolean;
+}
+export declare const ComponentWrapper: ({ id, className, title, description, bgColour, children, styles, withContainerPadding, }: Props) => import("react/jsx-runtime").JSX.Element;

package/lib/components/ComponentWrapper/index.js

@@ -0,0 +1,27 @@
+import { jsx as s, jsxs as t } from "react/jsx-runtime";
+import { Container as p } from "../Container/index.js";
+import a from "classnames";
+const x = ({
+  id: o,
+  className: l,
+  title: e,
+  description: r,
+  bgColour: h = "grey",
+  children: n,
+  styles: c,
+  withContainerPadding: i = !0
+}) => {
+  const m = a(l, "mx-auto w-full"), d = a({
+    "py-8": i
+  });
+  return /* @__PURE__ */ s("div", { id: o, className: m, style: c, children: /* @__PURE__ */ t(p, { withPadding: !0, className: d, children: [
+    /* @__PURE__ */ t("div", { className: "pt-0", children: [
+      e !== void 0 && /* @__PURE__ */ s("h2", { className: "pb-2 text-lg font-regular", children: e }),
+      r !== void 0 && /* @__PURE__ */ s("p", { className: "pb-8 text-md font-light", children: r })
+    ] }),
+    n
+  ] }) });
+};
+export {
+  x as ComponentWrapper
+};

package/lib/components/Container/Container.stories.d.ts

@@ -0,0 +1,75 @@
+import { Container } from '.';
+import { StoryObj } from '@storybook/react';
+
+declare const meta: {
+    title: string;
+    component: ({ id, className, children }: import('.').Props) => import("react/jsx-runtime").JSX.Element;
+    argTypes: {
+        maxWidth: {
+            type: {
+                name: string;
+                required: boolean;
+            };
+            description: string;
+            control: {
+                type: string;
+                min: number;
+                step: number;
+            };
+            defaultValue: string;
+        };
+        children: {
+            type: {
+                name: string;
+                value: string;
+            };
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        id: {
+            description: string;
+            control: {
+                type: string;
+                default: boolean;
+            };
+            table: {
+                category: string;
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        className: {
+            description: string;
+            control: {
+                type: string;
+                default: boolean;
+            };
+            table: {
+                category: string;
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+    };
+    args: {
+        children: import("react/jsx-runtime").JSX.Element;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof Container>;
+export declare const Default: Story;

package/lib/components/Container/index.d.ts

@@ -0,0 +1,7 @@
+export interface Props {
+    id?: string;
+    className?: string;
+    withPadding?: boolean;
+    children?: any;
+}
+export declare const Container: ({ id, className, children }: Props) => import("react/jsx-runtime").JSX.Element;

package/lib/components/Container/index.js

@@ -0,0 +1,12 @@
+import { jsx as t } from "react/jsx-runtime";
+import a from "classnames";
+const c = ({ id: s, className: m, children: o }) => {
+  const r = a(
+    m,
+    "max-w-[2520px] px-6 md:px-10 lg:px-20"
+  );
+  return /* @__PURE__ */ t("div", { id: s, className: r, children: o });
+};
+export {
+  c as Container
+};

package/lib/components/Counter/Counter.stories.d.ts

@@ -0,0 +1,45 @@
+import { Counter } from '.';
+import { StoryObj } from '@storybook/react';
+
+declare const meta: {
+    title: string;
+    component: ({ id, count, onClick }: import('.').Props) => import("react/jsx-runtime").JSX.Element;
+    argTypes: {
+        id: {
+            description: string;
+            control: {
+                type: string;
+                default: boolean;
+            };
+            table: {
+                category: string;
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        className: {
+            description: string;
+            control: {
+                type: string;
+                default: boolean;
+            };
+            table: {
+                category: string;
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+    };
+    args: {};
+};
+export default meta;
+type Story = StoryObj<typeof Counter>;
+export declare const Default: Story;

package/lib/components/Counter/index.d.ts

@@ -0,0 +1,6 @@
+export interface Props {
+    id?: string;
+    count?: number;
+    onClick?: (count: number) => void;
+}
+export declare const Counter: ({ id, count, onClick }: Props) => import("react/jsx-runtime").JSX.Element;

package/lib/components/Counter/index.js

@@ -0,0 +1,31 @@
+import { jsx as r, jsxs as t } from "react/jsx-runtime";
+import { useState as l } from "react";
+import { Icon as n } from "../Icon/index.js";
+import { faChevronCircleLeft as s, faChevronCircleRight as a } from "@fortawesome/fontawesome-free-solid";
+const h = ({ id: i, count: c = 0, onClick: m }) => {
+  const [e, o] = l(c);
+  return /* @__PURE__ */ r("div", { id: i, className: "z-10 inline-block rounded-lg", children: /* @__PURE__ */ t("div", { className: "flex gap-8", children: [
+    /* @__PURE__ */ r("div", { className: "my-auto cursor-pointer", children: /* @__PURE__ */ r(
+      n,
+      {
+        icon: s,
+        onClick: () => {
+          o(e - 1);
+        }
+      }
+    ) }),
+    /* @__PURE__ */ r("div", { className: "overflow-hidden text-center", children: e }),
+    /* @__PURE__ */ r("div", { className: "my-auto cursor-pointer", children: /* @__PURE__ */ r(
+      n,
+      {
+        icon: a,
+        onClick: () => {
+          o(e + 1);
+        }
+      }
+    ) })
+  ] }) });
+};
+export {
+  h as Counter
+};

package/lib/components/DetailUpdater/DetailUpdater.stories.d.ts

@@ -0,0 +1,104 @@
+import { DetailUpdater } from '.';
+import { StoryObj } from '@storybook/react';
+
+declare const meta: {
+    title: string;
+    component: ({ id, className, title, description, expandText, collapseText, ctaText, onClick, onChange, children, onSubmit, onCancel, value, }: import('.').DetailUpdatesProps) => import("react/jsx-runtime").JSX.Element;
+    parameters: {};
+    argTypes: {
+        title: {
+            description: string;
+            control: string;
+            table: {
+                category: string;
+            };
+        };
+        description: {
+            description: string;
+            control: string;
+            table: {
+                category: string;
+            };
+        };
+        expandText: {
+            description: string;
+            control: string;
+            table: {
+                category: string;
+            };
+        };
+        collapseText: {
+            description: string;
+            control: string;
+            table: {
+                category: string;
+            };
+        };
+        ctaText: {
+            description: string;
+            control: string;
+            table: {
+                category: string;
+            };
+        };
+        onClick: {
+            description: string;
+            control: string;
+            table: {
+                category: string;
+            };
+        };
+        fields: {
+            description: string;
+            control: string;
+            table: {
+                category: string;
+            };
+        };
+        id: {
+            description: string;
+            control: {
+                type: string;
+                default: boolean;
+            };
+            table: {
+                category: string;
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        className: {
+            description: string;
+            control: {
+                type: string;
+                default: boolean;
+            };
+            table: {
+                category: string;
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+    };
+    args: {
+        title: string;
+        description: string;
+        expandText: string;
+        collapseText: string;
+        ctaText: string;
+        onClick: (fieldValues: any) => void;
+        onChange: (value: any) => void;
+        children: import("react/jsx-runtime").JSX.Element;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof DetailUpdater>;
+export declare const Default: Story;

package/lib/components/DetailUpdater/index.d.ts

@@ -0,0 +1,18 @@
+import { default as React } from 'react';
+
+export interface DetailUpdatesProps {
+    id?: string;
+    className?: string;
+    title: string;
+    description?: string;
+    expandText: string;
+    collapseText: string;
+    ctaText: string;
+    onClick?: (fieldValues: any) => void;
+    onChange?: (fieldValues: any) => void;
+    children: React.ReactNode;
+    onSubmit?: () => void;
+    onCancel?: () => void;
+    value?: string;
+}
+export declare const DetailUpdater: ({ id, className, title, description, expandText, collapseText, ctaText, onClick, onChange, children, onSubmit, onCancel, value, }: DetailUpdatesProps) => import("react/jsx-runtime").JSX.Element;

package/lib/components/DetailUpdater/index.js

@@ -0,0 +1,63 @@
+import { jsxs as s, jsx as e } from "react/jsx-runtime";
+import { useState as f } from "react";
+import { Button as N } from "../Button/index.js";
+import "../../node_modules/keen-slider/keen-slider.min.css.js";
+const L = ({
+  id: c,
+  className: n,
+  title: a,
+  description: o,
+  expandText: m,
+  collapseText: p,
+  ctaText: h,
+  onClick: g,
+  onChange: k,
+  children: x,
+  onSubmit: i,
+  onCancel: l,
+  value: r
+}) => {
+  const [d, t] = f(!1);
+  return /* @__PURE__ */ s("div", { id: c, className: n, children: [
+    !d && /* @__PURE__ */ s("div", { className: "mx-4 py-6", children: [
+      /* @__PURE__ */ s("div", { className: "flex justify-between", children: [
+        /* @__PURE__ */ e("p", { className: "font-semiBold text-ink", children: a }),
+        /* @__PURE__ */ e(
+          "p",
+          {
+            className: "cursor-pointer font-semiBold text-ink underline",
+            onClick: () => {
+              t(!0);
+            },
+            children: m
+          }
+        )
+      ] }),
+      /* @__PURE__ */ e("p", { className: "text-ink", children: r !== void 0 ? r : "-" })
+    ] }),
+    d && /* @__PURE__ */ s("div", { className: "mx-4 py-6", children: [
+      /* @__PURE__ */ s("div", { className: "flex justify-between", children: [
+        /* @__PURE__ */ e("p", { className: "font-semiBold text-ink", children: a }),
+        /* @__PURE__ */ e(
+          "p",
+          {
+            className: "cursor-pointer font-semiBold text-ink underline",
+            onClick: () => {
+              l == null || l(), t(!1);
+            },
+            children: p
+          }
+        )
+      ] }),
+      /* @__PURE__ */ e("p", { className: "text-light-grey", children: o }),
+      /* @__PURE__ */ e("div", { className: "grid w-full grid-cols-1 gap-0 py-4 md:grid-cols-2 md:gap-4 lg:w-2/3", children: x }),
+      /* @__PURE__ */ e(N, { variant: "secondary", onClick: () => {
+        i == null || i(), t(!1);
+      }, children: h })
+    ] }),
+    /* @__PURE__ */ e("hr", { className: "text-lightest-grey shadow" })
+  ] });
+};
+export {
+  L as DetailUpdater
+};

package/lib/components/Dialog/Dialog.stories.d.ts

@@ -0,0 +1,145 @@
+import { default as React } from 'react';
+
+declare const meta: {
+    title: string;
+    component: ({ id, className, title, paragraph, dismissText, onDismissClick, primaryCta, secondaryCta, imageUrl, }: import('.').Props) => import("react/jsx-runtime").JSX.Element;
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+        layout: string;
+    };
+    argTypes: {
+        id: {
+            type: {
+                name: string;
+                required: boolean;
+            };
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        className: {
+            type: {
+                name: string;
+                required: boolean;
+            };
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        onDismissClick: {
+            type: {
+                name: string;
+                required: boolean;
+            };
+            description: string;
+            action: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        title: {
+            type: {
+                name: string;
+                required: boolean;
+            };
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        paragraph: {
+            type: {
+                name: string;
+                required: boolean;
+            };
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        dismissText: {
+            type: {
+                name: string;
+                required: boolean;
+            };
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        primaryCta: {
+            type: {
+                name: string;
+                value: string;
+                required: boolean;
+            };
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        secondaryCta: {
+            type: {
+                name: string;
+                value: string;
+                required: boolean;
+            };
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+    };
+    args: {
+        title: string;
+        paragraph: string;
+        dismissText: string;
+        imageUrl: string;
+        onDismissClick: import('@storybook/addon-actions').HandlerFunction;
+        primaryCta: {
+            children: string;
+            palette: string;
+        };
+        secondaryCta: {
+            children: string;
+            variant: string;
+            palette: string;
+        };
+    };
+};
+export declare const _Dialog: (args: any) => React.ReactElement;
+export default meta;

package/lib/components/Dialog/index.d.ts

@@ -0,0 +1,12 @@
+import { Props as ButtonProps } from '../Button';
+
+export interface Props extends Partial<Pick<HTMLElement, 'className' | 'id'>> {
+    title: string;
+    paragraph: string;
+    dismissText: string;
+    onDismissClick?: () => void;
+    primaryCta?: ButtonProps;
+    secondaryCta?: ButtonProps;
+    imageUrl?: string;
+}
+export declare const Dialog: ({ id, className, title, paragraph, dismissText, onDismissClick, primaryCta, secondaryCta, imageUrl, }: Props) => import("react/jsx-runtime").JSX.Element;

package/lib/components/Dialog/index.js

@@ -0,0 +1,78 @@
+import { jsx as t, jsxs as c } from "react/jsx-runtime";
+import { Button as u } from "../Button/index.js";
+import { Image as B } from "../Image/index.js";
+import e from "classnames";
+const L = ({
+  id: f,
+  className: h,
+  title: d,
+  paragraph: x,
+  dismissText: w,
+  onDismissClick: N,
+  primaryCta: l,
+  secondaryCta: s,
+  imageUrl: n
+}) => {
+  const o = !!(l != null && l.children), m = !!(s != null && s.children), p = o && /* @__PURE__ */ t(
+    u,
+    {
+      ...l,
+      className: e(
+        {
+          "w-full": m
+        },
+        l == null ? void 0 : l.className,
+        "mt-2 w-full md:ml-6 md:mt-0"
+      )
+    }
+  ), i = m && /* @__PURE__ */ t(
+    u,
+    {
+      ...s,
+      className: e(
+        {
+          "w-full": o
+        },
+        s == null ? void 0 : s.className,
+        "mt-2 w-full md:ml-6 md:mt-0"
+      )
+    }
+  ), g = e(
+    {
+      "w-full": i
+    },
+    "flex flex-wrap pt-6 md:flex-nowrap"
+  ), v = e({}, "text-md font-regular");
+  return /* @__PURE__ */ c(
+    "div",
+    {
+      id: f,
+      className: e(
+        h,
+        "mx-auto w-full rounded-xl bg-white p-6 text-ink md:w-[608px]"
+      ),
+      children: [
+        /* @__PURE__ */ c("div", { className: "relative pb-2", children: [
+          n !== void 0 && /* @__PURE__ */ t(B, { src: n, height: 3, width: 3 }),
+          /* @__PURE__ */ t(
+            "p",
+            {
+              className: "absolute right-0 top-0 cursor-pointer text-sm font-regular",
+              onClick: N,
+              children: w
+            }
+          )
+        ] }),
+        /* @__PURE__ */ t("p", { className: v, children: d }),
+        /* @__PURE__ */ t("p", { className: "pt-1 font-light", children: x }),
+        (o || m) && /* @__PURE__ */ c("div", { className: g, children: [
+          p,
+          i
+        ] })
+      ]
+    }
+  );
+};
+export {
+  L as Dialog
+};