@axos-web-dev/shared-components 0.0.6 → 0.0.8

package/dist/CallToActionBar/CallToActionBar.interface.d.ts

@@ -1,20 +1,19 @@
 import { ChevronProps } from '../Chevron/Chevron.interface';
 import { ReactNode } from "react";
-export type large = "large" | "lg";
-export type medium = "medium" | "md";
-export type small = "small" | "sm";
 export interface CallToActionBarInterface {
     id?: string;
-    image_overlap: boolean;
-    bannerSize: large | medium | small;
-    image: {
-        src: string;
-        alt?: string;
-    };
+    bannerSize: "Large" | "Medium" | "Small";
+    image: ImageInterface;
     imageMobileView: boolean;
-    imagePlacement: "left" | "right";
-    bannerBehavior: "fixed" | "sticky" | "scroll";
+    imagePlacement: "Left" | "Right";
+    bannerBehavior: "Fixed" | "Fixed Overlap" | "Sticky" | "Scroll";
     headline: string | ReactNode;
     bodyCopy: string | ReactNode;
     callToActionRow: ChevronProps[];
 }
+export interface ImageInterface {
+    src: string;
+    alt?: string;
+    width: number;
+    height: number;
+}

package/dist/CallToActionBar/index.js

@@ -3,16 +3,16 @@ import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { Button } from "../Button/index.js";
 import { Chevron } from "../Chevron/index.js";
 import { getVariant } from "../utils/getVariant.js";
+import clsx from "clsx";
 import { useState, useEffect } from "react";
 import { returnImageDimensions, imageOrientation, getBannerSizeClassName } from "../utils/ctaOptions.js";
 import { sticky_banner, is_sticky, cta, cta_image_section, cta_image_overlap, cta_body_section, cta_text, ctas_section } from "./CallToActionBar.css.js";
 const CallToActionBar = ({
-  image_overlap,
   bannerSize,
   image,
   imageMobileView,
   imagePlacement,
-  bannerBehavior = "fixed",
+  bannerBehavior = "Fixed",
   headline,
   bodyCopy,
   callToActionRow,
@@ -22,16 +22,18 @@ const CallToActionBar = ({
   const [imageSize, setImageSize] = useState({ width: "0px", height: "0px" });
   const banner_size = bannerSize.toLowerCase();
   const row_reverse = imagePlacement.toLowerCase() === "right" ? true : false;
+  const banner_behavior = bannerBehavior.toLocaleLowerCase();
+  const image_overlap = bannerBehavior.toLowerCase().includes("overlap");
   useEffect(() => {
     var _a;
     const domRectStickyEl = (_a = document == null ? void 0 : document.querySelector(`.${sticky_banner}`)) == null ? void 0 : _a.getBoundingClientRect();
     if (domRectStickyEl) {
       setstickyTop(domRectStickyEl.top);
     }
-    setImageSize(
-      returnImageDimensions(banner_size, imageOrientation(image.src))
-    );
-  }, [image.src, banner_size]);
+    if (image) {
+      setImageSize(returnImageDimensions(banner_size, imageOrientation(image)));
+    }
+  }, [image, banner_size]);
   useEffect(() => {
     if (!stickyTop)
       return;
@@ -59,63 +61,80 @@ const CallToActionBar = ({
       className: `${cta} ${getBannerSizeClassName(
         banner_size,
         image_overlap
-      )} ${bannerBehavior.toLowerCase() === "sticky" ? sticky_banner : ""} section_spacer`,
-      children: /* @__PURE__ */ jsxs("div", { className: "containment flex middle", children: [
-        banner_size !== "sm" && !imageMobileView ? /* @__PURE__ */ jsx("div", { className: `${cta_image_section}`, children: /* @__PURE__ */ jsx(
-          "img",
-          {
-            src: image.src,
-            alt: "",
-            style: { ...imageSize },
-            className: `${image_overlap ? `${cta_image_overlap}` : ""}`
-          }
-        ) }) : null,
-        /* @__PURE__ */ jsxs(
-          "div",
-          {
-            className: `${cta_body_section} ${banner_size !== "lg" ? "flex middle" : ""}`,
-            style: row_reverse ? { flexDirection: "row-reverse" } : {},
-            children: [
-              /* @__PURE__ */ jsxs("div", { className: `${cta_text} mb_0`, children: [
-                headline && /* @__PURE__ */ jsx("h2", { className: "header_3", children: headline }),
-                banner_size === "lg" && bodyCopy && /* @__PURE__ */ jsx(Fragment, { children: bodyCopy })
-              ] }),
-              /* @__PURE__ */ jsx(
-                "div",
-                {
-                  className: `${ctas_section} flex text_center push_up_24`,
-                  style: banner_size === "sm" ? {
-                    flexShrink: 0,
-                    marginRight: `${row_reverse ? "40px" : "20px"}`,
-                    padding: 0
-                  } : {},
-                  children: callToActionRow.map(
-                    ({ id: id2, variant, displayText, targetUrl, type }) => type === "Button" ? /* @__PURE__ */ jsx(
-                      Button,
-                      {
-                        targetUrl,
-                        color: getVariant(variant),
-                        size: "medium",
-                        rounded: "medium",
-                        children: displayText
-                      },
-                      id2
-                    ) : /* @__PURE__ */ jsx(
-                      Chevron,
-                      {
-                        targetUrl,
-                        variant: getVariant(variant),
-                        children: displayText
-                      },
-                      id2
-                    )
+      )} ${banner_behavior === "sticky" ? sticky_banner : ""} section_spacer`,
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "containment flex middle",
+          style: !image || imageMobileView || banner_size === "small" ? { justifyContent: "center" } : {},
+          children: [
+            banner_size !== "small" && !imageMobileView && image ? /* @__PURE__ */ jsx("div", { className: `${cta_image_section}`, children: /* @__PURE__ */ jsx(
+              "img",
+              {
+                src: image.src,
+                alt: "",
+                style: { ...imageSize },
+                className: `${image_overlap ? `${cta_image_overlap}` : ""}`
+              }
+            ) }) : null,
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: `${cta_body_section} ${banner_size !== "large" ? "flex middle" : ""}`,
+                style: row_reverse ? { flexDirection: "row-reverse" } : {},
+                children: [
+                  /* @__PURE__ */ jsxs(
+                    "div",
+                    {
+                      className: clsx(
+                        cta_text,
+                        "mb_0",
+                        (imageMobileView || !image) && "text_center"
+                      ),
+                      children: [
+                        headline && /* @__PURE__ */ jsx("h2", { className: "header_3", children: headline }),
+                        banner_size === "large" && bodyCopy && /* @__PURE__ */ jsx(Fragment, { children: bodyCopy })
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      className: clsx(ctas_section, "flex", "text_center"),
+                      style: banner_size === "small" ? {
+                        flexShrink: 0,
+                        marginRight: `${row_reverse ? "40px" : "20px"}`,
+                        padding: 0
+                      } : {},
+                      children: callToActionRow.map(
+                        ({ id: id2, variant, displayText, targetUrl, type }) => type === "Button" ? /* @__PURE__ */ jsx(
+                          Button,
+                          {
+                            targetUrl,
+                            color: getVariant(variant),
+                            size: "medium",
+                            rounded: "medium",
+                            children: displayText
+                          },
+                          id2
+                        ) : /* @__PURE__ */ jsx(
+                          Chevron,
+                          {
+                            targetUrl,
+                            variant: getVariant(variant),
+                            children: displayText
+                          },
+                          id2
+                        )
+                      )
+                    }
                   )
-                }
-              )
-            ]
-          }
-        )
-      ] })
+                ]
+              }
+            )
+          ]
+        }
+      )
     },
     id
   );

package/dist/FooterDisclosure/FooterDisclosure.d.ts

@@ -1,5 +1,10 @@
-import { PropsWithChildren } from "react";
-export declare const FooterContent: (props: PropsWithChildren) => import("react/jsx-runtime").JSX.Element;
-export declare const FooterParagraph: (props: PropsWithChildren) => import("react/jsx-runtime").JSX.Element;
-export declare const FooterIcons: (props: PropsWithChildren) => import("react/jsx-runtime").JSX.Element;
-export declare const FooterDisclosure: (props: PropsWithChildren) => import("react/jsx-runtime").JSX.Element;
+import { CSSProperties, PropsWithChildren } from "react";
+type WithStyles = {
+    style?: CSSProperties;
+    className?: string;
+};
+export declare const FooterContent: (props: PropsWithChildren & WithStyles) => import("react/jsx-runtime").JSX.Element;
+export declare const FooterParagraph: (props: PropsWithChildren & WithStyles) => import("react/jsx-runtime").JSX.Element;
+export declare const FooterIcons: (props: PropsWithChildren & WithStyles) => import("react/jsx-runtime").JSX.Element;
+export declare const FooterDisclosure: (props: PropsWithChildren & WithStyles) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/FooterDisclosure/FooterDisclosure.js

@@ -1,16 +1,24 @@
 import { jsx } from "react/jsx-runtime";
+import clsx from "clsx";
 import { footerContent, footerParagraph, iconsContent, footerDisclosure } from "./FooterDisclosure.css.js";
 const FooterContent = (props) => {
-  return /* @__PURE__ */ jsx("div", { className: footerContent, children: props.children });
+  return /* @__PURE__ */ jsx("div", { className: clsx(footerContent, props.className), style: props.style, children: props.children });
 };
 const FooterParagraph = (props) => {
-  return /* @__PURE__ */ jsx("div", { className: footerParagraph, children: props.children });
+  return /* @__PURE__ */ jsx("div", { className: clsx(footerParagraph, props.className), style: props.style, children: props.children });
 };
 const FooterIcons = (props) => {
-  return /* @__PURE__ */ jsx("div", { className: iconsContent, children: props.children });
+  return /* @__PURE__ */ jsx("div", { className: clsx(iconsContent, props.className), style: props.style, children: props.children });
 };
 const FooterDisclosure = (props) => {
-  return /* @__PURE__ */ jsx("footer", { className: footerDisclosure(), children: props.children });
+  return /* @__PURE__ */ jsx(
+    "footer",
+    {
+      className: clsx(footerDisclosure(), props.className),
+      style: props.style,
+      children: props.children
+    }
+  );
 };
 export {
   FooterContent,

package/dist/Forms/RenderForm.d.ts

@@ -1,7 +1,7 @@
 import { PropsWithChildren } from "react";
 import { FormProps } from ".";
 export interface renderFormProps extends FormProps, PropsWithChildren {
-    formName?: string;
+    form?: string;
 }
 export declare const renderSwitch: (form: string | undefined, props: FormProps) => import("react/jsx-runtime").JSX.Element;
 export declare const RenderWebForm: (props: renderFormProps) => import("react/jsx-runtime").JSX.Element;

package/dist/Forms/RenderForm.js

@@ -11,7 +11,7 @@ const renderSwitch = (form = "Contact Form", props) => {
   }
 };
 const RenderWebForm = (props) => {
-  return /* @__PURE__ */ jsx(Fragment, { children: renderSwitch(props.formName, props) });
+  return /* @__PURE__ */ jsx(Fragment, { children: renderSwitch(props.form, props) });
 };
 export {
   RenderWebForm,

package/dist/Forms/ScheduleCall.d.ts

@@ -6,8 +6,8 @@ export interface FormProps extends PropsWithChildren {
         [index: string]: string;
     }) => void;
     icon?: boolean;
-    headline?: ReactNode;
-    disclosure?: ReactNode;
+    headline?: ReactNode | string;
+    disclosure?: ReactNode | string;
     variant?: QuaternaryTypes;
     validateEmail: (email: string) => Promise<boolean>;
     callToAction: Omit<ChevronProps, "targetUrl">;

package/dist/IconBillboard/IconBillboard.js

@@ -7,12 +7,13 @@ import { containerIconBillboard, layout, billboard_icon, content, headerIconBill
 const IconBillboard = (props) => {
   const {
     callToActionRow,
-    variant,
+    variant: fullVariant = "primary",
     side = false,
     items,
     headline,
     body
   } = props;
+  const variant = getVariant(fullVariant);
   return /* @__PURE__ */ jsxs("div", { className: containerIconBillboard({ variant }), children: [
     /* @__PURE__ */ jsxs("div", { className: layout({ side }), children: [
       /* @__PURE__ */ jsx("div", { className: billboard_icon, children: props.icon }),

package/dist/IconBillboard/IconBillboardSet.js

@@ -25,52 +25,61 @@ const IconBillboardSet = ({
       bodyCopy && /* @__PURE__ */ jsx(Fragment, { children: bodyCopy })
     ] }),
     /* @__PURE__ */ jsx("div", { className: section_container, children: iconBillboards.map(
-      ({ id, icon, headline: headline2, bodyCopy: bodyCopy2, bullets, callToActionRow }) => /* @__PURE__ */ jsxs("div", { className: containerIconBillboard({ variant }), children: [
-        /* @__PURE__ */ jsxs("div", { className: layout({ side }), children: [
-          icon && /* @__PURE__ */ jsx("div", { className: billboard_icon, children: /* @__PURE__ */ jsx(
-            "img",
-            {
-              src: icon == null ? void 0 : icon.src,
-              className: "img_fluid",
-              alt: icon == null ? void 0 : icon.alt
-            }
-          ) }),
-          /* @__PURE__ */ jsxs("div", { className: content, children: [
-            /* @__PURE__ */ jsxs("div", { className: headerIconBillboard, children: [
-              /* @__PURE__ */ jsx("div", { className: title({ variant }), children: headline2 }),
-              /* @__PURE__ */ jsx("div", { children: bodyCopy2 })
+      ({ id, icon, headline: headline2, bodyCopy: bodyCopy2, bullets, callToActionRow }) => /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: containerIconBillboard({
+            variant: getVariant(variant)
+          }),
+          children: [
+            /* @__PURE__ */ jsxs("div", { className: layout({ side }), children: [
+              icon && /* @__PURE__ */ jsx("div", { className: billboard_icon, children: /* @__PURE__ */ jsx(
+                "img",
+                {
+                  src: icon == null ? void 0 : icon.src,
+                  className: "img_fluid",
+                  alt: icon == null ? void 0 : icon.alt
+                }
+              ) }),
+              /* @__PURE__ */ jsxs("div", { className: content, children: [
+                /* @__PURE__ */ jsxs("div", { className: headerIconBillboard, children: [
+                  /* @__PURE__ */ jsx("div", { className: title({ variant }), children: headline2 }),
+                  /* @__PURE__ */ jsx("div", { children: bodyCopy2 })
+                ] }),
+                /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx("ul", { className: list, children: bullets.map((item) => /* @__PURE__ */ jsx(BulletItem, { id: item.id, children: item.copy }, item.id)) }) })
+              ] })
             ] }),
-            /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx("ul", { className: list, children: bullets.map((item) => /* @__PURE__ */ jsx(BulletItem, { id: item.id, children: item.copy }, item.id)) }) })
-          ] })
-        ] }),
-        callToActionRow && /* @__PURE__ */ jsx("div", { className: buttons, children: callToActionRow.map(
-          ({
-            id: id2,
-            variant: variant2,
-            displayText,
-            targetUrl,
-            type
-          }) => type === "Button" ? /* @__PURE__ */ jsx(
-            Button,
-            {
-              targetUrl,
-              color: getVariant(variant2),
-              size: "medium",
-              rounded: "medium",
-              children: displayText
-            },
-            id2
-          ) : /* @__PURE__ */ jsx(
-            Chevron,
-            {
-              targetUrl,
-              variant: getVariant(variant2),
-              children: displayText
-            },
-            id2
-          )
-        ) })
-      ] }, id)
+            callToActionRow && /* @__PURE__ */ jsx("div", { className: buttons, children: callToActionRow.map(
+              ({
+                id: id2,
+                variant: variant2,
+                displayText,
+                targetUrl,
+                type
+              }) => type === "Button" ? /* @__PURE__ */ jsx(
+                Button,
+                {
+                  targetUrl,
+                  color: getVariant(variant2),
+                  size: "medium",
+                  rounded: "medium",
+                  children: displayText
+                },
+                id2
+              ) : /* @__PURE__ */ jsx(
+                Chevron,
+                {
+                  targetUrl,
+                  variant: getVariant(variant2),
+                  children: displayText
+                },
+                id2
+              )
+            ) })
+          ]
+        },
+        id
+      )
     ) }),
     additionalDetails && /* @__PURE__ */ jsx("div", { className: section_text, children: /* @__PURE__ */ jsx(Fragment, { children: additionalDetails }) })
   ] });

package/dist/Modal/index.js

@@ -14,6 +14,7 @@ import "react";
 import "../IconBillboard/IconBillboard.css.js";
 /* empty css                                          */
 /* empty css                                          */
+import "clsx";
 /* empty css                                                    */
 import "../Carousel/index.js";
 /* empty css                                                                    */
@@ -26,7 +27,6 @@ import "../Forms/Forms.css.js";
 import "../Forms/SalesforceFieldsForm.js";
 import "@hookform/resolvers/zod";
 import "../Input/index.js";
-import "clsx";
 import "react-hook-form";
 /* empty css                                              */
 import "../ImageBillboard/ImageBillboard.css.js";

package/dist/assets/CallToActionBar/CallToActionBar.css

@@ -4,7 +4,7 @@
   color: var(--_1073cm8g);
 }
 ._1tdyl740 .containment {
-  height: -webkit-fit-content;
+  height: 100%;
 }
 ._1tdyl740 .flex {
   align-items: center;
@@ -52,7 +52,7 @@
 }
 ._1tdyl74c {
   position: relative;
-  top: -40px;
+  top: -20px;
 }
 ._1tdyl74d {
   gap: 24px;
@@ -76,6 +76,9 @@
 ._1tdyl74g .sc__btn {
   margin-left: 0;
 }
+._1tdyl746 ._1tdyl74g, ._1tdyl747 ._1tdyl74g {
+  margin-top: 24px;
+}
 @media screen and (max-width:1127px) {
   [class*=cta_section_lg] {
     max-height: 256px;

package/dist/assets/ImageBillboard/ImageBillboard.css

@@ -86,7 +86,6 @@
   object-fit: cover;
   aspect-ratio: 1 / 1;
   min-width: 600px;
-  max-height: 480px;
 }
 ._1m7m2an {
   padding: 32px 28px;

package/dist/utils/ctaOptions.d.ts

@@ -1,4 +1,5 @@
-export declare const imageOrientation: (image_url: string) => string;
+import { ImageInterface } from '../CallToActionBar/CallToActionBar.interface';
+export declare const imageOrientation: (image: ImageInterface) => string;
 export declare const getBannerSizeClassName: (size: string, overlap: boolean) => string;
 export declare const returnImageDimensions: (size: string, image_orientation: string) => {
     width: string;

package/dist/utils/ctaOptions.js

@@ -1,11 +1,9 @@
-import { cta_section_lg, cta_section_lg_overlap, cta_section_md, cta_section_md_overlap } from "../CallToActionBar/CallToActionBar.css.js";
-const imageOrientation = (image_url) => {
-  let orientation;
-  const img = new Image();
-  img.src = image_url;
-  if (img.naturalWidth > img.naturalHeight) {
+import { cta_section_lg, cta_section_lg_overlap, cta_section_md, cta_section_md_overlap, cta_section_sm } from "../CallToActionBar/CallToActionBar.css.js";
+const imageOrientation = (image) => {
+  let orientation = "landscape";
+  if (image.width > image.height) {
     orientation = "landscape";
-  } else if (img.naturalWidth < img.naturalHeight) {
+  } else if (image.width < image.height) {
     orientation = "portrait";
   } else {
     orientation = "even";
@@ -13,31 +11,31 @@ const imageOrientation = (image_url) => {
   return orientation;
 };
 const getBannerSizeClassName = (size, overlap) => {
-  if (size === "lg" && !overlap) {
+  if (size.includes("large") && !overlap) {
     return cta_section_lg;
   }
-  if (size === "lg" && overlap) {
+  if (size.includes("large") && overlap) {
     return cta_section_lg_overlap;
   }
-  if (size === "md" && !overlap) {
+  if (size.includes("medium") && !overlap) {
     return cta_section_md;
   }
-  if (size === "md" && overlap) {
+  if (size.includes("medium") && overlap) {
     return cta_section_md_overlap;
   }
-  return "cta_section_sm";
+  return cta_section_sm;
 };
 const returnImageDimensions = (size, image_orientation) => {
-  if (image_orientation === "landscape" && size === "lg") {
+  if (image_orientation === "landscape" && size.includes("large")) {
     return { width: "491px", height: "256px" };
   }
-  if (image_orientation === "even" && size === "lg") {
+  if (image_orientation === "even" && size.includes("large")) {
     return { width: "256px", height: "256px" };
   }
-  if (image_orientation === "landscape" && size === "md") {
+  if (image_orientation === "landscape" && size.includes("medium")) {
     return { width: "306px", height: "160px" };
   }
-  if (image_orientation === "even" && size === "md") {
+  if (image_orientation === "even" && size.includes("medium")) {
     return { width: "160px", height: "160px" };
   }
   return { width: "491px", height: "256px" };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@axos-web-dev/shared-components",
   "description": "Axos shared components library for web.",
-  "version": "0.0.6",
+  "version": "0.0.8",
   "type": "module",
   "module": "dist/main.js",
   "types": "dist/main.d.ts",