Skip to content

Commit 776aba7

Browse files
jenny-s51jenny-s51
authored
feat(DescriptionList): add new DescriptionList component (#4586)
* WIP description list * DescriptionList and demo complete, WIP tests * remove ref * add tests * change div to dl and fix linting errors * add beta and clean up * hi this is for you, MDLint * fixed icon imports * fix button spacing * update comment in list group * address PR feedback * spread props at the end * change description back to dd * update snapshots * update prop descriptions in DescriptionListDescriptionProps * address PR feedback from Titani * fix lint and add all breakpoints to demo and cypress test * change classNames to ids and add breakpoints demo+test * clean up breakpoints test file * update snapshots * update boolean prop names
1 parent 955d6f4 commit 776aba7

15 files changed

Lines changed: 1311 additions & 0 deletions

File tree

‎packages/react-core/src/components/DescriptionList/DescriptionList.tsx‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
import * as React from 'react';
2+
import { css } from '@patternfly/react-styles';
3+
import styles from '@patternfly/react-styles/css/components/DescriptionList/description-list';
4+
import { formatBreakpointMods } from '../../helpers';
5+
6+
export interface DescriptionListProps extends Omit<React.HTMLProps<HTMLDListElement>, 'type'> {
7+
/** Anything that can be rendered inside of the list */
8+
children?: React.ReactNode;
9+
/** Additional classes added to the list */
10+
className?: string;
11+
/** Sets the description list component term and description pair to a horizontal layout. */
12+
isHorizontal?: boolean;
13+
/** Sets the description list to format automatically. */
14+
isAutoColumnWidths?: boolean;
15+
/** Modifies the description list display to inline-grid. */
16+
isInlineGrid?: boolean;
17+
/** Sets the number of columns on the description list */
18+
columnModifier?: {
19+
default?: '1Col' | '2Col' | '3Col';
20+
md?: '1Col' | '2Col' | '3Col';
21+
lg?: '1Col' | '2Col' | '3Col';
22+
xl?: '1Col' | '2Col' | '3Col';
23+
'2xl'?: '1Col' | '2Col' | '3Col';
24+
};
25+
}
26+
27+
export const DescriptionList: React.FunctionComponent<DescriptionListProps> = ({
28+
className = '',
29+
children = null,
30+
isHorizontal = false,
31+
isAutoColumnWidths,
32+
isInlineGrid,
33+
columnModifier,
34+
...props
35+
}: DescriptionListProps) => (
36+
<dl
37+
className={css(
38+
styles.descriptionList,
39+
isHorizontal && styles.modifiers.horizontal,
40+
isAutoColumnWidths && styles.modifiers.autoColumnWidths,
41+
formatBreakpointMods(columnModifier, styles),
42+
isInlineGrid && styles.modifiers.inlineGrid,
43+
className
44+
)}
45+
{...props}
46+
>
47+
{children}
48+
</dl>
49+
);
50+
DescriptionList.displayName = 'DescriptionList';

‎packages/react-core/src/components/DescriptionList/DescriptionListDescription.tsx‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import * as React from 'react';
2+
import styles from '@patternfly/react-styles/css/components/DescriptionList/description-list';
3+
import { css } from '@patternfly/react-styles';
4+
5+
export interface DescriptionListDescriptionProps extends React.HTMLProps<HTMLElement> {
6+
/** Anything that can be rendered inside of list description */
7+
children: React.ReactNode;
8+
/** Additional classes added to the DescriptionListDescription */
9+
className?: string;
10+
}
11+
12+
export const DescriptionListDescription: React.FunctionComponent<DescriptionListDescriptionProps> = ({
13+
children = null,
14+
className,
15+
...props
16+
}: DescriptionListDescriptionProps) => (
17+
<dd className={css(styles.descriptionListDescription, className)} {...props}>
18+
<div className={'pf-c-description-list__text'}>{children}</div>
19+
</dd>
20+
);
21+
DescriptionListDescription.displayName = 'DescriptionListDescription';

‎packages/react-core/src/components/DescriptionList/DescriptionListGroup.tsx‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import * as React from 'react';
2+
import styles from '@patternfly/react-styles/css/components/DescriptionList/description-list';
3+
import { css } from '@patternfly/react-styles';
4+
5+
export interface DescriptionListGroupProps extends React.HTMLProps<HTMLDivElement> {
6+
/** Any elements that can be rendered in the list group */
7+
children?: any;
8+
/** Additional classes added to the DescriptionListGroup */
9+
className?: string;
10+
}
11+
12+
export const DescriptionListGroup: React.FC<DescriptionListGroupProps> = ({
13+
className,
14+
children
15+
}: DescriptionListGroupProps) => <div className={css(styles.descriptionListGroup, className)}>{children}</div>;
16+
DescriptionListGroup.displayName = 'DescriptionListGroup';

‎packages/react-core/src/components/DescriptionList/DescriptionListTerm.tsx‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import * as React from 'react';
2+
import styles from '@patternfly/react-styles/css/components/DescriptionList/description-list';
3+
import { css } from '@patternfly/react-styles';
4+
5+
export interface DescriptionListTermProps extends React.HTMLProps<HTMLElement> {
6+
/** Anything that can be rendered inside of list term */
7+
children: React.ReactNode;
8+
/** Additional classes added to the DescriptionListTerm */
9+
className?: string;
10+
}
11+
12+
export const DescriptionListTerm: React.FunctionComponent<DescriptionListTermProps> = ({
13+
children,
14+
className,
15+
...props
16+
}: DescriptionListTermProps) => (
17+
<dt className={css(styles.descriptionListTerm, className)} {...props}>
18+
<span className={'pf-c-description-list__text'}>{children}</span>
19+
</dt>
20+
);
21+
DescriptionListTerm.displayName = 'DescriptionListTerm';

‎packages/react-core/src/components/DescriptionList/__tests__/DescriptionList.test.tsx‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
import React from 'react';
2+
import { shallow, mount } from 'enzyme';
3+
import { DescriptionList } from '../DescriptionList';
4+
import { DescriptionListGroup } from '../DescriptionListGroup';
5+
import { DescriptionListTerm } from '../DescriptionListTerm';
6+
import { DescriptionListDescription } from '../DescriptionListDescription';
7+
8+
describe('Description List', () => {
9+
test('default', () => {
10+
const view = shallow(<DescriptionList />);
11+
expect(view).toMatchSnapshot();
12+
});
13+
14+
test('1 col on all breakpoints', () => {
15+
const view = shallow(<DescriptionList columnModifier={{ default: '1Col', md: '1Col', lg: '1Col', xl: '1Col', '2xl': '1Col' }}/>);
16+
expect(view).toMatchSnapshot();
17+
});
18+
19+
test('2 col on all breakpoints', () => {
20+
const view = shallow(<DescriptionList columnModifier={{ default: '2Col', md: '2Col', lg: '2Col', xl: '2Col', '2xl': '2Col' }}/>);
21+
expect(view).toMatchSnapshot();
22+
});
23+
24+
test('3 col on all breakpoints', () => {
25+
const view = shallow(<DescriptionList columnModifier={{ default: '3Col', md: '3Col', lg: '3Col', xl: '3Col', '2xl': '3Col' }}/>);
26+
expect(view).toMatchSnapshot();
27+
});
28+
29+
test('Horizontal Description List', () => {
30+
const view = shallow(<DescriptionList isHorizontal />);
31+
expect(view).toMatchSnapshot();
32+
});
33+
34+
test('Auto Column Widths Description List', () => {
35+
const view = shallow(<DescriptionList isAutoColumnWidths />);
36+
expect(view).toMatchSnapshot();
37+
});
38+
39+
test('Inline Grid Description List', () => {
40+
const view = shallow(<DescriptionList isInlineGrid />);
41+
expect(view).toMatchSnapshot();
42+
});
43+
44+
test('Term default', () => {
45+
const view = shallow(
46+
<DescriptionListTerm key="term-id-1" aria-labelledby="term-1">
47+
test
48+
</DescriptionListTerm>
49+
);
50+
expect(view).toMatchSnapshot();
51+
});
52+
53+
test('Group', () => {
54+
const view = shallow(
55+
<DescriptionListGroup className="custom-description-list-group" aria-labelledby="group-1">
56+
test
57+
</DescriptionListGroup>
58+
);
59+
expect(view).toMatchSnapshot();
60+
});
61+
62+
test('Description', () => {
63+
const view = shallow(
64+
<DescriptionListDescription className="custom-description-list-description" aria-labelledby="description-1">
65+
test
66+
</DescriptionListDescription>
67+
);
68+
expect(view).toMatchSnapshot();
69+
})
70+
71+
});

‎packages/react-core/src/components/DescriptionList/__tests__/__snapshots__/DescriptionList.test.tsx.snap‎

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`Description List 1 col on all breakpoints 1`] = `
4+
<dl
5+
className="pf-c-description-list pf-m-1-col pf-m-1-col-on-md pf-m-1-col-on-lg pf-m-1-col-on-xl pf-m-1-col-on-2xl"
6+
/>
7+
`;
8+
9+
exports[`Description List 2 col on all breakpoints 1`] = `
10+
<dl
11+
className="pf-c-description-list pf-m-2-col pf-m-2-col-on-md pf-m-2-col-on-lg pf-m-2-col-on-xl pf-m-2-col-on-2xl"
12+
/>
13+
`;
14+
15+
exports[`Description List 3 col on all breakpoints 1`] = `
16+
<dl
17+
className="pf-c-description-list pf-m-3-col pf-m-3-col-on-md pf-m-3-col-on-lg pf-m-3-col-on-xl pf-m-3-col-on-2xl"
18+
/>
19+
`;
20+
21+
exports[`Description List Auto Column Widths Description List 1`] = `
22+
<dl
23+
className="pf-c-description-list pf-m-auto-column-widths"
24+
/>
25+
`;
26+
27+
exports[`Description List Description 1`] = `
28+
<dd
29+
aria-labelledby="description-1"
30+
className="pf-c-description-list__description custom-description-list-description"
31+
>
32+
<div
33+
className="pf-c-description-list__text"
34+
>
35+
test
36+
</div>
37+
</dd>
38+
`;
39+
40+
exports[`Description List Group 1`] = `
41+
<div
42+
className="pf-c-description-list__group custom-description-list-group"
43+
>
44+
test
45+
</div>
46+
`;
47+
48+
exports[`Description List Horizontal Description List 1`] = `
49+
<dl
50+
className="pf-c-description-list pf-m-horizontal"
51+
/>
52+
`;
53+
54+
exports[`Description List Inline Grid Description List 1`] = `
55+
<dl
56+
className="pf-c-description-list pf-m-inline-grid"
57+
/>
58+
`;
59+
60+
exports[`Description List Term default 1`] = `
61+
<dt
62+
aria-labelledby="term-1"
63+
className="pf-c-description-list__term"
64+
>
65+
<span
66+
className="pf-c-description-list__text"
67+
>
68+
test
69+
</span>
70+
</dt>
71+
`;
72+
73+
exports[`Description List default 1`] = `
74+
<dl
75+
className="pf-c-description-list"
76+
/>
77+
`;

0 commit comments

Comments
 (0)