@arc-ui/community-components 2.0.0 → 3.0.0

package/src/components/Highlights/utils/getListHeadingLevel.ts

@@ -0,0 +1,6 @@
+import { type HeadingLevel } from "@arc-ui/components/Heading";
+
+export const getListHeadingLevel = (level: HeadingLevel): HeadingLevel => {
+  const nextLevel = Math.min(parseInt(level) + 1, 6);
+  return nextLevel.toString() as HeadingLevel;
+};

package/src/components/PromoListing/PromoListing.module.css

@@ -4,93 +4,74 @@
   max-width: 1280px;
 }
 
-.promoListingContainer {
-  grid-column: span 2;
+.carouselSlide {
   height: 100%;
-  width: 100%;
+  padding: 6px;
 }
 
 .cardGrid {
   display: grid;
-  gap: 24px;
-  grid-template-columns: 2fr;
+  grid-template-columns: repeat(1, 1fr);
+  grid-auto-rows: 1fr;
+  gap: 16px;
+  list-style: none;
+  margin: 0;
+  padding: 0;
 }
 
-.carouselSlide {
+.cardWrapper {
   height: 100%;
-  padding: 6px;
 }
 
-@media (--arc-custom-media-min-width-xs-px) {
-  .cardGrid {
-    grid-auto-rows: minmax(430px, 1fr);
-  }
+.cardWrapper > * {
+  height: 100%;
 }
 
-@media (--arc-custom-media-min-width-s-px) {
-  .cardGrid2Columns {
-    grid-auto-rows: minmax(430px, 1fr);
-    grid-template-columns: repeat(4, 1fr);
-  }
-
-  /* Dealing with single orphan */
-  .cardGrid2Columns.cardGrid3Cards .promoListingContainer:last-child {
-    grid-column-end: 4;
-  }
-
-  .cardGrid2Columns.cardGrid5Cards .promoListingContainer:last-child {
-    grid-column-end: 4;
-  }
+.cardWrapperCarousel {
+  width: 288px;
+  height: 100%;
+  margin-right: 16px;
 }
 
-@media (--arc-custom-media-min-width-m-px) {
-  .cardGrid2Columns {
-    grid-auto-rows: minmax(430px, 1fr);
-  }
+.cardWrapperCarousel > * {
+  height: 100%;
 }
 
-@media (--arc-custom-media-min-width-l-px) {
-  .cardGrid2Columns {
-    grid-auto-rows: minmax(468px, 1fr);
+@media (--arc-custom-media-min-width-s-px) {
+  .cardWrapperCarousel {
+    margin-right: 24px;
   }
 
-  .cardGrid3Columns {
-    grid-auto-rows: minmax(437px, 1fr);
-    grid-template-columns: repeat(6, 1fr);
+  .cardGrid {
+    gap: 24px;
   }
 
-  /* Dealing with single orphan */
-  .cardGrid3Columns.cardGrid4Cards .promoListingContainer:last-child {
-    grid-column-end: 5;
+  .cardGrid.columns-3 {
+    grid-template-columns: repeat(2, 1fr);
   }
 
-  /* Dealing with two orphans */
-  .cardGrid3Columns.cardGrid2Cards .promoListingContainer:last-child {
-    grid-column-end: 6;
+  .cardGrid.columns-2 {
+    grid-template-columns: repeat(2, 1fr);
   }
+}
 
-  .cardGrid3Columns.cardGrid5Cards .promoListingContainer:last-child {
-    grid-column-end: 6;
+@media (--arc-custom-media-min-width-m-px) {
+  .cardWrapperCarousel {
+    width: 348px;
   }
+}
 
-  .cardGrid3Columns.cardGrid2Cards .promoListingContainer:nth-last-child(2) {
-    grid-column-end: 4;
+@media (--arc-custom-media-min-width-l-px) {
+  .cardGrid.columns-3 {
+    grid-template-columns: repeat(3, 1fr);
   }
 
-  .cardGrid3Columns.cardGrid5Cards .promoListingContainer:nth-last-child(2) {
-    grid-column-end: 4;
+  .cardGrid.columns-2 {
+    grid-template-columns: repeat(2, 1fr);
   }
 }
 
 @media (--arc-custom-media-min-width-xl-px) {
-  .cardGrid2Columns {
-    grid-auto-rows: minmax(592px, 1fr);
-  }
-
-  .cardGrid3Columns {
-    grid-auto-rows: minmax(523px, 1fr);
-  }
-
   .cardGrid {
     gap: 32px;
   }

package/src/components/PromoListing/PromoListing.tsx

@@ -1,7 +1,8 @@
-import React, { useId } from "react";
+import React, { useId, ComponentType } from "react";
+
 import classNames from "classnames";
 
-import { ArcSizeBreakpointsL } from "@arc-ui/tokens-arc";
+import { ArcSizeBreakpointsL, ArcSizeBreakpointsM } from "@arc-ui/tokens-arc";
 
 import { Carousel } from "@arc-ui/components/Carousel";
 import { useMediaQuery } from "@arc-ui/components/use-media-query";
@@ -33,7 +34,7 @@ import styles from "./PromoListing.module.css";
 export const PromoListing: React.FC<PromoListingProps> = ({
   heading,
   content,
-  isCarousel,
+  isCarousel = false,
   cards,
   headingLevel,
   columns = "2",
@@ -44,17 +45,46 @@ export const PromoListing: React.FC<PromoListingProps> = ({
     `(min-width: ${ArcSizeBreakpointsL})`,
   );
 
-  const columnCount = isMinWidthArcBreakpointL ? columns : 2;
-
-  const getCard = (card: PromoListCard) => (
-    <>
-      {card.type === "media-card" && <MediaCard {...card} />}
-      {card.type === "impact-card" && <ImpactCard {...card} />}
-      {card.type === "information-card" && <InformationCard {...card} />}
-      {card.type === "typography-card" && <TypographyCard {...card} />}
-    </>
+  const isMinWidthArcBreakpointM = useMediaQuery(
+    `(min-width: ${ArcSizeBreakpointsM})`,
   );
 
+  const cardAspectRatios = columns === "3" ? "10-16" : "3-4";
+
+  const getCardAspectRatios = {
+    xs: !isCarousel ? "3-4" : undefined,
+    s: !isCarousel ? "10-16" : undefined,
+    m: !isCarousel ? "3-4" : undefined,
+    l: cardAspectRatios,
+    xl: cardAspectRatios,
+    xxl: cardAspectRatios,
+    xxxl: cardAspectRatios,
+  } as MediaCardProps["preserveAspectRatios"];
+
+  const commonProps = {
+    preserveAspectRatios: getCardAspectRatios,
+    minHeight:
+      isCarousel && !isMinWidthArcBreakpointL
+        ? isMinWidthArcBreakpointM
+          ? 557
+          : 461
+        : undefined,
+  };
+
+  const CARD_COMPONENTS = {
+    "media-card": MediaCard,
+    "impact-card": ImpactCard,
+    "information-card": InformationCard,
+    "typography-card": TypographyCard,
+  } as const;
+
+  const getCard = (card: PromoListCard) => {
+    const CardComponent = CARD_COMPONENTS[card.type] as ComponentType<
+      typeof card
+    >;
+    return <CardComponent {...card} {...commonProps} />;
+  };
+
   return (
     <div className={styles.PromoListing}>
       <SectionHeading
@@ -64,47 +94,39 @@ export const PromoListing: React.FC<PromoListingProps> = ({
         headingLevel={headingLevel}
         content={content}
       />
-
       {isCarousel && !isMinWidthArcBreakpointL ? (
-        <Carousel
-          itemsPerSlide={1}
-          responsive={{
-            s: {
-              itemsToScroll: 1,
-              isPartialVisible: false,
-              itemsPerSlide: 2,
-            },
-            m: {
-              itemsToScroll: 1,
-              isPartialVisible: true,
-              itemsPerSlide: 2,
-            },
-          }}
-        >
-          {cards?.map((card: PromoListCard, i) => (
-            <div key={`card-${id}-${i}`} className={styles.carouselSlide}>
-              {getCard(card)}
-            </div>
-          ))}
-        </Carousel>
+        <div className={styles.promolistingCarouselWrapper}>
+          <Carousel
+            overflow="visible"
+            itemsPerSlide={1}
+            behavior="adaptive"
+            withGutter={false}
+          >
+            {cards?.map((card: PromoListCard, i) => (
+              <div
+                key={`promolist-carousel-card-${id}-${i}`}
+                className={(styles.carouselSlide, styles.cardWrapperCarousel)}
+              >
+                {getCard(card)}
+              </div>
+            ))}
+          </Carousel>
+        </div>
       ) : (
-        <div
-          className={classNames(
-            styles.cardGrid,
-            styles[`cardGrid${columnCount}Columns`],
-            styles[`cardGrid${cards.length}Cards`],
-          )}
+        <ul
+          className={classNames(styles.cardGrid, styles[`columns-${columns}`])}
         >
           {cards?.map((card: PromoListCard, index) => (
-            <div
-              data-testid={`promoList-card${index}`}
-              className={classNames(styles.promoListingContainer)}
-              key={index}
-            >
-              {getCard(card)}
-            </div>
+            <li key={`promolist-card--${id}-${index}`}>
+              <div
+                data-testid={`promoList-card${index}`}
+                className={styles.cardWrapper}
+              >
+                {getCard(card)}
+              </div>
+            </li>
           ))}
-        </div>
+        </ul>
       )}
     </div>
   );
@@ -140,9 +162,9 @@ export interface PromoListingProps
   cards: PromoListCard[];
 
   /**
-   * Shows cards in a carousel on devices below 1024px if true.
+   * Shows cards in a carousel on devices below 1024px (m breakpoint) if true.
    */
-  isCarousel?: true;
+  isCarousel?: boolean;
 
   /**
    * Number of columns for desktop breakpoints. "2" and "3" column options available.

package/versions.json

@@ -1 +1 @@
-["v2.0.0","v1.1.0","v1.0.2","v1.0.1","v1.0.0","v0.1.0"]
+["v3.0.0","v2.0.0","v1.1.0","v1.0.2","v1.0.1","v1.0.0","v0.1.0"]

package/dist/Accordion/Accordion.esm.js

@@ -1,10 +0,0 @@
-export { A as Accordion } from '../_shared/esm/Accordion-Brmx6oxT.js';
-import '../_shared/esm/tslib.es6-D6Wu-xwB.js';
-import 'react';
-import '../_shared/esm/filter-data-attrs-V7cbJuwS.js';
-import '../_shared/esm/index-BfTCfPZ1.js';
-import '@arc-ui/components/Heading';
-import '@arc-ui/components/Text';
-import '@arc-ui/components/VerticalSpace';
-import '@arc-ui/components/Image';
-import '@arc-ui/components/Disclosure';

package/dist/Author/Author.esm.js

@@ -1,8 +0,0 @@
-export { A as Author } from '../_shared/esm/Author-DpT2Pcq_.js';
-import '../_shared/esm/tslib.es6-D6Wu-xwB.js';
-import 'react';
-import '../_shared/esm/filter-data-attrs-V7cbJuwS.js';
-import '@arc-ui/components/Grid';
-import '@arc-ui/components/Avatar';
-import '@arc-ui/components/Heading';
-import '@arc-ui/components/Text';

package/dist/FAQs/styles.css

@@ -1 +0,0 @@
-html{scroll-behavior:smooth}ul,li{list-style:none;margin:0;padding:0}.FAQs-module_linkListSection__RdQkU{display:flex;flex-direction:column;margin-bottom:40px}.FAQs-module_linkListTitle__RVni3{margin-bottom:8px}.FAQs-module_linkList__dPyXj{display:flex;flex-wrap:wrap;row-gap:8px}.FAQs-module_linkListItem__S83CL::after{content:"|";padding:0 8px;color:#d9d9d9}.FAQs-module_linkListItem__S83CL:last-child::after{content:""}@media (--arc-custom-media-min-width-s-px){.FAQs-module_linkList--padded__8Paxc{min-width:588px;width:auto}}@media (--arc-custom-media-min-width-m-px){.FAQs-module_linkList--padded__8Paxc{min-width:720px;padding-right:186px}}@media (--arc-custom-media-min-width-l-px){.FAQs-module_linkList--padded__8Paxc{min-width:960px;padding-right:246px}}@media (--arc-custom-media-min-width-xl-px){.FAQs-module_linkList--padded__8Paxc{min-width:1216px;padding-right:312px}}

package/dist/PromoListing/PromoListing.cjs.js

@@ -1,51 +0,0 @@
-'use strict';
-
-var tslib_es6 = require('../_shared/cjs/tslib.es6-BxB9I209.js');
-var React = require('react');
-var index = require('../_shared/cjs/index-Bp6Dd2i1.js');
-var index_es = require('../_shared/cjs/index.es-BVxxpECB.js');
-var Carousel = require('@arc-ui/components/Carousel');
-var useMediaQuery = require('@arc-ui/components/use-media-query');
-var SectionHeading = require('../_shared/cjs/SectionHeading-gjCR1F6E.js');
-var MediaCard = require('@arc-ui/components/MediaCard');
-var ImpactCard = require('@arc-ui/components/ImpactCard');
-var InformationCard = require('@arc-ui/components/InformationCard');
-var TypographyCard = require('@arc-ui/components/TypographyCard');
-require('../_shared/cjs/filter-data-attrs-ajtUvDAC.js');
-require('@arc-ui/components/Heading');
-require('@arc-ui/components/Text');
-require('@arc-ui/components/VerticalSpace');
-require('@arc-ui/components/Image');
-
-var styles = {"PromoListing":"PromoListing-module_PromoListing__6ensv","promoListingContainer":"PromoListing-module_promoListingContainer__vwez-","cardGrid":"PromoListing-module_cardGrid__llf73","carouselSlide":"PromoListing-module_carouselSlide__AMTPF","cardGrid2Columns":"PromoListing-module_cardGrid2Columns__qPLQk","cardGrid3Cards":"PromoListing-module_cardGrid3Cards__VKWMs","cardGrid5Cards":"PromoListing-module_cardGrid5Cards__ywl5k","cardGrid3Columns":"PromoListing-module_cardGrid3Columns__g0Xru","cardGrid4Cards":"PromoListing-module_cardGrid4Cards__5Bv5u","cardGrid2Cards":"PromoListing-module_cardGrid2Cards__wDc4S"};
-
-/**
- * Use `PromoListing` to give supporting information about a page or proposition in the form of the card components (`ImpactCard`, `InformationCard`, `MediaCard` and `TypographyCard`).
- */
-var PromoListing = function (_a) {
-    var heading = _a.heading, content = _a.content, isCarousel = _a.isCarousel, cards = _a.cards, headingLevel = _a.headingLevel, _b = _a.columns, columns = _b === void 0 ? "2" : _b;
-    var id = React.useId();
-    var isMinWidthArcBreakpointL = useMediaQuery.useMediaQuery("(min-width: ".concat(index_es.ArcSizeBreakpointsL, ")"));
-    var columnCount = isMinWidthArcBreakpointL ? columns : 2;
-    var getCard = function (card) { return (React.createElement(React.Fragment, null,
-        card.type === "media-card" && React.createElement(MediaCard.MediaCard, tslib_es6.__assign({}, card)),
-        card.type === "impact-card" && React.createElement(ImpactCard.ImpactCard, tslib_es6.__assign({}, card)),
-        card.type === "information-card" && React.createElement(InformationCard.InformationCard, tslib_es6.__assign({}, card)),
-        card.type === "typography-card" && React.createElement(TypographyCard.TypographyCard, tslib_es6.__assign({}, card)))); };
-    return (React.createElement("div", { className: styles.PromoListing },
-        React.createElement(SectionHeading.SectionHeading, { isPadded: true, "data-testid": "PromoListing-header", heading: heading, headingLevel: headingLevel, content: content }),
-        isCarousel && !isMinWidthArcBreakpointL ? (React.createElement(Carousel.Carousel, { itemsPerSlide: 1, responsive: {
-                s: {
-                    itemsToScroll: 1,
-                    isPartialVisible: false,
-                    itemsPerSlide: 2,
-                },
-                m: {
-                    itemsToScroll: 1,
-                    isPartialVisible: true,
-                    itemsPerSlide: 2,
-                },
-            } }, cards === null || cards === void 0 ? void 0 : cards.map(function (card, i) { return (React.createElement("div", { key: "card-".concat(id, "-").concat(i), className: styles.carouselSlide }, getCard(card))); }))) : (React.createElement("div", { className: index.classNames(styles.cardGrid, styles["cardGrid".concat(columnCount, "Columns")], styles["cardGrid".concat(cards.length, "Cards")]) }, cards === null || cards === void 0 ? void 0 : cards.map(function (card, index$1) { return (React.createElement("div", { "data-testid": "promoList-card".concat(index$1), className: index.classNames(styles.promoListingContainer), key: index$1 }, getCard(card))); })))));
-};
-
-exports.PromoListing = PromoListing;

package/dist/PromoListing/PromoListing.esm.js

@@ -1,49 +0,0 @@
-import { _ as __assign } from '../_shared/esm/tslib.es6-D6Wu-xwB.js';
-import React, { useId } from 'react';
-import { c as classNames } from '../_shared/esm/index-BfTCfPZ1.js';
-import { a as ArcSizeBreakpointsL } from '../_shared/esm/index.es-CbCdNYwG.js';
-import { Carousel } from '@arc-ui/components/Carousel';
-import { useMediaQuery } from '@arc-ui/components/use-media-query';
-import { S as SectionHeading } from '../_shared/esm/SectionHeading-DVLKN_jI.js';
-import { MediaCard } from '@arc-ui/components/MediaCard';
-import { ImpactCard } from '@arc-ui/components/ImpactCard';
-import { InformationCard } from '@arc-ui/components/InformationCard';
-import { TypographyCard } from '@arc-ui/components/TypographyCard';
-import '../_shared/esm/filter-data-attrs-V7cbJuwS.js';
-import '@arc-ui/components/Heading';
-import '@arc-ui/components/Text';
-import '@arc-ui/components/VerticalSpace';
-import '@arc-ui/components/Image';
-
-var styles = {"PromoListing":"PromoListing-module_PromoListing__6ensv","promoListingContainer":"PromoListing-module_promoListingContainer__vwez-","cardGrid":"PromoListing-module_cardGrid__llf73","carouselSlide":"PromoListing-module_carouselSlide__AMTPF","cardGrid2Columns":"PromoListing-module_cardGrid2Columns__qPLQk","cardGrid3Cards":"PromoListing-module_cardGrid3Cards__VKWMs","cardGrid5Cards":"PromoListing-module_cardGrid5Cards__ywl5k","cardGrid3Columns":"PromoListing-module_cardGrid3Columns__g0Xru","cardGrid4Cards":"PromoListing-module_cardGrid4Cards__5Bv5u","cardGrid2Cards":"PromoListing-module_cardGrid2Cards__wDc4S"};
-
-/**
- * Use `PromoListing` to give supporting information about a page or proposition in the form of the card components (`ImpactCard`, `InformationCard`, `MediaCard` and `TypographyCard`).
- */
-var PromoListing = function (_a) {
-    var heading = _a.heading, content = _a.content, isCarousel = _a.isCarousel, cards = _a.cards, headingLevel = _a.headingLevel, _b = _a.columns, columns = _b === void 0 ? "2" : _b;
-    var id = useId();
-    var isMinWidthArcBreakpointL = useMediaQuery("(min-width: ".concat(ArcSizeBreakpointsL, ")"));
-    var columnCount = isMinWidthArcBreakpointL ? columns : 2;
-    var getCard = function (card) { return (React.createElement(React.Fragment, null,
-        card.type === "media-card" && React.createElement(MediaCard, __assign({}, card)),
-        card.type === "impact-card" && React.createElement(ImpactCard, __assign({}, card)),
-        card.type === "information-card" && React.createElement(InformationCard, __assign({}, card)),
-        card.type === "typography-card" && React.createElement(TypographyCard, __assign({}, card)))); };
-    return (React.createElement("div", { className: styles.PromoListing },
-        React.createElement(SectionHeading, { isPadded: true, "data-testid": "PromoListing-header", heading: heading, headingLevel: headingLevel, content: content }),
-        isCarousel && !isMinWidthArcBreakpointL ? (React.createElement(Carousel, { itemsPerSlide: 1, responsive: {
-                s: {
-                    itemsToScroll: 1,
-                    isPartialVisible: false,
-                    itemsPerSlide: 2,
-                },
-                m: {
-                    itemsToScroll: 1,
-                    isPartialVisible: true,
-                    itemsPerSlide: 2,
-                },
-            } }, cards === null || cards === void 0 ? void 0 : cards.map(function (card, i) { return (React.createElement("div", { key: "card-".concat(id, "-").concat(i), className: styles.carouselSlide }, getCard(card))); }))) : (React.createElement("div", { className: classNames(styles.cardGrid, styles["cardGrid".concat(columnCount, "Columns")], styles["cardGrid".concat(cards.length, "Cards")]) }, cards === null || cards === void 0 ? void 0 : cards.map(function (card, index) { return (React.createElement("div", { "data-testid": "promoList-card".concat(index), className: classNames(styles.promoListingContainer), key: index }, getCard(card))); })))));
-};
-
-export { PromoListing };

package/dist/PromoListing/styles.css

@@ -1 +0,0 @@
-.PromoListing-module_PromoListing__6ensv{max-width:1280px}.PromoListing-module_promoListingContainer__vwez-{grid-column:span 2;height:100%;width:100%}.PromoListing-module_cardGrid__llf73{display:grid;grid-gap:24px;gap:24px;grid-template-columns:2fr}.PromoListing-module_carouselSlide__AMTPF{height:100%;padding:6px}@media (min-width:320px){.PromoListing-module_cardGrid__llf73{grid-auto-rows:minmax(430px,1fr)}}@media (min-width:636px){.PromoListing-module_cardGrid2Columns__qPLQk{grid-auto-rows:minmax(430px,1fr);grid-template-columns:repeat(4,1fr)}.PromoListing-module_cardGrid2Columns__qPLQk.PromoListing-module_cardGrid3Cards__VKWMs .PromoListing-module_promoListingContainer__vwez-:last-child{grid-column-end:4}.PromoListing-module_cardGrid2Columns__qPLQk.PromoListing-module_cardGrid5Cards__ywl5k .PromoListing-module_promoListingContainer__vwez-:last-child{grid-column-end:4}}@media (min-width:768px){.PromoListing-module_cardGrid2Columns__qPLQk{grid-auto-rows:minmax(430px,1fr)}}@media (min-width:1024px){.PromoListing-module_cardGrid2Columns__qPLQk{grid-auto-rows:minmax(468px,1fr)}.PromoListing-module_cardGrid3Columns__g0Xru{grid-auto-rows:minmax(437px,1fr);grid-template-columns:repeat(6,1fr)}.PromoListing-module_cardGrid3Columns__g0Xru.PromoListing-module_cardGrid4Cards__5Bv5u .PromoListing-module_promoListingContainer__vwez-:last-child{grid-column-end:5}.PromoListing-module_cardGrid3Columns__g0Xru.PromoListing-module_cardGrid2Cards__wDc4S .PromoListing-module_promoListingContainer__vwez-:last-child{grid-column-end:6}.PromoListing-module_cardGrid3Columns__g0Xru.PromoListing-module_cardGrid5Cards__ywl5k .PromoListing-module_promoListingContainer__vwez-:last-child{grid-column-end:6}.PromoListing-module_cardGrid3Columns__g0Xru.PromoListing-module_cardGrid2Cards__wDc4S .PromoListing-module_promoListingContainer__vwez-:nth-last-child(2){grid-column-end:4}.PromoListing-module_cardGrid3Columns__g0Xru.PromoListing-module_cardGrid5Cards__ywl5k .PromoListing-module_promoListingContainer__vwez-:nth-last-child(2){grid-column-end:4}}@media (min-width:1280px){.PromoListing-module_cardGrid2Columns__qPLQk{grid-auto-rows:minmax(592px,1fr)}.PromoListing-module_cardGrid3Columns__g0Xru{grid-auto-rows:minmax(523px,1fr)}.PromoListing-module_cardGrid__llf73{gap:32px}}