@pixelated-tech/components 3.1.5 → 3.2.0

package/README.md

@@ -12,7 +12,7 @@
 <br />
 <div align="center">
   <a href="https://github.com/brianwhaley/pixelated-components">
-    <img src="images/bg6.gif" alt="Logo" width="80" height="80">
+    <img src="https://www.pixelated.tech/images/pix/pix-bg-512.jpg" alt="Logo" width="80" height="80">
   </a>
 
 <h3 align="center">Pixelated Components</h3>
@@ -45,7 +45,14 @@ This is a library of components I have found useful to build web sites quickly.
 * [![Next][Next.js]][Next-url]
 * [![React][React.js]][React-url]
 * [![Storybook][Storybook.js]][Storybook-url]
+* [![Calendly][Calendly.com]][Calendly-url]
 * [![Contentful][Contentful.com]][Contentful-url]
+* [![Cloudinary][Cloudinary.com]][Cloudinary-url]
+* [![Flickr][Flickr.com]][Flickr-url]
+* [![Gravatar][Gravatar.com]][Gravatar-url]
+* [![Hubspot][Hubspot.com]][Hubspot-url]
+* [![Instagram][Instagram.com]][Instagram-url]
+* [![PayPal][PayPal.com]][PayPal-url]
 * [![Wordpress][Wordpress.com]][Wordpress-url]
 * [![Github][Github.com]][Github-url]
 * [![npm][npm.org]][npm-url]
@@ -53,7 +60,6 @@ This is a library of components I have found useful to build web sites quickly.
 
 
 
-
 <!-- GETTING STARTED -->
 ## Getting Started
 
@@ -75,47 +81,44 @@ To get a local copy up and running follow these simple example steps.
 ## Usage
 
 Components to help build websites quicker:
+1. Centralized 404 Error Page
 1. Buzzword Bingo Cards
-1. Page Callouts - Large and Small
+1. Page Callouts
 1. Image Carousel - Page, Header, and Simple
+1. Calendly Scheduling Integration
+1. Cloudinary Remote Fetch Optimization Integration
+1. SmartImage Component with Cloudianry and Next Imgegration
+1. Centralized Configuration Management
 1. Contentful CMS Integration
+1. CSS Preload for Page Performance
 1. eBay Store Listings
+1. Flickr Image API Integration
 1. Form Components and Form Builder
-1. Google Search and Google Analytics Integration
-1. Markdown to HTMl Engine
+1. Google Analytics, Map, and Search Integration
+1. Gravatar Card Integration
+1. Page and Page Section Header Components
+1. Hubspot Calendar and Form Integration
+1. Instagram Image Fetch Integration
+1. Loading and ToggleLoading Component
+1. Markdown to HTML Engine
 1. Menu Components - Simple and Accordion
 1. Metadata Injection from Route JSON file
+1. Centralized MicroInteractions
 1. Modal Dialogs
 1. NerdJokes Integration
+1. PageBuilder and PageNegine with JSON, integration with Contentful
+1. Page Section and Page Section Grid / Flex Item Layout Components
+1. panel Component, also usable with Accordion Menu
 1. Recipe XML MicroFormat Engine
 1. Resume MicroFormat Engine
+1. Shopping Cart functionality with eBay and PayPal Integration
 1. Sitemap.XML dynamic generation from Route JSON file
 1. Social Card Engine
 1. Table Components
+1. Image Tiles Component
+1. Wordpress Blog Post Integration
 1. Other Utilities
 
-### Google Reviews (server-side)
-- Requires: `GOOGLE_MAPS_API_KEY` (or use the built-in hard-coded key during testing).
-- Import: `import { getGoogleReviewsByCompanyName } from 'pixelated-components';`
-- Example:
-
-```
-const { place, reviews } = await getGoogleReviewsByCompanyName({
-  companyName: 'PixelVivid',
-  language: 'en',
-  near: { lat: 32.2163, lng: -80.7526 },
-  radiusMeters: 50000,
-  region: 'us',
-  type: 'point_of_interest',
-  maxReviews: 5,
-});
-```
-
-- Tips:
-  - Prefer `near` + `radiusMeters` for better disambiguation.
-  - If results return 0, try adjusting `region` or `type`, or use the exact business name.
-
-
 
 
 <!-- ROADMAP -->
@@ -124,10 +127,7 @@ const { place, reviews } = await getGoogleReviewsByCompanyName({
 - [ ] LinkedIn Recommendations Integration
 - [ ] eBay Feedback Integration
 - [ ] Yelp Recommendations integration
-- [ ] Calendly Integration
 - [ ] Instagram Image Integration for Carousels
-- [ ] Expanding menu based on 
-- [ ] eCommerce Features + Paypal ( or Stripe, Square)
 - [ ] Shopify Integration
 - [ ] Quickbooks Integration
 - [ ] Buffer Integration (or Sendible, Sprout Social, Hootsuite)
@@ -209,23 +209,44 @@ Project Link: [https://github.com/brianwhaley/pixelated-components](https://gith
 
 [product-screenshot]: images/screenshot.png
 
+[Calendly.com]: https://img.shields.io/badge/Calendly-006bff
+[Calendly-url]: https://cloudinary.com
+
+[Cloudinary.com]: https://img.shields.io/badge/Cloudinary-3448C5?style=for-the-badge&logo=cloudinary&logoColor=white
+[Cloudinary-url]: https://cloudinary.com
+
+[Contentful.com]: https://img.shields.io/badge/Contentful-2478CC?logo=contentful&logoColor=fff
+[Contentful-url]: https://contentful.com
+
+[Flickr.com]: https://img.shields.io/static/v1?style=for-the-badge&message=Flickr&color=0063DC&logo=Flickr&logoColor=FFFFFF
+[Flickr-url]: https://flickr.com
+
+[GitHub.com]: https://img.shields.io/badge/GitHub-%23121011.svg?logo=github&logoColor=white
+[Github-url]: https://www.github.com
+
+[Gravatar.com]: https://img.shields.io/badge/Gravatar-1d4fc4
+[Gravatar-url]: https://www.github.com
+
+[Hubspot.com]: https://img.shields.io/badge/HubSpot-YES-brightgreen?style=plastic&logo=hubspot
+[Hubspot-url]: https://www.github.com
+
+[Instagram.com]: https://img.shields.io/badge/Instagram-E4405F?style=for-the-badge&logo=instagram&logoColor=white
+[Instagram-url]: https://www.github.com
+
 [Next.js]: https://img.shields.io/badge/next.js-000000?style=for-the-badge&logo=nextdotjs&logoColor=white
 [Next-url]: https://nextjs.org/
 
+[npm.org]: https://img.shields.io/badge/npm-CB3837?logo=npm&logoColor=fff
+[npm-url]: https://www.npmjs.org
+
+[PayPal.js]: https://img.shields.io/badge/PayPal-Support_Us-003087?logo=paypal&logoColor=fff
+[PayPal-url]: https://reactjs.org/
+
 [React.js]: https://img.shields.io/badge/React-20232A?style=for-the-badge&logo=react&logoColor=61DAFB
 [React-url]: https://reactjs.org/
 
 [Storybook.js]: https://img.shields.io/badge/Storybook-FF4785?logo=storybook&logoColor=white
 [Storybook-url]: https://storybook.js.org
 
-[Contentful.com]: https://img.shields.io/badge/Contentful-2478CC?logo=contentful&logoColor=fff
-[Contentful-url]: https://contentful.com
-
 [WordPress.com]: https://img.shields.io/badge/WordPress-%2321759B.svg?logo=wordpress&logoColor=white
 [Wordpress-url]: http://www.wordpress.com
-
-[npm.org]: https://img.shields.io/badge/npm-CB3837?logo=npm&logoColor=fff
-[npm-url]: https://www.npmjs.org
-
-[GitHub.com]: https://img.shields.io/badge/GitHub-%23121011.svg?logo=github&logoColor=white
-[Github-url]: https://www.github.com

package/dist/components/callout/callout.js

@@ -51,25 +51,26 @@ export function Callout({ variant = 'default', boxShape = "squircle", layout = "
 cloudinaryDomain,
 cloudinaryTransforms */  }) {
     const target = url && url.substring(0, 4).toLowerCase() === 'http' ? '_blank' : '_self';
-    const body = _jsxs("div", { className: "calloutBody", children: [(title) ? _jsx(CalloutHeader, { title: title, url: url, target: target }) : null, (subtitle) ? _jsx("div", { className: "calloutSubtitle", children: _jsx("h3", { children: subtitle }) }) : null, content ? _jsx("div", { className: "calloutContent", children: _jsx(_Fragment, { children: content }) }) : null, url && buttonText
+    const friendlyTitle = title ? title.toLowerCase().replace(/\s+/g, '-') : undefined;
+    const body = _jsxs("div", { className: "callout-body", children: [(title) ? _jsx(CalloutHeader, { title: title, url: url, target: target }) : null, (subtitle) ? _jsx("div", { className: "callout-subtitle", children: _jsx("h3", { children: subtitle }) }) : null, content ? _jsx("div", { className: "callout-content", children: _jsx(_Fragment, { children: content }) }) : null, url && buttonText
                 ? _jsx(CalloutButton, { title: buttonText, url: url, target: target })
                 : url && title
                     ? _jsx(CalloutButton, { title: title || "", url: url, target: target })
                     : null] });
     const config = usePixelatedConfig();
     const image = (img) ?
-        _jsx("div", { className: "calloutImage" + (imgShape ? " " + imgShape : ""), children: (url && !imgClick)
+        _jsx("div", { className: "callout-image" + (imgShape ? " " + imgShape : ""), children: (url && !imgClick)
                 ? _jsx("a", { href: url, target: target, rel: target == "_blank" ? "noopener noreferrer" : "", children: _jsx(SmartImage, { src: img, title: title ?? imgAlt ?? undefined, alt: imgAlt ?? title ?? "", aboveFold: aboveFold, cloudinaryEnv: config?.cloudinary?.product_env ?? undefined, cloudinaryDomain: config?.cloudinary?.baseUrl ?? undefined, cloudinaryTransforms: config?.cloudinary?.transforms ?? undefined, suppressHydrationWarning: true }) })
                 : (url && imgClick)
                     ? _jsx(SmartImage, { src: img, title: title ?? imgAlt ?? undefined, alt: imgAlt ?? title ?? "", onClick: (event) => imgClick(event, url), aboveFold: aboveFold, cloudinaryEnv: config?.cloudinary?.product_env ?? undefined, cloudinaryDomain: config?.cloudinary?.baseUrl ?? undefined, cloudinaryTransforms: config?.cloudinary?.transforms ?? undefined, suppressHydrationWarning: true })
                     /* <img src={img} title={title ?? imgAlt ?? undefined} alt={imgAlt ?? title ?? undefined} onClick={(event) => imgClick(event, url)} /> */
                     : _jsx(SmartImage, { src: img, title: title ?? imgAlt ?? undefined, alt: imgAlt ?? title ?? "", aboveFold: aboveFold, cloudinaryEnv: config?.cloudinary?.product_env ?? undefined, cloudinaryDomain: config?.cloudinary?.baseUrl ?? undefined, cloudinaryTransforms: config?.cloudinary?.transforms ?? undefined, suppressHydrationWarning: true }) }) : null;
-    return (_jsx("div", { className: "callout" +
+    return (_jsx("div", { id: friendlyTitle ? "callout-" + friendlyTitle : undefined, className: "callout" +
             (variant ? " " + variant : "") +
             ((variant === 'boxed' || variant === 'boxed grid') && boxShape ? " " + boxShape : "") +
             (layout && variant !== 'split' ? " " + layout : "") +
             (direction && layout !== 'vertical' ? " " + direction : "") +
-            (variant && (variant === 'boxed grid' || variant === 'grid') && gridColumns ? ` calloutGrid-${gridColumns.left}-${gridColumns.right}` : ''), children: (direction === "right") ? _jsxs(_Fragment, { children: [body, image] }) : _jsxs(_Fragment, { children: [image, body] }) }));
+            (variant && (variant === 'boxed grid' || variant === 'grid') && gridColumns ? ` callout-grid-${gridColumns.left}-${gridColumns.right}` : ''), children: (direction === "right") ? _jsxs(_Fragment, { children: [body, image] }) : _jsxs(_Fragment, { children: [image, body] }) }));
 }
 /* ========== CALLOUT HEADER ========== */
 CalloutHeader.propTypes = {
@@ -78,9 +79,9 @@ CalloutHeader.propTypes = {
     target: PropTypes.string
 };
 export function CalloutHeader({ title, url, target }) {
-    return (_jsx("div", { className: "calloutHeader", children: (url)
-            ? _jsx("a", { href: url, target: target ? target : "", rel: target == "_blank" ? "noopener noreferrer" : "", children: _jsx("h2", { className: "calloutTitle", children: title }) })
-            : _jsx("h2", { className: "calloutTitle", children: title }) }));
+    return (_jsx("div", { className: "callout-header", children: (url)
+            ? _jsx("a", { href: url, target: target ? target : "", rel: target == "_blank" ? "noopener noreferrer" : "", children: _jsx("h2", { className: "callout-title", children: title }) })
+            : _jsx("h2", { className: "callout-title", children: title }) }));
 }
 /* ========== CALLOUT BUTTON ========== */
 CalloutButton.propTypes = {
@@ -89,7 +90,7 @@ CalloutButton.propTypes = {
     target: PropTypes.string
 };
 export function CalloutButton({ title, url, target }) {
-    return (_jsx("div", { className: "calloutButton", children: (url)
-            ? _jsx("button", { type: "button", className: "calloutButton", children: _jsx("a", { href: url || "", target: target || "", rel: target == "_blank" ? "noopener noreferrer" : "", children: title }) })
+    return (_jsx("div", { className: "callout-button", children: (url)
+            ? _jsx("button", { type: "button", className: "callout-button", children: _jsx("a", { href: url || "", target: target || "", rel: target == "_blank" ? "noopener noreferrer" : "", children: title }) })
             : null }));
 }

package/dist/components/callout/callout.scss

@@ -22,7 +22,7 @@
     padding: 0;
 }
 
-.callout .calloutImage {
+.callout .callout-image {
     overflow: hidden;
     width: 100%;
     background-color: white;
@@ -32,41 +32,41 @@
     /* aspect-ratio: 1/1;  */
 }
 
-.callout.vertical .calloutImage {
+.callout.vertical .callout-image {
     width: 70%;
     margin: 0 auto;
     aspect-ratio: 1;
 }
 
-.callout .calloutImage a,
-.callout .calloutImage img {
+.callout .callout-image a,
+.callout .callout-image img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     object-position: top;
 }
 
-.callout .calloutImage.square {
+.callout .callout-image.square {
     border-radius: 0%;
 }
 
-.callout .calloutImage.bevel {
+.callout .callout-image.bevel {
     clip-path: rect(1% 98% 98% 1% round 5%);
 }
 
-.callout .calloutImage.squircle {
+.callout .callout-image.squircle {
     clip-path: rect(1% 98% 98% 1% round 25%);
 }
 
-.callout .calloutImage.round {
+.callout .callout-image.round {
     clip-path: rect(1% 98% 98% 1% round 100%);
 }
 
-.callout .calloutBody {
+.callout .callout-body {
     flex-flow: column;
 }
 
-.callout .calloutBody > * {
+.callout .callout-body > * {
     padding: 5px 20px;
 }
 
@@ -75,58 +75,58 @@
     float: unset !important; /* OVERRIDE pixelated.global.css */
 }
 
-.callout.left .calloutBody > * {
+.callout.left .callout-body > * {
     text-align: left;
     margin-left: 0;
     margin-right: auto;
 }
 
-.callout.right .calloutBody > * {
+.callout.right .callout-body > * {
     text-align: right;
     margin-right: 0;
     margin-left: auto;
 }
 
-.callout .calloutHeader {
+.callout .callout-header {
     text-align: center;
     margin: 0 auto;
 }
 
-.callout .calloutHeader a {
+.callout .callout-header a {
     --do-nothing: true;
 }
 
-.callout .calloutHeader h2 {
+.callout .callout-header h2 {
     --do-nothing: true;
 }
 
-.callout .calloutTitle {
+.callout .callout-title {
     text-align: center;
 }
 
-.callout .calloutSubtitle {
+.callout .callout-subtitle {
     text-align: left;
 }
 
-.callout.vertical .calloutSubtitle {
+.callout.vertical .callout-subtitle {
     text-align: center;
     margin: 0 auto;
 }
 
-.callout .calloutSubtitle h3 {
+.callout .callout-subtitle h3 {
     padding: 0;
     --do-nothing: true;
 }
 
-.callout .calloutContent {
+.callout .callout-content {
     --do-nothing: true;
 }
 
-.callout .calloutButton { 
+.callout .callout-button { 
     --do-nothing: true;
 }
 
-.callout .calloutButton button { 
+.callout .callout-button button { 
     display: inline-block;
     max-width: 250px;
     margin: 10px auto !important;
@@ -142,7 +142,7 @@
     /* cursor: pointer */
 }
 
-.callout .calloutButton a {
+.callout .callout-button a {
     display: inline-block;
 }
 
@@ -174,19 +174,19 @@
     border-radius: 100%;
 }
 
-.callout.boxed .calloutImage {
+.callout.boxed .callout-image {
 	clip-path: none;
     aspect-ratio: 1/1;
     background-color: white;
     width: 100% !important;
 }
 
-.callout.boxed .calloutBody { 
+.callout.boxed .callout-body { 
     --do-nothing: true;
     padding: 5px 20px;
 }
 
-.callout.boxed.vertical .calloutBody { 
+.callout.boxed.vertical .callout-body { 
     --do-nothing: true;
     padding: 20px 0px;
 }
@@ -199,11 +199,11 @@
     padding: 0px;
 }
 
-.callout.full.vertical .calloutImage {
+.callout.full.vertical .callout-image {
     width: 100%;
 }
 
-.callout.full .calloutBody > * {
+.callout.full .callout-body > * {
     padding: 5px 5px;
 }
 
@@ -218,9 +218,9 @@
 
 @for $i from 1 through 11 {
     @for $k from 1 through 11 {
-        .calloutGrid-#{$i}-#{$k} { grid-template-columns: #{$i}fr #{$k}fr; }
+        .callout-grid-#{$i}-#{$k} { grid-template-columns: #{$i}fr #{$k}fr; }
         @media screen and (max-width: 480px) {
-			.calloutGrid-#{$i}-#{$k} { grid-template-columns: 1fr; }
+			.callout-grid-#{$i}-#{$k} { grid-template-columns: 1fr; }
 		}
     }
 }
@@ -242,15 +242,15 @@
 
 }
 
-.callout.grid .calloutImage img {
-    /* duplicate of .callout .calloutImage img */
+.callout.grid .callout-image img {
+    /* duplicate of .callout .callout-image img */
     width: 100%;
     height: 100%;
     object-fit: cover;
     object-position: top;
 }
 
-.callout.grid .calloutBody {
+.callout.grid .callout-body {
 	grid-auto-rows: min-content;
 }
 
@@ -264,12 +264,12 @@
     overflow: hidden;
 }
 
-.callout.overlay .calloutImage {
+.callout.overlay .callout-image {
     width: 100%;
     height: 100%;
 }
 
-.callout.overlay .calloutBody {
+.callout.overlay .callout-body {
     position: absolute;
     top: 50%;
     left: 50%;
@@ -287,12 +287,12 @@
     padding: 0px;
 }
 
-.callout.split .calloutImage,
-.callout.split .calloutBody {
+.callout.split .callout-image,
+.callout.split .callout-body {
     flex: 1;
 }
 
-.callout.split .calloutBody > * {
+.callout.split .callout-body > * {
     padding: 5px 20px;
 }
 
@@ -312,20 +312,20 @@
     .callout.grid {
 	    grid-template-columns: 1fr;
     }
-    .callout .calloutImage { 
+    .callout .callout-image { 
         width: 70%;
         margin: 0 auto;
     }
-    .callout.full .calloutImage,
-    .callout.split .calloutImage { 
+    .callout.full .callout-image,
+    .callout.split .callout-image { 
         width: 100%;
         margin: 0 auto;
     }
-    .callout .calloutBody > * { 
+    .callout .callout-body > * { 
         margin: 0 auto !important;
         text-align: center !important;
     }
-    .callout .calloutContent  { 
+    .callout .callout-content  { 
         text-align: left !important;
     }
 } 

package/dist/components/carousel/carousel.css

@@ -2,26 +2,26 @@
 ===============  CAROUSEL   ===============
 ======================================== */
 
-.carouselContainer {
+.carousel-container {
 	height: 600px;
     background: #FFF;
     border: 1px solid #AAA;
 }
-.carouselCardsContainer {
+.carousel-cards-container {
 	height: 550px;
 	position: relative;
     overflow: hidden;
 }
 @media screen and (max-width: 480px) {
-    .carouselContainer {
+    .carousel-container {
 		height: 350px;
 	}
-	.carouselCardsContainer {
+	.carousel-cards-container {
         height: 300px;
     }
 }
 
-#carouselCardsContainer {
+#carousel-cards-container {
 	--do-nothing: true;
 }
 
@@ -36,7 +36,7 @@
 	user-select: none;
 } */
 
-.carouselCardWrapper {
+.carousel-card-wrapper {
 	display: inline-block;
 	position: absolute;
 	top: 0;
@@ -49,19 +49,19 @@
 	overflow: hidden;
 }
 
-.carouselCard {
+.carousel-card {
 	width: 100%;
 	margin: 0 auto;
 	
 }
 
-/* .carouselCard {
+/* .carousel-card {
 	width: 100%;
 	height: 100%;
     margin: 0 auto;
 } */
 
-.carouselCardHeader {
+.carousel-card-header {
 	font-size: 1.5em;
 	font-weight: bold;
 	text-align: center;
@@ -69,7 +69,7 @@
 	width: 100%;
 }
 
-.carouselCardSubHeader {
+.carousel-card-subheader {
 	font-size: 1.1em;
 	font-weight: bold;
 	text-align: center;
@@ -77,12 +77,12 @@
 	width: 100%;
 }
 
-.carouselCardBody {
+.carousel-card-body {
 	margin: 5px auto;
 	width: 90%;
 }
 
-.carouselCardImage {
+.carousel-card-image {
 	margin: 0 auto;
 	max-width: 100%;
 	max-height: 100%;
@@ -93,7 +93,7 @@
 	overflow: clip;
 }
 
-.carouselCardImage { 
+.carousel-card-image { 
 	img {
 		/* max-height: auto; 
 		max-width: 100%;
@@ -131,22 +131,24 @@
 
 }
 
-.carouselButtons {
+.carousel-buttons {
 	width: 100%;
 	height: 50px;
 	text-align: center;
 }
 
-.carouselButton {
+.carousel-button {
     font-size: 24px;
 	z-index: 900;
     padding: 5px;
 	display: inline-block;
+	border: none;
+    background-color: transparent;
 }
 
-.carouselArrow,
-.carouselArrowLeft, 
-.carouselArrowRight {
+.carousel-arrow,
+.carousel-arrow-left, 
+.carousel-arrow-right {
 	position: absolute;
     font-size: 24px;
 	top: 50%;
@@ -155,15 +157,15 @@
     padding: 5px;
 }
 
-.carouselArrowLeft {
+.carousel-arrow-left {
 	left: 0; 
 }
 
-.carouselArrowRight {
+.carousel-arrow-right {
 	right: 0;
 } 
 
-.carouselDetails {
+.carousel-details {
 	position: absolute;
 	bottom: 20px;
 	z-index: 1000;
@@ -172,7 +174,7 @@
 	text-align: center;
 }
 
-.carouselLoading {
+.carousel-loading {
     column-span: all;
 	text-align: center;
 }

package/dist/components/carousel/carousel.drag.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 /*
     if (props.draggable && props.draggable === true) {
         if (debug) console.log('CarouselSimple: Dragging enabled');
-        DragHandler(cardIndex, 'carouselCardWrapper', nextCard, previousCard);
+        DragHandler(cardIndex, 'carousel-card-wrapper', nextCard, previousCard);
     } else {
         if (debug) console.log('CarouselSimple: Dragging disabled');
     }