Add Heading and Text components

packages/react-components/package.json

@@ -24,7 +24,7 @@
   "types": "dist/index.d.ts",
   "dependencies": {
     "@bcgov/design-tokens": "3.1.1",
-    "react-aria-components": "1.3.3"
+    "react-aria-components": "1.5.0"
   },
   "peerDependencies": {
     "@bcgov/bc-sans": "^2.1.0",
@@ -37,15 +37,15 @@
     "@rollup/plugin-json": "6.1.0",
     "@rollup/plugin-node-resolve": "15.2.3",
     "@rollup/plugin-typescript": "11.1.6",
-    "@storybook/addon-a11y": "8.3.2",
-    "@storybook/addon-essentials": "8.3.2",
-    "@storybook/addon-interactions": "8.3.2",
-    "@storybook/addon-links": "8.3.2",
-    "@storybook/blocks": "8.3.2",
-    "@storybook/react": "8.3.2",
-    "@storybook/react-vite": "8.3.2",
-    "@storybook/test": "8.3.2",
-    "@storybook/test-runner": "0.19.1",
+    "@storybook/addon-a11y": "8.4.7",
+    "@storybook/addon-essentials": "8.4.7",
+    "@storybook/addon-interactions": "8.4.7",
+    "@storybook/addon-links": "8.4.7",
+    "@storybook/blocks": "8.4.7",
+    "@storybook/react": "8.4.7",
+    "@storybook/react-vite": "8.4.7",
+    "@storybook/test": "8.4.7",
+    "@storybook/test-runner": "0.20.1",
     "@testing-library/jest-dom": "6.5.0",
     "@testing-library/react": "16.0.1",
     "@types/jest": "29.5.13",
@@ -66,7 +66,7 @@
     "rollup-plugin-dts": "6.1.1",
     "rollup-plugin-peer-deps-external": "2.2.4",
     "rollup-plugin-postcss": "4.0.2",
-    "storybook": "8.3.2",
+    "storybook": "8.4.7",
     "ts-jest": "29.2.5",
     "ts-node": "10.9.2",
     "tslib": "2.7.0",

packages/react-components/src/App.tsx

@@ -7,6 +7,7 @@ import "@bcgov/bc-sans/css/BC_Sans.css";
 import { Button, Footer, FooterLinks, Header } from "@/components";
 import useWindowDimensions from "@/hooks/useWindowDimensions";
 import {
+  AccordionGroupPage,
   AlertBannerPage,
   ButtonPage,
   ButtonGroupPage,
@@ -17,6 +18,7 @@ import {
   RadioGroupPage,
   SelectPage,
   TagGroupPage,
+  TextPage,
   TextAreaPage,
   TextFieldPage,
   SwitchPage,
@@ -156,6 +158,7 @@ function App() {
         <h1>Components</h1>
         <ButtonPage />
         <ButtonGroupPage />
+        <AccordionGroupPage />
         <CalloutPage />
         <CheckboxGroupPage />
         <SwitchPage />
@@ -167,6 +170,7 @@ function App() {
         <TooltipPage />
         <TextAreaPage />
         <TextFieldPage />
+        <TextPage />
       </main>
       <Footer />
       <Footer

packages/react-components/src/components/Accordion/Accordion.css

@@ -0,0 +1,63 @@
+.bcds-react-aria-Disclosure {
+  display: flex;
+  flex-direction: column;
+  border: var(--layout-border-width-small) solid
+    var(--surface-color-border-default);
+  border-radius: var(--layout-border-radius-medium);
+  overflow: hidden;
+}
+
+.bcds-react-aria-Disclosure--Button {
+  display: inline-flex;
+  flex-direction: row;
+  padding: var(--layout-padding-small) var(--layout-padding-medium);
+  gap: var(--layout-margin-small);
+  justify-content: space-between;
+  align-items: center;
+  background-color: var(--surface-color-background-light-gray);
+  border: none;
+  cursor: pointer;
+  font: var(--typography-bold-body);
+  color: var(--typography-color-primary);
+}
+
+/* Hover */
+.bcds-react-aria-Disclosure--Button[data-hovered] {
+  background-color: var(--surface-color-menus-hover);
+}
+
+/* Accordion content */
+.bcds-react-aria-Disclosure[data-expanded]
+  > .bcds-react-aria-Disclosure--Panel {
+  display: flex;
+  align-items: flex-start;
+  padding: var(--layout-padding-medium);
+  gap: var(--layout-margin-small);
+  background-color: var(--surface-color-forms-default);
+  font: var(--typography-regular-body);
+}
+
+/* Focus state */
+.bcds-react-aria-Disclosure[data-focus-visible-within] {
+  outline: solid var(--layout-border-width-medium)
+    var(--surface-color-border-active);
+  outline-offset: var(--layout-margin-hair);
+}
+
+/* Override default focus behaviour for button */
+.bcds-react-aria-Disclosure[data-focus-visible-within]
+  > .bcds-react-aria-Disclosure--Button {
+  outline: none;
+}
+
+.bcds-react-aria-Disclosure--Button[data-focused] {
+  outline: none;
+}
+
+/* Disabled state */
+.bcds-react-aria-Disclosure[data-disabled]
+  > .bcds-react-aria-Disclosure--Button {
+  background-color: var(--surface-color-forms-disabled);
+  color: var(--typography-color-disabled);
+  cursor: not-allowed;
+}

packages/react-components/src/components/Accordion/Accordion.tsx

@@ -0,0 +1,42 @@
+import {
+  Disclosure,
+  DisclosurePanel,
+  DisclosureProps as DisclosureProps,
+} from "react-aria-components";
+
+import "./Accordion.css";
+import Button from "../Button";
+import SvgChevronUpIcon from "../Icons/SvgChevronUpIcon";
+import SvgChevronDownIcon from "../Icons/SvgChevronDownIcon";
+
+export interface AccordionProps extends DisclosureProps {
+  /* Button label text */
+  label?: string;
+}
+
+export default function Accordion({
+  label,
+  children,
+  ...props
+}: AccordionProps) {
+  return (
+    <Disclosure className={`bcds-react-aria-Disclosure`} {...props}>
+      {({ isExpanded }) => (
+        <>
+          <Button
+            className="bcds-react-aria-Disclosure--Button"
+            size="small"
+            variant="link"
+            slot="trigger"
+          >
+            {label}
+            {isExpanded ? <SvgChevronUpIcon /> : <SvgChevronDownIcon />}
+          </Button>
+          <DisclosurePanel className="bcds-react-aria-Disclosure--Panel">
+            <>{children}</>
+          </DisclosurePanel>
+        </>
+      )}
+    </Disclosure>
+  );
+}

packages/react-components/src/components/Accordion/index.ts

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

packages/react-components/src/components/AccordionGroup/AccordionGroup.css

@@ -0,0 +1,70 @@
+.bcds-react-aria-DisclosureGroup {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  gap: var(--layout-border-width-small);
+  background-color: var(--surface-color-border-default);
+  border: var(--layout-border-width-small) solid
+    var(--surface-color-border-default);
+  border-radius: var(--layout-border-radius-medium);
+  overflow: hidden;
+}
+
+/* Override individual accordion item borders */
+.bcds-react-aria-DisclosureGroup > .bcds-react-aria-Disclosure {
+  border: none;
+  border-radius: var(--layout-border-radius-none);
+}
+
+/* Focus state */
+.bcds-react-aria-DisclosureGroup
+  > .bcds-react-aria-Disclosure[data-focus-visible-within] {
+  border-radius: var(--layout-border-radius-hair);
+  outline-offset: calc(var(--layout-margin-hair) * -1);
+}
+
+/* Title styles */
+.bcds-react-aria-DisclosureGroup--Title {
+  color: var(--typography-color-primary);
+  margin: var(--layout-margin-medium) var(--layout-margin-none);
+}
+
+.bcds-react-aria-DisclosureGroup--Title > h1 {
+  font: var(--typography-bold-h1);
+  margin-block-start: 0;
+  margin-block-end: 0;
+}
+
+.bcds-react-aria-DisclosureGroup--Title > h2 {
+  font: var(--typography-bold-h2);
+  margin-block-start: 0;
+  margin-block-end: 0;
+}
+
+.bcds-react-aria-DisclosureGroup--Title > h3 {
+  font: var(--typography-bold-h3);
+  margin-block-start: 0;
+  margin-block-end: 0;
+}
+
+.bcds-react-aria-DisclosureGroup--Title > h4 {
+  font: var(--typography-bold-h4);
+  margin-block-start: 0;
+  margin-block-end: 0;
+}
+
+.bcds-react-aria-DisclosureGroup--Title > h5 {
+  font: var(--typography-bold-h5);
+  margin-block-start: 0;
+  margin-block-end: 0;
+}
+
+.bcds-react-aria-DisclosureGroup--Title > h6 {
+  font: var(--typography-bold-h6);
+  margin-block-start: 0;
+  margin-block-end: 0;
+}
+
+.bcds-react-aria-DisclosureGroup--Title > span {
+  font: var(--typography-bold-large-body);
+}

packages/react-components/src/components/AccordionGroup/AccordionGroup.tsx

@@ -0,0 +1,48 @@
+import { DisclosureGroup, DisclosureGroupProps } from "react-aria-components";
+
+import "./AccordionGroup.css";
+
+export interface AccordionGroupProps extends DisclosureGroupProps {
+  /* Sets label displayed above accordion group */
+  title?: string;
+  /* Sets element type for accordion group title. If not set, defaults to <span> */
+  titleElement?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+}
+
+export default function AccordionGroup({
+  title,
+  titleElement,
+  children,
+  ...props
+}: AccordionGroupProps) {
+  function getTitle() {
+    switch (titleElement) {
+      case "h1":
+        return <h1>{title}</h1>;
+      case "h2":
+        return <h2>{title}</h2>;
+      case "h3":
+        return <h3>{title}</h3>;
+      case "h4":
+        return <h4>{title}</h4>;
+      case "h5":
+        return <h5>{title}</h5>;
+      case "h6":
+        return <h6>{title}</h6>;
+      default:
+        return <span>{title}</span>;
+    }
+  }
+  return (
+    <>
+      {title && (
+        <div className="bcds-react-aria-DisclosureGroup--Title">
+          {getTitle()}
+        </div>
+      )}
+      <DisclosureGroup className="bcds-react-aria-DisclosureGroup" {...props}>
+        {children}
+      </DisclosureGroup>
+    </>
+  );
+}

packages/react-components/src/components/AccordionGroup/index.ts

@@ -0,0 +1,2 @@
+export { default } from "./AccordionGroup";
+export type { AccordionGroupProps } from "./AccordionGroup";

packages/react-components/src/components/Heading/Heading.css

@@ -0,0 +1,44 @@
+/* Headings */
+h1.bcds-react-aria-Heading {
+  font: var(--typography-bold-h1);
+}
+
+h2.bcds-react-aria-Heading {
+  font: var(--typography-bold-h2);
+}
+
+h3.bcds-react-aria-Heading {
+  font: var(--typography-bold-h3);
+}
+
+h4.bcds-react-aria-Heading {
+  font: var(--typography-bold-h4);
+}
+
+h5.bcds-react-aria-Heading {
+  font: var(--typography-bold-h5);
+}
+
+h6.bcds-react-aria-Heading {
+  font: var(--typography-bold-h6);
+}
+
+/* Text colour */
+.bcds-react-aria-Heading.primary {
+  color: var(--typography-color-primary);
+}
+.bcds-react-aria-Heading.primaryInvert {
+  color: var(--typography-color-primary-invert);
+}
+.bcds-react-aria-Heading.secondary {
+  color: var(--typography-color-secondary);
+}
+.bcds-react-aria-Heading.secondaryInvert {
+  color: var(--typography-color-secondary-invert);
+}
+.bcds-react-aria-Heading.disabled {
+  color: var(--typography-color-disabled);
+}
+.bcds-react-aria-Heading.danger {
+  color: var(--typography-color-danger);
+}

packages/react-components/src/components/Heading/Heading.tsx

@@ -0,0 +1,32 @@
+import {
+  Heading as ReactAriaHeading,
+  HeadingProps as ReactAriaHeadingProps,
+} from "react-aria-components";
+
+import "./Heading.css";
+
+export interface HeadingProps extends ReactAriaHeadingProps {
+  /* Sets text color, defaults to primary */
+  color?:
+    | "primary"
+    | "primaryInvert"
+    | "secondary"
+    | "secondaryInvert"
+    | "disabled"
+    | "danger";
+  /* If true, renders component without CSS class */
+  isUnstyled?: boolean;
+}
+
+export default function Heading({
+  color = "primary",
+  isUnstyled = false,
+  ...props
+}: HeadingProps) {
+  return (
+    <ReactAriaHeading
+      className={isUnstyled ? undefined : `bcds-react-aria-Heading ${color}`}
+      {...props}
+    />
+  );
+}

packages/react-components/src/components/Heading/index.ts

@@ -0,0 +1,2 @@
+export { default } from "./Heading";
+export type { HeadingProps } from "./Heading";