@axos-web-dev/shared-components 0.0.3 → 0.0.4

package/dist/IconBillboard/index.js

@@ -1,81 +1,19 @@
-import { jsxs, jsx, Fragment } from "react/jsx-runtime";
-import { BulletItem } from "../BulletItem/BulletItem.js";
-import { Chevron } from "../Chevron/index.js";
-import { getVariant } from "../utils/getVariant.js";
-import { Button } from "../Button/index.js";
-import { section_text, header_section, section_container, container, layout, billboard_icon, content, header, title, list, buttons } from "./IconBillboard.css.js";
-const IconBillboard = ({
-  variant,
-  side = false,
-  iconBillboards,
-  headline,
-  bodyCopy,
-  additionalDetails
-}) => {
-  const billboard_variant = getVariant(variant);
-  return /* @__PURE__ */ jsxs("section", { className: "containment section_spacer", children: [
-    (headline || bodyCopy) && /* @__PURE__ */ jsxs("div", { className: section_text, children: [
-      headline && /* @__PURE__ */ jsx(
-        "h2",
-        {
-          className: `header_2 ${header_section({ variant: billboard_variant })}`,
-          children: headline
-        }
-      ),
-      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: container({ variant }), children: [
-        /* @__PURE__ */ jsxs("div", { className: layout({ side }), children: [
-          icon && /* @__PURE__ */ jsx("div", { className: billboard_icon, children: /* @__PURE__ */ jsx(
-            "img",
-            {
-              src: icon.src,
-              className: "img_fluid",
-              alt: icon.alt
-            }
-          ) }),
-          /* @__PURE__ */ jsxs("div", { className: content, children: [
-            /* @__PURE__ */ jsxs("div", { className: header, 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, { 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)
-    ) }),
-    additionalDetails && /* @__PURE__ */ jsx("div", { className: section_text, children: /* @__PURE__ */ jsx(Fragment, { children: additionalDetails }) })
-  ] });
-};
+import { IconBillboard } from "./IconBillboard.js";
+import { billboard_icon, buttons, containerIconBillboard, content, headerIconBillboard, header_section, layout, list, listItem, section_container, section_text, title } from "./IconBillboard.css.js";
+import { IconBillboardSet } from "./IconBillboardSet.js";
 export {
-  IconBillboard
+  IconBillboard,
+  IconBillboardSet,
+  billboard_icon,
+  buttons,
+  containerIconBillboard,
+  content,
+  headerIconBillboard,
+  header_section,
+  layout,
+  list,
+  listItem,
+  section_container,
+  section_text,
+  title
 };
-//# sourceMappingURL=index.js.map

package/dist/ImageBillboard/ImageBillboard.css.d.ts

@@ -18,17 +18,55 @@ export declare const billboard: import("@vanilla-extract/recipes").RuntimeFn<{
         };
     };
 }>;
+export declare const imagePlacement: import("@vanilla-extract/recipes").RuntimeFn<{
+    position: {
+        left: {
+            selectors: {
+                [x: string]: {
+                    flexDirection: "column";
+                };
+            };
+        };
+        right: {
+            selectors: {
+                [x: string]: {
+                    flexDirection: "column-reverse";
+                };
+            };
+        };
+    };
+}>;
 export declare const supertag: import("@vanilla-extract/recipes").RuntimeFn<{
     variant: {
         primary: {
-            background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            backgroundClip: "text";
-            WebkitTextFillColor: "transparent";
+            selectors: {
+                [x: string]: {
+                    WebkitBackgroundClip: "text";
+                    backgroundImage: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    WebkitTextFillColor: "transparent";
+                    color?: undefined;
+                } | {
+                    color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    WebkitBackgroundClip?: undefined;
+                    backgroundImage?: undefined;
+                    WebkitTextFillColor?: undefined;
+                };
+            };
         };
         secondary: {
-            background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            backgroundClip: "text";
-            WebkitTextFillColor: "transparent";
+            selectors: {
+                [x: string]: {
+                    WebkitBackgroundClip: "text";
+                    backgroundImage: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    WebkitTextFillColor: "transparent";
+                    color?: undefined;
+                } | {
+                    color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    WebkitBackgroundClip?: undefined;
+                    backgroundImage?: undefined;
+                    WebkitTextFillColor?: undefined;
+                };
+            };
         };
         tertiary: {
             color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -41,14 +79,34 @@ export declare const supertag: import("@vanilla-extract/recipes").RuntimeFn<{
 export declare const header: import("@vanilla-extract/recipes").RuntimeFn<{
     variant: {
         primary: {
-            background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            backgroundClip: "text";
-            WebkitTextFillColor: "transparent";
+            selectors: {
+                [x: string]: {
+                    WebkitBackgroundClip: "text";
+                    backgroundImage: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    WebkitTextFillColor: "transparent";
+                    color?: undefined;
+                } | {
+                    color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    WebkitBackgroundClip?: undefined;
+                    backgroundImage?: undefined;
+                    WebkitTextFillColor?: undefined;
+                };
+            };
         };
         secondary: {
-            background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            backgroundClip: "text";
-            WebkitTextFillColor: "transparent";
+            selectors: {
+                [x: string]: {
+                    WebkitBackgroundClip: "text";
+                    backgroundImage: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    WebkitTextFillColor: "transparent";
+                    color?: undefined;
+                } | {
+                    color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    WebkitBackgroundClip?: undefined;
+                    backgroundImage?: undefined;
+                    WebkitTextFillColor?: undefined;
+                };
+            };
         };
         tertiary: {
             color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -65,8 +123,6 @@ export declare const billboard_header_section: string;
 export declare const billboard_ctas: string;
 export declare const body: string;
 export declare const single_container: string;
-export declare const inline_container: string;
 export declare const two_inline: string;
 export declare const three_inline: string;
-export declare const section_text: string;
-//# sourceMappingURL=ImageBillboard.css.d.ts.map
+export declare const section_text_ImageBillboard: string;

package/dist/ImageBillboard/ImageBillboard.css.js

@@ -1,19 +1,22 @@
+/* empty css                                              */
+/* empty css                                */
+/* empty css                                   */
 /* empty css                                  */
 import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";
 var billboard = createRuntimeFn({ defaultClassName: "_1m7m2a0", variantClassNames: { variant: { primary: "_1m7m2a1", secondary: "_1m7m2a2", tertiary: "_1m7m2a3", quaternary: "_1m7m2a4" } }, defaultVariants: {}, compoundVariants: [] });
-var supertag = createRuntimeFn({ defaultClassName: "_1m7m2a5", variantClassNames: { variant: { primary: "_1m7m2a6", secondary: "_1m7m2a7", tertiary: "_1m7m2a8", quaternary: "_1m7m2a9" } }, defaultVariants: {}, compoundVariants: [] });
-var header = createRuntimeFn({ defaultClassName: "_1m7m2aa", variantClassNames: { variant: { primary: "_1m7m2ab", secondary: "_1m7m2ac", tertiary: "_1m7m2ad", quaternary: "_1m7m2ae" } }, defaultVariants: {}, compoundVariants: [] });
-var billboard_container = "_1m7m2af";
-var billboard_img = "_1m7m2ag";
-var billboard_body = "_1m7m2ah";
-var billboard_header_section = "_1m7m2ai";
-var billboard_ctas = "_1m7m2aj";
-var body = "_1m7m2ak";
-var single_container = "_1m7m2al";
-var inline_container = "_1m7m2am";
-var two_inline = "_1m7m2an";
-var three_inline = "_1m7m2ao";
-var section_text = "_1m7m2ap";
+var imagePlacement = createRuntimeFn({ defaultClassName: "_1m7m2a5", variantClassNames: { position: { left: "_1m7m2a6", right: "_1m7m2a7" } }, defaultVariants: {}, compoundVariants: [] });
+var supertag = createRuntimeFn({ defaultClassName: "_1m7m2a8", variantClassNames: { variant: { primary: "_1m7m2a9", secondary: "_1m7m2aa", tertiary: "_1m7m2ab", quaternary: "_1m7m2ac" } }, defaultVariants: {}, compoundVariants: [] });
+var header = createRuntimeFn({ defaultClassName: "_1m7m2ad", variantClassNames: { variant: { primary: "_1m7m2ae", secondary: "_1m7m2af", tertiary: "_1m7m2ag", quaternary: "_1m7m2ah" } }, defaultVariants: {}, compoundVariants: [] });
+var billboard_container = "_1m7m2ai";
+var billboard_img = "_1m7m2aj";
+var billboard_body = "_1m7m2ak";
+var billboard_header_section = "_1m7m2al";
+var billboard_ctas = "_1m7m2am";
+var body = "_1m7m2an";
+var single_container = "_1m7m2ao";
+var two_inline = "_1m7m2ap";
+var three_inline = "_1m7m2aq";
+var section_text_ImageBillboard = "_1m7m2ar";
 export {
   billboard,
   billboard_body,
@@ -23,11 +26,10 @@ export {
   billboard_img,
   body,
   header,
-  inline_container,
-  section_text,
+  imagePlacement,
+  section_text_ImageBillboard,
   single_container,
   supertag,
   three_inline,
   two_inline
 };
-//# sourceMappingURL=ImageBillboard.css.js.map

package/dist/ImageBillboard/ImageBillboard.d.ts

@@ -0,0 +1,2 @@
+import type { ImageBillboardSetProps as Props } from "./ImageBillboard.interface";
+export declare const ImageBillboardSet: ({ id, variant, headline, bodyCopy, additionalDetails, imageBillboards, }: Props) => import("react/jsx-runtime").JSX.Element;

package/dist/ImageBillboard/ImageBillboard.interface.d.ts

@@ -1,7 +1,9 @@
+import { BulletItemProps } from '../BulletItem';
 import { ChevronProps } from '../Chevron/Chevron.interface';
-import { QuaternaryTypes, SecondaryTypes } from '../utils/variant.types';
+import { ImageInterface } from '../IconBillboard';
+import { QuaternaryTypes } from '../utils/variant.types';
 import { ReactNode } from "react";
-export interface ImageBillboardSet {
+export interface ImageBillboardSetProps {
     id: string;
     headline?: string | ReactNode;
     bodyCopy?: string | ReactNode;
@@ -9,10 +11,6 @@ export interface ImageBillboardSet {
     additionalDetails?: string | ReactNode;
     variant: QuaternaryTypes;
 }
-export interface ImageInterface {
-    src: string;
-    alt?: string;
-}
 export interface ImageBillboardInterface {
     id: string;
     bordered: boolean;
@@ -22,17 +20,7 @@ export interface ImageBillboardInterface {
     eyebrow: string | ReactNode;
     headline: string | ReactNode;
     bodyCopy: string | ReactNode;
-    bullets: Bullet[];
+    bullets: BulletItemProps[];
     image: ImageInterface;
     callToActionRow: ChevronProps[];
 }
-export interface Bullet {
-    id: string;
-    variant: SecondaryTypes;
-    icon: {
-        src: string;
-        altText?: string;
-    };
-    copy: string | ReactNode;
-}
-//# sourceMappingURL=ImageBillboard.interface.d.ts.map

package/dist/ImageBillboard/ImageBillboard.interface.js

@@ -1,2 +1 @@
 
-//# sourceMappingURL=ImageBillboard.interface.js.map

package/dist/ImageBillboard/ImageBillboard.js

@@ -0,0 +1,132 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { Chevron } from "../Chevron/index.js";
+import SvgCheckIcon from "../icons/CheckIcon/index.js";
+/* empty css                                */
+/* empty css                                   */
+/* empty css                                                    */
+import { getVariant } from "../utils/getVariant.js";
+import clsx from "clsx";
+import { Button } from "../Button/index.js";
+import { inline_container } from "../SetContainer/SetContainer.css.js";
+import { section_text_ImageBillboard, header, billboard, billboard_container, billboard_img, body, billboard_body, billboard_header_section, supertag, billboard_ctas } from "./ImageBillboard.css.js";
+const ImageBillboardSet = ({
+  id,
+  variant,
+  headline,
+  bodyCopy,
+  additionalDetails,
+  imageBillboards
+}) => {
+  const inline = imageBillboards.length > 1;
+  const billboard_variant = getVariant(variant);
+  return /* @__PURE__ */ jsxs("section", { className: `containment section_spacer`, children: [
+    (headline || bodyCopy) && /* @__PURE__ */ jsxs("div", { className: section_text_ImageBillboard, children: [
+      headline && /* @__PURE__ */ jsx(
+        "h2",
+        {
+          className: `header_2 ${header({ variant: billboard_variant })}`,
+          children: headline
+        }
+      ),
+      bodyCopy && /* @__PURE__ */ jsx(Fragment, { children: bodyCopy })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: `${inline_container}`, children: imageBillboards.map(
+      ({
+        id: id2,
+        bordered,
+        imagePlacement,
+        eyebrow,
+        headline: headline2,
+        bodyCopy: bodyCopy2,
+        bullets,
+        image,
+        callToActionRow
+      }) => /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: `
+              ${billboard({ variant: billboard_variant })} ${inline ? "" : billboard_container} 
+              rounded flex ${inline ? "flex_col" : "flex_row"} ${bordered ? "bordered" : ""} ${imagePlacement.toLowerCase() === "left" && !inline ? "reversed" : ""}`,
+          children: [
+            /* @__PURE__ */ jsx("div", { className: "flex", children: /* @__PURE__ */ jsx(
+              "img",
+              {
+                src: image == null ? void 0 : image.src,
+                className: clsx("img_fluid", billboard_img),
+                alt: image.alt
+              }
+            ) }),
+            /* @__PURE__ */ jsxs("div", { className: body, children: [
+              /* @__PURE__ */ jsxs("div", { className: billboard_body, children: [
+                /* @__PURE__ */ jsxs("div", { className: `${billboard_header_section}`, children: [
+                  /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      className: `supertag ${supertag({ variant: billboard_variant })}`,
+                      children: eyebrow
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "h3",
+                    {
+                      className: `header_3 ${header({ variant: billboard_variant })}`,
+                      children: headline2
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsx("div", { className: "push_up", children: bodyCopy2 }),
+                /* @__PURE__ */ jsx("ul", { className: "list_unstyled mb_0 push_up", children: bullets.map(({ id: id3, icon, copy }) => /* @__PURE__ */ jsxs("li", { className: "list_item flex", children: [
+                  /* @__PURE__ */ jsx("div", { className: "img_item", children: billboard_variant ? /* @__PURE__ */ jsx(
+                    SvgCheckIcon,
+                    {
+                      variant: billboard_variant === "primary" || billboard_variant === "secondary" ? "primary" : "secondary"
+                    }
+                  ) : /* @__PURE__ */ jsx("img", { src: icon == null ? void 0 : icon.src, alt: icon == null ? void 0 : icon.altText }) }),
+                  /* @__PURE__ */ jsx("span", { children: copy })
+                ] }, id3)) })
+              ] }),
+              callToActionRow && /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: `${billboard_ctas} push_up_24 flex ${inline ? "flex_col" : "flex_row"} gap_24 middle center`,
+                  children: callToActionRow.map(
+                    ({
+                      id: id3,
+                      variant: variant2,
+                      displayText,
+                      targetUrl,
+                      type
+                    }) => type === "Button" ? /* @__PURE__ */ jsx(
+                      Button,
+                      {
+                        targetUrl,
+                        color: getVariant(variant2),
+                        size: "medium",
+                        rounded: "medium",
+                        children: displayText
+                      },
+                      id3
+                    ) : /* @__PURE__ */ jsx(
+                      Chevron,
+                      {
+                        targetUrl,
+                        variant: getVariant(variant2),
+                        children: displayText
+                      },
+                      id3
+                    )
+                  )
+                }
+              )
+            ] })
+          ]
+        },
+        id2
+      )
+    ) }),
+    additionalDetails && /* @__PURE__ */ jsx("div", { className: section_text_ImageBillboard, children: /* @__PURE__ */ jsx(Fragment, { children: additionalDetails }) })
+  ] }, id);
+};
+export {
+  ImageBillboardSet
+};

package/dist/ImageBillboard/ImageBillboardSet.d.ts

@@ -0,0 +1,2 @@
+import { ImageBillboardInterface } from "./ImageBillboard.interface";
+export declare const ImageBillboard: ({ id, variant, headline, bodyCopy, bordered, bullets, callToActionRow, eyebrow, image, imagePlacement: position, }: ImageBillboardInterface) => import("react/jsx-runtime").JSX.Element;

package/dist/ImageBillboard/ImageBillboardSet.js

@@ -0,0 +1,105 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { Button } from "../Button/index.js";
+import { Chevron } from "../Chevron/index.js";
+import SvgCheckIcon from "../icons/CheckIcon/index.js";
+/* empty css                                */
+/* empty css                                   */
+/* empty css                                                    */
+import { getVariant } from "../utils/getVariant.js";
+import clsx from "clsx";
+import { billboard, imagePlacement, billboard_img, body, billboard_body, billboard_header_section, supertag, header, billboard_ctas } from "./ImageBillboard.css.js";
+const ImageBillboard = ({
+  id,
+  variant,
+  headline,
+  bodyCopy,
+  bordered,
+  bullets,
+  callToActionRow,
+  eyebrow,
+  image,
+  imagePlacement: position
+}) => {
+  const billboard_variant = getVariant(variant);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: clsx(
+        billboard({ variant: billboard_variant }),
+        `rounded flex`,
+        bordered ? "bordered" : "",
+        imagePlacement({ position })
+      ),
+      children: [
+        /* @__PURE__ */ jsx("div", { className: `${billboard_img} flex`, children: /* @__PURE__ */ jsx("img", { src: image.src, className: "img_fluid", alt: image.alt }) }),
+        /* @__PURE__ */ jsxs("div", { className: body, children: [
+          /* @__PURE__ */ jsxs("div", { className: billboard_body, children: [
+            /* @__PURE__ */ jsxs("div", { className: `${billboard_header_section}`, children: [
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: `supertag ${supertag({ variant: billboard_variant })}`,
+                  children: eyebrow
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "h3",
+                {
+                  className: `header_3 ${header({ variant: billboard_variant })}`,
+                  children: headline
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: "push_up", children: bodyCopy }),
+            /* @__PURE__ */ jsx("ul", { className: "list_unstyled mb_0 push_up", children: bullets.map(({ id: id2, icon, copy }) => /* @__PURE__ */ jsxs("li", { className: "list_item flex", children: [
+              /* @__PURE__ */ jsx("div", { className: "img_item", children: billboard_variant ? /* @__PURE__ */ jsx(
+                SvgCheckIcon,
+                {
+                  variant: billboard_variant === "primary" || billboard_variant === "secondary" ? "primary" : "secondary"
+                }
+              ) : /* @__PURE__ */ jsx("img", { src: icon == null ? void 0 : icon.src, alt: icon == null ? void 0 : icon.altText }) }),
+              /* @__PURE__ */ jsx("span", { children: copy })
+            ] }, id2)) })
+          ] }),
+          callToActionRow && /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: clsx(
+                billboard_ctas,
+                `push_up_24 flex`,
+                `gap_24`,
+                callToActionRow.length > 1 ? "middle" : "",
+                `center`
+              ),
+              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
+  );
+};
+export {
+  ImageBillboard
+};

package/dist/ImageBillboard/index.d.ts

@@ -1,4 +1,4 @@
-import { FC } from "react";
-import { ImageBillboardSet } from "./ImageBillboard.interface";
-export declare const ImageBillboard: FC<ImageBillboardSet>;
-//# sourceMappingURL=index.d.ts.map
+export * from "./ImageBillboard";
+export * from "./ImageBillboard.css";
+export type * from "./ImageBillboard.interface";
+export * from "./ImageBillboardSet";