Merge pull request #294 from bcgov/feature/footer-react-component

Add Footer component to @bcgov/design-system-react-components

Author: ty2k

packages/react-components/CHANGELOG.md

@@ -1,11 +1,17 @@
 # Changelog
 
+## 0.0.5
+
+### Added
+
+- Added Footer component.
+
 ## 0.0.4
 
 ### Changed
 
 - Use `react-aria-components` v1.1.1.
-- Updated class names in `Button`, `Select`, `Tag`, `TagGroup`, and `TagList` to add `bcds-` prefix to prevent style collisions with other instances of React Aria Components.
+- Updated class names in Button, Select, Tag, TagGroup, and TagList to add `bcds-` prefix to prevent style collisions with other instances of React Aria Components.
 
 ### Added
 

packages/react-components/README.md

@@ -33,6 +33,7 @@ import "@bcgov/bc-sans/css/BC_Sans.css";
 // Import the individual components you need
 import {
   Button,
+  Footer,
   Header,
   TagGroup,
   TagList
@@ -58,6 +59,7 @@ export default function App() {
         />
       </TagGroup>
     </main>
+    <Footer/>
   );
 }
 ```
@@ -67,6 +69,7 @@ export default function App() {
 | Component              | React Aria Components docs link                           |
 | ---------------------- | --------------------------------------------------------- |
 | Button                 | https://react-spectrum.adobe.com/react-aria/Button.html   |
+| Footer                 | N/A                                                       |
 | Header                 | N/A                                                       |
 | Select                 | https://react-spectrum.adobe.com/react-aria/Select.html   |
 | TagGroup, TagList, Tag | https://react-spectrum.adobe.com/react-aria/TagGroup.html |

packages/react-components/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@bcgov/design-system-react-components",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "type": "module",
   "scripts": {
     "rollup": "rollup -c --bundleConfigAsCjs",
@@ -32,15 +32,15 @@
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-typescript": "^11.1.6",
-    "@storybook/addon-essentials": "^8.0.0-rc.1",
-    "@storybook/addon-interactions": "^8.0.0-rc.1",
-    "@storybook/addon-links": "^8.0.0-rc.1",
-    "@storybook/blocks": "^8.0.0-rc.1",
-    "@storybook/react": "^8.0.0-rc.1",
-    "@storybook/react-vite": "^8.0.0-rc.1",
+    "@storybook/addon-essentials": "^8.0.0-rc.3",
+    "@storybook/addon-interactions": "^8.0.0-rc.3",
+    "@storybook/addon-links": "^8.0.0-rc.3",
+    "@storybook/blocks": "^8.0.0-rc.3",
+    "@storybook/react": "^8.0.0-rc.3",
+    "@storybook/react-vite": "^8.0.0-rc.3",
     "@storybook/testing-library": "^0.2.2",
     "@types/react": "^18.2.64",
-    "@types/react-dom": "^18.2.20",
+    "@types/react-dom": "^18.2.21",
     "@typescript-eslint/eslint-plugin": "^7.1.1",
     "@typescript-eslint/parser": "^7.1.1",
     "@vitejs/plugin-react": "^4.2.1",
@@ -52,7 +52,7 @@
     "rollup-plugin-dts": "^6.1.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-postcss": "^4.0.2",
-    "storybook": "^8.0.0-rc.1",
+    "storybook": "^8.0.0-rc.3",
     "tslib": "^2.6.2",
     "typescript": "^5.4.2",
     "vite": "^5.1.5"

packages/react-components/package.json

@@ -5,6 +5,7 @@ import "@bcgov/design-tokens/css/variables.css";
 import "@bcgov/bc-sans/css/BC_Sans.css";
 
 import Button from "@/components/Button";
+import Footer from "./components/Footer";
 import Header from "@/components/Header";
 import useWindowDimensions from "@/hooks/useWindowDimensions";
 import { ButtonPage, SelectPage, TagGroupPage } from "@/pages";
@@ -119,6 +120,34 @@ function App() {
         <SelectPage />
         <TagGroupPage />
       </main>
+      <Footer />
+      <Footer
+        acknowledgement={<p>Optional land acknowledgement slot.</p>}
+        logo={<SvgMenuIcon />}
+        contact={<p>Optional contact information slot.</p>}
+        links={
+          <>
+            <span className="more-info">Optional links list</span>
+            <ul>
+              <li>This is a very long link, far longer than the average</li>
+              <li>Link</li>
+              <li>Link</li>
+              <li>Link</li>
+              <li>Link</li>
+              <li>Link</li>
+              <li>Link</li>
+              <li>Link</li>
+              <li>Link</li>
+              <li>Link</li>
+              <li>Link</li>
+              <li>Link</li>
+              <li>Link</li>
+              <li>Link</li>
+            </ul>
+          </>
+        }
+        copyright="Copyright 2025 BC Gov"
+      />
     </>
   );
 }

packages/react-components/src/App.tsx

@@ -6,9 +6,21 @@ import {
 import "./Button.css";
 
 export interface ButtonProps extends ReactAriaButtonProps {
+  /**
+   * Defaults to `medium`. `small` is shorter vertically.
+   */
   size?: "small" | "medium";
+  /**
+   * Defaults to `primary`.
+   */
   variant?: "primary" | "secondary" | "tertiary" | "link";
+  /**
+   * For destructive/deletion actions.
+   */
   danger?: boolean;
+  /**
+   * If true, renders a square button intended for a single icon.
+   */
   isIconButton?: boolean;
 }
 

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

@@ -0,0 +1,240 @@
+.bcds-footer {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  width: 100%;
+}
+
+.bcds-footer > .bcds-footer--acknowledgement {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-around;
+  border-top: var(--layout-border-width-large) solid
+    var(--surface-brand-gold-60);
+  border-bottom: var(--layout-border-width-large) solid
+    var(--surface-brand-gold-60);
+  background-color: var(--surface-brand-gray-110);
+  width: 100%;
+}
+
+.bcds-footer
+  > .bcds-footer--acknowledgement
+  > .bcds-footer--acknowledgement-text {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: stretch;
+  color: var(--typography-color-primary-invert);
+  font: var(--typography-regular-label);
+  max-width: 1100px;
+  padding: var(--layout-padding-xlarge);
+}
+
+.bcds-footer
+  > .bcds-footer--acknowledgement
+  > .bcds-footer--acknowledgement-text
+  > p {
+  margin: var(--layout-margin-none);
+}
+
+.bcds-footer > .bcds-footer--container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-around;
+  background-color: var(--surface-background-light);
+  padding: var(--layout-padding-xlarge);
+}
+
+.bcds-footer > .bcds-footer--container > .bcds-footer--container-content {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  gap: var(--layout-padding-xlarge);
+  max-width: 1100px;
+  width: 100%;
+}
+
+.bcds-footer
+  > .bcds-footer--container
+  > .bcds-footer--container-content
+  > .bcds-footer--logo-links {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: flex-start;
+  column-gap: var(--layout-padding-xlarge);
+  row-gap: var(--layout-padding-medium);
+  justify-content: space-between;
+  width: 100%;
+}
+
+.bcds-footer
+  > .bcds-footer--container
+  > .bcds-footer--container-content
+  > .bcds-footer--logo-links
+  > .bcds-footer--logo {
+  display: flex;
+  flex-direction: column;
+  gap: var(--layout-padding-large);
+  min-width: 324px;
+  width: 576px;
+}
+
+.bcds-footer
+  > .bcds-footer--container
+  > .bcds-footer--container-content
+  > .bcds-footer--logo-links
+  > .bcds-footer--logo
+  > #bcgov-logo-footer {
+  width: 146px;
+  min-width: 146px;
+}
+
+.bcds-footer
+  > .bcds-footer--container
+  > .bcds-footer--container-content
+  > .bcds-footer--logo-links
+  > .bcds-footer--logo
+  > p {
+  font: var(--typography-regular-label);
+  margin: var(--layout-margin-none);
+}
+
+.bcds-footer
+  > .bcds-footer--container
+  > .bcds-footer--container-content
+  > .bcds-footer--logo-links
+  > .bcds-footer--logo
+  > p
+  > a {
+  color: var(--typography-color-secondary);
+  font: var(--typography-regular-label);
+  text-decoration: underline;
+}
+
+.bcds-footer
+  > .bcds-footer--container
+  > .bcds-footer--container-content
+  > .bcds-footer--logo-links
+  > .bcds-footer--logo
+  > p
+  > a:hover {
+  text-decoration: none;
+}
+
+.bcds-footer
+  > .bcds-footer--container
+  > .bcds-footer--container-content
+  > .bcds-footer--logo-links
+  > .bcds-footer--links
+  > .more-info {
+  font: var(--typography-bold-label);
+  margin-bottom: var(--layout-padding-small);
+  text-transform: uppercase;
+}
+
+.bcds-footer
+  > .bcds-footer--container
+  > .bcds-footer--container-content
+  > .bcds-footer--logo-links
+  > .bcds-footer--links
+  > ul {
+  column-count: 2;
+  column-width: var(--layout-padding-medium);
+  list-style: none;
+  padding: var(--layout-padding-none);
+  width: 320px;
+}
+
+.bcds-footer
+  > .bcds-footer--container
+  > .bcds-footer--container-content
+  > .bcds-footer--logo-links
+  > .bcds-footer--links
+  > ul
+  > li {
+  font: var(--typography-regular-label);
+  margin-bottom: var(--layout-padding-small);
+}
+
+.bcds-footer
+  > .bcds-footer--container
+  > .bcds-footer--container-content
+  > .bcds-footer--logo-links
+  > .bcds-footer--links
+  > ul
+  > li
+  > a {
+  color: var(--typography-color-primary);
+  text-decoration: none;
+}
+
+.bcds-footer
+  > .bcds-footer--container
+  > .bcds-footer--container-content
+  > .bcds-footer--logo-links
+  > .bcds-footer--links
+  > ul
+  > li
+  > a:hover {
+  text-decoration: underline;
+}
+
+.bcds-footer > .bcds-footer--container > .bcds-footer--container-content > hr {
+  background-color: var(--surface-border-dark);
+  border: var(--layout-border-width-none);
+  height: var(--surface-border-width-small);
+  margin: var(--layout-margin-none);
+  width: 100%;
+}
+
+p.bcds-footer--copyright {
+  color: var(--typography-color-secondary);
+  font: var(--typography-regular-body);
+  margin: var(--layout-margin-none);
+}
+
+/* Tablet - let links drop beneath logo */
+@media (max-width: 991px) {
+  .bcds-footer
+    > .bcds-footer--container
+    > .bcds-footer--container-content
+    > .bcds-footer--logo-links {
+    flex-wrap: wrap;
+  }
+
+  .bcds-footer
+    > .bcds-footer--container
+    > .bcds-footer--container-content
+    > .bcds-footer--logo-links
+    > .bcds-footer--logo {
+    max-width: 324px;
+  }
+}
+
+/* Extra small screens */
+@media (max-width: 575px) {
+  .bcds-footer
+    > .bcds-footer--acknowledgement
+    > .bcds-footer--acknowledgement-text {
+    padding: var(--layout-padding-xlarge) var(--layout-padding-medium);
+  }
+
+  .bcds-footer > .bcds-footer--container {
+    padding: var(--layout-padding-medium);
+  }
+
+  .bcds-footer > .bcds-footer--container > .bcds-footer--container-content {
+    gap: var(--layout-padding-medium);
+  }
+
+  .bcds-footer
+    > .bcds-footer--container
+    > .bcds-footer--container-content
+    > .bcds-footer--logo-links
+    > .bcds-footer--logo {
+    gap: var(--layout-padding-medium);
+  }
+}