@uva-glass/component-library 3.45.7 → 3.46.0

package/dist/assets/CopyableText.css

@@ -0,0 +1 @@
+._copyable-text-container_1uv3h_1{cursor:pointer;display:flex;position:relative;width:fit-content}._copyable-text-copy-button_1uv3h_8{align-items:center;background-color:var(--new-color-grey-300);border:none;border-radius:.25rem;display:flex;font-family:inherit;font-size:inherit;font-weight:inherit;gap:.25rem;inset:calc(-.25rem + 1px) auto auto -.5rem;justify-content:center;padding:.25rem .5rem;position:absolute;transition:opacity .15s ease;white-space:nowrap;z-index:10}._copyable-text-container_1uv3h_1:focus-within{outline:none}._copyable-text-copy-visually-hidden_1uv3h_31{border-width:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}

package/dist/components/CopyableText/CopyableText.d.ts

@@ -0,0 +1,11 @@
+export interface CopyableTextProps {
+    /** The text to be copied */
+    text: string;
+    /** Additional class name to style the text so it suits the design */
+    additionalClassName?: string;
+    /** ARIA label for the copy button */
+    ariaLabelCopy?: string;
+    /** ARIA label for the copied state */
+    ariaLabelHasBeenCopied?: string;
+}
+export declare const CopyableText: ({ text, additionalClassName, ariaLabelCopy, ariaLabelHasBeenCopied, }: CopyableTextProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/CopyableText/CopyableText.js

@@ -0,0 +1,63 @@
+import { jsxs as i, jsx as y } from "react/jsx-runtime";
+import { c as b } from "../../clsx-OuTLNxxd.js";
+import { useState as f, useRef as m, useEffect as h } from "react";
+import { Icon as v } from "../Icon/Icon.js";
+import '../../assets/CopyableText.css';const a = {
+  "copyable-text-container": "_copyable-text-container_1uv3h_1",
+  "copyable-text-copy-button": "_copyable-text-copy-button_1uv3h_8",
+  "copyable-text-copy-visually-hidden": "_copyable-text-copy-visually-hidden_1uv3h_31"
+}, C = 2e3, T = ({
+  text: o,
+  additionalClassName: r = "",
+  ariaLabelCopy: s,
+  ariaLabelHasBeenCopied: u
+}) => {
+  const [t, n] = f(!1), c = m(null), x = m(null), [d, e] = f(!1);
+  h(() => () => {
+    c.current && clearTimeout(c.current);
+  }, []);
+  const p = () => {
+    n(!0), c.current = setTimeout(() => {
+      n(!1), e(!1);
+    }, C), navigator.clipboard.writeText(o).catch(() => n(!1));
+  };
+  return /* @__PURE__ */ i(
+    "span",
+    {
+      className: b(a["copyable-text-container"], r),
+      role: "button",
+      tabIndex: 0,
+      onFocus: () => e(!0),
+      onBlur: () => !t && e(!1),
+      onKeyDown: (l) => {
+        e(!0), (l.key === "Enter" || l.key === " ") && (l.preventDefault(), p());
+      },
+      onMouseEnter: () => e(!0),
+      onMouseLeave: () => !t && e(!1),
+      children: [
+        o,
+        d && /* @__PURE__ */ i(
+          "button",
+          {
+            ref: x,
+            className: b(a["copyable-text-copy-button"], r),
+            onClick: p,
+            type: "button",
+            "aria-keyshortcuts": "Enter Space",
+            "aria-label": t ? u ?? "Copied" : s ?? "Copy to clipboard",
+            tabIndex: -1,
+            children: [
+              o,
+              /* @__PURE__ */ y(v, { name: t ? "CheckSmall" : "Copy", size: 20 }),
+              /* @__PURE__ */ y("span", { className: a["copyable-text-copy-visually-hidden"], "aria-live": "polite", children: t ? u ?? "Copied" : s ?? "Copy to clipboard" })
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  T as CopyableText
+};
+//# sourceMappingURL=CopyableText.js.map

package/dist/components/CopyableText/CopyableText.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CopyableText.js","sources":["../../../src/components/CopyableText/CopyableText.tsx"],"sourcesContent":["import { clsx } from 'clsx';\r\nimport { useState, useRef, useEffect } from 'react';\r\n\r\nimport styles from './CopyableText.module.css';\r\n\r\nimport { Icon } from 'components/Icon';\r\n\r\nexport interface CopyableTextProps {\r\n  /** The text to be copied */\r\n  text: string;\r\n  /** Additional class name to style the text so it suits the design */\r\n  additionalClassName?: string;\r\n  /** ARIA label for the copy button */\r\n  ariaLabelCopy?: string;\r\n  /** ARIA label for the copied state */\r\n  ariaLabelHasBeenCopied?: string;\r\n}\r\n\r\nconst COPYTIME = 2000;\r\n\r\nexport const CopyableText = ({\r\n  text,\r\n  additionalClassName = '',\r\n  ariaLabelCopy,\r\n  ariaLabelHasBeenCopied,\r\n}: CopyableTextProps) => {\r\n  const [isCopying, setIsCopying] = useState(false);\r\n  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\r\n  const buttonRef = useRef<HTMLButtonElement | null>(null);\r\n  const [buttonActive, setButtonActive] = useState(false);\r\n\r\n  useEffect(() => {\r\n    return () => {\r\n      if (timeoutRef.current) clearTimeout(timeoutRef.current);\r\n    };\r\n  }, []);\r\n\r\n  const handleCopy = () => {\r\n    setIsCopying(true);\r\n    timeoutRef.current = setTimeout(() => {\r\n      setIsCopying(false);\r\n      setButtonActive(false);\r\n    }, COPYTIME);\r\n    navigator.clipboard.writeText(text).catch(() => setIsCopying(false));\r\n  };\r\n\r\n  return (\r\n    <span\r\n      className={clsx(styles['copyable-text-container'], additionalClassName)}\r\n      role=\"button\"\r\n      tabIndex={0}\r\n      onFocus={() => setButtonActive(true)}\r\n      onBlur={() => !isCopying && setButtonActive(false)}\r\n      onKeyDown={(event) => {\r\n        setButtonActive(true);\r\n        if (event.key === 'Enter' || event.key === ' ') {\r\n          event.preventDefault();\r\n          handleCopy();\r\n        }\r\n      }}\r\n      onMouseEnter={() => setButtonActive(true)}\r\n      onMouseLeave={() => !isCopying && setButtonActive(false)}\r\n    >\r\n      {text}\r\n      {buttonActive && (\r\n        <button\r\n          ref={buttonRef}\r\n          className={clsx(styles['copyable-text-copy-button'], additionalClassName)}\r\n          onClick={handleCopy}\r\n          type=\"button\"\r\n          aria-keyshortcuts=\"Enter Space\"\r\n          aria-label={isCopying ? (ariaLabelHasBeenCopied ?? 'Copied') : (ariaLabelCopy ?? 'Copy to clipboard')}\r\n          tabIndex={-1}\r\n        >\r\n          {text}\r\n          <Icon name={isCopying ? 'CheckSmall' : 'Copy'} size={20} />\r\n          <span className={styles['copyable-text-copy-visually-hidden']} aria-live=\"polite\">\r\n            {isCopying ? (ariaLabelHasBeenCopied ?? 'Copied') : (ariaLabelCopy ?? 'Copy to clipboard')}\r\n          </span>\r\n        </button>\r\n      )}\r\n    </span>\r\n  );\r\n};\r\n"],"names":["COPYTIME","CopyableText","text","additionalClassName","ariaLabelCopy","ariaLabelHasBeenCopied","isCopying","setIsCopying","useState","timeoutRef","useRef","buttonRef","buttonActive","setButtonActive","useEffect","handleCopy","jsxs","clsx","styles","event","Icon","jsx"],"mappings":";;;;;;;;GAkBMA,IAAW,KAEJC,IAAe,CAAC;AAAA,EAC3B,MAAAC;AAAA,EACA,qBAAAC,IAAsB;AAAA,EACtB,eAAAC;AAAA,EACA,wBAAAC;AACF,MAAyB;AACvB,QAAM,CAACC,GAAWC,CAAY,IAAIC,EAAS,EAAK,GAC1CC,IAAaC,EAA6C,IAAI,GAC9DC,IAAYD,EAAiC,IAAI,GACjD,CAACE,GAAcC,CAAe,IAAIL,EAAS,EAAK;AAEtD,EAAAM,EAAU,MACD,MAAM;AACX,IAAIL,EAAW,WAAS,aAAaA,EAAW,OAAO;AAAA,EACzD,GACC,CAAA,CAAE;AAEL,QAAMM,IAAa,MAAM;AACvB,IAAAR,EAAa,EAAI,GACjBE,EAAW,UAAU,WAAW,MAAM;AACpC,MAAAF,EAAa,EAAK,GAClBM,EAAgB,EAAK;AAAA,IACvB,GAAGb,CAAQ,GACX,UAAU,UAAU,UAAUE,CAAI,EAAE,MAAM,MAAMK,EAAa,EAAK,CAAC;AAAA,EACrE;AAEA,SACE,gBAAAS;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,EAAKC,EAAO,yBAAyB,GAAGf,CAAmB;AAAA,MACtE,MAAK;AAAA,MACL,UAAU;AAAA,MACV,SAAS,MAAMU,EAAgB,EAAI;AAAA,MACnC,QAAQ,MAAM,CAACP,KAAaO,EAAgB,EAAK;AAAA,MACjD,WAAW,CAACM,MAAU;AACpB,QAAAN,EAAgB,EAAI,IAChBM,EAAM,QAAQ,WAAWA,EAAM,QAAQ,SACzCA,EAAM,eAAA,GACNJ,EAAA;AAAA,MAEJ;AAAA,MACA,cAAc,MAAMF,EAAgB,EAAI;AAAA,MACxC,cAAc,MAAM,CAACP,KAAaO,EAAgB,EAAK;AAAA,MAEtD,UAAA;AAAA,QAAAX;AAAA,QACAU,KACC,gBAAAI;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,KAAKL;AAAA,YACL,WAAWM,EAAKC,EAAO,2BAA2B,GAAGf,CAAmB;AAAA,YACxE,SAASY;AAAA,YACT,MAAK;AAAA,YACL,qBAAkB;AAAA,YAClB,cAAYT,IAAaD,KAA0B,WAAaD,KAAiB;AAAA,YACjF,UAAU;AAAA,YAET,UAAA;AAAA,cAAAF;AAAA,gCACAkB,GAAA,EAAK,MAAMd,IAAY,eAAe,QAAQ,MAAM,IAAI;AAAA,cACzD,gBAAAe,EAAC,QAAA,EAAK,WAAWH,EAAO,oCAAoC,GAAG,aAAU,UACtE,UAAAZ,IAAaD,KAA0B,WAAaD,KAAiB,oBAAA,CACxE;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAAA;AAIR;"}

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

@@ -0,0 +1,5 @@
+import { Meta } from '@storybook/react';
+import { CopyableTextProps } from './CopyableText';
+declare const _default: Meta<CopyableTextProps>;
+export default _default;
+export declare const CopyableTextExample: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, CopyableTextProps>;

package/dist/components/CopyableText/CopyableText.stories.js

@@ -0,0 +1,36 @@
+import { jsxs as n, jsx as e } from "react/jsx-runtime";
+import { CopyableText as a } from "./CopyableText.js";
+const s = "<CopyableText text={string} additionalClassName={string} ariaLabelCopy={string} ariaLabelHasBeenCopied={string} />", t = document.createElement("style");
+t.type = "text/css";
+t.innerHTML = ".customClass { font-weight: bold; color: #333; }";
+document.head.appendChild(t);
+const p = {
+  title: "Atoms/CopyableText",
+  component: a,
+  argTypes: {
+    additionalClassName: {
+      table: {
+        disable: !0
+      }
+    }
+  },
+  parameters: {
+    inspectComponent: a,
+    codeString: s
+  }
+}, i = (o) => /* @__PURE__ */ n("div", { style: { padding: "1rem", backgroundColor: "#FFF", display: "flex", gap: "1rem", alignItems: "center" }, children: [
+  /* @__PURE__ */ e(a, { ...o }),
+  /* @__PURE__ */ e("span", { children: "EC" }),
+  /* @__PURE__ */ e("span", { children: "Tutoring and Study Guidance Advanced Professional Programme in Conservation and Restoration" })
+] }), r = i.bind({});
+r.args = {
+  text: "3154CAR1VY",
+  additionalClassName: "customClass",
+  ariaLabelCopy: "Copy to clipboard",
+  ariaLabelHasBeenCopied: "Copied to clipboard"
+};
+export {
+  r as CopyableTextExample,
+  p as default
+};
+//# sourceMappingURL=CopyableText.stories.js.map

package/dist/components/CopyableText/CopyableText.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CopyableText.stories.js","sources":["../../../src/components/CopyableText/CopyableText.stories.tsx"],"sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\r\nimport type { CopyableTextProps } from './CopyableText';\r\n\r\nimport { CopyableText } from './CopyableText';\r\n\r\nconst codeString =\r\n  '<CopyableText text={string} additionalClassName={string} ariaLabelCopy={string} ariaLabelHasBeenCopied={string} />';\r\n\r\n// Adding custom styles for the story\r\nconst customStyle = document.createElement('style');\r\ncustomStyle.type = 'text/css';\r\ncustomStyle.innerHTML = '.customClass { font-weight: bold; color: #333; }';\r\ndocument.head.appendChild(customStyle);\r\n\r\n// eslint-disable-next-line import/no-default-export\r\nexport default {\r\n  title: 'Atoms/CopyableText',\r\n  component: CopyableText,\r\n  argTypes: {\r\n    additionalClassName: {\r\n      table: {\r\n        disable: true,\r\n      },\r\n    },\r\n  },\r\n  parameters: {\r\n    inspectComponent: CopyableText,\r\n    codeString,\r\n  },\r\n} as Meta<CopyableTextProps>;\r\n\r\nconst Template: StoryFn<CopyableTextProps> = (args) => {\r\n  return (\r\n    <div style={{ padding: '1rem', backgroundColor: '#FFF', display: 'flex', gap: '1rem', alignItems: 'center' }}>\r\n      <CopyableText {...args} />\r\n      <span>EC</span>\r\n      <span>Tutoring and Study Guidance Advanced Professional Programme in Conservation and Restoration</span>\r\n    </div>\r\n  );\r\n};\r\n\r\nexport const CopyableTextExample = Template.bind({});\r\nCopyableTextExample.args = {\r\n  text: '3154CAR1VY',\r\n  additionalClassName: 'customClass',\r\n  ariaLabelCopy: 'Copy to clipboard',\r\n  ariaLabelHasBeenCopied: 'Copied to clipboard',\r\n};\r\n"],"names":["codeString","customStyle","CopyableText_stories","CopyableText","Template","args","jsxs","jsx","CopyableTextExample"],"mappings":";;AAKA,MAAMA,IACJ,sHAGIC,IAAc,SAAS,cAAc,OAAO;AAClDA,EAAY,OAAO;AACnBA,EAAY,YAAY;AACxB,SAAS,KAAK,YAAYA,CAAW;AAGrC,MAAAC,IAAe;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,qBAAqB;AAAA,MACnB,OAAO;AAAA,QACL,SAAS;AAAA,MAAA;AAAA,IACX;AAAA,EACF;AAAA,EAEF,YAAY;AAAA,IACV,kBAAkBA;AAAA,IAClB,YAAAH;AAAA,EAAA;AAEJ,GAEMI,IAAuC,CAACC,MAE1C,gBAAAC,EAAC,OAAA,EAAI,OAAO,EAAE,SAAS,QAAQ,iBAAiB,QAAQ,SAAS,QAAQ,KAAK,QAAQ,YAAY,YAChG,UAAA;AAAA,EAAA,gBAAAC,EAACJ,GAAA,EAAc,GAAGE,GAAM;AAAA,EACxB,gBAAAE,EAAC,UAAK,UAAA,KAAA,CAAE;AAAA,EACR,gBAAAA,EAAC,UAAK,UAAA,8FAAA,CAA2F;AAAA,GACnG,GAISC,IAAsBJ,EAAS,KAAK,CAAA,CAAE;AACnDI,EAAoB,OAAO;AAAA,EACzB,MAAM;AAAA,EACN,qBAAqB;AAAA,EACrB,eAAe;AAAA,EACf,wBAAwB;AAC1B;"}

package/dist/components/CopyableText/index.d.ts

@@ -0,0 +1 @@
+export * from './CopyableText';

package/dist/components/CopyableText/index.js

@@ -0,0 +1,5 @@
+import { CopyableText as p } from "./CopyableText.js";
+export {
+  p as CopyableText
+};
+//# sourceMappingURL=index.js.map

package/dist/components/CopyableText/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/components/Icon/icons/index.d.ts

@@ -263,6 +263,12 @@ export declare const Icons: {
         desc?: string;
         descId?: string;
     }>;
+    Copy: import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement> & {
+        title?: string;
+        titleId?: string;
+        desc?: string;
+        descId?: string;
+    }>;
     Cross: import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement> & {
         title?: string;
         titleId?: string;