@pixelated-tech/components 3.1.6 → 3.2.0

package/dist/components/menu/menu-accordion.js

@@ -179,5 +179,5 @@ export function MenuAccordionButton() {
     function slideMobilePanel() {
         window.moveMenu();
     }
-    return (_jsx("div", { className: "panelMenuButton", id: "panelMenuButton", onClick: slideMobilePanel, children: _jsx("span", { className: "hamburger textOutline", children: "|||" }) }));
+    return (_jsx("button", { className: "panelMenuButton", id: "panelMenuButton", onClick: slideMobilePanel, children: _jsx("span", { className: "hamburger text-outline", children: "|||" }) }));
 }

package/dist/components/menu/menu-simple.css

@@ -10,11 +10,11 @@
 	--accent2-color: #EEE;	
 }
 
-.menuWrapper {
+.menu-wrapper {
 	height: 100%;
 }
 
-.menuWrapper, .menuWrapper * {
+.menu-wrapper, .menu-wrapper * {
 	display: flex;
 	flex-direction: row;
 	flex-basis: 100%;
@@ -39,7 +39,7 @@
 	text-decoration: none;
 }
 
-.menuItem {
+.menu-item {
 	border: 1px solid white;
 	background: none;
 	width: auto;
@@ -50,15 +50,15 @@
 	flex-basis: content; /* each item is its own size instead of auto */
 }
 
-.menuItem:hover {
+.menu-item:hover {
 	background-color: var(--accent1-color);
 }
 
-.menuItem:not(:first-child) {
+.menu-item:not(:first-child) {
 	border-left: 2px solid var(--primary-color);
 }
 
-.menuItem a {
+.menu-item a {
 	/* this is the button */
 	background-color: var(--accent1-color);
 	font-weight: bold;
@@ -67,10 +67,10 @@
 	text-align: center;
 }
 
-.menuItem a.selected {
+.menu-item a.selected {
 	background-color: var(--secondary-color);
 }
 
-.menuItem a:hover {
+.menu-item a:hover {
 	background-color: var(--accent2-color);
 }

package/dist/components/menu/menu-simple.js

@@ -26,7 +26,7 @@ export function MenuSimple(props) {
         return myItems;
     }
     function styleSelectedMenuItem() {
-        const menuitems = document.querySelectorAll('.menuItem a');
+        const menuitems = document.querySelectorAll('.menu-item a');
         const currentURL = window.location.href;
         menuitems.forEach((menuitem) => {
             if (menuitem.href === currentURL) {
@@ -37,7 +37,7 @@ export function MenuSimple(props) {
     useEffect(() => {
         styleSelectedMenuItem();
     }, []);
-    return (_jsx("div", { className: "menuWrapper", children: _jsx("div", { className: "menu", id: "menu", children: _jsx("ul", { children: generateMenuItems() }) }) }));
+    return (_jsx("div", { className: "menu-wrapper", children: _jsx("div", { className: "menu", id: "menu", children: _jsx("ul", { children: generateMenuItems() }) }) }));
 }
 /* ========== MENU ITEM ========== */
 MenuSimpleItem.propTypes = {
@@ -50,7 +50,7 @@ MenuSimpleItem.propTypes = {
 export function MenuSimpleItem(props) {
     if (props.hidden)
         return null;
-    return (_jsx("li", { className: 'menuItem', children: props.target
+    return (_jsx("li", { className: 'menu-item', children: props.target
             ? _jsx("a", { href: props.path || undefined, target: props.target, children: props.name })
             : _jsx("a", { href: props.path || undefined, children: props.name }) }));
 }

package/dist/components/nerdjoke/nerdjoke.js

@@ -1,95 +1,103 @@
+"use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { getXHRData, generateURL } from '../utilities/api';
-import './nerdjoke.css';
-import '../../css/pixelated.grid.scss';
-/*
-TODO: #21 NerdJoke Component - Convert to TypeScript
-*/
+import { useCallback, useEffect, useRef, useState } from "react";
+import PropTypes from "prop-types";
+import { getXHRData, generateURL } from "../utilities/api";
+import "../../css/pixelated.grid.scss";
+import "./nerdjoke.css";
 const debug = false;
-export class NerdJoke extends Component {
-    constructor(props) {
-        super(props);
-        this.TIME_LIMIT = 15;
-        this.timePassed = 0;
-        this.timePaused = false;
-        this.timeLeft = this.TIME_LIMIT;
-        this.timerInterval = null;
-        this.jokeInterval = null;
-        this.state = {
-            joke: {
-                question: '',
-                answer: ''
-            }
-        };
-    }
-    loadJoke = () => {
+const TIME_LIMIT = 15;
+NerdJoke.propTypes = {};
+export function NerdJoke( /* props: NerdJokeType */) {
+    const [joke, setJoke] = useState({ question: "", answer: "" });
+    const timerIntervalRef = useRef(null);
+    const jokeIntervalRef = useRef(null);
+    const timePassedRef = useRef(0);
+    const timePausedRef = useRef(false);
+    const timeLeftRef = useRef(TIME_LIMIT);
+    const formatTimeLeft = useCallback((time) => {
+        if (debug)
+            console.log("Formatting Time Left");
+        const minutes = Math.floor(time / 60);
+        const seconds = time % 60;
+        const formattedSeconds = seconds < 10 ? `0${seconds}` : `${seconds}`;
+        return `${minutes}:${formattedSeconds}`;
+    }, []);
+    const updateTimerDisplay = useCallback(() => {
+        if (debug)
+            console.log("Updating Timer Display");
+        const label = document.getElementById("jokeTimerLabel");
+        if (label) {
+            label.innerHTML = formatTimeLeft(timeLeftRef.current);
+        }
+        const elapsedPath = document.getElementById("jokeTimerPathElapsed");
+        if (elapsedPath) {
+            const myWidth = (((1 / TIME_LIMIT) * timeLeftRef.current) * 100) + "%";
+            elapsedPath.style.width = myWidth;
+        }
+    }, [formatTimeLeft]);
+    const loadJoke = useCallback(() => {
         if (debug)
             console.log("Loading Joke");
-        this.timePassed = 0;
-        this.timeLeft = this.TIME_LIMIT;
-        this.timerInterval = null;
-        clearInterval(this.jokeInterval);
-        this.jokeInterval = setInterval(() => {
-            if (!this.timePaused) {
-                this.loadJoke();
+        timePassedRef.current = 0;
+        timeLeftRef.current = TIME_LIMIT;
+        timerIntervalRef.current = null;
+        if (jokeIntervalRef.current) {
+            clearInterval(jokeIntervalRef.current);
+        }
+        jokeIntervalRef.current = setInterval(() => {
+            if (!timePausedRef.current) {
+                loadJoke();
             }
-        }, this.TIME_LIMIT * 1000);
-        const myURL = 'https://vvqyc1xpw6.execute-api.us-east-2.amazonaws.com/prod/nerdjokes?';
-        const myURLProps = { command: '%2Fnerdjokes', text: 'getjokejson' };
-        const myMethod = 'GET';
+        }, TIME_LIMIT * 1000);
+        const myURL = "https://vvqyc1xpw6.execute-api.us-east-2.amazonaws.com/prod/nerdjokes?";
+        const myURLProps = { command: "%2Fnerdjokes", text: "getjokejson" };
+        const myMethod = "GET";
         getXHRData(generateURL(myURL, myURLProps), myMethod, (jokeData) => {
             const myJokeData = jokeData;
-            this.setState({ joke: myJokeData });
+            setJoke(myJokeData);
         });
-    };
-    formatTimeLeft(time) {
-        if (debug)
-            console.log("Formatting Time Left");
-        const minutes = Math.floor(time / 60);
-        let seconds = time % 60;
-        if (seconds < 10) {
-            seconds = `0${seconds}`;
-        }
-        return `${minutes}:${seconds}`;
-    }
-    ;
-    startTimer() {
+    }, []);
+    const startTimer = useCallback(() => {
         if (debug)
             console.log("Starting Timer");
-        this.timerInterval = setInterval(() => {
-            if (!this.timePaused) {
-                this.timePassed = this.timePassed += 1;
-                this.timeLeft = this.TIME_LIMIT - this.timePassed + 1;
-                const myWidth = (((1 / this.TIME_LIMIT) * this.timeLeft) * 100) + '%';
-                document.getElementById('jokeTimerLabel').innerHTML = this.formatTimeLeft(this.timeLeft);
-                document.getElementById('jokeTimerPathElapsed').style.width = myWidth;
+        if (timerIntervalRef.current) {
+            clearInterval(timerIntervalRef.current);
+        }
+        timerIntervalRef.current = setInterval(() => {
+            if (!timePausedRef.current) {
+                timePassedRef.current += 1;
+                timeLeftRef.current = TIME_LIMIT - timePassedRef.current + 1;
+                updateTimerDisplay();
             }
         }, 1000);
-    }
-    ;
-    pauseTimer() {
+    }, [updateTimerDisplay]);
+    const pauseTimer = () => {
         if (debug)
             console.log("Pausing Timer");
-        this.timePaused = !this.timePaused;
-    }
-    ;
-    componentDidMount() {
-        if (debug)
-            console.log("Component is Mounted");
-        this.loadJoke();
-        this.startTimer();
-    }
-    render() {
-        return (_jsx("div", { className: "nerdJoke", children: _jsxs("div", { className: "row-12col", children: [_jsx("div", { className: "grid-s1-e5", children: _jsx("div", { className: "left", children: _jsx(JokeButton, { clickFunction: this.pauseTimer, buttonText: "Pause ||  / Play >" }) }) }), _jsx("div", { className: "grid-s9-e13", children: _jsx("div", { className: "right", children: _jsx(JokeButton, { clickFunction: this.loadJoke, buttonText: "Next Joke ->" }) }) }), _jsx("div", { className: "jokeTimer grid-s1-e13", children: _jsxs("div", { className: "row-12col", children: [_jsx("div", { className: "grid-s1-e11", children: _jsx("svg", { className: "jokeTimerSvg", xmlns: "http://www.w3.org/2000/svg", children: _jsx("rect", { id: "jokeTimerPathElapsed" }) }) }), _jsx("div", { className: "grid-s11-e13 center", id: "jokeTimerLabel", children: this.formatTimeLeft(this.timeLeft) })] }) }), _jsxs("div", { className: "jokeText grid-s1-e13", children: [_jsxs("div", { children: [_jsx("span", { className: "label", children: "Q: " }), _jsxs("span", { className: "question", children: [" ", this.state.joke.question, " "] })] }), _jsxs("div", { children: [_jsx("span", { className: "label", children: "A: " }), _jsxs("span", { className: "answer", children: [" ", this.state.joke.answer, " "] })] })] })] }) }));
-    }
-}
-/* ========== JOKE BUTTON ========== */
-function JokeButton(props) {
-    return (_jsx("div", { className: 'jokeButton', onClick: props.clickFunction, children: props.buttonText }));
+        timePausedRef.current = !timePausedRef.current;
+    };
+    useEffect(() => {
+        loadJoke();
+        startTimer();
+        return () => {
+            if (timerIntervalRef.current) {
+                clearInterval(timerIntervalRef.current);
+            }
+            if (jokeIntervalRef.current) {
+                clearInterval(jokeIntervalRef.current);
+            }
+        };
+    }, [loadJoke, startTimer]);
+    return (_jsx("div", { className: "nerdJoke", children: _jsxs("div", { className: "row-12col", children: [_jsx("div", { className: "grid-s1-e5", children: _jsx("div", { className: "left", children: _jsx(JokeButton, { clickFunction: pauseTimer, buttonText: "Pause ||  / Play >" }) }) }), _jsx("div", { className: "grid-s9-e13", children: _jsx("div", { className: "right", children: _jsx(JokeButton, { clickFunction: loadJoke, buttonText: "Next Joke ->" }) }) }), _jsx("div", { className: "jokeTimer grid-s1-e13", children: _jsxs("div", { className: "row-12col", children: [_jsx("div", { className: "grid-s1-e11", children: _jsx("svg", { className: "jokeTimerSvg", xmlns: "http://www.w3.org/2000/svg", children: _jsx("rect", { id: "jokeTimerPathElapsed" }) }) }), _jsx("div", { className: "grid-s11-e13 center", id: "jokeTimerLabel", children: formatTimeLeft(timeLeftRef.current) })] }) }), _jsxs("div", { className: "jokeText grid-s1-e13", children: [_jsxs("div", { children: [_jsx("span", { className: "label", children: "Q: " }), _jsxs("span", { className: "question", children: [" ", joke.question, " "] })] }), _jsxs("div", { children: [_jsx("span", { className: "label", children: "A: " }), _jsxs("span", { className: "answer", children: [" ", joke.answer, " "] })] })] })] }) }));
 }
 JokeButton.propTypes = {
     clickFunction: PropTypes.func.isRequired,
-    buttonText: PropTypes.string.isRequired
+    buttonText: PropTypes.string.isRequired,
 };
+function JokeButton(props) {
+    /* <div className="jokeButton" onClick={props.clickFunction}>
+            {props.buttonText}
+        </div> */
+    return (_jsx("button", { className: "jokeButton", onClick: props.clickFunction, children: props.buttonText }));
+}

package/dist/components/pagebuilder/components/PageBuilderUI.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
-import { PageSectionHeader } from '../../general/headers';
+import { PageSectionHeader } from '../../general/semantic';
 import { usePageBuilder } from '../lib/usePageBuilder';
 import { ComponentSelector } from '../components/ComponentSelector';
 import { ComponentPropertiesForm } from '../components/ComponentPropertiesForm';

package/dist/components/pagebuilder/components/PageEngine.js

@@ -53,22 +53,29 @@ export function PageEngine(props) {
         }
         // Edit mode: Wrap with hover effect and action buttons
         const isSelected = selectedPath === currentPath;
+        const handleMouseEnter = (currentTarget, event) => {
+            if (event.target === event.currentTarget || !currentTarget.querySelector('.pagebuilder-component-wrapper:hover')) {
+                document.querySelectorAll('.pagebuilder-component-wrapper.hover-active').forEach(el => {
+                    el.classList.remove('hover-active');
+                });
+                currentTarget.classList.add('hover-active');
+            }
+            event.stopPropagation();
+        };
+        const handleMouseLeave = (currentTarget, event) => {
+            const relatedTarget = (event.relatedTarget || event.relatedTarget);
+            if (!relatedTarget || !currentTarget.contains(relatedTarget)) {
+                currentTarget.classList.remove('hover-active');
+            }
+        };
         return (_jsxs("div", { className: `pagebuilder-component-wrapper ${isSelected ? 'selected' : ''}`, onMouseOver: (e) => {
-                if (e.target === e.currentTarget || !e.currentTarget.querySelector('.pagebuilder-component-wrapper:hover')) {
-                    // Remove hover-active from all wrappers
-                    document.querySelectorAll('.pagebuilder-component-wrapper.hover-active').forEach(el => {
-                        el.classList.remove('hover-active');
-                    });
-                    // Add to current
-                    e.currentTarget.classList.add('hover-active');
-                }
-                e.stopPropagation();
+                handleMouseEnter(e.currentTarget, e);
             }, onMouseOut: (e) => {
-                const relatedTarget = e.relatedTarget;
-                // Only remove if leaving to somewhere outside this wrapper entirely
-                if (!e.currentTarget.contains(relatedTarget)) {
-                    e.currentTarget.classList.remove('hover-active');
-                }
+                handleMouseLeave(e.currentTarget, e);
+            }, onFocus: (e) => {
+                handleMouseEnter(e.currentTarget, e);
+            }, onBlur: (e) => {
+                handleMouseLeave(e.currentTarget, e);
             }, children: [element, _jsxs("div", { className: "pagebuilder-actions", children: [_jsxs("div", { className: "move-buttons", children: [_jsx("button", { className: "move-btn move-up", onClick: (e) => {
                                         e.stopPropagation();
                                         onMoveUp?.(currentPath);

package/dist/components/pagebuilder/lib/componentMap.js

@@ -1,16 +1,16 @@
-import { PageHeader, PageSectionHeader } from "../../general/headers";
+import { PageTitleHeader, PageSectionHeader } from "../../general/semantic";
 import { Callout } from "../../callout/callout";
-import { PageSection, GridItem, FlexItem } from "../../general/layout";
+import { PageSection, PageGridItem, PageFlexItem } from "../../general/semantic";
 /**
  * Component registry and constants
  */
 export const componentMap = {
-    "Page Header": PageHeader,
+    "Page Title Header": PageTitleHeader,
     "Page Section Header": PageSectionHeader,
     "Callout": Callout,
     "Page Section": PageSection,
-    "Grid Item": GridItem,
-    "Flex Item": FlexItem,
+    "Grid Item": PageGridItem,
+    "Flex Item": PageFlexItem,
 };
 export const layoutComponents = [
     'Page Section',

package/dist/components/pagebuilder/lib/componentMetadata.js

@@ -7,7 +7,7 @@
  * runtime values for form generation.
  */
 import { variants, shapes, layouts, directions } from "../../callout/callout";
-import { layoutTypes, autoFlowValues, flexDirections, flexWraps, justifyContentValues, alignItemsValues } from "../../general/layout";
+import { layoutTypes, autoFlowValues, flexDirections, flexWraps, justifyContentValues, alignItemsValues } from "../../general/semantic";
 export const componentMetadata = {
     'Callout': {
         variant: {

package/dist/components/seo/404.css

@@ -1,25 +1,25 @@
 
-.fofBodyContainer {
+.fof-body-container {
     width: 100%;
     margin: 0 auto;
 }
 
-.fofBodyContainer h1 {
+.fof-body-container h1 {
     font-size: 2em;
 }
 
-.fofImageContainer {
+.fof-image-container {
     width: 80%;
     margin: 0 auto;
 }
 
-.fofImageContainer .fofImageWrapper {
+.fof-image-container .fof-image-wrapper {
     width: 100%;
     margin: 0 auto;
     overflow: hidden;
     text-align: center;
 }
 
-.fofImageContainer .fofImageWrapper img {
+.fof-image-container .fof-image-wrapper img {
     margin: 0 auto;
 }

package/dist/components/seo/404.js

@@ -2,9 +2,9 @@ import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-run
 import { useState, useEffect } from "react";
 import PropTypes from 'prop-types';
 // import { getCloudinaryRemoteFetchURL } from "../cms/cloudinary";
-import "./404.css";
 import { SmartImage } from "../cms/cloudinary.image";
 import { usePixelatedConfig } from "../config/config.client";
+import "./404.css";
 FourOhFour.propTypes = {
     images: PropTypes.array.isRequired,
 };
@@ -22,7 +22,7 @@ export function FourOhFour(props) {
     }, []);
     const config = usePixelatedConfig();
     if (randomIndex !== null && imageURL /* cloudinaryURL */ !== '') {
-        return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "fofBodyContainer", children: [_jsxs("h1", { className: "centered textOutline", children: ["404 - ", images[randomIndex].text] }), _jsx("div", { className: "centeredbutton", children: _jsx("a", { href: "/", target: "_self", rel: "noopener noreferrer", children: "Go Home" }) })] }), _jsx("div", { className: "fofImageContainer", children: _jsx("div", { className: "fofImageWrapper", children: _jsx(SmartImage, { src: imageURL, 
+        return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "fof-body-container", children: [_jsxs("h1", { className: "centered text-outline", children: ["404 - ", images[randomIndex].text] }), _jsx("div", { className: "centered-button", children: _jsx("a", { href: "/", target: "_self", rel: "noopener noreferrer", children: "Go Home" }) })] }), _jsx("div", { className: "fof-image-container", children: _jsx("div", { className: "fof-image-wrapper", children: _jsx(SmartImage, { src: imageURL, 
                             // src={cloudinaryURL} 
                             title: "Page Not Found - " + images[randomIndex].description, alt: "Page Not Found - " + images[randomIndex].description, cloudinaryEnv: config?.cloudinary?.product_env ?? undefined, cloudinaryDomain: config?.cloudinary?.baseUrl ?? undefined, cloudinaryTransforms: config?.cloudinary?.transforms ?? undefined }) }) })] }));
     }

package/dist/components/seo/googlemap.js

@@ -2,6 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import PropTypes from "prop-types";
 // https://developers.google.com/maps/documentation/embed/embedding-map
 GoogleMaps.propTypes = {
+    title: PropTypes.string,
     width: PropTypes.string,
     height: PropTypes.string,
     frameBorder: PropTypes.string,
@@ -11,5 +12,5 @@ GoogleMaps.propTypes = {
     parameters: PropTypes.string,
 };
 export function GoogleMaps(props) {
-    return (_jsx("div", { className: "gmap", suppressHydrationWarning: true, children: _jsx("iframe", { width: props.width || "600", height: props.height || "400", frameBorder: props.frameBorder || "0", style: props.style || { border: 0 }, referrerPolicy: "no-referrer-when-downgrade", src: `https://www.google.com/maps/embed/v1/${props.map_mode}?key=${props.api_key}&${props.parameters}`, allowFullScreen: true }) }));
+    return (_jsx("div", { className: "gmap", suppressHydrationWarning: true, children: _jsx("iframe", { title: props.title || "Google Map", width: props.width || "600", height: props.height || "400", frameBorder: props.frameBorder || "0", style: props.style || { border: 0 }, referrerPolicy: "no-referrer-when-downgrade", src: `https://www.google.com/maps/embed/v1/${props.map_mode}?key=${props.api_key}&${props.parameters}`, allowFullScreen: true }) }));
 }

package/dist/components/seo/googlesearch.css

@@ -1,4 +1,14 @@
 
+/* ========================================
+===========  GENERAL SEARCH    ============
+======================================== */
+
+#page-search {
+	min-height: 50px;
+}
+
+
+
 /* ========================================
 ============  GOOGLE SEARCH    ============
 ======================================== */
@@ -21,6 +31,7 @@ input.gsc-search-button, input.gsc-search-button:hover, input.gsc-search-button:
 
 input.gsc-input {
 	font-size: 1.0em !important;
+	background: none !important;
 }
 
 .gsc-control-cse {

package/dist/components/shoppingcart/ebay.css

@@ -66,18 +66,18 @@
 
 .ebayItemPhotoCarousel { 
 
-    .carouselContainer {
+    .carousel-container {
         background: none;
         border: none;
         height: 400px;
     }
 
-    .carouselCardsContainer {
+    .carousel-cards-container {
         height: 100%;
     }
 
-    .carouselButtons,
-    .carouselButton {
+    .carousel-buttons,
+    .carousel-button {
         display: inline-block;
     }
 
@@ -87,7 +87,7 @@
 	.ebayItemPhotoCarousel {
         height: 350px;
     }
-    .ebayItemPhotoCarousel .carouselContainer {
+    .ebayItemPhotoCarousel .carousel-container {
         height: 300px;
     }
 }

package/dist/components/shoppingcart/shoppingcart.css

@@ -6,7 +6,7 @@
     --do-nothing: true
 }
 
-.pixCart .calloutHeader {
+.pixCart .callout-header {
     text-align: left
 }
 

package/dist/components/{resume → structured}/resume.css

@@ -3,6 +3,10 @@
 ==========      RESUME       ==============
 ======================================== */
 
+[class*="grid"] {
+	padding: 10px;
+}
+
 .p-resume {
 	word-break: break-word;
 	line-height: 1.4;

package/dist/components/{resume → structured}/resume.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import PropTypes from "prop-types";
 import { format } from "date-fns";
-import "./resume.css";
-import "../../css/pixelated.grid.scss";
 import { usePixelatedConfig } from "../config/config.client";
 import { SmartImage } from "../cms/cloudinary.image";
+import "../../css/pixelated.grid.scss";
+import "./resume.css";
 /*
 Resume Microformat - https://microformats.org/wiki/h-resume
 Details Summary Expand Collapse - https://www.w3schools.com/tags/tag_details.asp
@@ -33,7 +33,7 @@ Resume.propTypes = {
     data: PropTypes.any.isRequired,
 };
 export function Resume(props) {
-    return (_jsx("section", { className: "p-resume", id: "resume-section", children: _jsx("div", { className: "section-container", children: _jsxs("div", { className: "row-12col", children: [_jsx("div", { className: "p-name grid-s1-e13", children: _jsx(ResumeName, { data: props.data.items[0].properties.name }) }), _jsxs("div", { className: "bigpad divider grid-s1-e4", children: [_jsx("div", { className: "p-contact", children: _jsx(ResumeContact, { title: "Contact Information", data: props.data.items[0].properties.contact }) }), _jsx("div", { className: "p-education", children: _jsx(ResumeEvents, { title: "Education", data: props.data.items[0].properties.education, dateFormat: "MM/yyyy", collapsible: false }) }), _jsx("div", { className: "p-skills", children: _jsx(ResumeSkills, { title: "Skills", data: props.data.items[0].properties.skills }) })] }), _jsxs("div", { className: "bigpad grid-s4-e13", children: [_jsx("div", { className: "p-summary", children: _jsx(ResumeSummary, { title: "Professional Summary", data: props.data.items[0].properties.summary }) }), _jsx("div", { className: "p-qualifications", children: _jsx(ResumeQualifications, { title: "Professional Qualifications", data: props.data.items[0].properties.qualifications }) }), _jsx("div", { className: "p-experience", children: _jsx(ResumeEvents, { title: "Work History", data: props.data.items[0].properties.experience, dateFormat: "MM/yyyy", collapsible: false }) }), _jsx("div", { className: "p-projects", children: _jsx(ResumeProjects, { title: "Projects", data: props.data.items[0].properties.experience, collapsible: true }) }), _jsx("div", { className: "p-volunteer", children: _jsx(ResumeEvents, { title: "Volunteer Work", data: props.data.items[0].properties.volunteer, dateFormat: "MM/yyyy", collapsible: true }) }), _jsx("div", { className: "p-certifications", children: _jsx(ResumeEvents, { title: "Certifications", data: props.data.items[0].properties.certifications, dateFormat: "MM/yyyy", collapsible: true }) }), _jsx("div", { className: "p-awards", children: _jsx(ResumeEvents, { title: "Honors & Awards", data: props.data.items[0].properties.awards, dateFormat: "MM/yyyy", collapsible: true }) }), _jsx("div", { className: "p-training", children: _jsx(ResumeEvents, { title: "Training & Conferences", data: props.data.items[0].properties.training, dateFormat: "MM/dd/yyyy", collapsible: true }) }), _jsx("div", { className: "p-references", children: _jsx(ResumeReferences, { title: "References", data: props.data.items[0].properties.references, collapsible: true }) })] })] }) }) }));
+    return (_jsx("section", { className: "p-resume", id: "resume-section", children: _jsx("div", { className: "section-container", children: _jsxs("div", { className: "row-12col", children: [_jsx("div", { className: "p-name grid-s1-e13", children: _jsx(ResumeName, { data: props.data.items[0].properties.name }) }), _jsxs("div", { className: "divider grid-s1-e4", children: [_jsx("div", { className: "p-contact", children: _jsx(ResumeContact, { title: "Contact Information", data: props.data.items[0].properties.contact }) }), _jsx("div", { className: "p-education", children: _jsx(ResumeEvents, { title: "Education", data: props.data.items[0].properties.education, dateFormat: "MM/yyyy", collapsible: false }) }), _jsx("div", { className: "p-skills", children: _jsx(ResumeSkills, { title: "Skills", data: props.data.items[0].properties.skills }) })] }), _jsxs("div", { className: "grid-s4-e13", children: [_jsx("div", { className: "p-summary", children: _jsx(ResumeSummary, { title: "Professional Summary", data: props.data.items[0].properties.summary }) }), _jsx("div", { className: "p-qualifications", children: _jsx(ResumeQualifications, { title: "Professional Qualifications", data: props.data.items[0].properties.qualifications }) }), _jsx("div", { className: "p-experience", children: _jsx(ResumeEvents, { title: "Work History", data: props.data.items[0].properties.experience, dateFormat: "MM/yyyy", collapsible: false }) }), _jsx("div", { className: "p-projects", children: _jsx(ResumeProjects, { title: "Projects", data: props.data.items[0].properties.experience, collapsible: true }) }), _jsx("div", { className: "p-volunteer", children: _jsx(ResumeEvents, { title: "Volunteer Work", data: props.data.items[0].properties.volunteer, dateFormat: "MM/yyyy", collapsible: true }) }), _jsx("div", { className: "p-certifications", children: _jsx(ResumeEvents, { title: "Certifications", data: props.data.items[0].properties.certifications, dateFormat: "MM/yyyy", collapsible: true }) }), _jsx("div", { className: "p-awards", children: _jsx(ResumeEvents, { title: "Honors & Awards", data: props.data.items[0].properties.awards, dateFormat: "MM/yyyy", collapsible: true }) }), _jsx("div", { className: "p-training", children: _jsx(ResumeEvents, { title: "Training & Conferences", data: props.data.items[0].properties.training, dateFormat: "MM/dd/yyyy", collapsible: true }) }), _jsx("div", { className: "p-references", children: _jsx(ResumeReferences, { title: "References", data: props.data.items[0].properties.references, collapsible: true }) })] })] }) }) }));
 }
 ResumeName.propTypes = {
     data: PropTypes.any.isRequired,

package/dist/components/{timeline → structured}/timeline.css

@@ -25,7 +25,7 @@
 }
 
 /* Container around content */
-.timelineContainer {
+.timeline-container {
   padding: 10px 40px;
   position: relative;
   background-color: inherit;
@@ -33,7 +33,7 @@
 }
 
 /* The circles on the timeline */
-.timelineContainer::after {
+.timeline-container::after {
   content: '';
   position: absolute;
   width: 25px;
@@ -47,25 +47,25 @@
 }
 
 @media screen and (max-width: 768px) {
-  .timelineContainer div[class*='grid-'] {
+  .timeline-container div[class*='grid-'] {
     grid-column: 1 / -1;
   }
 }
 
 /* Place the container to the left */
-.timelineleft {
+.timeline-left {
   left: 0;
   padding-left: 10px;
 }
 
 /* Place the container to the right */
-.timelineright {
+.timeline-right {
   left: 50%;
   padding-right: 10px;
 }
 
 /* Add arrows to the left container (pointing right) */
-.timelineleft::before {
+.timeline-left::before {
   content: " ";
   height: 0;
   position: absolute;
@@ -79,7 +79,7 @@
 }
 
 /* Add arrows to the right container (pointing left) */
-.timelineright::before {
+.timeline-right::before {
   content: " ";
   height: 0;
   position: absolute;
@@ -93,12 +93,12 @@
 }
 
 /* Fix the circle for containers on the right side */
-.timelineright::after {
+.timeline-right::after {
   left: -16px;
 }
 
 /* The actual content */
-.timelineContent {
+.timeline-content {
   padding: 10px;
   background-color: #EEE;
   position: relative;
@@ -113,14 +113,14 @@
   }
   
   /* Full-width containers */
-  .timelineContainer {
+  .timeline-container {
   width: 100%;
   padding-left: 70px;
   padding-right: 25px;
   }
   
   /* Make sure that all arrows are pointing leftwards */
-  .timelineContainer::before {
+  .timeline-container::before {
   left: 60px;
   border: medium solid white;
   border-width: 10px 10px 10px 0;
@@ -128,12 +128,12 @@
   }
 
   /* Make sure all circles are at the same spot */
-  .timelineleft::after, .timelineright::after {
+  .timeline-left::after, .timeline-right::after {
   left: 15px;
   }
   
   /* Make all right containers behave like the left ones */
-  .timelineright {
+  .timeline-right {
   left: 0%;
   }
-}
+}