@pixelated-tech/components 3.13.3 → 3.13.4
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/components/general/hero.css +62 -0
- package/dist/components/general/hero.js +50 -5
- package/dist/components/general/tiles.js +36 -3
- package/dist/config/pixelated.config.json.enc +1 -1
- package/dist/index.server.js +0 -1
- package/dist/types/components/general/hero.d.ts +5 -1
- package/dist/types/components/general/hero.d.ts.map +1 -1
- package/dist/types/components/general/tiles.d.ts +26 -1
- package/dist/types/components/general/tiles.d.ts.map +1 -1
- package/dist/types/index.server.d.ts +0 -1
- package/dist/types/stories/general/project-tiles.stories.d.ts +11 -0
- package/dist/types/stories/general/project-tiles.stories.d.ts.map +1 -0
- package/dist/types/tests/project-tiles.test.d.ts +2 -0
- package/dist/types/tests/project-tiles.test.d.ts.map +1 -0
- package/package.json +21 -25
|
@@ -1,4 +1,20 @@
|
|
|
1
1
|
|
|
2
|
+
/* main:has(.hero.anchored-img) > :not(.hero),
|
|
3
|
+
section:has(.hero.anchored-img),
|
|
4
|
+
header:has(.hero.anchored-img),
|
|
5
|
+
footer:has(.hero.anchored-img),
|
|
6
|
+
nav:has(.hero.anchored-img) {
|
|
7
|
+
background-color: white;
|
|
8
|
+
} */
|
|
9
|
+
|
|
10
|
+
body:has(.hero.anchored-div),
|
|
11
|
+
body:has(.hero.anchored-img) {
|
|
12
|
+
main > :not(.hero),
|
|
13
|
+
header, section, nav, footer {
|
|
14
|
+
background-color: white;
|
|
15
|
+
}
|
|
16
|
+
}
|
|
17
|
+
|
|
2
18
|
.hero {
|
|
3
19
|
width: 100%;
|
|
4
20
|
height: 60vh;
|
|
@@ -8,6 +24,9 @@
|
|
|
8
24
|
align-items: center;
|
|
9
25
|
margin-bottom: 30px;
|
|
10
26
|
overflow: hidden;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
.hero.static {
|
|
11
30
|
/* Background image styles */
|
|
12
31
|
background-position: center;
|
|
13
32
|
background-repeat: no-repeat;
|
|
@@ -15,6 +34,49 @@
|
|
|
15
34
|
}
|
|
16
35
|
|
|
17
36
|
.hero.anchored {
|
|
37
|
+
/* Background image styles */
|
|
38
|
+
background-position: center;
|
|
39
|
+
background-repeat: no-repeat;
|
|
40
|
+
background-size: cover;
|
|
18
41
|
/* Create the parallax scrolling effect */
|
|
19
42
|
background-attachment: fixed;
|
|
20
43
|
}
|
|
44
|
+
|
|
45
|
+
.hero.anchored-div {
|
|
46
|
+
|
|
47
|
+
.hero-div-bg-img {
|
|
48
|
+
/* Create the parallax scrolling effect */
|
|
49
|
+
position: fixed;
|
|
50
|
+
top: 0;
|
|
51
|
+
left: 0;
|
|
52
|
+
width: 100%;
|
|
53
|
+
height: 100%;
|
|
54
|
+
z-index: -1;
|
|
55
|
+
background-position: center;
|
|
56
|
+
background-repeat: no-repeat;
|
|
57
|
+
background-size: cover;
|
|
58
|
+
/* Critical for iOS to avoid zooming/jumping */
|
|
59
|
+
will-change: transform;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
.hero.anchored-img {
|
|
66
|
+
position: relative; /* Context for the fixed pseudo-element */
|
|
67
|
+
|
|
68
|
+
img {
|
|
69
|
+
position: fixed; /* Fixes image to viewport */
|
|
70
|
+
top: 0;
|
|
71
|
+
left: 0;
|
|
72
|
+
z-index: -1; /* Places image behind content */
|
|
73
|
+
min-width: 100vw;
|
|
74
|
+
min-height: 100vh;
|
|
75
|
+
object-fit: cover; /* Ensures image covers area */
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
.hero2.anchored img.hidden {
|
|
79
|
+
display: none; /* Hides image when not in view */
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
}
|
|
@@ -1,26 +1,71 @@
|
|
|
1
|
-
import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
|
+
import { useEffect } from 'react';
|
|
2
3
|
import PropTypes from 'prop-types';
|
|
4
|
+
import { SmartImage } from '@pixelated-tech/components';
|
|
3
5
|
import "./hero.css";
|
|
4
6
|
/**
|
|
5
7
|
* Hero — Full-width hero section rendered using a background image.
|
|
6
8
|
*
|
|
7
9
|
* @param {string} [props.img] - Background image URL (required).
|
|
8
10
|
* @param {string} [props.imgAlt] - Alternative text for the background image (optional).
|
|
11
|
+
* @param {string} [props.imgId] - ID for the hero section (optional).
|
|
9
12
|
* @param {oneOf} [props.variant] - Layout variant: 'static' (background image only) or 'anchored' (anchored content).
|
|
10
13
|
* @param {oneOfType} [props.height] - Height for the hero (e.g., '60vh' or a numeric pixel value).
|
|
11
14
|
* @param {node} [props.children] - Optional content rendered inside the hero container.
|
|
15
|
+
*
|
|
16
|
+
* STATIC works as expected on desktop and mobile
|
|
17
|
+
* ANCHORED works as expected on desktop. mobile does not anchor and image is full size
|
|
18
|
+
* ANCHORED-DIV works mostly as expected on desktop and mobile (only see the last hero image)
|
|
19
|
+
* ANCHORED-IMG works as expected on desktop and mobile, but requires JS
|
|
12
20
|
*/
|
|
13
21
|
Hero.propTypes = {
|
|
14
22
|
/** Background image URL (required) */
|
|
15
23
|
img: PropTypes.string.isRequired,
|
|
16
|
-
|
|
24
|
+
/** Alternative text for the background image (optional) */
|
|
25
|
+
imgAlt: PropTypes.string,
|
|
26
|
+
/** ID for the hero section */
|
|
27
|
+
imgId: PropTypes.string,
|
|
17
28
|
/** Layout variant: 'static' or 'anchored' */
|
|
18
|
-
variant: PropTypes.oneOf(['static', 'anchored']),
|
|
29
|
+
variant: PropTypes.oneOf(['static', 'anchored', 'anchored-div', 'anchored-img', 'sticky']),
|
|
19
30
|
/** Height for hero section (string like '60vh' or number) */
|
|
20
31
|
height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
|
|
21
32
|
/** Child nodes to render over the background */
|
|
22
33
|
children: PropTypes.node,
|
|
23
34
|
};
|
|
24
|
-
export function Hero({ img,
|
|
25
|
-
|
|
35
|
+
export function Hero({ img, imgAlt, imgId, variant = 'static', height = '60vh', children }) {
|
|
36
|
+
const id = imgId ?? imgAlt ?? img.split('/').pop()?.split('.')[0];
|
|
37
|
+
useEffect(() => {
|
|
38
|
+
const parentContainer = document.getElementById("hero-" + id?.toString());
|
|
39
|
+
const anchorImage = document.getElementById(id?.toString() || '');
|
|
40
|
+
const observerCallback = (entries) => {
|
|
41
|
+
entries.forEach(entry => {
|
|
42
|
+
// entry.isIntersecting is true when at least one pixel is visible
|
|
43
|
+
if (!entry.isIntersecting) {
|
|
44
|
+
// If the parent is not intersecting (scrolled off-page), hide the image
|
|
45
|
+
anchorImage?.classList.add('hidden');
|
|
46
|
+
}
|
|
47
|
+
else {
|
|
48
|
+
// If the parent is intersecting (visible on page), show the image
|
|
49
|
+
anchorImage?.classList.remove('hidden');
|
|
50
|
+
}
|
|
51
|
+
});
|
|
52
|
+
};
|
|
53
|
+
const observer = new IntersectionObserver(observerCallback, {
|
|
54
|
+
root: null, // defaults to the browser viewport
|
|
55
|
+
rootMargin: '0px',
|
|
56
|
+
threshold: 0.0
|
|
57
|
+
});
|
|
58
|
+
if (variant === 'anchored-img' && parentContainer) {
|
|
59
|
+
observer.observe(parentContainer);
|
|
60
|
+
}
|
|
61
|
+
}, []);
|
|
62
|
+
if (variant === 'anchored-div') {
|
|
63
|
+
return (_jsx(_Fragment, { children: _jsxs("div", { id: id, className: "hero" + (variant ? " " + variant : ''), style: { height: height ?? '60vh' }, children: [_jsx("div", { id: id + "-bg", className: "hero-div-bg-img", style: { backgroundImage: `url(${img})` } }), children] }) }));
|
|
64
|
+
}
|
|
65
|
+
else if (variant === 'anchored-img') {
|
|
66
|
+
return (_jsx(_Fragment, { children: _jsxs("div", { className: "hero" + (variant ? " " + variant : ''), id: "hero-" + id?.toString(), children: [_jsx(SmartImage, { src: img, alt: imgAlt || '', id: id?.toString() || '', style: { height: height ?? '60vh' } }), children] }) }));
|
|
67
|
+
}
|
|
68
|
+
else {
|
|
69
|
+
return (_jsx(_Fragment, { children: _jsx("div", { id: id, className: "hero" + (variant ? " " + variant : ''), style: { backgroundImage: `url(${img})`, height: height ?? '60vh' }, children: children }) }));
|
|
70
|
+
}
|
|
26
71
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/* eslint-disable pixelated/class-name-kebab-case */
|
|
2
2
|
"use client";
|
|
3
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
+
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
4
4
|
import PropTypes from "prop-types";
|
|
5
5
|
import { Loading } from "../general/loading";
|
|
6
6
|
import { SmartImage } from "./smartimage";
|
|
@@ -18,7 +18,16 @@ export const TilesVariants = ['caption', 'overlay'];
|
|
|
18
18
|
*/
|
|
19
19
|
Tiles.propTypes = {
|
|
20
20
|
/** Array of card objects used to populate the tile grid (image, link, imageAlt, bodyText). */
|
|
21
|
-
cards: PropTypes.
|
|
21
|
+
cards: PropTypes.arrayOf(PropTypes.shape({
|
|
22
|
+
index: PropTypes.number,
|
|
23
|
+
cardLength: PropTypes.number,
|
|
24
|
+
link: PropTypes.string,
|
|
25
|
+
image: PropTypes.string.isRequired,
|
|
26
|
+
imageAlt: PropTypes.string,
|
|
27
|
+
bodyText: PropTypes.string,
|
|
28
|
+
imgClick: PropTypes.func,
|
|
29
|
+
variant: PropTypes.oneOf(TilesVariants),
|
|
30
|
+
})).isRequired,
|
|
22
31
|
/** Number of rows to display in the grid (controls layout). */
|
|
23
32
|
rowCount: PropTypes.number,
|
|
24
33
|
/** Optional click handler for tile images; called with (event, imageUrl). */
|
|
@@ -33,7 +42,7 @@ Tiles.propTypes = {
|
|
|
33
42
|
export function Tiles(props) {
|
|
34
43
|
const rowCount = props.rowCount ?? 2;
|
|
35
44
|
if (props.cards && props.cards.length > 0) {
|
|
36
|
-
return (_jsx("div", { className: "tiles-container", children: _jsx("div", { className: `tile-container row-${rowCount}col`, children: props.cards.map((card, i) => (_jsx("div", { className: "grid-item", children: _jsx(Tile, { index: i, cardLength: props.cards.length, link: card.link, image: card.image, imageAlt: card.imageAlt, bodyText: card.bodyText, imgClick: props.imgClick, variant: (props.variant ?? "overlay") }) }, i))) }) }));
|
|
45
|
+
return (_jsx("div", { className: "tiles-container", children: _jsx("div", { className: `tile-container row-${rowCount}col`, children: props.cards.map((card, i) => (_jsx("div", { className: "grid-item", children: _jsx(Tile, { index: card.index ?? i, cardLength: card.cardLength ?? props.cards.length, link: card.link, image: card.image, imageAlt: card.imageAlt, bodyText: card.bodyText, imgClick: props.imgClick, variant: (props.variant ?? "overlay") }) }, i))) }) }));
|
|
37
46
|
}
|
|
38
47
|
else {
|
|
39
48
|
return (_jsx(Loading, {}));
|
|
@@ -81,3 +90,27 @@ function Tile(props) {
|
|
|
81
90
|
:
|
|
82
91
|
tileBody }));
|
|
83
92
|
}
|
|
93
|
+
/**
|
|
94
|
+
* ProjectTiles — Renders a titled section with description and a grid of project image tiles.
|
|
95
|
+
*
|
|
96
|
+
* @param {string} [props.title] - Title of the project section.
|
|
97
|
+
* @param {string} [props.description] - Description text for the project section.
|
|
98
|
+
* @param {array} [props.tileCards] - Array of tile card objects (index, cardIndex, cardLength, image, imageAlt).
|
|
99
|
+
* @param {function} [props.onImageClick] - Optional click handler for tile images (event, imageUrl).
|
|
100
|
+
*/
|
|
101
|
+
ProjectTiles.propTypes = {
|
|
102
|
+
title: PropTypes.string.isRequired,
|
|
103
|
+
description: PropTypes.string.isRequired,
|
|
104
|
+
tileCards: PropTypes.arrayOf(PropTypes.shape({
|
|
105
|
+
index: PropTypes.number.isRequired,
|
|
106
|
+
cardIndex: PropTypes.number.isRequired,
|
|
107
|
+
cardLength: PropTypes.number.isRequired,
|
|
108
|
+
image: PropTypes.string.isRequired,
|
|
109
|
+
imageAlt: PropTypes.string.isRequired,
|
|
110
|
+
})).isRequired,
|
|
111
|
+
onImageClick: PropTypes.func,
|
|
112
|
+
};
|
|
113
|
+
export function ProjectTiles(props) {
|
|
114
|
+
const { title, description, tileCards, onImageClick } = props;
|
|
115
|
+
return (_jsxs(_Fragment, { children: [_jsx("h3", { children: title }), _jsx("p", { children: description }), _jsx(Tiles, { variant: "caption", cards: tileCards, rowCount: 3, imgClick: onImageClick })] }));
|
|
116
|
+
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
pxl:v1:
|
|
1
|
+
pxl:v1:18abfb175f3eda28fcb71b19:88d9139c5e6c054df401944497a84a85:7b752c165f15de118c4443b8c4163493f501bba71b244f91547e65bdf73b7ef08b0bb6002ccbfc60da18e4ad08058e83c9ca982587b6bba7e7a12d7d938907228cdd2e3910ae8af3b89d591a1155499f069dde0ff0c6b1900c4c8fc3dc483bea9756d46127258633ecf04b2233ab5ec33cf5dbb0d8c2701b93a8b73b0ba5381e7bfc0ee16cc4f9b97a244f909499ccb28424abd6cbe7aba404b405af61933bb2ce98605af816b98f0712bb106581cd66c381efc0541141c078d2cc776164f0485b80d7bc5d65de302b975769ead4a4d73fa732b08f5b1c2c7b5e4aedeb02b478e21de71cf63592121c008668f819aae230d12511ec9a4bfbba8878624b0fa9d3dd94af75f1c02b79fcfaf2632bb58e9dd2015a5fe105ab5b1e6fd41e52a62ee6b320af44927748877bb058c94ef4d04bba5f54fa89bb4bc3133195e4ee2684f88eb02c3a5169a77353c3313aa70a164b37572325fd649498b2893d39c0f96142ea5d4273d0dd6b20119dbfeb0fe7e4534015270bebdb72bc6e209d95450303587fd0e46da080da61264df599f856b17d31bbf4e83f22d10937fd91108c24ee0d5b01c2eae1ae42f5f0035026b0c713655740e1b191fcd1164f35fb530d6e5569f0b1b57cb8caacf840e70bffb2722651e3cfcd98d89a8b4db933fdebb9ea686f1356c176c6c9f8af18a6ea1d9e1209f7dee17db270480fd572e4a3a41695cdf8336ddd2e233ae13c09f6c8a7acc6a115db21c0c25abec8b8b9fa25e207404117799a4caa21835ab95d03ae2acd0e0e40ed55adc5d64dd8ef2071a342a5d51ed89b7a098407656af61047eab8c4d5c882097316bec3ef6fbcc541dac6e03484d682dcdc1b452a7d4459882d3a2c6256869c86133708905e033e8e5111a6d17c78d9fa8cf252319dba026167d54fa2c6301c84381bb24b202ffb48f58edd48728de570dd3f5dfdc3e4920e803c4219431925bf2d651e1fc27e4368c6244fba498f66d5f4426a45918618ce0541ec48e330f8860d852483f4e10db4ef1cbcf216d82de6e0b6ac987a4492b53533c353e6e7238f5bc2b51db693c685ec7ba250d53af3fcd69b5e697524887dca88f5d16d5548dd364c38a50624072e270bdff6e782415a8aa0acd14ec22186518a0fb49f695cabcafbb4d9a5f04959efe36284e332d50cb0dbcbe81822ec5b618260c4d4c816b1de6c08f42a874f07c01ebfbedb4778c75c3fccd1a34c4adfa13f85ff2887a4e403a139eba2d92d0862dbcb051f8d2fa9737e5f80f1f755359015244fc72b8971391222a2e526493fc9f058b7656c2b1c77eb1143828a2ed8665c1d13d23598da5c1856f5f2669709a321052b8232e6d6044ce84dd083fcb64c34828bfcda076af0ea40a362172b98d39ed2bc7e45c31ea7f11429bffcf1df8dd1ed35564101ee89e368274ff50a55b4ad5edb0cf9b2144ce117254ee6ceaed213c45cfead5a25861844ec9502ac96196a8b43577901b68958dc2d7e1ec000a429540b0fdcc469d43d4dd1d2863828507deba7c9a18e49b6c234309f505205b3d900c2dfd967fc532a725e24bcf39005fdf3ccb5350c6d2713b9935dece88f741eb9e0fb3c0696c52c9a92d4d92e0d296d175d852f722897bc3ecb85a53ddf3aeb45bc5b262e83f4fcaf8679c515541e58f1c084351aed15081eb5d33965f7e9bcc69f3c112adff17bba33f5cfd91f7ed173f08c02e42b29fb25d62ad3d7dac1c0a3b5fa97a4537f1f983e08da6fd60cb38becc41894d16e367b959926f05a60864e04fd1965e2395ec76a22dd6b99efdeb3ca61935732f0e62c8ad26a22f1c0846ea56a54274d03c3c62666a6172daa85088b0fab81198174836f4f5b0635f7fb416066d6f42ef16738ac04c4ea84bceb54cd8fe02b4caf211e323737bfe92a5bbc1c1fa80d30cbdb03644197eb01d54df8bcd2a45d5090ef4448f59c77d248152969a73d24f7748a13a37ae30ec91ad854dc1c3b700fd26a3d00c887f6a323ad1fbe2d73526b7862198bfa7892306e11cad0d4be8945587fb11e0dbd4c12612c5635b934fcaac6c657e5741c2b7fd8b3a4a85267ceec54b8996f9c7b2597e05a3387fe8bc6f0771a9d48b81081083a424faee8ad1b2d1e6f2c642601cb638608c9546b894916f05f7f1b5fff08e7c0dabe672e688a15bc22e26492994fb79435cb4cd26a1e54ceba10114e368899dc139f1f364e2fcab599573d0f98dddd2db287d7613fe16b3bc56cdda1f52b9f481b81cb72d5108bd071a5c1cf14289b61d144afc26691ec37db143f84fdc57aa416a289467881f06666dc204c66d8847e40467eb2954bd058286c3e46a82c1ced4156df93d8f0fb02e478cf58e46f7d70ee77edb5a8bd7b1240aa5ad0c8a9874081c7c13fe178092ca50b051b2f95bb618688fd075266b57f10a03ebcc3935cfc6b06a348b54f67f7f6dbf75b1bc4407e4dd158d84f2aa9871e2976e28766689d6594362dba0f8ccefcfab3fdd603f31ed5ad63d6bf98eb73f3a3bb38561395746ec811c04ff241fffd14b5d280da67fb865ea1e2cccd7ca902b61f849936d7760f37785272dc6d8f9c7f0838802cc9410ec98e9d41db26677fef0bf710a62b22610718c3fc5ab0fb188d295d1eaa1a98c9d90e57501db94b5c8bbae4ec5440726360d8cdaa9c9e84ddcfa046db2c5bba29498bf3088a8a86aa097f1155324de34e07bd1fa6388e40ec15ecd9d790409754c86767d0f2dff63054cfa17bc56c5888705c1953c6673b5211f3325a05c35cb7f5638b5efba2f0307d03d9197b0463356e893d4f01c4c5594e0ddcf9d425b95575b459b7711c87ee78b7a76eb738a92b6aa294b164b4500096c0da71d072b71e61507de8aff343db309469d3164a982e8c49e5a972fc6042740ef2fd640a7a75d6f56522a7833beb49ad143ca9d4b809378e52d944a9c248892136752984578a39fbc6a69198df8710469cec7234f7a30be36837df4dab8790a00ac8fcc90617f04ed5a6f112332fe3ef489f3e21d8df1a45f50e4bde9a73686d0adb177e8a9ed3f8d78f35417e0de0c8e516a58f9b042a3fed04332385ac06965e0699998b52d567c337bab2c9b938b7a2b83ca78c99d2dc64f8e9f4fbc78dbf52b63d9f9c07ffaf69522009eb8c1764566daad9591e979893bc26f4baa0ce9ca92b13dda352421aea067d68703cf6496442fc109e9c48567a0879421040ccddf062c15b7adb888f6e6c0ac2dee7283de42b0b0cd2e785d6d130a2692a4d6589756f959581016079ec23fc9d59ceb2906fabd4c6181bb3fb226750bac42a10ac80472e8b3c89d5543e1368e6a2b78b6d449f1c60e63c20134a229ceb4cfce0b86ebbcf257a6aa6e8b1d83166e5178d6d3d3c0996469b52aae46fc04a704709032a2974fff1b0d6cd4ec57b3571bec80e63a0a92171d4307a28b87b48d5224c360a67fe671b69fe482555e8a2103dd0dbee0cda986e225ff4ec5a3b5c4488c8a4ad9458ac9f5108894358ff41740ae6725e2740fb5fa8129ec5fbec951aa087d42f1dd9bc06880ce1dd55b5e7bc233b2779d62489c9ccc6be147d107d7727c0679e2a53b0c19e9f763771a2b71affdb21139cb68711faa079848ba805277cf8e8c6998435d8985ad0167113dac10ca510b3a93d0f56816760ca3d7b13127bb67c49b36118bf1f2e3fce3adfc6c3fb0ab737abc41f55552a0ab6a8094800b416f8a8b4b289f04fca273a58bb953d2d7ce1f0d4f379387c6900df1747d04ee16b3089a4487c55d9d3e90f873375c4eed4d87f61c6b1272b56e9fabe6410238490c39461360f1e9e062f7ddcbca3bd3a364b6b1beb8fc2813244ca4de827591b546234355d1a5df99a16829aa3469950e121e82fe7d8b437a7d22829bb35fdc8f24e2dc865cbfd9e2d4e4bd1d730dbcffa6d590b4ff3c6d25a0b6f3b3f968170c27fd63720506b3ee70b3b768fb1b2d298f10eb2c7c6942aaee3edba9ed5389770f3653421a7043d3da7a0a7b1d8b78f0dc4cea26c0e499e7d1b39103158d7a9c96672832f3211d00acc978fe6c6e8d1e1d339a97bd38eb9132e2ed3458125437eff12b3c0f3f8a886845bc093b5dbf4c3461b0ad5581955f1ba2147e4b69f89fa44bba25fd328c99179da337b2e364f096f162a861c21372528b09b3f9e8c2fa2d0f07ff2d186f141cc37e8129d496f92db1ebcbc6728e2d30976159b5dd855209ce869a0ef6cbf1e23a9a4449830e74b850057df371657a4b8742038dd6988e646f26a3d42066ac4c1e7aff56a1b745b44478c98efbe95cef831420a293e88f91e36b44cdbaf32b2a5baae26a9c11086e8adab9bea6c2f4ad518a621a1e962e80a15bb321ffc5c3a74ed8f809d796248df548fa7fe7b887591c474a922969bd5921deb6a2e0b92265cfd7d68eb3d43fa77f1ec978b934c1654cfb482dd67a8eee6aa83eb82c22ac047c538512068ddb0e9bc078f5072bf979c5aea6ed010f62e8871a765e4717b7eda6fbc49dffc6e1aed93b5851c023c3a606b393a184e40b0a18b179058de45a3b6054d156d8f015d5450f3956eee77973b41df51b2e59828ae3f75154f57b3d739c8ac22fcfe911289c3acde01aabcc2d72b530e537c534d06a5349a95044a7d433ef380b0c1eb650a535228835c0fc4cd7060e0dabde4a9e6b79554dfb01dd91149d3876e4363cc0dafeae2af3589d411f0e269c26958097586d856c2fcbbb970a3a904f138372585e4db360b6f70e48e99e1001d2de573f50c23b8c769804e1f1c7c5c82078abbe9c4efc6c69a58792952b00e21ff6ddf97ef5089456776eb0f6ff1ba403e0cc9d75744f0487caf14815ea870e950464f40f829cf7375c2392edaf7026fb5f1b911d7ecad096e3a936f7ae374335c82736acd1937041bac88f36402dc20fcc2fe7f9a078f50c52349ae091de47775411753f64598f91245092072b625dc082243e3226c7232836f416dc7c0b2ce45ec8212eaa58c328a3adbf9b604ad960714df0958213bb6c269ca9547f2d2ca2f75aff91858de806f19aac2da3344294eb397d387ca223400736ad33512460107a8c3d18b6e6aea341bd287babf266209f8bc5e94a94d3298bd839115f3da00af1e4fbd8529fa6c69883a128a55cfc82041afef78f8d7cb3c4c8593b9259f56aa7dc465887232ebee84
|
package/dist/index.server.js
CHANGED
|
@@ -8,7 +8,6 @@ export * from './components/config/config.server';
|
|
|
8
8
|
export * from './components/config/config.types';
|
|
9
9
|
export * from './components/config/config.validators';
|
|
10
10
|
export * from './components/config/crypto';
|
|
11
|
-
export * from './components/general/hero';
|
|
12
11
|
export * from './components/general/manifest';
|
|
13
12
|
export * from './components/general/metadata.functions';
|
|
14
13
|
export * from './components/general/proxy-handler';
|
|
@@ -1,11 +1,15 @@
|
|
|
1
1
|
import PropTypes, { InferProps } from 'prop-types';
|
|
2
2
|
import "./hero.css";
|
|
3
3
|
export type HeroType = InferProps<typeof Hero.propTypes>;
|
|
4
|
-
export declare function Hero({ img,
|
|
4
|
+
export declare function Hero({ img, imgAlt, imgId, variant, height, children }: HeroType): import("react/jsx-runtime").JSX.Element;
|
|
5
5
|
export declare namespace Hero {
|
|
6
6
|
var propTypes: {
|
|
7
7
|
/** Background image URL (required) */
|
|
8
8
|
img: PropTypes.Validator<string>;
|
|
9
|
+
/** Alternative text for the background image (optional) */
|
|
10
|
+
imgAlt: PropTypes.Requireable<string>;
|
|
11
|
+
/** ID for the hero section */
|
|
12
|
+
imgId: PropTypes.Requireable<string>;
|
|
9
13
|
/** Layout variant: 'static' or 'anchored' */
|
|
10
14
|
variant: PropTypes.Requireable<string>;
|
|
11
15
|
/** Height for hero section (string like '60vh' or number) */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"hero.d.ts","sourceRoot":"","sources":["../../../../src/components/general/hero.tsx"],"names":[],"mappings":"AAEA,OAAO,SAAS,EAAE,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;
|
|
1
|
+
{"version":3,"file":"hero.d.ts","sourceRoot":"","sources":["../../../../src/components/general/hero.tsx"],"names":[],"mappings":"AAEA,OAAO,SAAS,EAAE,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAEnD,OAAO,YAAY,CAAC;AA+BpB,MAAM,MAAM,QAAQ,GAAG,UAAU,CAAC,OAAO,IAAI,CAAC,SAAS,CAAC,CAAC;AACzD,wBAAgB,IAAI,CAAC,EAAE,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,OAAkB,EAAE,MAAe,EAAE,QAAQ,EAAE,EAAE,QAAQ,2CAwDnG;yBAxDe,IAAI;;QAdnB,sCAAsC;;QAEtC,2DAA2D;;QAE3D,8BAA8B;;QAE9B,6CAA6C;;QAE7C,6DAA6D;;QAE7D,gDAAgD"}
|
|
@@ -8,7 +8,16 @@ export declare function Tiles(props: TilesType): import("react/jsx-runtime").JSX
|
|
|
8
8
|
export declare namespace Tiles {
|
|
9
9
|
var propTypes: {
|
|
10
10
|
/** Array of card objects used to populate the tile grid (image, link, imageAlt, bodyText). */
|
|
11
|
-
cards: PropTypes.Validator<
|
|
11
|
+
cards: PropTypes.Validator<(PropTypes.InferProps<{
|
|
12
|
+
index: PropTypes.Requireable<number>;
|
|
13
|
+
cardLength: PropTypes.Requireable<number>;
|
|
14
|
+
link: PropTypes.Requireable<string>;
|
|
15
|
+
image: PropTypes.Validator<string>;
|
|
16
|
+
imageAlt: PropTypes.Requireable<string>;
|
|
17
|
+
bodyText: PropTypes.Requireable<string>;
|
|
18
|
+
imgClick: PropTypes.Requireable<(...args: any[]) => any>;
|
|
19
|
+
variant: PropTypes.Requireable<"caption" | "overlay">;
|
|
20
|
+
}> | null | undefined)[]>;
|
|
12
21
|
/** Number of rows to display in the grid (controls layout). */
|
|
13
22
|
rowCount: PropTypes.Requireable<number>;
|
|
14
23
|
/** Optional click handler for tile images; called with (event, imageUrl). */
|
|
@@ -43,5 +52,21 @@ declare namespace Tile {
|
|
|
43
52
|
variant: PropTypes.Requireable<"caption" | "overlay">;
|
|
44
53
|
};
|
|
45
54
|
}
|
|
55
|
+
export type ProjectTilesType = InferProps<typeof ProjectTiles.propTypes>;
|
|
56
|
+
export declare function ProjectTiles(props: ProjectTilesType): import("react/jsx-runtime").JSX.Element;
|
|
57
|
+
export declare namespace ProjectTiles {
|
|
58
|
+
var propTypes: {
|
|
59
|
+
title: PropTypes.Validator<string>;
|
|
60
|
+
description: PropTypes.Validator<string>;
|
|
61
|
+
tileCards: PropTypes.Validator<(PropTypes.InferProps<{
|
|
62
|
+
index: PropTypes.Validator<number>;
|
|
63
|
+
cardIndex: PropTypes.Validator<number>;
|
|
64
|
+
cardLength: PropTypes.Validator<number>;
|
|
65
|
+
image: PropTypes.Validator<string>;
|
|
66
|
+
imageAlt: PropTypes.Validator<string>;
|
|
67
|
+
}> | null | undefined)[]>;
|
|
68
|
+
onImageClick: PropTypes.Requireable<(...args: any[]) => any>;
|
|
69
|
+
};
|
|
70
|
+
}
|
|
46
71
|
export {};
|
|
47
72
|
//# sourceMappingURL=tiles.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tiles.d.ts","sourceRoot":"","sources":["../../../../src/components/general/tiles.tsx"],"names":[],"mappings":"AAIA,OAAO,SAAS,EAAE,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAKnD,OAAO,+BAA+B,CAAC;AACvC,OAAO,aAAa,CAAC;AAErB,eAAO,MAAM,aAAa,iCAAoC,CAAC;AAC/D,MAAM,MAAM,gBAAgB,GAAG,OAAO,aAAa,CAAC,MAAM,CAAC,GAAG,SAAS,CAAC;
|
|
1
|
+
{"version":3,"file":"tiles.d.ts","sourceRoot":"","sources":["../../../../src/components/general/tiles.tsx"],"names":[],"mappings":"AAIA,OAAO,SAAS,EAAE,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAKnD,OAAO,+BAA+B,CAAC;AACvC,OAAO,aAAa,CAAC;AAErB,eAAO,MAAM,aAAa,iCAAoC,CAAC;AAC/D,MAAM,MAAM,gBAAgB,GAAG,OAAO,aAAa,CAAC,MAAM,CAAC,GAAG,SAAS,CAAC;AAgCxE,MAAM,MAAM,SAAS,GAAG,UAAU,CAAC,OAAO,KAAK,CAAC,SAAS,CAAC,CAAC;AAC3D,wBAAgB,KAAK,CAAC,KAAK,EAAE,SAAS,2CA6BrC;yBA7Be,KAAK;;QAvBrB,8FAA8F;;;;;;;;;;;QAW7F,+DAA+D;;QAE/D,6EAA6E;;QAE7E;;;WAGG;QACH,uEAAuE;;;;AAoExE,MAAM,MAAM,QAAQ,GAAG,UAAU,CAAC,OAAO,IAAI,CAAC,SAAS,CAAC,CAAC;AACzD,iBAAS,IAAI,CAAE,KAAK,EAAE,QAAQ,2CA2B7B;kBA3BQ,IAAI;;QAlBb,oCAAoC;;QAEnC,0CAA0C;;QAE1C,mCAAmC;;QAEnC,8CAA8C;;QAE9C,6DAA6D;;QAE7D,qEAAqE;;QAErE,wFAAwF;;QAExF,iFAAiF;;;;AAyDlF,MAAM,MAAM,gBAAgB,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,SAAS,CAAC,CAAC;AACzE,wBAAgB,YAAY,CAAC,KAAK,EAAE,gBAAgB,2CASnD;yBATe,YAAY"}
|
|
@@ -4,7 +4,6 @@ export * from "./components/config/config.server";
|
|
|
4
4
|
export * from "./components/config/config.types";
|
|
5
5
|
export * from "./components/config/config.validators";
|
|
6
6
|
export * from "./components/config/crypto";
|
|
7
|
-
export * from "./components/general/hero";
|
|
8
7
|
export * from "./components/general/manifest";
|
|
9
8
|
export * from "./components/general/metadata.functions";
|
|
10
9
|
export * from "./components/general/proxy-handler";
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { ProjectTiles } from '@/components/general/tiles';
|
|
2
|
+
declare const _default: {
|
|
3
|
+
title: string;
|
|
4
|
+
component: typeof ProjectTiles;
|
|
5
|
+
};
|
|
6
|
+
export default _default;
|
|
7
|
+
export declare const Default: {
|
|
8
|
+
(): import("react/jsx-runtime").JSX.Element;
|
|
9
|
+
storyName: string;
|
|
10
|
+
};
|
|
11
|
+
//# sourceMappingURL=project-tiles.stories.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"project-tiles.stories.d.ts","sourceRoot":"","sources":["../../../../src/stories/general/project-tiles.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;;;;;AAE1D,wBAGE;AAWF,eAAO,MAAM,OAAO;;;CAInB,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"project-tiles.test.d.ts","sourceRoot":"","sources":["../../../src/tests/project-tiles.test.tsx"],"names":[],"mappings":""}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pixelated-tech/components",
|
|
3
|
-
"version": "3.13.
|
|
3
|
+
"version": "3.13.4",
|
|
4
4
|
"private": false,
|
|
5
5
|
"author": {
|
|
6
6
|
"name": "Pixelated Technologies",
|
|
@@ -105,13 +105,12 @@
|
|
|
105
105
|
},
|
|
106
106
|
"dependencies": {
|
|
107
107
|
"date-fns": "^4.1.0",
|
|
108
|
-
"
|
|
109
|
-
"globals": "^17.2.0",
|
|
108
|
+
"globals": "^17.3.0",
|
|
110
109
|
"html-entities": "^2.6.0"
|
|
111
110
|
},
|
|
112
111
|
"devDependencies": {
|
|
113
|
-
"@aws-sdk/client-amplify": "^3.
|
|
114
|
-
"@aws-sdk/client-iam": "^3.
|
|
112
|
+
"@aws-sdk/client-amplify": "^3.984.0",
|
|
113
|
+
"@aws-sdk/client-iam": "^3.984.0",
|
|
115
114
|
"@babel/cli": "^7.28.6",
|
|
116
115
|
"@babel/core": "^7.29.0",
|
|
117
116
|
"@babel/plugin-proposal-class-properties": "^7.18.6",
|
|
@@ -121,22 +120,22 @@
|
|
|
121
120
|
"@babel/preset-typescript": "^7.28.5",
|
|
122
121
|
"@eslint/json": "^1.0.0",
|
|
123
122
|
"@eslint/markdown": "^7.5.1",
|
|
124
|
-
"@storybook/addon-a11y": "^10.2.
|
|
125
|
-
"@storybook/addon-docs": "^10.2.
|
|
123
|
+
"@storybook/addon-a11y": "^10.2.7",
|
|
124
|
+
"@storybook/addon-docs": "^10.2.7",
|
|
126
125
|
"@storybook/addon-webpack5-compiler-babel": "^4.0.0",
|
|
127
126
|
"@storybook/preset-scss": "^1.0.3",
|
|
128
|
-
"@storybook/react-webpack5": "^10.2.
|
|
127
|
+
"@storybook/react-webpack5": "^10.2.7",
|
|
129
128
|
"@testing-library/dom": "^10.4.1",
|
|
130
129
|
"@testing-library/react": "^16.3.2",
|
|
131
130
|
"@testing-library/user-event": "^14.6.1",
|
|
132
131
|
"@types/md5": "^2.3.6",
|
|
133
|
-
"@types/node": "^25.1
|
|
132
|
+
"@types/node": "^25.2.1",
|
|
134
133
|
"@types/prop-types": "^15.7.15",
|
|
135
|
-
"@types/react": "^19.2.
|
|
134
|
+
"@types/react": "^19.2.13",
|
|
136
135
|
"@types/react-dom": "^19.2.3",
|
|
137
136
|
"@typescript-eslint/eslint-plugin": "^8.54.0",
|
|
138
137
|
"@typescript-eslint/parser": "^8.54.0",
|
|
139
|
-
"@vitejs/plugin-react": "^5.1.
|
|
138
|
+
"@vitejs/plugin-react": "^5.1.3",
|
|
140
139
|
"@vitest/coverage-v8": "^4.0.18",
|
|
141
140
|
"@vitest/ui": "^4.0.18",
|
|
142
141
|
"ajv": "^8.17.1",
|
|
@@ -152,11 +151,11 @@
|
|
|
152
151
|
"eslint-plugin-n": "^17.23.2",
|
|
153
152
|
"eslint-plugin-promise": "^7.2.1",
|
|
154
153
|
"eslint-plugin-react": "^7.37.4",
|
|
155
|
-
"eslint-plugin-storybook": "^10.2.
|
|
154
|
+
"eslint-plugin-storybook": "^10.2.7",
|
|
156
155
|
"file-loader": "^6.2.0",
|
|
157
|
-
"happy-dom": "^20.
|
|
158
|
-
"jsdom": "^
|
|
159
|
-
"less-loader": "^12.3.
|
|
156
|
+
"happy-dom": "^20.5.0",
|
|
157
|
+
"jsdom": "^28.0.0",
|
|
158
|
+
"less-loader": "^12.3.1",
|
|
160
159
|
"mini-css-extract-plugin": "^2.10.0",
|
|
161
160
|
"next": "^16.1.6",
|
|
162
161
|
"null-loader": "^4.0.1",
|
|
@@ -167,14 +166,14 @@
|
|
|
167
166
|
"react-test-renderer": "^19.2.4",
|
|
168
167
|
"redux": "^5.0.1",
|
|
169
168
|
"sass": "^1.97.3",
|
|
170
|
-
"sass-loader": "^16.0.
|
|
171
|
-
"storybook": "^10.2.
|
|
169
|
+
"sass-loader": "^16.0.7",
|
|
170
|
+
"storybook": "^10.2.7",
|
|
172
171
|
"style-loader": "^4.0.0",
|
|
173
172
|
"ts-loader": "^9.5.4",
|
|
174
173
|
"typescript": "^5.9.3",
|
|
175
174
|
"url-loader": "^4.1.1",
|
|
176
175
|
"vitest": "^4.0.18",
|
|
177
|
-
"webpack": "^5.
|
|
176
|
+
"webpack": "^5.105.0",
|
|
178
177
|
"webpack-cli": "^6.0.1",
|
|
179
178
|
"webpack-dev-server": "^5.2.3",
|
|
180
179
|
"webpack-node-externals": "^3.0.0"
|
|
@@ -185,19 +184,16 @@
|
|
|
185
184
|
"react-dom": "^19.2.0"
|
|
186
185
|
},
|
|
187
186
|
"optionalDependencies": {
|
|
188
|
-
"@aws-sdk/client-cloudwatch": "^3.
|
|
189
|
-
"@aws-sdk/client-route-53": "^3.
|
|
190
|
-
"googleapis": "^171.
|
|
187
|
+
"@aws-sdk/client-cloudwatch": "^3.984.0",
|
|
188
|
+
"@aws-sdk/client-route-53": "^3.984.0",
|
|
189
|
+
"googleapis": "^171.4.0",
|
|
191
190
|
"md5": "^2.3.0",
|
|
192
|
-
"puppeteer": "^24.
|
|
191
|
+
"puppeteer": "^24.37.2",
|
|
193
192
|
"react-redux": "*",
|
|
194
193
|
"recharts": "^3.7.0",
|
|
195
194
|
"redux": "*"
|
|
196
195
|
},
|
|
197
196
|
"overrides": {
|
|
198
|
-
"@aws-sdk/xml-builder": {
|
|
199
|
-
"fast-xml-parser": "^5.3.4"
|
|
200
|
-
},
|
|
201
197
|
"eslint-config-standard": {
|
|
202
198
|
"eslint": "^9.39.2",
|
|
203
199
|
"eslint-plugin-n": "^17.23.2",
|