add color prop to Heading and flesh out docs

bcgov · Dec 12, 2024 · cbb2600 · cbb2600
1 parent 1c4c985
commit cbb2600
Show file tree

Hide file tree

Showing 4 changed files with 65 additions and 1 deletion.
diff --git a/packages/react-components/src/components/Heading/Heading.css b/packages/react-components/src/components/Heading/Heading.css
@@ -22,3 +22,23 @@ h5.bcds-react-aria-Heading {
 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);
+}
diff --git a/packages/react-components/src/components/Heading/Heading.tsx b/packages/react-components/src/components/Heading/Heading.tsx
@@ -6,17 +6,26 @@ import {
 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"}
+      className={isUnstyled ? undefined : `bcds-react-aria-Heading ${color}`}
       {...props}
     />
   );

diff --git a/packages/react-components/src/stories/Heading.mdx b/packages/react-components/src/stories/Heading.mdx
@@ -45,6 +45,10 @@ You can override the default styling of a heading by either:
 
 <Canvas of={HeadingStories.UnstyledHeading} />
 
+Use the `color` prop to set the text colour, from the options defined in the design system colour palette:
+
+<Canvas of={HeadingStories.PrimaryInvert} />
+
 ### Heading level
 
 Use the `level` prop to set the heading level. `level` expects a number from 1 to 6:

diff --git a/packages/react-components/src/stories/Heading.stories.tsx b/packages/react-components/src/stories/Heading.stories.tsx
@@ -16,6 +16,19 @@ const meta = {
       control: { type: "object" },
       description: "Populates heading text",
     },
+    color: {
+      control: {
+        type: "select",
+        options: [
+          "primary",
+          "primaryInvert",
+          "secondary",
+          "secondaryInvert",
+          "disabled",
+          "danger",
+        ],
+      },
+    },
     isUnstyled: {
       control: { type: "boolean" },
       description:
@@ -36,6 +49,24 @@ export const HeadingTemplate: Story = {
   render: ({ ...args }: HeadingProps) => <Heading {...args} />,
 };
 
+export const PrimaryInvert: Story = {
+  args: {
+    level: 2,
+    color: "primaryInvert",
+    children: ["Heading with inverted primary colour"],
+  },
+  render: ({ ...args }: HeadingProps) => (
+    <div
+      style={{
+        backgroundColor: "var(--surface-color-background-dark-blue)",
+        padding: "var(--layout-padding-small) var(--layout-padding-large)",
+      }}
+    >
+      <Heading {...args} />
+    </div>
+  ),
+};
+
 export const UnstyledHeading: Story = {
   ...HeadingTemplate,
   args: {