Skip to content

Commit 0af6ed9

Browse files
mtorromeomtorromeo
committed
feat(DescriptionList): implemented components
1 parent 2bc1c1f commit 0af6ed9

File tree

13 files changed

+783
-6
lines changed

13 files changed

+783
-6
lines changed

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
!.vscode
77
*.log
88
*.gz
9+
*.tsbuildinfo
910
dist
1011

1112
# js

‎apps/docs/src/components/DocPage.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@
4848

4949
<style scoped>
5050
.story-content {
51-
max-width: 832px;
51+
max-width: 840px;
5252
}
5353
5454
.toc {

‎apps/docs/src/stories/Components/DescriptionList.story.vue‎

Lines changed: 484 additions & 0 deletions
Large diffs are not rendered by default.

‎packages/core/package.json‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,14 +7,14 @@
77
],
88
"exports": {
99
".": {
10+
"types": "./dist/main.d.ts",
1011
"import": "./dist/main.js",
11-
"require": "./dist/main.cjs",
12-
"types": "./dist/main.d.ts"
12+
"require": "./dist/main.cjs"
1313
},
1414
"./*": {
15+
"types": "./dist/*.d.ts",
1516
"import": "./dist/*.js",
16-
"require": "./dist/*.cjs",
17-
"types": "./dist/*.d.ts"
17+
"require": "./dist/*.cjs"
1818
}
1919
},
2020
"scripts": {

‎packages/core/src/breakpoints.ts‎

Lines changed: 61 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -220,6 +220,66 @@ export type ExpandableBreakpointProps = {
220220
expandableXl2?: 'expandable' | 'nonExpandable';
221221
}
222222

223+
export type ColumnsBreakpointProps = {
224+
/** Sets the number of columns on the description list */
225+
columns?: '1Col' | '2Col' | '3Col';
226+
/** Sets the number of columns on the description list at Sm breakpoint */
227+
columnsSm?: '1Col' | '2Col' | '3Col';
228+
/** Sets the number of columns on the description list at Md breakpoint */
229+
columnsMd?: '1Col' | '2Col' | '3Col';
230+
/** Sets the number of columns on the description list at Lg breakpoint */
231+
columnsLg?: '1Col' | '2Col' | '3Col';
232+
/** Sets the number of columns on the description list at Xl breakpoint */
233+
columnsXl?: '1Col' | '2Col' | '3Col';
234+
/** Sets the number of columns on the description list at Xl2 breakpoint */
235+
columnsXl2?: '1Col' | '2Col' | '3Col';
236+
}
237+
238+
export type OrientationBreakpointProps = {
239+
/** Indicates how the menu will align */
240+
orientation?: 'vertical' | 'horizontal';
241+
/** Indicates how the menu will align at Sm breakpoint */
242+
orientationSm?: 'vertical' | 'horizontal';
243+
/** Indicates how the menu will align at Md breakpoint */
244+
orientationMd?: 'vertical' | 'horizontal';
245+
/** Indicates how the menu will align at Lg breakpoint */
246+
orientationLg?: 'vertical' | 'horizontal';
247+
/** Indicates how the menu will align at Xl breakpoint */
248+
orientationXl?: 'vertical' | 'horizontal';
249+
/** Indicates how the menu will align at Xl2 breakpoint */
250+
orientationXl2?: 'vertical' | 'horizontal';
251+
}
252+
253+
export type AutoFitMinBreakpointProps = {
254+
/** Sets the minimum column size for the auto-fit layout */
255+
autoFitMin?: string;
256+
/** Sets the minimum column size for the auto-fit layout at Sm breakpoint */
257+
autoFitMinSm?: string;
258+
/** Sets the minimum column size for the auto-fit layout at Md breakpoint */
259+
autoFitMinMd?: string;
260+
/** Sets the minimum column size for the auto-fit layout at Lg breakpoint */
261+
autoFitMinLg?: string;
262+
/** Sets the minimum column size for the auto-fit layout at Xl breakpoint */
263+
autoFitMinXl?: string;
264+
/** Sets the minimum column size for the auto-fit layout at Xl2 breakpoint */
265+
autoFitMinXl2?: string;
266+
}
267+
268+
export type HorizontalTermWidthBreakpointProps = {
269+
/** Sets the horizontal description list's term column width */
270+
horizontalTermWidth?: string;
271+
/** Sets the horizontal description list's term column width at Sm breakpoint */
272+
horizontalTermWidthSm?: string;
273+
/** Sets the horizontal description list's term column width at Md breakpoint */
274+
horizontalTermWidthMd?: string;
275+
/** Sets the horizontal description list's term column width at Lg breakpoint */
276+
horizontalTermWidthLg?: string;
277+
/** Sets the horizontal description list's term column width at Xl breakpoint */
278+
horizontalTermWidthXl?: string;
279+
/** Sets the horizontal description list's term column width at Xl2 breakpoint */
280+
horizontalTermWidthXl2?: string;
281+
}
282+
223283
export type BreakpointProps = {
224284
sm?: boolean;
225285
md?: boolean;
@@ -251,7 +311,7 @@ export function classesFromBreakpointProps(props: any, baseNames: string[], styl
251311
continue;
252312
} else {
253313
value = toCamelCase(value);
254-
if (value.match(/^[0-9]/)) {
314+
if (!short && value.match(/^[0-9]/)) {
255315
value = `_${value}`;
256316
}
257317
}

‎packages/core/src/components/DescriptionList/DescriptionList.vue‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
<template>
2+
<dl
3+
v-bind="(ouiaProps as any)"
4+
:class="[
5+
styles.descriptionList,
6+
classesFromBreakpointProps($props, ['columns', 'orientation'], styles, { short: true }),
7+
{
8+
[styles.modifiers.horizontal]: horizontal || fluid,
9+
[styles.modifiers.autoColumnWidths]: autoColumnWidths,
10+
[styles.modifiers.autoFit]: autoFit,
11+
[styles.modifiers.inlineGrid]: inlineGrid,
12+
[styles.modifiers.compact]: compact,
13+
[styles.modifiers.fluid]: fluid,
14+
[styles.modifiers.fillColumns]: fillColumns,
15+
[styles.modifiers.displayLg]: displaySize === 'lg',
16+
[styles.modifiers.display_2xl]: displaySize === '2xl',
17+
}
18+
]"
19+
:style="{
20+
[cssTermWidth.name]: termWidth,
21+
...cssVarsFromBreakpointProps(props, 'autoFitMin', cssGridTemplateColumnsMin.name),
22+
...cssVarsFromBreakpointProps(props, 'horizontalTermWidth', cssHorizontalTermWidth.name),
23+
}"
24+
>
25+
<slot />
26+
</dl>
27+
</template>
28+
29+
<script lang="ts" setup>
30+
import styles from '@patternfly/react-styles/css/components/DescriptionList/description-list';
31+
import cssGridTemplateColumnsMin from '@patternfly/react-tokens/dist/esm/c_description_list_GridTemplateColumns_min';
32+
import cssTermWidth from '@patternfly/react-tokens/dist/esm/c_description_list__term_width';
33+
import cssHorizontalTermWidth from '@patternfly/react-tokens/dist/esm/c_description_list_m_horizontal__term_width';
34+
import { type HTMLAttributes } from 'vue';
35+
import { useOUIAProps, type OUIAProps } from '../../helpers/ouia';
36+
import { classesFromBreakpointProps, cssVarsFromBreakpointProps, type AutoFitMinBreakpointProps, type ColumnsBreakpointProps, type HorizontalTermWidthBreakpointProps, type OrientationBreakpointProps } from '../../breakpoints';
37+
38+
defineOptions({
39+
name: 'PfDescriptionList',
40+
});
41+
42+
export interface Props extends OUIAProps, ColumnsBreakpointProps, OrientationBreakpointProps, AutoFitMinBreakpointProps, HorizontalTermWidthBreakpointProps, /* @vue-ignore */ HTMLAttributes {
43+
/** Sets the description list to auto fit. */
44+
autoFit?: boolean;
45+
/** Sets the description list component term and description pair to a horizontal layout. */
46+
horizontal?: boolean;
47+
/** Sets the description list to format automatically. */
48+
autoColumnWidths?: boolean;
49+
/** Modifies the description list display to inline-grid. */
50+
inlineGrid?: boolean;
51+
/** Sets the description list to compact styling. */
52+
compact?: boolean;
53+
/** Sets a horizontal description list to have fluid styling. */
54+
fluid?: boolean;
55+
/** Sets the the default placement of description list groups to fill from top to bottom. */
56+
fillColumns?: boolean;
57+
/** Sets the display size of the descriptions in the description list.*/
58+
displaySize?: 'default' | 'lg' | '2xl';
59+
/** Sets the description list's term column width.*/
60+
termWidth?: string;
61+
}
62+
63+
const props = withDefaults(defineProps<Props>(), {
64+
displaySize: 'default',
65+
});
66+
const ouiaProps = useOUIAProps({id: props.ouiaId, safe: props.ouiaSafe});
67+
68+
defineSlots<{
69+
default?: (props?: Record<never, never>) => any;
70+
}>();
71+
</script>

‎packages/core/src/components/DescriptionList/DescriptionListDescription.vue‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<template>
2+
<dd v-bind="(ouiaProps as any)" :class="styles.descriptionListDescription">
3+
<div :class="styles.descriptionListText">
4+
<slot />
5+
</div>
6+
</dd>
7+
</template>
8+
9+
<script lang="ts" setup>
10+
import styles from '@patternfly/react-styles/css/components/DescriptionList/description-list';
11+
import type { HTMLAttributes } from 'vue';
12+
import { useOUIAProps, type OUIAProps } from '../../helpers/ouia';
13+
14+
defineOptions({
15+
name: 'PfDescriptionListDescription',
16+
});
17+
18+
export interface Props extends OUIAProps, /* @vue-ignore */ HTMLAttributes {
19+
}
20+
21+
const props = defineProps<Props>();
22+
const ouiaProps = useOUIAProps({id: props.ouiaId, safe: props.ouiaSafe});
23+
24+
defineSlots<{
25+
default?: (props?: Record<never, never>) => any;
26+
}>();
27+
</script>

‎packages/core/src/components/DescriptionList/DescriptionListGroup.vue‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<template>
2+
<div v-bind="(ouiaProps as any)" :class="styles.descriptionListGroup">
3+
<slot />
4+
</div>
5+
</template>
6+
7+
<script lang="ts" setup>
8+
import styles from '@patternfly/react-styles/css/components/DescriptionList/description-list';
9+
import type { HTMLAttributes } from 'vue';
10+
import { useOUIAProps, type OUIAProps } from '../../helpers/ouia';
11+
12+
defineOptions({
13+
name: 'PfDescriptionListGroup',
14+
});
15+
16+
export interface Props extends OUIAProps, /* @vue-ignore */ HTMLAttributes {
17+
}
18+
19+
const props = defineProps<Props>();
20+
const ouiaProps = useOUIAProps({id: props.ouiaId, safe: props.ouiaSafe});
21+
22+
defineSlots<{
23+
default?: (props?: Record<never, never>) => any;
24+
}>();
25+
</script>

‎packages/core/src/components/DescriptionList/DescriptionListTerm.vue‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<template>
2+
<dt v-bind="(ouiaProps as any)" :class="styles.descriptionListTerm">
3+
<span v-if="$slots.icon" :class="styles.descriptionListTermIcon">
4+
<slot name="icon" />
5+
</span>
6+
<span :class="styles.descriptionListText">
7+
<slot />
8+
</span>
9+
</dt>
10+
</template>
11+
12+
<script lang="ts" setup>
13+
import styles from '@patternfly/react-styles/css/components/DescriptionList/description-list';
14+
import type { HTMLAttributes } from 'vue';
15+
import { useOUIAProps, type OUIAProps } from '../../helpers/ouia';
16+
17+
defineOptions({
18+
name: 'PfDescriptionListTerm',
19+
});
20+
21+
export interface Props extends OUIAProps, /* @vue-ignore */ HTMLAttributes {
22+
}
23+
24+
const props = defineProps<Props>();
25+
const ouiaProps = useOUIAProps({id: props.ouiaId, safe: props.ouiaSafe});
26+
27+
defineSlots<{
28+
default?: (props?: Record<never, never>) => any;
29+
icon?: (props?: Record<never, never>) => any;
30+
}>();
31+
</script>

‎packages/core/src/components/DescriptionList/DescriptionListTermHelpText.vue‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<template>
2+
<dt v-bind="(ouiaProps as any)" :class="styles.descriptionListTerm">
3+
<slot />
4+
</dt>
5+
</template>
6+
7+
<script lang="ts" setup>
8+
import styles from '@patternfly/react-styles/css/components/DescriptionList/description-list';
9+
import type { HTMLAttributes } from 'vue';
10+
import { useOUIAProps, type OUIAProps } from '../../helpers/ouia';
11+
12+
defineOptions({
13+
name: 'PfDescriptionListTermHelpText',
14+
});
15+
16+
export interface Props extends OUIAProps, /* @vue-ignore */ HTMLAttributes {
17+
}
18+
19+
const props = defineProps<Props>();
20+
const ouiaProps = useOUIAProps({id: props.ouiaId, safe: props.ouiaSafe});
21+
22+
defineSlots<{
23+
default?: (props?: Record<never, never>) => any;
24+
}>();
25+
</script>

0 commit comments

Comments
 (0)