@universityofmaryland/web-elements-library 1.5.0-beta.0 → 1.5.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +1 -1
- package/dist/composite/banner/promo.d.ts.map +1 -1
- package/dist/composite/banner/promo.js +6 -3
- package/dist/composite/banner/promo.js.map +1 -1
- package/dist/composite/banner/promo.mjs +6 -3
- package/dist/composite/banner/promo.mjs.map +1 -1
- package/dist/composite/quote/elements/icon.d.ts +3 -2
- package/dist/composite/quote/elements/icon.d.ts.map +1 -1
- package/dist/composite/quote/elements/icon.js +23 -16
- package/dist/composite/quote/elements/icon.js.map +1 -1
- package/dist/composite/quote/elements/icon.mjs +23 -16
- package/dist/composite/quote/elements/icon.mjs.map +1 -1
- package/dist/composite/quote/elements/image.d.ts.map +1 -1
- package/dist/composite/quote/elements/image.js +6 -6
- package/dist/composite/quote/elements/image.js.map +1 -1
- package/dist/composite/quote/elements/image.mjs +6 -6
- package/dist/composite/quote/elements/image.mjs.map +1 -1
- package/dist/composite/quote/elements/index.d.ts +1 -0
- package/dist/composite/quote/elements/index.d.ts.map +1 -1
- package/dist/composite/quote/elements/index.js +2 -0
- package/dist/composite/quote/elements/index.js.map +1 -1
- package/dist/composite/quote/elements/index.mjs +2 -0
- package/dist/composite/quote/elements/index.mjs.map +1 -1
- package/dist/composite/quote/elements/quote.d.ts +13 -0
- package/dist/composite/quote/elements/quote.d.ts.map +1 -0
- package/dist/composite/quote/elements/quote.js +114 -0
- package/dist/composite/quote/elements/quote.js.map +1 -0
- package/dist/composite/quote/elements/quote.mjs +97 -0
- package/dist/composite/quote/elements/quote.mjs.map +1 -0
- package/dist/composite/quote/elements/text.d.ts +1 -1
- package/dist/composite/quote/elements/text.d.ts.map +1 -1
- package/dist/composite/quote/elements/text.js +103 -172
- package/dist/composite/quote/elements/text.js.map +1 -1
- package/dist/composite/quote/elements/text.mjs +103 -172
- package/dist/composite/quote/elements/text.mjs.map +1 -1
- package/dist/composite/quote/featured.d.ts +3 -0
- package/dist/composite/quote/featured.d.ts.map +1 -1
- package/dist/composite/quote/featured.js +14 -7
- package/dist/composite/quote/featured.js.map +1 -1
- package/dist/composite/quote/featured.mjs +14 -7
- package/dist/composite/quote/featured.mjs.map +1 -1
- package/dist/composite/quote/helper/animation.d.ts.map +1 -1
- package/dist/composite/quote/helper/animation.js +67 -36
- package/dist/composite/quote/helper/animation.js.map +1 -1
- package/dist/composite/quote/helper/animation.mjs +67 -36
- package/dist/composite/quote/helper/animation.mjs.map +1 -1
- package/dist/composite/quote/inline.d.ts +3 -0
- package/dist/composite/quote/inline.d.ts.map +1 -1
- package/dist/composite/quote/inline.js +15 -7
- package/dist/composite/quote/inline.js.map +1 -1
- package/dist/composite/quote/inline.mjs +15 -7
- package/dist/composite/quote/inline.mjs.map +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# University of Maryland Web Elements Library
|
|
2
2
|
|
|
3
|
-
[](https://www.npmjs.com/package/@universityofmaryland/web-elements-library)
|
|
4
4
|
|
|
5
5
|
Foundational UI building blocks for the UMD Design System, providing atomic elements that combine to create complex, accessible, and brand-compliant University of Maryland digital experiences.
|
|
6
6
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"promo.d.ts","sourceRoot":"","sources":["../../../source/composite/banner/promo.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"promo.d.ts","sourceRoot":"","sources":["../../../source/composite/banner/promo.ts"],"names":[],"mappings":"AAUA,KAAK,oBAAoB,GAAG;IAC1B,QAAQ,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC9B,IAAI,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC1B,OAAO,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC7B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;AAyLF,QAAA,MAAM,wBAAwB,GAAI,OAAO,oBAAoB;;;CAiCvD,CAAC;AAEP,eAAe,wBAAwB,CAAC"}
|
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
const Styles = require("@universityofmaryland/web-styles-library");
|
|
3
3
|
const Logos = require("@universityofmaryland/web-icons-library/logos");
|
|
4
4
|
const styles = require("@universityofmaryland/web-utilities-library/styles");
|
|
5
|
+
const media = require("@universityofmaryland/web-utilities-library/media");
|
|
5
6
|
const SMALL = 650;
|
|
6
7
|
const ATTRIBUTE_THEME = "theme";
|
|
7
8
|
const THEME_DARK = "dark";
|
|
@@ -127,7 +128,7 @@ const STYLES_BANNER_PROMO_ELEMENT = `
|
|
|
127
128
|
}
|
|
128
129
|
}
|
|
129
130
|
|
|
130
|
-
.${ELEMENT_CONTAINER} >
|
|
131
|
+
.${ELEMENT_CONTAINER} > img {
|
|
131
132
|
position: absolute;
|
|
132
133
|
right: -50px;
|
|
133
134
|
top: -40px;
|
|
@@ -136,7 +137,7 @@ const STYLES_BANNER_PROMO_ELEMENT = `
|
|
|
136
137
|
}
|
|
137
138
|
|
|
138
139
|
@container ${ELEMENT_NAME} (max-width: ${SMALL - 1}px) {
|
|
139
|
-
.${ELEMENT_CONTAINER} >
|
|
140
|
+
.${ELEMENT_CONTAINER} > img {
|
|
140
141
|
display: none;
|
|
141
142
|
}
|
|
142
143
|
}
|
|
@@ -175,7 +176,9 @@ const CreateBannerPromoElement = (props) => (() => {
|
|
|
175
176
|
wrapper.appendChild(actions);
|
|
176
177
|
}
|
|
177
178
|
if (includeSeal) {
|
|
178
|
-
|
|
179
|
+
const img = media.imageFromSvg({ SVG: Logos.seal.white });
|
|
180
|
+
img.alt = "University of Maryland Seal";
|
|
181
|
+
container.appendChild(img);
|
|
179
182
|
}
|
|
180
183
|
if (isThemeDark) container.setAttribute(ATTRIBUTE_THEME, THEME_DARK);
|
|
181
184
|
container.classList.add(ELEMENT_CONTAINER);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"promo.js","sources":["../../../source/composite/banner/promo.ts"],"sourcesContent":["import {\n animation,\n element,\n token,\n typography,\n} from '@universityofmaryland/web-styles-library';\nimport { seal } from '@universityofmaryland/web-icons-library/logos';\nimport { jssToCSS } from '@universityofmaryland/web-utilities-library/styles';\n\ntype TypeBannerPromoProps = {\n headline?: HTMLElement | null;\n text?: HTMLElement | null;\n actions?: HTMLElement | null;\n isThemeDark?: boolean;\n includeSeal?: boolean;\n};\n\nconst SMALL = 650;\n\nconst ATTRIBUTE_THEME = 'theme';\nconst THEME_DARK = 'dark';\n\nconst IS_THEME_DARK = `[${ATTRIBUTE_THEME}=\"${THEME_DARK}\"]`;\n\nconst ELEMENT_NAME = 'umd-element-banner-promo';\nconst ELEMENT_DECLARATION = 'banner-promo-declaration';\nconst ELEMENT_CONTAINER = 'banner-promo-container';\nconst ELEMENT_WRAPPER = 'banner-promo-wrapper';\nconst ELEMENT_TEXT_CONTAINER = 'banner-promo-text-container';\nconst ELEMENT_HEADLINE = 'banner-promo-headline';\nconst ELEMENT_RICH_TEXT = 'banner-promo-rich-text';\nconst ELEMENT_ACTIONS = 'banner-promo-actions';\n\nconst OVERWRITE_THEME_DARK_CONTAINER = `.${ELEMENT_CONTAINER}${IS_THEME_DARK}`;\nconst OVERWRITE_THEME_DARK_HEADLINE = `.${ELEMENT_CONTAINER}${IS_THEME_DARK} .${ELEMENT_HEADLINE}`;\nconst OVERWRITE_THEME_DARK_RICH_TEXT = `.${ELEMENT_CONTAINER}${IS_THEME_DARK} .${ELEMENT_RICH_TEXT}`;\n\n// prettier-ignore\nconst OverwriteThemeDark = `\n ${OVERWRITE_THEME_DARK_CONTAINER} {\n background-color: ${token.color.black};\n }\n\n ${OVERWRITE_THEME_DARK_CONTAINER} > svg {\n fill: ${token.color.gray.darker};\n }\n\n ${OVERWRITE_THEME_DARK_HEADLINE} {\n color: ${token.color.white};\n }\n\n ${jssToCSS({\n styleObj: {\n [`${OVERWRITE_THEME_DARK_RICH_TEXT}`]: element.text.rich.advancedDark,\n },\n })}\n\n ${OVERWRITE_THEME_DARK_RICH_TEXT} * {\n color: ${token.color.white};\n }\n`;\n\n// prettier-ignore\nconst ActionsStyles = `\n @container ${ELEMENT_NAME} (max-width: ${SMALL - 1}px) {\n .${ELEMENT_ACTIONS} {\n margin-top: ${token.spacing.sm};\n }\n }\n\n @container ${ELEMENT_NAME} (min-width: ${SMALL}px) {\n .${ELEMENT_ACTIONS} {\n max-width: 30%;\n margin-left: ${token.spacing.md};\n }\n }\n`;\n\n// prettier-ignore\nconst TextStyles = `\n ${jssToCSS({\n styleObj: {\n [`.${ELEMENT_RICH_TEXT}`]: element.text.rich.advanced,\n },\n })}\n\n ${jssToCSS({\n styleObj: {\n [`.${ELEMENT_RICH_TEXT} a`]: animation.line.fadeUnderRed,\n },\n })}\n\n .${ELEMENT_RICH_TEXT} {\n margin-top: ${token.spacing.min};\n }\n\n .${ELEMENT_RICH_TEXT} * {\n color: ${token.color.black};\n }\n`;\n\n// prettier-ignore\nconst HeadlineStyles = `\n ${jssToCSS({\n styleObj: {\n [`.${ELEMENT_HEADLINE}`]: typography.sans.extraLarge,\n },\n })}\n\n .${ELEMENT_HEADLINE} {\n text-transform: uppercase;\n color: ${token.color.black};\n font-weight: 800;\n }\n`;\n\n// prettier-ignore\nconst TextContainerStyles = `\n @container ${ELEMENT_NAME} (min-width: ${SMALL}px) {\n .${ELEMENT_TEXT_CONTAINER} {\n width: 70%;\n }\n }\n`;\n\n// prettier-ignore\nconst WrapperStyles = `\n .${ELEMENT_WRAPPER} {\n z-index: 9;\n position: relative;\n }\n\n @container ${ELEMENT_NAME} (min-width: ${SMALL}px) {\n .${ELEMENT_WRAPPER} {\n display: flex;\n justify-content: space-between;\n align-items: center;\n }\n }\n`;\n\nconst STYLES_BANNER_PROMO_ELEMENT = `\n .${ELEMENT_DECLARATION} {\n container: ${ELEMENT_NAME} / inline-size;\n overflow: hidden;\n position: relative;\n }\n\n .${ELEMENT_CONTAINER} {\n padding: ${token.spacing.lg} ${token.spacing.lg};\n background-color: ${token.color.gold};\n }\n\n @container ${ELEMENT_NAME} (min-width: ${SMALL}px) {\n .${ELEMENT_CONTAINER} {\n padding: ${token.spacing.xl};\n }\n }\n\n .${ELEMENT_CONTAINER} >
|
|
1
|
+
{"version":3,"file":"promo.js","sources":["../../../source/composite/banner/promo.ts"],"sourcesContent":["import {\n animation,\n element,\n token,\n typography,\n} from '@universityofmaryland/web-styles-library';\nimport { seal as logoSeal } from '@universityofmaryland/web-icons-library/logos';\nimport { jssToCSS } from '@universityofmaryland/web-utilities-library/styles';\nimport { imageFromSvg } from '@universityofmaryland/web-utilities-library/media';\n\ntype TypeBannerPromoProps = {\n headline?: HTMLElement | null;\n text?: HTMLElement | null;\n actions?: HTMLElement | null;\n isThemeDark?: boolean;\n includeSeal?: boolean;\n};\n\nconst SMALL = 650;\n\nconst ATTRIBUTE_THEME = 'theme';\nconst THEME_DARK = 'dark';\n\nconst IS_THEME_DARK = `[${ATTRIBUTE_THEME}=\"${THEME_DARK}\"]`;\n\nconst ELEMENT_NAME = 'umd-element-banner-promo';\nconst ELEMENT_DECLARATION = 'banner-promo-declaration';\nconst ELEMENT_CONTAINER = 'banner-promo-container';\nconst ELEMENT_WRAPPER = 'banner-promo-wrapper';\nconst ELEMENT_TEXT_CONTAINER = 'banner-promo-text-container';\nconst ELEMENT_HEADLINE = 'banner-promo-headline';\nconst ELEMENT_RICH_TEXT = 'banner-promo-rich-text';\nconst ELEMENT_ACTIONS = 'banner-promo-actions';\n\nconst OVERWRITE_THEME_DARK_CONTAINER = `.${ELEMENT_CONTAINER}${IS_THEME_DARK}`;\nconst OVERWRITE_THEME_DARK_HEADLINE = `.${ELEMENT_CONTAINER}${IS_THEME_DARK} .${ELEMENT_HEADLINE}`;\nconst OVERWRITE_THEME_DARK_RICH_TEXT = `.${ELEMENT_CONTAINER}${IS_THEME_DARK} .${ELEMENT_RICH_TEXT}`;\n\n// prettier-ignore\nconst OverwriteThemeDark = `\n ${OVERWRITE_THEME_DARK_CONTAINER} {\n background-color: ${token.color.black};\n }\n\n ${OVERWRITE_THEME_DARK_CONTAINER} > svg {\n fill: ${token.color.gray.darker};\n }\n\n ${OVERWRITE_THEME_DARK_HEADLINE} {\n color: ${token.color.white};\n }\n\n ${jssToCSS({\n styleObj: {\n [`${OVERWRITE_THEME_DARK_RICH_TEXT}`]: element.text.rich.advancedDark,\n },\n })}\n\n ${OVERWRITE_THEME_DARK_RICH_TEXT} * {\n color: ${token.color.white};\n }\n`;\n\n// prettier-ignore\nconst ActionsStyles = `\n @container ${ELEMENT_NAME} (max-width: ${SMALL - 1}px) {\n .${ELEMENT_ACTIONS} {\n margin-top: ${token.spacing.sm};\n }\n }\n\n @container ${ELEMENT_NAME} (min-width: ${SMALL}px) {\n .${ELEMENT_ACTIONS} {\n max-width: 30%;\n margin-left: ${token.spacing.md};\n }\n }\n`;\n\n// prettier-ignore\nconst TextStyles = `\n ${jssToCSS({\n styleObj: {\n [`.${ELEMENT_RICH_TEXT}`]: element.text.rich.advanced,\n },\n })}\n\n ${jssToCSS({\n styleObj: {\n [`.${ELEMENT_RICH_TEXT} a`]: animation.line.fadeUnderRed,\n },\n })}\n\n .${ELEMENT_RICH_TEXT} {\n margin-top: ${token.spacing.min};\n }\n\n .${ELEMENT_RICH_TEXT} * {\n color: ${token.color.black};\n }\n`;\n\n// prettier-ignore\nconst HeadlineStyles = `\n ${jssToCSS({\n styleObj: {\n [`.${ELEMENT_HEADLINE}`]: typography.sans.extraLarge,\n },\n })}\n\n .${ELEMENT_HEADLINE} {\n text-transform: uppercase;\n color: ${token.color.black};\n font-weight: 800;\n }\n`;\n\n// prettier-ignore\nconst TextContainerStyles = `\n @container ${ELEMENT_NAME} (min-width: ${SMALL}px) {\n .${ELEMENT_TEXT_CONTAINER} {\n width: 70%;\n }\n }\n`;\n\n// prettier-ignore\nconst WrapperStyles = `\n .${ELEMENT_WRAPPER} {\n z-index: 9;\n position: relative;\n }\n\n @container ${ELEMENT_NAME} (min-width: ${SMALL}px) {\n .${ELEMENT_WRAPPER} {\n display: flex;\n justify-content: space-between;\n align-items: center;\n }\n }\n`;\n\nconst STYLES_BANNER_PROMO_ELEMENT = `\n .${ELEMENT_DECLARATION} {\n container: ${ELEMENT_NAME} / inline-size;\n overflow: hidden;\n position: relative;\n }\n\n .${ELEMENT_CONTAINER} {\n padding: ${token.spacing.lg} ${token.spacing.lg};\n background-color: ${token.color.gold};\n }\n\n @container ${ELEMENT_NAME} (min-width: ${SMALL}px) {\n .${ELEMENT_CONTAINER} {\n padding: ${token.spacing.xl};\n }\n }\n\n .${ELEMENT_CONTAINER} > img {\n position: absolute;\n right: -50px;\n top: -40px;\n height: 231px;\n width: 234px;\n }\n\n @container ${ELEMENT_NAME} (max-width: ${SMALL - 1}px) {\n .${ELEMENT_CONTAINER} > img {\n display: none;\n }\n }\n\n ${WrapperStyles}\n ${TextContainerStyles}\n ${HeadlineStyles}\n ${TextStyles}\n ${ActionsStyles}\n ${OverwriteThemeDark}\n`;\n\nconst CreateTextContainer = (props: TypeBannerPromoProps) => {\n const { headline, text } = props;\n const container = document.createElement('div');\n\n container.classList.add(ELEMENT_TEXT_CONTAINER);\n\n if (headline) {\n headline.classList.add(ELEMENT_HEADLINE);\n container.appendChild(headline);\n }\n\n if (text) {\n text.classList.add(ELEMENT_RICH_TEXT);\n container.appendChild(text);\n }\n\n return container;\n};\n\nconst CreateBannerPromoElement = (props: TypeBannerPromoProps) =>\n (() => {\n const { isThemeDark, includeSeal = false, actions } = props;\n const declaration = document.createElement('div');\n const container = document.createElement('div');\n const wrapper = document.createElement('div');\n const textContainer = CreateTextContainer(props);\n\n wrapper.classList.add(ELEMENT_WRAPPER);\n wrapper.appendChild(textContainer);\n\n if (actions) {\n actions.classList.add(ELEMENT_ACTIONS);\n wrapper.appendChild(actions);\n }\n\n if (includeSeal) {\n const img = imageFromSvg({ SVG: logoSeal.white });\n\n img.alt = 'University of Maryland Seal';\n container.appendChild(img);\n }\n if (isThemeDark) container.setAttribute(ATTRIBUTE_THEME, THEME_DARK);\n container.classList.add(ELEMENT_CONTAINER);\n container.appendChild(wrapper);\n\n declaration.classList.add(ELEMENT_DECLARATION);\n declaration.appendChild(container);\n\n return {\n element: declaration,\n styles: STYLES_BANNER_PROMO_ELEMENT,\n };\n })();\n\nexport default CreateBannerPromoElement;\n"],"names":["token","jssToCSS","element","animation","typography","imageFromSvg","logoSeal"],"mappings":"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"}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { token, element, animation, typography } from "@universityofmaryland/web-styles-library";
|
|
2
2
|
import { seal } from "@universityofmaryland/web-icons-library/logos";
|
|
3
3
|
import { jssToCSS } from "@universityofmaryland/web-utilities-library/styles";
|
|
4
|
+
import { imageFromSvg } from "@universityofmaryland/web-utilities-library/media";
|
|
4
5
|
const SMALL = 650;
|
|
5
6
|
const ATTRIBUTE_THEME = "theme";
|
|
6
7
|
const THEME_DARK = "dark";
|
|
@@ -126,7 +127,7 @@ const STYLES_BANNER_PROMO_ELEMENT = `
|
|
|
126
127
|
}
|
|
127
128
|
}
|
|
128
129
|
|
|
129
|
-
.${ELEMENT_CONTAINER} >
|
|
130
|
+
.${ELEMENT_CONTAINER} > img {
|
|
130
131
|
position: absolute;
|
|
131
132
|
right: -50px;
|
|
132
133
|
top: -40px;
|
|
@@ -135,7 +136,7 @@ const STYLES_BANNER_PROMO_ELEMENT = `
|
|
|
135
136
|
}
|
|
136
137
|
|
|
137
138
|
@container ${ELEMENT_NAME} (max-width: ${SMALL - 1}px) {
|
|
138
|
-
.${ELEMENT_CONTAINER} >
|
|
139
|
+
.${ELEMENT_CONTAINER} > img {
|
|
139
140
|
display: none;
|
|
140
141
|
}
|
|
141
142
|
}
|
|
@@ -174,7 +175,9 @@ const CreateBannerPromoElement = (props) => (() => {
|
|
|
174
175
|
wrapper.appendChild(actions);
|
|
175
176
|
}
|
|
176
177
|
if (includeSeal) {
|
|
177
|
-
|
|
178
|
+
const img = imageFromSvg({ SVG: seal.white });
|
|
179
|
+
img.alt = "University of Maryland Seal";
|
|
180
|
+
container.appendChild(img);
|
|
178
181
|
}
|
|
179
182
|
if (isThemeDark) container.setAttribute(ATTRIBUTE_THEME, THEME_DARK);
|
|
180
183
|
container.classList.add(ELEMENT_CONTAINER);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"promo.mjs","sources":["../../../source/composite/banner/promo.ts"],"sourcesContent":["import {\n animation,\n element,\n token,\n typography,\n} from '@universityofmaryland/web-styles-library';\nimport { seal } from '@universityofmaryland/web-icons-library/logos';\nimport { jssToCSS } from '@universityofmaryland/web-utilities-library/styles';\n\ntype TypeBannerPromoProps = {\n headline?: HTMLElement | null;\n text?: HTMLElement | null;\n actions?: HTMLElement | null;\n isThemeDark?: boolean;\n includeSeal?: boolean;\n};\n\nconst SMALL = 650;\n\nconst ATTRIBUTE_THEME = 'theme';\nconst THEME_DARK = 'dark';\n\nconst IS_THEME_DARK = `[${ATTRIBUTE_THEME}=\"${THEME_DARK}\"]`;\n\nconst ELEMENT_NAME = 'umd-element-banner-promo';\nconst ELEMENT_DECLARATION = 'banner-promo-declaration';\nconst ELEMENT_CONTAINER = 'banner-promo-container';\nconst ELEMENT_WRAPPER = 'banner-promo-wrapper';\nconst ELEMENT_TEXT_CONTAINER = 'banner-promo-text-container';\nconst ELEMENT_HEADLINE = 'banner-promo-headline';\nconst ELEMENT_RICH_TEXT = 'banner-promo-rich-text';\nconst ELEMENT_ACTIONS = 'banner-promo-actions';\n\nconst OVERWRITE_THEME_DARK_CONTAINER = `.${ELEMENT_CONTAINER}${IS_THEME_DARK}`;\nconst OVERWRITE_THEME_DARK_HEADLINE = `.${ELEMENT_CONTAINER}${IS_THEME_DARK} .${ELEMENT_HEADLINE}`;\nconst OVERWRITE_THEME_DARK_RICH_TEXT = `.${ELEMENT_CONTAINER}${IS_THEME_DARK} .${ELEMENT_RICH_TEXT}`;\n\n// prettier-ignore\nconst OverwriteThemeDark = `\n ${OVERWRITE_THEME_DARK_CONTAINER} {\n background-color: ${token.color.black};\n }\n\n ${OVERWRITE_THEME_DARK_CONTAINER} > svg {\n fill: ${token.color.gray.darker};\n }\n\n ${OVERWRITE_THEME_DARK_HEADLINE} {\n color: ${token.color.white};\n }\n\n ${jssToCSS({\n styleObj: {\n [`${OVERWRITE_THEME_DARK_RICH_TEXT}`]: element.text.rich.advancedDark,\n },\n })}\n\n ${OVERWRITE_THEME_DARK_RICH_TEXT} * {\n color: ${token.color.white};\n }\n`;\n\n// prettier-ignore\nconst ActionsStyles = `\n @container ${ELEMENT_NAME} (max-width: ${SMALL - 1}px) {\n .${ELEMENT_ACTIONS} {\n margin-top: ${token.spacing.sm};\n }\n }\n\n @container ${ELEMENT_NAME} (min-width: ${SMALL}px) {\n .${ELEMENT_ACTIONS} {\n max-width: 30%;\n margin-left: ${token.spacing.md};\n }\n }\n`;\n\n// prettier-ignore\nconst TextStyles = `\n ${jssToCSS({\n styleObj: {\n [`.${ELEMENT_RICH_TEXT}`]: element.text.rich.advanced,\n },\n })}\n\n ${jssToCSS({\n styleObj: {\n [`.${ELEMENT_RICH_TEXT} a`]: animation.line.fadeUnderRed,\n },\n })}\n\n .${ELEMENT_RICH_TEXT} {\n margin-top: ${token.spacing.min};\n }\n\n .${ELEMENT_RICH_TEXT} * {\n color: ${token.color.black};\n }\n`;\n\n// prettier-ignore\nconst HeadlineStyles = `\n ${jssToCSS({\n styleObj: {\n [`.${ELEMENT_HEADLINE}`]: typography.sans.extraLarge,\n },\n })}\n\n .${ELEMENT_HEADLINE} {\n text-transform: uppercase;\n color: ${token.color.black};\n font-weight: 800;\n }\n`;\n\n// prettier-ignore\nconst TextContainerStyles = `\n @container ${ELEMENT_NAME} (min-width: ${SMALL}px) {\n .${ELEMENT_TEXT_CONTAINER} {\n width: 70%;\n }\n }\n`;\n\n// prettier-ignore\nconst WrapperStyles = `\n .${ELEMENT_WRAPPER} {\n z-index: 9;\n position: relative;\n }\n\n @container ${ELEMENT_NAME} (min-width: ${SMALL}px) {\n .${ELEMENT_WRAPPER} {\n display: flex;\n justify-content: space-between;\n align-items: center;\n }\n }\n`;\n\nconst STYLES_BANNER_PROMO_ELEMENT = `\n .${ELEMENT_DECLARATION} {\n container: ${ELEMENT_NAME} / inline-size;\n overflow: hidden;\n position: relative;\n }\n\n .${ELEMENT_CONTAINER} {\n padding: ${token.spacing.lg} ${token.spacing.lg};\n background-color: ${token.color.gold};\n }\n\n @container ${ELEMENT_NAME} (min-width: ${SMALL}px) {\n .${ELEMENT_CONTAINER} {\n padding: ${token.spacing.xl};\n }\n }\n\n .${ELEMENT_CONTAINER} >
|
|
1
|
+
{"version":3,"file":"promo.mjs","sources":["../../../source/composite/banner/promo.ts"],"sourcesContent":["import {\n animation,\n element,\n token,\n typography,\n} from '@universityofmaryland/web-styles-library';\nimport { seal as logoSeal } from '@universityofmaryland/web-icons-library/logos';\nimport { jssToCSS } from '@universityofmaryland/web-utilities-library/styles';\nimport { imageFromSvg } from '@universityofmaryland/web-utilities-library/media';\n\ntype TypeBannerPromoProps = {\n headline?: HTMLElement | null;\n text?: HTMLElement | null;\n actions?: HTMLElement | null;\n isThemeDark?: boolean;\n includeSeal?: boolean;\n};\n\nconst SMALL = 650;\n\nconst ATTRIBUTE_THEME = 'theme';\nconst THEME_DARK = 'dark';\n\nconst IS_THEME_DARK = `[${ATTRIBUTE_THEME}=\"${THEME_DARK}\"]`;\n\nconst ELEMENT_NAME = 'umd-element-banner-promo';\nconst ELEMENT_DECLARATION = 'banner-promo-declaration';\nconst ELEMENT_CONTAINER = 'banner-promo-container';\nconst ELEMENT_WRAPPER = 'banner-promo-wrapper';\nconst ELEMENT_TEXT_CONTAINER = 'banner-promo-text-container';\nconst ELEMENT_HEADLINE = 'banner-promo-headline';\nconst ELEMENT_RICH_TEXT = 'banner-promo-rich-text';\nconst ELEMENT_ACTIONS = 'banner-promo-actions';\n\nconst OVERWRITE_THEME_DARK_CONTAINER = `.${ELEMENT_CONTAINER}${IS_THEME_DARK}`;\nconst OVERWRITE_THEME_DARK_HEADLINE = `.${ELEMENT_CONTAINER}${IS_THEME_DARK} .${ELEMENT_HEADLINE}`;\nconst OVERWRITE_THEME_DARK_RICH_TEXT = `.${ELEMENT_CONTAINER}${IS_THEME_DARK} .${ELEMENT_RICH_TEXT}`;\n\n// prettier-ignore\nconst OverwriteThemeDark = `\n ${OVERWRITE_THEME_DARK_CONTAINER} {\n background-color: ${token.color.black};\n }\n\n ${OVERWRITE_THEME_DARK_CONTAINER} > svg {\n fill: ${token.color.gray.darker};\n }\n\n ${OVERWRITE_THEME_DARK_HEADLINE} {\n color: ${token.color.white};\n }\n\n ${jssToCSS({\n styleObj: {\n [`${OVERWRITE_THEME_DARK_RICH_TEXT}`]: element.text.rich.advancedDark,\n },\n })}\n\n ${OVERWRITE_THEME_DARK_RICH_TEXT} * {\n color: ${token.color.white};\n }\n`;\n\n// prettier-ignore\nconst ActionsStyles = `\n @container ${ELEMENT_NAME} (max-width: ${SMALL - 1}px) {\n .${ELEMENT_ACTIONS} {\n margin-top: ${token.spacing.sm};\n }\n }\n\n @container ${ELEMENT_NAME} (min-width: ${SMALL}px) {\n .${ELEMENT_ACTIONS} {\n max-width: 30%;\n margin-left: ${token.spacing.md};\n }\n }\n`;\n\n// prettier-ignore\nconst TextStyles = `\n ${jssToCSS({\n styleObj: {\n [`.${ELEMENT_RICH_TEXT}`]: element.text.rich.advanced,\n },\n })}\n\n ${jssToCSS({\n styleObj: {\n [`.${ELEMENT_RICH_TEXT} a`]: animation.line.fadeUnderRed,\n },\n })}\n\n .${ELEMENT_RICH_TEXT} {\n margin-top: ${token.spacing.min};\n }\n\n .${ELEMENT_RICH_TEXT} * {\n color: ${token.color.black};\n }\n`;\n\n// prettier-ignore\nconst HeadlineStyles = `\n ${jssToCSS({\n styleObj: {\n [`.${ELEMENT_HEADLINE}`]: typography.sans.extraLarge,\n },\n })}\n\n .${ELEMENT_HEADLINE} {\n text-transform: uppercase;\n color: ${token.color.black};\n font-weight: 800;\n }\n`;\n\n// prettier-ignore\nconst TextContainerStyles = `\n @container ${ELEMENT_NAME} (min-width: ${SMALL}px) {\n .${ELEMENT_TEXT_CONTAINER} {\n width: 70%;\n }\n }\n`;\n\n// prettier-ignore\nconst WrapperStyles = `\n .${ELEMENT_WRAPPER} {\n z-index: 9;\n position: relative;\n }\n\n @container ${ELEMENT_NAME} (min-width: ${SMALL}px) {\n .${ELEMENT_WRAPPER} {\n display: flex;\n justify-content: space-between;\n align-items: center;\n }\n }\n`;\n\nconst STYLES_BANNER_PROMO_ELEMENT = `\n .${ELEMENT_DECLARATION} {\n container: ${ELEMENT_NAME} / inline-size;\n overflow: hidden;\n position: relative;\n }\n\n .${ELEMENT_CONTAINER} {\n padding: ${token.spacing.lg} ${token.spacing.lg};\n background-color: ${token.color.gold};\n }\n\n @container ${ELEMENT_NAME} (min-width: ${SMALL}px) {\n .${ELEMENT_CONTAINER} {\n padding: ${token.spacing.xl};\n }\n }\n\n .${ELEMENT_CONTAINER} > img {\n position: absolute;\n right: -50px;\n top: -40px;\n height: 231px;\n width: 234px;\n }\n\n @container ${ELEMENT_NAME} (max-width: ${SMALL - 1}px) {\n .${ELEMENT_CONTAINER} > img {\n display: none;\n }\n }\n\n ${WrapperStyles}\n ${TextContainerStyles}\n ${HeadlineStyles}\n ${TextStyles}\n ${ActionsStyles}\n ${OverwriteThemeDark}\n`;\n\nconst CreateTextContainer = (props: TypeBannerPromoProps) => {\n const { headline, text } = props;\n const container = document.createElement('div');\n\n container.classList.add(ELEMENT_TEXT_CONTAINER);\n\n if (headline) {\n headline.classList.add(ELEMENT_HEADLINE);\n container.appendChild(headline);\n }\n\n if (text) {\n text.classList.add(ELEMENT_RICH_TEXT);\n container.appendChild(text);\n }\n\n return container;\n};\n\nconst CreateBannerPromoElement = (props: TypeBannerPromoProps) =>\n (() => {\n const { isThemeDark, includeSeal = false, actions } = props;\n const declaration = document.createElement('div');\n const container = document.createElement('div');\n const wrapper = document.createElement('div');\n const textContainer = CreateTextContainer(props);\n\n wrapper.classList.add(ELEMENT_WRAPPER);\n wrapper.appendChild(textContainer);\n\n if (actions) {\n actions.classList.add(ELEMENT_ACTIONS);\n wrapper.appendChild(actions);\n }\n\n if (includeSeal) {\n const img = imageFromSvg({ SVG: logoSeal.white });\n\n img.alt = 'University of Maryland Seal';\n container.appendChild(img);\n }\n if (isThemeDark) container.setAttribute(ATTRIBUTE_THEME, THEME_DARK);\n container.classList.add(ELEMENT_CONTAINER);\n container.appendChild(wrapper);\n\n declaration.classList.add(ELEMENT_DECLARATION);\n declaration.appendChild(container);\n\n return {\n element: declaration,\n styles: STYLES_BANNER_PROMO_ELEMENT,\n };\n })();\n\nexport default CreateBannerPromoElement;\n"],"names":["logoSeal"],"mappings":"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"}
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import { QuoteBaseProps, QuoteVariantProps } from '../_types';
|
|
2
|
-
interface QuoteIconProps extends QuoteVariantProps, Pick<QuoteBaseProps, 'isThemeMaryland'
|
|
2
|
+
interface QuoteIconProps extends QuoteVariantProps, Pick<QuoteBaseProps, 'isThemeMaryland'> {
|
|
3
|
+
hasImage?: boolean;
|
|
3
4
|
}
|
|
4
|
-
declare const _default: ({
|
|
5
|
+
declare const _default: ({ hasImage, isThemeMaryland, isTypeFeatured, }: QuoteIconProps) => {
|
|
5
6
|
element: HTMLElement;
|
|
6
7
|
className: string;
|
|
7
8
|
styles: string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"icon.d.ts","sourceRoot":"","sources":["../../../../source/composite/quote/elements/icon.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,cAAc,EAAE,KAAK,iBAAiB,EAAE,MAAM,WAAW,CAAC;AAExE,UAAU,cACR,SAAQ,iBAAiB,EACvB,IAAI,CAAC,cAAc,EAAE,iBAAiB,
|
|
1
|
+
{"version":3,"file":"icon.d.ts","sourceRoot":"","sources":["../../../../source/composite/quote/elements/icon.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,cAAc,EAAE,KAAK,iBAAiB,EAAE,MAAM,WAAW,CAAC;AAExE,UAAU,cACR,SAAQ,iBAAiB,EACvB,IAAI,CAAC,cAAc,EAAE,iBAAiB,CAAC;IACzC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;yBAEe,gDAIb,cAAc;;;;;AAJjB,wBA2DE"}
|
|
@@ -21,36 +21,43 @@ function _interopNamespaceDefault(e) {
|
|
|
21
21
|
}
|
|
22
22
|
const token__namespace = /* @__PURE__ */ _interopNamespaceDefault(token);
|
|
23
23
|
const elementIcon = ({
|
|
24
|
-
|
|
24
|
+
hasImage = false,
|
|
25
25
|
isThemeMaryland,
|
|
26
26
|
isTypeFeatured = false
|
|
27
27
|
}) => {
|
|
28
|
+
const imageWithFeaturedLayout = hasImage && isTypeFeatured;
|
|
28
29
|
const iconSpan = index.createSpan({
|
|
29
30
|
className: "quote-icon-span",
|
|
30
31
|
elementStyles: {
|
|
31
32
|
element: {
|
|
32
|
-
position: "absolute",
|
|
33
|
-
left: "-24px",
|
|
34
|
-
top: "-32px",
|
|
35
|
-
height: "15px",
|
|
36
|
-
width: "22px",
|
|
37
33
|
display: "block",
|
|
38
|
-
|
|
34
|
+
position: "absolute",
|
|
35
|
+
...imageWithFeaturedLayout && {
|
|
39
36
|
display: "none"
|
|
40
37
|
},
|
|
41
|
-
...!
|
|
42
|
-
height: "
|
|
43
|
-
width: "
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
},
|
|
48
|
-
[`@container (min-width: ${_constants.SMALL}px)`]: {
|
|
49
|
-
...!image && {
|
|
38
|
+
...!hasImage && {
|
|
39
|
+
height: "15px",
|
|
40
|
+
width: "22px",
|
|
41
|
+
left: "-24px",
|
|
42
|
+
top: "-32px",
|
|
43
|
+
[`@container (min-width: ${_constants.SMALL}px)`]: {
|
|
50
44
|
left: `-${token__namespace.spacing["4xl"]}`,
|
|
51
45
|
top: "0"
|
|
52
46
|
}
|
|
53
47
|
},
|
|
48
|
+
...hasImage && {
|
|
49
|
+
bottom: "-7px",
|
|
50
|
+
left: "-2px",
|
|
51
|
+
height: "15px",
|
|
52
|
+
width: "21px",
|
|
53
|
+
[`@container (min-width: ${_constants.SMALL}px)`]: {
|
|
54
|
+
height: "20px",
|
|
55
|
+
width: "29px",
|
|
56
|
+
top: "-11px",
|
|
57
|
+
right: "-20px",
|
|
58
|
+
left: "inherit"
|
|
59
|
+
}
|
|
60
|
+
},
|
|
54
61
|
["& svg"]: {
|
|
55
62
|
fill: token__namespace.color.red,
|
|
56
63
|
...isThemeMaryland && {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"icon.js","sources":["../../../../source/composite/quote/elements/icon.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-styles-library/token';\nimport { quote as iconQuote } from '@universityofmaryland/web-icons-library/brand';\nimport { ElementModel } from 'model';\nimport { SMALL } from '../_constants';\nimport { type QuoteBaseProps, type QuoteVariantProps } from '../_types';\n\ninterface QuoteIconProps\n extends QuoteVariantProps,\n Pick<QuoteBaseProps, 'isThemeMaryland'
|
|
1
|
+
{"version":3,"file":"icon.js","sources":["../../../../source/composite/quote/elements/icon.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-styles-library/token';\nimport { quote as iconQuote } from '@universityofmaryland/web-icons-library/brand';\nimport { ElementModel } from 'model';\nimport { SMALL } from '../_constants';\nimport { type QuoteBaseProps, type QuoteVariantProps } from '../_types';\n\ninterface QuoteIconProps\n extends QuoteVariantProps,\n Pick<QuoteBaseProps, 'isThemeMaryland'> {\n hasImage?: boolean;\n}\n\nexport default ({\n hasImage = false,\n isThemeMaryland,\n isTypeFeatured = false,\n}: QuoteIconProps) => {\n const imageWithFeaturedLayout = hasImage && isTypeFeatured;\n\n const iconSpan = ElementModel.createSpan({\n className: 'quote-icon-span',\n elementStyles: {\n element: {\n display: 'block',\n position: 'absolute',\n\n ...(imageWithFeaturedLayout && {\n display: 'none',\n }),\n\n ...(!hasImage && {\n height: '15px',\n width: '22px',\n left: '-24px',\n top: '-32px',\n\n [`@container (min-width: ${SMALL}px)`]: {\n left: `-${token.spacing['4xl']}`,\n top: '0',\n },\n }),\n\n ...(hasImage && {\n bottom: '-7px',\n left: '-2px',\n height: '15px',\n width: '21px',\n\n [`@container (min-width: ${SMALL}px)`]: {\n height: '20px',\n width: '29px',\n top: '-11px',\n right: '-20px',\n left: 'inherit',\n },\n }),\n\n ['& svg']: {\n fill: token.color.red,\n\n ...(isThemeMaryland && {\n fill: token.color.gold,\n }),\n },\n },\n },\n });\n\n iconSpan.element.innerHTML = iconQuote;\n\n return iconSpan;\n};\n"],"names":["ElementModel.createSpan","SMALL","token","iconQuote"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAYA,MAAA,cAAe,CAAC;AAAA,EACd,WAAW;AAAA,EACX;AAAA,EACA,iBAAiB;AACnB,MAAsB;AACpB,QAAM,0BAA0B,YAAY;AAE5C,QAAM,WAAWA,MAAAA,WAAwB;AAAA,IACvC,WAAW;AAAA,IACX,eAAe;AAAA,MACb,SAAS;AAAA,QACP,SAAS;AAAA,QACT,UAAU;AAAA,QAEV,GAAI,2BAA2B;AAAA,UAC7B,SAAS;AAAA,QAAA;AAAA,QAGX,GAAI,CAAC,YAAY;AAAA,UACf,QAAQ;AAAA,UACR,OAAO;AAAA,UACP,MAAM;AAAA,UACN,KAAK;AAAA,UAEL,CAAC,0BAA0BC,gBAAK,KAAK,GAAG;AAAA,YACtC,MAAM,IAAIC,iBAAM,QAAQ,KAAK,CAAC;AAAA,YAC9B,KAAK;AAAA,UAAA;AAAA,QACP;AAAA,QAGF,GAAI,YAAY;AAAA,UACd,QAAQ;AAAA,UACR,MAAM;AAAA,UACN,QAAQ;AAAA,UACR,OAAO;AAAA,UAEP,CAAC,0BAA0BD,gBAAK,KAAK,GAAG;AAAA,YACtC,QAAQ;AAAA,YACR,OAAO;AAAA,YACP,KAAK;AAAA,YACL,OAAO;AAAA,YACP,MAAM;AAAA,UAAA;AAAA,QACR;AAAA,QAGF,CAAC,OAAO,GAAG;AAAA,UACT,MAAMC,iBAAM,MAAM;AAAA,UAElB,GAAI,mBAAmB;AAAA,YACrB,MAAMA,iBAAM,MAAM;AAAA,UAAA;AAAA,QACpB;AAAA,MACF;AAAA,IACF;AAAA,EACF,CACD;AAED,WAAS,QAAQ,YAAYC,MAAAA;AAE7B,SAAO;AACT;;"}
|
|
@@ -3,36 +3,43 @@ import { quote } from "@universityofmaryland/web-icons-library/brand";
|
|
|
3
3
|
import { createSpan } from "../../../model/elements/index.mjs";
|
|
4
4
|
import { SMALL } from "../_constants.mjs";
|
|
5
5
|
const elementIcon = ({
|
|
6
|
-
|
|
6
|
+
hasImage = false,
|
|
7
7
|
isThemeMaryland,
|
|
8
8
|
isTypeFeatured = false
|
|
9
9
|
}) => {
|
|
10
|
+
const imageWithFeaturedLayout = hasImage && isTypeFeatured;
|
|
10
11
|
const iconSpan = createSpan({
|
|
11
12
|
className: "quote-icon-span",
|
|
12
13
|
elementStyles: {
|
|
13
14
|
element: {
|
|
14
|
-
position: "absolute",
|
|
15
|
-
left: "-24px",
|
|
16
|
-
top: "-32px",
|
|
17
|
-
height: "15px",
|
|
18
|
-
width: "22px",
|
|
19
15
|
display: "block",
|
|
20
|
-
|
|
16
|
+
position: "absolute",
|
|
17
|
+
...imageWithFeaturedLayout && {
|
|
21
18
|
display: "none"
|
|
22
19
|
},
|
|
23
|
-
...!
|
|
24
|
-
height: "
|
|
25
|
-
width: "
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
},
|
|
30
|
-
[`@container (min-width: ${SMALL}px)`]: {
|
|
31
|
-
...!image && {
|
|
20
|
+
...!hasImage && {
|
|
21
|
+
height: "15px",
|
|
22
|
+
width: "22px",
|
|
23
|
+
left: "-24px",
|
|
24
|
+
top: "-32px",
|
|
25
|
+
[`@container (min-width: ${SMALL}px)`]: {
|
|
32
26
|
left: `-${token.spacing["4xl"]}`,
|
|
33
27
|
top: "0"
|
|
34
28
|
}
|
|
35
29
|
},
|
|
30
|
+
...hasImage && {
|
|
31
|
+
bottom: "-7px",
|
|
32
|
+
left: "-2px",
|
|
33
|
+
height: "15px",
|
|
34
|
+
width: "21px",
|
|
35
|
+
[`@container (min-width: ${SMALL}px)`]: {
|
|
36
|
+
height: "20px",
|
|
37
|
+
width: "29px",
|
|
38
|
+
top: "-11px",
|
|
39
|
+
right: "-20px",
|
|
40
|
+
left: "inherit"
|
|
41
|
+
}
|
|
42
|
+
},
|
|
36
43
|
["& svg"]: {
|
|
37
44
|
fill: token.color.red,
|
|
38
45
|
...isThemeMaryland && {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"icon.mjs","sources":["../../../../source/composite/quote/elements/icon.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-styles-library/token';\nimport { quote as iconQuote } from '@universityofmaryland/web-icons-library/brand';\nimport { ElementModel } from 'model';\nimport { SMALL } from '../_constants';\nimport { type QuoteBaseProps, type QuoteVariantProps } from '../_types';\n\ninterface QuoteIconProps\n extends QuoteVariantProps,\n Pick<QuoteBaseProps, 'isThemeMaryland'
|
|
1
|
+
{"version":3,"file":"icon.mjs","sources":["../../../../source/composite/quote/elements/icon.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-styles-library/token';\nimport { quote as iconQuote } from '@universityofmaryland/web-icons-library/brand';\nimport { ElementModel } from 'model';\nimport { SMALL } from '../_constants';\nimport { type QuoteBaseProps, type QuoteVariantProps } from '../_types';\n\ninterface QuoteIconProps\n extends QuoteVariantProps,\n Pick<QuoteBaseProps, 'isThemeMaryland'> {\n hasImage?: boolean;\n}\n\nexport default ({\n hasImage = false,\n isThemeMaryland,\n isTypeFeatured = false,\n}: QuoteIconProps) => {\n const imageWithFeaturedLayout = hasImage && isTypeFeatured;\n\n const iconSpan = ElementModel.createSpan({\n className: 'quote-icon-span',\n elementStyles: {\n element: {\n display: 'block',\n position: 'absolute',\n\n ...(imageWithFeaturedLayout && {\n display: 'none',\n }),\n\n ...(!hasImage && {\n height: '15px',\n width: '22px',\n left: '-24px',\n top: '-32px',\n\n [`@container (min-width: ${SMALL}px)`]: {\n left: `-${token.spacing['4xl']}`,\n top: '0',\n },\n }),\n\n ...(hasImage && {\n bottom: '-7px',\n left: '-2px',\n height: '15px',\n width: '21px',\n\n [`@container (min-width: ${SMALL}px)`]: {\n height: '20px',\n width: '29px',\n top: '-11px',\n right: '-20px',\n left: 'inherit',\n },\n }),\n\n ['& svg']: {\n fill: token.color.red,\n\n ...(isThemeMaryland && {\n fill: token.color.gold,\n }),\n },\n },\n },\n });\n\n iconSpan.element.innerHTML = iconQuote;\n\n return iconSpan;\n};\n"],"names":["ElementModel.createSpan","iconQuote"],"mappings":";;;;AAYA,MAAA,cAAe,CAAC;AAAA,EACd,WAAW;AAAA,EACX;AAAA,EACA,iBAAiB;AACnB,MAAsB;AACpB,QAAM,0BAA0B,YAAY;AAE5C,QAAM,WAAWA,WAAwB;AAAA,IACvC,WAAW;AAAA,IACX,eAAe;AAAA,MACb,SAAS;AAAA,QACP,SAAS;AAAA,QACT,UAAU;AAAA,QAEV,GAAI,2BAA2B;AAAA,UAC7B,SAAS;AAAA,QAAA;AAAA,QAGX,GAAI,CAAC,YAAY;AAAA,UACf,QAAQ;AAAA,UACR,OAAO;AAAA,UACP,MAAM;AAAA,UACN,KAAK;AAAA,UAEL,CAAC,0BAA0B,KAAK,KAAK,GAAG;AAAA,YACtC,MAAM,IAAI,MAAM,QAAQ,KAAK,CAAC;AAAA,YAC9B,KAAK;AAAA,UAAA;AAAA,QACP;AAAA,QAGF,GAAI,YAAY;AAAA,UACd,QAAQ;AAAA,UACR,MAAM;AAAA,UACN,QAAQ;AAAA,UACR,OAAO;AAAA,UAEP,CAAC,0BAA0B,KAAK,KAAK,GAAG;AAAA,YACtC,QAAQ;AAAA,YACR,OAAO;AAAA,YACP,KAAK;AAAA,YACL,OAAO;AAAA,YACP,MAAM;AAAA,UAAA;AAAA,QACR;AAAA,QAGF,CAAC,OAAO,GAAG;AAAA,UACT,MAAM,MAAM,MAAM;AAAA,UAElB,GAAI,mBAAmB;AAAA,YACrB,MAAM,MAAM,MAAM;AAAA,UAAA;AAAA,QACpB;AAAA,MACF;AAAA,IACF;AAAA,EACF,CACD;AAED,WAAS,QAAQ,YAAYC;AAE7B,SAAO;AACT;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"image.d.ts","sourceRoot":"","sources":["../../../../source/composite/quote/elements/image.ts"],"names":[],"mappings":"AAIA,OAAO,EACL,KAAK,cAAc,EACnB,KAAK,iBAAiB,EACtB,KAAK,cAAc,EACpB,MAAM,WAAW,CAAC;AAGnB,UAAU,eACR,SAAQ,iBAAiB,EACvB,cAAc,EACd,IAAI,CAAC,cAAc,EAAE,iBAAiB,CAAC;IACzC,KAAK,EAAE,gBAAgB,CAAC;CACzB;yBAEe,0DAKb,eAAe;;;;;AALlB,
|
|
1
|
+
{"version":3,"file":"image.d.ts","sourceRoot":"","sources":["../../../../source/composite/quote/elements/image.ts"],"names":[],"mappings":"AAIA,OAAO,EACL,KAAK,cAAc,EACnB,KAAK,iBAAiB,EACtB,KAAK,cAAc,EACpB,MAAM,WAAW,CAAC;AAGnB,UAAU,eACR,SAAQ,iBAAiB,EACvB,cAAc,EACd,IAAI,CAAC,cAAc,EAAE,iBAAiB,CAAC;IACzC,KAAK,EAAE,gBAAgB,CAAC;CACzB;yBAEe,0DAKb,eAAe;;;;;AALlB,wBA2DE"}
|
|
@@ -27,7 +27,7 @@ const elementImage = ({
|
|
|
27
27
|
isTypeFeatured
|
|
28
28
|
}) => {
|
|
29
29
|
const iconSpan = icon({
|
|
30
|
-
image,
|
|
30
|
+
hasImage: image != null,
|
|
31
31
|
isTypeFeatured,
|
|
32
32
|
isThemeMaryland
|
|
33
33
|
});
|
|
@@ -41,13 +41,13 @@ const elementImage = ({
|
|
|
41
41
|
height: "auto",
|
|
42
42
|
...!isTypeFeatured && {
|
|
43
43
|
maxWidth: "160px",
|
|
44
|
-
...isSizeLarge && { maxWidth: "200px" },
|
|
45
44
|
[`@container (min-width: ${_constants.SMALL}px)`]: {
|
|
46
|
-
borderRight: `2px solid ${token__namespace.color.red}
|
|
47
|
-
...isThemeMaryland && {
|
|
48
|
-
borderRight: `2px solid ${token__namespace.color.gold}`
|
|
49
|
-
}
|
|
45
|
+
borderRight: `2px solid ${token__namespace.color.red}`
|
|
50
46
|
}
|
|
47
|
+
},
|
|
48
|
+
...!isTypeFeatured && isSizeLarge && { maxWidth: "200px" },
|
|
49
|
+
...!isTypeFeatured && isThemeMaryland && {
|
|
50
|
+
borderRight: `2px solid ${token__namespace.color.gold}`
|
|
51
51
|
}
|
|
52
52
|
}
|
|
53
53
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"image.js","sources":["../../../../source/composite/quote/elements/image.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-styles-library/token';\nimport { ElementModel } from 'model';\nimport { default as elementIcon } from './icon';\nimport { SMALL } from '../_constants';\nimport {\n type QuoteBaseProps,\n type QuoteVariantProps,\n type QuoteSizeProps,\n} from '../_types';\nimport { type ElementVisual } from '../../../_types';\n\ninterface QuoteImageProps\n extends QuoteVariantProps,\n QuoteSizeProps,\n Pick<QuoteBaseProps, 'isThemeMaryland'> {\n image: HTMLImageElement;\n}\n\nexport default ({\n image,\n isSizeLarge,\n isThemeMaryland,\n isTypeFeatured,\n}: QuoteImageProps) => {\n const iconSpan = elementIcon({\n image,\n isTypeFeatured,\n isThemeMaryland,\n });\n const imageContainerChildren: ElementVisual[] = [];\n const imageElement = ElementModel.create({\n element: image,\n className: 'quote-image',\n elementStyles: {\n element: {\n maxWidth: '100%',\n height: 'auto',\n\n ...(!isTypeFeatured && {\n maxWidth: '160px',\n\n
|
|
1
|
+
{"version":3,"file":"image.js","sources":["../../../../source/composite/quote/elements/image.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-styles-library/token';\nimport { ElementModel } from 'model';\nimport { default as elementIcon } from './icon';\nimport { SMALL } from '../_constants';\nimport {\n type QuoteBaseProps,\n type QuoteVariantProps,\n type QuoteSizeProps,\n} from '../_types';\nimport { type ElementVisual } from '../../../_types';\n\ninterface QuoteImageProps\n extends QuoteVariantProps,\n QuoteSizeProps,\n Pick<QuoteBaseProps, 'isThemeMaryland'> {\n image: HTMLImageElement;\n}\n\nexport default ({\n image,\n isSizeLarge,\n isThemeMaryland,\n isTypeFeatured,\n}: QuoteImageProps) => {\n const iconSpan = elementIcon({\n hasImage: image != null,\n isTypeFeatured,\n isThemeMaryland,\n });\n const imageContainerChildren: ElementVisual[] = [];\n const imageElement = ElementModel.create({\n element: image,\n className: 'quote-image',\n elementStyles: {\n element: {\n maxWidth: '100%',\n height: 'auto',\n\n ...(!isTypeFeatured && {\n maxWidth: '160px',\n\n [`@container (min-width: ${SMALL}px)`]: {\n borderRight: `2px solid ${token.color.red}`,\n },\n }),\n\n ...(!isTypeFeatured && isSizeLarge && { maxWidth: '200px' }),\n\n ...(!isTypeFeatured &&\n isThemeMaryland && {\n borderRight: `2px solid ${token.color.gold}`,\n }),\n },\n },\n });\n\n if (!isTypeFeatured) {\n imageContainerChildren.push(iconSpan);\n }\n\n imageContainerChildren.push(imageElement);\n\n return ElementModel.createDiv({\n className: 'quote-image-container',\n children: imageContainerChildren,\n elementStyles: {\n element: {\n display: 'inline-block',\n position: 'relative',\n\n ...(!isTypeFeatured && {\n marginBottom: token.spacing.sm,\n position: 'relative',\n }),\n },\n },\n });\n};\n"],"names":["elementIcon","ElementModel.create","SMALL","token","ElementModel.createDiv"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAkBA,MAAA,eAAe,CAAC;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAuB;AACrB,QAAM,WAAWA,KAAY;AAAA,IAC3B,UAAU,SAAS;AAAA,IACnB;AAAA,IACA;AAAA,EAAA,CACD;AACD,QAAM,yBAA0C,CAAA;AAChD,QAAM,eAAeC,MAAAA,OAAoB;AAAA,IACvC,SAAS;AAAA,IACT,WAAW;AAAA,IACX,eAAe;AAAA,MACb,SAAS;AAAA,QACP,UAAU;AAAA,QACV,QAAQ;AAAA,QAER,GAAI,CAAC,kBAAkB;AAAA,UACrB,UAAU;AAAA,UAEV,CAAC,0BAA0BC,gBAAK,KAAK,GAAG;AAAA,YACtC,aAAa,aAAaC,iBAAM,MAAM,GAAG;AAAA,UAAA;AAAA,QAC3C;AAAA,QAGF,GAAI,CAAC,kBAAkB,eAAe,EAAE,UAAU,QAAA;AAAA,QAElD,GAAI,CAAC,kBACH,mBAAmB;AAAA,UACjB,aAAa,aAAaA,iBAAM,MAAM,IAAI;AAAA,QAAA;AAAA,MAC5C;AAAA,IACJ;AAAA,EACF,CACD;AAED,MAAI,CAAC,gBAAgB;AACnB,2BAAuB,KAAK,QAAQ;AAAA,EACtC;AAEA,yBAAuB,KAAK,YAAY;AAExC,SAAOC,gBAAuB;AAAA,IAC5B,WAAW;AAAA,IACX,UAAU;AAAA,IACV,eAAe;AAAA,MACb,SAAS;AAAA,QACP,SAAS;AAAA,QACT,UAAU;AAAA,QAEV,GAAI,CAAC,kBAAkB;AAAA,UACrB,cAAcD,iBAAM,QAAQ;AAAA,UAC5B,UAAU;AAAA,QAAA;AAAA,MACZ;AAAA,IACF;AAAA,EACF,CACD;AACH;;"}
|
|
@@ -9,7 +9,7 @@ const elementImage = ({
|
|
|
9
9
|
isTypeFeatured
|
|
10
10
|
}) => {
|
|
11
11
|
const iconSpan = elementIcon({
|
|
12
|
-
image,
|
|
12
|
+
hasImage: image != null,
|
|
13
13
|
isTypeFeatured,
|
|
14
14
|
isThemeMaryland
|
|
15
15
|
});
|
|
@@ -23,13 +23,13 @@ const elementImage = ({
|
|
|
23
23
|
height: "auto",
|
|
24
24
|
...!isTypeFeatured && {
|
|
25
25
|
maxWidth: "160px",
|
|
26
|
-
...isSizeLarge && { maxWidth: "200px" },
|
|
27
26
|
[`@container (min-width: ${SMALL}px)`]: {
|
|
28
|
-
borderRight: `2px solid ${token.color.red}
|
|
29
|
-
...isThemeMaryland && {
|
|
30
|
-
borderRight: `2px solid ${token.color.gold}`
|
|
31
|
-
}
|
|
27
|
+
borderRight: `2px solid ${token.color.red}`
|
|
32
28
|
}
|
|
29
|
+
},
|
|
30
|
+
...!isTypeFeatured && isSizeLarge && { maxWidth: "200px" },
|
|
31
|
+
...!isTypeFeatured && isThemeMaryland && {
|
|
32
|
+
borderRight: `2px solid ${token.color.gold}`
|
|
33
33
|
}
|
|
34
34
|
}
|
|
35
35
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"image.mjs","sources":["../../../../source/composite/quote/elements/image.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-styles-library/token';\nimport { ElementModel } from 'model';\nimport { default as elementIcon } from './icon';\nimport { SMALL } from '../_constants';\nimport {\n type QuoteBaseProps,\n type QuoteVariantProps,\n type QuoteSizeProps,\n} from '../_types';\nimport { type ElementVisual } from '../../../_types';\n\ninterface QuoteImageProps\n extends QuoteVariantProps,\n QuoteSizeProps,\n Pick<QuoteBaseProps, 'isThemeMaryland'> {\n image: HTMLImageElement;\n}\n\nexport default ({\n image,\n isSizeLarge,\n isThemeMaryland,\n isTypeFeatured,\n}: QuoteImageProps) => {\n const iconSpan = elementIcon({\n image,\n isTypeFeatured,\n isThemeMaryland,\n });\n const imageContainerChildren: ElementVisual[] = [];\n const imageElement = ElementModel.create({\n element: image,\n className: 'quote-image',\n elementStyles: {\n element: {\n maxWidth: '100%',\n height: 'auto',\n\n ...(!isTypeFeatured && {\n maxWidth: '160px',\n\n
|
|
1
|
+
{"version":3,"file":"image.mjs","sources":["../../../../source/composite/quote/elements/image.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-styles-library/token';\nimport { ElementModel } from 'model';\nimport { default as elementIcon } from './icon';\nimport { SMALL } from '../_constants';\nimport {\n type QuoteBaseProps,\n type QuoteVariantProps,\n type QuoteSizeProps,\n} from '../_types';\nimport { type ElementVisual } from '../../../_types';\n\ninterface QuoteImageProps\n extends QuoteVariantProps,\n QuoteSizeProps,\n Pick<QuoteBaseProps, 'isThemeMaryland'> {\n image: HTMLImageElement;\n}\n\nexport default ({\n image,\n isSizeLarge,\n isThemeMaryland,\n isTypeFeatured,\n}: QuoteImageProps) => {\n const iconSpan = elementIcon({\n hasImage: image != null,\n isTypeFeatured,\n isThemeMaryland,\n });\n const imageContainerChildren: ElementVisual[] = [];\n const imageElement = ElementModel.create({\n element: image,\n className: 'quote-image',\n elementStyles: {\n element: {\n maxWidth: '100%',\n height: 'auto',\n\n ...(!isTypeFeatured && {\n maxWidth: '160px',\n\n [`@container (min-width: ${SMALL}px)`]: {\n borderRight: `2px solid ${token.color.red}`,\n },\n }),\n\n ...(!isTypeFeatured && isSizeLarge && { maxWidth: '200px' }),\n\n ...(!isTypeFeatured &&\n isThemeMaryland && {\n borderRight: `2px solid ${token.color.gold}`,\n }),\n },\n },\n });\n\n if (!isTypeFeatured) {\n imageContainerChildren.push(iconSpan);\n }\n\n imageContainerChildren.push(imageElement);\n\n return ElementModel.createDiv({\n className: 'quote-image-container',\n children: imageContainerChildren,\n elementStyles: {\n element: {\n display: 'inline-block',\n position: 'relative',\n\n ...(!isTypeFeatured && {\n marginBottom: token.spacing.sm,\n position: 'relative',\n }),\n },\n },\n });\n};\n"],"names":["ElementModel.create","ElementModel.createDiv"],"mappings":";;;;AAkBA,MAAA,eAAe,CAAC;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAuB;AACrB,QAAM,WAAW,YAAY;AAAA,IAC3B,UAAU,SAAS;AAAA,IACnB;AAAA,IACA;AAAA,EAAA,CACD;AACD,QAAM,yBAA0C,CAAA;AAChD,QAAM,eAAeA,OAAoB;AAAA,IACvC,SAAS;AAAA,IACT,WAAW;AAAA,IACX,eAAe;AAAA,MACb,SAAS;AAAA,QACP,UAAU;AAAA,QACV,QAAQ;AAAA,QAER,GAAI,CAAC,kBAAkB;AAAA,UACrB,UAAU;AAAA,UAEV,CAAC,0BAA0B,KAAK,KAAK,GAAG;AAAA,YACtC,aAAa,aAAa,MAAM,MAAM,GAAG;AAAA,UAAA;AAAA,QAC3C;AAAA,QAGF,GAAI,CAAC,kBAAkB,eAAe,EAAE,UAAU,QAAA;AAAA,QAElD,GAAI,CAAC,kBACH,mBAAmB;AAAA,UACjB,aAAa,aAAa,MAAM,MAAM,IAAI;AAAA,QAAA;AAAA,MAC5C;AAAA,IACJ;AAAA,EACF,CACD;AAED,MAAI,CAAC,gBAAgB;AACnB,2BAAuB,KAAK,QAAQ;AAAA,EACtC;AAEA,yBAAuB,KAAK,YAAY;AAExC,SAAOC,UAAuB;AAAA,IAC5B,WAAW;AAAA,IACX,UAAU;AAAA,IACV,eAAe;AAAA,MACb,SAAS;AAAA,QACP,SAAS;AAAA,QACT,UAAU;AAAA,QAEV,GAAI,CAAC,kBAAkB;AAAA,UACrB,cAAc,MAAM,QAAQ;AAAA,UAC5B,UAAU;AAAA,QAAA;AAAA,MACZ;AAAA,IACF;AAAA,EACF,CACD;AACH;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../source/composite/quote/elements/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,SAAS,CAAC;AAC3C,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAC;AACzC,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAC;AACzC,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../source/composite/quote/elements/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,SAAS,CAAC;AAC3C,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAC;AACzC,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAC;AACzC,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC;AAC7C,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,SAAS,CAAC"}
|
|
@@ -4,8 +4,10 @@ const image = require("./image.js");
|
|
|
4
4
|
const text = require("./text.js");
|
|
5
5
|
const icon = require("./icon.js");
|
|
6
6
|
const action = require("./action.js");
|
|
7
|
+
const quote = require("./quote.js");
|
|
7
8
|
exports.image = image;
|
|
8
9
|
exports.text = text;
|
|
9
10
|
exports.icon = icon;
|
|
10
11
|
exports.action = action;
|
|
12
|
+
exports.quote = quote;
|
|
11
13
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;"}
|
|
@@ -2,10 +2,12 @@ import { default as default2 } from "./image.mjs";
|
|
|
2
2
|
import { default as default3 } from "./text.mjs";
|
|
3
3
|
import { default as default4 } from "./icon.mjs";
|
|
4
4
|
import { default as default5 } from "./action.mjs";
|
|
5
|
+
import { default as default6 } from "./quote.mjs";
|
|
5
6
|
export {
|
|
6
7
|
default5 as action,
|
|
7
8
|
default4 as icon,
|
|
8
9
|
default2 as image,
|
|
10
|
+
default6 as quote,
|
|
9
11
|
default3 as text
|
|
10
12
|
};
|
|
11
13
|
//# sourceMappingURL=index.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;"}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { QuoteTextProps } from '../_types';
|
|
2
|
+
interface QuoteProps extends Pick<QuoteTextProps, 'quote' | 'isThemeMaryland' | 'isSizeLarge' | 'isTypeFeatured' | 'includesAnimation'> {
|
|
3
|
+
hasImage?: boolean;
|
|
4
|
+
shouldHaveWhiteText?: boolean;
|
|
5
|
+
quote: HTMLElement;
|
|
6
|
+
}
|
|
7
|
+
declare const _default: (props: QuoteProps) => {
|
|
8
|
+
element: HTMLElement;
|
|
9
|
+
className: string;
|
|
10
|
+
styles: string;
|
|
11
|
+
};
|
|
12
|
+
export default _default;
|
|
13
|
+
//# sourceMappingURL=quote.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"quote.d.ts","sourceRoot":"","sources":["../../../../source/composite/quote/elements/quote.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,WAAW,CAAC;AAGhD,UAAU,UACR,SAAQ,IAAI,CACV,cAAc,EACZ,OAAO,GACP,iBAAiB,GACjB,aAAa,GACb,gBAAgB,GAChB,mBAAmB,CACtB;IACD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,KAAK,EAAE,WAAW,CAAC;CACpB;yBA0Be,OAAO,UAAU;;;;;AAAjC,wBAkFE"}
|