@pixelated-tech/components 3.13.3 → 3.13.5
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/components/integrations/wordpress.css +1 -0
- 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 +38 -38
|
@@ -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() || '', quality: 100, width: "1000px", 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.5",
|
|
4
4
|
"private": false,
|
|
5
5
|
"author": {
|
|
6
6
|
"name": "Pixelated Technologies",
|
|
@@ -86,7 +86,8 @@
|
|
|
86
86
|
"config:encrypt": "npm run config:vault -- encrypt src/config/pixelated.config.json",
|
|
87
87
|
"config:decrypt": "npm run config:vault -- decrypt src/config/pixelated.config.json.enc",
|
|
88
88
|
"create-pixelated-app": "node src/scripts/create-pixelated-app.js",
|
|
89
|
-
"zip-theme": "node src/scripts/zip-pixelated-theme.js ../pixelated-blog-wp-theme Pixelated.zip"
|
|
89
|
+
"zip-theme": "node src/scripts/zip-pixelated-theme.js ../pixelated-blog-wp-theme Pixelated.zip",
|
|
90
|
+
"update": "UPDATES=$(npm outdated | awk 'NR>1 {print $1\"@\"$4}' || true); if [ -n \"$UPDATES\" ]; then echo \"Updating the following packages: $UPDATES\"; echo \"$UPDATES\" | xargs npm install --force --save 2>/dev/null || true; echo \"✅ Successfully updated: $UPDATES\"; else echo \"✅ No dependency updates needed.\"; fi; npm audit fix 2>/dev/null || true"
|
|
90
91
|
},
|
|
91
92
|
"scripts-20260113": {
|
|
92
93
|
"build": "npm run validate-exports && npm run buildClean && npm run tsc && npm run rsync && npm run tscClean ",
|
|
@@ -105,13 +106,14 @@
|
|
|
105
106
|
},
|
|
106
107
|
"dependencies": {
|
|
107
108
|
"date-fns": "^4.1.0",
|
|
108
|
-
"
|
|
109
|
-
"globals": "^17.2.0",
|
|
109
|
+
"globals": "^17.3.0",
|
|
110
110
|
"html-entities": "^2.6.0"
|
|
111
111
|
},
|
|
112
112
|
"devDependencies": {
|
|
113
|
-
"@aws-sdk/client-amplify": "^3.
|
|
114
|
-
"@aws-sdk/client-
|
|
113
|
+
"@aws-sdk/client-amplify": "^3.893.0",
|
|
114
|
+
"@aws-sdk/client-cloudwatch": "^3.893.0",
|
|
115
|
+
"@aws-sdk/client-iam": "^3.893.0",
|
|
116
|
+
"@aws-sdk/client-route-53": "^3.893.0",
|
|
115
117
|
"@babel/cli": "^7.28.6",
|
|
116
118
|
"@babel/core": "^7.29.0",
|
|
117
119
|
"@babel/plugin-proposal-class-properties": "^7.18.6",
|
|
@@ -119,47 +121,48 @@
|
|
|
119
121
|
"@babel/preset-env": "^7.29.0",
|
|
120
122
|
"@babel/preset-react": "^7.28.5",
|
|
121
123
|
"@babel/preset-typescript": "^7.28.5",
|
|
122
|
-
"@eslint/
|
|
124
|
+
"@eslint/js": "^9.39.2",
|
|
125
|
+
"@eslint/json": "^1.0.1",
|
|
123
126
|
"@eslint/markdown": "^7.5.1",
|
|
124
|
-
"@storybook/addon-a11y": "^10.2.
|
|
125
|
-
"@storybook/addon-docs": "^10.2.
|
|
127
|
+
"@storybook/addon-a11y": "^10.2.9",
|
|
128
|
+
"@storybook/addon-docs": "^10.2.9",
|
|
126
129
|
"@storybook/addon-webpack5-compiler-babel": "^4.0.0",
|
|
127
130
|
"@storybook/preset-scss": "^1.0.3",
|
|
128
|
-
"@storybook/react-webpack5": "^10.2.
|
|
131
|
+
"@storybook/react-webpack5": "^10.2.9",
|
|
129
132
|
"@testing-library/dom": "^10.4.1",
|
|
130
133
|
"@testing-library/react": "^16.3.2",
|
|
131
134
|
"@testing-library/user-event": "^14.6.1",
|
|
132
135
|
"@types/md5": "^2.3.6",
|
|
133
|
-
"@types/node": "^25.
|
|
136
|
+
"@types/node": "^25.2.3",
|
|
134
137
|
"@types/prop-types": "^15.7.15",
|
|
135
|
-
"@types/react": "^19.2.
|
|
138
|
+
"@types/react": "^19.2.14",
|
|
136
139
|
"@types/react-dom": "^19.2.3",
|
|
137
|
-
"@typescript-eslint/eslint-plugin": "^8.
|
|
138
|
-
"@typescript-eslint/parser": "^8.
|
|
139
|
-
"@vitejs/plugin-react": "^5.1.
|
|
140
|
+
"@typescript-eslint/eslint-plugin": "^8.56.0",
|
|
141
|
+
"@typescript-eslint/parser": "^8.56.0",
|
|
142
|
+
"@vitejs/plugin-react": "^5.1.4",
|
|
140
143
|
"@vitest/coverage-v8": "^4.0.18",
|
|
141
144
|
"@vitest/ui": "^4.0.18",
|
|
142
|
-
"ajv": "^8.
|
|
145
|
+
"ajv": "^8.18.0",
|
|
143
146
|
"ajv-keywords": "^5.1.0",
|
|
144
147
|
"babel-loader": "^10.0.0",
|
|
145
148
|
"clean-webpack-plugin": "^4.0.0",
|
|
146
149
|
"copy-webpack-plugin": "^13.0.1",
|
|
147
|
-
"css-loader": "^7.1.
|
|
150
|
+
"css-loader": "^7.1.4",
|
|
148
151
|
"eslint": "^9.39.2",
|
|
149
|
-
"eslint-config-standard": "^
|
|
152
|
+
"eslint-config-standard": "^10.2.1",
|
|
150
153
|
"eslint-plugin-import": "^2.32.0",
|
|
151
154
|
"eslint-plugin-jsx-a11y": "^6.10.2",
|
|
152
|
-
"eslint-plugin-n": "^17.
|
|
153
|
-
"eslint-plugin-promise": "^
|
|
154
|
-
"eslint-plugin-react": "^7.37.
|
|
155
|
-
"eslint-plugin-storybook": "^
|
|
156
|
-
"file-loader": "^
|
|
157
|
-
"happy-dom": "^20.
|
|
158
|
-
"jsdom": "^
|
|
159
|
-
"less-loader": "^12.3.
|
|
155
|
+
"eslint-plugin-n": "^17.24.0",
|
|
156
|
+
"eslint-plugin-promise": "^4.3.1",
|
|
157
|
+
"eslint-plugin-react": "^7.37.5",
|
|
158
|
+
"eslint-plugin-storybook": "^0.1.1",
|
|
159
|
+
"file-loader": "^1.0.0",
|
|
160
|
+
"happy-dom": "^20.6.2",
|
|
161
|
+
"jsdom": "^28.1.0",
|
|
162
|
+
"less-loader": "^12.3.1",
|
|
160
163
|
"mini-css-extract-plugin": "^2.10.0",
|
|
161
164
|
"next": "^16.1.6",
|
|
162
|
-
"null-loader": "^
|
|
165
|
+
"null-loader": "^0.1.1",
|
|
163
166
|
"prop-types": "^15.8.1",
|
|
164
167
|
"react": "^19.2.4",
|
|
165
168
|
"react-dom": "^19.2.4",
|
|
@@ -167,14 +170,14 @@
|
|
|
167
170
|
"react-test-renderer": "^19.2.4",
|
|
168
171
|
"redux": "^5.0.1",
|
|
169
172
|
"sass": "^1.97.3",
|
|
170
|
-
"sass-loader": "^16.0.
|
|
171
|
-
"storybook": "^10.2.
|
|
173
|
+
"sass-loader": "^16.0.7",
|
|
174
|
+
"storybook": "^10.2.9",
|
|
172
175
|
"style-loader": "^4.0.0",
|
|
173
176
|
"ts-loader": "^9.5.4",
|
|
174
177
|
"typescript": "^5.9.3",
|
|
175
|
-
"url-loader": "^
|
|
178
|
+
"url-loader": "^0.5.9",
|
|
176
179
|
"vitest": "^4.0.18",
|
|
177
|
-
"webpack": "^5.
|
|
180
|
+
"webpack": "^5.105.2",
|
|
178
181
|
"webpack-cli": "^6.0.1",
|
|
179
182
|
"webpack-dev-server": "^5.2.3",
|
|
180
183
|
"webpack-node-externals": "^3.0.0"
|
|
@@ -185,19 +188,16 @@
|
|
|
185
188
|
"react-dom": "^19.2.0"
|
|
186
189
|
},
|
|
187
190
|
"optionalDependencies": {
|
|
188
|
-
"@aws-sdk/client-cloudwatch": "^3.
|
|
189
|
-
"@aws-sdk/client-route-53": "^3.
|
|
190
|
-
"googleapis": "^171.
|
|
191
|
+
"@aws-sdk/client-cloudwatch": "^3.893.0",
|
|
192
|
+
"@aws-sdk/client-route-53": "^3.893.0",
|
|
193
|
+
"googleapis": "^171.4.0",
|
|
191
194
|
"md5": "^2.3.0",
|
|
192
|
-
"puppeteer": "^24.
|
|
195
|
+
"puppeteer": "^24.37.3",
|
|
193
196
|
"react-redux": "*",
|
|
194
197
|
"recharts": "^3.7.0",
|
|
195
198
|
"redux": "*"
|
|
196
199
|
},
|
|
197
200
|
"overrides": {
|
|
198
|
-
"@aws-sdk/xml-builder": {
|
|
199
|
-
"fast-xml-parser": "^5.3.4"
|
|
200
|
-
},
|
|
201
201
|
"eslint-config-standard": {
|
|
202
202
|
"eslint": "^9.39.2",
|
|
203
203
|
"eslint-plugin-n": "^17.23.2",
|