diff --git a/package-lock.json b/package-lock.json index a802b69687..ea7cc49225 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,7 +11,7 @@ "dependencies": { "@mdx-js/mdx": "^1.6.22", "@mdx-js/react": "^1.6.22", - "@pantheon-systems/pds-toolkit-react": "^1.0.0-dev.173", + "@pantheon-systems/pds-toolkit-react": "^1.0.0-dev.217", "dotenv": "^10.0.0", "gatsby": "^4.25.4", "gatsby-cli": "^4.25.0", @@ -3706,28 +3706,30 @@ } }, "node_modules/@pantheon-systems/pds-design-tokens": { - "version": "1.0.0-dev.140", - "resolved": "https://registry.npmjs.org/@pantheon-systems/pds-design-tokens/-/pds-design-tokens-1.0.0-dev.140.tgz", - "integrity": "sha512-ZgB5H5ZYwNoO+e4kJVBF+s1sTjX9DswTFIAj9TXe3DwqGEv/c2XQMHeyjqaKRS6Cbe6Ts8gIBllIu4clIHxcDQ==", - "license": "GPL-3.0-or-later" + "version": "1.0.0-dev.152", + "resolved": "https://registry.npmjs.org/@pantheon-systems/pds-design-tokens/-/pds-design-tokens-1.0.0-dev.152.tgz", + "integrity": "sha512-dDi83RO3aGKJqHwJJmMzfsa59N1ZAgp+D7vIg7W/wrfRlTGyoLsWjbB5U8F6BrLQMgIsBw1IvY7To5lbMvCorw==" }, "node_modules/@pantheon-systems/pds-toolkit-react": { - "version": "1.0.0-dev.173", - "resolved": "https://registry.npmjs.org/@pantheon-systems/pds-toolkit-react/-/pds-toolkit-react-1.0.0-dev.173.tgz", - "integrity": "sha512-5L/rGQflqM3/ml3WQazDvb+8Wg9gJnHdv2k3a88fZuwzIErZCFtx5wa4IujXVRSyh7EeVbaBFPxBwTrpvVd+KQ==", + "version": "1.0.0-dev.217", + "resolved": "https://registry.npmjs.org/@pantheon-systems/pds-toolkit-react/-/pds-toolkit-react-1.0.0-dev.217.tgz", + "integrity": "sha512-w8vQXRK9t6W6XwXq85zJ5gX4Ys89OUYQWJ1jrTkZ4lnf1vcJ6ducWIOivtD8UJdy/SLnNi9PSfLlmDoSPGutGg==", "dependencies": { "@floating-ui/react": "^0.24.3", "@floating-ui/react-dom": "~1.3.0", - "@pantheon-systems/pds-design-tokens": "^1.0.0-dev.140", + "@pantheon-systems/pds-design-tokens": "^1.0.0-dev.152", "@reactuses/core": "^5.0.15", "focus-trap-react": "^10.2.1", "hash-sum": "^2.0.0", + "prism-react-renderer": "^2.4.1", + "prismjs": "^1.29.0", + "react-code-block": "^1.1.1", "react-hotkeys-hook": "^4.5.1", "react-router-dom": "^6.13.0", "react-toastify": "^9.0.3" }, "engines": { - "node": ">=18.0.0 <=20.x" + "node": ">=18.0.0 <=22.x" }, "peerDependencies": { "react": "^16.0.0 || ^17.0.0 || ^18.0.0" @@ -3785,6 +3787,29 @@ "react-dom": ">=16.3.0" } }, + "node_modules/@pantheon-systems/pds-toolkit-react/node_modules/react-code-block": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/react-code-block/-/react-code-block-1.1.1.tgz", + "integrity": "sha512-32FWIZe5YBN7if9VP4+R2IFOWCzko2/OBGoTZE3Wjn9G0W8kMhN2CvwXcCKjw6DCKLwtrVmoCQCywPAlV+P9pg==", + "peerDependencies": { + "prism-react-renderer": "^2", + "react": "^18", + "react-dom": "^18" + } + }, + "node_modules/@pantheon-systems/pds-toolkit-react/node_modules/react-dom": { + "version": "18.3.1", + "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz", + "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==", + "peer": true, + "dependencies": { + "loose-envify": "^1.1.0", + "scheduler": "^0.23.2" + }, + "peerDependencies": { + "react": "^18.3.1" + } + }, "node_modules/@pantheon-systems/pds-toolkit-react/node_modules/react-hotkeys-hook": { "version": "4.5.1", "resolved": "https://registry.npmjs.org/react-hotkeys-hook/-/react-hotkeys-hook-4.5.1.tgz", @@ -3823,6 +3848,15 @@ "react-dom": ">=16" } }, + "node_modules/@pantheon-systems/pds-toolkit-react/node_modules/scheduler": { + "version": "0.23.2", + "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz", + "integrity": "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==", + "peer": true, + "dependencies": { + "loose-envify": "^1.1.0" + } + }, "node_modules/@parcel/bundler-default": { "version": "2.6.2", "resolved": "https://registry.npmjs.org/@parcel/bundler-default/-/bundler-default-2.6.2.tgz", @@ -5288,6 +5322,11 @@ "resolved": "https://registry.npmjs.org/@types/parse5/-/parse5-5.0.3.tgz", "integrity": "sha512-kUNnecmtkunAoQ3CnjmMkzNU/gtxG8guhi+Fk2U/kOpIKjIMKnXGp4IJCgQJrXSgMsWYimYG4TGjz/UzbGEBTw==" }, + "node_modules/@types/prismjs": { + "version": "1.26.5", + "resolved": "https://registry.npmjs.org/@types/prismjs/-/prismjs-1.26.5.tgz", + "integrity": "sha512-AUZTa7hQ2KY5L7AmtSiqxlhWxb4ina0yd8hNbl4TWuqnv/pFP0nDMb3YrfSBf4hJVGLh2YEIBfKaBW/9UEl6IQ==" + }, "node_modules/@types/prop-types": { "version": "15.7.5", "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz", @@ -18613,6 +18652,26 @@ "renderkid": "^2.0.4" } }, + "node_modules/prism-react-renderer": { + "version": "2.4.1", + "resolved": "https://registry.npmjs.org/prism-react-renderer/-/prism-react-renderer-2.4.1.tgz", + "integrity": "sha512-ey8Ls/+Di31eqzUxC46h8MksNuGx/n0AAC8uKpwFau4RPDYLuE3EXTp8N8G2vX2N7UC/+IXeNUnlWBGGcAG+Ig==", + "dependencies": { + "@types/prismjs": "^1.26.0", + "clsx": "^2.0.0" + }, + "peerDependencies": { + "react": ">=16.0.0" + } + }, + "node_modules/prism-react-renderer/node_modules/clsx": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz", + "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==", + "engines": { + "node": ">=6" + } + }, "node_modules/prismjs": { "version": "1.29.0", "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.29.0.tgz", @@ -26159,21 +26218,24 @@ } }, "@pantheon-systems/pds-design-tokens": { - "version": "1.0.0-dev.140", - "resolved": "https://registry.npmjs.org/@pantheon-systems/pds-design-tokens/-/pds-design-tokens-1.0.0-dev.140.tgz", - "integrity": "sha512-ZgB5H5ZYwNoO+e4kJVBF+s1sTjX9DswTFIAj9TXe3DwqGEv/c2XQMHeyjqaKRS6Cbe6Ts8gIBllIu4clIHxcDQ==" + "version": "1.0.0-dev.152", + "resolved": "https://registry.npmjs.org/@pantheon-systems/pds-design-tokens/-/pds-design-tokens-1.0.0-dev.152.tgz", + "integrity": "sha512-dDi83RO3aGKJqHwJJmMzfsa59N1ZAgp+D7vIg7W/wrfRlTGyoLsWjbB5U8F6BrLQMgIsBw1IvY7To5lbMvCorw==" }, "@pantheon-systems/pds-toolkit-react": { - "version": "1.0.0-dev.173", - "resolved": "https://registry.npmjs.org/@pantheon-systems/pds-toolkit-react/-/pds-toolkit-react-1.0.0-dev.173.tgz", - "integrity": "sha512-5L/rGQflqM3/ml3WQazDvb+8Wg9gJnHdv2k3a88fZuwzIErZCFtx5wa4IujXVRSyh7EeVbaBFPxBwTrpvVd+KQ==", + "version": "1.0.0-dev.217", + "resolved": "https://registry.npmjs.org/@pantheon-systems/pds-toolkit-react/-/pds-toolkit-react-1.0.0-dev.217.tgz", + "integrity": "sha512-w8vQXRK9t6W6XwXq85zJ5gX4Ys89OUYQWJ1jrTkZ4lnf1vcJ6ducWIOivtD8UJdy/SLnNi9PSfLlmDoSPGutGg==", "requires": { "@floating-ui/react": "^0.24.3", "@floating-ui/react-dom": "~1.3.0", - "@pantheon-systems/pds-design-tokens": "^1.0.0-dev.140", + "@pantheon-systems/pds-design-tokens": "^1.0.0-dev.152", "@reactuses/core": "^5.0.15", "focus-trap-react": "^10.2.1", "hash-sum": "^2.0.0", + "prism-react-renderer": "^2.4.1", + "prismjs": "^1.29.0", + "react-code-block": "^1.1.1", "react-hotkeys-hook": "^4.5.1", "react-router-dom": "^6.13.0", "react-toastify": "^9.0.3" @@ -26216,6 +26278,22 @@ "tabbable": "^6.2.0" } }, + "react-code-block": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/react-code-block/-/react-code-block-1.1.1.tgz", + "integrity": "sha512-32FWIZe5YBN7if9VP4+R2IFOWCzko2/OBGoTZE3Wjn9G0W8kMhN2CvwXcCKjw6DCKLwtrVmoCQCywPAlV+P9pg==", + "requires": {} + }, + "react-dom": { + "version": "18.3.1", + "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz", + "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==", + "peer": true, + "requires": { + "loose-envify": "^1.1.0", + "scheduler": "^0.23.2" + } + }, "react-hotkeys-hook": { "version": "4.5.1", "resolved": "https://registry.npmjs.org/react-hotkeys-hook/-/react-hotkeys-hook-4.5.1.tgz", @@ -26238,6 +26316,15 @@ "requires": { "clsx": "^1.1.1" } + }, + "scheduler": { + "version": "0.23.2", + "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz", + "integrity": "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==", + "peer": true, + "requires": { + "loose-envify": "^1.1.0" + } } } }, @@ -27220,6 +27307,11 @@ "resolved": "https://registry.npmjs.org/@types/parse5/-/parse5-5.0.3.tgz", "integrity": "sha512-kUNnecmtkunAoQ3CnjmMkzNU/gtxG8guhi+Fk2U/kOpIKjIMKnXGp4IJCgQJrXSgMsWYimYG4TGjz/UzbGEBTw==" }, + "@types/prismjs": { + "version": "1.26.5", + "resolved": "https://registry.npmjs.org/@types/prismjs/-/prismjs-1.26.5.tgz", + "integrity": "sha512-AUZTa7hQ2KY5L7AmtSiqxlhWxb4ina0yd8hNbl4TWuqnv/pFP0nDMb3YrfSBf4hJVGLh2YEIBfKaBW/9UEl6IQ==" + }, "@types/prop-types": { "version": "15.7.5", "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz", @@ -37088,6 +37180,22 @@ "renderkid": "^2.0.4" } }, + "prism-react-renderer": { + "version": "2.4.1", + "resolved": "https://registry.npmjs.org/prism-react-renderer/-/prism-react-renderer-2.4.1.tgz", + "integrity": "sha512-ey8Ls/+Di31eqzUxC46h8MksNuGx/n0AAC8uKpwFau4RPDYLuE3EXTp8N8G2vX2N7UC/+IXeNUnlWBGGcAG+Ig==", + "requires": { + "@types/prismjs": "^1.26.0", + "clsx": "^2.0.0" + }, + "dependencies": { + "clsx": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz", + "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==" + } + } + }, "prismjs": { "version": "1.29.0", "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.29.0.tgz", diff --git a/package.json b/package.json index 1551943867..42ffc81fc0 100644 --- a/package.json +++ b/package.json @@ -10,7 +10,7 @@ "dependencies": { "@mdx-js/mdx": "^1.6.22", "@mdx-js/react": "^1.6.22", - "@pantheon-systems/pds-toolkit-react": "^1.0.0-dev.173", + "@pantheon-systems/pds-toolkit-react": "^1.0.0-dev.217", "dotenv": "^10.0.0", "gatsby": "^4.25.4", "gatsby-cli": "^4.25.0", diff --git a/src/components/HeroCTA/index.js b/src/components/HeroCTA/index.js index eb5e4b5943..d6fac9d00a 100644 --- a/src/components/HeroCTA/index.js +++ b/src/components/HeroCTA/index.js @@ -1,10 +1,10 @@ -import React from "react" -import PropTypes from "prop-types" -import { Link } from "gatsby" -import { StaticImage } from "gatsby-plugin-image" -import { FlexContainer, Icon } from "@pantheon-systems/pds-toolkit-react" +import React from 'react'; +import PropTypes from 'prop-types'; +import { Link } from 'gatsby'; +import { StaticImage } from 'gatsby-plugin-image'; +import { FlexContainer, Icon } from '@pantheon-systems/pds-toolkit-react'; -import "./styles.css" +import './styles.css'; const propTypes = { dark: PropTypes.bool, @@ -12,13 +12,13 @@ const propTypes = { title: PropTypes.string, subTitle: PropTypes.string, type: PropTypes.string, -} +}; function HeroCTA(props) { - const { url, title, subTitle, linkText } = props + const { url, title, subTitle, linkText } = props; return ( - +
- ) + ); } -HeroCTA.propTypes = propTypes +HeroCTA.propTypes = propTypes; -export default HeroCTA +export default HeroCTA; diff --git a/src/components/releaseNotePopoverCategorySelector.js b/src/components/releaseNotePopoverCategorySelector.js index f043631eb7..de24e8234c 100644 --- a/src/components/releaseNotePopoverCategorySelector.js +++ b/src/components/releaseNotePopoverCategorySelector.js @@ -1,111 +1,137 @@ -import React, { useState } from "react" -import { activeReleaseNoteCategories } from "../data/releaseNoteCategories" -import { Button, FlexContainer, Popover } from "@pantheon-systems/pds-toolkit-react" +import React, { useState } from 'react'; +import { activeReleaseNoteCategories } from '../data/releaseNoteCategories'; +import { + Button, + FlexContainer, + Popover, +} from '@pantheon-systems/pds-toolkit-react'; -const ReleaseNotePopoverCategorySelector = ({filters, setFilters, setCurrentPage, isDisabled}) => { - const [isPopoverOpen, setIsPopoverOpen] = useState(false) +const ReleaseNotePopoverCategorySelector = ({ + filters, + setFilters, + setCurrentPage, + isDisabled, +}) => { + const [isPopoverOpen, setIsPopoverOpen] = useState(false); // Get the active categories data. - const activeCategories = JSON.parse(activeReleaseNoteCategories()) + const activeCategories = JSON.parse(activeReleaseNoteCategories()); const handleCheckbox = (cat) => { // Find the index of the category in the filters.categories array by matching the slug - const index = filters.categories.findIndex(category => category.slug === cat.slug) - let updatedCategories + const index = filters.categories.findIndex( + (category) => category.slug === cat.slug, + ); + let updatedCategories; - if (index !== -1){ + if (index !== -1) { // If category is selected, remove it - updatedCategories = filters.categories.filter(item => item.slug !== cat.slug) - setFilters(prevState => ({...prevState, categories: updatedCategories})) + updatedCategories = filters.categories.filter( + (item) => item.slug !== cat.slug, + ); + setFilters((prevState) => ({ + ...prevState, + categories: updatedCategories, + })); } else { // If category is not selected, add it - updatedCategories = [...filters.categories, cat] - setFilters( prevState => ({...prevState, categories: [...prevState.categories, cat]})) + updatedCategories = [...filters.categories, cat]; + setFilters((prevState) => ({ + ...prevState, + categories: [...prevState.categories, cat], + })); } // Move pager to the first page - setCurrentPage(1) - } + setCurrentPage(1); + }; const handleClearCategoriesFilters = () => { - setFilters(prevState => ({...prevState, categories: []})) + setFilters((prevState) => ({ ...prevState, categories: [] })); // Move pager to the first page - setCurrentPage(1) - } + setCurrentPage(1); + }; const handlePopoverClose = () => { - setIsPopoverOpen(false) - } + setIsPopoverOpen(false); + }; // Set the icon based on the popover state: 'angleUp' if open, 'angleDown' if closed - let popoverTriggerIcon = isPopoverOpen ? 'angleUp' : 'angleDown' + let popoverTriggerIcon = isPopoverOpen ? 'angleUp' : 'angleDown'; // Popover columns config - const itemsPerColumn = 6 - const totalItems = activeCategories.length - const totalColumns = totalItems / itemsPerColumn + const itemsPerColumn = 6; + const totalItems = activeCategories.length; + const totalColumns = totalItems / itemsPerColumn; const popoverContent = ( <> -
+
{/* Create an array, with length defined in `totalColumns` */} {Array.from({ length: totalColumns }, (_, columnIndex) => ( // Iterate over each column
{/* For each column, render items within the specified range based on `itemsPerColumn` and slice `activeCategories` to get the items for the current column. */} - { activeCategories.slice(columnIndex * itemsPerColumn, (columnIndex + 1) * itemsPerColumn).map(item => { - // Check in the state if the category/item is selected - const isChecked = filters.categories.some(category => category.slug === item.slug) - return ( - // Render each category/item with a checkbox and label - - handleCheckbox(item)} - checked={isChecked} - /> - - + {activeCategories + .slice( + columnIndex * itemsPerColumn, + (columnIndex + 1) * itemsPerColumn, ) - })} + .map((item) => { + // Check in the state if the category/item is selected + const isChecked = filters.categories.some( + (category) => category.slug === item.slug, + ); + return ( + // Render each category/item with a checkbox and label + + handleCheckbox(item)} + checked={isChecked} + /> + + + ); + })}
))}