Skip to content

Commit 79b8c25

Browse files
mtorromeomtorromeo
committed
docs: reorganized layout documentation stories
1 parent 9e84bb9 commit 79b8c25

File tree

17 files changed

+247
-147
lines changed

17 files changed

+247
-147
lines changed

‎apps/docs/src/App.vue‎

Lines changed: 34 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
<router-link v-slot="{ href }" :to="{ name: 'introduction' }" custom>
1212
<pf-masthead-brand :href="href">
1313
<pf-brand
14-
src="https://www.patternfly.org/assets/images/pf_logo.svg"
14+
src="https://v5-archive.patternfly.org/assets/images/pf_logo.svg"
1515
style="height:40px;filter:invert(1)"
1616
/>
1717
</pf-masthead-brand>
@@ -59,6 +59,39 @@
5959
<router-view v-else />
6060
</template>
6161

62+
<style lang="scss">
63+
.page__layouts {
64+
.pf-v5-l-bullseye,
65+
.pf-v5-l-bullseye > div,
66+
.pf-v5-l-flex,
67+
.pf-v5-l-flex > div,
68+
.pf-v5-l-gallery,
69+
.pf-v5-l-gallery > div,
70+
.pf-v5-l-grid,
71+
.pf-v5-l-grid > div,
72+
.pf-v5-l-level,
73+
.pf-v5-l-level > div,
74+
.pf-v5-l-split,
75+
.pf-v5-l-split > div,
76+
.pf-v5-l-stack,
77+
.pf-v5-l-stack > div {
78+
border-style: dashed !important;
79+
border-width: 2px !important;
80+
padding: 1rem !important;
81+
}
82+
83+
.pf-v5-l-bullseye,
84+
.pf-v5-l-flex,
85+
.pf-v5-l-gallery,
86+
.pf-v5-l-grid,
87+
.pf-v5-l-level,
88+
.pf-v5-l-split,
89+
.pf-v5-l-stack {
90+
margin: 1rem 0 !important;
91+
}
92+
}
93+
</style>
94+
6295
<script lang="ts" setup>
6396
import { computed } from 'vue';
6497
import { stories } from './router';

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

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@
3333
<template #label>Table of contents</template>
3434
</pf-jump-links>
3535

36-
<pf-flex-item grow>
36+
<pf-flex-item v-bind="$attrs" grow>
3737
<div class="story-content">
3838
<slot />
3939
</div>
@@ -74,15 +74,22 @@ import GithubIcon from '@vue-patternfly/icons/github-icon';
7474
export interface Props extends /* @vue-ignore */ ComponentProps<typeof PfPageSection> {
7575
title?: string;
7676
name?: string;
77+
docSection?: string;
7778
noDesignGuidelines?: boolean;
7879
noGithubLink?: boolean;
7980
}
8081
81-
const props = defineProps<Props>();
82+
defineOptions({
83+
inheritAttrs: false,
84+
});
85+
86+
const props = withDefaults(defineProps<Props>(), {
87+
docSection: 'components',
88+
});
8289
8390
let pfDocUrl = '';
8491
if (props.title && !props.noDesignGuidelines) {
85-
pfDocUrl = `https://www.patternfly.org/components/${props.title.replace(/ /g, '-').toLowerCase()}`;
92+
pfDocUrl = `https://v5-archive.patternfly.org/${props.docSection}/${props.title.replace(/ /g, '-').toLowerCase()}`;
8693
}
8794
8895
defineSlots<{

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

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
</pre>
1212

1313
<story-canvas title="Basic">
14-
<pf-brand src="https://www.patternfly.org/assets/images/pf_logo.svg" alt="Patternfly Logo" />
14+
<pf-brand src="https://v5-archive.patternfly.org/assets/images/pf_logo.svg" alt="Patternfly Logo" />
1515
</story-canvas>
1616

1717
<story-canvas title="Responsive">
@@ -22,17 +22,17 @@
2222
</template>
2323

2424
<pf-brand
25-
src="https://www.patternfly.org/assets/images/pf-c-brand__logo-base.jpg"
25+
src="https://v5-archive.patternfly.org/assets/images/pf-c-brand__logo-base.jpg"
2626
alt="Fallback patternfly default logo"
2727
width="40px"
2828
width-sm="60px"
2929
width-md="220px"
3030
>
31-
<source media="(min-width: 1200px)" srcset="https://www.patternfly.org/assets/images/pf-c-brand__logo-on-xl.svg">
32-
<source media="(min-width: 992px)" srcset="https://www.patternfly.org/assets/images/pf-c-brand__logo-on-lg.svg">
33-
<source media="(min-width: 768px)" srcset="https://www.patternfly.org/assets/images/pf-c-brand__logo-on-md.svg">
34-
<source media="(min-width: 576px)" srcset="https://www.patternfly.org/assets/images/pf-c-brand__logo-on-sm.svg">
35-
<source srcset="https://www.patternfly.org/assets/images/pf-c-brand__logo.svg">
31+
<source media="(min-width: 1200px)" srcset="https://v5-archive.patternfly.org/assets/images/pf-c-brand__logo-on-xl.svg">
32+
<source media="(min-width: 992px)" srcset="https://v5-archive.patternfly.org/assets/images/pf-c-brand__logo-on-lg.svg">
33+
<source media="(min-width: 768px)" srcset="https://v5-archive.patternfly.org/assets/images/pf-c-brand__logo-on-md.svg">
34+
<source media="(min-width: 576px)" srcset="https://v5-archive.patternfly.org/assets/images/pf-c-brand__logo-on-sm.svg">
35+
<source srcset="https://v5-archive.patternfly.org/assets/images/pf-c-brand__logo.svg">
3636
</pf-brand>
3737
</story-canvas>
3838
</doc-page>

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

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -95,7 +95,7 @@
9595
<pf-button
9696
component="a"
9797
aria-disabled
98-
href="https://pf4.patternfly.org/"
98+
href="https://v5-archive.patternfly.org/"
9999
target="_blank"
100100
variant="tertiary"
101101
>
@@ -107,15 +107,15 @@
107107
<story-canvas title="Links as buttons">
108108
<pf-button
109109
component="a"
110-
href="https://pf4.patternfly.org/"
110+
href="https://v5-archive.patternfly.org/"
111111
target="_blank"
112112
variant="primary"
113113
>
114114
Link to core docs
115115
</pf-button>
116116
<pf-button
117117
component="a"
118-
href="https://pf4.patternfly.org/"
118+
href="https://v5-archive.patternfly.org/"
119119
target="_blank"
120120
variant="secondary"
121121
>
@@ -124,15 +124,15 @@
124124
<pf-button
125125
disabled
126126
component="a"
127-
href="https://pf4.patternfly.org/"
127+
href="https://v5-archive.patternfly.org/"
128128
target="_blank"
129129
variant="tertiary"
130130
>
131131
Tertiary link to core docs
132132
</pf-button>
133133
<pf-button
134134
component="a"
135-
href="https://pf4.patternfly.org/contribution/#modifiers"
135+
href="https://v5-archive.patternfly.org/contribution/#modifiers"
136136
variant="link"
137137
>
138138
Jump to modifiers in contribution guidelines

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@
3232
<pf-card>
3333
<pf-card-header>
3434
<pf-card-header-main>
35-
<pf-brand src="https://www.patternfly.org/assets/images/pf_logo.svg" alt="PatternFly logo" style="height: 50px" />
35+
<pf-brand src="https://v5-archive.patternfly.org/assets/images/pf_logo.svg" alt="PatternFly logo" style="height: 50px" />
3636
</pf-card-header-main>
3737
<pf-card-actions no-offset>
3838
<pf-dropdown position="right">

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<doc-page title="Search input">
33
<template #description>
44
<pre v-md>
5-
A **search input** is a type of input field that can be user to search, find, or filter. See [filter guidelines](https://www.patternfly.org/guidelines/filters) for more information on using search input as a filter.
5+
A **search input** is a type of input field that can be user to search, find, or filter. See [filter guidelines](https://v5-archive.patternfly.org/guidelines/filters) for more information on using search input as a filter.
66
</pre>
77
</template>
88

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<doc-page title="Title">
33
<template #description>
44
<pre v-md>
5-
A **title** component applies top and bottom margins, font-weight, font-size, and line-height to titles. The most common usage for a title is to define headings within a page. For more information about the relationship between title component sizes and HTML heading levels, see the [Typography guidelines](https://www.patternfly.org/design-foundations/typography#customizing-heading-levels).
5+
A **title** component applies top and bottom margins, font-weight, font-size, and line-height to titles. The most common usage for a title is to define headings within a page. For more information about the relationship between title component sizes and HTML heading levels, see the [Typography guidelines](https://v5-archive.patternfly.org/design-foundations/typography#customizing-heading-levels).
66
</pre>
77
</template>
88

‎apps/docs/src/stories/Layouts/Bullseye.story.vue‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<template>
2+
<doc-page class="page__layouts" title="Bullseye" doc-section="layouts">
3+
<template #description>
4+
<pre v-md>
5+
The **bullseye** layout centers content, both vertically and horizontally within a container.
6+
</pre>
7+
</template>
8+
9+
<template #apidocs>
10+
<component-info src="packages/core/src/layouts/Bullseye.vue" />
11+
</template>
12+
13+
<story-canvas title="Bullseye">
14+
<pf-bullseye>
15+
<div>Bullseye ◎ layout</div>
16+
</pf-bullseye>
17+
</story-canvas>
18+
</doc-page>
19+
</template>

‎apps/docs/src/stories/Layouts/Flex.story.vue‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
<template>
2+
<doc-page class="page__layouts" title="Flex" doc-section="layouts">
3+
<template #description>
4+
<pre v-md>
5+
The **flex** layout supports a completely custom layout by utilizing the PatternFly spacer and breakpoint systems. Flex layouts are infinitely nestable and allow you to adjust spacing, direction, alignment, justification, wrapping, and width to fit your needs.
6+
</pre>
7+
</template>
8+
9+
<template #apidocs>
10+
<component-info src="packages/core/src/layouts/Flex/Flex.vue" />
11+
<component-info src="packages/core/src/layouts/Flex/FlexItem.vue" />
12+
</template>
13+
14+
<story-canvas title="Flex">
15+
<template #intro>
16+
<input v-model="grow" type="checkbox"> grow flex 2
17+
</template>
18+
19+
<pf-flex justify-content="space-between">
20+
<pf-flex-item align-self-sm="flex-start">Flex 1</pf-flex-item>
21+
<pf-flex-item align-self-sm="flex-start" :grow-md="grow">Flex 2</pf-flex-item>
22+
</pf-flex>
23+
24+
<pf-flex>
25+
<pf-flex flex="1">
26+
<pf-flex-item>Flex item</pf-flex-item>
27+
</pf-flex>
28+
<pf-flex flex="1">
29+
<pf-flex-item>Flex item</pf-flex-item>
30+
<pf-flex-item>Flex item</pf-flex-item>
31+
</pf-flex>
32+
<pf-flex flex="1">
33+
<pf-flex-item>Flex item</pf-flex-item>
34+
<pf-flex-item>Flex item</pf-flex-item>
35+
<pf-flex-item>Flex item</pf-flex-item>
36+
</pf-flex>
37+
</pf-flex>
38+
</story-canvas>
39+
</doc-page>
40+
</template>
41+
42+
<script lang="ts" setup>
43+
import { ref } from "vue";
44+
const grow = ref(false);
45+
</script>

‎apps/docs/src/stories/Layouts/Gallery.story.vue‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<template>
2+
<doc-page class="page__layouts" title="Gallery" doc-section="layouts">
3+
<template #description>
4+
<pre v-md>
5+
The **gallery** layout is used to arrange content in a responsive grid. Content will wrap responsively to create uniform rows and columns.
6+
</pre>
7+
</template>
8+
9+
<template #apidocs>
10+
<component-info src="packages/core/src/layouts/Gallery/Gallery.vue" />
11+
<component-info src="packages/core/src/layouts/Gallery/GalleryItem.vue" />
12+
</template>
13+
14+
<story-canvas title="Gallery">
15+
<pf-gallery gutter>
16+
<pf-gallery-item>Gallery Item</pf-gallery-item>
17+
<pf-gallery-item>Gallery Item</pf-gallery-item>
18+
<pf-gallery-item>Gallery Item</pf-gallery-item>
19+
<pf-gallery-item>Gallery Item</pf-gallery-item>
20+
<pf-gallery-item>Gallery Item</pf-gallery-item>
21+
<pf-gallery-item>Gallery Item</pf-gallery-item>
22+
</pf-gallery>
23+
</story-canvas>
24+
</doc-page>
25+
</template>

0 commit comments

Comments
 (0)