-
Notifications
You must be signed in to change notification settings - Fork 373
Adds CardDescription component #12105
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.
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
Changes from 6 commits
3c8460f
e8fe86f
66f6aa9
aab74f2
d741b63
4502646
ec12c9d
590d1d9
3be9e82
ab025fb
125d8af
2df4228
ffce543
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,23 @@ | ||
| import { css } from '@patternfly/react-styles'; | ||
| import styles from '@patternfly/react-styles/css/components/Card/card'; | ||
|
|
||
| export interface CardSubtitleProps { | ||
| /** Content rendered inside the description. */ | ||
| children?: React.ReactNode; | ||
| /** Additional classes added to the description. */ | ||
| className?: string; | ||
| /** Id of the description. */ | ||
| id?: string; | ||
| } | ||
|
|
||
| export const CardSubtitle: React.FunctionComponent<CardSubtitleProps> = ({ | ||
| children = null, | ||
| className = '', | ||
| id = '', | ||
| ...props | ||
| }: CardSubtitleProps) => ( | ||
| <div {...props} id={id} className={css(styles.cardSubtitle, className)}> | ||
| {children} | ||
| </div> | ||
| ); | ||
| CardSubtitle.displayName = 'CardSubtitle'; |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,21 @@ | ||
| import { render, screen } from '@testing-library/react'; | ||
| import { CardSubtitle } from '../CardSubtitle'; | ||
|
|
||
| describe('CardSubtitle', () => { | ||
| test('renders with PatternFly Core styles', () => { | ||
| const { asFragment } = render(<CardSubtitle>text</CardSubtitle>); | ||
| expect(asFragment()).toMatchSnapshot(); | ||
| }); | ||
|
|
||
| test('className is added to the root element', () => { | ||
| render(<CardSubtitle className="extra-class">text</CardSubtitle>); | ||
| expect(screen.getByText('text')).toHaveClass('extra-class'); | ||
| }); | ||
|
|
||
| test('extra props are spread to the root element', () => { | ||
| const testId = 'card-subtitle'; | ||
|
|
||
| render(<CardSubtitle data-testid={testId} />); | ||
| expect(screen.getByTestId(testId)).toBeInTheDocument(); | ||
| }); | ||
| }); | ||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -9,6 +9,7 @@ propComponents: | |
| 'CardHeaderActionsObject', | ||
| 'CardHeaderSelectableActionsObject', | ||
| 'CardTitle', | ||
| 'CardSubtitle', | ||
| 'CardBody', | ||
| 'CardFooter', | ||
| 'CardExpandableContent' | ||
|
|
@@ -26,7 +27,7 @@ import PlusIcon from '@patternfly/react-icons/dist/esm/icons/plus-icon'; | |
|
|
||
| ### Basic cards | ||
|
|
||
| Basic cards typically have a `<CardTitle>`, `<CardBody>` and `<CardFooter>`. You may omit these components as needed, but it is recommended to at least include a `<CardBody>` to provide details about the card item. | ||
| Basic cards typically have a `<CardTitle>`, `<CardSubtitle>`, `<CardBody>` and `<CardFooter>`. You may omit these components as needed, but it is recommended to at least include a `<CardBody>` to provide details about the card item. | ||
|
||
|
|
||
| ```ts file='./CardBasic.tsx' | ||
|
|
||
|
|
||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
CardSubtitle doesn't pass
classNameanymore, and is only used internally so this test can be removed to fix the build.