@arc-ui/community-components 0.1.0

package/package.json

@@ -0,0 +1,105 @@
+{
+  "name": "@arc-ui/community-components",
+  "version": "0.1.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"
+    },
+    "./src": "./src/index.ts",
+    "./styles.css": "./dist/styles.css",
+    "./*.css": "./dist/*/styles.css",
+    "./*": {
+      "types": "./dist/types/components/*/index.d.ts",
+      "import": "./dist/*/*.esm.js",
+      "require": "./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",
+    "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": {
+      "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",
+    "@rollup/plugin-commonjs": "^28.0.1",
+    "@rollup/plugin-node-resolve": "^15.3.0",
+    "@rollup/plugin-typescript": "^12.1.1",
+    "@types/node": "^14.0.0",
+    "@types/react": "18.2.0",
+    "@types/react-dom": "18.2.7",
+    "classnames": "^2.2.6",
+    "date-fns": "2.30.0",
+    "eslint": "^8.57.1",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "rimraf": "^6.0.1",
+    "rollup": "^4.27.3",
+    "rollup-plugin-delete": "^2.0.0",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rollup-plugin-postcss": "^4.0.0",
+    "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"
+  },
+  "browserslist": [
+    "defaults",
+    "last 1 Chrome version",
+    "last 1 ChromeAndroid version",
+    "last 1 Edge version",
+    "last 1 Firefox version",
+    "Firefox ESR",
+    "Firefox 91",
+    "Firefox 78",
+    "Firefox 68",
+    "Safari >= 14",
+    "iOS >= 14",
+    "Samsung >= 16",
+    "not IE 11",
+    "not Edge < 18",
+    "not and_qq > 0",
+    "not UCAndroid > 0",
+    "not OperaMini all"
+  ],
+  "scripts": {
+    "lint:ts": "eslint .",
+    "lint:css": "stylelint '**/*.css'",
+    "ts:check": "tsc --noEmit",
+    "build": "rimraf dist && rollup -c && generate-subpath-css"
+  }
+}

package/postcss.config.cjs

@@ -0,0 +1,5 @@
+const postCssConfig = require("@arc-ui/community-css-config/postcss");
+
+module.exports = {
+  ...postCssConfig.config,
+};

package/rollup.config.js

@@ -0,0 +1,101 @@
+import typescript from "@rollup/plugin-typescript";
+import commonjs from "@rollup/plugin-commonjs";
+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 { getDirectories } from "@arc-ui/community-build-utils/get-directories";
+import { getSubPathFileMap } from "@arc-ui/community-build-utils/get-subpath-file-map";
+
+import postcssConfig from "./postcss.config.cjs";
+
+const directories = getDirectories("components");
+
+const basePlugins = [external(), resolve(), commonjs()];
+
+/**
+ * We have multiple output configs to support CommonJS and ES modules.
+ */
+export default [
+  // CommonJS
+  {
+    input: "src/index.ts",
+    output: {
+      dir: "dist",
+      format: "cjs",
+      exports: "named",
+      sourcemap: true,
+    },
+    plugins: [
+      ...basePlugins,
+      del({
+        targets: ["dist/styles.js"],
+      }), // Remove empty files
+      // We do this here because we are able to use `dir` for cjs, and
+      // declaration exports require use of a dir. ES modules require a
+      // file so that we can specify standard .es.js file extension.
+      typescript({
+        declaration: true,
+        declarationDir: "dist/types",
+        exclude: [
+          "**/__mocks__/**/*.ts",
+          "**/__tests__/**/*.tsx",
+          "**/*.test.tsx",
+          "**/*.stories.tsx",
+        ],
+      }),
+      postcss(postcssConfig),
+    ],
+  },
+  // ES Module
+  {
+    input: "src/index.ts",
+    output: [
+      {
+        file: "dist/index.es.js",
+        format: "esm",
+        exports: "named",
+        sourcemap: true,
+      },
+    ],
+    plugins: [
+      ...basePlugins,
+      typescript(),
+      postcss({ ...postcssConfig, extract: false }),
+    ],
+  },
+  // Sub path esm
+  {
+    input: getSubPathFileMap(directories, "esm"),
+    output: {
+      dir: "dist",
+      exports: "named",
+      format: "esm",
+      chunkFileNames: "_shared/esm/[name]-[hash].js",
+    },
+    plugins: [
+      ...basePlugins,
+      typescript(),
+      postcss({ ...postcssConfig, extract: false }),
+    ],
+    external: ["react", "react-dom"],
+  },
+  // Sub path cjs
+  {
+    input: getSubPathFileMap(directories, "cjs"),
+    output: {
+      dir: "dist",
+      exports: "named",
+      format: "cjs",
+
+      chunkFileNames: "_shared/cjs/[name]-[hash].js",
+    },
+    plugins: [
+      ...basePlugins,
+      typescript(),
+      postcss({ ...postcssConfig, extract: false }),
+    ],
+    external: ["react", "react-dom"],
+  },
+];

package/src/components/Accordion/Accordion.tsx

@@ -0,0 +1,38 @@
+import React from "react";
+
+import { filterDataAttrs } from "@arc-ui/community-utils/filter-data-attrs";
+
+import { SectionHeading, type SectionHeadingProps } from "../SectionHeading";
+
+import {
+  AccordionDisclosureList,
+  AccordionDisclosureListProps,
+} from "./components/AccordionDisclosureList/AccordionDisclosureList";
+
+/**
+ * Use the `Accordion` component to package together a title, content and a number of disclosure components into one section (maximum 10).
+ */
+export const Accordion: React.FC<AccordionProps> = ({
+  heading,
+  headingLevel,
+  content,
+  disclosureList,
+  ...props
+}) => {
+  return (
+    <div {...filterDataAttrs(props)}>
+      <SectionHeading
+        isPadded
+        data-testid="Accordion-header"
+        heading={heading}
+        headingLevel={headingLevel}
+        content={content}
+      />
+      <AccordionDisclosureList disclosureList={disclosureList} />
+    </div>
+  );
+};
+
+export interface AccordionProps
+  extends SectionHeadingProps,
+    AccordionDisclosureListProps {}

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

@@ -0,0 +1,44 @@
+import React from "react";
+
+import {
+  type DisclosureProps,
+  Disclosure,
+} from "@arc-ui/components/dist/Disclosure";
+
+export const AccordionDisclosureList: React.FC<
+  AccordionDisclosureListProps
+> = ({ disclosureList }) => {
+  return (
+    <>
+      {disclosureList.map(
+        (
+          {
+            children,
+            summary,
+            isOpen = false,
+            indentDetails = false,
+            headingLevel,
+          },
+          index,
+        ) => (
+          <Disclosure
+            key={index}
+            summary={summary}
+            isOpen={isOpen}
+            indentDetails={indentDetails}
+            headingLevel={headingLevel}
+          >
+            {children}
+          </Disclosure>
+        ),
+      )}
+    </>
+  );
+};
+
+export interface AccordionDisclosureListProps {
+  /**
+   * Array of `Disclosure` components. Maximum 10 in one `Accordion`.
+   */
+  disclosureList: DisclosureProps[];
+}

package/src/components/Accordion/index.ts

@@ -0,0 +1 @@
+export { Accordion, type AccordionProps } from "./Accordion";

package/src/components/Author/Author.module.css

@@ -0,0 +1,9 @@
+@import url("@arc-ui/tokens-arc/dist/custom-media.css");
+
+.authorContent {
+  padding-left: var(--sem-space-padding-70);
+}
+
+.largeAvatar {
+  margin-bottom: var(--sem-space-gap-5);
+}

package/src/components/Author/Author.tsx

@@ -0,0 +1,60 @@
+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 styles from "./Author.module.css";
+
+export const Author: React.FC<AuthorProps> = ({
+  name,
+  title,
+  avatar = {},
+  ...props
+}) => {
+  const avatarSizes = ["s", "m", "l", "xl"];
+  avatar.size = avatarSizes.includes(avatar.size || "") ? avatar.size : "m";
+
+  const isLargeAvatar = avatar.size === "l" || avatar.size === "xl";
+
+  return (
+    <div {...filterDataAttrs(props)}>
+      <Grid isFluid isGutterless>
+        <Grid.Row align="center">
+          <Grid.Col xs={isLargeAvatar ? 12 : "auto"}>
+            <div className={isLargeAvatar ? styles.largeAvatar : undefined}>
+              <Avatar {...avatar} />
+            </div>
+          </Grid.Col>
+          <Grid.Col>
+            <div
+              className={`${!isLargeAvatar && styles.authorContent}`}
+              data-testid="authorContent"
+            >
+              <Heading size="xs">{name}</Heading>
+              <Text size="s">{title}</Text>
+            </div>
+          </Grid.Col>
+        </Grid.Row>
+      </Grid>
+    </div>
+  );
+};
+
+export interface AuthorProps {
+  /**
+   * Name of the Author.
+   */
+  name: string;
+  /**
+   * Job title of the Author.
+   */
+  title: string;
+  /**
+   * Optional Avatar for the Author.
+   */
+  avatar?: AvatarProps;
+}

package/src/components/Author/index.ts

@@ -0,0 +1 @@
+export { Author, type AuthorProps } from "./Author";

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

@@ -0,0 +1,19 @@
+@import url("@arc-ui/tokens-arc/dist/custom-media.css");
+
+.contentSwitcherWrapper {
+  display: none;
+}
+
+.contentSwitcherDropdownWrapper {
+  display: block;
+}
+
+@media (--arc-custom-media-min-width-s-px) {
+  .contentSwitcherWrapper {
+    display: block;
+  }
+
+  .contentSwitcherDropdownWrapper {
+    display: none;
+  }
+}

package/src/components/BannerWithTabs/BannerWithTabs.tsx

@@ -0,0 +1,74 @@
+import React, { FC, useState } from "react";
+
+import { HeroBanner } from "@arc-ui/components/dist/HeroBanner";
+import { HeroBannerProps } from "@arc-ui/components/dist/types/components/HeroBanner/HeroBanner";
+
+import { ContentSwitcher } from "@arc-ui/components/dist/ContentSwitcher";
+import { ContentSwitcherDropdown } from "@arc-ui/components/dist/ContentSwitcherDropdown";
+
+import styles from "./BannerWithTabs.module.css";
+
+export const BannerWithTabs: FC<BannerWithTabsProps> = ({
+  tabs,
+  defaultValue,
+}) => {
+  const initialTab = defaultValue ?? tabs[0]?.value;
+  const [selectedTab, setSelectedTab] = useState<string>(initialTab);
+
+  return (
+    <>
+      <div className={styles.contentSwitcherWrapper}>
+        <ContentSwitcher
+          value={selectedTab}
+          onValueChange={(value) => setSelectedTab(value)}
+        >
+          <ContentSwitcher.List isInset>
+            {tabs.map(({ label, value }, index) => (
+              <ContentSwitcher.Tab
+                label={label}
+                value={value}
+                key={`${index}-${value}`}
+              />
+            ))}
+          </ContentSwitcher.List>
+          {tabs.map(({ value, content }, index) => (
+            <ContentSwitcher.Content value={value} key={index}>
+              <HeroBanner {...content} />
+            </ContentSwitcher.Content>
+          ))}
+        </ContentSwitcher>
+      </div>
+
+      <div className={styles.contentSwitcherDropdownWrapper}>
+        <ContentSwitcherDropdown
+          value={selectedTab}
+          tabs={tabs}
+          isInset
+          isFluid
+          onValueChange={(value) => setSelectedTab(value)}
+        >
+          {tabs.map(({ value, content }, index) => (
+            <ContentSwitcherDropdown.Content
+              value={value}
+              key={`${index}-${value}`}
+            >
+              <HeroBanner {...content} />
+            </ContentSwitcherDropdown.Content>
+          ))}
+        </ContentSwitcherDropdown>
+      </div>
+    </>
+  );
+};
+
+export interface BannerWithTabsProps {
+  /**
+   * Determine what tabs to render. They need both a `value` and `label` prop
+   */
+  tabs: { value: string; label: string; content: HeroBannerProps }[];
+
+  /**
+   * Default to an inital value of a tab. If this is left blank it will default to first tab.
+   */
+  defaultValue?: string;
+}

package/src/components/BannerWithTabs/index.ts

@@ -0,0 +1 @@
+export { BannerWithTabs, type BannerWithTabsProps } from "./BannerWithTabs";

package/src/components/CopyLead/CopyLead.module.css

@@ -0,0 +1,127 @@
+@import url("@arc-ui/tokens-arc/dist/custom-media.css");
+
+.buttonContainer {
+  margin: var(--sem-space-padding-150) auto 0;
+  width: 100%;
+}
+
+.col {
+  flex: 1 1 auto;
+  width: 100%;
+}
+
+.container {
+  align-items: flex-start;
+  display: flex;
+  gap: var(--sem-space-padding-150);
+}
+
+.container--content {
+  flex-direction: column;
+}
+
+.container--media {
+  flex-direction: column-reverse;
+}
+
+.container--align-center {
+  align-items: center;
+}
+
+.container--align-top {
+  align-items: flex-start;
+}
+
+.list {
+  list-style: none;
+  margin: 0;
+  max-width: 480px;
+  padding: 0;
+}
+
+.listItem {
+  display: flex;
+
+  &:nth-of-type(n + 2) {
+    margin-top: var(--sem-space-padding-150);
+  }
+}
+
+.listItemCentered {
+  align-items: center;
+}
+
+.listItemIconContainer {
+  flex: 0 0 auto;
+}
+
+.listItemTextContainer {
+  flex: 1 1 auto;
+  padding: 0 0 0 var(--sem-space-padding-80);
+}
+
+.imgWrapper {
+  border-radius: var(--sem-border-radius-s);
+  overflow: hidden;
+}
+
+.mediaContainer {
+  margin-bottom: var(--sem-space-padding-150);
+}
+
+.content {
+  max-width: 715px;
+}
+
+@media (--arc-custom-media-min-width-s-px) {
+  .buttonContainer {
+    width: max-content;
+  }
+}
+
+@media (--arc-custom-media-min-width-m-px) {
+  .container {
+    gap: var(--sem-space-padding-110);
+  }
+
+  .container--media,
+  .container--content {
+    flex-direction: row;
+  }
+
+  .container--reverse {
+    flex-direction: row-reverse;
+  }
+
+  .buttonContainer {
+    margin: var(--sem-space-padding-150) 0 0;
+  }
+
+  .col {
+    width: 50%;
+  }
+
+  .list {
+    max-width: 100%;
+  }
+
+  .listItemTextContainer {
+    padding: 0 var(--sem-space-padding-80);
+  }
+}
+
+@media (--arc-custom-media-min-width-l-px) {
+  .listItemTextContainer {
+    padding: 0 var(--sem-space-padding-110);
+  }
+}
+
+@media (--arc-custom-media-min-width-xl-px) {
+  .container {
+    gap: var(--sem-space-padding-130);
+  }
+
+  .listItemTextContainer {
+    padding: 0 var(--sem-space-padding-130);
+  }
+}

package/src/components/CopyLead/CopyLead.tsx

@@ -0,0 +1,102 @@
+import React from "react";
+import { filterDataAttrs } from "@arc-ui/community-utils/filter-data-attrs";
+
+import { type HeadingLevel } from "@arc-ui/components/dist/Heading";
+import { type VideoPlayerProps } from "@arc-ui/components/dist/VideoPlayer";
+
+import {
+  type CopyLeadButton,
+  type CopyLeadImage,
+  type CopyLeadListItem,
+} from "./types";
+
+import { MediaTemplate } from "./templates/Media";
+import { ContentTemplate } from "./templates/Content";
+
+/**
+ * Use `CopyLead` to give supporting information about a page or proposition. It can be used to call out key benefits in bullet points, or link to a supporting explanatory video. An optional CTA can be used to link to further information or trigger a sales or enquiry journey.
+ */
+export const CopyLead: React.FC<CopyLeadProps> = ({
+  button,
+  heading,
+  headingLevel = "2",
+  listItems,
+  video,
+  image,
+  content,
+  isReverseOrder = false,
+  ...props
+}) => {
+  console.log(video);
+  if (video || image) {
+    return (
+      <MediaTemplate
+        content={content}
+        video={video}
+        image={image}
+        listItems={listItems}
+        heading={heading}
+        headingLevel={headingLevel}
+        button={button}
+        isReverseOrder={isReverseOrder}
+        {...filterDataAttrs(props)}
+      />
+    );
+  }
+
+  if (content) {
+    return (
+      <ContentTemplate
+        listItems={listItems}
+        heading={heading}
+        headingLevel={headingLevel}
+        button={button}
+        content={content}
+      />
+    );
+  }
+
+  return null;
+};
+
+export interface CopyLeadProps {
+  /**
+   * heading for `CopyLead`.
+   */
+  heading: string;
+
+  /**
+   * Determine a heading level for `<MediaTemplate />` and `<ContentTemplate />`
+   */
+  headingLevel?: HeadingLevel;
+
+  /**
+   * Reverse the columns so the image / video appears on the left. Doesn't affect mobile layouts, and is only applied if there is a video or an image.
+   */
+  isReverseOrder?: boolean;
+
+  /**
+   * Text content for `CopyLead`.
+   */
+  content?: string;
+
+  /**
+   * Button for `CopyLead`.
+   */
+  button?: CopyLeadButton;
+
+  /**
+   * Image for `CopyLead`.
+   */
+  image?: CopyLeadImage;
+
+  /**
+   * Video embed. Supported platforms are YouTube and Vimeo.
+   */
+  video?: VideoPlayerProps;
+
+  /**
+   * List items for `CopyLead`
+   */
+  listItems: CopyLeadListItem[];
+}