@arc-ui/community-components 1.0.2 → 2.0.0

package/src/components/Accordion/components/AccordionHeading/AccordionHeading.module.css

@@ -0,0 +1,51 @@
+@import url("@arc-ui/tokens-arc/dist/custom-media.css");
+
+.accordion-header {
+  padding-bottom: 40px;
+  width: auto;
+}
+
+.accordion-header--hasImage {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+@media (--arc-custom-media-min-width-s-px) {
+  .accordion-header--padded {
+    min-width: 588px;
+    width: auto;
+  }
+
+  .accordion-header--hasImage {
+    align-items: center;
+    flex-direction: row;
+    gap: 32px;
+  }
+}
+
+@media (--arc-custom-media-min-width-m-px) {
+  .accordion-header--padded {
+    min-width: 720px;
+    padding: 0 186px 40px 0;
+  }
+}
+
+@media (--arc-custom-media-min-width-l-px) {
+  .accordion-header--padded {
+    min-width: 960px;
+    padding: 0 246px 40px 0;
+  }
+}
+
+@media (--arc-custom-media-min-width-xl-px) {
+  .accordion-header--padded {
+    min-width: 1216px;
+    padding: 0 312px 40px 0;
+  }
+}
+
+.accordion-header--headingSizeM {
+  padding-bottom: 24px;
+  width: auto;
+}

package/src/components/Accordion/components/AccordionHeading/AccordionHeading.tsx

@@ -0,0 +1,91 @@
+import React from "react";
+import classNames from "classnames";
+
+import { filterDataAttrs } from "@arc-ui/community-utils/filter-data-attrs";
+
+import { Heading, type HeadingLevel } from "@arc-ui/components/Heading";
+import { Text } from "@arc-ui/components/Text";
+import { VerticalSpace } from "@arc-ui/components/VerticalSpace";
+import { Image } from "@arc-ui/components/Image";
+import { type ImageProps } from "@arc-ui/components/dist/types/components/Image/Image";
+
+import styles from "./AccordionHeading.module.css";
+
+export const AccordionHeading: React.FC<AccordionHeadingProps> = ({
+  heading,
+  content,
+  id,
+  isPadded = false,
+  headingLevel = "2",
+  headingSize = "xl",
+  image,
+  ...props
+}) => (
+  <div
+    className={classNames({
+      [styles["accordion-header"]]: true,
+      [styles["accordion-header--padded"]]: isPadded,
+      [styles["accordion-header--headingSizeM"]]: headingSize === "m",
+    })}
+    {...filterDataAttrs(props)}
+  >
+    <div
+      className={classNames({ [styles["accordion-header--hasImage"]]: image })}
+    >
+      {image && (
+        <div>
+          <Image {...image} width={68} fit="cover" />
+        </div>
+      )}
+      <Heading level={headingLevel} id={id} size={headingSize}>
+        {heading}
+      </Heading>
+    </div>
+    {content && (
+      <>
+        {headingSize === "xl" ? (
+          <VerticalSpace size="24" />
+        ) : (
+          <VerticalSpace size="8" sizeL="12" sizeXL="16" />
+        )}
+        <Text size="l" elementType="p">
+          {content}
+        </Text>
+      </>
+    )}
+  </div>
+);
+
+export interface AccordionHeadingProps {
+  /**
+   * heading for `AccordionHeading`.
+   */
+  heading: string;
+
+  /**
+   * Adds padding to `AccordionHeading`.
+   */
+  isPadded?: boolean;
+
+  /**
+   * Determine a heading level for `AccordionHeading`.
+   */
+  headingLevel?: HeadingLevel;
+
+  /**
+   * Text content for `AccordionHeading`.
+   */
+  content?: string;
+  /**
+   * Id content for `AccordionHeading`.
+   */
+  id?: string;
+  /**
+   * Header image for the `AccordionHeading`.
+   */
+  image?: ImageProps;
+  /**
+   * Header size for the `AccordionHeading`.
+   */
+  headingSize?: "xl" | "m";
+}

package/src/components/Accordion/components/AccordionHeading/index.ts

@@ -0,0 +1,4 @@
+export {
+  AccordionHeading,
+  type AccordionHeadingProps,
+} from "./AccordionHeading";

package/src/components/BannerWithTabs/BannerWithTabs.tsx

@@ -13,17 +13,15 @@ export const BannerWithTabs: FC<BannerWithTabsProps> = ({
   heading,
   content,
   alignTypography = "left",
-  isInverted = false,
   minHeight,
   minHeightM,
 }) => {
   return (
     <>
       <div
-        className={classNames(styles.bannerWithTabsHeading, {
+        className={classNames({
           [styles.bannerWithTabsHeadingCentered]: alignTypography === "center",
         })}
-        style={{ color: isInverted ? "white" : "black" }}
       >
         <SectionHeading
           heading={heading}
@@ -48,11 +46,6 @@ export interface BannerWithTabsProps
    */
   alignTypography?: "left" | "center";
 
-  /**
-   * Invert colour of `SectionHeading` to colour of `TabbedBanner`.
-   */
-  isInverted?: boolean;
-
   /**
    * Default to an inital value of a tab. If this is left blank it will default to first tab.
    */

package/src/components/ContentInfoWidget/ContentInfoWidget.module.css

@@ -0,0 +1,16 @@
+.container {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  max-width: 250px;
+  white-space: nowrap;
+  overflow-x: hidden;
+}
+
+.text {
+  padding-left: 8px;
+}
+
+.icon {
+  color: var(--sem-color-fg-secondary-light-subtle);
+}

package/src/components/ContentInfoWidget/ContentInfoWidget.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+
+import { Text } from "@arc-ui/components/Text";
+
+import { Icon } from "@arc-ui/components/Icon";
+
+import styles from "./ContentInfoWidget.module.css";
+
+export const ContentInfoWidget: React.FC<ContentInfoWidgetProps> = ({
+  text,
+  icon,
+}) => {
+  return (
+    <div className={styles.container}>
+      <div className={styles.icon}>
+        <Icon size={20} icon={icon} />
+      </div>
+      <div className={styles.text}>
+        <Text size="xs" tone="muted">
+          {text}
+        </Text>
+      </div>
+    </div>
+  );
+};
+
+export interface ContentInfoWidgetProps {
+  icon: string;
+  text: string;
+}

package/src/components/ContentInfoWidget/index.ts

@@ -0,0 +1,4 @@
+export {
+  ContentInfoWidget,
+  type ContentInfoWidgetProps,
+} from "./ContentInfoWidget";

package/src/components/CopyLead/components/MediaContent/MediaContent.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { ReactNode } from "react";
 
 import {
   Heading as ArcHeading,
@@ -32,5 +32,5 @@ export const MediaContent: React.FC<MediaContentProps> = ({
 interface MediaContentProps {
   heading: string;
   headingLevel?: HeadingLevel;
-  children?: string;
+  children?: string | ReactNode;
 }

package/src/components/CopyLead/templates/Content/Content.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { ReactNode } from "react";
 
 import { ArcSizeBreakpointsL, ArcSizeBreakpointsM } from "@arc-ui/tokens-arc";
 
@@ -52,7 +52,7 @@ export const ContentTemplate: React.FC<ContentTemplateProps> = ({
 };
 
 interface ContentTemplateProps extends SectionHeadingProps {
-  content: string;
+  content: string | ReactNode;
   listItems: CopyLeadListItem[];
   button?: CopyLeadButton;
 }

package/src/components/CopyLead/templates/Media/Media.tsx

@@ -1,4 +1,4 @@
-import React, { Suspense, useEffect, useState } from "react";
+import React, { Suspense, useEffect, useState, ReactNode } from "react";
 
 import { ArcSizeBreakpointsL, ArcSizeBreakpointsXl } from "@arc-ui/tokens-arc";
 
@@ -96,7 +96,7 @@ interface MediaTemplateProps {
   heading: string;
   headingLevel?: HeadingLevel;
   listItems: CopyLeadListItem[];
-  content?: string;
+  content?: string | ReactNode;
   isReverseOrder?: boolean;
   button?: CopyLeadButton;
   image?: CopyLeadImage;

package/src/components/FAQs/FAQs.module.css

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

package/src/components/FAQs/FAQs.tsx

@@ -0,0 +1,114 @@
+import React from "react";
+import classNames from "classnames";
+
+import { filterDataAttrs } from "@arc-ui/community-utils/filter-data-attrs";
+
+import { Accordion, type AccordionProps } from "../Accordion";
+import { SectionHeading, type SectionHeadingProps } from "../SectionHeading";
+import { Link } from "@arc-ui/components/Link";
+import { Heading } from "@arc-ui/components/Heading";
+import { VerticalSpace } from "@arc-ui/components/VerticalSpace";
+import { Tabs, TabsList, TabsContent, TabsItem } from "@arc-ui/components/Tabs";
+
+import styles from "./FAQs.module.css";
+
+export const FAQs: React.FC<FAQsProps> = ({
+  heading,
+  content,
+  isPadded = false,
+  headingLevel = "2",
+  image,
+  type = "list",
+  linkListHeading = "Skip to section",
+  accordionData,
+  ...props
+}) => (
+  <div {...filterDataAttrs(props)}>
+    <SectionHeading
+      heading={heading}
+      content={content}
+      image={image}
+      headingLevel={headingLevel}
+      isPadded={isPadded}
+    />
+    {type === "listWithLinks" && (
+      <div className={styles.linkListSection}>
+        <div className={styles.linkListTitle}>
+          <Heading size="xs">{linkListHeading}</Heading>
+        </div>
+        <ul
+          className={classNames({
+            [styles["linkList"]]: true,
+            [styles["linkList--padded"]]: isPadded,
+          })}
+        >
+          {accordionData.map((item: ExtendedAccordionProps) => (
+            <li className={styles.linkListItem} key={item.heading}>
+              <Link
+                title={item.heading}
+                href={`#${item.id}`}
+                onClick={() => {
+                  document.getElementById(`#${item.id}`)?.focus();
+                }}
+              >
+                {item.altLinkTitle ?? item.heading}
+              </Link>
+            </li>
+          ))}
+        </ul>
+      </div>
+    )}
+    {type !== "tabs" && accordionData && (
+      <ul>
+        {accordionData.map((item: ExtendedAccordionProps) => (
+          <li key={item.id}>
+            <Accordion
+              id={item.id}
+              heading={item.heading}
+              headingLevel={item.headingLevel}
+              content={item.content}
+              disclosureList={item.disclosureList}
+              headingSize="m"
+            />
+            <VerticalSpace size="48" sizeL="64" />
+          </li>
+        ))}
+      </ul>
+    )}
+    {type === "tabs" && (
+      <Tabs defaultValue={accordionData[0].heading}>
+        <TabsList type="standard">
+          {accordionData.map((item: AccordionProps, index: number) => (
+            <div key={index}>
+              <TabsItem label={item.heading} value={item.heading} />
+            </div>
+          ))}
+        </TabsList>
+        <VerticalSpace size="40" />
+        {accordionData.map((item: ExtendedAccordionProps, index: number) => (
+          <div key={item.heading}>
+            <TabsContent value={item.heading}>
+              <Accordion
+                key={index}
+                heading={item.heading}
+                headingLevel={item.headingLevel}
+                content={item.content}
+                disclosureList={item.disclosureList}
+                headingSize="m"
+              />
+            </TabsContent>
+          </div>
+        ))}
+      </Tabs>
+    )}
+  </div>
+);
+
+interface ExtendedAccordionProps extends AccordionProps {
+  altLinkTitle?: string;
+}
+export interface FAQsProps extends SectionHeadingProps {
+  type: "list" | "listWithLinks" | "tabs";
+  linkListHeading?: string;
+  accordionData: ExtendedAccordionProps[];
+}

package/src/components/FAQs/index.ts

@@ -0,0 +1 @@
+export { FAQs, type FAQsProps } from "./FAQs";

package/src/components/FeaturePost/FeaturePost.module.css

@@ -2,6 +2,7 @@
 
 .labelDate {
   padding-top: var(--sem-space-padding-20);
+  text-transform: uppercase;
 }
 
 .authorContent {

package/src/components/FeaturePost/FeaturePost.tsx

@@ -58,7 +58,9 @@ export const FeaturePost: React.FC<FeaturePostProps> = ({
             <Grid isGutterless isFluid>
               <GridRow align="baseline">
                 <GridCol xs={12} m="auto">
-                  <Heading size="xxs">{label.text.toUpperCase()}</Heading>
+                  <Heading size="xxs" fontStyle="overline">
+                    {label.text}
+                  </Heading>
                 </GridCol>
                 <GridCol xs={12} m="auto">
                   <div className={styles.labelDate}>
@@ -67,7 +69,7 @@ export const FeaturePost: React.FC<FeaturePostProps> = ({
                         <time
                           dateTime={format(label.date as Date, "yyyy-MM-dd")}
                         >
-                          {format(label.date as Date, "LLLL d, yyyy")}
+                          {format(label.date as Date, "d MMMM yyyy")}
                         </time>
                       ) : (
                         <span>{label.date as string}</span>

package/src/components/Highlights/components/HighlightItem/HighlightItem.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { ReactNode } from "react";
 
 import { Heading } from "@arc-ui/components/Heading";
 import { Icon } from "@arc-ui/components/Icon";
@@ -60,7 +60,7 @@ export const HighlightItem: React.FC<HighlightItemProps> = ({
 interface HighlightItemProps {
   icon?: string;
   heading: string;
-  text?: string;
+  text?: string | ReactNode;
   link?: HighlightLink;
   isSmallIcon: boolean;
 }

package/src/components/Highlights/types/highlight-list-item.ts

@@ -3,6 +3,6 @@ import { type HighlightLink } from "./highlight-link";
 export interface HighlightListItem {
   icon?: string;
   heading: string;
-  text?: string;
+  text?: string | React.ReactNode;
   link?: HighlightLink;
 }

package/src/components/SectionHeading/SectionHeading.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { ReactNode } from "react";
 import classNames from "classnames";
 
 import { filterDataAttrs } from "@arc-ui/community-utils/filter-data-attrs";
@@ -69,7 +69,7 @@ export interface SectionHeadingProps {
   /**
    * Text content for `SectionHeading`.
    */
-  content?: string;
+  content?: string | ReactNode;
   /**
    * Id content for `SectionHeading`.
    */

package/src/components/index.ts

@@ -2,6 +2,7 @@ export * from "./Accordion";
 export * from "./Author";
 export * from "./CopyLead";
 export * from "./DownloadList";
+export * from "./FAQs";
 export * from "./FeaturePost";
 export * from "./Highlights";
 export * from "./PromoListing";
@@ -12,3 +13,4 @@ export * from "./BannerWithTabs";
 export * from "./ArticleSidebar";
 export * from "./ProductNavigation";
 export * from "./SectionHeading";
+export * from "./ContentInfoWidget";

package/versions.json

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