Skip to content

Update to the latest PF versions #224

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
dlabaj merged 4 commits into from
Jul 30, 2024
Merged

Update to the latest PF versions #224

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
9c0d381
Update PF dependencies
fhlavac Jul 30, 2024
92b924e
Fix MCC colors
fhlavac Jul 30, 2024
30b28ea
Replace not existing PF Text components
fhlavac Jul 30, 2024
d75ec77
Update snapshots
fhlavac Jul 30, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ Please see the [migration guide](./migration.md)
#### Example component:
```
import * as React from 'react';
import { Text } from '@patternfly/react-core';
import { Content } from '@patternfly/react-core';
import { createUseStyles } from 'react-jss';

// do not forget to export your component's interface
Expand All @@ -42,9 +42,9 @@ const MyComponent: React.FunctionComponent<MyComponentProps> = () => {
const classes = useStyles();

return (
<Text className={classes.myText}>
<Content className={classes.myText}>
This is my new reusable component
</Text>
</Content>
);
};

Expand Down
90 changes: 39 additions & 51 deletions cypress/component/MultiContentCard.cy.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React from 'react';
import MultiContentCard from "@patternfly/react-component-groups/dist/dynamic/MultiContentCard";
import { Button, Card, CardHeader, CardBody, Text, TextContent, TextVariants, Icon, TextList, TextListItem, CardFooter } from '@patternfly/react-core';
import { Button, Card, CardHeader, CardBody, Content, ContentVariants, Icon, List, ListItem, CardFooter } from '@patternfly/react-core';
import { ArrowRightIcon, BellIcon, CogIcon, LockIcon } from '@patternfly/react-icons';
import { createUseStyles } from 'react-jss';
import clsx from 'clsx';
Expand All @@ -21,92 +21,80 @@ export const MultiContentCardExample: React.FunctionComponent = () => {
const cards = [
<Card isFullHeight isPlain key="card-1">
<CardHeader>
<TextContent>
<Text component={TextVariants.h4}>Getting Started</Text>
</TextContent>
<Content component={ContentVariants.h4}>Getting Started</Content>
</CardHeader>
<CardBody>
<TextContent>
<Text className={clsx(classes.action, 'pf-v6-u-font-weight-bold', 'pf-v6-u-mb-sm')}>
<Icon size="md" className="pf-v6-u-pl-sm pf-v6-u-pr-md">
<CogIcon />
</Icon>
<Content className={clsx(classes.action, 'pf-v6-u-font-weight-bold', 'pf-v6-u-mb-sm')}>
<Icon size="md" className="pf-v6-u-pl-sm pf-v6-u-pr-md">
<CogIcon />
</Icon>
Configure application
</Text>
<Text className="pf-v6-u-font-size-sm">
</Content>
<Content className="pf-v6-u-font-size-sm">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</Text>
</TextContent>
</Content>
</CardBody>
<CardFooter>
<TextContent>
<TextList className={clsx(classes.bulletPoints, 'pf-v6-u-font-size-sm', 'pf-v6-u-ml-0')}>
<TextListItem>
<Button variant="link" isInline>First link</Button>
</TextListItem>
<TextListItem>
<Button variant="link" isInline>Second link</Button>
</TextListItem>
<TextListItem>
<Button variant="link" isInline>Another link</Button>
</TextListItem>
</TextList>
</TextContent>
<List className={clsx(classes.bulletPoints, 'pf-v6-u-font-size-sm', 'pf-v6-u-ml-0')}>
<ListItem>
<Button variant="link" isInline>First link</Button>
</ListItem>
<ListItem>
<Button variant="link" isInline>Second link</Button>
</ListItem>
<ListItem>
<Button variant="link" isInline>Another link</Button>
</ListItem>
</List>
</CardFooter>
</Card>,
<Card isFullHeight isPlain key="card-2">
<CardBody className="pf-v6-u-pt-3xl-on-md">
<TextContent>
<Text className={clsx(classes.action, 'pf-v6-u-font-weight-bold', 'pf-v6-u-mb-sm')}>
<Icon size="md" className="pf-v6-u-pl-sm pf-v6-u-pr-md">
<LockIcon />
</Icon>
<Content className={clsx(classes.action, 'pf-v6-u-font-weight-bold', 'pf-v6-u-mb-sm')}>
<Icon size="md" className="pf-v6-u-pl-sm pf-v6-u-pr-md">
<LockIcon />
</Icon>
Configure access
</Text>
<Text>
</Content>
<Content>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</Text>
</TextContent>
</Content>
</CardBody>
<CardFooter>
<Text>
<Content>
<Button variant="link" isInline>
Learn more
<Icon className="pf-v6-u-ml-sm" isInline>
<ArrowRightIcon />
</Icon>
</Button>
</Text>
</Content>
</CardFooter>
</Card>,
<Card isFullHeight isPlain key="card-3">
<CardHeader>
<TextContent>
<Text component={TextVariants.h4}>Next Steps</Text>
</TextContent>
<Content component={ContentVariants.h4}>Next Steps</Content>
</CardHeader>
<CardBody>
<TextContent>
<Text className={clsx(classes.action, 'pf-v6-u-font-weight-bold', 'pf-v6-u-mb-sm')}>
<Icon size="md" className="pf-v6-u-pl-sm pf-v6-u-pr-md">
<BellIcon />
</Icon>
<Content className={clsx(classes.action, 'pf-v6-u-font-weight-bold', 'pf-v6-u-mb-sm')}>
<Icon size="md" className="pf-v6-u-pl-sm pf-v6-u-pr-md">
<BellIcon />
</Icon>
Configure notifications
</Text>
<Text>
</Content>
<Content>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</Text>
</TextContent>
</Content>
</CardBody>
<CardFooter>
<Text>
<Content>
<Button variant="link" isInline>
Learn more
<Icon className="pf-v6-u-ml-sm" isInline>
<ArrowRightIcon />
</Icon>
</Button>
</Text>
</Content>
</CardFooter>
</Card>
];
Expand Down
Loading