danielroe.dev
[READ-ONLY] Mirror of https://github.com/danielroe/ripple-framework. Ripple is the presentation layer for building websites on the DPC Single Digital Presence platform.
Merge pull request #452 from dpc-sdp/feature/R20-678-docs-markdown
[R20-678] Markdown styling for docs site
author
Jeffrey Dowdle
committer
GitHub
date
(Mar 2, 2023, 10:53 PM UTC)
commit
2a8a083c
2a8a083c6bb485017bf3d2e06b4482df2dbc514a
parent
6e05d110
6e05d11091edefca45d69050c74cdba37bac0fe4
+417
-773
-26
docs/components/content/Alert.vue
-26
docs/components/content/Alert.vue
···
1
-
<script setup>
2
-
defineProps({
3
-
icon: {
4
-
type: String,
5
-
default: 'heroicons-outline:exclamation'
6
-
}
7
-
})
8
-
</script>
9
-
10
-
<template>
11
-
<div class="p-4 rounded-md bg-yellow-50">
12
-
<div class="flex">
13
-
<div v-if="icon" class="flex-shrink-0 mr-3">
14
-
<Icon class="w-5 h-5 text-yellow-400" aria-hidden="true" :name="icon" />
15
-
</div>
16
-
<div>
17
-
<h3 class="m-0 text-base font-medium text-yellow-800">
18
-
<ContentSlot :use="$slots.title" unwrap="p" />
19
-
</h3>
20
-
<div class="mt-2 text-sm text-yellow-700">
21
-
<ContentSlot :use="$slots.default" unwrap="p" />
22
-
</div>
23
-
</div>
24
-
</div>
25
-
</div>
26
-
</template>
-91
docs/components/content/BlockHero.vue
-91
docs/components/content/BlockHero.vue
···
1
-
<script setup lang="ts">
2
-
import type { PropType } from 'vue'
3
-
4
-
defineProps({
5
-
cta: {
6
-
type: Array as PropType<string[]>,
7
-
required: false
8
-
},
9
-
secondary: {
10
-
type: Array as PropType<string[]>,
11
-
required: false
12
-
},
13
-
snippet: {
14
-
type: String,
15
-
required: false
16
-
},
17
-
video: {
18
-
type: Array as PropType<string[]>,
19
-
required: false
20
-
}
21
-
})
22
-
</script>
23
-
24
-
<template>
25
-
<section class="py-12 sm:py-16 lg:py-20">
26
-
<div class="grid gap-8 lg:grid-cols-3">
27
-
<div class="lg:col-span-2">
28
-
<p v-if="$slots.top" class="mb-2 text-center lg:text-left">
29
-
<ContentSlot :use="$slots.top" unwrap="p" />
30
-
</p>
31
-
32
-
<h1
33
-
class="
34
-
u-text-gray-900
35
-
text-center text-4xl
36
-
font-extrabold
37
-
tracking-tight
38
-
sm:text-5xl
39
-
lg:text-left lg:text-6xl
40
-
"
41
-
>
42
-
<ContentSlot :use="$slots.title" unwrap="p" />
43
-
</h1>
44
-
45
-
<p
46
-
class="
47
-
u-text-gray-500
48
-
mt-4
49
-
max-w-3xl
50
-
text-center text-lg
51
-
lg:text-left
52
-
"
53
-
>
54
-
<ContentSlot :use="$slots.description" unwrap="p" />
55
-
</p>
56
-
57
-
<div v-if="$slots.extra" class="mt-6">
58
-
<ContentSlot :use="$slots.extra" unwrap="p" />
59
-
</div>
60
-
61
-
<div
62
-
class="
63
-
mt-4
64
-
flex flex-col
65
-
items-center
66
-
justify-center
67
-
lg:justify-start
68
-
gap-4
69
-
sm:mt-10
70
-
sm:flex-row
71
-
sm:gap-6
72
-
"
73
-
>
74
-
<template v-if="$slots.cta">
75
-
<ContentSlot :use="$slots.cta" unwrap="p" />
76
-
</template>
77
-
<a
78
-
v-if="secondary"
79
-
:href="secondary[1]"
80
-
class="u-text-gray-500 hover:u-text-gray-700 py-px font-medium"
81
-
>
82
-
{{ secondary[0] }}
83
-
</a>
84
-
</div>
85
-
</div>
86
-
<div v-if="$slots.right">
87
-
<ContentSlot :use="$slots.right" unwrap="p" />
88
-
</div>
89
-
</div>
90
-
</section>
91
-
</template>
-57
docs/components/content/ComponentExample.vue
-57
docs/components/content/ComponentExample.vue
···
1
-
<template>
2
-
<div class="my-8 docs-component-example flex content-center rounded-md w-full" :class="{ [`theme-${theme}`]: theme }">
3
-
<div class="docs-component-example__inner m-auto p-4 space-x-4" :class="innerClasses">
4
-
<slot></slot>
5
-
</div>
6
-
</div>
7
-
</template>
8
-
9
-
<script lang="ts" setup>
10
-
const props = defineProps({
11
-
fullWidth: {
12
-
type: Boolean,
13
-
default: false
14
-
},
15
-
theme: {
16
-
type: String
17
-
}
18
-
})
19
-
const innerClasses = props.fullWidth
20
-
? ['block', 'w-full']
21
-
: ['flex', 'flex-row']
22
-
</script>
23
-
24
-
<style scoped>
25
-
.docs-component-example {
26
-
background: repeating-conic-gradient(#eee 0% 25%, transparent 0% 50%) 50% / 20px 20px;
27
-
font-family: var(--rpl-type-font-family) !important;
28
-
}
29
-
30
-
.theme-dark {
31
-
--rpl-clr-primary: purple;
32
-
--rpl-clr-primary-alt: #a21e8f;
33
-
--rpl-clr-accent: #ef4a81;
34
-
--rpl-clr-accent-alt: #fdedf2;
35
-
--rpl-clr-link: #be3c67;
36
-
--rpl-clr-focus: #1c3bdd;
37
-
--rpl-clr-type-focus-contrast: var(--rpl-clr-light);
38
-
}
39
-
40
-
.theme-light {
41
-
--rpl-clr-primary: #fdda24;
42
-
--rpl-clr-primary-alt: #fef0a7;
43
-
--rpl-clr-primary-alpha: rgb(253 218 36 / .5);
44
-
--rpl-clr-accent: #ef4a81;
45
-
--rpl-clr-accent-alt: #fdedf2;
46
-
--rpl-clr-link: #86be3c;
47
-
--rpl-clr-focus: #1c3bdd;
48
-
--rpl-clr-type-focus-contrast: var(--rpl-clr-light);
49
-
--rpl-clr-gradient-vertical: linear-gradient(90deg, var(--rpl-clr-accent) 0%, var(--rpl-clr-accent) 100%);
50
-
--rpl-clr-gradient-horizontal: linear-gradient(90deg, var(--rpl-clr-accent) 0%, var(--rpl-clr-accent) 100%);
51
-
--rpl-clr-type-primary-contrast: var(--rpl-clr-dark);
52
-
--rpl-clr-type-primary-contrast-alpha: rgb(26 26 26 / 0.75);
53
-
--rpl-clr-type-accent-contrast: var(--rpl-clr-dark);
54
-
--rpl-clr-type-primary-accessible: var(--rpl-clr-type-default);
55
-
--rpl-clr-type-primary-alt-accessible: var(--rpl-clr-type-default);
56
-
}
57
-
</style>
-171
docs/components/content/ComponentExplorer.vue
-171
docs/components/content/ComponentExplorer.vue
···
1
-
<template>
2
-
<div>
3
-
<div class="flex flex-row">
4
-
<div v-if="variants.length > 1" class="flex h-full items-center mt-4 content-end">
5
-
<label class="rpl-type-label rpl-type-weight-bold mr-2">Select variant</label>
6
-
<select style="background-position: right 1rem center" class="
7
-
focus:ring-indigo-500
8
-
focus:border-indigo-500
9
-
py-1
10
-
pl-2
11
-
pr-8
12
-
border-slate-400 border
13
-
bg-transparent
14
-
text-gray-800
15
-
sm:text-sm
16
-
rounded-md
17
-
" v-model="selected">
18
-
<option v-for="(opt, idx) in variants" :key="`opt-{idx}`" :value="idx">
19
-
{{ opt.variantName }}
20
-
</option>
21
-
</select>
22
-
</div>
23
-
<div v-if="themeable" class="flex h-full items-center mt-4 content-end ml-auto">
24
-
<label class="rpl-type-label rpl-type-weight-bold mr-2">Select theme</label>
25
-
<select style="background-position: right 1rem center" class="
26
-
focus:ring-indigo-500
27
-
focus:border-indigo-500
28
-
py-1
29
-
pl-2
30
-
pr-8
31
-
border-slate-400 border
32
-
bg-transparent
33
-
text-gray-800
34
-
sm:text-sm
35
-
rounded-md
36
-
" v-model="selectedTheme">
37
-
<option value="">
38
-
Default
39
-
</option>
40
-
<option value="light">
41
-
Light
42
-
</option>
43
-
<option value="dark">
44
-
Dark
45
-
</option>
46
-
</select>
47
-
</div>
48
-
</div>
49
-
<component-example :theme="selectedTheme">
50
-
<component :is="component" v-bind="selectedVariant"></component>
51
-
</component-example>
52
-
<div v-if="showProps && selectedVariantProps?.length > 0" class="my-4">
53
-
<h4 class="rpl-type-h4">Props</h4>
54
-
<div class="rpl-table my-8">
55
-
<div class="rpl-table__scroll-container">
56
-
<table class="w-full">
57
-
<thead>
58
-
<tr>
59
-
<th scope="col">Name</th>
60
-
<th scope="col">Description</th>
61
-
<th scope="col">Required</th>
62
-
<th scope="col">Type</th>
63
-
<th scope="col">Options</th>
64
-
<th scope="col">Example</th>
65
-
</tr>
66
-
</thead>
67
-
<tbody>
68
-
<tr v-for="prop in selectedVariantProps">
69
-
<td>
70
-
{{ prop.name }}
71
-
</td>
72
-
<td>
73
-
{{ prop.description }}
74
-
</td>
75
-
<td>
76
-
{{ prop.required }}
77
-
</td>
78
-
<td>
79
-
{{ prop.type }}
80
-
</td>
81
-
<td>
82
-
{{ getOptionsFromSchema(prop) }}
83
-
</td>
84
-
<td>
85
-
<template v-if="prop && prop.name">
86
-
{{ selectedVariant[prop.name] }}
87
-
</template>
88
-
</td>
89
-
</tr>
90
-
</tbody>
91
-
</table>
92
-
</div>
93
-
</div>
94
-
</div>
95
-
<!-- TODO - refactor this into a component -->
96
-
<div v-if="showEvents && selectedVariantEvents?.length > 0" class="my-4">
97
-
<h4 class="rpl-type-h4">Events</h4>
98
-
<div class="rpl-table my-8">
99
-
<table class="w-full">
100
-
<thead>
101
-
<tr>
102
-
<th scope="col">Name</th>
103
-
<th scope="col">Description</th>
104
-
<th scope="col">Type</th>
105
-
</tr>
106
-
</thead>
107
-
<tbody>
108
-
<tr v-for="prop in selectedVariantEvents">
109
-
<td>
110
-
{{ prop.name }}
111
-
</td>
112
-
<td>
113
-
{{ prop.description }}
114
-
</td>
115
-
<td>
116
-
{{ prop.type }}
117
-
</td>
118
-
</tr>
119
-
</tbody>
120
-
</table>
121
-
</div>
122
-
</div>
123
-
</div>
124
-
</template>
125
-
126
-
<script setup lang="ts">
127
-
import { computed, ref } from 'vue'
128
-
import { useAsyncData } from '#imports'
129
-
import { NuxtComponentMetaNames } from '#nuxt-component-meta/types'
130
-
131
-
132
-
interface Props {
133
-
component: string
134
-
variants: string[]
135
-
showProps?: boolean
136
-
showEvents?: boolean,
137
-
themeable?: boolean,
138
-
}
139
-
140
-
const props = withDefaults(defineProps<Props>(), {
141
-
showProps: true,
142
-
showEvents: true,
143
-
themeable: false
144
-
})
145
-
146
-
147
-
const specificComponentName = ref<NuxtComponentMetaNames>(props.component)
148
-
const { data: specificComponentMeta } = await useAsyncData('componentMeta', async () => await useComponentMeta(specificComponentName))
149
-
150
-
const selected = ref(0)
151
-
const selectedTheme = ref('')
152
-
153
-
const selectedVariant = computed(() => {
154
-
return props.variants[selected.value]
155
-
})
156
-
const selectedVariantProps = computed(() => {
157
-
return specificComponentMeta.value?.meta?.props
158
-
})
159
-
const selectedVariantEvents = computed(() => {
160
-
return specificComponentMeta.value?.meta?.events
161
-
})
162
-
163
-
const getOptionsFromSchema = (prop => {
164
-
if (prop.schema?.schema) {
165
-
if (prop.schema?.kind === 'enum') {
166
-
return JSON.stringify(prop.schema?.schema.filter(itm => itm !== 'undefined').join(', '))
167
-
}
168
-
}
169
-
return ''
170
-
})
171
-
</script>
-15
docs/components/content/Container.vue
-15
docs/components/content/Container.vue
···
1
-
<script setup lang="ts">
2
-
defineProps({
3
-
padded: {
4
-
type: Boolean,
5
-
required: false,
6
-
default: false
7
-
}
8
-
})
9
-
</script>
10
-
11
-
<template>
12
-
<div :class="[padded ? 'px-4 sm:px-6' : '']" class="mx-auto max-w-full lg:max-w-7xl">
13
-
<slot />
14
-
</div>
15
-
</template>
+4
-34
docs/components/content/DocsCard.vue
+4
-34
docs/components/content/DocsCard.vue
···
1
1
<template>
2
-
<LazyRplCard el="div">
3
-
<template v-if="icon" #upper>
4
-
<Icon :name="icon" class="flex-shrink-0 w-12 h-12 m-4 mb-0 text-emerald-500" />
2
+
<RplPromoCard>
3
+
<template #default>
4
+
<slot />
5
5
</template>
6
-
<template #title>
7
-
<h3 :class="[
8
-
'rpl-card__cta',
9
-
'rpl-type-h3',
10
-
'rpl-u-focusable',
11
-
'rpl-u-focusable--inline'
12
-
]">
13
-
<RplTextLink :url="url">{{ title }}</RplTextLink>
14
-
</h3>
15
-
</template>
16
-
<slot> </slot>
17
-
</LazyRplCard>
6
+
</RplPromoCard>
18
7
</template>
19
-
20
-
<script setup>
21
-
defineProps({
22
-
image: {
23
-
type: [String, undefined],
24
-
default: undefined
25
-
},
26
-
icon: {
27
-
type: [String, undefined]
28
-
},
29
-
title: {
30
-
type: String
31
-
},
32
-
url: {
33
-
type: [String, undefined],
34
-
default: undefined
35
-
}
36
-
})
37
-
</script>
+19
docs/components/content/DocsCardGrid.vue
+19
docs/components/content/DocsCardGrid.vue
···
1
+
<template>
2
+
<div class="docs-card-grid">
3
+
<slot></slot>
4
+
</div>
5
+
</template>
6
+
7
+
<style scoped>
8
+
@import '@dpc-sdp/ripple-ui-core/style/breakpoints';
9
+
.docs-card-grid {
10
+
display: grid;
11
+
grid-template-columns: 1fr;
12
+
grid-gap: var(--rpl-sp-4);
13
+
14
+
@media (--rpl-bp-m) {
15
+
grid-template-columns: 1fr 1fr;
16
+
grid-gap: var(--rpl-sp-6);
17
+
}
18
+
}
19
+
</style>
-10
docs/components/content/DocsComponentUsage.vue
-10
docs/components/content/DocsComponentUsage.vue
···
1
-
<template>
2
-
<div class="grid grid-cols-2 gap-8 my-8">
3
-
<DocsComponentUsageContainer :use="true" v-if="$slots.do">
4
-
<slot name="do"></slot>
5
-
</DocsComponentUsageContainer>
6
-
<DocsComponentUsageContainer :use="false" v-if="$slots.dont">
7
-
<slot name="dont"></slot>
8
-
</DocsComponentUsageContainer>
9
-
</div>
10
-
</template>
-40
docs/components/content/DocsComponentUsageContainer.vue
-40
docs/components/content/DocsComponentUsageContainer.vue
···
1
-
<template>
2
-
<div class="border-t-4 py-4 docs-usage rounded" :class="use ? 'docs-usage--use' : 'docs-usage--dontuse'">
3
-
<h4 class="px-11 py-4 rpl-type-h4 rpl-type-weight-bold relative">
4
-
<Icon class="-ml-8 mt-1 absolute" :name="use ? 'fa6-solid:circle-check' : 'fa6-solid:circle-xmark'"></Icon>
5
-
<slot name="title">
6
-
<template v-if="use">Do</template>
7
-
<template v-if="!use">Don't</template>
8
-
</slot>
9
-
</h4>
10
-
<slot></slot>
11
-
</div>
12
-
</template>
13
-
14
-
<script setup lang="ts">
15
-
defineProps<{
16
-
use: Boolean
17
-
}>()
18
-
</script>
19
-
20
-
<style scoped>
21
-
.docs-usage--use {
22
-
border-color: var(--rpl-clr-success);
23
-
background-color: #dff3f4;
24
-
25
-
svg {
26
-
color: var(--rpl-clr-success);
27
-
}
28
-
}
29
-
30
-
.docs-usage--dontuse {
31
-
border-color: var(--rpl-clr-error);
32
-
background-color: #fdf1f4;
33
-
34
-
svg {
35
-
color: var(--rpl-clr-error);
36
-
}
37
-
}
38
-
39
-
ul {}
40
-
</style>
+4
-6
docs/components/content/DocsGrid.vue
+4
-6
docs/components/content/DocsGrid.vue
···
1
1
<template>
2
-
<div class="my-8">
3
-
<div class="rpl-grid">
4
-
<slot></slot>
5
-
</div>
2
+
<div class="rpl-grid">
3
+
<slot></slot>
6
4
</div>
7
5
</template>
8
6
9
7
<style>
10
-
.rpl-content .rpl-grid {
8
+
/* .rpl-content .rpl-grid {
11
9
list-style: none;
12
10
padding-left: 0;
13
11
margin-left: 0;
14
12
}
15
13
.rpl-content .rpl-grid > li:before {
16
14
display: none;
17
-
}
15
+
} */
18
16
</style>
+5
-3
docs/components/content/DocsPageHeader.vue
+5
-3
docs/components/content/DocsPageHeader.vue
···
8
8
}[]
9
9
}
10
10
11
-
const props = withDefaults(defineProps<Props>(), {
11
+
withDefaults(defineProps<Props>(), {
12
12
description: '',
13
13
links: () => []
14
14
})
···
16
16
17
17
<template>
18
18
<header class="docs-page-header">
19
-
<h1 class="rpl-type-h1 mb-4">
19
+
<h1 class="rpl-type-h1 rpl-u-margin-b-2">
20
20
{{ title }}
21
21
</h1>
22
22
<p class="rpl-type-p-large">{{ description }}</p>
23
-
<ul class="links rpl-u-margin-t-4">
23
+
<ul class="links rpl-u-margin-t-5">
24
24
<li v-for="(link, index) in links" :key="index">
25
25
<DocsLink
26
26
isExternal
···
35
35
</template>
36
36
37
37
<style scoped>
38
+
@import '@dpc-sdp/ripple-ui-core/style/breakpoints';
39
+
38
40
.docs-page-header {
39
41
margin-bottom: var(--rpl-sp-7);
40
42
-94
docs/components/content/EmbedFrame.vue
-94
docs/components/content/EmbedFrame.vue
···
1
-
<script setup lang="ts">
2
-
import { ref, onMounted } from '#imports'
3
-
const props = defineProps({
4
-
figma: {
5
-
type: [String, undefined],
6
-
default: undefined
7
-
},
8
-
storyId: {
9
-
type: [String, undefined],
10
-
default: undefined
11
-
},
12
-
storyViewMode: {
13
-
type: String,
14
-
default: 'docs'
15
-
},
16
-
storyBase: {
17
-
type: String,
18
-
default: 'https://uat--624ac117357335003a84dac3.chromatic.com/iframe.html'
19
-
},
20
-
figmaBase: {
21
-
type: String,
22
-
default: 'https://www.figma.com/embed?embed_host=share&url='
23
-
},
24
-
height: {
25
-
type: Number,
26
-
default: 400
27
-
},
28
-
fullscreen: {
29
-
type: Boolean,
30
-
default: false
31
-
},
32
-
hideTabs: {
33
-
type: Boolean,
34
-
default: false
35
-
}
36
-
})
37
-
38
-
const providers = {}
39
-
40
-
if (props.storyId) {
41
-
providers['Storybook'] = () =>
42
-
`${props.storyBase}?id=${props.storyId}&viewMode=${props.storyViewMode}`
43
-
}
44
-
if (props.figma) {
45
-
providers['Figma'] = () => `${props.figmaBase}${props.figma}`
46
-
}
47
-
48
-
const providersTabs = Object.keys(providers).map((p) => ({ label: p }))
49
-
const activeTabIndex = ref(-1)
50
-
const tabs = ref()
51
-
const url = ref('')
52
-
const provider = ref('')
53
-
54
-
const changeProvider = (value) => {
55
-
provider.value = value
56
-
url.value = providers[provider.value]()
57
-
}
58
-
59
-
const updateTab = (i: number) => {
60
-
activeTabIndex.value = i
61
-
changeProvider(providersTabs[i].label)
62
-
}
63
-
64
-
onMounted(() => {
65
-
provider.value = Object.keys(providers)[0]
66
-
url.value = providers[provider.value]()
67
-
// Set active tab
68
-
activeTabIndex.value = Object.keys(providers).indexOf(provider.value)
69
-
})
70
-
</script>
71
-
72
-
<template>
73
-
<div :class="`sandbox my-8 min-h-${height} w-full`">
74
-
<div v-if="fullscreen" class="tabs-header relative text-white bg-gray-700 min-h-[35px]">
75
-
<div class="absolute top-1/2 right-0 -translate-y-1/2 transform px-4">
76
-
<NuxtLink class="
77
-
flex
78
-
text-secondary
79
-
hover:text-secondary-hover
80
-
transition-colors transition-base
81
-
items-center
82
-
text-gray-200
83
-
dark:text-gray-400
84
-
" :to="url" target="_blank">
85
-
<Icon name="heroicons-outline:arrows-expand" class="h-6 w-6" />
86
-
</NuxtLink>
87
-
</div>
88
-
</div>
89
-
90
-
<iframe v-if="url" :src="url" title="Figma link"
91
-
sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"
92
-
:class="`min-h-${height} w-full overflow-hidden`" :height="height" />
93
-
</div>
94
-
</template>
-39
docs/components/content/Icon.vue
-39
docs/components/content/Icon.vue
···
1
-
<script setup lang="ts">
2
-
import type { IconifyIcon } from '@iconify/vue'
3
-
import { Icon as Iconify } from '@iconify/vue/dist/offline'
4
-
import { loadIcon } from '@iconify/vue'
5
-
6
-
const nuxtApp = useNuxtApp()
7
-
const props = defineProps({
8
-
name: {
9
-
type: String,
10
-
required: true
11
-
}
12
-
})
13
-
const state = useState('icons', () => ({}))
14
-
const isFetching = ref(false)
15
-
const icon = computed<IconifyIcon | null>(() => state.value?.[props.name])
16
-
const component = computed(() => nuxtApp.vueApp.component(props.name))
17
-
18
-
async function loadIconComponent () {
19
-
if (component.value) {
20
-
return
21
-
}
22
-
if (!state.value?.[props.name]) {
23
-
isFetching.value = true
24
-
state.value[props.name] = await loadIcon(props.name).catch(() => {})
25
-
isFetching.value = false
26
-
}
27
-
}
28
-
29
-
watch(() => props.name, loadIconComponent)
30
-
31
-
!component.value && await loadIconComponent()
32
-
</script>
33
-
34
-
<template>
35
-
<span v-if="isFetching" class="inline-block w-5 h-5" />
36
-
<Iconify v-else-if="icon" :icon="icon" class="inline-block w-5 h-5" />
37
-
<Component :is="component" v-else-if="component" class="inline-block w-5 h-5" />
38
-
<span v-else>{{ name }}</span>
39
-
</template>
-24
docs/components/content/List.vue
-24
docs/components/content/List.vue
···
1
-
<script setup lang="ts">
2
-
// Utils from Nuxt Content
3
-
const { flatUnwrap } = useUnwrap()
4
-
5
-
defineProps({
6
-
icon: {
7
-
type: String,
8
-
default: 'ph:check-circle-duotone'
9
-
}
10
-
})
11
-
</script>
12
-
13
-
<template>
14
-
<ul class="p-0">
15
-
<li
16
-
v-for="(item, index) of flatUnwrap($slots.default(), ['ul'])"
17
-
:key="index"
18
-
class="flex pl-0 space-x-2"
19
-
>
20
-
<Icon :name="icon" class="flex-shrink-0 w-6 h-6 mt-1 text-emerald-500" />
21
-
<span><ContentSlot :use="() => item" unwrap="li" /></span>
22
-
</li>
23
-
</ul>
24
-
</template>
-4
docs/components/content/MarkdownBlock.vue
-4
docs/components/content/MarkdownBlock.vue
-1
docs/components/content/Prose/ProseA.vue
-1
docs/components/content/Prose/ProseA.vue
+20
-1
docs/components/content/Prose/ProseCode.vue
+20
-1
docs/components/content/Prose/ProseCode.vue
···
23
23
</script>
24
24
25
25
<template>
26
-
<div class="p-8 my-8 bg-slate-800 dark:bg-slate-50 rounded text-base">
26
+
<div class="docs-code-block">
27
27
<slot />
28
28
</div>
29
29
</template>
30
+
31
+
<style scoped>
32
+
@import '@dpc-sdp/ripple-ui-core/style/breakpoints';
33
+
34
+
.docs-code-block {
35
+
padding: var(--rpl-sp-5);
36
+
background: var(--rpl-clr-neutral-100);
37
+
border: var(--rpl-border-1) solid var(--rpl-clr-neutral-300);
38
+
white-space: pre;
39
+
overflow-x: auto;
40
+
display: block;
41
+
42
+
margin: var(--rpl-sp-3) 0;
43
+
44
+
@media (--rpl-bp-l) {
45
+
margin: var(--rpl-sp-4) 0;
46
+
}
47
+
}
48
+
</style>
30
49
31
50
<style>
32
51
pre code .line {
+10
docs/components/content/Prose/ProseCodeInline.vue
+10
docs/components/content/Prose/ProseCodeInline.vue
-9
docs/components/content/Prose/ProseH1.vue
-9
docs/components/content/Prose/ProseH1.vue
-22
docs/components/content/Prose/ProseH2.vue
-22
docs/components/content/Prose/ProseH2.vue
···
1
-
<template>
2
-
<h2 :id="id" class="rpl-type-h2 mb-4">
3
-
<a :href="`#${id}`">
4
-
<Icon class="w-5 h-5 text-slate-400 absolute -left-6" aria-hidden="true" name="akar-icons:link-chain" />
5
-
<slot />
6
-
</a>
7
-
</h2>
8
-
</template>
9
-
10
-
<script setup lang="ts">
11
-
defineProps<{ id: string }>()
12
-
</script>
13
-
14
-
<style scoped>
15
-
a>svg {
16
-
display: none;
17
-
}
18
-
19
-
a:hover svg {
20
-
display: inline;
21
-
}
22
-
</style>
-11
docs/components/content/Prose/ProseH3.vue
-11
docs/components/content/Prose/ProseH3.vue
+12
docs/components/content/Prose/ProseHr.vue
+12
docs/components/content/Prose/ProseHr.vue
-5
docs/components/content/Prose/ProseOl.vue
-5
docs/components/content/Prose/ProseOl.vue
-5
docs/components/content/Prose/ProseP.vue
-5
docs/components/content/Prose/ProseP.vue
+12
-4
docs/components/content/Prose/ProseTable.vue
+12
-4
docs/components/content/Prose/ProseTable.vue
···
1
1
<template>
2
-
<div class="rpl-table my-4">
3
-
<table class="w-full">
4
-
<slot />
5
-
</table>
2
+
<div class="rpl-table">
3
+
<div class="rpl-table__scroll-container">
4
+
<table class="docs-table">
5
+
<slot />
6
+
</table>
7
+
</div>
6
8
</div>
7
9
</template>
10
+
11
+
<style scoped>
12
+
.docs-table {
13
+
min-width: 100%;
14
+
}
15
+
</style>
-5
docs/components/content/Prose/ProseUl.vue
-5
docs/components/content/Prose/ProseUl.vue
+329
-62
docs/content/design-system/Kitchen sink.md
+329
-62
docs/content/design-system/Kitchen sink.md
···
2
2
title: Kitchen sink
3
3
description: Here's everything
4
4
layout: default
5
+
links:
6
+
- text: Vic gov
7
+
url: https://www.vic.gov.au/
8
+
- text: Single Digital Presence
9
+
url: https://www.vic.gov.au/single-digital-presence
10
+
---
11
+
12
+
> For a more detailed markdown editing guide, see here https://www.markdownguide.org/basic-syntax/
13
+
14
+
## Front matter
15
+
16
+
Front matter sits at the very top of a markdown file and contains metadata about a page. In our case, it contains things like the page title and description.
17
+
18
+
Here is the frontmatter for the page you are currently reading.
19
+
20
+
```md
21
+
---
22
+
title: Kitchen sink
23
+
description: Here's everything
24
+
layout: default
25
+
links:
26
+
- text: Vic gov
27
+
url: https://www.vic.gov.au/
28
+
- text: Single Digital Presence
29
+
url: https://www.vic.gov.au/single-digital-presence
30
+
---
31
+
```
32
+
5
33
---
6
34
7
35
## Headings
8
36
37
+
Headings are added using hash marks before text. The number of hash marks specifies the heading level (e.g. '##' = H2). Please don't use H1s in markdown, these are reserved for the page title, which is set in the front matter.
38
+
39
+
### Example
40
+
41
+
```md
9
42
## Heading level 2
43
+
10
44
### Heading level 3
45
+
11
46
#### Heading level 4
47
+
12
48
##### Heading level 5
49
+
13
50
###### Heading level 6
51
+
```
14
52
53
+
## Heading level 2
15
54
16
-
## Horizontal Rules
55
+
### Heading level 3
17
56
18
-
### `___`
19
-
___
57
+
#### Heading level 4
20
58
21
-
### `---`
59
+
##### Heading level 5
60
+
61
+
###### Heading level 6
62
+
22
63
---
23
64
24
-
### `***`
25
-
***
65
+
## Paragraph text
66
+
67
+
Paragraphs are simply text seperated by an empty line.
68
+
69
+
```md
70
+
This is a paragraph
71
+
72
+
This is another paragraph
73
+
```
74
+
75
+
This is a paragraph
76
+
77
+
This is another paragraph
78
+
79
+
---
26
80
27
81
## Emphasis
28
82
29
-
**This is bold text**
83
+
### Italics
84
+
85
+
```md
86
+
Here is *italic text*
87
+
88
+
Here is also _italic text_
89
+
```
90
+
91
+
Here is *italic text*
30
92
31
-
__This is bold text__
93
+
Here is also _italic text_
32
94
33
-
*This is italic text*
95
+
### Bold
34
96
35
-
_This is italic text_
97
+
```md
98
+
Here is **bold text**
36
99
37
-
~~Strikethrough~~
100
+
Here is also __bold text__
101
+
```
38
102
103
+
Here is **bold text**
104
+
105
+
Here is also __bold text__
106
+
107
+
### Strikethrough
108
+
109
+
```md
110
+
Here is ~~strikethrough text~~
111
+
```
112
+
113
+
Here is ~~strikethrough text~~
114
+
115
+
---
116
+
117
+
## Horizontal Rules
118
+
119
+
You can add a horizontal rule by using at least three of either `_`, `-` or `*`.
120
+
121
+
```md
122
+
These are all equivalent:
123
+
---
124
+
___
125
+
***
126
+
127
+
So are these:
128
+
------
129
+
______
130
+
******
131
+
132
+
But these won't work:
133
+
--
134
+
__
135
+
**
136
+
```
137
+
138
+
---
39
139
40
140
## Blockquotes
41
141
142
+
Blockquotes are added with a `>` before the text.
42
143
144
+
```md
43
145
> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
146
+
```
44
147
148
+
> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
149
+
150
+
---
45
151
46
152
## Lists
47
153
48
-
Unordered
154
+
### Unordered
49
155
50
-
+ Create a list by starting a line with `+`, `-`, or `*`
51
-
+ Sub-lists are made by indenting 2 spaces:
52
-
- Marker character change forces new list start:
53
-
* Ac tristique libero volutpat at
54
-
+ Facilisis in pretium nisl aliquet
55
-
- Nulla volutpat aliquam velit
56
-
+ Very easy!
156
+
Unordered lists are created by starting a line with `+`, `-`, or `*`. Nested lists can be achieved through indentation, with **2 spaces** for each additional level.
57
157
58
-
Ordered
158
+
```md
159
+
* Fruit
160
+
* Berries
161
+
- Strawberry
162
+
- Blueberry
163
+
* Classics
164
+
- Apple
165
+
- Banana
166
+
* Vegetables
167
+
+ Broccoli
168
+
```
169
+
170
+
* Fruit
171
+
* Berries
172
+
- Strawberry
173
+
- Blueberry
174
+
* Classics
175
+
- Apple
176
+
- Banana
177
+
* Vegetables
178
+
+ Broccoli
179
+
180
+
### Ordered
181
+
182
+
Ordered lists are created by starting a line with a number and period (e.g. `1.`). Nested lists can be achieved through indentation, with **4 spaces** (different to the unordered list) for each additional level.
183
+
184
+
You can use any numbers, but it's more convenient to just use `1.` for each item, the numbering will work automatically.
185
+
186
+
```md
187
+
This works:
59
188
60
189
1. Lorem ipsum dolor sit amet
190
+
1. Lorem at massa
191
+
2. Adipiscing
61
192
2. Consectetur adipiscing elit
62
193
3. Integer molestie lorem at massa
63
194
195
+
But just do this, it's the same thing:
64
196
65
-
1. You can use sequential numbers...
66
-
1. ...or keep all the numbers as `1.`
197
+
1. Lorem ipsum dolor sit amet
198
+
1. Lorem at massa
199
+
1. Adipiscing
200
+
1. Consectetur adipiscing elit
201
+
1. Integer molestie lorem at massa
202
+
```
67
203
68
-
Start numbering with offset:
204
+
1. Lorem ipsum dolor sit amet
205
+
1. Lorem at massa
206
+
2. Adipiscing
207
+
2. Consectetur adipiscing elit
208
+
3. Integer molestie lorem at massa
209
+
210
+
#### Starting point
211
+
212
+
You can start the list at any number like this:
213
+
214
+
```md
215
+
64. foo
216
+
1. bar
217
+
1. blah
218
+
```
69
219
70
-
57. foo
220
+
64. foo
71
221
1. bar
222
+
1. blah
72
223
224
+
---
225
+
226
+
## Links
227
+
228
+
Hyperlinks can be added with the following syntax, the link text goes in the square brackets, followed by the url in round brackets.
229
+
230
+
```md
231
+
Visit the [Victorian government website](https://www.vic.gov.au/)
232
+
```
233
+
234
+
Visit the [Victorian government website](https://www.vic.gov.au/)
235
+
236
+
Alternatively, if you don't need different link text you can just write the url directly
237
+
238
+
```md
239
+
Here is the link to vic gov https://www.vic.gov.au/.
240
+
```
241
+
242
+
Here is the link to vic gov https://www.vic.gov.au/.
243
+
244
+
---
73
245
74
246
## Code
75
247
76
-
Inline `code`
248
+
Here's some `code inline` in context.
249
+
250
+
Here's some `const codeInline: string = 'highlighted code inline'`{lang="ts"} in context.
77
251
78
252
Indented code
79
253
···
99
273
console.log(foo(5));
100
274
```
101
275
276
+
---
277
+
102
278
## Tables
103
279
104
-
| Option | Description |
105
-
| ------ | ----------- |
106
-
| data | path to data files to supply the data that will be passed into templates. |
107
-
| engine <br> asd | engine to be used for processing templates. Handlebars is the default. |
108
-
| ext | extension to be used for dest files. |
280
+
Tables can be added using a special format. More info here:
109
281
110
-
Right aligned columns
111
-
112
-
| Option | Description |
113
-
| ------:| -----------:|
114
-
| data | path to data files to supply the data that will be passed into templates. |
115
-
| engine | engine to be used for processing templates. Handlebars is the default. |
116
-
| ext | extension to be used for dest files. |
117
-
118
-
| Option | Description |
119
-
| ------:| -----------:|
120
-
|  | path to data files to supply the data that will be passed into templates. |
121
-
| engine | engine to be used for processing templates. Handlebars is the default. |
122
-
| ext | extension to be used for dest files. |
282
+
- [Github markdown tables guide](https://docs.github.com/en/get-started/writing-on-github/working-with-advanced-formatting/organizing-information-with-tables)
123
283
284
+
An example of a simple table
124
285
125
-
## Links
286
+
```md
287
+
| Name | Description |
288
+
| ------ | ---------------------------- |
289
+
| Banana | Yellow, elongated, edible. |
290
+
| Apple | 84% water, 15% carbohydrates |
291
+
```
126
292
127
-
[link text](http://dev.nodeca.com)
293
+
| Name | Description |
294
+
| ------ | ---------------------------- |
295
+
| Banana | Yellow, elongated, edible. |
296
+
| Apple | 84% water, 15% carbohydrates |
128
297
129
-
[link with title](http://nodeca.github.io/pica/demo/ "title text!")
298
+
---
130
299
131
-
Autoconverted link https://github.com/nodeca/pica (enable linkify to see)
300
+
## Images
132
301
302
+
Images can be added like this:
133
303
134
-
## Images
304
+
```md
305
+
306
+
```
135
307
136
-
308
+
137
309
138
310
By Lee Carson on Flickr - Nils Olav on Flickr, CC BY-SA 2.0, https://commons.wikimedia.org/w/index.php?curid=5080064
139
311
140
-
### Footnotes
312
+
---
141
313
142
-
Here's a simple footnote,[^1] and here's a longer one.[^bignote]
143
-
[^1]: This is the first footnote.
144
-
[^bignote]: Here's one with multiple paragraphs and code.
145
-
Indent paragraphs to include them in the footnote.
146
-
`{ my code }`
147
-
Add as many paragraphs as you like.
314
+
## Custom components
148
315
149
-
### Custom containers
316
+
### DocsExample
150
317
318
+
The `DocsExample` will display an component example from storybook, you will need to give it the id of the story you want to display.
319
+
320
+
```md
151
321
::DocsExample
152
322
---
153
323
id: core-navigation-button--default-filled
154
324
---
155
325
::
326
+
```
156
327
157
328
::DocsExample
158
329
---
159
-
id: core-navigation-breadcrumbs--default-story
160
-
hideNewTab: true
330
+
id: core-navigation-button--default-filled
161
331
---
162
332
::
163
333
334
+
There are additional options you can use for this component:
335
+
336
+
```md
164
337
::DocsExample
165
338
---
166
-
id: core-navigation-in-page-navigation--in-page-navigation
339
+
id: core-navigation-button--default-filled
340
+
withPadding: false
341
+
hideNewTab: false
167
342
hideCode: true
168
343
---
169
344
::
345
+
```
170
346
171
347
::DocsExample
172
348
---
173
-
id: core-navigation-footer--default-story
174
-
hideNewTab: true
349
+
id: core-navigation-button--default-filled
350
+
withPadding: true
351
+
hideNewTab: false
175
352
hideCode: true
176
353
---
177
354
::
355
+
356
+
### DocsThemeChooser
357
+
358
+
You can wrap `DocsExample` components with a `DocsThemeChooser` component. This will allow the user to choose which theme the examples inside the theme chooser will display with.
359
+
360
+
```md
361
+
::DocsThemeChooser
362
+
::DocsExample
363
+
---
364
+
id: core-navigation-button--default-filled
365
+
---
366
+
::
367
+
::DocsExample
368
+
---
369
+
id: core-navigation-button--default-outlined
370
+
---
371
+
::
372
+
::
373
+
```
374
+
375
+
::DocsThemeChooser
376
+
::DocsExample
377
+
---
378
+
id: core-navigation-button--default-filled
379
+
---
380
+
::
381
+
::DocsExample
382
+
---
383
+
id: core-navigation-button--default-outlined
384
+
---
385
+
::
386
+
::
387
+
388
+
### DocsCard && DocsCardGrid
389
+
390
+
Cards can also be added. Ensure that you wrap them with DocsCardGrid so that they are layout out correctly. DocsCard use the 'promo' type card under the hood.
391
+
392
+
```md
393
+
::DocsCardGrid
394
+
::DocsCard
395
+
---
396
+
title: Button
397
+
url: /design-system/components/button
398
+
---
399
+
Here's the summary text
400
+
::
401
+
402
+
::DocsCard
403
+
---
404
+
title: Vic gov
405
+
url: https://www.vic.gov.au/
406
+
---
407
+
Here's the summary text
408
+
::
409
+
410
+
::DocsCard
411
+
---
412
+
title: Code standards
413
+
url: /framework/code-standards
414
+
---
415
+
Here's the summary text
416
+
::
417
+
::
418
+
```
419
+
420
+
::DocsCardGrid
421
+
::DocsCard
422
+
---
423
+
title: Button
424
+
url: /design-system/components/button
425
+
---
426
+
Here's the summary text
427
+
::
428
+
429
+
::DocsCard
430
+
---
431
+
title: Vic gov
432
+
url: https://www.vic.gov.au/
433
+
---
434
+
Here's the summary text
435
+
::
436
+
437
+
::DocsCard
438
+
---
439
+
title: Code standards
440
+
url: /framework/code-standards
441
+
---
442
+
Here's the summary text
443
+
::
444
+
::