Update website IA for v5

packages/v4/patternfly-docs/content/contribute/about/about.md → packages/v4/patternfly-docs/content/contribute/contributing-to-patternfly/contributing-to-patternfly.md

@@ -1,6 +1,7 @@
 ---
-id: About
-section: contribute
+id: Contributing to PatternFly
+section: get-started
+subsection: contribute
 ---
 
 The PatternFly open source community depends on contributions to help our design system grow and evolve. We encourage everyone, regardless of background, to make suggestions for enhancements, contribute new design patterns and ideas, help identify bugs in code, and more. With your help, we can stay on top of the latest and greatest implementation solutions.  

packages/v4/patternfly-docs/content/contribute/design/design.md

@@ -1,6 +1,7 @@
 ---
-id: Design
-section: contribute
+id: Designer contributions
+section: get-started
+subsection: contribute
 ---
 
 ## Ways to contribute

packages/v4/patternfly-docs/content/contribute/develop/develop.md

@@ -1,6 +1,7 @@
 ---
-id: Develop
-section: contribute
+id: Developer contributions
+section: get-started
+subsection: contribute
 ---
 
 ## Ways to contribute

packages/v4/patternfly-docs/content/design-guidelines/demos/password-strength/password-strength.md → packages/v4/patternfly-docs/content/design-guidelines/components/password-strength/password-strength.md

@@ -1,6 +1,6 @@
 ---
 id: Password strength
-section: demos
+section: components
 ---
 
 A **password strength indicator** is displayed to a user after they have entered a password in a field. It allows the user to understand the strength of a password after it has met the password requirements. The strength of the password is determined by a validation algorithm after the specific rules are met.  Using a password strength indicator allows users to create stronger passwords, offering better protection from breaches. 

packages/v4/patternfly-docs/content/design-guidelines/demos/card-view/card-view.md → packages/v4/patternfly-docs/content/design-guidelines/patterns/card-view/card-view.md

@@ -1,6 +1,6 @@
 ---
 id: Card view
-section: demos
+section: patterns
 ---
 
 

packages/v4/patternfly-docs/content/design-guidelines/demos/dashboard/dashboard.md → packages/v4/patternfly-docs/content/design-guidelines/patterns/dashboard/dashboard.md

@@ -1,6 +1,6 @@
 ---
 id: Dashboard
-section: demos
+section: patterns
 ---
 
 A dashboard provides overviews of key metrics or performance indicators relevant to an application, process, or business. The overall experience of dashboards can vary greatly depending on their use cases, so it can be difficult to define a one-size-fits-all approach. These guidelines take a systematic approach to dashboard design that can be applied in a variety of situations.

packages/v4/patternfly-docs/content/design-guidelines/demos/primary-detail/primary-detail.md → packages/v4/patternfly-docs/content/design-guidelines/patterns/primary-detail/primary-detail.md

@@ -1,6 +1,6 @@
 ---
 id: Primary-detail
-section: demos
+section: patterns
 ---
 
 A **primary-detail layout** is an interface that shows a list of items and the corresponding details of the selected item.

packages/v4/patternfly-docs/content/design-guidelines/styles/colors/colors.md

@@ -1,6 +1,6 @@
 ---
 id: Colors
-section: guidelines
+section: design-foundations
 ---
 import { Alert, Grid, GridItem, Divider } from '@patternfly/react-core';
 import { ColorSwatch } from './ColorSwatch';

packages/v4/patternfly-docs/content/design-guidelines/styles/icons/icons.md

@@ -1,6 +1,6 @@
 ---
 id: Icons
-section: guidelines
+section: design-foundations
 ---
 import { Card, CardBody, Divider, Flex, FlexItem, Grid, GridItem } from '@patternfly/react-core';
 import CaretDownIcon from '@patternfly/react-icons/dist/esm/icons/caret-down-icon';

packages/v4/patternfly-docs/content/design-guidelines/styles/spacers/spacers.md

@@ -1,6 +1,6 @@
 ---
 id: Spacers
-section: guidelines
+section: design-foundations
 ---
 import './spacers.css';
 

packages/v4/patternfly-docs/content/design-guidelines/styles/typography/typography.md

@@ -1,6 +1,6 @@
 ---
 id: Typography
-section: guidelines
+section: design-foundations
 ---
 
 import { Button, Grid, GridItem } from '@patternfly/react-core';

packages/v4/patternfly-docs/content/design-guidelines/usage-and-behavior/bulk-selection/bulk-selection.md

@@ -1,6 +1,6 @@
 ---
 id: Bulk selection
-section: guidelines
+section: patterns
 ---
 
 ## Bulk selection

packages/v4/patternfly-docs/content/design-guidelines/usage-and-behavior/filters/filters.md

@@ -1,6 +1,6 @@
 ---
 id: Filters
-section: demos
+section: patterns
 related: [
   'Badge',
   'Chip',

packages/v4/patternfly-docs/content/design-guidelines/usage-and-behavior/usage-and-behavior.md

@@ -1,6 +1,6 @@
 ---
 id: Usage and behavior
-section: guidelines
+section: design-foundations
 ---
 
 As you design with PatternFly, you might encounter common use cases where multiple components apply. This page gives advice for which component to use in these situations and shares where to find more detailed usage guidelines.

packages/v4/patternfly-docs/content/get-started/community/community.md

@@ -0,0 +1,151 @@
+---
+id: Community
+title: PatternFly community
+section: get-started
+---
+
+import { Link } from '@patternfly/documentation-framework/components';
+import { Card, CardBody, Grid, GridItem, PageSection, Split, SplitItem, Title } from '@patternfly/react-core';
+import './community.css';
+import { getTitle } from '@patternfly/documentation-framework/helpers/getTitle';
+import communityPageHeader from './community-page-header.svg';
+import community1 from './community-1.svg';
+import community2 from './community-2.svg';
+import community3 from './community-3.svg';
+import ChatIcon from '@patternfly/react-icons/dist/esm/icons/chat-icon';
+import QuestionIcon from '@patternfly/react-icons/dist/esm/icons/question-icon';
+import CatalogIcon from '@patternfly/react-icons/dist/esm/icons/catalog-icon';
+import MailBulkIcon from '@patternfly/react-icons/dist/esm/icons/mail-bulk-icon';
+import TwitterIcon from '@patternfly/react-icons/dist/esm/icons/twitter-icon';
+import CalendarIcon from '@patternfly/react-icons/dist/esm/icons/calendar-alt-icon';
+
+<div className="ws-community-page pf-m-light-100">
+  <p>At the core of PatternFly is our community of people—in other words, our Flyers. Together, we celebrate creativity and foster a sense of teamwork and unity.</p>
+
+  <Grid sm={12} md={6} hasGutter className="pf-u-mt-3xl">
+    <GridItem className="pf-u-pr-xl">
+      <img src={communityPageHeader} alt="Website collaboration" />
+    </GridItem>
+    <GridItem>
+      <Title size="3xl" className="ws-title" headingLevel="h2">Who we are</Title>
+      <p>We're made of designers, developers, and other UX professionals with a passion for open source. We each have different ways of working with others and supporting the community—there's no one way to be a Flyer. Whether we're contributing to PatternFly or just staying up to date on new releases, we work together to make PatternFly a vibrant community of passionate people.</p>
+    </GridItem>
+  </Grid>
+
+  <Title size="3xl" className="pf-u-mb-sm ws-page-title pf-u-mt-3xl" headingLevel="h2">What we're building</Title>
+  <p>Our work extends beyond products and apps. We're always exploring new ways we can welcome ideas and build better experiences for the very people who make PatternFly what it is today. </p>
+
+  <Grid sm={12} md={4} hasGutter className="pf-u-my-lg pf-u-text-align-center ws-building-grid">
+    <Card>
+      <CardBody>
+        <img src={community1} alt="Globe" className="ws-community-grid-img" />
+        <Title size="xl" className="ws-title" headingLevel="h3">Building global connections</Title>
+        <p>
+          Flyers may be spread all over the globe, but we make sure to come together once a month to share updates and collect feedback. All meetings are recorded and published on <a href="https://www.youtube.com/channel/UCqLT0IEvYmb8z__9IFLSVyQ">PatternFly's YouTube channel</a>, and you can join PatternFly's mailing list for the invites.
+        </p>
+        <Title size="xl" className="ws-title" headingLevel="h3">
+          <a href="https://www.redhat.com/mailman/listinfo/patternfly"><strong>Join our mailing list</strong></a>
+        </Title>
+      </CardBody>
+    </Card>
+    <Card>
+      <CardBody>
+        <img src={community2} alt="Map" className="ws-community-grid-img" />
+        <Title size="xl" className="ws-title" headingLevel="h3">Building PatternFly roadmaps</Title>
+        <p>
+          To stay on top of all changes and keep everyone informed, we regularly update PatternFly roadmaps. This gives us an opportunity to share what Flyers are working on and what updates we're planning.
+        </p>
+        <Title size="xl" className="ws-title" headingLevel="h3">
+          <a href="https://github.com/orgs/patternfly/projects/4?fullscreen=true"><strong>Explore PatternFly roadmaps</strong></a>
+        </Title>
+      </CardBody>
+    </Card>
+    <Card>
+      <CardBody>
+        <img src={community3} alt="Figure of a person" className="ws-community-grid-img" />
+        <Title size="xl" className="ws-title" headingLevel="h3">Building accessible experiences</Title>
+        <p>
+          A community isn't really a community unless everyone is included, so accessible UX is important to us. We regularly test and audit PatternFly's accessibility and share guidance whenever we can.
+        </p>
+        <Title size="xl" className="ws-title" headingLevel="h3">
+          <Link to="/accessibility/accessibility-fundamentals">
+            <strong>Read our accessibility guide</strong>
+          </Link>
+        </Title>
+      </CardBody>
+    </Card>
+  </Grid>
+
+  <Title size="3xl" className="pf-u-mb-sm ws-page-title pf-u-mt-3xl" headingLevel="h2">Creating new communities</Title>
+  <p>Sometimes Flyers branch out and build groups of their own, which is how new communities are born. While PatternFly communities are separate from PatternFly and not supported as part of the design system, we still love seeing our Flyers forming new groups and developing their visions into actions.</p>
+  <br/>
+
+  <Title size="xl" className="pf-u-mb-sm ws-page-title pf-u-mt-xl" headingLevel="h3"><a href="https://patternflyelements.org">PatternFly Elements</a></Title>
+  <p> PatternFly Elements is a community created by Red Hat's web-based developers. It focuses on creating web components for use across Red Hat's sites and SaaS products and features theming options available for your own brand library.</p>
+
+  <Title size="xl" className="pf-u-mb-sm ws-page-title pf-u-mt-xl" headingLevel="h3"><a href="https://github.com/patternfly-kotlin/patternfly-kotlin">PatternFly Kotlin</a></Title>
+  <p>PatternFly Kotlin is a Kotlin implementation of PatternFly based on fritz2, targeting Kotlin/JS. The goal of this project is to provide all PatternFly components in Kotlin, matching the reactive nature of fritz2. The components use stores, handlers, and other elements from the fritz2 API. For a quick overview, check out the <a href="https://patternfly-kotlin.github.io/patternfly-kotlin-showcase/#home">PatternFly Kotlin showcase</a>.</p>
+
+  <Title size="xl" className="pf-u-mb-sm ws-page-title pf-u-mt-xl" headingLevel="h3"><a href="https://www.sketch.com/s/6ccbd710-267d-4b69-9dae-bc19e1551056">Ansible Component Guide and Sketch Library</a></Title>
+  <p>The Ansible Component Guide and Sketch Library is an additional resource that designers can use that is built on top of existing PatternFly components. It is a rapid mockup prototyping tool that can be used to quickly put together repeatable design patterns and layouts across projects. Although this is specific to Ansible, many of the components are generalized and can fit many product use cases and are easily detachable to update as needed.</p>
+
+  <Title size="4xl" className="pf-u-mb-lg ws-page-title ws-keep-growing pf-u-mt-3xl" headingLevel="h2">Let's keep growing</Title>
+  <p>The PatternFly community is never finished growing, and we want to keep it that way. Feel free to reach out whenever — we're always open.</p>
+
+  <Grid sm={12} md={6} gutter="sm" className="pf-u-my-lg pf-l-grid pf-m-all-12-col-on-sm pf-m-all-6-col-on-md pf-m-gutter" style={{ maxWidth: '450px' }}>
+    <GridItem>
+      <Split>
+        <SplitItem style={{ marginRight: '12px' }}><ChatIcon /></SplitItem>
+        <SplitItem isFilled>
+          <Title size="lg" className="ws-title" headingLevel="h3">Chat with us</Title>
+          <a href="//join.slack.com/t/patternfly/shared_invite/zt-1npmqswgk-bF2R1E2rglV8jz5DNTezMQ" target="_blank" rel="noopener noreferrer">Slack</a>
+        </SplitItem>
+      </Split>
+    </GridItem>
+    <GridItem>
+      <Split>
+        <SplitItem style={{ marginRight: '12px' }}><MailBulkIcon /></SplitItem>
+        <SplitItem isFilled>
+          <Title size="lg" className="ws-title" headingLevel="h3">Stay in the loop</Title>
+          <a href="//www.redhat.com/mailman/listinfo/patternfly" target="_blank" rel="noopener noreferrer">PatternFly mailing list</a>
+        </SplitItem>
+      </Split>
+    </GridItem>
+    <GridItem>
+      <Split>
+        <SplitItem style={{ marginRight: '12px' }}><QuestionIcon /></SplitItem>
+        <SplitItem isFilled>
+          <Title size="lg" className="ws-title" headingLevel="h3">Ask a question</Title>
+          <a href="//forum.patternfly.org/" target="_blank" rel="noopener noreferrer">PatternFly forum</a>
+        </SplitItem>
+      </Split>
+    </GridItem>
+    <GridItem>
+      <Split>
+        <SplitItem style={{ marginRight: '12px' }}><CatalogIcon /></SplitItem>
+        <SplitItem isFilled>
+          <Title size="lg" className="ws-title" headingLevel="h3">Read the latest</Title>
+          <a href="//medium.com/patternfly" target="_blank" rel="noopener noreferrer">PatternFly Medium</a>
+        </SplitItem>
+      </Split>
+    </GridItem>
+    <GridItem>
+      <Split>
+        <SplitItem style={{ marginRight: '12px' }}><TwitterIcon /></SplitItem>
+        <SplitItem isFilled>
+          <Title size="lg" className="ws-title" headingLevel="h3">Send us a Tweet</Title>
+          <a href="//twitter.com/patternfly" target="_blank" rel="noopener noreferrer">PatternFly Twitter</a>
+        </SplitItem>
+      </Split>
+    </GridItem>
+    <GridItem>
+      <Split>
+        <SplitItem style={{ marginRight: '12px' }}><CalendarIcon /></SplitItem>
+        <SplitItem isFilled>
+          <Title size="lg" className="ws-title" headingLevel="h3">Attend office hours</Title>
+          <a href="//calendar.google.com/calendar/embed?src=patternflyteam%40gmail.com&ctz=America%2FNew_York" target="_blank" rel="noopener noreferrer">PatternFly calendar</a>
+        </SplitItem>
+      </Split>
+    </GridItem>
+  </Grid>
+</div>