From 8bb01d2095f8210162774d2731d153b8b80110bf Mon Sep 17 00:00:00 2001 From: Austin Sullivan Date: Wed, 30 Oct 2024 17:17:22 -0400 Subject: [PATCH 1/4] docs(themes): Add Halloween theme demo --- .prettierignore | 3 +- .../components/example/example.js | 40 +- .../scripts/webpack/webpack.base.config.js | 2 + .../templates/html.ejs | 3 + packages/documentation-site/package.json | 2 +- .../content/tokens/halloween.md | 32 + .../content/tokens/halloween.tsx | 626 ++++++++++++++++ .../content/tokens/img/cauldron.png | Bin 0 -> 2802 bytes .../patternfly-docs/patternfly-docs.css.js | 3 + .../patternfly-docs/spooky-dark.css | 380 ++++++++++ .../patternfly-docs/spooky.css | 698 ++++++++++++++++++ 11 files changed, 1779 insertions(+), 10 deletions(-) create mode 100644 packages/documentation-site/patternfly-docs/content/tokens/halloween.md create mode 100644 packages/documentation-site/patternfly-docs/content/tokens/halloween.tsx create mode 100644 packages/documentation-site/patternfly-docs/content/tokens/img/cauldron.png create mode 100644 packages/documentation-site/patternfly-docs/spooky-dark.css create mode 100644 packages/documentation-site/patternfly-docs/spooky.css diff --git a/.prettierignore b/.prettierignore index 174cdb558f..607a2e6376 100644 --- a/.prettierignore +++ b/.prettierignore @@ -2,5 +2,6 @@ * # Except js files !*.js +!*.tsx # Look for js files in subdirectories -!*/ +!*/ \ No newline at end of file diff --git a/packages/documentation-framework/components/example/example.js b/packages/documentation-framework/components/example/example.js index b1343fd34e..1b641c3ef5 100644 --- a/packages/documentation-framework/components/example/example.js +++ b/packages/documentation-framework/components/example/example.js @@ -1,4 +1,4 @@ -import React, { useContext, useEffect } from 'react'; +import React, { useContext, useEffect, useState } from 'react'; import { useLocation } from '@reach/router'; import { Button, @@ -100,6 +100,8 @@ export const Example = ({ hasDarkThemeSwitcher = process.env.hasDarkThemeSwitcher, // Show dark theme switcher on full page examples hasRTLSwitcher = process.env.hasRTLSwitcher, + // Show spooky switcher + hasSpookySwitcher = process.env.hasSpookySwitcher, // Map of relative imports matched to their npm package import path (passed to Codesandbox) relativeImports, // md file location in node_modules, used to resolve relative import paths in examples @@ -192,11 +194,27 @@ export const Example = ({ const previewId = getExampleId(source, section[0], id, title); const className = getExampleClassName(source, section[0], id); + const [isDark, setIsDark] = useState(false); + const toggleDark = () => { + document.documentElement.classList.toggle('pf-v6-theme-dark'); + setIsDark(!isDark); + } + + const [isSpooky, setIsSpooky] = useState(false); + const toggleSpooky = () => { + document.documentElement.classList.toggle('pf-v6-theme-spooky'); + setIsSpooky(!isSpooky); + + if (!isDark && !isSpooky) { + toggleDark(); + } + }; + if (isFullscreenPreview) { return (
{livePreview} - {(hasDarkThemeSwitcher || hasRTLSwitcher) && ( + {(hasDarkThemeSwitcher || hasRTLSwitcher || hasSpookySwitcher) && ( - document - .querySelector('html') - .classList.toggle('pf-v6-theme-dark') - } + isChecked={isDark} + onChange={toggleDark} /> )} {hasRTLSwitcher && ( @@ -226,6 +240,16 @@ export const Example = ({ }} /> )} + {hasSpookySwitcher && ( + + ) + } )}
diff --git a/packages/documentation-framework/scripts/webpack/webpack.base.config.js b/packages/documentation-framework/scripts/webpack/webpack.base.config.js index e93a57de39..49b9b3e3a9 100644 --- a/packages/documentation-framework/scripts/webpack/webpack.base.config.js +++ b/packages/documentation-framework/scripts/webpack/webpack.base.config.js @@ -14,6 +14,7 @@ module.exports = (_env, argv) => { hasDesignGuidelines = false, hasDarkThemeSwitcher = false, hasRTLSwitcher = false, + hasSpookySwitcher = false, componentsData = {}, sideNavItems = [], topNavItems = [], @@ -137,6 +138,7 @@ module.exports = (_env, argv) => { 'process.env.hasDesignGuidelines': JSON.stringify(hasDesignGuidelines), 'process.env.hasDarkThemeSwitcher': JSON.stringify(hasDarkThemeSwitcher), 'process.env.hasRTLSwitcher': JSON.stringify(hasRTLSwitcher), + 'process.env.hasSpookySwitcher': JSON.stringify(hasSpookySwitcher), 'process.env.componentsData': JSON.stringify(componentsData), 'process.env.sideNavItems': JSON.stringify(sideNavItems), 'process.env.topNavItems': JSON.stringify(topNavItems), diff --git a/packages/documentation-framework/templates/html.ejs b/packages/documentation-framework/templates/html.ejs index c3d158ff1e..7ab92f5770 100644 --- a/packages/documentation-framework/templates/html.ejs +++ b/packages/documentation-framework/templates/html.ejs @@ -9,6 +9,9 @@ + + + diff --git a/packages/documentation-site/package.json b/packages/documentation-site/package.json index 24aee02085..78b5adbb27 100644 --- a/packages/documentation-site/package.json +++ b/packages/documentation-site/package.json @@ -17,7 +17,7 @@ "screenshots": "pf-docs-framework screenshots" }, "dependencies": { - "@patternfly/documentation-framework": "6.0.1", + "@patternfly/documentation-framework": "6.0.4", "@patternfly/react-catalog-view-extension": "6.0.0", "@patternfly/react-console": "6.0.0", "@patternfly/react-docs": "7.0.0", diff --git a/packages/documentation-site/patternfly-docs/content/tokens/halloween.md b/packages/documentation-site/patternfly-docs/content/tokens/halloween.md new file mode 100644 index 0000000000..233bd087f6 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/tokens/halloween.md @@ -0,0 +1,32 @@ +--- +id: Halloween +section: tokens +--- + +import CheckCircleIcon from '@patternfly/react-icons/dist/js/icons/check-circle-icon'; +import InfoCircleIcon from '@patternfly/react-icons/dist/js/icons/info-circle-icon'; +import CodeIcon from '@patternfly/react-icons/dist/esm/icons/code-icon'; +import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon'; +import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon'; +import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon'; +import SortAmountDownIcon from '@patternfly/react-icons/dist/esm/icons/sort-amount-down-icon'; +import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon'; +import display from '@patternfly/react-styles/css/utilities/Display/display'; +import sizing from '@patternfly/react-styles/css/utilities/Sizing/sizing'; +import spacing from '@patternfly/react-styles/css/utilities/Spacing/spacing'; +import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper'; +import cauldron from './img/cauldron.png'; + +import HatWizardIcon from '@patternfly/react-icons/dist/esm/icons/hat-wizard-icon'; +import MagicIcon from '@patternfly/react-icons/dist/esm/icons/magic-icon'; +import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon'; +import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon'; +import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon'; +import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon'; +import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon'; + +## Demos + +### Halloween +```js isFullscreen hasSpookySwitcher file="./halloween.tsx" +``` \ No newline at end of file diff --git a/packages/documentation-site/patternfly-docs/content/tokens/halloween.tsx b/packages/documentation-site/patternfly-docs/content/tokens/halloween.tsx new file mode 100644 index 0000000000..1f60603e51 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/tokens/halloween.tsx @@ -0,0 +1,626 @@ +import React from 'react'; +import { + PageSection, + Tabs, + Tab, + TabContent, + TabContentBody, + TabTitleText, + Title, + Flex, + FlexItem, + Content, + DrawerHead, + PageSidebar, + PageSidebarBody, + Nav, + NavGroup, + NavItem, + Form, + FormGroup, + TextInput, + FormHelperText, + HelperText, + HelperTextItem, + TextArea, + Checkbox, + ActionGroup, + Button, + Icon, + FormGroupLabelHelp, + Dropdown, + DropdownItem, + DropdownList, + Toolbar, + ToolbarContent, + ToolbarItem, + ToolbarGroup, + MenuToggle, + PageToggleButton, + Masthead, + MastheadMain, + MastheadToggle, + MastheadBrand, + MastheadContent, + MastheadLogo, + ButtonVariant, + DrawerPanelBody, + FileUpload +} from '@patternfly/react-core'; +import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper'; + +import cauldron from './img/cauldron.png'; +import HatWizardIcon from '@patternfly/react-icons/dist/esm/icons/hat-wizard-icon'; +import MagicIcon from '@patternfly/react-icons/dist/esm/icons/magic-icon'; +import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon'; +import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon'; +import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon'; +import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon'; + +export const TabsOpenDemo = () => { + const [activeTabKey, setActiveTabKey] = React.useState(0); + const [isNavOpen, setIsNavOpen] = React.useState(true); + const [isDrawerOpen, setIsDrawerOpen] = React.useState(true); + + // Toggle currently active tab + const handleTabClick = (event, tabIndex) => { + setActiveTabKey(tabIndex); + }; + + const [isPoisonChecked, setIsPoisonChecked] = React.useState(true); + + const fromScratchPotion = ( +
+ + + + + Enter a unique potion name + + + + + + + + Enter a unique potion description + + + + } + > + + setIsPoisonChecked(!isPoisonChecked)} /> + + + + } + > +