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.
refactor(nuxt-ripple): :technologist: fix featureflag typing
author
Dylan Kelly
date
(Feb 9, 2023, 1:28 PM +1100)
commit
3343f1ac
3343f1acbbd9aa26b8684ac87caab914626d167d
parent
26314e62
26314e62e88e844544953baf23b9d93911d53717
+58
-59
+11
-11
examples/nuxt-app/app.config.ts
+11
-11
examples/nuxt-app/app.config.ts
···
1
1
export default defineAppConfig({
2
-
features: {
3
-
quickExit: false
4
-
},
5
-
theme: {
6
-
'rpl-clr-primary': 'purple',
7
-
'rpl-clr-primary-alt': '#a21e8f',
8
-
'rpl-clr-accent': '#ef4a81',
9
-
'rpl-clr-accent-alt': '#fdedf2',
10
-
'rpl-clr-link': '#be3c67',
11
-
'rpl-clr-focus': '#1c3bdd',
12
-
'rpl-clr-type-focus-contrast': 'var(--rpl-clr-light)'
2
+
ripple: {
3
+
featureFlags: {},
4
+
theme: {
5
+
'rpl-clr-primary': 'purple',
6
+
'rpl-clr-primary-alt': '#a21e8f',
7
+
'rpl-clr-accent': '#ef4a81',
8
+
'rpl-clr-accent-alt': '#fdedf2',
9
+
'rpl-clr-link': '#be3c67',
10
+
'rpl-clr-focus': '#1c3bdd',
11
+
'rpl-clr-type-focus-contrast': 'var(--rpl-clr-light)'
12
+
}
13
13
}
14
14
})
+25
packages/nuxt-ripple/app.config.ts
+25
packages/nuxt-ripple/app.config.ts
···
1
+
import type { IRplFeatureFlags } from '@dpc-sdp/ripple-tide-api/types'
2
+
3
+
declare module '@nuxt/schema' {
4
+
interface AppConfigInput {
5
+
ripple?: {
6
+
featureFlags?: IRplFeatureFlags
7
+
theme?: {
8
+
['rpl-clr-primary']?: string
9
+
['rpl-clr-primary-alt']?: string
10
+
['rpl-clr-accent']?: string
11
+
['rpl-clr-accent-alt']?: string
12
+
['rpl-clr-link']?: string
13
+
['rpl-clr-focus']?: string
14
+
['rpl-clr-type-focus-contrast']?: string
15
+
}
16
+
}
17
+
}
18
+
}
19
+
20
+
export default defineAppConfig({
21
+
ripple: {
22
+
featureFlags: {},
23
+
theme: {}
24
+
}
25
+
})
+15
-41
packages/nuxt-ripple/components/TideBaseLayout.vue
+15
-41
packages/nuxt-ripple/components/TideBaseLayout.vue
···
7
7
</template>
8
8
<template #primaryNav>
9
9
<slot name="primaryNav">
10
-
<RplPrimaryNav
11
-
:primaryLogo="{
12
-
src: '/img/primary-nav-logo-primary.svg',
13
-
altText: 'Victoria government logo',
14
-
href: '/'
15
-
}"
16
-
:secondaryLogo="site?.siteLogo"
17
-
:items="site?.menus.menuMain || []"
18
-
:showQuickExit="site?.showQuickExit"
19
-
>
10
+
<RplPrimaryNav :primaryLogo="{
11
+
src: '/img/primary-nav-logo-primary.svg',
12
+
altText: 'Victoria government logo',
13
+
href: '/'
14
+
}" :secondaryLogo="site?.siteLogo" :items="site?.menus.menuMain || []" :showQuickExit="site?.showQuickExit">
20
15
</RplPrimaryNav>
21
16
</slot>
22
17
</template>
23
18
<template #breadcrumbs>
24
19
<slot name="breadcrumbs">
25
-
<TideBreadcrumbs
26
-
v-if="showBreadcrumbs"
27
-
:siteMenu="site?.menus.menuMain"
28
-
:currentPath="route.path"
29
-
:currentPageTitle="pageTitle"
30
-
/>
20
+
<TideBreadcrumbs v-if="showBreadcrumbs" :siteMenu="site?.menus.menuMain" :currentPath="route.path"
21
+
:currentPageTitle="pageTitle" />
31
22
</slot>
32
23
</template>
33
24
<template #aboveBody="{ hasBreadcrumbs }">
···
35
26
</template>
36
27
<template #body="{ hasSidebar }">
37
28
<slot name="body" :hasSidebar="hasSidebar"></slot>
38
-
<div
39
-
v-if="topicTags.length"
40
-
data-cy="topic-tags"
41
-
class="rpl-u-margin-t-6"
42
-
>
43
-
<RplChip
44
-
v-for="tag in topicTags"
45
-
:key="tag.url"
46
-
:label="tag.text"
47
-
:url="tag.url"
48
-
/>
29
+
<div v-if="topicTags.length" data-cy="topic-tags" class="rpl-u-margin-t-6">
30
+
<RplChip v-for="tag in topicTags" :key="tag.url" :label="tag.text" :url="tag.url" />
49
31
</div>
50
32
51
33
<TideUpdatedDate v-if="updatedDate" :date="updatedDate" />
52
34
</template>
53
35
<template #belowBody>
54
36
<slot name="belowBody"></slot>
55
-
<TideContentRating
56
-
:siteSectionName="siteSection ? siteSection.name : ''"
57
-
/>
37
+
<TideContentRating :siteSectionName="siteSection ? siteSection.name : ''" />
58
38
</template>
59
39
<template #aboveSidebar>
60
40
<slot name="aboveSidebar"></slot>
···
67
47
</template>
68
48
<template #footer>
69
49
<slot name="footer">
70
-
<RplFooter
71
-
:nav="site?.menus.menuMain"
72
-
:links="site?.menus.menuFooter"
73
-
:copyright="site?.copyright"
74
-
:acknowledgement="site?.acknowledgementFooter"
75
-
:logos="site?.footerLogos"
76
-
:credit="footerImageCaption"
77
-
:variant="featureFlags?.footerTheme || 'default'"
78
-
>
50
+
<RplFooter :nav="site?.menus.menuMain" :links="site?.menus.menuFooter" :copyright="site?.copyright"
51
+
:acknowledgement="site?.acknowledgementFooter" :logos="site?.footerLogos" :credit="footerImageCaption"
52
+
:variant="featureFlags?.footerTheme || 'default'">
79
53
<template v-if="site?.copyrightHtml" #copyright>
80
54
<div data-cy="footer-copyright" v-html="site?.copyrightHtml"></div>
81
55
</template>
···
116
90
siteSection: null
117
91
})
118
92
// Feature flags will be available on component instances with inject('featureFlags') - See https://vuejs.org/guide/components/provide-inject.html#inject
119
-
const featureFlags = ref(props.site?.featureFlags || {})
93
+
const featureFlags = ref(props.site?.featureFlags || useAppConfig()?.ripple?.featureFlags)
120
94
provide('featureFlags', featureFlags.value)
121
95
122
96
onMounted(() => {
···
130
104
return route.path !== '/'
131
105
})
132
106
133
-
const style = useSiteTheme(props.site?.theme || useAppConfig().theme)
107
+
const style = useSiteTheme(props.site?.theme || useAppConfig()?.ripple?.theme)
134
108
135
109
useHead({
136
110
title: props.pageTitle,
+2
packages/nuxt-ripple/types.d.ts
+2
packages/nuxt-ripple/types.d.ts
···
1
1
import type { AxiosInstance } from 'axios'
2
+
import { IRplFeatureFlags } from 'ripple-tide-api/types'
2
3
import { TideAlert } from './src/mapping/alerts/site-alerts-mapping'
3
4
import { TideContact } from './src/mapping/sidebar-contacts/sidebar-contacts-mapping-types'
4
5
import { TideTopicTag } from './src/mapping/topic-tags/topic-tags-mapping'
···
38
39
theme: {
39
40
[key: string]: string
40
41
}
42
+
featureFlags: IRplFeatureFlags
41
43
socialImages: {
42
44
twitter: any
43
45
og: any
+5
-7
packages/ripple-tide-landing-page/components/global/TideLandingPage/CallToAction.vue
+5
-7
packages/ripple-tide-landing-page/components/global/TideLandingPage/CallToAction.vue
···
1
1
<template>
2
-
<RplCallToActionCard
3
-
:title="title"
4
-
:image="image"
5
-
:url="url"
6
-
:ctaText="ctaText"
7
-
>
2
+
<RplCallToActionCard :title="title" :image="image" :url="url" :ctaText="ctaText" :theme="featureFlags.buttonTheme">
8
3
<div data-cy="summary" v-html="summary"></div>
9
4
</RplCallToActionCard>
10
5
</template>
11
6
12
7
<script setup lang="ts">
8
+
import { inject } from 'vue';
13
9
import { RplCallToActionCard } from '@dpc-sdp/ripple-ui-core'
14
-
10
+
const featureFlags = inject('featureFlags', {
11
+
buttonTheme: 'default'
12
+
})
15
13
interface Props {
16
14
title: string
17
15
image: {