diff --git a/src/App.scss b/src/App.scss index 1c51fb2..1dc8e40 100644 --- a/src/App.scss +++ b/src/App.scss @@ -63,4 +63,83 @@ .pf-v6-c-title.pf-m-h2{ color: #151515; } +} + +// Homepage styles +.homepage { + .homepage-header { + margin-bottom: 2rem; + text-align: center; + + .homepage-title { + color: #ee0000; + margin-bottom: 1rem; + } + + .homepage-subtitle { + font-size: 1.1rem; + color: #6a6e73; + max-width: 600px; + margin: 0 auto; + line-height: 1.5; + } + } + + .homepage-components { + margin-bottom: 3rem; + + .section-title { + color: #151515; + margin-bottom: 1.5rem; + } + + .component-link { + text-decoration: none; + color: #151515; + font-weight: 600; + + &:hover { + color: #ee0000; + text-decoration: none; + } + } + + .pf-v6-c-card { + height: 100%; + transition: transform 0.2s ease, box-shadow 0.2s ease; + + &:hover { + transform: translateY(-2px); + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); + } + + .pf-v6-c-card__body p { + color: #6a6e73; + margin: 0; + } + } + } + + .homepage-preview { + .section-title { + color: #151515; + margin-bottom: 1.5rem; + } + } +} + +// Responsive adjustments for homepage +@media (max-width: 768px) { + .homepage { + .homepage-header { + .homepage-title { + font-size: 1.75rem; + } + + .homepage-subtitle { + font-size: 1rem; + padding: 0 1rem; + } + } + } } \ No newline at end of file diff --git a/src/App.tsx b/src/App.tsx index 6dcd1f1..417ab4c 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,32 +1,27 @@ import ReactDOM from "react-dom/client"; -import { createBrowserRouter, Outlet, RouterProvider } from 'react-router-dom' +import { createBrowserRouter, RouterProvider } from 'react-router-dom' import './App.scss' import HomePage from './views/Homepage/HomePage' import PfButton from "./components/Button/Button"; import PfBreadcrumb from "./components/BreadCrumb/BreadCrumb"; // import PfForm from "./components/Form/Form"; import PfAccordion from "./components/Accordion/Accordion"; -import PfCard from "./components/Card/Card"; +import PfCard from "./components/Card/Cards"; import PfTable from "./components/Table/Table"; +import Dashboard from "./components/Dashboard/Dashboard"; // import 'redhat-brand-theme/dist/redhat-brand-theme.css'; import './rhds-theme.css'; -function App() { - - return ( -
- - -
- ) -} - const AppRoutes = createBrowserRouter([{ path: '/', - element: , + element: , children:[ { - path: "/", + index: true, + element: + }, + { + path: "/home", element: }, { diff --git a/src/assets/PF-HorizontalLogo-Color.svg b/src/assets/PF-HorizontalLogo-Color.svg new file mode 100644 index 0000000..7f22715 --- /dev/null +++ b/src/assets/PF-HorizontalLogo-Color.svg @@ -0,0 +1,29 @@ + + + PF-HorizontalLogo-Color + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/components/Card/Card.tsx b/src/components/Card/Card.tsx deleted file mode 100644 index 41ab4ca..0000000 --- a/src/components/Card/Card.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import { FC } from 'react'; -import { Card, CardTitle, CardBody, CardFooter } from '@patternfly/react-core'; - -const PfCard:FC = () => ( - - Hack Day - PatternFly 6 - Betterment - -); - -export default PfCard; diff --git a/src/components/Card/CardActionSelect.tsx b/src/components/Card/CardActionSelect.tsx new file mode 100644 index 0000000..cd6c15a --- /dev/null +++ b/src/components/Card/CardActionSelect.tsx @@ -0,0 +1,62 @@ +import { FC } from "react"; +import { Card, CardTitle, CardHeader, CardBody } from "@patternfly/react-core"; + +const CardWithActionSelect: FC = () => { + + return ( +
+
+ + + console.log(`First card in actionable example clicked`), + selectableActionAriaLabelledby: + "clickable-card-example-title-1", + }} + > + + First card in the actionable example + + + This card performs an action on click. + + + + + Second card in the actionable example + + + This card can navigate to a link on click. + + + + console.log(`Third card in actionable example clicked`), + selectableActionAriaLabelledby: + "clickable-card-example-title-3", + }} + > + + Third card in the actionable example + + + This card is clickable but disabled. + +
+
+ ); +}; + +export default CardWithActionSelect; diff --git a/src/components/Card/CardDefault.tsx b/src/components/Card/CardDefault.tsx new file mode 100644 index 0000000..dd86a7d --- /dev/null +++ b/src/components/Card/CardDefault.tsx @@ -0,0 +1,14 @@ +import React from "react"; +import { Card, CardTitle, CardBody,CardFooter } from "@patternfly/react-core"; + +const CardDefault: React.FC = () => ( +
+ + Title + Body + Footer + +
+); + +export default CardDefault; diff --git a/src/components/Card/CardExpandable.tsx b/src/components/Card/CardExpandable.tsx new file mode 100644 index 0000000..13908bd --- /dev/null +++ b/src/components/Card/CardExpandable.tsx @@ -0,0 +1,145 @@ +import { FC, useState } from "react"; +import { + Card, + CardTitle, + CardBody, + CardFooter, + CardHeader, + Checkbox, + CardExpandableContent, + Dropdown, + MenuToggle, + DropdownList, + DropdownItem, + Divider, +} from "@patternfly/react-core"; +import EllipsisVIcon from "@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon"; + +const CardExpandable: FC = () => { + //expandable cards + const [isExpanded, setIsExpanded] = useState(false); + const [isChecked, setIsChecked] = useState(false); + const [isToggleRightAligned, setIsToggleRightAligned] = useState(false); + const [isOpen, setIsOpen] = useState(false); + + const onSelect = () => { + setIsOpen(!isOpen); + }; + + const onClick = (checked: boolean) => { + setIsChecked(checked); + }; + + const onExpand = (_event: any, id: string) => { + console.log(id); + setIsExpanded(!isExpanded); + }; + + const onRightAlign = () => { + setIsToggleRightAligned(!isToggleRightAligned); + }; + + const dropdownExpItems = ( + <> + Action + {[]} + event.preventDefault()} + > + Link + + + Disabled Action + + event.preventDefault()} + > + Disabled Link + + + Separated Action + event.preventDefault()} + > + Separated Link + + + ); + + const headerActions = ( + <> + ( + setIsOpen(!isOpen)} + variant="plain" + aria-label="Card expandable example kebab toggle" + icon={ + onClick(checked)} + aria-label="card checkbox example" + id="check-4" + name="check4" + /> + + ); + + return ( +
+
+ +
+ + + Title + + + Body + Footer + + +
+ ); +}; + +export default CardExpandable; diff --git a/src/components/Card/CardHeaderOnlyActions.tsx b/src/components/Card/CardHeaderOnlyActions.tsx new file mode 100644 index 0000000..399b7f1 --- /dev/null +++ b/src/components/Card/CardHeaderOnlyActions.tsx @@ -0,0 +1,104 @@ +import {FC, useState} from "react"; +import { + Card, + CardHeader, + Checkbox, + CardBody, + Dropdown, + MenuToggle, + DropdownList, + DropdownItem, + Divider, + +} from "@patternfly/react-core"; +import EllipsisVIcon from "@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon"; + +const CardHeaderOnlyActions: FC = () => { + const [isOpen, setIsOpen] = useState(false); + const [isChecked, setIsChecked] = useState(false); + + const onSelect = () => { + setIsOpen(!isOpen); + }; + + const onClick = (checked: boolean) => { + setIsChecked(checked); + }; + + + const dropdownExpItems = ( + <> + Action + {[]} + event.preventDefault()} + > + Link + + + Disabled Action + + event.preventDefault()} + > + Disabled Link + + + Separated Action + event.preventDefault()} + > + Separated Link + + + ); + + const headerActions = ( + <> + ( + setIsOpen(!isOpen)} + variant="plain" + aria-label="Card expandable example kebab toggle" + icon={ + onClick(checked)} + aria-label="card checkbox example" + id="check-4" + name="check4" + /> + + ); + + return ( +
+ + + + This is the card body. There are only actions in the card head. + + +
+ ); +}; + +export default CardHeaderOnlyActions; diff --git a/src/components/Card/CardHeadingHTML.tsx b/src/components/Card/CardHeadingHTML.tsx new file mode 100644 index 0000000..9e771ce --- /dev/null +++ b/src/components/Card/CardHeadingHTML.tsx @@ -0,0 +1,19 @@ +import React from 'react'; +import { + Card, + CardTitle, + CardBody, + CardFooter +} from '@patternfly/react-core'; + +const CardHeadingHTML: React.FC = () => ( +
+ + Title within an {"

"} element + Body + Footer + +

+); + +export default CardHeadingHTML; diff --git a/src/components/Card/CardImageActions.tsx b/src/components/Card/CardImageActions.tsx new file mode 100644 index 0000000..cbd25a7 --- /dev/null +++ b/src/components/Card/CardImageActions.tsx @@ -0,0 +1,124 @@ +import { FC, useState } from "react"; +import { + Card, + CardTitle, + CardBody, + CardHeader, + Checkbox, + Dropdown, + MenuToggle, + Brand, + DropdownList, + CardFooter, + DropdownItem, + Divider, +} from "@patternfly/react-core"; +import pfLogo from "../../assets/PF-HorizontalLogo-Color.svg"; +import EllipsisVIcon from "@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon"; + +const CardImageActions: FC = () => { + const [hasNoOffset, setHasNoOffset] = useState(false); + const [isChecked, setIsChecked] = useState(false); + const [isOpen, setIsOpen] = useState(false); + + const toggleOffset = (checked: boolean) => setHasNoOffset(checked); + + const onClick = (checked: boolean) => { + setIsChecked(checked); + }; + + const onSelect = () => { + setIsOpen(!isOpen); + }; + + const dropdownExpItems = ( + <> + Action + {[]} + event.preventDefault()} + > + Link + + + Disabled Action + + event.preventDefault()} + > + Disabled Link + + + Separated Action + event.preventDefault()} + > + Separated Link + + + ); + + const headerActions = ( + <> + ( + setIsOpen(!isOpen)} + variant="plain" + aria-label="Card expandable example kebab toggle" + icon={ + onClick(checked)} + aria-label="card checkbox example" + id="check-4" + name="check4" + /> + + ); + + return ( +
+ toggleOffset(checked)} + aria-label="Remove actions offset" + id="toggle-actions-offset" + /> +
+ + + + + Title + Body + Footer + +
+
+ ); +}; + +export default CardImageActions; diff --git a/src/components/Card/CardModifiers.tsx b/src/components/Card/CardModifiers.tsx new file mode 100644 index 0000000..738ca24 --- /dev/null +++ b/src/components/Card/CardModifiers.tsx @@ -0,0 +1,43 @@ +import { FC, useState} from 'react'; +import { + Card, + CardTitle, + CardBody, + CardFooter, + Checkbox +} from '@patternfly/react-core'; + +const CardModifiers: FC = () => { + const mods = ["isCompact", "isLarge", "isFullHeight", "isPlain"]; + const [modifiers, setModifiers] = useState<{ [key: string]: boolean }>({}); + + return ( +
+
+
+ {mods.map((mod) => ( + { + setModifiers((prev) => ({ ...prev, [mod]: checked })); + }} + /> + ))} +
+
+ + Modified Card + Dynamic styles applied + Footer + +
+
+
+ ) + +} + +export default CardModifiers; diff --git a/src/components/Card/CardMultipleBodies.tsx b/src/components/Card/CardMultipleBodies.tsx new file mode 100644 index 0000000..ec937c2 --- /dev/null +++ b/src/components/Card/CardMultipleBodies.tsx @@ -0,0 +1,21 @@ +import {FC} from 'react'; +import { + Card, + CardTitle, + CardBody, + CardFooter +} from '@patternfly/react-core'; + +const CardMultipleBodies: FC = () => ( +
+ + Title + Body + Body + Body + Footer + +
+); + +export default CardMultipleBodies; diff --git a/src/components/Card/CardPrimaryBodyFill.tsx b/src/components/Card/CardPrimaryBodyFill.tsx new file mode 100644 index 0000000..b1f60f9 --- /dev/null +++ b/src/components/Card/CardPrimaryBodyFill.tsx @@ -0,0 +1,22 @@ +import React from "react"; +import { Card, CardTitle, CardBody, CardFooter } from "@patternfly/react-core"; + +const CardPrimaryBodyFill: React.FC = () => { + return ( +
+ + Title + Body pf-m-no-fill + Body pf-m-no-fill + Body + Footer + +
+ ); +}; + +export default CardPrimaryBodyFill; diff --git a/src/components/Card/CardSelectable.tsx b/src/components/Card/CardSelectable.tsx new file mode 100644 index 0000000..b76afcc --- /dev/null +++ b/src/components/Card/CardSelectable.tsx @@ -0,0 +1,80 @@ +import React, { FC } from "react"; +import { Card, CardTitle, CardHeader, CardBody } from "@patternfly/react-core"; + +const CardSelectable: FC = () => { + /*Selectable Card Variables*/ + const [isChecked1, setIsChecked1] = React.useState(false); + const [isChecked2, setIsChecked2] = React.useState(false); + const [isChecked3, setIsChecked3] = React.useState(false); + const id1 = "selectable-card-input-1"; + const id2 = "selectable-card-input-2"; + const id3 = "selectable-card-input-3"; + + const onChange = (event: any, checked: boolean) => { + const name = event.currentTarget.name; + switch (name) { + case id1: + setIsChecked1(checked); + break; + case id2: + setIsChecked2(checked); + break; + case id3: + setIsChecked3(checked); + break; + } + }; + + return ( +
+ + + First card + + This card is selectable. + + + + Second card + + This card is selectable. + + + + Third card + + This card is selectable but disabled. + +
+ ); +}; + +export default CardSelectable; diff --git a/src/components/Card/CardSingleSelectable.tsx b/src/components/Card/CardSingleSelectable.tsx new file mode 100644 index 0000000..2615a60 --- /dev/null +++ b/src/components/Card/CardSingleSelectable.tsx @@ -0,0 +1,77 @@ +import React, { FC } from "react"; +import { Card, CardTitle, CardHeader, CardBody } from "@patternfly/react-core"; + +const CardSelectable: FC = () => { + /**Single Selectable Card Variables */ + const [isSingleChecked, setIsSingleChecked] = React.useState(""); + const idSingle1 = "single-selectable-card-input-1"; + const idSingle2 = "single-selectable-card-input-2"; + const idSingle3 = "single-selectable-card-input-3"; + const onChange = (event: React.FormEvent) => { + setIsSingleChecked(event.currentTarget.id); + }; + return ( +
+ + + First card + + This card is single selectable. + + + + Second card + + This card is single selectable. + + + + Third card + + This card is single selectable but disabled. + +
+ ); +}; + +export default CardSelectable; diff --git a/src/components/Card/CardWithActions.tsx b/src/components/Card/CardWithActions.tsx new file mode 100644 index 0000000..1b376e3 --- /dev/null +++ b/src/components/Card/CardWithActions.tsx @@ -0,0 +1,62 @@ +import { FC } from "react"; +import { Card, CardTitle, CardHeader, CardBody } from "@patternfly/react-core"; + +const CardWithActions: FC = () => { + + return ( +
+
+ + + console.log(`First card in actionable example clicked`), + selectableActionAriaLabelledby: + "clickable-card-example-title-1", + }} + > + + First card in the actionable example + + + This card performs an action on click. + + + + + Second card in the actionable example + + + This card can navigate to a link on click. + + + + console.log(`Third card in actionable example clicked`), + selectableActionAriaLabelledby: + "clickable-card-example-title-3", + }} + > + + Third card in the actionable example + + + This card is clickable but disabled. + +
+
+ ); +}; + +export default CardWithActions; diff --git a/src/components/Card/Cards.tsx b/src/components/Card/Cards.tsx new file mode 100644 index 0000000..ada5069 --- /dev/null +++ b/src/components/Card/Cards.tsx @@ -0,0 +1,32 @@ +import { FC } from 'react'; +import CardDefault from './CardDefault'; +import CardModifiers from './CardModifiers'; +import CardImageActions from './CardImageActions'; +import CardHeaderOnlyActions from './CardHeaderOnlyActions'; +import CardHeadingHTML from './CardHeadingHTML'; +import CardMultipleBodies from './CardMultipleBodies'; +import CardPrimaryBodyFill from './CardPrimaryBodyFill'; +import CardSelectable from './CardSelectable'; +import CardSingleSelectable from './CardSingleSelectable'; +import CardWithActions from './CardWithActions' +import CardExpandable from './CardExpandable'; + +const PfCard: FC = () => { + return ( +
+ + + + + + + + + + + +
+ ); +}; + +export default PfCard; \ No newline at end of file diff --git a/src/components/Dashboard/Dashboard.scss b/src/components/Dashboard/Dashboard.scss new file mode 100644 index 0000000..7bf71ee --- /dev/null +++ b/src/components/Dashboard/Dashboard.scss @@ -0,0 +1,146 @@ +.dashboard { + display: flex; + flex-direction: column; + height: 100vh; +} + +.dashboard-header { + position: fixed; + top: 0; + left: 0; + right: 0; + z-index: 1000; + background-color: #000000; + border-bottom: 2px solid #ee0000; + + #dashboard-toolbar { + background-color: #000000; + padding: 0 2rem; + height: 72px; + + .pf-v6-c-toolbar__content-section { + align-items: center; + } + + .pf-v6-c-toolbar__item { + align-items: center; + } + + img { + width: auto; + height: 32px; + border-right: 1px solid #cdcdcd; + padding-right: 1rem; + margin-right: 1rem; + } + } + + .dashboard-title { + color: white; + font-family: Red Hat Display, RedHatDisplay, Helvetica Neue, Arial, sans-serif; + font-weight: 500; + } +} + +.dashboard-body { + display: flex; + margin-top: 72px; // Account for fixed header + height: calc(100vh - 72px); +} + +.dashboard-sidebar { + width: 250px; + background-color: #1a1a1a; + border-right: 2px solid #ee0000; + padding: 1rem 0; + + #dashboard-nav { + .pf-v6-c-nav__list { + padding: 0; + margin: 0; + } + + .pf-v6-c-nav__item { + margin-bottom: 0.25rem; + } + + .nav-link { + display: flex; + align-items: center; + text-decoration: none; + color: #ffffff; + padding: 0.75rem 1rem; + margin: 0 0.5rem; + border-radius: 4px; + transition: background-color 0.2s ease; + + &:hover { + text-decoration: none; + color: #ffffff; + background-color: rgba(255, 255, 255, 0.1); + } + + svg { + margin-right: 0.75rem; + font-size: 1rem; + } + } + + .nav-text { + font-weight: 500; + } + + .pf-v6-c-nav__item.pf-m-current .nav-link { + background-color: #ee0000; + color: #ffffff; + } + } +} + +.dashboard-content { + flex: 1; + padding: 2rem; + overflow-y: auto; +} + +// Responsive adjustments +@media (max-width: 768px) { + .dashboard-sidebar { + width: 200px; + } + + .dashboard-content { + padding: 1rem; + } + + .dashboard-header #dashboard-toolbar { + padding: 0 1rem; + + .dashboard-title { + font-size: 1rem; + } + + img { + height: 24px; + padding-right: 0.5rem; + margin-right: 0.5rem; + } + } +} + +@media (max-width: 576px) { + .dashboard-sidebar { + width: 180px; + } + + .dashboard-header #dashboard-toolbar { + .dashboard-title { + display: none; + } + } +} + +// Additional PatternFly overrides +.pf-v6-c-nav { + background-color: transparent; +} \ No newline at end of file diff --git a/src/components/Dashboard/Dashboard.tsx b/src/components/Dashboard/Dashboard.tsx new file mode 100644 index 0000000..d4b3233 --- /dev/null +++ b/src/components/Dashboard/Dashboard.tsx @@ -0,0 +1,114 @@ +import React from 'react'; +import { Link, Outlet, useLocation } from 'react-router-dom'; +import { + Nav, + NavList, + NavItem, + Toolbar, + ToolbarItem, + ToolbarContent, + Title +} from '@patternfly/react-core'; +import { + TableIcon, + LayerGroupIcon, + ListIcon, + CreditCardIcon, + ClipboardListIcon, + HomeIcon +} from '@patternfly/react-icons'; +import './Dashboard.scss'; + +interface NavigationItem { + path: string; + title: string; + icon: React.ComponentType; +} + +const navigationItems: NavigationItem[] = [ + { + path: "/home", + title: "Home", + icon: HomeIcon + }, + { + path: "/button", + title: "Button", + icon: LayerGroupIcon + }, + { + path: "/breadcrumb", + title: "BreadCrumb", + icon: ListIcon + }, + { + path: "/accordion", + title: "Accordion", + icon: ClipboardListIcon + }, + { + path: "/card", + title: "Card", + icon: CreditCardIcon + }, + { + path: "/table", + title: "Table", + icon: TableIcon + } +]; + +const Dashboard: React.FunctionComponent = () => { + const location = useLocation(); + + return ( +
+ {/* Header */} +
+ + + + Red Hat logo + + + + Red Hat Brand Theme for PatternFly 6 + + + + +
+ +
+ {/* Sidebar */} + + + {/* Main Content */} +
+ +
+
+
+ ); +}; + +export default Dashboard; \ No newline at end of file diff --git a/src/rhds-theme.css b/src/rhds-theme.css index 7cbc421..b3a4c64 100644 --- a/src/rhds-theme.css +++ b/src/rhds-theme.css @@ -3,7 +3,7 @@ * * @license Copyright (c) 2022 Red Hat UX MIT License */ -:root { + :root { --rh-animation-speed: 0.3s; --rh-animation-timing: cubic-bezier(0.465, 0.183, 0.153, 0.946); /* 1px border width; Example: Secondary CTA or Button */ @@ -738,6 +738,51 @@ .pf-v6-c-card { --pf-v6-c-card--BorderRadius: var(--rh-border-radius-default, 3px); + --pf-v6-c-card--BorderColor: none; + box-shadow: 0 0.0625rem 0.125rem 0 rgba(3, 3, 3, 0.12), 0 0 0.125rem 0 rgba(3, 3, 3, 0.06); +} + +.pf-v6-c-card__selectable-actions :is(.pf-v6-c-check__input, .pf-v6-c-radio__input):where(:disabled) ~ :is(.pf-v6-c-check__label, .pf-v6-c-radio__label), .pf-v6-c-card.pf-m-disabled { + --pf-v6-c-card--BackgroundColor: #fafafa; + --pf-v6-c-card--BorderColor: #d2d2d2; +} + +.pf-v6-c-card.pf-m-selectable:hover { + --pf-v6-c-card--m-selectable--hover--BorderColor: none; +} + +.pf-v6-c-card__selectable-actions :is(.pf-v6-c-check__label, .pf-v6-c-radio__label, .pf-v6-c-card__clickable-action):hover { + --pf-v6-c-card--m-clickable--hover--BorderColor: none; + --pf-v6-c-card--BackgroundColor: #f0f0f0; +} + +.pf-v6-c-card__selectable-actions :is(.pf-v6-c-check__input, .pf-v6-c-radio__input):where(:checked) ~ :is(.pf-v6-c-radio__label, .pf-v6-c-check__label), .pf-v6-c-card.pf-m-selected { + --pf-v6-c-card--m-selectable--BorderWidth: var(--rh-border-width-sm, 1px); +} + +.pf-v6-c-card.pf-m-clickable:hover { + --pf-v6-c-card--m-selectable--hover--BorderColor: none; +} + +.pf-v6-c-card.pf-m-selectable.pf-m-clickable .pf-v6-c-card__selectable-actions :is(.pf-v6-c-check__input, .pf-v6-c-radio__input):where(:disabled) ~ :is(.pf-v6-c-check__label, .pf-v6-c-radio__label), .pf-v6-c-card.pf-m-selectable.pf-m-clickable.pf-m-disabled { + --pf-v6-c-card--BackgroundColor: #fafafa; +} + +.pf-v6-c-button.pf-m-link.pf-m-inline { + --pf-v6-c-button--disabled--Color: var(--rh-color-gray-60, #4d4d4d); + --pf-v6-c-button--TextDecorationLine: none; +} + +.pf-v6-c-card.pf-m-selectable.pf-m-clickable.pf-m-current { + --pf-v6-c-card--BorderWidth: var(--rh-border-width-sm, 1px); +} + +.pf-v6-c-card__body { + font-size: var(--rh-font-size-body-text-md, 1rem); +} + +.pf-v6-c-card__footer { + font-size: var(--rh-font-size-body-text-md, 1rem); } .pf-v6-c-banner { @@ -1135,3 +1180,5 @@ --pf-t--global--background--color--600: var(--rh-color-surface-lightest, #ffffff); --pf-t--global--background--color--action--plain--default: var(--rh-color-surface-lightest, #ffffff); } + +/*# sourceMappingURL=redhat-brand-theme.css.map */ diff --git a/src/views/Homepage/HomePage.tsx b/src/views/Homepage/HomePage.tsx index 04ac5f4..f5b664a 100644 --- a/src/views/Homepage/HomePage.tsx +++ b/src/views/Homepage/HomePage.tsx @@ -1,35 +1,89 @@ import { FC } from "react"; -import Preview from '../../components/demo/preview'; +import { + Title, + Grid, + GridItem, + Card, + CardHeader, + CardTitle, + CardBody, +} from '@patternfly/react-core'; +import { Link } from 'react-router-dom'; +const allComponents = [ + { + path: "/button", + title: "Button", + description: "Explore different button variations and states" + }, + { + path: "/breadcrumb", + title: "BreadCrumb", + description: "Navigation breadcrumb component examples" + }, + { + path: "/accordion", + title: "Accordion", + description: "Collapsible content panels" + }, + { + path: "/card", + title: "Card", + description: "Various card layouts and configurations" + }, + { + path: "/table", + title: "Table", + description: "Data table with sorting, filtering, and actions" + } +]; +const HomePage: FC = () => { + return ( +
+
+ + Red Hat Branded Theme for PatternFly 6 + +

+ Explore PatternFly components styled with Red Hat's brand theme. + Navigate through different components using the sidebar menu. +

+
-// const allComponents = [ -// { -// path: "/button", -// title: "Button" -// }, -// { -// path: "/breadcrumb", -// title: "BreadCrumb" -// }, -// { -// path: "/form", -// title: "Form" -// }, -// { -// path: "/accordion", -// title: "Accordion" -// }, -// { -// path: "/card", -// title: "Card" -// } -// ] +
+ + Available Components + + + + {allComponents.map((component) => ( + + + + + + {component.title} + + + + +

{component.description}

+ + + + ))} + +
-const HomePage:FC=()=>{ - return (<> - - ) -} + {/*
+ + Component Preview - Table + + + */} + + ); +}; export default HomePage; \ No newline at end of file