Skip to content

Commit df69886

Browse files
AbbanAbban
authored
Merge pull request #636 from wmde/pattern-library
Create a pattern library
2 parents ee62a31 + a1da8d0 commit df69886

File tree

134 files changed

+3363
-90
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

134 files changed

+3363
-90
lines changed

‎package-lock.json

Lines changed: 84 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,7 @@
5151
"eslint-plugin-vue": "^10.2.0",
5252
"eslint-plugin-vuejs-accessibility": "^2.4.1",
5353
"fork-ts-checker-webpack-plugin": "^9.1.0",
54+
"html-loader": "^5.1.0",
5455
"html-webpack-plugin": "^5.6.3",
5556
"jest": "^29.7.0",
5657
"jest-each": "^29.7.0",
@@ -59,6 +60,7 @@
5960
"jest-mock-axios": "^4.8.0",
6061
"jest-serializer-vue": "^3.1.0",
6162
"jest-transform-stub": "^2.0.0",
63+
"markdown-loader": "^8.0.0",
6264
"mini-css-extract-plugin": "^2.9.2",
6365
"pa11y": "^9.0.0",
6466
"regenerator-runtime": "^0.14.1",

‎src/components/shared/icons/ChevronLeftIcon.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
<template>
2-
<svg width="9" height="16" viewBox="0 0 9 16" fill="none" xmlns="http://www.w3.org/2000/svg">
2+
<svg width="9" height="16" viewBox="0 0 9 16" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
33
<path d="M0.242482 7.41446C-0.0808273 7.73785 -0.0808275 8.26215 0.242482 8.58554L7.41279
44
15.7575C7.74401 16.0888 8.28382 16.0794 8.60343 15.7369L8.77734 15.5506C9.08027 15.2259 9.07325
55
14.7201 8.76143 14.4039L2.63553 8.19386C2.5295 8.08638 2.5295 7.91362 2.63553 7.80614L8.76143
66
1.59605C9.07325 1.27995 9.08027 0.774089 8.77734 0.449448L8.60343 0.263065C8.28382 -0.0794487
7-
7.74401 -0.0887552 7.41279 0.242538L0.242482 7.41446Z" fill="#202122"/>
7+
7.74401 -0.0887552 7.41279 0.242538L0.242482 7.41446Z" style="fill: var(--chevron-fill, #202122);"/>
88
</svg>
99
</template>

‎src/components/shared/icons/ChevronRightIcon.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
<template>
2-
<svg width="9" height="16" viewBox="0 0 9 16" fill="none" xmlns="http://www.w3.org/2000/svg">
2+
<svg width="9" height="16" viewBox="0 0 9 16" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
33
<path d="M8.75752 8.58554C9.08083 8.26215 9.08083 7.73785 8.75752 7.41446L1.58721 0.242538C1.25599
44
-0.088754 0.71618 -0.079448 0.396574 0.263065L0.222655 0.449448C-0.080274 0.77409 -0.0732549 1.27995
55
0.238566 1.59605L6.36447 7.80614C6.4705 7.91362 6.4705 8.08638 6.36447 8.19386L0.238567 14.4039C-0.0732528
66
14.7201 -0.0802727 15.2259 0.222656 15.5506L0.396575 15.7369C0.716182 16.0794 1.25599 16.0888 1.58721
7-
15.7575L8.75752 8.58554Z" fill="#202122"/>
7+
15.7575L8.75752 8.58554Z" style="fill: var(--chevron-fill, #202122);"/>
88
</svg>
99
</template>

‎src/pattern_library/Design.afdesign

28.3 KB
Binary file not shown.

‎src/pattern_library/components/App.vue

Lines changed: 127 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,127 @@
1+
<template>
2+
<div class="footer-bottom">
3+
<header class="site-head">
4+
<div class="site-head__brand">
5+
<a href="/">
6+
<span class="visually-hidden">Wikimedia Deutschland e V.</span>
7+
<Logo/>
8+
</a>
9+
</div>
10+
<div class="site-head__mobile-nav-toggle">
11+
<button class="mobile-nav-toggle" :class="{ 'mobile-nav-toggle--active': menuActive }" @click="menuActive = !menuActive" aria-label="Hide Navigation Menu" :aria-expanded="menuActive">
12+
<span class="mobile-nav-toggle__open">
13+
<Burger/>
14+
</span>
15+
<span class="mobile-nav-toggle__close">
16+
<Close/>
17+
</span>
18+
</button>
19+
</div>
20+
<div class="site-head__menu">
21+
<nav class="nav" :class="{ 'nav--active': menuActive }" aria-label="Main">
22+
<ul class="nav__list">
23+
<li><a href="#" aria-current="page">Donate</a></li>
24+
<li><a href="#">Become a Member</a></li>
25+
<li><a href="#">Allocation of Funds</a></li>
26+
<li><a href="#">FAQ</a></li>
27+
</ul>
28+
</nav>
29+
</div>
30+
<div class="site-head__locale locale" :class="{ 'locale--active': localeActive }">
31+
<button class="locale__button" @click="localeActive = !localeActive">
32+
<LocaleIcon/><span>en</span><ChevronDown/>
33+
</button>
34+
<form action="/" class="locale__form">
35+
<label><input type="radio" name="locale" value="de"> Deutsch</label>
36+
<label><input type="radio" name="locale" value="en" checked> English</label>
37+
<button class="button" type="submit" data-button-size="small">Set Language</button>
38+
</form>
39+
</div>
40+
</header>
41+
42+
<div class="content-wrapper flow footer-bottom__stretch">
43+
44+
<div class="sidebar" data-direction="rtl">
45+
46+
<main class="flow">
47+
<PageDetail v-if="page" :page="page"/>
48+
<PatternDetail v-else-if="pattern" :pattern="pattern" :assets-path="assetsPath"/>
49+
<template v-else>
50+
<component v-for="pattern in content.patterns" :key="pattern.name" :is="pattern.examples" :assets-path="assetsPath"/>
51+
</template>
52+
</main>
53+
54+
<aside>
55+
<SidebarLinks :content="content"/>
56+
</aside>
57+
</div>
58+
59+
</div>
60+
61+
<footer class="site-foot">
62+
<div class="content-wrapper">
63+
<div class="sidebar" data-direction="rtl">
64+
<div class="site-foot__content">
65+
<figure class="site-foot__brand">
66+
<a href="https://www.wikimedia.de/">
67+
<img :src="assetsPath + '/images/logo-vertical-wikimedia.svg'" alt="Wikimedia Deutschland">
68+
</a>
69+
</figure>
70+
<div class="site-foot__copy flow">
71+
<p>Wikimedia Deutschland e. V. is an independent non-profit association that collects donations for Wikipedia and other Wikimedia projects in Germany.</p>
72+
<p>As the organisation behind Wikipedia, we support the volunteers, secure and develop the technical infrastructure, and advocate for free access to knowledge and education worldwide.</p>
73+
</div>
74+
</div>
75+
<nav class="footer-nav">
76+
<ul class="footer-nav__list">
77+
<li><a href="#" aria-current="page">Contact</a></li>
78+
<li><a href="#">Legal Notice</a></li>
79+
<li><a href="#">Privacy</a></li>
80+
<li><a href="#">Hall of Fame</a></li>
81+
<li><a href="#">Donation Comments</a></li>
82+
</ul>
83+
</nav>
84+
</div>
85+
</div>
86+
</footer>
87+
</div>
88+
</template>
89+
90+
<script setup lang="ts">
91+
92+
import { computed, ref, watch } from 'vue';
93+
import ChevronDown from '@src/components/shared/icons/ChevronDown.vue';
94+
import Logo from '@src/components/layout/Logo.vue';
95+
import Burger from '@src/pattern_library/components/icons/Burger.vue';
96+
import Close from '@src/pattern_library/components/icons/Close.vue';
97+
import LocaleIcon from '@src/components/shared/icons/LocaleIcon.vue';
98+
import SidebarLinks from '@src/pattern_library/components/SidebarLinks.vue';
99+
import { Content } from '@src/pattern_library/content';
100+
import { Pattern } from '@src/pattern_library/patterns/Pattern';
101+
import PatternDetail from '@src/pattern_library/components/PatternDetail.vue';
102+
import { Page } from '@src/pattern_library/pages/Page';
103+
import PageDetail from '@src/pattern_library/components/PageDetail.vue';
104+
105+
interface Props {
106+
patternID: string;
107+
content: Content;
108+
assetsPath: string;
109+
}
110+
const props = defineProps<Props>();
111+
112+
const menuActive = ref<boolean>( false );
113+
const localeActive = ref<boolean>( false );
114+
const page = computed<Page | undefined>( () => props.content.pages.find( x => x.url === props.patternID ) );
115+
const pattern = computed<Pattern | undefined>( () => props.content.patterns.find( x => x.url === props.patternID ) );
116+
117+
const dialog = ref<HTMLDialogElement>( null );
118+
const modalIsVisible = ref<boolean>( false );
119+
watch( modalIsVisible, ( visible: boolean ) => {
120+
if ( visible ) {
121+
dialog.value.showModal();
122+
} else {
123+
dialog.value.close();
124+
}
125+
} );
126+
127+
</script>

‎src/pattern_library/components/PageDetail.vue

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<template>
2+
<div class="content-card flow">
3+
<div class="section-heading">
4+
<h1>{{ page.name }}</h1>
5+
<hr/>
6+
</div>
7+
<div class="flow" v-html="page.content"></div>
8+
</div>
9+
10+
<div class="content-card flow" v-if="page.codeSamples">
11+
<div class="section-heading">
12+
<h1>Code Samples</h1>
13+
<hr/>
14+
</div>
15+
16+
<template v-for="( codeSample, index ) in page.codeSamples" :key="index">
17+
<h2>{{ codeSample.name }}</h2>
18+
<pre><code>{{ codeSample.code.trim() }}</code></pre>
19+
</template>
20+
21+
</div>
22+
</template>
23+
<script setup lang="ts">
24+
import { Page } from '@src/pattern_library/pages/Page';
25+
26+
interface Props {
27+
page: Page;
28+
}
29+
30+
defineProps<Props>();
31+
</script>

‎src/pattern_library/components/PatternDetail.vue

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
<template>
2+
<div class="content-card flow">
3+
<div class="section-heading">
4+
<h1>{{ pattern.name }}</h1>
5+
<hr/>
6+
</div>
7+
<div v-html="pattern.description"></div>
8+
</div>
9+
10+
<component :is="pattern.examples" :assets-path="assetsPath"/>
11+
12+
<div class="content-card flow">
13+
<div class="section-heading">
14+
<h2>HTML</h2>
15+
<hr/>
16+
</div>
17+
<pre><code>{{ pattern.html.trim() }}</code></pre>
18+
</div>
19+
20+
<div class="content-card flow">
21+
<div class="section-heading">
22+
<h2>CSS</h2>
23+
<hr/>
24+
</div>
25+
<pre><code>{{ pattern.css.trim() }}</code></pre>
26+
</div>
27+
28+
</template>
29+
30+
<script setup lang="ts">
31+
32+
import { Pattern } from '@src/pattern_library/patterns/Pattern';
33+
34+
interface Props {
35+
pattern: Pattern;
36+
assetsPath: string;
37+
}
38+
39+
defineProps<Props>();
40+
41+
</script>

0 commit comments

Comments
 (0)