trepur_components 2.3.6 → 2.3.8

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

@@ -0,0 +1,64 @@
+import { HamburgerIcon } from '.';
+import { StoryObj } from '@storybook/react';
+
+declare const meta: {
+    title: string;
+    component: ({ id, className, onClick, variant, }: import('.').Props) => import("react/jsx-runtime").JSX.Element;
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+        layout: string;
+    };
+    argTypes: {
+        onClick: {
+            type: {
+                name: string;
+                required: boolean;
+            };
+            description: string;
+            table: {
+                type: {
+                    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;
+                };
+            };
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof HamburgerIcon>;
+export declare const Default: Story;

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

@@ -0,0 +1,7 @@
+import { default as React } from 'react';
+
+export interface Props extends Partial<Pick<HTMLElement, 'className' | 'id'>> {
+    onClick?: React.MouseEventHandler;
+    variant?: 'primary' | 'secondary' | 'tertiary';
+}
+export declare const HamburgerIcon: ({ id, className, onClick, variant, }: Props) => import("react/jsx-runtime").JSX.Element;

package/lib/components/HamburgerIcon/index.js

@@ -0,0 +1,93 @@
+import { jsx as r, jsxs as y } from "react/jsx-runtime";
+import { useState as u } from "react";
+import { Button as g } from "../Button/index.js";
+import e from "classnames";
+const b = ({
+  id: s,
+  className: n,
+  onClick: a,
+  variant: t = "primary"
+}) => {
+  const [o, l] = u(!1), m = e(
+    {
+      "transition-all duration-500 outline-none fill-primary": t === "secondary",
+      "transition-all duration-500 outline-none fill-secondary": t === "primary",
+      "transition-all duration-500 outline-none fill-tertiary": t === "tertiary"
+    },
+    n
+  ), p = e(
+    {
+      "origin-top-left -translate-y-0.5 translate-x-1 rotate-45": o
+    },
+    "origin-top-left duration-200 ease-linear transition-transform"
+  ), c = e(
+    {
+      "opacity-0": o,
+      "opacity-100": !o
+    },
+    "duration-200 ease-linear transition-opacity"
+  ), d = e(
+    {
+      "origin-bottom-left translate-x-1 translate-y-px -rotate-45": o
+    },
+    "origin-bottom-left duration-200 ease-linear transition-transform"
+  ), f = (i) => {
+    l(!o), a == null || a(i);
+  };
+  return /* @__PURE__ */ r(
+    g,
+    {
+      id: s,
+      className: m,
+      onClick: (i) => {
+        f(i);
+      },
+      variant: t,
+      type: "icon",
+      label: "Mobile menu toggle",
+      children: /* @__PURE__ */ y(
+        "svg",
+        {
+          className: e(
+            {
+              "fill-primary": t === "primary",
+              "fill-secondary": t === "secondary",
+              "fill-tertiary": t === "tertiary"
+            },
+            "transition-backgroundColor mx-auto transform overflow-visible duration-500"
+          ),
+          width: "24",
+          height: "24",
+          viewBox: "0 0 24 15",
+          xmlns: "http://www.w3.org/2000/svg",
+          children: [
+            /* @__PURE__ */ r(
+              "path",
+              {
+                className: p,
+                d: "M0 1.5C0 0.947715 0.447715 0.5 1 0.5H21C21.5523 0.5 22 0.947715 22 1.5C22 2.05228 21.5523 2.5 21 2.5H1C0.447716 2.5 0 2.05228 0 1.5Z"
+              }
+            ),
+            /* @__PURE__ */ r(
+              "path",
+              {
+                className: c,
+                d: "M0 7.5C0 6.94772 0.447715 6.5 1 6.5H21C21.5523 6.5 22 6.94772 22 7.5C22 8.05228 21.5523 8.5 21 8.5H1C0.447716 8.5 0 8.05228 0 7.5Z"
+              }
+            ),
+            /* @__PURE__ */ r(
+              "path",
+              {
+                className: d,
+                d: "M0 13.5C0 12.9477 0.447715 12.5 1 12.5H21C21.5523 12.5 22 12.9477 22 13.5C22 14.0523 21.5523 14.5 21 14.5H1C0.447716 14.5 0 14.0523 0 13.5Z"
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+};
+export {
+  b as HamburgerIcon
+};

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

@@ -0,0 +1,96 @@
+import { HorizontalLine } from '.';
+import { StoryObj } from '@storybook/react';
+
+declare const meta: {
+    title: string;
+    component: ({ id, className, colour, topLine, bottomLine, middleLine, }: import('.').Props) => import("react/jsx-runtime").JSX.Element;
+    argTypes: {
+        colour: {
+            description: string;
+            control: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+            defaultValue: string;
+        };
+        topLine: {
+            description: string;
+            control: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+            defaultValue: string;
+        };
+        bottomLine: {
+            description: string;
+            control: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+            defaultValue: string;
+        };
+        middleLine: {
+            description: string;
+            control: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+            defaultValue: 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;
+                };
+            };
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof HorizontalLine>;
+export declare const Default: Story;

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

@@ -0,0 +1,11 @@
+import { Colours } from '../../utils/controls';
+
+export interface Props {
+    id?: string;
+    className?: string;
+    colour?: Colours;
+    topLine?: boolean;
+    bottomLine?: boolean;
+    middleLine?: boolean;
+}
+export declare const HorizontalLine: ({ id, className, colour, topLine, bottomLine, middleLine, }: Props) => import("react/jsx-runtime").JSX.Element;

package/lib/components/HorizontalLine/index.js

@@ -0,0 +1,24 @@
+import { jsx as t } from "react/jsx-runtime";
+import l from "classnames";
+const f = ({
+  id: r,
+  className: s,
+  colour: n = "primary",
+  topLine: o = !1,
+  bottomLine: m = !1,
+  middleLine: a = !1
+}) => {
+  const e = l(
+    {
+      "mb-6": o,
+      "mt-6": m,
+      "my-6": a
+    },
+    s,
+    "my-0 h-0.5 border-none py-0"
+  );
+  return /* @__PURE__ */ t("hr", { id: r, className: e });
+};
+export {
+  f as HorizontalLine
+};

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

@@ -0,0 +1,47 @@
+import { Icon } from '.';
+import { StoryObj } from '@storybook/react';
+
+declare const meta: {
+    title: string;
+    component: ({ id, icon, colour, size, onClick }: import('.').IconProps) => 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: {
+        icon: import('@fortawesome/fontawesome-free-solid').IconDefinition;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof Icon>;
+export declare const Default: Story;

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

@@ -0,0 +1,10 @@
+import { IconProp, SizeProp } from '@fortawesome/fontawesome-svg-core';
+
+export interface IconProps {
+    id?: string;
+    icon: IconProp;
+    colour?: string;
+    size?: SizeProp;
+    onClick?: () => void;
+}
+export declare const Icon: ({ id, icon, colour, size, onClick }: IconProps) => import("react/jsx-runtime").JSX.Element;

package/lib/components/Icon/index.js

@@ -0,0 +1,15 @@
+import { jsx as c } from "react/jsx-runtime";
+import { FontAwesomeIcon as e } from "@fortawesome/react-fontawesome";
+const x = ({ id: o, icon: r, colour: t, size: m = "1x", onClick: n }) => /* @__PURE__ */ c(
+  e,
+  {
+    onClick: n,
+    id: o,
+    icon: r,
+    size: m,
+    color: t
+  }
+);
+export {
+  x as Icon
+};

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

@@ -0,0 +1,51 @@
+import { IconCard } from '.';
+import { StoryObj } from '@storybook/react';
+
+declare const meta: {
+    title: string;
+    component: ({ id, className, title, description, iconProps, href, target, onClick, }: import('.').IconCardProps) => 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: {
+        title: string;
+        description: string;
+        iconProps: {
+            icon: import('@fortawesome/fontawesome-free-solid').IconDefinition;
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof IconCard>;
+export declare const Default: Story;

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

@@ -0,0 +1,13 @@
+import { IconProps } from '../Icon';
+
+export interface IconCardProps {
+    id?: string;
+    className?: string;
+    title: string;
+    description: string;
+    iconProps: IconProps;
+    href?: string;
+    target?: string;
+    onClick?: () => void;
+}
+export declare const IconCard: ({ id, className, title, description, iconProps, href, target, onClick, }: IconCardProps) => import("react/jsx-runtime").JSX.Element;

package/lib/components/IconCard/index.js

@@ -0,0 +1,27 @@
+import { jsxs as x, jsx as e } from "react/jsx-runtime";
+import { Icon as p } from "../Icon/index.js";
+import h from "classnames";
+const N = ({
+  id: a,
+  className: i,
+  title: o,
+  description: c,
+  iconProps: m,
+  href: s,
+  target: t,
+  onClick: n
+}) => {
+  const d = h(
+    i,
+    "flex flex-col bg-white hover:bg-lightest-grey cursor-pointer shadow-xl drop-shadow mx-auto my-auto w-full rounded-2xl p-4"
+  );
+  let l = "div", r = {};
+  return (s || t) && (l = "a", r = { href: s, title: o, target: t }), /* @__PURE__ */ x(l, { id: a, className: d, onClick: n, ...r, children: [
+    /* @__PURE__ */ e("div", { className: "py-2", children: /* @__PURE__ */ e(p, { ...m, size: "2x" }) }),
+    /* @__PURE__ */ e("p", { className: "pt-6 text-md font-semiBold text-ink", children: o }),
+    /* @__PURE__ */ e("p", { className: "text-light-grey", children: c })
+  ] });
+};
+export {
+  N as IconCard
+};

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

@@ -0,0 +1,158 @@
+import { Image } from '.';
+import { StoryObj } from '@storybook/react';
+
+declare const meta: {
+    title: string;
+    component: ({ id, className, src, altText, title, rounded, roundedFull, height, width, overlayText, centerAligned, bordered, }: import('.').Props) => import("react/jsx-runtime").JSX.Element;
+    argTypes: {
+        image: {
+            type: {
+                name: string;
+                required: boolean;
+            };
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        altText: {
+            type: {
+                name: string;
+                required: boolean;
+            };
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        title: {
+            type: {
+                name: string;
+                required: boolean;
+            };
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        rounded: {
+            type: {
+                name: string;
+                required: boolean;
+            };
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        roundedFull: {
+            type: {
+                name: string;
+                required: boolean;
+            };
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        height: {
+            type: {
+                name: string;
+                required: boolean;
+            };
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        width: {
+            type: {
+                name: string;
+                required: boolean;
+            };
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        overlayText: {
+            type: {
+                name: string;
+                required: boolean;
+            };
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        centerAligned: {
+            type: {
+                name: string;
+                required: boolean;
+            };
+            description: string;
+            table: {
+                type: {
+                    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: {
+        src: string;
+        height: number;
+        width: number;
+        overlayText: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof Image>;
+export declare const Default: Story;

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

@@ -0,0 +1,15 @@
+export interface Props {
+    id?: string;
+    className?: string;
+    src: string;
+    altText?: string;
+    title?: string;
+    rounded?: boolean;
+    roundedFull?: boolean;
+    height?: number;
+    width?: number;
+    overlayText?: string;
+    centerAligned?: boolean;
+    bordered?: boolean;
+}
+export declare const Image: ({ id, className, src, altText, title, rounded, roundedFull, height, width, overlayText, centerAligned, bordered, }: Props) => import("react/jsx-runtime").JSX.Element;