@universityofmaryland/web-elements-library 1.6.1-beta.1 → 1.6.1
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/dist/atomic/text-lockup/person.d.ts.map +1 -1
- package/dist/atomic/text-lockup/person.js +11 -7
- package/dist/atomic/text-lockup/person.js.map +1 -1
- package/dist/atomic/text-lockup/small-scaling.js +3 -3
- package/dist/atomic/text-lockup/small-scaling.js.map +1 -1
- package/dist/atomic/text-lockup/small.js +3 -3
- package/dist/atomic/text-lockup/small.js.map +1 -1
- package/dist/composite/layout/section-intro/small.d.ts +2 -10
- package/dist/composite/layout/section-intro/small.d.ts.map +1 -1
- package/dist/composite/layout/section-intro/small.js +6 -86
- package/dist/composite/layout/section-intro/small.js.map +1 -1
- package/dist/composite/person/tabular.js +3 -3
- package/dist/composite/person/tabular.js.map +1 -1
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"person.d.ts","sourceRoot":"","sources":["../../../source/atomic/text-lockup/person.ts"],"names":[],"mappings":"AAOA,OAAO,EAAE,KAAK,qBAAqB,EAAE,MAAM,WAAW,CAAC;AAEvD,eAAO,MAAM,sBAAsB,GAAI,6FASpC,qBAAqB,
|
|
1
|
+
{"version":3,"file":"person.d.ts","sourceRoot":"","sources":["../../../source/atomic/text-lockup/person.ts"],"names":[],"mappings":"AAOA,OAAO,EAAE,KAAK,qBAAqB,EAAE,MAAM,WAAW,CAAC;AAEvD,eAAO,MAAM,sBAAsB,GAAI,6FASpC,qBAAqB,kFAqKvB,CAAC"}
|
|
@@ -26,11 +26,11 @@ const createTextLockupPerson = ({
|
|
|
26
26
|
}
|
|
27
27
|
if (name) {
|
|
28
28
|
const headlineStyles = {
|
|
29
|
-
...typography.sans.compose("larger", {
|
|
30
|
-
theme: theme.fontColor(isThemeDark)
|
|
31
|
-
}),
|
|
32
29
|
...animation.line.composeSlideUnder({
|
|
33
30
|
color: theme.foreground(isThemeDark)
|
|
31
|
+
}),
|
|
32
|
+
...typography.sans.compose("larger", {
|
|
33
|
+
theme: theme.fontColor(isThemeDark)
|
|
34
34
|
})
|
|
35
35
|
};
|
|
36
36
|
const nameElement = new ElementBuilder(name).withClassName("person-name").styled(headlineStyles).withStyles({
|
|
@@ -54,7 +54,7 @@ const createTextLockupPerson = ({
|
|
|
54
54
|
).withStyles({
|
|
55
55
|
element: {
|
|
56
56
|
lineHeight: `1.25em`,
|
|
57
|
-
...!isThemeDark && { color: `${token.color.gray.dark}` }
|
|
57
|
+
...!isThemeDark && { color: `${token.color.gray.dark} !important` }
|
|
58
58
|
},
|
|
59
59
|
subElement: {
|
|
60
60
|
color: "currentColor"
|
|
@@ -71,7 +71,7 @@ const createTextLockupPerson = ({
|
|
|
71
71
|
element: {
|
|
72
72
|
lineHeight: "1.2em",
|
|
73
73
|
display: "block",
|
|
74
|
-
...!isThemeDark && { color: `${token.color.gray.dark}` },
|
|
74
|
+
...!isThemeDark && { color: `${token.color.gray.dark} !important` },
|
|
75
75
|
[`& + *`]: {
|
|
76
76
|
marginTop: "4px"
|
|
77
77
|
},
|
|
@@ -86,14 +86,18 @@ const createTextLockupPerson = ({
|
|
|
86
86
|
container.withChild(slotTwoElement);
|
|
87
87
|
}
|
|
88
88
|
if (slotThreeItalic) {
|
|
89
|
-
|
|
89
|
+
const italicElement = document.createElement("i");
|
|
90
|
+
while (slotThreeItalic.firstChild) {
|
|
91
|
+
italicElement.appendChild(slotThreeItalic.firstChild);
|
|
92
|
+
}
|
|
93
|
+
slotThreeItalic.appendChild(italicElement);
|
|
90
94
|
const slotThreeItalicElement = new ElementBuilder(slotThreeItalic).withClassName("slot-three-italic").styled(
|
|
91
95
|
typography.sans.compose("small", {
|
|
92
96
|
theme: theme.fontColor(isThemeDark)
|
|
93
97
|
})
|
|
94
98
|
).withStyles({
|
|
95
99
|
element: {
|
|
96
|
-
...!isThemeDark && { color: `${token.color.gray.dark}` },
|
|
100
|
+
...!isThemeDark && { color: `${token.color.gray.dark} !important` },
|
|
97
101
|
[`& + *`]: {
|
|
98
102
|
marginTop: "4px"
|
|
99
103
|
},
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"person.js","sources":["../../../source/atomic/text-lockup/person.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 * as layout from '@universityofmaryland/web-styles-library/layout';\nimport * as animationStyles from '@universityofmaryland/web-styles-library/animation';\nimport { theme } from '@universityofmaryland/web-utilities-library/theme';\nimport { wrapTextNodeInSpan } from '@universityofmaryland/web-utilities-library/dom';\nimport { type PersonTextLockupProps } from '../_types';\n\nexport const createTextLockupPerson = ({\n actions,\n slotTwo,\n isThemeDark,\n slotOne,\n name,\n nameComposite,\n slotThreeItalic,\n slotFour,\n}: PersonTextLockupProps) => {\n const container = new ElementBuilder()\n .withClassName('text-lockup-person-container')\n .withStyles({\n element: {\n zIndex: '9',\n position: 'relative',\n },\n });\n\n if (nameComposite && !name) {\n container.withChild(nameComposite);\n }\n\n if (name) {\n const headlineStyles = {\n ...
|
|
1
|
+
{"version":3,"file":"person.js","sources":["../../../source/atomic/text-lockup/person.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 * as layout from '@universityofmaryland/web-styles-library/layout';\nimport * as animationStyles from '@universityofmaryland/web-styles-library/animation';\nimport { theme } from '@universityofmaryland/web-utilities-library/theme';\nimport { wrapTextNodeInSpan } from '@universityofmaryland/web-utilities-library/dom';\nimport { type PersonTextLockupProps } from '../_types';\n\nexport const createTextLockupPerson = ({\n actions,\n slotTwo,\n isThemeDark,\n slotOne,\n name,\n nameComposite,\n slotThreeItalic,\n slotFour,\n}: PersonTextLockupProps) => {\n const container = new ElementBuilder()\n .withClassName('text-lockup-person-container')\n .withStyles({\n element: {\n zIndex: '9',\n position: 'relative',\n },\n });\n\n if (nameComposite && !name) {\n container.withChild(nameComposite);\n }\n\n if (name) {\n const headlineStyles = {\n ...animationStyles.line.composeSlideUnder({\n color: theme.foreground(isThemeDark),\n }),\n ...typography.sans.compose('larger', {\n theme: theme.fontColor(isThemeDark),\n }),\n };\n\n const nameElement = new ElementBuilder(name)\n .withClassName('person-name')\n .styled(headlineStyles)\n .withStyles({\n element: {\n fontWeight: '700',\n\n [`& + *`]: {\n marginTop: '4px',\n },\n },\n subElement: {\n color: 'currentColor',\n },\n })\n .withModifier((el) => wrapTextNodeInSpan(el))\n .build();\n\n container.withChild(nameElement);\n }\n\n if (slotOne) {\n const slotOneElement = new ElementBuilder(slotOne)\n .withClassName('slot-one')\n .styled(\n typography.sans.compose('small', {\n theme: theme.fontColor(isThemeDark),\n }),\n )\n .withStyles({\n element: {\n lineHeight: `1.25em`,\n\n ...(!isThemeDark && { color: `${token.color.gray.dark} !important` }),\n },\n subElement: {\n color: 'currentColor',\n },\n })\n .build();\n\n container.withChild(slotOneElement);\n }\n\n if (slotTwo) {\n const slotTwoElement = new ElementBuilder(slotTwo)\n .withClassName('slot-two')\n .styled(\n typography.sans.compose('small', {\n theme: theme.fontColor(isThemeDark),\n }),\n )\n .withStyles({\n element: {\n lineHeight: '1.2em',\n display: 'block',\n ...(!isThemeDark && { color: `${token.color.gray.dark} !important` }),\n\n [`& + *`]: {\n marginTop: '4px',\n },\n\n [`& a:hover, a:focus`]: {\n textDecoration: 'underline',\n },\n },\n subElement: {\n color: 'currentColor',\n },\n })\n .build();\n\n container.withChild(slotTwoElement);\n }\n\n if (slotThreeItalic) {\n const italicElement = document.createElement('i');\n while (slotThreeItalic.firstChild) {\n italicElement.appendChild(slotThreeItalic.firstChild);\n }\n slotThreeItalic.appendChild(italicElement);\n const slotThreeItalicElement = new ElementBuilder(slotThreeItalic)\n .withClassName('slot-three-italic')\n .styled(\n typography.sans.compose('small', {\n theme: theme.fontColor(isThemeDark),\n }),\n )\n .withStyles({\n element: {\n ...(!isThemeDark && { color: `${token.color.gray.dark} !important` }),\n\n [`& + *`]: {\n marginTop: '4px',\n },\n\n [`& *`]: {\n color: 'currentColor',\n },\n },\n })\n .build();\n\n container.withChild(slotThreeItalicElement);\n }\n\n if (slotFour) {\n const slotFourElement = new ElementBuilder(slotFour)\n .withClassName('slot-four')\n .styled(\n typography.sans.compose('small', {\n theme: theme.fontColor(isThemeDark),\n }),\n )\n .withStyles({\n element: {\n ...(!isThemeDark && { color: `${token.color.gray.dark}` }),\n },\n siblingAfter: {\n marginTop: '4px',\n },\n })\n .build();\n\n container.withChild(slotFourElement);\n }\n\n if (actions) {\n const actionsElement = new ElementBuilder(actions)\n .styled(layout.grid.inline.tabletRows)\n .withStyles({\n element: {\n marginTop: token.spacing.sm,\n },\n })\n .build();\n\n container.withChild(actionsElement);\n }\n\n return container.build();\n};\n"],"names":["animationStyles"],"mappings":"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"}
|
|
@@ -33,12 +33,12 @@ const createTextLockupSmallScaling = ({
|
|
|
33
33
|
}
|
|
34
34
|
if (headline) {
|
|
35
35
|
const composeHeadlineStyles = {
|
|
36
|
+
...animation.line.composeSlideUnder({
|
|
37
|
+
color: theme.foreground(isThemeDark)
|
|
38
|
+
}),
|
|
36
39
|
...typography.sans.compose("larger", {
|
|
37
40
|
theme: theme.fontColor(isThemeDark),
|
|
38
41
|
scaling: true
|
|
39
|
-
}),
|
|
40
|
-
...animation.line.composeSlideUnder({
|
|
41
|
-
color: theme.foreground(isThemeDark)
|
|
42
42
|
})
|
|
43
43
|
};
|
|
44
44
|
const headlineElement = new ElementBuilder(headline).styled(composeHeadlineStyles).withStyles(headlineStyles).withModifier((el) => wrapTextNodeInSpan(el)).build();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"small-scaling.js","sources":["../../../source/atomic/text-lockup/small-scaling.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport * as typography from '@universityofmaryland/web-styles-library/typography';\nimport * as elementStyles from '@universityofmaryland/web-styles-library/element';\nimport { theme } from '@universityofmaryland/web-utilities-library/theme';\nimport * as animationStyles from '@universityofmaryland/web-styles-library/animation';\nimport { wrapTextNodeInSpan } from '@universityofmaryland/web-utilities-library/dom';\nimport {\n createEyebrow,\n createRibbonEyebrow,\n createActions,\n headlineStyles,\n textStyles,\n dateStyles,\n} from './small';\nimport { type UMDElement } from '../../_types';\n\nexport type TypeTextLockupSmallScaling = {\n actions?: HTMLElement | null;\n customStyles?: Record<string, string>;\n date?: HTMLElement | null;\n eventMeta?: UMDElement;\n eyebrow?: HTMLElement | null;\n hasEyebrowRibbon?: boolean;\n headline?: HTMLElement | null;\n isThemeDark?: boolean;\n text?: HTMLElement | null;\n};\n\nexport const createTextLockupSmallScaling = ({\n actions,\n customStyles = {},\n date,\n eventMeta,\n eyebrow,\n hasEyebrowRibbon = false,\n headline,\n isThemeDark,\n text,\n}: TypeTextLockupSmallScaling) => {\n const container = new ElementBuilder()\n .withClassName('scaling-font-block-container')\n .withStyles({\n element: {\n zIndex: '9',\n position: 'relative',\n ...customStyles,\n },\n });\n\n if (eyebrow && !hasEyebrowRibbon) {\n const eyebrowElement = createEyebrow({ eyebrow, isThemeDark });\n container.withChild(eyebrowElement);\n }\n\n if (eyebrow && hasEyebrowRibbon) {\n const ribbonEyebrowElement = createRibbonEyebrow({ eyebrow });\n container.withChild(ribbonEyebrowElement);\n }\n\n if (headline) {\n const composeHeadlineStyles = {\n ...
|
|
1
|
+
{"version":3,"file":"small-scaling.js","sources":["../../../source/atomic/text-lockup/small-scaling.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport * as typography from '@universityofmaryland/web-styles-library/typography';\nimport * as elementStyles from '@universityofmaryland/web-styles-library/element';\nimport { theme } from '@universityofmaryland/web-utilities-library/theme';\nimport * as animationStyles from '@universityofmaryland/web-styles-library/animation';\nimport { wrapTextNodeInSpan } from '@universityofmaryland/web-utilities-library/dom';\nimport {\n createEyebrow,\n createRibbonEyebrow,\n createActions,\n headlineStyles,\n textStyles,\n dateStyles,\n} from './small';\nimport { type UMDElement } from '../../_types';\n\nexport type TypeTextLockupSmallScaling = {\n actions?: HTMLElement | null;\n customStyles?: Record<string, string>;\n date?: HTMLElement | null;\n eventMeta?: UMDElement;\n eyebrow?: HTMLElement | null;\n hasEyebrowRibbon?: boolean;\n headline?: HTMLElement | null;\n isThemeDark?: boolean;\n text?: HTMLElement | null;\n};\n\nexport const createTextLockupSmallScaling = ({\n actions,\n customStyles = {},\n date,\n eventMeta,\n eyebrow,\n hasEyebrowRibbon = false,\n headline,\n isThemeDark,\n text,\n}: TypeTextLockupSmallScaling) => {\n const container = new ElementBuilder()\n .withClassName('scaling-font-block-container')\n .withStyles({\n element: {\n zIndex: '9',\n position: 'relative',\n ...customStyles,\n },\n });\n\n if (eyebrow && !hasEyebrowRibbon) {\n const eyebrowElement = createEyebrow({ eyebrow, isThemeDark });\n container.withChild(eyebrowElement);\n }\n\n if (eyebrow && hasEyebrowRibbon) {\n const ribbonEyebrowElement = createRibbonEyebrow({ eyebrow });\n container.withChild(ribbonEyebrowElement);\n }\n\n if (headline) {\n const composeHeadlineStyles = {\n ...animationStyles.line.composeSlideUnder({\n color: theme.foreground(isThemeDark),\n }),\n ...typography.sans.compose('larger', {\n theme: theme.fontColor(isThemeDark),\n scaling: true,\n }),\n };\n\n const headlineElement = new ElementBuilder(headline)\n .styled(composeHeadlineStyles)\n .withStyles(headlineStyles)\n .withModifier((el) => wrapTextNodeInSpan(el))\n .build();\n\n container.withChild(headlineElement);\n }\n\n if (eventMeta) {\n container.withChild(eventMeta);\n }\n\n if (text) {\n const textElement = new ElementBuilder(text)\n .styled(\n elementStyles.text.rich.composeSimple({\n theme: theme.fontColor(isThemeDark),\n scaling: true,\n }),\n )\n .withStyles(textStyles(isThemeDark))\n .build();\n\n container.withChild(textElement);\n }\n\n if (date) {\n const dateElement = new ElementBuilder(date)\n .styled(\n typography.sans.compose('min', {\n theme: theme.fontColor(isThemeDark),\n scaling: true,\n }),\n )\n .withStyles(dateStyles(isThemeDark))\n .build();\n\n container.withChild(dateElement);\n }\n\n if (actions) {\n const actionsElement = createActions({ actions });\n container.withChild(actionsElement);\n }\n\n return container.build();\n};\n"],"names":["animationStyles"],"mappings":";;;;;;;AA4BO,MAAM,+BAA+B,CAAC;AAAA,EAC3C;AAAA,EACA,eAAe,CAAA;AAAA,EACf;AAAA,EACA;AAAA,EACA;AAAA,EACA,mBAAmB;AAAA,EACnB;AAAA,EACA;AAAA,EACA;AACF,MAAkC;AAChC,QAAM,YAAY,IAAI,eAAA,EACnB,cAAc,8BAA8B,EAC5C,WAAW;AAAA,IACV,SAAS;AAAA,MACP,QAAQ;AAAA,MACR,UAAU;AAAA,MACV,GAAG;AAAA,IAAA;AAAA,EACL,CACD;AAEH,MAAI,WAAW,CAAC,kBAAkB;AAChC,UAAM,iBAAiB,cAAc,EAAE,SAAS,aAAa;AAC7D,cAAU,UAAU,cAAc;AAAA,EACpC;AAEA,MAAI,WAAW,kBAAkB;AAC/B,UAAM,uBAAuB,oBAAoB,EAAE,SAAS;AAC5D,cAAU,UAAU,oBAAoB;AAAA,EAC1C;AAEA,MAAI,UAAU;AACZ,UAAM,wBAAwB;AAAA,MAC5B,GAAGA,UAAgB,KAAK,kBAAkB;AAAA,QACxC,OAAO,MAAM,WAAW,WAAW;AAAA,MAAA,CACpC;AAAA,MACD,GAAG,WAAW,KAAK,QAAQ,UAAU;AAAA,QACnC,OAAO,MAAM,UAAU,WAAW;AAAA,QAClC,SAAS;AAAA,MAAA,CACV;AAAA,IAAA;AAGH,UAAM,kBAAkB,IAAI,eAAe,QAAQ,EAChD,OAAO,qBAAqB,EAC5B,WAAW,cAAc,EACzB,aAAa,CAAC,OAAO,mBAAmB,EAAE,CAAC,EAC3C,MAAA;AAEH,cAAU,UAAU,eAAe;AAAA,EACrC;AAEA,MAAI,WAAW;AACb,cAAU,UAAU,SAAS;AAAA,EAC/B;AAEA,MAAI,MAAM;AACR,UAAM,cAAc,IAAI,eAAe,IAAI,EACxC;AAAA,MACC,cAAc,KAAK,KAAK,cAAc;AAAA,QACpC,OAAO,MAAM,UAAU,WAAW;AAAA,QAClC,SAAS;AAAA,MAAA,CACV;AAAA,IAAA,EAEF,WAAW,WAAW,WAAW,CAAC,EAClC,MAAA;AAEH,cAAU,UAAU,WAAW;AAAA,EACjC;AAEA,MAAI,MAAM;AACR,UAAM,cAAc,IAAI,eAAe,IAAI,EACxC;AAAA,MACC,WAAW,KAAK,QAAQ,OAAO;AAAA,QAC7B,OAAO,MAAM,UAAU,WAAW;AAAA,QAClC,SAAS;AAAA,MAAA,CACV;AAAA,IAAA,EAEF,WAAW,WAAW,WAAW,CAAC,EAClC,MAAA;AAEH,cAAU,UAAU,WAAW;AAAA,EACjC;AAEA,MAAI,SAAS;AACX,UAAM,iBAAiB,cAAc,EAAE,SAAS;AAChD,cAAU,UAAU,cAAc;AAAA,EACpC;AAEA,SAAO,UAAU,MAAA;AACnB;"}
|
|
@@ -111,11 +111,11 @@ const createTextLockupSmall = ({
|
|
|
111
111
|
}
|
|
112
112
|
if (headline) {
|
|
113
113
|
const composeHeadlineStyles = {
|
|
114
|
-
...typography.sans.compose("larger", {
|
|
115
|
-
theme: theme.fontColor(isThemeDark)
|
|
116
|
-
}),
|
|
117
114
|
...animation.line.composeSlideUnder({
|
|
118
115
|
color: theme.foreground(isThemeDark)
|
|
116
|
+
}),
|
|
117
|
+
...typography.sans.compose("larger", {
|
|
118
|
+
theme: theme.fontColor(isThemeDark)
|
|
119
119
|
})
|
|
120
120
|
};
|
|
121
121
|
const headlineElement = new ElementBuilder(headline).styled(composeHeadlineStyles).withStyles(headlineStyles).withModifier((el) => wrapTextNodeInSpan(el)).build();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"small.js","sources":["../../../source/atomic/text-lockup/small.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport * as token from '@universityofmaryland/web-token-library';\nimport * as elementStyles from '@universityofmaryland/web-styles-library/element';\nimport * as typography from '@universityofmaryland/web-styles-library/typography';\nimport * as layout from '@universityofmaryland/web-styles-library/layout';\nimport * as animationStyles from '@universityofmaryland/web-styles-library/animation';\nimport { wrapTextNodeInSpan } from '@universityofmaryland/web-utilities-library/dom';\nimport { theme } from '@universityofmaryland/web-utilities-library/theme';\nimport { type UMDElement } from '../../_types';\n\ntype TypeTheme = {\n isThemeDark?: boolean;\n};\n\ntype TypeEyebrow = TypeTheme & {\n eyebrow: HTMLElement;\n};\n\ntype TypeActions = {\n actions: HTMLElement;\n};\n\nexport type TypeTextLockupSmall = TypeTheme & {\n headline: HTMLElement | null;\n eyebrow?: HTMLElement | null;\n text?: HTMLElement | null;\n date?: HTMLElement | null;\n actions?: HTMLElement | null;\n eventMeta?: UMDElement;\n hasEyebrowRibbon?: boolean;\n};\n\nconst ELEMENT_TEXT_LOCKUP_SMALL_CONTAINER = 'text-lockup-small-container';\nconst metaContainer = elementStyles?.event?.meta?.container;\nconst metaClass: string = (() => {\n if (!metaContainer?.className) return '';\n\n if (Array.isArray(metaContainer.className)) {\n return metaContainer.className[0] || '';\n }\n\n if (typeof metaContainer.className === 'string') {\n return metaContainer.className;\n }\n\n return '';\n})();\n\nexport const eyebrowStyles = {\n element: {\n display: 'block',\n\n ['*']: {\n color: 'currentColor',\n },\n },\n siblingAfter: {\n marginTop: token.spacing.min,\n },\n};\n\nexport const ribbonStyles = {\n siblingAfter: {\n marginTop: token.spacing.sm,\n },\n};\n\nexport const headlineStyles = {\n element: {\n fontWeight: '700',\n\n [`& + *`]: {\n marginTop: token.spacing.sm,\n },\n\n [`& + .${metaClass}`]: {\n [`@media (max-width: 479px)`]: {\n marginTop: token.spacing.min,\n },\n },\n },\n subElement: {\n color: 'currentColor',\n },\n};\n\nexport const textStyles = (isThemeDark?: boolean) => ({\n element: {\n ...(!isThemeDark && {\n color: `${token.color.gray.dark}`,\n }),\n },\n child: {\n ...(!isThemeDark && {\n color: `${token.color.gray.dark}`,\n }),\n },\n siblingAfter: {\n marginTop: token.spacing.min,\n },\n});\n\nexport const dateStyles = (isThemeDark?: boolean) => ({\n element: {\n display: 'block',\n\n ...(!isThemeDark && {\n color: `${token.color.gray.mediumAA}`,\n }),\n },\n child: {\n color: 'currentColor',\n },\n siblingAfter: {\n marginTop: token.spacing.min,\n },\n});\n\nexport const createEyebrow = ({ eyebrow, isThemeDark }: TypeEyebrow) =>\n new ElementBuilder(eyebrow)\n .styled(\n typography.elements.compose('eyebrow', {\n theme: theme.fontColor(isThemeDark),\n }),\n )\n .withStyles(eyebrowStyles)\n .build();\n\nexport const createRibbonEyebrow = ({ eyebrow }: TypeEyebrow) =>\n new ElementBuilder(eyebrow)\n .styled(elementStyles.text.decoration.ribbon)\n .withStyles(ribbonStyles)\n .build();\n\nexport const createActions = ({ actions }: TypeActions) =>\n new ElementBuilder(actions)\n .styled(layout.grid.inline.tabletRows)\n .withStyles({\n element: {\n marginTop: token.spacing.sm,\n },\n })\n .build();\n\nexport const createTextLockupSmall = ({\n eyebrow,\n headline,\n text,\n actions,\n date,\n eventMeta,\n isThemeDark,\n}: TypeTextLockupSmall) => {\n const container = new ElementBuilder()\n .withClassName(ELEMENT_TEXT_LOCKUP_SMALL_CONTAINER)\n .withStyles({\n element: {\n zIndex: '9',\n position: 'relative',\n },\n });\n\n if (eyebrow) {\n const eyebrowElement = createEyebrow({ eyebrow, isThemeDark });\n container.withChild(eyebrowElement);\n }\n\n if (headline) {\n const composeHeadlineStyles = {\n ...
|
|
1
|
+
{"version":3,"file":"small.js","sources":["../../../source/atomic/text-lockup/small.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport * as token from '@universityofmaryland/web-token-library';\nimport * as elementStyles from '@universityofmaryland/web-styles-library/element';\nimport * as typography from '@universityofmaryland/web-styles-library/typography';\nimport * as layout from '@universityofmaryland/web-styles-library/layout';\nimport * as animationStyles from '@universityofmaryland/web-styles-library/animation';\nimport { wrapTextNodeInSpan } from '@universityofmaryland/web-utilities-library/dom';\nimport { theme } from '@universityofmaryland/web-utilities-library/theme';\nimport { type UMDElement } from '../../_types';\n\ntype TypeTheme = {\n isThemeDark?: boolean;\n};\n\ntype TypeEyebrow = TypeTheme & {\n eyebrow: HTMLElement;\n};\n\ntype TypeActions = {\n actions: HTMLElement;\n};\n\nexport type TypeTextLockupSmall = TypeTheme & {\n headline: HTMLElement | null;\n eyebrow?: HTMLElement | null;\n text?: HTMLElement | null;\n date?: HTMLElement | null;\n actions?: HTMLElement | null;\n eventMeta?: UMDElement;\n hasEyebrowRibbon?: boolean;\n};\n\nconst ELEMENT_TEXT_LOCKUP_SMALL_CONTAINER = 'text-lockup-small-container';\nconst metaContainer = elementStyles?.event?.meta?.container;\nconst metaClass: string = (() => {\n if (!metaContainer?.className) return '';\n\n if (Array.isArray(metaContainer.className)) {\n return metaContainer.className[0] || '';\n }\n\n if (typeof metaContainer.className === 'string') {\n return metaContainer.className;\n }\n\n return '';\n})();\n\nexport const eyebrowStyles = {\n element: {\n display: 'block',\n\n ['*']: {\n color: 'currentColor',\n },\n },\n siblingAfter: {\n marginTop: token.spacing.min,\n },\n};\n\nexport const ribbonStyles = {\n siblingAfter: {\n marginTop: token.spacing.sm,\n },\n};\n\nexport const headlineStyles = {\n element: {\n fontWeight: '700',\n\n [`& + *`]: {\n marginTop: token.spacing.sm,\n },\n\n [`& + .${metaClass}`]: {\n [`@media (max-width: 479px)`]: {\n marginTop: token.spacing.min,\n },\n },\n },\n subElement: {\n color: 'currentColor',\n },\n};\n\nexport const textStyles = (isThemeDark?: boolean) => ({\n element: {\n ...(!isThemeDark && {\n color: `${token.color.gray.dark}`,\n }),\n },\n child: {\n ...(!isThemeDark && {\n color: `${token.color.gray.dark}`,\n }),\n },\n siblingAfter: {\n marginTop: token.spacing.min,\n },\n});\n\nexport const dateStyles = (isThemeDark?: boolean) => ({\n element: {\n display: 'block',\n\n ...(!isThemeDark && {\n color: `${token.color.gray.mediumAA}`,\n }),\n },\n child: {\n color: 'currentColor',\n },\n siblingAfter: {\n marginTop: token.spacing.min,\n },\n});\n\nexport const createEyebrow = ({ eyebrow, isThemeDark }: TypeEyebrow) =>\n new ElementBuilder(eyebrow)\n .styled(\n typography.elements.compose('eyebrow', {\n theme: theme.fontColor(isThemeDark),\n }),\n )\n .withStyles(eyebrowStyles)\n .build();\n\nexport const createRibbonEyebrow = ({ eyebrow }: TypeEyebrow) =>\n new ElementBuilder(eyebrow)\n .styled(elementStyles.text.decoration.ribbon)\n .withStyles(ribbonStyles)\n .build();\n\nexport const createActions = ({ actions }: TypeActions) =>\n new ElementBuilder(actions)\n .styled(layout.grid.inline.tabletRows)\n .withStyles({\n element: {\n marginTop: token.spacing.sm,\n },\n })\n .build();\n\nexport const createTextLockupSmall = ({\n eyebrow,\n headline,\n text,\n actions,\n date,\n eventMeta,\n isThemeDark,\n}: TypeTextLockupSmall) => {\n const container = new ElementBuilder()\n .withClassName(ELEMENT_TEXT_LOCKUP_SMALL_CONTAINER)\n .withStyles({\n element: {\n zIndex: '9',\n position: 'relative',\n },\n });\n\n if (eyebrow) {\n const eyebrowElement = createEyebrow({ eyebrow, isThemeDark });\n container.withChild(eyebrowElement);\n }\n\n if (headline) {\n const composeHeadlineStyles = {\n ...animationStyles.line.composeSlideUnder({\n color: theme.foreground(isThemeDark),\n }),\n ...typography.sans.compose('larger', {\n theme: theme.fontColor(isThemeDark),\n }),\n };\n\n const headlineElement = new ElementBuilder(headline)\n .styled(composeHeadlineStyles)\n .withStyles(headlineStyles)\n .withModifier((el) => wrapTextNodeInSpan(el))\n .build();\n\n container.withChild(headlineElement);\n }\n\n if (eventMeta) {\n container.withChild(eventMeta);\n }\n\n if (text) {\n const textElement = new ElementBuilder(text)\n .styled(\n elementStyles.text.rich.composeSimple({\n theme: theme.fontColor(isThemeDark),\n }),\n )\n .withStyles(textStyles(isThemeDark))\n .build();\n\n container.withChild(textElement);\n }\n\n if (date) {\n const dateElement = new ElementBuilder('slot')\n .withClassName('umd-headline-sans-min')\n .styled(\n typography.sans.compose('min', {\n theme: theme.fontColor(isThemeDark),\n }),\n )\n .withAnimation('slideUnder')\n .withChild(date)\n .withStyles(dateStyles(isThemeDark))\n .build();\n\n container.withChild(dateElement);\n }\n\n if (actions) {\n const actionsElement = createActions({ actions });\n container.withChild(actionsElement);\n }\n\n return container.build();\n};\n"],"names":["animationStyles"],"mappings":"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"}
|
|
@@ -1,18 +1,10 @@
|
|
|
1
|
+
import { ElementModel } from '../../../_types';
|
|
1
2
|
export interface SectionIntroProps {
|
|
2
3
|
headline?: HTMLElement | null;
|
|
3
4
|
actions?: HTMLElement | null;
|
|
4
5
|
text?: HTMLElement | null;
|
|
5
6
|
hasSeparator?: boolean;
|
|
6
7
|
isThemeDark?: boolean;
|
|
7
|
-
includesAnimation?: boolean;
|
|
8
8
|
}
|
|
9
|
-
export declare const createCompositeLayoutSectionIntroSmall: (props: SectionIntroProps) =>
|
|
10
|
-
events: {
|
|
11
|
-
loadAnimation: () => void;
|
|
12
|
-
};
|
|
13
|
-
element: HTMLElement;
|
|
14
|
-
styles: string;
|
|
15
|
-
update?: (props: Partial<import('@universityofmaryland/web-builder-library').BuilderOptions>) => void;
|
|
16
|
-
destroy?: () => void;
|
|
17
|
-
};
|
|
9
|
+
export declare const createCompositeLayoutSectionIntroSmall: (props: SectionIntroProps) => ElementModel<HTMLElement>;
|
|
18
10
|
//# sourceMappingURL=small.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"small.d.ts","sourceRoot":"","sources":["../../../../source/composite/layout/section-intro/small.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"small.d.ts","sourceRoot":"","sources":["../../../../source/composite/layout/section-intro/small.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAGpD,MAAM,WAAW,iBAAiB;IAChC,QAAQ,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC9B,OAAO,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC7B,IAAI,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC1B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAuKD,eAAO,MAAM,sCAAsC,GACjD,OAAO,iBAAiB,8BACC,CAAC"}
|
|
@@ -3,32 +3,6 @@ import * as token from "@universityofmaryland/web-token-library";
|
|
|
3
3
|
import * as typography from "@universityofmaryland/web-styles-library/typography";
|
|
4
4
|
import * as Styles from "@universityofmaryland/web-styles-library";
|
|
5
5
|
import { theme } from "@universityofmaryland/web-utilities-library/theme";
|
|
6
|
-
const ANIMATION_CONFIGS = {
|
|
7
|
-
line: `
|
|
8
|
-
@keyframes intro-line {
|
|
9
|
-
from {
|
|
10
|
-
height: 0;
|
|
11
|
-
transform: translateY(${token.spacing.lg});
|
|
12
|
-
}
|
|
13
|
-
to {
|
|
14
|
-
height: ${token.spacing["4xl"]};
|
|
15
|
-
transform: translateY(0);
|
|
16
|
-
}
|
|
17
|
-
}
|
|
18
|
-
`,
|
|
19
|
-
fadeIn: `
|
|
20
|
-
@keyframes intro-fade-in {
|
|
21
|
-
from {
|
|
22
|
-
opacity: 0;
|
|
23
|
-
transform: translateY(100px);
|
|
24
|
-
}
|
|
25
|
-
to {
|
|
26
|
-
opacity: 1;
|
|
27
|
-
transform: translateY(0);
|
|
28
|
-
}
|
|
29
|
-
}
|
|
30
|
-
`
|
|
31
|
-
};
|
|
32
6
|
const createHeadline = (props) => {
|
|
33
7
|
const { headline, isThemeDark } = props;
|
|
34
8
|
if (!headline) return null;
|
|
@@ -82,28 +56,13 @@ const createActions = (props) => {
|
|
|
82
56
|
}).build();
|
|
83
57
|
};
|
|
84
58
|
const createTextContainer = (props) => {
|
|
85
|
-
const { headline, text, actions,
|
|
59
|
+
const { headline, text, actions, isThemeDark } = props;
|
|
86
60
|
const headlineElement = createHeadline({ headline, isThemeDark });
|
|
87
61
|
const textElement = createText({ text, headline, isThemeDark });
|
|
88
62
|
const actionsElement = createActions({ actions });
|
|
89
|
-
const container = new ElementBuilder().withClassName(
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
opacity: 0
|
|
93
|
-
},
|
|
94
|
-
[".intro-default-animated &"]: {
|
|
95
|
-
transform: "translateY(100px)",
|
|
96
|
-
animation: "intro-fade-in 1s forwards",
|
|
97
|
-
animationDelay: "0.2s"
|
|
98
|
-
},
|
|
99
|
-
[`&:before`]: {
|
|
100
|
-
...includesAnimation && {
|
|
101
|
-
height: 0,
|
|
102
|
-
transform: `translateY(${token.spacing.lg})`
|
|
103
|
-
}
|
|
104
|
-
}
|
|
105
|
-
}
|
|
106
|
-
});
|
|
63
|
+
const container = new ElementBuilder().withClassName(
|
|
64
|
+
"intro-default-container-text"
|
|
65
|
+
);
|
|
107
66
|
if (headlineElement) {
|
|
108
67
|
container.withChild(headlineElement);
|
|
109
68
|
}
|
|
@@ -124,7 +83,7 @@ const createWrapper = (props) => {
|
|
|
124
83
|
}).build();
|
|
125
84
|
};
|
|
126
85
|
const createContainer = (props) => {
|
|
127
|
-
const {
|
|
86
|
+
const { hasSeparator } = props;
|
|
128
87
|
const wrapperElement = createWrapper(props);
|
|
129
88
|
return new ElementBuilder().withClassName("intro-default-container").withChild(wrapperElement).withStyles({
|
|
130
89
|
element: {
|
|
@@ -144,50 +103,11 @@ const createContainer = (props) => {
|
|
|
144
103
|
left: "calc(50% - 1px)",
|
|
145
104
|
top: 0
|
|
146
105
|
}
|
|
147
|
-
},
|
|
148
|
-
["&.intro-default-animated:before"]: {
|
|
149
|
-
...includesAnimation && {
|
|
150
|
-
animation: "intro-line 1.2s forwards"
|
|
151
|
-
}
|
|
152
106
|
}
|
|
153
107
|
}
|
|
154
108
|
}).build();
|
|
155
109
|
};
|
|
156
|
-
const
|
|
157
|
-
const { includesAnimation, container } = props;
|
|
158
|
-
if (!includesAnimation) return;
|
|
159
|
-
const animation = (entries, observer2) => {
|
|
160
|
-
entries.map((entry) => {
|
|
161
|
-
const target = entry.target;
|
|
162
|
-
if (entry.isIntersecting) {
|
|
163
|
-
target.classList.add("intro-default-animated");
|
|
164
|
-
observer2.unobserve(target);
|
|
165
|
-
}
|
|
166
|
-
});
|
|
167
|
-
};
|
|
168
|
-
const observer = new IntersectionObserver(animation, {
|
|
169
|
-
root: null,
|
|
170
|
-
rootMargin: "0px",
|
|
171
|
-
threshold: [0.35]
|
|
172
|
-
});
|
|
173
|
-
observer.observe(container);
|
|
174
|
-
};
|
|
175
|
-
const CreateSectionIntroSmallElement = (props) => {
|
|
176
|
-
const containerElement = createContainer(props);
|
|
177
|
-
const loadAnimation = () => setupAnimation({
|
|
178
|
-
includesAnimation: props.includesAnimation,
|
|
179
|
-
container: containerElement.element
|
|
180
|
-
});
|
|
181
|
-
if (props.includesAnimation) {
|
|
182
|
-
containerElement.styles += ANIMATION_CONFIGS.line;
|
|
183
|
-
containerElement.styles += ANIMATION_CONFIGS.fadeIn;
|
|
184
|
-
}
|
|
185
|
-
return {
|
|
186
|
-
...containerElement,
|
|
187
|
-
events: { loadAnimation }
|
|
188
|
-
};
|
|
189
|
-
};
|
|
190
|
-
const createCompositeLayoutSectionIntroSmall = CreateSectionIntroSmallElement;
|
|
110
|
+
const createCompositeLayoutSectionIntroSmall = (props) => createContainer(props);
|
|
191
111
|
export {
|
|
192
112
|
createCompositeLayoutSectionIntroSmall
|
|
193
113
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"small.js","sources":["../../../../source/composite/layout/section-intro/small.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 * as Styles from '@universityofmaryland/web-styles-library';\nimport { theme } from '@universityofmaryland/web-utilities-library/theme';\nimport { type ElementModel } from '../../../_types';\nimport { SimpleRichTextOptions } from '../../../../../styles/dist/element/text/rich';\n\nexport interface SectionIntroProps {\n headline?: HTMLElement | null;\n actions?: HTMLElement | null;\n text?: HTMLElement | null;\n hasSeparator?: boolean;\n isThemeDark?: boolean;\n includesAnimation?: boolean;\n}\n\nconst ANIMATION_CONFIGS = {\n line: `\n @keyframes intro-line {\n from {\n height: 0;\n transform: translateY(${token.spacing.lg});\n }\n to {\n height: ${token.spacing['4xl']};\n transform: translateY(0);\n }\n }\n `,\n fadeIn: `\n @keyframes intro-fade-in {\n from {\n opacity: 0;\n transform: translateY(100px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n `,\n};\n\nconst createHeadline = (\n props: Pick<SectionIntroProps, 'headline' | 'isThemeDark'>,\n): ElementModel<HTMLElement> | null => {\n const { headline, isThemeDark } = props;\n if (!headline) return null;\n\n return new ElementBuilder(headline)\n .styled(\n Styles.typography.sans.compose('largest', {\n theme: theme.fontColor(isThemeDark),\n }),\n )\n .withStyles({\n element: {\n fontWeight: 800,\n textTransform: 'uppercase',\n },\n })\n .build();\n};\n\nconst createText = (\n props: Pick<SectionIntroProps, 'text' | 'isThemeDark' | 'headline'>,\n): ElementModel<HTMLElement> | null => {\n const { text, headline, isThemeDark } = props;\n const simpleRichTextOptions: SimpleRichTextOptions = {\n size: 'large',\n theme: theme.fontColor(isThemeDark),\n };\n if (!text) return null;\n if (!headline) simpleRichTextOptions.size = 'largest';\n\n return new ElementBuilder(text)\n .styled(Styles.element.text.rich.composeSimple(simpleRichTextOptions))\n .withStyles({\n element: {\n [`* + &`]: {\n marginTop: token.spacing.sm,\n },\n\n [`&, & > *`]: {\n ...(!headline && {\n ...typography.sans.transformations.largerBold,\n color: token.color.black,\n\n ...(isThemeDark && {\n color: token.color.white,\n }),\n }),\n },\n },\n })\n .build();\n};\n\nconst createActions = (\n props: Pick<SectionIntroProps, 'actions'>,\n): ElementModel<HTMLElement> | null => {\n const { actions } = props;\n if (!actions) return null;\n\n return new ElementBuilder(actions)\n .styled(Styles.layout.grid.inline.tabletRows)\n .withStyles({\n element: {\n justifyContent: 'center',\n alignItems: 'center',\n\n [`* + &`]: {\n marginTop: token.spacing.md,\n },\n },\n })\n .build();\n};\n\nconst createTextContainer = (\n props: Pick<\n SectionIntroProps,\n 'headline' | 'text' | 'actions' | 'isThemeDark' | 'includesAnimation'\n >,\n): ElementModel<HTMLElement> => {\n const { headline, text, actions, includesAnimation, isThemeDark } = props;\n\n const headlineElement = createHeadline({ headline, isThemeDark });\n const textElement = createText({ text, headline, isThemeDark });\n const actionsElement = createActions({ actions });\n\n const container = new ElementBuilder()\n .withClassName('intro-default-container-text')\n .withStyles({\n element: {\n ...(includesAnimation && {\n opacity: 0,\n }),\n\n ['.intro-default-animated &']: {\n transform: 'translateY(100px)',\n animation: 'intro-fade-in 1s forwards',\n animationDelay: '0.2s',\n },\n\n [`&:before`]: {\n ...(includesAnimation && {\n height: 0,\n transform: `translateY(${token.spacing.lg})`,\n }),\n },\n },\n });\n\n if (headlineElement) {\n container.withChild(headlineElement);\n }\n\n if (textElement) {\n container.withChild(textElement);\n }\n\n if (actionsElement) {\n container.withChild(actionsElement);\n }\n\n return container.build();\n};\n\nconst createWrapper = (\n props: Pick<\n SectionIntroProps,\n 'headline' | 'text' | 'actions' | 'isThemeDark'\n >,\n): ElementModel<HTMLElement> => {\n const textContainerElement = createTextContainer(props);\n\n return new ElementBuilder()\n .withClassName('intro-default-container-wrapper')\n .withChild(textContainerElement)\n .withStyles({\n element: {\n textAlign: 'center',\n },\n })\n .build();\n};\n\nconst createContainer = (\n props: Pick<\n SectionIntroProps,\n | 'isThemeDark'\n | 'hasSeparator'\n | 'headline'\n | 'text'\n | 'actions'\n | 'includesAnimation'\n >,\n): ElementModel<HTMLElement> => {\n const { isThemeDark, hasSeparator, includesAnimation } = props;\n\n const wrapperElement = createWrapper(props);\n\n return new ElementBuilder()\n .withClassName('intro-default-container')\n .withChild(wrapperElement)\n .withStyles({\n element: {\n maxWidth: token.spacing.maxWidth.small,\n margin: '0 auto',\n\n ...(hasSeparator && {\n paddingTop: token.spacing['6xl'],\n position: 'relative',\n }),\n\n [`&:before`]: {\n ...(hasSeparator && {\n content: '\"\"',\n backgroundColor: token.color.red,\n position: 'absolute',\n height: token.spacing['4xl'],\n width: '2px',\n left: 'calc(50% - 1px)',\n top: 0,\n }),\n },\n\n ['&.intro-default-animated:before']: {\n ...(includesAnimation && {\n animation: 'intro-line 1.2s forwards',\n }),\n },\n },\n })\n .build();\n};\n\nconst setupAnimation = (\n props: Pick<SectionIntroProps, 'includesAnimation'> & {\n container: HTMLElement;\n },\n) => {\n const { includesAnimation, container } = props;\n if (!includesAnimation) return;\n\n const animation: IntersectionObserverCallback = (entries, observer) => {\n entries.map((entry) => {\n const target = entry.target as HTMLElement;\n\n if (entry.isIntersecting) {\n target.classList.add('intro-default-animated');\n observer.unobserve(target);\n }\n });\n };\n\n const observer = new IntersectionObserver(animation, {\n root: null,\n rootMargin: '0px',\n threshold: [0.35],\n });\n\n observer.observe(container);\n};\n\nconst CreateSectionIntroSmallElement = (props: SectionIntroProps) => {\n const containerElement = createContainer(props);\n\n const loadAnimation = () =>\n setupAnimation({\n includesAnimation: props.includesAnimation,\n container: containerElement.element,\n });\n\n if (props.includesAnimation) {\n containerElement.styles += ANIMATION_CONFIGS.line;\n containerElement.styles += ANIMATION_CONFIGS.fadeIn;\n }\n\n return {\n ...containerElement,\n events: { loadAnimation },\n };\n};\n\nexport const createCompositeLayoutSectionIntroSmall = CreateSectionIntroSmallElement;\n"],"names":["observer"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"small.js","sources":["../../../../source/composite/layout/section-intro/small.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 * as Styles from '@universityofmaryland/web-styles-library';\nimport { theme } from '@universityofmaryland/web-utilities-library/theme';\nimport { type ElementModel } from '../../../_types';\nimport { SimpleRichTextOptions } from '../../../../../styles/dist/element/text/rich';\n\nexport interface SectionIntroProps {\n headline?: HTMLElement | null;\n actions?: HTMLElement | null;\n text?: HTMLElement | null;\n hasSeparator?: boolean;\n isThemeDark?: boolean;\n}\n\nconst createHeadline = (\n props: Pick<SectionIntroProps, 'headline' | 'isThemeDark'>,\n): ElementModel<HTMLElement> | null => {\n const { headline, isThemeDark } = props;\n if (!headline) return null;\n\n return new ElementBuilder(headline)\n .styled(\n Styles.typography.sans.compose('largest', {\n theme: theme.fontColor(isThemeDark),\n }),\n )\n .withStyles({\n element: {\n fontWeight: 800,\n textTransform: 'uppercase',\n },\n })\n .build();\n};\n\nconst createText = (\n props: Pick<SectionIntroProps, 'text' | 'isThemeDark' | 'headline'>,\n): ElementModel<HTMLElement> | null => {\n const { text, headline, isThemeDark } = props;\n const simpleRichTextOptions: SimpleRichTextOptions = {\n size: 'large',\n theme: theme.fontColor(isThemeDark),\n };\n if (!text) return null;\n if (!headline) simpleRichTextOptions.size = 'largest';\n\n return new ElementBuilder(text)\n .styled(Styles.element.text.rich.composeSimple(simpleRichTextOptions))\n .withStyles({\n element: {\n [`* + &`]: {\n marginTop: token.spacing.sm,\n },\n\n [`&, & > *`]: {\n ...(!headline && {\n ...typography.sans.transformations.largerBold,\n color: token.color.black,\n\n ...(isThemeDark && {\n color: token.color.white,\n }),\n }),\n },\n },\n })\n .build();\n};\n\nconst createActions = (\n props: Pick<SectionIntroProps, 'actions'>,\n): ElementModel<HTMLElement> | null => {\n const { actions } = props;\n if (!actions) return null;\n\n return new ElementBuilder(actions)\n .styled(Styles.layout.grid.inline.tabletRows)\n .withStyles({\n element: {\n justifyContent: 'center',\n alignItems: 'center',\n\n [`* + &`]: {\n marginTop: token.spacing.md,\n },\n },\n })\n .build();\n};\n\nconst createTextContainer = (\n props: Pick<\n SectionIntroProps,\n 'headline' | 'text' | 'actions' | 'isThemeDark'\n >,\n): ElementModel<HTMLElement> => {\n const { headline, text, actions, isThemeDark } = props;\n\n const headlineElement = createHeadline({ headline, isThemeDark });\n const textElement = createText({ text, headline, isThemeDark });\n const actionsElement = createActions({ actions });\n\n const container = new ElementBuilder().withClassName(\n 'intro-default-container-text',\n );\n\n if (headlineElement) {\n container.withChild(headlineElement);\n }\n\n if (textElement) {\n container.withChild(textElement);\n }\n\n if (actionsElement) {\n container.withChild(actionsElement);\n }\n\n return container.build();\n};\n\nconst createWrapper = (\n props: Pick<\n SectionIntroProps,\n 'headline' | 'text' | 'actions' | 'isThemeDark'\n >,\n): ElementModel<HTMLElement> => {\n const textContainerElement = createTextContainer(props);\n\n return new ElementBuilder()\n .withClassName('intro-default-container-wrapper')\n .withChild(textContainerElement)\n .withStyles({\n element: {\n textAlign: 'center',\n },\n })\n .build();\n};\n\nconst createContainer = (\n props: Pick<\n SectionIntroProps,\n 'isThemeDark' | 'hasSeparator' | 'headline' | 'text' | 'actions'\n >,\n): ElementModel<HTMLElement> => {\n const { hasSeparator } = props;\n\n const wrapperElement = createWrapper(props);\n\n return new ElementBuilder()\n .withClassName('intro-default-container')\n .withChild(wrapperElement)\n .withStyles({\n element: {\n maxWidth: token.spacing.maxWidth.small,\n margin: '0 auto',\n\n ...(hasSeparator && {\n paddingTop: token.spacing['6xl'],\n position: 'relative',\n }),\n\n [`&:before`]: {\n ...(hasSeparator && {\n content: '\"\"',\n backgroundColor: token.color.red,\n position: 'absolute',\n height: token.spacing['4xl'],\n width: '2px',\n left: 'calc(50% - 1px)',\n top: 0,\n }),\n },\n },\n })\n .build();\n};\n\nexport const createCompositeLayoutSectionIntroSmall = (\n props: SectionIntroProps,\n) => createContainer(props);\n"],"names":[],"mappings":"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"}
|
|
@@ -61,11 +61,11 @@ const CreatePersonTabularElement = ({
|
|
|
61
61
|
}
|
|
62
62
|
if (name) {
|
|
63
63
|
const nameStyles = {
|
|
64
|
-
...typography.sans.compose("large", {
|
|
65
|
-
theme: theme.fontColor(isThemeDark)
|
|
66
|
-
}),
|
|
67
64
|
...animation.line.composeSlideUnder({
|
|
68
65
|
color: theme.foreground(isThemeDark)
|
|
66
|
+
}),
|
|
67
|
+
...typography.sans.compose("large", {
|
|
68
|
+
theme: theme.fontColor(isThemeDark)
|
|
69
69
|
})
|
|
70
70
|
};
|
|
71
71
|
const nameComposite = new ElementBuilder(name).withClassName("person-tabular-name").styled(nameStyles).withStyles({
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tabular.js","sources":["../../../source/composite/person/tabular.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 * as animationStyles from '@universityofmaryland/web-styles-library/animation';\nimport { createMediaQuery } from '@universityofmaryland/web-utilities-library/styles';\nimport { theme } from '@universityofmaryland/web-utilities-library/theme';\nimport { wrapTextNodeInSpan } from '@universityofmaryland/web-utilities-library/dom';\nimport { layout } from 'atomic';\nimport { PersonCard } from './_types';\nimport { type UMDElement } from '../../_types';\n\nconst smallBreakpoint = token.media.breakpointValues.small.max;\n\nconst CreatePersonTabularElement = ({\n actions,\n additionalContact,\n address,\n slotTwo,\n email,\n image,\n isThemeDark,\n slotOne,\n linkedin,\n name,\n phone,\n slotThreeItalic,\n slotFour,\n}: PersonCard): UMDElement => {\n const builder = new ElementBuilder()\n .withClassName('person-tabular-container')\n .withStyles({\n element: {\n overflow: 'hidden',\n display: 'flex',\n\n ...createMediaQuery('max-width', smallBreakpoint, {\n flexDirection: 'column',\n }),\n },\n });\n\n if (image) {\n builder.withChild(\n layout.person.columns.image({\n image,\n isThemeDark,\n }),\n );\n }\n\n if (name) {\n const nameStyles = {\n ...
|
|
1
|
+
{"version":3,"file":"tabular.js","sources":["../../../source/composite/person/tabular.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 * as animationStyles from '@universityofmaryland/web-styles-library/animation';\nimport { createMediaQuery } from '@universityofmaryland/web-utilities-library/styles';\nimport { theme } from '@universityofmaryland/web-utilities-library/theme';\nimport { wrapTextNodeInSpan } from '@universityofmaryland/web-utilities-library/dom';\nimport { layout } from 'atomic';\nimport { PersonCard } from './_types';\nimport { type UMDElement } from '../../_types';\n\nconst smallBreakpoint = token.media.breakpointValues.small.max;\n\nconst CreatePersonTabularElement = ({\n actions,\n additionalContact,\n address,\n slotTwo,\n email,\n image,\n isThemeDark,\n slotOne,\n linkedin,\n name,\n phone,\n slotThreeItalic,\n slotFour,\n}: PersonCard): UMDElement => {\n const builder = new ElementBuilder()\n .withClassName('person-tabular-container')\n .withStyles({\n element: {\n overflow: 'hidden',\n display: 'flex',\n\n ...createMediaQuery('max-width', smallBreakpoint, {\n flexDirection: 'column',\n }),\n },\n });\n\n if (image) {\n builder.withChild(\n layout.person.columns.image({\n image,\n isThemeDark,\n }),\n );\n }\n\n if (name) {\n const nameStyles = {\n ...animationStyles.line.composeSlideUnder({\n color: theme.foreground(isThemeDark),\n }),\n ...typography.sans.compose('large', {\n theme: theme.fontColor(isThemeDark),\n }),\n };\n\n const nameComposite = new ElementBuilder(name)\n .withClassName('person-tabular-name')\n .styled(nameStyles)\n .withStyles({\n element: {\n fontWeight: `${token.font.weight.bold}`,\n\n [`& + *`]: {\n marginTop: token.spacing.min,\n },\n },\n subElement: {\n color: 'currentColor',\n },\n })\n .withModifier((el) => wrapTextNodeInSpan(el))\n .build();\n\n builder.withChild(\n layout.person.columns.details({\n actions,\n slotTwo,\n isThemeDark,\n customStyles: {},\n slotOne,\n nameComposite,\n slotThreeItalic,\n slotFour,\n }),\n );\n }\n\n if (additionalContact || address || email || linkedin || phone) {\n builder.withChild(\n layout.person.columns.contact({\n additionalContact,\n address,\n customStyles: {},\n email,\n isThemeDark,\n linkedin,\n phone,\n }),\n );\n }\n\n return builder.build();\n};\n\nexport const createCompositePersonTabular = CreatePersonTabularElement;\n"],"names":["image","layout.person.columns.image","animationStyles","layout.person.columns.details","layout.person.columns.contact"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAWA,MAAM,kBAAkB,MAAM,MAAM,iBAAiB,MAAM;AAE3D,MAAM,6BAA6B,CAAC;AAAA,EAClC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EAAA,OACAA;AAAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAA8B;AAC5B,QAAM,UAAU,IAAI,eAAA,EACjB,cAAc,0BAA0B,EACxC,WAAW;AAAA,IACV,SAAS;AAAA,MACP,UAAU;AAAA,MACV,SAAS;AAAA,MAET,GAAG,iBAAiB,aAAa,iBAAiB;AAAA,QAChD,eAAe;AAAA,MAAA,CAChB;AAAA,IAAA;AAAA,EACH,CACD;AAEH,MAAIA,SAAO;AACT,YAAQ;AAAA,MACNC,MAA4B;AAAA,QAAA,OAC1BD;AAAAA,QACA;AAAA,MAAA,CACD;AAAA,IAAA;AAAA,EAEL;AAEA,MAAI,MAAM;AACR,UAAM,aAAa;AAAA,MACjB,GAAGE,UAAgB,KAAK,kBAAkB;AAAA,QACxC,OAAO,MAAM,WAAW,WAAW;AAAA,MAAA,CACpC;AAAA,MACD,GAAG,WAAW,KAAK,QAAQ,SAAS;AAAA,QAClC,OAAO,MAAM,UAAU,WAAW;AAAA,MAAA,CACnC;AAAA,IAAA;AAGH,UAAM,gBAAgB,IAAI,eAAe,IAAI,EAC1C,cAAc,qBAAqB,EACnC,OAAO,UAAU,EACjB,WAAW;AAAA,MACV,SAAS;AAAA,QACP,YAAY,GAAG,MAAM,KAAK,OAAO,IAAI;AAAA,QAErC,CAAC,OAAO,GAAG;AAAA,UACT,WAAW,MAAM,QAAQ;AAAA,QAAA;AAAA,MAC3B;AAAA,MAEF,YAAY;AAAA,QACV,OAAO;AAAA,MAAA;AAAA,IACT,CACD,EACA,aAAa,CAAC,OAAO,mBAAmB,EAAE,CAAC,EAC3C,MAAA;AAEH,YAAQ;AAAA,MACNC,QAA8B;AAAA,QAC5B;AAAA,QACA;AAAA,QACA;AAAA,QACA,cAAc,CAAA;AAAA,QACd;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MAAA,CACD;AAAA,IAAA;AAAA,EAEL;AAEA,MAAI,qBAAqB,WAAW,SAAS,YAAY,OAAO;AAC9D,YAAQ;AAAA,MACNC,QAA8B;AAAA,QAC5B;AAAA,QACA;AAAA,QACA,cAAc,CAAA;AAAA,QACd;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MAAA,CACD;AAAA,IAAA;AAAA,EAEL;AAEA,SAAO,QAAQ,MAAA;AACjB;AAEO,MAAM,+BAA+B;"}
|