@universityofmaryland/web-elements-library 1.5.3 → 1.5.5

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

@@ -1,13 +1,14 @@
-import * as token from "@universityofmaryland/web-styles-library/token";
+import { ElementBuilder } from "@universityofmaryland/web-builder-library";
+import * as token from "@universityofmaryland/web-token-library";
 import * as typography from "@universityofmaryland/web-styles-library/typography";
-import { create } from "../../../model/elements/index.mjs";
+import { theme } from "@universityofmaryland/web-utilities-library/theme";
 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");
+    const wordElement = document.createElement("span");
     wordElement.classList.add("quote-text-split-word");
     Object.assign(wordElement.style, {
       display: "inline-block",
@@ -31,65 +32,53 @@ const elementQuote = (props) => {
     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
+  const fontStyles = isSizeLarge ? typography.sans.compose("extralarge", {
+    theme: theme.fontColor(shouldHaveWhiteText)
+  }) : typography.sans.compose("larger", {
+    theme: theme.fontColor(shouldHaveWhiteText)
+  });
+  const builder = new ElementBuilder(quoteTextElement).styled(fontStyles).withClassName("quote-container-quote").withStyles({
+    element: {
+      position: "relative",
+      fontWeight: "700",
+      [`&::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"
         },
-        [`&::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"
-            }
-          }
+        [`@container (min-width: ${SMALL}px)`]: {
+          left: `-${token.spacing.md}`
         },
-        ["& *"]: {
-          color: "currentColor",
-          ...!isSizeLarge && { ...typography.sans.larger },
-          ...isSizeLarge && { ...typography.sans.extraLarge }
+        [`@container (max-width: ${SMALL - 1}px)`]: {
+          ...!isTypeFeatured && {
+            display: "block"
+          }
         }
       }
     }
   });
-  return quoteElement;
+  if (!hasImage) {
+    builder.withChild(iconSpan);
+  }
+  return builder.build();
 };
 export {
   elementQuote as default

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

@@ -1 +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;"}
+{"version":3,"file":"quote.mjs","sources":["../../../../source/composite/quote/elements/quote.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport * as token from '@universityofmaryland/web-token-library';\nimport * as typography from '@universityofmaryland/web-styles-library/typography';\nimport { theme } from '@universityofmaryland/web-utilities-library/theme';\nimport { default as elementIcon } from './icon';\nimport { SMALL } from '../_constants';\nimport { type QuoteTextProps } 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('span');\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 isHasImageAndNotFeatured = hasImage && !isTypeFeatured;\n  const iconSpan = elementIcon(props);\n  const wordsList = splitWords(quote);\n  let quoteTextElement: HTMLElement = quote;\n\n  if (includesAnimation) {\n    quoteTextElement = document.createElement('div');\n\n    wordsList.map((word) => {\n      quoteTextElement.appendChild(word);\n    });\n  }\n\n  const fontStyles = isSizeLarge\n    ? typography.sans.compose('extralarge', {\n        theme: theme.fontColor(shouldHaveWhiteText),\n      })\n    : typography.sans.compose('larger', {\n        theme: theme.fontColor(shouldHaveWhiteText),\n      });\n\n  const builder = new ElementBuilder(quoteTextElement)\n    .styled(fontStyles)\n    .withClassName('quote-container-quote')\n    .withStyles({\n      element: {\n        position: 'relative',\n        fontWeight: '700',\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\n  if (!hasImage) {\n    builder.withChild(iconSpan);\n  }\n\n  return builder.build();\n};\n"],"names":[],"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,MAAM;AACjD,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,2BAA2B,YAAY,CAAC;AAC9C,QAAM,WAAW,YAAY,KAAK;AAClC,QAAM,YAAY,WAAW,KAAK;AAClC,MAAI,mBAAgC;AAEpC,MAAI,mBAAmB;AACrB,uBAAmB,SAAS,cAAc,KAAK;AAE/C,cAAU,IAAI,CAAC,SAAS;AACtB,uBAAiB,YAAY,IAAI;AAAA,IACnC,CAAC;AAAA,EACH;AAEA,QAAM,aAAa,cACf,WAAW,KAAK,QAAQ,cAAc;AAAA,IACpC,OAAO,MAAM,UAAU,mBAAmB;AAAA,EAAA,CAC3C,IACD,WAAW,KAAK,QAAQ,UAAU;AAAA,IAChC,OAAO,MAAM,UAAU,mBAAmB;AAAA,EAAA,CAC3C;AAEL,QAAM,UAAU,IAAI,eAAe,gBAAgB,EAChD,OAAO,UAAU,EACjB,cAAc,uBAAuB,EACrC,WAAW;AAAA,IACV,SAAS;AAAA,MACP,UAAU;AAAA,MACV,YAAY;AAAA,MAEZ,CAAC,WAAW,GAAG;AAAA,QACb,SAAS;AAAA,QACT,UAAU;AAAA,QACV,MAAM,IAAI,MAAM,QAAQ,EAAE;AAAA,QAC1B,KAAK;AAAA,QACL,QAAQ;AAAA,QACR,OAAO;AAAA,QACP,SAAS;AAAA,QACT,iBAAiB,MAAM,MAAM;AAAA,QAC7B,GAAI,mBAAmB,EAAE,iBAAiB,MAAM,MAAM,KAAA;AAAA,QAEtD,GAAI,4BAA4B;AAAA,UAC9B,SAAS;AAAA,QAAA;AAAA,QAGX,CAAC,0BAA0B,KAAK,KAAK,GAAG;AAAA,UACtC,MAAM,IAAI,MAAM,QAAQ,EAAE;AAAA,QAAA;AAAA,QAG5B,CAAC,0BAA0B,QAAQ,CAAC,KAAK,GAAG;AAAA,UAC1C,GAAI,CAAC,kBAAkB;AAAA,YACrB,SAAS;AAAA,UAAA;AAAA,QACX;AAAA,MACF;AAAA,IACF;AAAA,EACF,CACD;AAEH,MAAI,CAAC,UAAU;AACb,YAAQ,UAAU,QAAQ;AAAA,EAC5B;AAEA,SAAO,QAAQ,MAAA;AACjB;"}

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

@@ -1,8 +1,4 @@
 import { QuoteTextProps } from '../_types';
-declare const _default: (props: Pick<QuoteTextProps, "isThemeDark" | "isThemeMaryland" | "isSizeLarge" | "isTypeFeatured" | "image" | "quote" | "attribution" | "attributionSubText" | "action" | "includesAnimation">) => {
-    element: HTMLElement;
-    className: string;
-    styles: string;
-};
+declare const _default: (props: Pick<QuoteTextProps, "isThemeDark" | "isThemeMaryland" | "isSizeLarge" | "isTypeFeatured" | "image" | "quote" | "attribution" | "attributionSubText" | "action" | "includesAnimation">) => import('@universityofmaryland/web-builder-library').ElementModel<HTMLElement>;
 export default _default;
 //# sourceMappingURL=text.d.ts.map

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;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"}
+{"version":3,"file":"text.d.ts","sourceRoot":"","sources":["../../../../source/composite/quote/elements/text.ts"],"names":[],"mappings":"AAOA,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,WAAW,CAAC;yBAoH9C,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,wBAiEE"}

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

@@ -1,7 +1,8 @@
 "use strict";
-const token = require("@universityofmaryland/web-styles-library/token");
+const webBuilderLibrary = require("@universityofmaryland/web-builder-library");
+const token = require("@universityofmaryland/web-token-library");
 const typography = require("@universityofmaryland/web-styles-library/typography");
-const index = require("../../../model/elements/index.js");
+const theme = require("@universityofmaryland/web-utilities-library/theme");
 const action = require("./action.js");
 const quote = require("./quote.js");
 const _constants = require("../_constants.js");
@@ -31,59 +32,60 @@ const createChildren = (props) => {
     hasImage,
     includesAnimation,
     isThemeDark,
+    isSizeLarge,
     quote: quote$1,
     shouldHaveWhiteText
   } = props;
   const wrapperChildren = [];
   if (quote$1) {
     wrapperChildren.push(
-      quote({ ...props, shouldHaveWhiteText, quote: quote$1, hasImage })
+      quote({
+        ...props,
+        shouldHaveWhiteText,
+        quote: quote$1,
+        hasImage,
+        isSizeLarge
+      })
     );
   }
   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
-          }
+    const attributionElement = new webBuilderLibrary.ElementBuilder(attribution).styled(
+      typography__namespace.sans.compose("medium", {
+        theme: theme.theme.fontColor(shouldHaveWhiteText)
+      })
+    ).withClassName("quote-container-attribution").withStyles({
+      element: {
+        marginTop: token__namespace.spacing.sm,
+        ...includesAnimation && {
+          opacity: "0",
+          transform: "translateY(20px)",
+          transition: "opacity 1s ease, transform 0.5s ease"
+        },
+        ...!shouldHaveWhiteText && {
+          color: token__namespace.color.gray.dark
+        },
+        [`& *`]: {
+          color: "currentColor"
         }
       }
-    });
+    }).build();
     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
-          }
+    const attributionSubTextElement = new webBuilderLibrary.ElementBuilder(attributionSubText).styled(typography__namespace.sans.small).withClassName("quote-container-text-attribution-sub-text").withStyles({
+      element: {
+        color: token__namespace.color.gray.dark,
+        fontStyle: "italic",
+        ...includesAnimation && {
+          opacity: "0",
+          transform: "translateY(20px)",
+          transition: "opacity 1s ease, transform 0.5s ease"
+        },
+        ...shouldHaveWhiteText && {
+          color: token__namespace.color.white
         }
       }
-    });
+    }).build();
     wrapperChildren.push(attributionSubTextElement);
   }
   if (action$1) {
@@ -107,45 +109,30 @@ const elementText = (props) => {
   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
-      })
-    ]
+  const 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
-          },
-          ...isSizeLargeAndNotFeatured && {
-            paddingTop: token__namespace.spacing["2xl"]
-          }
-        },
-        [`@container (min-width: ${_constants.SMALL}px)`]: {
-          paddingLeft: token__namespace.spacing["4xl"],
-          ...isHasImageAndNotFeatured && { paddingLeft: "0" }
+  const wrapper = new webBuilderLibrary.ElementBuilder().withClassName("quote-text-container-wrapper").withChildren(...children).build();
+  return new webBuilderLibrary.ElementBuilder().withClassName("quote-text-container").withChild(wrapper).withStyles({
+    element: {
+      width: "100%",
+      [`@container (max-width: ${_constants.SMALL - 1}px)`]: {
+        paddingLeft: token__namespace.spacing.md,
+        ...!hasImage && {
+          paddingTop: token__namespace.spacing.lg
         },
-        [`& *`]: {
-          ...typography__namespace.sans.medium,
-          ...shouldHaveWhiteText && {
-            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" }
       }
     }
-  });
+  }).build();
 };
 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 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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"}
+{"version":3,"file":"text.js","sources":["../../../../source/composite/quote/elements/text.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport * as token from '@universityofmaryland/web-token-library';\nimport * as typography from '@universityofmaryland/web-styles-library/typography';\nimport { theme } from '@universityofmaryland/web-utilities-library/theme';\nimport { default as elementAction } from './action';\nimport { default as elementQuote } from './quote';\nimport { SMALL } from '../_constants';\nimport { type QuoteTextProps } from '../_types';\nimport { type ElementModel } 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): ElementModel<HTMLElement>[] => {\n  const {\n    action,\n    attribution,\n    attributionSubText,\n    hasImage,\n    includesAnimation,\n    isThemeDark,\n    isSizeLarge,\n    quote,\n    shouldHaveWhiteText,\n  } = props;\n  const wrapperChildren: ElementModel<HTMLElement>[] = [];\n\n  if (quote) {\n    wrapperChildren.push(\n      elementQuote({\n        ...props,\n        shouldHaveWhiteText,\n        quote,\n        hasImage,\n        isSizeLarge,\n      }),\n    );\n  }\n\n  if (attribution) {\n    const attributionElement = new ElementBuilder(attribution)\n      .styled(\n        typography.sans.compose('medium', {\n          theme: theme.fontColor(shouldHaveWhiteText),\n        }),\n      )\n      .withClassName('quote-container-attribution')\n      .withStyles({\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          ...(!shouldHaveWhiteText && {\n            color: token.color.gray.dark,\n          }),\n\n          [`& *`]: {\n            color: 'currentColor',\n          },\n        },\n      })\n      .build();\n\n    wrapperChildren.push(attributionElement);\n  }\n\n  if (attributionSubText) {\n    const attributionSubTextElement = new ElementBuilder(attributionSubText)\n      .styled(typography.sans.small)\n      .withClassName('quote-container-text-attribution-sub-text')\n      .withStyles({\n        element: {\n          color: token.color.gray.dark,\n          fontStyle: 'italic',\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      .build();\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 children = createChildren({\n    ...props,\n    shouldHaveWhiteText,\n    hasImage,\n  });\n\n  const wrapper = new ElementBuilder()\n    .withClassName('quote-text-container-wrapper')\n    .withChildren(...children)\n    .build();\n\n  return new ElementBuilder()\n    .withClassName('quote-text-container')\n    .withChild(wrapper)\n    .withStyles({\n      element: {\n        width: '100%',\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    .build();\n};\n"],"names":["action","quote","elementQuote","ElementBuilder","typography","theme","token","elementAction","SMALL"],"mappings":"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"}

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

@@ -1,6 +1,7 @@
-import * as token from "@universityofmaryland/web-styles-library/token";
+import { ElementBuilder } from "@universityofmaryland/web-builder-library";
+import * as token from "@universityofmaryland/web-token-library";
 import * as typography from "@universityofmaryland/web-styles-library/typography";
-import { createDiv, create } from "../../../model/elements/index.mjs";
+import { theme } from "@universityofmaryland/web-utilities-library/theme";
 import elementAction from "./action.mjs";
 import elementQuote from "./quote.mjs";
 import { SMALL } from "../_constants.mjs";
@@ -12,59 +13,60 @@ const createChildren = (props) => {
     hasImage,
     includesAnimation,
     isThemeDark,
+    isSizeLarge,
     quote,
     shouldHaveWhiteText
   } = props;
   const wrapperChildren = [];
   if (quote) {
     wrapperChildren.push(
-      elementQuote({ ...props, shouldHaveWhiteText, quote, hasImage })
+      elementQuote({
+        ...props,
+        shouldHaveWhiteText,
+        quote,
+        hasImage,
+        isSizeLarge
+      })
     );
   }
   if (attribution) {
-    const attributionElement = create({
-      element: attribution,
-      className: "quote-container-attribution",
-      elementStyles: {
-        element: {
-          marginTop: token.spacing.sm,
-          ...includesAnimation && {
-            opacity: "0",
-            transform: "translateY(20px)",
-            transition: "opacity 1s ease, transform 0.5s ease"
-          },
-          ...isThemeDark && {
-            color: token.color.white
-          },
-          [`& *`]: {
-            color: "currentColor",
-            ...typography.sans.medium
-          }
+    const attributionElement = new ElementBuilder(attribution).styled(
+      typography.sans.compose("medium", {
+        theme: theme.fontColor(shouldHaveWhiteText)
+      })
+    ).withClassName("quote-container-attribution").withStyles({
+      element: {
+        marginTop: token.spacing.sm,
+        ...includesAnimation && {
+          opacity: "0",
+          transform: "translateY(20px)",
+          transition: "opacity 1s ease, transform 0.5s ease"
+        },
+        ...!shouldHaveWhiteText && {
+          color: token.color.gray.dark
+        },
+        [`& *`]: {
+          color: "currentColor"
         }
       }
-    });
+    }).build();
     wrapperChildren.push(attributionElement);
   }
   if (attributionSubText) {
-    const attributionSubTextElement = create({
-      element: attributionSubText,
-      className: "quote-container-text-attribution-sub-text",
-      elementStyles: {
-        element: {
-          color: token.color.gray.dark,
-          fontStyle: "italic",
-          ...typography.sans.small,
-          ...includesAnimation && {
-            opacity: "0",
-            transform: "translateY(20px)",
-            transition: "opacity 1s ease, transform 0.5s ease"
-          },
-          ...shouldHaveWhiteText && {
-            color: token.color.white
-          }
+    const attributionSubTextElement = new ElementBuilder(attributionSubText).styled(typography.sans.small).withClassName("quote-container-text-attribution-sub-text").withStyles({
+      element: {
+        color: token.color.gray.dark,
+        fontStyle: "italic",
+        ...includesAnimation && {
+          opacity: "0",
+          transform: "translateY(20px)",
+          transition: "opacity 1s ease, transform 0.5s ease"
+        },
+        ...shouldHaveWhiteText && {
+          color: token.color.white
         }
       }
-    });
+    }).build();
     wrapperChildren.push(attributionSubTextElement);
   }
   if (action) {
@@ -88,45 +90,30 @@ const elementText = (props) => {
   const isSizeLargeAndNotFeatured = isSizeLarge && !isTypeFeatured;
   const hasImage = image != null;
   const isHasImageAndNotFeatured = hasImage && !isTypeFeatured;
-  const wrapper = createDiv({
-    className: "quote-text-container-wrapper",
-    children: [
-      ...createChildren({
-        ...props,
-        shouldHaveWhiteText,
-        hasImage
-      })
-    ]
+  const children = createChildren({
+    ...props,
+    shouldHaveWhiteText,
+    hasImage
   });
-  return createDiv({
-    className: "quote-text-container",
-    children: [wrapper],
-    elementStyles: {
-      element: {
-        width: "100%",
-        ...typography.sans.medium,
-        [`@container (max-width: ${SMALL - 1}px)`]: {
-          paddingLeft: token.spacing.md,
-          ...!hasImage && {
-            paddingTop: token.spacing.lg
-          },
-          ...isSizeLargeAndNotFeatured && {
-            paddingTop: token.spacing["2xl"]
-          }
-        },
-        [`@container (min-width: ${SMALL}px)`]: {
-          paddingLeft: token.spacing["4xl"],
-          ...isHasImageAndNotFeatured && { paddingLeft: "0" }
+  const wrapper = new ElementBuilder().withClassName("quote-text-container-wrapper").withChildren(...children).build();
+  return new ElementBuilder().withClassName("quote-text-container").withChild(wrapper).withStyles({
+    element: {
+      width: "100%",
+      [`@container (max-width: ${SMALL - 1}px)`]: {
+        paddingLeft: token.spacing.md,
+        ...!hasImage && {
+          paddingTop: token.spacing.lg
         },
-        [`& *`]: {
-          ...typography.sans.medium,
-          ...shouldHaveWhiteText && {
-            color: token.color.white
-          }
+        ...isSizeLargeAndNotFeatured && {
+          paddingTop: token.spacing["2xl"]
         }
+      },
+      [`@container (min-width: ${SMALL}px)`]: {
+        paddingLeft: token.spacing["4xl"],
+        ...isHasImageAndNotFeatured && { paddingLeft: "0" }
       }
     }
-  });
+  }).build();
 };
 export {
   elementText as default

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

@@ -1 +1 @@
-{"version":3,"file":"text.mjs","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":["ElementModel.create","ElementModel.createDiv"],"mappings":"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"}
+{"version":3,"file":"text.mjs","sources":["../../../../source/composite/quote/elements/text.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport * as token from '@universityofmaryland/web-token-library';\nimport * as typography from '@universityofmaryland/web-styles-library/typography';\nimport { theme } from '@universityofmaryland/web-utilities-library/theme';\nimport { default as elementAction } from './action';\nimport { default as elementQuote } from './quote';\nimport { SMALL } from '../_constants';\nimport { type QuoteTextProps } from '../_types';\nimport { type ElementModel } 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): ElementModel<HTMLElement>[] => {\n  const {\n    action,\n    attribution,\n    attributionSubText,\n    hasImage,\n    includesAnimation,\n    isThemeDark,\n    isSizeLarge,\n    quote,\n    shouldHaveWhiteText,\n  } = props;\n  const wrapperChildren: ElementModel<HTMLElement>[] = [];\n\n  if (quote) {\n    wrapperChildren.push(\n      elementQuote({\n        ...props,\n        shouldHaveWhiteText,\n        quote,\n        hasImage,\n        isSizeLarge,\n      }),\n    );\n  }\n\n  if (attribution) {\n    const attributionElement = new ElementBuilder(attribution)\n      .styled(\n        typography.sans.compose('medium', {\n          theme: theme.fontColor(shouldHaveWhiteText),\n        }),\n      )\n      .withClassName('quote-container-attribution')\n      .withStyles({\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          ...(!shouldHaveWhiteText && {\n            color: token.color.gray.dark,\n          }),\n\n          [`& *`]: {\n            color: 'currentColor',\n          },\n        },\n      })\n      .build();\n\n    wrapperChildren.push(attributionElement);\n  }\n\n  if (attributionSubText) {\n    const attributionSubTextElement = new ElementBuilder(attributionSubText)\n      .styled(typography.sans.small)\n      .withClassName('quote-container-text-attribution-sub-text')\n      .withStyles({\n        element: {\n          color: token.color.gray.dark,\n          fontStyle: 'italic',\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      .build();\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 children = createChildren({\n    ...props,\n    shouldHaveWhiteText,\n    hasImage,\n  });\n\n  const wrapper = new ElementBuilder()\n    .withClassName('quote-text-container-wrapper')\n    .withChildren(...children)\n    .build();\n\n  return new ElementBuilder()\n    .withClassName('quote-text-container')\n    .withChild(wrapper)\n    .withStyles({\n      element: {\n        width: '100%',\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    .build();\n};\n"],"names":[],"mappings":"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"}

package/dist/composite/quote/featured.d.ts

@@ -4,8 +4,9 @@ declare const _default: (props: QuoteFeaturedProps) => {
         loadAnimation: () => void;
     };
     element: HTMLElement;
-    className: string;
     styles: string;
+    update?: (props: Partial<import('@universityofmaryland/web-builder-library').BuilderOptions>) => void;
+    destroy?: () => void;
 };
 export default _default;
 //# sourceMappingURL=featured.d.ts.map

package/dist/composite/quote/featured.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"featured.d.ts","sourceRoot":"","sources":["../../../source/composite/quote/featured.ts"],"names":[],"mappings":"AAOA,OAAO,EAAE,KAAK,kBAAkB,EAAE,MAAM,UAAU,CAAC;yBAsInC,OAAO,kBAAkB;;;;;;;;AAAzC,wBAwGE"}
+{"version":3,"file":"featured.d.ts","sourceRoot":"","sources":["../../../source/composite/quote/featured.ts"],"names":[],"mappings":"AAOA,OAAO,EAAE,KAAK,kBAAkB,EAAE,MAAM,UAAU,CAAC;yBAyHnC,OAAO,kBAAkB;;;;;;;;;AAAzC,wBAuGE"}