@arc-ui/community-components 0.1.0 → 1.0.0

package/dist/types/esm/components/index.d.ts

@@ -0,0 +1,14 @@
+export * from "./Accordion";
+export * from "./Author";
+export * from "./CopyLead";
+export * from "./DownloadList";
+export * from "./FeaturePost";
+export * from "./Highlights";
+export * from "./PromoListing";
+export * from "./Quote";
+export * from "./Summary";
+export * from "./Statistics";
+export * from "./BannerWithTabs";
+export * from "./ArticleSidebar";
+export * from "./ProductNavigation";
+export * from "./SectionHeading";

package/dist/types/esm/index.d.ts

@@ -0,0 +1 @@
+export * from "./components";

package/dist/types/esm/types/arc-icon.d.ts

@@ -0,0 +1,2 @@
+import { type SVGProps } from "react";
+export type ArcIcon = React.FC<SVGProps<SVGSVGElement>>;

package/generate-versions.js

@@ -0,0 +1,19 @@
+import path from "node:path";
+import fs from "node:fs";
+
+import semverRsort from "semver/functions/rsort.js";
+
+const changelog = fs.readFileSync("./CHANGELOG.md", "utf-8");
+
+let contents = changelog.toString().split("\n");
+
+const regexp =
+  /^##\s(0|[1-9]\d*)\.(0|[1-9]\d*)\.(0|[1-9]\d*)(?:-((?:0|[1-9]\d*|\d*[a-zA-Z-][0-9a-zA-Z-]*)(?:\.(?:0|[1-9]\d*|\d*[a-zA-Z-][0-9a-zA-Z-]*))*))?(?:\+([0-9a-zA-Z-]+(?:\.[0-9a-zA-Z-]+)*))?$/g;
+
+const versions = contents
+  .filter((line) => line && regexp.test(line))
+  .map((v) => v.replace("## ", "v"));
+
+const versionsPath = path.join("./versions.json");
+
+fs.writeFileSync(versionsPath, JSON.stringify(semverRsort(versions)));

package/package.json

@@ -1,57 +1,57 @@
 {
   "name": "@arc-ui/community-components",
-  "version": "0.1.0",
+  "version": "1.0.0",
   "type": "module",
   "homepage": "https://ui.digital-ent-int.bt.com",
   "author": "BT Business Digital UI Team <ui-digital-ent-int@bt.com>",
   "exports": {
     ".": {
-      "types": "./dist/types/index.d.ts",
-      "import": "./dist/index.es.js",
-      "require": "./dist/index.js"
+      "import": {
+        "types": "./dist/types/esm/index.d.ts",
+        "default": "./dist/index.es.js"
+      },
+      "require": {
+        "types": "./dist/types/cjs/index.d.ts",
+        "default": "./dist/index.js"
+      }
     },
     "./src": "./src/index.ts",
+    "./versions": "./versions.json",
     "./styles.css": "./dist/styles.css",
     "./*.css": "./dist/*/styles.css",
     "./*": {
-      "types": "./dist/types/components/*/index.d.ts",
-      "import": "./dist/*/*.esm.js",
-      "require": "./dist/*/*.cjs.js"
+      "import": {
+        "types": "./dist/types/esm/components/*/index.d.ts",
+        "default": "./dist/*/*.esm.js"
+      },
+      "require": {
+        "types": "./dist/types/cjs/components/*/index.d.cts",
+        "default": "./dist/*/*.cjs.js"
+      }
     }
   },
   "publishConfig": {
     "access": "public"
   },
   "peerDependencies": {
-    "@arc-ui/components": "12.0.0-beta.11",
-    "@arc-ui/theme-bt-business": "12.0.0-beta.11",
-    "@arc-ui/theme-bt-enterprise": "12.0.0-beta.11",
-    "@arc-ui/theme-ee": "12.0.0-beta.11",
+    "@arc-ui/components": "12.0.0-beta.16",
+    "@arc-ui/themes": "12.0.0-beta.16",
     "react": "^18.0.0",
     "react-dom": "^18.0.0"
   },
   "peerDependenciesMeta": {
-    "@arc-ui/theme-bt-enterprise": {
-      "optional": true
-    },
-    "@arc-ui/theme-bt-business": {
-      "optional": true
-    },
-    "@arc-ui/theme-ee": {
+    "@arc-ui/themes": {
       "optional": true
     }
   },
   "devDependencies": {
-    "@arc-ui/components": "12.0.0-beta.11",
-    "@arc-ui/icons-bt": "12.0.0-beta.11",
-    "@arc-ui/icons-ee": "12.0.0-beta.11",
-    "@arc-ui/theme-bt-business": "12.0.0-beta.11",
-    "@arc-ui/theme-bt-enterprise": "12.0.0-beta.11",
-    "@arc-ui/theme-ee": "12.0.0-beta.11",
-    "@arc-ui/tokens-arc": "12.0.0-beta.11",
-    "@arc-ui/tokens-bt-business": "12.0.0-beta.11",
-    "@arc-ui/tokens-bt-enterprise": "12.0.0-beta.11",
-    "@arc-ui/tokens-ee": "12.0.0-beta.11",
+    "@arc-ui/components": "12.0.0-beta.16",
+    "@arc-ui/icons": "12.0.0-beta.16",
+    "@arc-ui/themes": "12.0.0-beta.16",
+    "@arc-ui/tokens-arc": "12.0.0-beta.16",
+    "@arc-ui/tokens-bt-business": "12.0.0-beta.16",
+    "@arc-ui/tokens-bt-enterprise": "12.0.0-beta.16",
+    "@arc-ui/tokens-ee": "12.0.0-beta.16",
     "@rollup/plugin-commonjs": "^28.0.1",
     "@rollup/plugin-node-resolve": "^15.3.0",
     "@rollup/plugin-typescript": "^12.1.1",
@@ -65,17 +65,19 @@
     "react-dom": "^18.0.0",
     "rimraf": "^6.0.1",
     "rollup": "^4.27.3",
+    "rollup-plugin-copy": "^3.5.0",
     "rollup-plugin-delete": "^2.0.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-postcss": "^4.0.0",
+    "semver": "^7.6.3",
     "stylelint": "^16.10.0",
     "tslib": "^2.8.1",
     "typescript": "^5.6.3",
-    "@arc-ui/community-typescript-config": "^1.0.0",
-    "@arc-ui/community-eslint-config": "^1.0.0",
-    "@arc-ui/community-css-config": "^1.0.0",
-    "@arc-ui/community-build-utils": "^1.0.0",
-    "@arc-ui/community-utils": "^1.0.0"
+    "@arc-ui/community-build-utils": "^0.1.0",
+    "@arc-ui/community-css-config": "^0.1.0",
+    "@arc-ui/community-eslint-config": "^0.1.0",
+    "@arc-ui/community-utils": "^0.1.0",
+    "@arc-ui/community-typescript-config": "^0.1.0"
   },
   "browserslist": [
     "defaults",
@@ -100,6 +102,7 @@
     "lint:ts": "eslint .",
     "lint:css": "stylelint '**/*.css'",
     "ts:check": "tsc --noEmit",
-    "build": "rimraf dist && rollup -c && generate-subpath-css"
+    "build": "rimraf dist && rollup -c && generate-subpath-css",
+    "generate:versions:json": "node ./generate-versions.js"
   }
 }

package/rollup.config.js

@@ -4,6 +4,7 @@ import resolve from "@rollup/plugin-node-resolve";
 import external from "rollup-plugin-peer-deps-external";
 import postcss from "rollup-plugin-postcss";
 import del from "rollup-plugin-delete";
+import copy from "rollup-plugin-copy";
 
 import { getDirectories } from "@arc-ui/community-build-utils/get-directories";
 import { getSubPathFileMap } from "@arc-ui/community-build-utils/get-subpath-file-map";
@@ -37,7 +38,7 @@ export default [
       // file so that we can specify standard .es.js file extension.
       typescript({
         declaration: true,
-        declarationDir: "dist/types",
+        declarationDir: "dist/types/cjs",
         exclude: [
           "**/__mocks__/**/*.ts",
           "**/__tests__/**/*.tsx",
@@ -63,6 +64,19 @@ export default [
       ...basePlugins,
       typescript(),
       postcss({ ...postcssConfig, extract: false }),
+      copy({
+        targets: [
+          // TypeScript requires 2 distinct files for ESM and CJS types. See:
+          // https://devblogs.microsoft.com/typescript/announcing-typescript-4-7/
+          // https://github.com/gxmari007/vite-plugin-eslint/pull/60
+          // Copy for CJS types is made in ES bundle to ensure the declaration file generated in
+          // the previous bundle exists.
+          {
+            src: "dist/types/cjs/*",
+            dest: "dist/types/esm",
+          },
+        ],
+      }),
     ],
   },
   // Sub path esm

package/src/components/Accordion/Accordion.tsx

@@ -34,5 +34,5 @@ export const Accordion: React.FC<AccordionProps> = ({
 };
 
 export interface AccordionProps
-  extends SectionHeadingProps,
+  extends Omit<SectionHeadingProps, "isPadded">,
     AccordionDisclosureListProps {}

package/src/components/Accordion/components/AccordionDisclosureList/AccordionDisclosureList.tsx

@@ -3,7 +3,7 @@ import React from "react";
 import {
   type DisclosureProps,
   Disclosure,
-} from "@arc-ui/components/dist/Disclosure";
+} from "@arc-ui/components/Disclosure";
 
 export const AccordionDisclosureList: React.FC<
   AccordionDisclosureListProps

package/src/components/ArticleSidebar/ArticleSidebar.module.css

@@ -0,0 +1,35 @@
+/* stylelint-disable selector-pseudo-class-no-unknown */
+@import url("@arc-ui/tokens-arc/dist/custom-media.css");
+
+.tagGroup {
+  display: flex;
+  gap: 16px;
+  flex-wrap: wrap;
+}
+
+.textContent {
+  padding-right: 16px;
+}
+
+.shareButtonContainer {
+  display: flex;
+  gap: 8px;
+}
+
+:global(.arc a).shareButton {
+  color: var(--sem-color-fg-secondary-light-default);
+  background: var(--sem-color-bg-secondary-light-default);
+  border: 1px solid var(--sem-color-border-secondary-light-subtle);
+  cursor: pointer;
+  border-radius: 50%;
+  padding: 12px;
+  display: block;
+  transition:
+    0.4s ease color,
+    0.4s ease border-color;
+}
+
+:global(.arc a).shareButton:hover {
+  color: var(--sem-color-bg-primary-light-strong);
+  border-color: var(--sem-color-bg-primary-light-strong);
+}

package/src/components/ArticleSidebar/ArticleSidebar.tsx

@@ -0,0 +1,219 @@
+import React, { useId, useState } from "react";
+
+import { ArcIconSocialLinkedin } from "@arc-ui/icons/ArcIconSocialLinkedin";
+import { ArcIconSocialX } from "@arc-ui/icons/ArcIconSocialX";
+import { BtIconLink } from "@arc-ui/icons/BtIconLink";
+import { BtIconEmailUnread } from "@arc-ui/icons/BtIconEmailUnread";
+
+import { Heading } from "@arc-ui/components/Heading";
+import { Icon } from "@arc-ui/components/Icon";
+import { Text } from "@arc-ui/components/Text";
+import { Rule } from "@arc-ui/components/Rule";
+import { Link } from "@arc-ui/components/Link";
+import { Tag } from "@arc-ui/components/Tag";
+import { Toast, ToastNotification } from "@arc-ui/components/Toast";
+import { VerticalSpace } from "@arc-ui/components/VerticalSpace";
+
+import { Author } from "../Author";
+
+import { type TextSection } from "./types/text-section";
+import { type LinkSection } from "./types/link-section";
+import { type Topic } from "./types/topic";
+import { type Share } from "./types/share";
+import { type ShareButton } from "./types/share-button";
+import { type SidebarAuthor } from "./types/sidebar-author";
+
+import styles from "./ArticleSidebar.module.css";
+
+/**
+ * Use `ArticleSidebar` to provide additional information about the article.
+ */
+export const ArticleSidebar: React.FC<ArticleSidebarProps> = ({
+  author,
+  aboutSection,
+  topics,
+  share,
+  additionalContent,
+  linkSection,
+}) => {
+  const id = useId();
+  const [showToast, setShowToast] = useState(false);
+  const url = location.href;
+
+  const copyTextToClipBoard = async () => {
+    await navigator.clipboard.writeText(url);
+    setShowToast(true);
+  };
+
+  const shareButtons: ShareButton[] = [
+    {
+      isButton: true,
+      label: "Copy url to clipboard",
+      onClick: copyTextToClipBoard,
+      icon: BtIconLink,
+    },
+    {
+      label: "Share by email",
+      href: `mailto:?subject=${share.articleTitle}&body=${url}`,
+      icon: BtIconEmailUnread,
+    },
+    ...(share.linkedin
+      ? [
+          {
+            label: "Share on LinkedIn",
+            href: `https://www.linkedin.com/sharing/share-offsite/?url=${url}`,
+            icon: ArcIconSocialLinkedin,
+          },
+        ]
+      : []),
+    ...(share.x
+      ? [
+          {
+            label: "Share on x",
+            href: `https://twitter.com/intent/tweet?url=${url}`,
+            icon: ArcIconSocialX,
+          },
+        ]
+      : []),
+  ];
+
+  return (
+    <>
+      <div className={styles.textContent}>
+        {author && (
+          <>
+            <Author {...author} avatar={{ ...author.avatar, size: "xl" }} />
+          </>
+        )}
+
+        {aboutSection && (
+          <>
+            <VerticalSpace size="32" />
+            <Heading level={aboutSection.headingLevel}>
+              {aboutSection.heading}
+            </Heading>
+            <VerticalSpace size="16" />
+
+            <Text size="s">{aboutSection.content}</Text>
+          </>
+        )}
+
+        {additionalContent &&
+          additionalContent.map(({ heading, headingLevel, content }) => (
+            <>
+              <VerticalSpace size="16" />
+              <Heading level={headingLevel} size="xxs">
+                {heading}
+              </Heading>
+              <Text size="s">{content}</Text>
+            </>
+          ))}
+      </div>
+
+      {(author || aboutSection || additionalContent) && (
+        <div data-testid="content-rule">
+          <VerticalSpace size="32" />
+          <Rule />
+          <VerticalSpace size="32" />
+        </div>
+      )}
+
+      <Heading level={linkSection.headingLevel}>{linkSection.heading}</Heading>
+
+      {linkSection.links.map(({ text, url }) => (
+        <>
+          <VerticalSpace size="8" />
+          <div key={`${id}-${url}`}>
+            <Link size="s" href={url}>
+              {text}
+            </Link>
+          </div>
+        </>
+      ))}
+
+      <VerticalSpace size="32" />
+
+      {topics && (
+        <>
+          <Heading level={topics.headingLevel}>{topics.heading}</Heading>
+
+          <VerticalSpace size="16" />
+
+          <div className={styles.tagGroup}>
+            {topics.tags.map((tag) => (
+              <Tag key={`${id}-${tag.title}`} {...tag} />
+            ))}
+          </div>
+
+          <VerticalSpace size="32" />
+        </>
+      )}
+
+      <Rule />
+
+      <VerticalSpace size="32" />
+
+      <Heading level={share.headingLevel}>{share.heading}</Heading>
+
+      <VerticalSpace size="16" />
+
+      <div className={styles.shareButtonContainer}>
+        {shareButtons.map(({ isButton, label, href, icon, onClick }) => (
+          <a
+            key={`${id}-${label}`}
+            role={isButton ? "button" : undefined}
+            target="_blank"
+            rel="noreferrer"
+            className={styles.shareButton}
+            aria-label={label}
+            href={href}
+            onClick={onClick}
+          >
+            <Icon icon={icon} size={24} />
+          </a>
+        ))}
+      </div>
+
+      <Toast>
+        <ToastNotification
+          status="success"
+          title="Copied to clipboard"
+          isOpen={showToast}
+          onOpenChange={() => setShowToast(false)}
+        />
+      </Toast>
+    </>
+  );
+};
+
+export interface ArticleSidebarProps {
+  /**
+   * Props for Author component.
+   */
+  author?: SidebarAuthor;
+
+  /**
+   * Content for the about section.
+   */
+  aboutSection?: TextSection;
+
+  /**
+   * Array of headings and text for additional text sections.
+   */
+  additionalContent?: TextSection[];
+
+  /**
+   * Links that are relevant to the article.
+   */
+  linkSection: LinkSection;
+
+  /**
+   * Topics rendered as tags that are relevant to the article.
+   */
+  topics?: Topic;
+
+  /**
+   * Sharing options for the article.
+   */
+  share: Share;
+}

package/src/components/ArticleSidebar/index.ts

@@ -0,0 +1 @@
+export { ArticleSidebar, type ArticleSidebarProps } from "./ArticleSidebar";

package/src/components/ArticleSidebar/types/link-section.ts

@@ -0,0 +1,12 @@
+import { type HeadingLevel } from "@arc-ui/components/dist/Heading";
+
+interface Link {
+  text: string;
+  url: string;
+}
+
+export interface LinkSection {
+  heading: string;
+  links: Link[];
+  headingLevel?: HeadingLevel;
+}

package/src/components/ArticleSidebar/types/share-button.ts

@@ -0,0 +1,9 @@
+import { type ArcIcon } from "../../../types/arc-icon";
+
+export interface ShareButton {
+  label: string;
+  icon: ArcIcon | React.ReactElement<SVGElement>;
+  isButton?: boolean;
+  href?: string;
+  onClick?: () => void;
+}

package/src/components/ArticleSidebar/types/share.ts

@@ -0,0 +1,9 @@
+import { type HeadingLevel } from "@arc-ui/components/dist/Heading";
+
+export interface Share {
+  heading: string;
+  articleTitle: string;
+  x?: boolean;
+  headingLevel?: HeadingLevel;
+  linkedin?: boolean;
+}

package/src/components/ArticleSidebar/types/sidebar-author.ts

@@ -0,0 +1,5 @@
+import { type AuthorProps } from "../../Author";
+
+export interface SidebarAuthor extends AuthorProps {
+  avatar?: Omit<NonNullable<AuthorProps["avatar"]>, "size">;
+}

package/src/components/ArticleSidebar/types/text-section.ts

@@ -0,0 +1,7 @@
+import { type HeadingLevel } from "@arc-ui/components/dist/Heading";
+
+export interface TextSection {
+  heading: string;
+  content: string;
+  headingLevel?: HeadingLevel;
+}

package/src/components/ArticleSidebar/types/topic.ts

@@ -0,0 +1,8 @@
+import { type HeadingLevel } from "@arc-ui/components/dist/Heading";
+import { type TagProps } from "@arc-ui/components/dist/types/components/Tag/Tag";
+
+export interface Topic {
+  heading: string;
+  tags: TagProps[];
+  headingLevel?: HeadingLevel;
+}

package/src/components/Author/Author.tsx

@@ -2,10 +2,10 @@ import React from "react";
 
 import { filterDataAttrs } from "@arc-ui/community-utils/filter-data-attrs";
 
-import { Grid } from "@arc-ui/components/dist/Grid";
-import { type AvatarProps, Avatar } from "@arc-ui/components/dist/Avatar";
-import { Heading } from "@arc-ui/components/dist/Heading";
-import { Text } from "@arc-ui/components/dist/Text";
+import { Grid, GridRow, GridCol } from "@arc-ui/components/Grid";
+import { type AvatarProps, Avatar } from "@arc-ui/components/Avatar";
+import { Heading } from "@arc-ui/components/Heading";
+import { Text } from "@arc-ui/components/Text";
 
 import styles from "./Author.module.css";
 
@@ -23,13 +23,13 @@ export const Author: React.FC<AuthorProps> = ({
   return (
     <div {...filterDataAttrs(props)}>
       <Grid isFluid isGutterless>
-        <Grid.Row align="center">
-          <Grid.Col xs={isLargeAvatar ? 12 : "auto"}>
+        <GridRow align="center">
+          <GridCol xs={isLargeAvatar ? 12 : "auto"}>
             <div className={isLargeAvatar ? styles.largeAvatar : undefined}>
               <Avatar {...avatar} />
             </div>
-          </Grid.Col>
-          <Grid.Col>
+          </GridCol>
+          <GridCol>
             <div
               className={`${!isLargeAvatar && styles.authorContent}`}
               data-testid="authorContent"
@@ -37,8 +37,8 @@ export const Author: React.FC<AuthorProps> = ({
               <Heading size="xs">{name}</Heading>
               <Text size="s">{title}</Text>
             </div>
-          </Grid.Col>
-        </Grid.Row>
+          </GridCol>
+        </GridRow>
       </Grid>
     </div>
   );

package/src/components/BannerWithTabs/BannerWithTabs.module.css

@@ -17,3 +17,25 @@
     display: none;
   }
 }
+
+.bannerWithTabsHeadingCentered {
+  text-align: center;
+}
+
+@media (--arc-custom-media-min-width-s-px) {
+  .bannerWithTabsHeadingCentered {
+    padding-inline: 62px;
+  }
+}
+
+@media (--arc-custom-media-min-width-m-px) {
+  .bannerWithTabsHeadingCentered {
+    padding-inline: 86px;
+  }
+}
+
+@media (--arc-custom-media-min-width-l-px) {
+  .bannerWithTabsHeadingCentered {
+    padding-inline: 104px;
+  }
+}