@universityofmaryland/web-elements-library 1.5.0-beta.0 → 1.5.0

package/dist/composite/quote/elements/quote.js

@@ -0,0 +1,114 @@
+"use strict";
+const token = require("@universityofmaryland/web-styles-library/token");
+const typography = require("@universityofmaryland/web-styles-library/typography");
+const index = require("../../../model/elements/index.js");
+const icon = require("./icon.js");
+const _constants = require("../_constants.js");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const token__namespace = /* @__PURE__ */ _interopNamespaceDefault(token);
+const typography__namespace = /* @__PURE__ */ _interopNamespaceDefault(typography);
+const splitWords = (quote) => {
+  const text = quote.textContent ?? "";
+  const words = text.trim().split(/\s+/);
+  const wordElements = words.map((word, index2) => {
+    const wordElement = document.createElement("div");
+    wordElement.classList.add("quote-text-split-word");
+    Object.assign(wordElement.style, {
+      display: "inline-block",
+      whiteSpace: "pre-wrap",
+      opacity: "0",
+      transform: "translateY(20px)",
+      transition: "opacity 1s ease, transform 0.5s ease"
+    });
+    wordElement.textContent = word + (index2 < words.length - 1 ? " " : "");
+    return wordElement;
+  });
+  return wordElements;
+};
+const elementQuote = (props) => {
+  const {
+    hasImage = false,
+    includesAnimation = false,
+    isSizeLarge = false,
+    isThemeMaryland = false,
+    isTypeFeatured = false,
+    quote,
+    shouldHaveWhiteText = false
+  } = props;
+  const children = [];
+  const isHasImageAndNotFeatured = hasImage && !isTypeFeatured;
+  const iconSpan = icon(props);
+  const wordsList = splitWords(quote);
+  let quoteTextElement = quote;
+  if (!hasImage) {
+    children.push(iconSpan);
+  }
+  if (includesAnimation) {
+    quoteTextElement = document.createElement("div");
+    wordsList.map((word) => {
+      quoteTextElement.appendChild(word);
+    });
+  }
+  const quoteElement = index.create({
+    element: quoteTextElement,
+    className: "quote-container-quote",
+    children,
+    elementStyles: {
+      element: {
+        position: "relative",
+        fontWeight: "700",
+        color: token__namespace.color.black,
+        ...typography__namespace.sans.larger,
+        ...isSizeLarge && { ...typography__namespace.sans.extraLarge },
+        ...shouldHaveWhiteText && {
+          color: token__namespace.color.white
+        },
+        [`&::before`]: {
+          content: '""',
+          position: "absolute",
+          left: `-${token__namespace.spacing.md}`,
+          top: "7px",
+          height: "calc(100% - 14px)",
+          width: "2px",
+          display: "block",
+          backgroundColor: token__namespace.color.red,
+          ...isThemeMaryland && { backgroundColor: token__namespace.color.gold },
+          ...isHasImageAndNotFeatured && {
+            display: "none"
+          },
+          [`@container (min-width: ${_constants.SMALL}px)`]: {
+            left: `-${token__namespace.spacing.md}`
+          },
+          [`@container (max-width: ${_constants.SMALL - 1}px)`]: {
+            ...!isTypeFeatured && {
+              display: "block"
+            }
+          }
+        },
+        ["& *"]: {
+          color: "currentColor",
+          ...!isSizeLarge && { ...typography__namespace.sans.larger },
+          ...isSizeLarge && { ...typography__namespace.sans.extraLarge }
+        }
+      }
+    }
+  });
+  return quoteElement;
+};
+module.exports = elementQuote;
+//# sourceMappingURL=quote.js.map

package/dist/composite/quote/elements/quote.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"quote.js","sources":["../../../../source/composite/quote/elements/quote.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-styles-library/token';\nimport * as typography from '@universityofmaryland/web-styles-library/typography';\nimport { ElementModel } from 'model';\nimport { default as elementIcon } from './icon';\nimport { SMALL } from '../_constants';\nimport { type QuoteTextProps } from '../_types';\nimport { type ElementVisual } from '../../../_types';\n\ninterface QuoteProps\n  extends Pick<\n    QuoteTextProps,\n    | 'quote'\n    | 'isThemeMaryland'\n    | 'isSizeLarge'\n    | 'isTypeFeatured'\n    | 'includesAnimation'\n  > {\n  hasImage?: boolean;\n  shouldHaveWhiteText?: boolean;\n  quote: HTMLElement;\n}\n\nconst splitWords = (quote: HTMLElement) => {\n  const text = quote.textContent ?? '';\n  const words = text.trim().split(/\\s+/);\n\n  const wordElements = words.map((word, index) => {\n    const wordElement = document.createElement('div');\n    wordElement.classList.add('quote-text-split-word');\n\n    Object.assign(wordElement.style, {\n      display: 'inline-block',\n      whiteSpace: 'pre-wrap',\n      opacity: '0',\n      transform: 'translateY(20px)',\n      transition: 'opacity 1s ease, transform 0.5s ease',\n    });\n\n    wordElement.textContent = word + (index < words.length - 1 ? ' ' : '');\n\n    return wordElement;\n  });\n\n  return wordElements;\n};\n\nexport default (props: QuoteProps) => {\n  const {\n    hasImage = false,\n    includesAnimation = false,\n    isSizeLarge = false,\n    isThemeMaryland = false,\n    isTypeFeatured = false,\n    quote,\n    shouldHaveWhiteText = false,\n  } = props;\n\n  const children: ElementVisual[] = [];\n  const isHasImageAndNotFeatured = hasImage && !isTypeFeatured;\n  const iconSpan = elementIcon(props);\n  const wordsList = splitWords(quote);\n  let quoteTextElement: HTMLElement = quote;\n\n  if (!hasImage) {\n    children.push(iconSpan);\n  }\n\n  if (includesAnimation) {\n    quoteTextElement = document.createElement('div');\n\n    wordsList.map((word) => {\n      quoteTextElement.appendChild(word);\n    });\n  }\n\n  const quoteElement = ElementModel.create({\n    element: quoteTextElement,\n    className: 'quote-container-quote',\n    children,\n    elementStyles: {\n      element: {\n        position: 'relative',\n        fontWeight: '700',\n        color: token.color.black,\n        ...typography.sans.larger,\n\n        ...(isSizeLarge && { ...typography.sans.extraLarge }),\n\n        ...(shouldHaveWhiteText && {\n          color: token.color.white,\n        }),\n\n        [`&::before`]: {\n          content: '\"\"',\n          position: 'absolute',\n          left: `-${token.spacing.md}`,\n          top: '7px',\n          height: 'calc(100% - 14px)',\n          width: '2px',\n          display: 'block',\n          backgroundColor: token.color.red,\n          ...(isThemeMaryland && { backgroundColor: token.color.gold }),\n\n          ...(isHasImageAndNotFeatured && {\n            display: 'none',\n          }),\n\n          [`@container (min-width: ${SMALL}px)`]: {\n            left: `-${token.spacing.md}`,\n          },\n\n          [`@container (max-width: ${SMALL - 1}px)`]: {\n            ...(!isTypeFeatured && {\n              display: 'block',\n            }),\n          },\n        },\n\n        ['& *']: {\n          color: 'currentColor',\n          ...(!isSizeLarge && { ...typography.sans.larger }),\n          ...(isSizeLarge && { ...typography.sans.extraLarge }),\n        },\n      },\n    },\n  });\n\n  return quoteElement;\n};\n"],"names":["index","elementIcon","ElementModel.create","token","typography","SMALL"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAsBA,MAAM,aAAa,CAAC,UAAuB;AACzC,QAAM,OAAO,MAAM,eAAe;AAClC,QAAM,QAAQ,KAAK,KAAA,EAAO,MAAM,KAAK;AAErC,QAAM,eAAe,MAAM,IAAI,CAAC,MAAMA,WAAU;AAC9C,UAAM,cAAc,SAAS,cAAc,KAAK;AAChD,gBAAY,UAAU,IAAI,uBAAuB;AAEjD,WAAO,OAAO,YAAY,OAAO;AAAA,MAC/B,SAAS;AAAA,MACT,YAAY;AAAA,MACZ,SAAS;AAAA,MACT,WAAW;AAAA,MACX,YAAY;AAAA,IAAA,CACb;AAED,gBAAY,cAAc,QAAQA,SAAQ,MAAM,SAAS,IAAI,MAAM;AAEnE,WAAO;AAAA,EACT,CAAC;AAED,SAAO;AACT;AAEA,MAAA,eAAe,CAAC,UAAsB;AACpC,QAAM;AAAA,IACJ,WAAW;AAAA,IACX,oBAAoB;AAAA,IACpB,cAAc;AAAA,IACd,kBAAkB;AAAA,IAClB,iBAAiB;AAAA,IACjB;AAAA,IACA,sBAAsB;AAAA,EAAA,IACpB;AAEJ,QAAM,WAA4B,CAAA;AAClC,QAAM,2BAA2B,YAAY,CAAC;AAC9C,QAAM,WAAWC,KAAY,KAAK;AAClC,QAAM,YAAY,WAAW,KAAK;AAClC,MAAI,mBAAgC;AAEpC,MAAI,CAAC,UAAU;AACb,aAAS,KAAK,QAAQ;AAAA,EACxB;AAEA,MAAI,mBAAmB;AACrB,uBAAmB,SAAS,cAAc,KAAK;AAE/C,cAAU,IAAI,CAAC,SAAS;AACtB,uBAAiB,YAAY,IAAI;AAAA,IACnC,CAAC;AAAA,EACH;AAEA,QAAM,eAAeC,MAAAA,OAAoB;AAAA,IACvC,SAAS;AAAA,IACT,WAAW;AAAA,IACX;AAAA,IACA,eAAe;AAAA,MACb,SAAS;AAAA,QACP,UAAU;AAAA,QACV,YAAY;AAAA,QACZ,OAAOC,iBAAM,MAAM;AAAA,QACnB,GAAGC,sBAAW,KAAK;AAAA,QAEnB,GAAI,eAAe,EAAE,GAAGA,sBAAW,KAAK,WAAA;AAAA,QAExC,GAAI,uBAAuB;AAAA,UACzB,OAAOD,iBAAM,MAAM;AAAA,QAAA;AAAA,QAGrB,CAAC,WAAW,GAAG;AAAA,UACb,SAAS;AAAA,UACT,UAAU;AAAA,UACV,MAAM,IAAIA,iBAAM,QAAQ,EAAE;AAAA,UAC1B,KAAK;AAAA,UACL,QAAQ;AAAA,UACR,OAAO;AAAA,UACP,SAAS;AAAA,UACT,iBAAiBA,iBAAM,MAAM;AAAA,UAC7B,GAAI,mBAAmB,EAAE,iBAAiBA,iBAAM,MAAM,KAAA;AAAA,UAEtD,GAAI,4BAA4B;AAAA,YAC9B,SAAS;AAAA,UAAA;AAAA,UAGX,CAAC,0BAA0BE,gBAAK,KAAK,GAAG;AAAA,YACtC,MAAM,IAAIF,iBAAM,QAAQ,EAAE;AAAA,UAAA;AAAA,UAG5B,CAAC,0BAA0BE,WAAAA,QAAQ,CAAC,KAAK,GAAG;AAAA,YAC1C,GAAI,CAAC,kBAAkB;AAAA,cACrB,SAAS;AAAA,YAAA;AAAA,UACX;AAAA,QACF;AAAA,QAGF,CAAC,KAAK,GAAG;AAAA,UACP,OAAO;AAAA,UACP,GAAI,CAAC,eAAe,EAAE,GAAGD,sBAAW,KAAK,OAAA;AAAA,UACzC,GAAI,eAAe,EAAE,GAAGA,sBAAW,KAAK,WAAA;AAAA,QAAW;AAAA,MACrD;AAAA,IACF;AAAA,EACF,CACD;AAED,SAAO;AACT;;"}

package/dist/composite/quote/elements/quote.mjs

@@ -0,0 +1,97 @@
+import * as token from "@universityofmaryland/web-styles-library/token";
+import * as typography from "@universityofmaryland/web-styles-library/typography";
+import { create } from "../../../model/elements/index.mjs";
+import elementIcon from "./icon.mjs";
+import { SMALL } from "../_constants.mjs";
+const splitWords = (quote) => {
+  const text = quote.textContent ?? "";
+  const words = text.trim().split(/\s+/);
+  const wordElements = words.map((word, index) => {
+    const wordElement = document.createElement("div");
+    wordElement.classList.add("quote-text-split-word");
+    Object.assign(wordElement.style, {
+      display: "inline-block",
+      whiteSpace: "pre-wrap",
+      opacity: "0",
+      transform: "translateY(20px)",
+      transition: "opacity 1s ease, transform 0.5s ease"
+    });
+    wordElement.textContent = word + (index < words.length - 1 ? " " : "");
+    return wordElement;
+  });
+  return wordElements;
+};
+const elementQuote = (props) => {
+  const {
+    hasImage = false,
+    includesAnimation = false,
+    isSizeLarge = false,
+    isThemeMaryland = false,
+    isTypeFeatured = false,
+    quote,
+    shouldHaveWhiteText = false
+  } = props;
+  const children = [];
+  const isHasImageAndNotFeatured = hasImage && !isTypeFeatured;
+  const iconSpan = elementIcon(props);
+  const wordsList = splitWords(quote);
+  let quoteTextElement = quote;
+  if (!hasImage) {
+    children.push(iconSpan);
+  }
+  if (includesAnimation) {
+    quoteTextElement = document.createElement("div");
+    wordsList.map((word) => {
+      quoteTextElement.appendChild(word);
+    });
+  }
+  const quoteElement = create({
+    element: quoteTextElement,
+    className: "quote-container-quote",
+    children,
+    elementStyles: {
+      element: {
+        position: "relative",
+        fontWeight: "700",
+        color: token.color.black,
+        ...typography.sans.larger,
+        ...isSizeLarge && { ...typography.sans.extraLarge },
+        ...shouldHaveWhiteText && {
+          color: token.color.white
+        },
+        [`&::before`]: {
+          content: '""',
+          position: "absolute",
+          left: `-${token.spacing.md}`,
+          top: "7px",
+          height: "calc(100% - 14px)",
+          width: "2px",
+          display: "block",
+          backgroundColor: token.color.red,
+          ...isThemeMaryland && { backgroundColor: token.color.gold },
+          ...isHasImageAndNotFeatured && {
+            display: "none"
+          },
+          [`@container (min-width: ${SMALL}px)`]: {
+            left: `-${token.spacing.md}`
+          },
+          [`@container (max-width: ${SMALL - 1}px)`]: {
+            ...!isTypeFeatured && {
+              display: "block"
+            }
+          }
+        },
+        ["& *"]: {
+          color: "currentColor",
+          ...!isSizeLarge && { ...typography.sans.larger },
+          ...isSizeLarge && { ...typography.sans.extraLarge }
+        }
+      }
+    }
+  });
+  return quoteElement;
+};
+export {
+  elementQuote as default
+};
+//# sourceMappingURL=quote.mjs.map

package/dist/composite/quote/elements/quote.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"quote.mjs","sources":["../../../../source/composite/quote/elements/quote.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-styles-library/token';\nimport * as typography from '@universityofmaryland/web-styles-library/typography';\nimport { ElementModel } from 'model';\nimport { default as elementIcon } from './icon';\nimport { SMALL } from '../_constants';\nimport { type QuoteTextProps } from '../_types';\nimport { type ElementVisual } from '../../../_types';\n\ninterface QuoteProps\n  extends Pick<\n    QuoteTextProps,\n    | 'quote'\n    | 'isThemeMaryland'\n    | 'isSizeLarge'\n    | 'isTypeFeatured'\n    | 'includesAnimation'\n  > {\n  hasImage?: boolean;\n  shouldHaveWhiteText?: boolean;\n  quote: HTMLElement;\n}\n\nconst splitWords = (quote: HTMLElement) => {\n  const text = quote.textContent ?? '';\n  const words = text.trim().split(/\\s+/);\n\n  const wordElements = words.map((word, index) => {\n    const wordElement = document.createElement('div');\n    wordElement.classList.add('quote-text-split-word');\n\n    Object.assign(wordElement.style, {\n      display: 'inline-block',\n      whiteSpace: 'pre-wrap',\n      opacity: '0',\n      transform: 'translateY(20px)',\n      transition: 'opacity 1s ease, transform 0.5s ease',\n    });\n\n    wordElement.textContent = word + (index < words.length - 1 ? ' ' : '');\n\n    return wordElement;\n  });\n\n  return wordElements;\n};\n\nexport default (props: QuoteProps) => {\n  const {\n    hasImage = false,\n    includesAnimation = false,\n    isSizeLarge = false,\n    isThemeMaryland = false,\n    isTypeFeatured = false,\n    quote,\n    shouldHaveWhiteText = false,\n  } = props;\n\n  const children: ElementVisual[] = [];\n  const isHasImageAndNotFeatured = hasImage && !isTypeFeatured;\n  const iconSpan = elementIcon(props);\n  const wordsList = splitWords(quote);\n  let quoteTextElement: HTMLElement = quote;\n\n  if (!hasImage) {\n    children.push(iconSpan);\n  }\n\n  if (includesAnimation) {\n    quoteTextElement = document.createElement('div');\n\n    wordsList.map((word) => {\n      quoteTextElement.appendChild(word);\n    });\n  }\n\n  const quoteElement = ElementModel.create({\n    element: quoteTextElement,\n    className: 'quote-container-quote',\n    children,\n    elementStyles: {\n      element: {\n        position: 'relative',\n        fontWeight: '700',\n        color: token.color.black,\n        ...typography.sans.larger,\n\n        ...(isSizeLarge && { ...typography.sans.extraLarge }),\n\n        ...(shouldHaveWhiteText && {\n          color: token.color.white,\n        }),\n\n        [`&::before`]: {\n          content: '\"\"',\n          position: 'absolute',\n          left: `-${token.spacing.md}`,\n          top: '7px',\n          height: 'calc(100% - 14px)',\n          width: '2px',\n          display: 'block',\n          backgroundColor: token.color.red,\n          ...(isThemeMaryland && { backgroundColor: token.color.gold }),\n\n          ...(isHasImageAndNotFeatured && {\n            display: 'none',\n          }),\n\n          [`@container (min-width: ${SMALL}px)`]: {\n            left: `-${token.spacing.md}`,\n          },\n\n          [`@container (max-width: ${SMALL - 1}px)`]: {\n            ...(!isTypeFeatured && {\n              display: 'block',\n            }),\n          },\n        },\n\n        ['& *']: {\n          color: 'currentColor',\n          ...(!isSizeLarge && { ...typography.sans.larger }),\n          ...(isSizeLarge && { ...typography.sans.extraLarge }),\n        },\n      },\n    },\n  });\n\n  return quoteElement;\n};\n"],"names":["ElementModel.create"],"mappings":";;;;;AAsBA,MAAM,aAAa,CAAC,UAAuB;AACzC,QAAM,OAAO,MAAM,eAAe;AAClC,QAAM,QAAQ,KAAK,KAAA,EAAO,MAAM,KAAK;AAErC,QAAM,eAAe,MAAM,IAAI,CAAC,MAAM,UAAU;AAC9C,UAAM,cAAc,SAAS,cAAc,KAAK;AAChD,gBAAY,UAAU,IAAI,uBAAuB;AAEjD,WAAO,OAAO,YAAY,OAAO;AAAA,MAC/B,SAAS;AAAA,MACT,YAAY;AAAA,MACZ,SAAS;AAAA,MACT,WAAW;AAAA,MACX,YAAY;AAAA,IAAA,CACb;AAED,gBAAY,cAAc,QAAQ,QAAQ,MAAM,SAAS,IAAI,MAAM;AAEnE,WAAO;AAAA,EACT,CAAC;AAED,SAAO;AACT;AAEA,MAAA,eAAe,CAAC,UAAsB;AACpC,QAAM;AAAA,IACJ,WAAW;AAAA,IACX,oBAAoB;AAAA,IACpB,cAAc;AAAA,IACd,kBAAkB;AAAA,IAClB,iBAAiB;AAAA,IACjB;AAAA,IACA,sBAAsB;AAAA,EAAA,IACpB;AAEJ,QAAM,WAA4B,CAAA;AAClC,QAAM,2BAA2B,YAAY,CAAC;AAC9C,QAAM,WAAW,YAAY,KAAK;AAClC,QAAM,YAAY,WAAW,KAAK;AAClC,MAAI,mBAAgC;AAEpC,MAAI,CAAC,UAAU;AACb,aAAS,KAAK,QAAQ;AAAA,EACxB;AAEA,MAAI,mBAAmB;AACrB,uBAAmB,SAAS,cAAc,KAAK;AAE/C,cAAU,IAAI,CAAC,SAAS;AACtB,uBAAiB,YAAY,IAAI;AAAA,IACnC,CAAC;AAAA,EACH;AAEA,QAAM,eAAeA,OAAoB;AAAA,IACvC,SAAS;AAAA,IACT,WAAW;AAAA,IACX;AAAA,IACA,eAAe;AAAA,MACb,SAAS;AAAA,QACP,UAAU;AAAA,QACV,YAAY;AAAA,QACZ,OAAO,MAAM,MAAM;AAAA,QACnB,GAAG,WAAW,KAAK;AAAA,QAEnB,GAAI,eAAe,EAAE,GAAG,WAAW,KAAK,WAAA;AAAA,QAExC,GAAI,uBAAuB;AAAA,UACzB,OAAO,MAAM,MAAM;AAAA,QAAA;AAAA,QAGrB,CAAC,WAAW,GAAG;AAAA,UACb,SAAS;AAAA,UACT,UAAU;AAAA,UACV,MAAM,IAAI,MAAM,QAAQ,EAAE;AAAA,UAC1B,KAAK;AAAA,UACL,QAAQ;AAAA,UACR,OAAO;AAAA,UACP,SAAS;AAAA,UACT,iBAAiB,MAAM,MAAM;AAAA,UAC7B,GAAI,mBAAmB,EAAE,iBAAiB,MAAM,MAAM,KAAA;AAAA,UAEtD,GAAI,4BAA4B;AAAA,YAC9B,SAAS;AAAA,UAAA;AAAA,UAGX,CAAC,0BAA0B,KAAK,KAAK,GAAG;AAAA,YACtC,MAAM,IAAI,MAAM,QAAQ,EAAE;AAAA,UAAA;AAAA,UAG5B,CAAC,0BAA0B,QAAQ,CAAC,KAAK,GAAG;AAAA,YAC1C,GAAI,CAAC,kBAAkB;AAAA,cACrB,SAAS;AAAA,YAAA;AAAA,UACX;AAAA,QACF;AAAA,QAGF,CAAC,KAAK,GAAG;AAAA,UACP,OAAO;AAAA,UACP,GAAI,CAAC,eAAe,EAAE,GAAG,WAAW,KAAK,OAAA;AAAA,UACzC,GAAI,eAAe,EAAE,GAAG,WAAW,KAAK,WAAA;AAAA,QAAW;AAAA,MACrD;AAAA,IACF;AAAA,EACF,CACD;AAED,SAAO;AACT;"}

package/dist/composite/quote/elements/text.d.ts

@@ -1,5 +1,5 @@
 import { QuoteTextProps } from '../_types';
-declare const _default: (props: QuoteTextProps) => {
+declare const _default: (props: Pick<QuoteTextProps, "isThemeDark" | "isThemeMaryland" | "isSizeLarge" | "isTypeFeatured" | "image" | "quote" | "attribution" | "attributionSubText" | "action" | "includesAnimation">) => {
     element: HTMLElement;
     className: string;
     styles: string;

package/dist/composite/quote/elements/text.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"text.d.ts","sourceRoot":"","sources":["../../../../source/composite/quote/elements/text.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,WAAW,CAAC;yBAGhC,OAAO,cAAc;;;;;AAArC,wBAkPE"}
+{"version":3,"file":"text.d.ts","sourceRoot":"","sources":["../../../../source/composite/quote/elements/text.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,WAAW,CAAC;yBA2G9C,OAAO,IAAI,CACT,cAAc,EACZ,aAAa,GACb,iBAAiB,GACjB,aAAa,GACb,gBAAgB,GAChB,OAAO,GACP,OAAO,GACP,aAAa,GACb,oBAAoB,GACpB,QAAQ,GACR,mBAAmB,CACtB;;;;;AAbH,wBA0EE"}

package/dist/composite/quote/elements/text.js

@@ -2,8 +2,8 @@
 const token = require("@universityofmaryland/web-styles-library/token");
 const typography = require("@universityofmaryland/web-styles-library/typography");
 const index = require("../../../model/elements/index.js");
-const icon = require("./icon.js");
 const action = require("./action.js");
+const quote = require("./quote.js");
 const _constants = require("../_constants.js");
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
@@ -23,198 +23,129 @@ function _interopNamespaceDefault(e) {
 }
 const token__namespace = /* @__PURE__ */ _interopNamespaceDefault(token);
 const typography__namespace = /* @__PURE__ */ _interopNamespaceDefault(typography);
-const elementText = (props) => {
+const createChildren = (props) => {
   const {
-    isThemeDark,
-    isThemeMaryland,
-    isSizeLarge = false,
-    isTypeFeatured = false,
-    image,
-    quote,
+    action: action$1,
     attribution,
     attributionSubText,
-    action: action$1,
-    includesAnimation
+    hasImage,
+    includesAnimation,
+    isThemeDark,
+    quote: quote$1,
+    shouldHaveWhiteText
   } = props;
-  const createQuoteText = (quote2, quoteChildren) => {
-    let quoteTextElement = quote2;
-    const wordsList = splitWords(quote2);
-    if (includesAnimation) {
-      quoteTextElement = document.createElement("div");
-      wordsList.map((word) => {
-        quoteTextElement.appendChild(word);
-      });
-    }
-    const quoteElement = index.create({
-      element: quoteTextElement,
-      className: "quote-container-quote",
-      children: quoteChildren,
+  const wrapperChildren = [];
+  if (quote$1) {
+    wrapperChildren.push(
+      quote({ ...props, shouldHaveWhiteText, quote: quote$1, hasImage })
+    );
+  }
+  if (attribution) {
+    const attributionElement = index.create({
+      element: attribution,
+      className: "quote-container-attribution",
       elementStyles: {
         element: {
-          position: "relative",
-          fontWeight: "700",
-          color: token__namespace.color.black,
-          ...typography__namespace.sans.larger,
-          ...isSizeLarge && { ...typography__namespace.sans.extraLarge },
-          ...(isThemeDark || isThemeMaryland) && {
-            color: token__namespace.color.white
+          marginTop: token__namespace.spacing.sm,
+          ...includesAnimation && {
+            opacity: "0",
+            transform: "translateY(20px)",
+            transition: "opacity 1s ease, transform 0.5s ease"
           },
-          [`&::before`]: {
-            content: '""',
-            position: "absolute",
-            left: `-${token__namespace.spacing.md}`,
-            top: "7px",
-            height: "calc(100% - 14px)",
-            width: "2px",
-            display: "block",
-            backgroundColor: token__namespace.color.red,
-            ...isThemeMaryland && { backgroundColor: token__namespace.color.gold },
-            ...image && !isTypeFeatured && {
-              display: "none"
-            },
-            [`@container (min-width: ${_constants.SMALL}px)`]: {
-              left: `-${token__namespace.spacing.md}`
-            },
-            [`@container (max-width: ${_constants.SMALL - 1}px)`]: {
-              ...!isTypeFeatured && {
-                display: "block"
-              }
-            }
+          ...isThemeDark && {
+            color: token__namespace.color.white
           },
-          ["& *"]: {
+          [`& *`]: {
             color: "currentColor",
-            ...typography__namespace.sans.larger,
-            ...isSizeLarge && { ...typography__namespace.sans.extraLarge }
+            ...typography__namespace.sans.medium
           }
         }
       }
     });
-    return quoteElement;
-  };
-  const getQuoteTextContainerChildren = (props2) => {
-    const wrapperChildren = [];
-    if (quote) {
-      const quoteChildren = [];
-      const iconSpan = icon(props2);
-      if (!image) {
-        quoteChildren.push(iconSpan);
-      }
-      const quoteElement = createQuoteText(quote, quoteChildren);
-      wrapperChildren.push(quoteElement);
-    }
-    if (attribution) {
-      const attributionElement = index.create({
-        element: attribution,
-        className: "quote-container-attribution",
-        elementStyles: {
-          element: {
-            marginTop: token__namespace.spacing.sm,
-            ...includesAnimation && {
-              opacity: "0",
-              transform: "translateY(20px)",
-              transition: "opacity 1s ease, transform 0.5s ease"
-            },
-            ...isThemeDark && {
-              color: token__namespace.color.white
-            },
-            [`& *`]: {
-              color: "currentColor",
-              ...typography__namespace.sans.medium
-            }
-          }
-        }
-      });
-      wrapperChildren.push(attributionElement);
-    }
-    if (attributionSubText) {
-      const attributionSubTextElement = index.create({
-        element: attributionSubText,
-        className: "quote-container-text-attribution-sub-text",
-        elementStyles: {
-          element: {
-            color: token__namespace.color.gray.dark,
-            fontStyle: "italic",
-            ...typography__namespace.sans.small,
-            ...includesAnimation && {
-              opacity: "0",
-              transform: "translateY(20px)",
-              transition: "opacity 1s ease, transform 0.5s ease"
-            },
-            ...(isThemeDark || isThemeMaryland) && {
-              color: token__namespace.color.white
-            }
+    wrapperChildren.push(attributionElement);
+  }
+  if (attributionSubText) {
+    const attributionSubTextElement = index.create({
+      element: attributionSubText,
+      className: "quote-container-text-attribution-sub-text",
+      elementStyles: {
+        element: {
+          color: token__namespace.color.gray.dark,
+          fontStyle: "italic",
+          ...typography__namespace.sans.small,
+          ...includesAnimation && {
+            opacity: "0",
+            transform: "translateY(20px)",
+            transition: "opacity 1s ease, transform 0.5s ease"
+          },
+          ...shouldHaveWhiteText && {
+            color: token__namespace.color.white
           }
         }
-      });
-      wrapperChildren.push(attributionSubTextElement);
-    }
-    if (action$1) {
-      const actionElement = action({
-        ...props2,
-        action: action$1
-      });
-      wrapperChildren.push(actionElement);
-    }
-    return wrapperChildren;
-  };
-  const splitWords = (quote2) => {
-    const text = quote2.textContent ?? "";
-    const words = text.trim().split(/\s+/);
-    const wordElements = words.map((word, index2) => {
-      const wordElement = document.createElement("div");
-      wordElement.classList.add("quote-text-split-word");
-      Object.assign(wordElement.style, {
-        display: "inline-block",
-        whiteSpace: "pre-wrap",
-        opacity: "0",
-        transform: "translateY(20px)",
-        transition: "opacity 1s ease, transform 0.5s ease"
-      });
-      wordElement.textContent = word + (index2 < words.length - 1 ? " " : "");
-      return wordElement;
+      }
     });
-    return wordElements;
-  };
-  const CreateQuoteTextContainer = (props2) => {
-    const wrapperChildren = getQuoteTextContainerChildren(props2);
-    const wrapper = index.createDiv({
-      className: "quote-text-container-wrapper",
-      children: wrapperChildren
+    wrapperChildren.push(attributionSubTextElement);
+  }
+  if (action$1) {
+    const actionElement = action({
+      ...props,
+      action: action$1
     });
-    return index.createDiv({
-      className: "quote-text-container",
-      children: [wrapper],
-      elementStyles: {
-        element: {
-          width: "100%",
-          ...typography__namespace.sans.medium,
-          [`@container (max-width: ${_constants.SMALL - 1}px)`]: {
-            paddingTop: token__namespace.spacing.lg,
-            paddingLeft: token__namespace.spacing.md,
-            ...!isTypeFeatured && {
-              ...isSizeLarge && { paddingTop: token__namespace.spacing["2xl"] }
-            }
-          },
-          [`@container (min-width: ${_constants.SMALL}px)`]: {
-            paddingLeft: token__namespace.spacing["4xl"],
-            ...!isTypeFeatured && {
-              ...image && { paddingLeft: "0" }
-            }
+    wrapperChildren.push(actionElement);
+  }
+  return wrapperChildren;
+};
+const elementText = (props) => {
+  const {
+    image,
+    isSizeLarge = false,
+    isThemeDark,
+    isThemeMaryland,
+    isTypeFeatured = false
+  } = props;
+  const shouldHaveWhiteText = isThemeDark || isThemeMaryland;
+  const isSizeLargeAndNotFeatured = isSizeLarge && !isTypeFeatured;
+  const hasImage = image != null;
+  const isHasImageAndNotFeatured = hasImage && !isTypeFeatured;
+  const wrapper = index.createDiv({
+    className: "quote-text-container-wrapper",
+    children: [
+      ...createChildren({
+        ...props,
+        shouldHaveWhiteText,
+        hasImage
+      })
+    ]
+  });
+  return index.createDiv({
+    className: "quote-text-container",
+    children: [wrapper],
+    elementStyles: {
+      element: {
+        width: "100%",
+        ...typography__namespace.sans.medium,
+        [`@container (max-width: ${_constants.SMALL - 1}px)`]: {
+          paddingLeft: token__namespace.spacing.md,
+          ...!hasImage && {
+            paddingTop: token__namespace.spacing.lg
           },
-          [`& *`]: {
-            ...typography__namespace.sans.medium,
-            ...isThemeDark && {
-              color: token__namespace.color.white
-            },
-            ...isThemeMaryland && {
-              color: token__namespace.color.white
-            }
+          ...isSizeLargeAndNotFeatured && {
+            paddingTop: token__namespace.spacing["2xl"]
+          }
+        },
+        [`@container (min-width: ${_constants.SMALL}px)`]: {
+          paddingLeft: token__namespace.spacing["4xl"],
+          ...isHasImageAndNotFeatured && { paddingLeft: "0" }
+        },
+        [`& *`]: {
+          ...typography__namespace.sans.medium,
+          ...shouldHaveWhiteText && {
+            color: token__namespace.color.white
           }
         }
       }
-    });
-  };
-  return CreateQuoteTextContainer(props);
+    }
+  });
 };
 module.exports = elementText;
 //# sourceMappingURL=text.js.map

package/dist/composite/quote/elements/text.js.map

@@ -1 +1 @@
-{"version":3,"file":"text.js","sources":["../../../../source/composite/quote/elements/text.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-styles-library/token';\nimport * as typography from '@universityofmaryland/web-styles-library/typography';\nimport { ElementModel } from 'model';\nimport { default as elementIcon } from './icon';\nimport { default as elementAction } from './action';\nimport { SMALL } from '../_constants';\nimport { type QuoteTextProps } from '../_types';\nimport { type ElementVisual } from '../../../_types';\n\nexport default (props: QuoteTextProps) => {\n  const {\n    isThemeDark,\n    isThemeMaryland,\n    isSizeLarge = false,\n    isTypeFeatured = false,\n    image,\n    quote,\n    attribution,\n    attributionSubText,\n    action,\n    includesAnimation,\n  } = props;\n\n  const createQuoteText = (\n    quote: HTMLElement,\n    quoteChildren: ElementVisual[],\n  ) => {\n    let quoteTextElement: HTMLElement = quote;\n    const wordsList = splitWords(quote);\n\n    if (includesAnimation) {\n      quoteTextElement = document.createElement('div');\n\n      wordsList.map((word) => {\n        quoteTextElement.appendChild(word);\n      });\n    }\n\n    const quoteElement = ElementModel.create({\n      element: quoteTextElement,\n      className: 'quote-container-quote',\n      children: quoteChildren,\n      elementStyles: {\n        element: {\n          position: 'relative',\n          fontWeight: '700',\n          color: token.color.black,\n          ...typography.sans.larger,\n\n          ...(isSizeLarge && { ...typography.sans.extraLarge }),\n\n          ...((isThemeDark || isThemeMaryland) && {\n            color: token.color.white,\n          }),\n\n          [`&::before`]: {\n            content: '\"\"',\n            position: 'absolute',\n            left: `-${token.spacing.md}`,\n            top: '7px',\n            height: 'calc(100% - 14px)',\n            width: '2px',\n            display: 'block',\n            backgroundColor: token.color.red,\n            ...(isThemeMaryland && { backgroundColor: token.color.gold }),\n\n            ...(image &&\n              !isTypeFeatured && {\n                display: 'none',\n              }),\n\n            [`@container (min-width: ${SMALL}px)`]: {\n              left: `-${token.spacing.md}`,\n            },\n\n            [`@container (max-width: ${SMALL - 1}px)`]: {\n              ...(!isTypeFeatured && {\n                display: 'block',\n              }),\n            },\n          },\n\n          ['& *']: {\n            color: 'currentColor',\n            ...typography.sans.larger,\n            ...(isSizeLarge && { ...typography.sans.extraLarge }),\n          },\n        },\n      },\n    });\n\n    return quoteElement;\n  };\n\n  const getQuoteTextContainerChildren = (props: QuoteTextProps) => {\n    const wrapperChildren: ElementVisual[] = [];\n\n    if (quote) {\n      const quoteChildren: ElementVisual[] = [];\n      const iconSpan = elementIcon(props);\n\n      if (!image) {\n        quoteChildren.push(iconSpan);\n      }\n\n      const quoteElement = createQuoteText(quote, quoteChildren);\n\n      wrapperChildren.push(quoteElement);\n    }\n\n    if (attribution) {\n      const attributionElement = ElementModel.create({\n        element: attribution,\n        className: 'quote-container-attribution',\n        elementStyles: {\n          element: {\n            marginTop: token.spacing.sm,\n\n            ...(includesAnimation && {\n              opacity: '0',\n              transform: 'translateY(20px)',\n              transition: 'opacity 1s ease, transform 0.5s ease',\n            }),\n\n            ...(isThemeDark && {\n              color: token.color.white,\n            }),\n\n            [`& *`]: {\n              color: 'currentColor',\n              ...typography.sans.medium,\n            },\n          },\n        },\n      });\n\n      wrapperChildren.push(attributionElement);\n    }\n\n    if (attributionSubText) {\n      const attributionSubTextElement = ElementModel.create({\n        element: attributionSubText,\n        className: 'quote-container-text-attribution-sub-text',\n        elementStyles: {\n          element: {\n            color: token.color.gray.dark,\n            fontStyle: 'italic',\n            ...typography.sans.small,\n\n            ...(includesAnimation && {\n              opacity: '0',\n              transform: 'translateY(20px)',\n              transition: 'opacity 1s ease, transform 0.5s ease',\n            }),\n\n            ...((isThemeDark || isThemeMaryland) && {\n              color: token.color.white,\n            }),\n          },\n        },\n      });\n\n      wrapperChildren.push(attributionSubTextElement);\n    }\n\n    if (action) {\n      const actionElement = elementAction({\n        ...props,\n        action,\n      });\n\n      wrapperChildren.push(actionElement);\n    }\n\n    return wrapperChildren;\n  };\n\n  const splitWords = (quote: HTMLElement) => {\n    const text = quote.textContent ?? '';\n    const words = text.trim().split(/\\s+/);\n\n    const wordElements = words.map((word, index) => {\n      const wordElement = document.createElement('div');\n      wordElement.classList.add('quote-text-split-word');\n\n      Object.assign(wordElement.style, {\n        display: 'inline-block',\n        whiteSpace: 'pre-wrap',\n        opacity: '0',\n        transform: 'translateY(20px)',\n        transition: 'opacity 1s ease, transform 0.5s ease',\n      });\n\n      wordElement.textContent = word + (index < words.length - 1 ? ' ' : '');\n\n      return wordElement;\n    });\n\n    return wordElements;\n  };\n\n  const CreateQuoteTextContainer = (props: QuoteTextProps) => {\n    const wrapperChildren = getQuoteTextContainerChildren(props);\n\n    const wrapper = ElementModel.createDiv({\n      className: 'quote-text-container-wrapper',\n      children: wrapperChildren,\n    });\n\n    return ElementModel.createDiv({\n      className: 'quote-text-container',\n      children: [wrapper],\n      elementStyles: {\n        element: {\n          width: '100%',\n          ...typography.sans.medium,\n\n          [`@container (max-width: ${SMALL - 1}px)`]: {\n            paddingTop: token.spacing.lg,\n            paddingLeft: token.spacing.md,\n\n            ...(!isTypeFeatured && {\n              ...(isSizeLarge && { paddingTop: token.spacing['2xl'] }),\n            }),\n          },\n\n          [`@container (min-width: ${SMALL}px)`]: {\n            paddingLeft: token.spacing['4xl'],\n\n            ...(!isTypeFeatured && {\n              ...(image && { paddingLeft: '0' }),\n            }),\n          },\n\n          [`& *`]: {\n            ...typography.sans.medium,\n\n            ...(isThemeDark && {\n              color: token.color.white,\n            }),\n\n            ...(isThemeMaryland && {\n              color: token.color.white,\n            }),\n          },\n        },\n      },\n    });\n  };\n\n  return CreateQuoteTextContainer(props);\n};\n"],"names":["action","quote","ElementModel.create","token","typography","SMALL","props","elementIcon","elementAction","index","ElementModel.createDiv"],"mappings":"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"}
+{"version":3,"file":"text.js","sources":["../../../../source/composite/quote/elements/text.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-styles-library/token';\nimport * as typography from '@universityofmaryland/web-styles-library/typography';\nimport { ElementModel } from 'model';\nimport { default as elementAction } from './action';\nimport { default as elementQuote } from './quote';\nimport { SMALL } from '../_constants';\nimport { type QuoteTextProps } from '../_types';\nimport { type ElementVisual } from '../../../_types';\n\ninterface ChildrenProps\n  extends Pick<\n    QuoteTextProps,\n    | 'quote'\n    | 'image'\n    | 'attribution'\n    | 'attributionSubText'\n    | 'action'\n    | 'isThemeDark'\n    | 'isSizeLarge'\n    | 'isTypeFeatured'\n    | 'includesAnimation'\n  > {\n  shouldHaveWhiteText?: boolean;\n  hasImage: boolean;\n}\n\nconst createChildren = (props: ChildrenProps) => {\n  const {\n    action,\n    attribution,\n    attributionSubText,\n    hasImage,\n    includesAnimation,\n    isThemeDark,\n    quote,\n    shouldHaveWhiteText,\n  } = props;\n  const wrapperChildren: ElementVisual[] = [];\n\n  if (quote) {\n    wrapperChildren.push(\n      elementQuote({ ...props, shouldHaveWhiteText, quote, hasImage }),\n    );\n  }\n\n  if (attribution) {\n    const attributionElement = ElementModel.create({\n      element: attribution,\n      className: 'quote-container-attribution',\n      elementStyles: {\n        element: {\n          marginTop: token.spacing.sm,\n\n          ...(includesAnimation && {\n            opacity: '0',\n            transform: 'translateY(20px)',\n            transition: 'opacity 1s ease, transform 0.5s ease',\n          }),\n\n          ...(isThemeDark && {\n            color: token.color.white,\n          }),\n\n          [`& *`]: {\n            color: 'currentColor',\n            ...typography.sans.medium,\n          },\n        },\n      },\n    });\n\n    wrapperChildren.push(attributionElement);\n  }\n\n  if (attributionSubText) {\n    const attributionSubTextElement = ElementModel.create({\n      element: attributionSubText,\n      className: 'quote-container-text-attribution-sub-text',\n      elementStyles: {\n        element: {\n          color: token.color.gray.dark,\n          fontStyle: 'italic',\n          ...typography.sans.small,\n\n          ...(includesAnimation && {\n            opacity: '0',\n            transform: 'translateY(20px)',\n            transition: 'opacity 1s ease, transform 0.5s ease',\n          }),\n\n          ...(shouldHaveWhiteText && {\n            color: token.color.white,\n          }),\n        },\n      },\n    });\n\n    wrapperChildren.push(attributionSubTextElement);\n  }\n\n  if (action) {\n    const actionElement = elementAction({\n      ...props,\n      action,\n    });\n\n    wrapperChildren.push(actionElement);\n  }\n\n  return wrapperChildren;\n};\n\nexport default (\n  props: Pick<\n    QuoteTextProps,\n    | 'isThemeDark'\n    | 'isThemeMaryland'\n    | 'isSizeLarge'\n    | 'isTypeFeatured'\n    | 'image'\n    | 'quote'\n    | 'attribution'\n    | 'attributionSubText'\n    | 'action'\n    | 'includesAnimation'\n  >,\n) => {\n  const {\n    image,\n    isSizeLarge = false,\n    isThemeDark,\n    isThemeMaryland,\n    isTypeFeatured = false,\n  } = props;\n  const shouldHaveWhiteText = isThemeDark || isThemeMaryland;\n  const isSizeLargeAndNotFeatured = isSizeLarge && !isTypeFeatured;\n  const hasImage = image != null;\n  const isHasImageAndNotFeatured = hasImage && !isTypeFeatured;\n\n  const wrapper = ElementModel.createDiv({\n    className: 'quote-text-container-wrapper',\n    children: [\n      ...createChildren({\n        ...props,\n        shouldHaveWhiteText,\n        hasImage,\n      }),\n    ],\n  });\n\n  return ElementModel.createDiv({\n    className: 'quote-text-container',\n    children: [wrapper],\n    elementStyles: {\n      element: {\n        width: '100%',\n        ...typography.sans.medium,\n\n        [`@container (max-width: ${SMALL - 1}px)`]: {\n          paddingLeft: token.spacing.md,\n\n          ...(!hasImage && {\n            paddingTop: token.spacing.lg,\n          }),\n\n          ...(isSizeLargeAndNotFeatured && {\n            paddingTop: token.spacing['2xl'],\n          }),\n        },\n\n        [`@container (min-width: ${SMALL}px)`]: {\n          paddingLeft: token.spacing['4xl'],\n\n          ...(isHasImageAndNotFeatured && { paddingLeft: '0' }),\n        },\n\n        [`& *`]: {\n          ...typography.sans.medium,\n\n          ...(shouldHaveWhiteText && {\n            color: token.color.white,\n          }),\n        },\n      },\n    },\n  });\n};\n"],"names":["action","quote","elementQuote","ElementModel.create","token","typography","elementAction","ElementModel.createDiv","SMALL"],"mappings":"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"}