Skip to content

Commit 0d098ae

Browse files
marktnoonanJessicaSachs
marktnoonan
and
JessicaSachs
authored
feat(unify): add growth prompts (#18626)
Co-authored-by: Jessica Sachs <jess@jessicasachs.io>
1 parent 10a540a commit 0d098ae

17 files changed

+726
-164
lines changed

‎packages/frontend-shared/src/assets/icons/arrow-outline-right.svg

+3
Loading

‎packages/frontend-shared/src/assets/icons/infinity-loop_x18.svg

+3
Loading

‎packages/frontend-shared/src/assets/icons/lightning_x16.svg

+3
Loading

‎packages/frontend-shared/src/assets/logos/aws-codebuild.svg

+23
Loading

‎packages/frontend-shared/src/assets/logos/bitbucket.svg

+3
Loading

‎packages/frontend-shared/src/assets/logos/circleci.svg

+12
Loading

‎packages/frontend-shared/src/assets/logos/github-actions.svg

+3
Loading

‎packages/frontend-shared/src/assets/logos/gitlab.svg

+16
Loading

‎packages/frontend-shared/src/components/Button.vue

+68-25
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,80 @@
11
<template>
22
<button
3+
v-if="!href"
34
style="width: fit-content"
45
class="flex select-none items-center border rounded gap-8px outline-none"
56
:class="classes"
67
>
7-
<span
8-
v-if="prefixIcon || $slots.prefix"
9-
class="justify-self-start flex items-center"
10-
>
11-
<slot name="prefix">
12-
<component
13-
:is="prefixIcon"
14-
:class="prefixIconClass"
15-
/>
16-
</slot>
17-
</span>
18-
<span class="flex-grow">
19-
<slot />
20-
</span>
21-
<span
22-
v-if="suffixIcon || $slots.suffix"
23-
class="justify-self-start flex items-center"
24-
>
25-
<slot name="suffix">
26-
<component
27-
:is="suffixIcon"
28-
:class="suffixIconClass"
29-
/>
30-
</slot>
31-
</span>
8+
<ButtonInternals>
9+
<template
10+
v-if="prefixIcon || $slots.prefix"
11+
#prefix
12+
>
13+
<slot name="prefix">
14+
<component
15+
:is="prefixIcon"
16+
:class="prefixIconClass"
17+
/>
18+
</slot>
19+
</template>
20+
<template #default>
21+
<slot />
22+
</template>
23+
<template
24+
v-if="suffixIcon || $slots.suffix"
25+
#suffix
26+
>
27+
<slot name="suffix">
28+
<component
29+
:is="suffixIcon"
30+
:class="suffixIconClass"
31+
/>
32+
</slot>
33+
</template>
34+
</ButtonInternals>
3235
</button>
36+
<a
37+
v-else
38+
:href="href"
39+
style="width: fit-content"
40+
class="flex select-none items-center border rounded gap-8px outline-none"
41+
:class="classes"
42+
:target="internalLink ? '' : '_blank'"
43+
>
44+
<ButtonInternals>
45+
<template
46+
v-if="prefixIcon || $slots.prefix"
47+
#prefix
48+
>
49+
<slot name="prefix">
50+
<component
51+
:is="prefixIcon"
52+
:class="prefixIconClass"
53+
/>
54+
</slot>
55+
</template>
56+
<template #default>
57+
<slot />
58+
</template>
59+
<template #suffix>
60+
<slot
61+
v-if="suffixIcon || $slots.suffix"
62+
name="suffix"
63+
>
64+
<component
65+
:is="suffixIcon"
66+
:class="suffixIconClass"
67+
/>
68+
</slot>
69+
</template>
70+
71+
</ButtonInternals>
72+
</a>
3373
</template>
3474

3575
<script lang="ts">
3676
import { defineComponent } from 'vue'
77+
import ButtonInternals from './ButtonInternals.vue'
3778
3879
export default defineComponent({
3980
inheritAttrs: true,
@@ -71,6 +112,8 @@ const props = defineProps<{
71112
variant?: 'primary' | 'tertiary' | 'outline' | 'link' | 'text' | 'pending'
72113
prefixIconClass?: string
73114
suffixIconClass?: string
115+
href?: string // will cause the button to render as link element with button styles
116+
internalLink?: boolean
74117
}>()
75118
76119
const attrs = useAttrs() as ButtonHTMLAttributes

‎packages/frontend-shared/src/components/ButtonInternals.vue

+49
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
<template>
2+
<span
3+
v-if="prefixIcon || $slots.prefix"
4+
class="justify-self-start flex items-center"
5+
>
6+
<slot name="prefix">
7+
<component
8+
:is="prefixIcon"
9+
:class="prefixIconClass"
10+
/>
11+
</slot>
12+
</span>
13+
<span class="flex-grow">
14+
<slot />
15+
</span>
16+
<span
17+
v-if="suffixIcon || $slots.suffix"
18+
class="justify-self-start flex items-center"
19+
>
20+
<slot name="suffix">
21+
<component
22+
:is="suffixIcon"
23+
:class="suffixIconClass"
24+
/>
25+
</slot>
26+
</span>
27+
</template>
28+
29+
<script lang="ts">
30+
import { defineComponent } from 'vue'
31+
32+
export default defineComponent({
33+
inheritAttrs: true,
34+
})
35+
</script>
36+
37+
<script lang="ts" setup>
38+
39+
// eslint-disable-next-line no-duplicate-imports
40+
import type { FunctionalComponent, SVGAttributes } from 'vue'
41+
42+
const props = defineProps<{
43+
prefixIcon?: FunctionalComponent<SVGAttributes>
44+
suffixIcon?: FunctionalComponent<SVGAttributes>
45+
prefixIconClass?: string
46+
suffixIconClass?: string
47+
}>()
48+
49+
</script>

‎packages/frontend-shared/src/locales/en-US.json

+22-1
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,28 @@
6464
"ciTitle": "Run in CI/CD",
6565
"ciSetup": "Set up CI",
6666
"fasterTests": "Run tests faster",
67-
"smartOrchestration": "Smart Orchestration"
67+
"smartOrchestration": "Smart Orchestration",
68+
"prompts": {
69+
"ci": {
70+
"title": "Configure CI",
71+
"description": "Optimize your tests in CI by following these guides.",
72+
"seeOtherGuides": "See Other Guides",
73+
"intro": "Introduction to CI",
74+
"learnTheBasics": "Learn the basics of running Cypress in CI."
75+
},
76+
"orchestration": {
77+
"title": "Run tests faster in CI",
78+
"parallelTime": "5 mins",
79+
"noParallelTime": "12 mins",
80+
"withParallelization": "with Parallelization",
81+
"withoutParallelization": "without Parallelization",
82+
"intro": " With Smart Orchestration, you’ll be able to:",
83+
"bullet1": "Run spec files in parallel",
84+
"bullet2": "Prioritize failed specs to run first",
85+
"bullet3": "Cancel CI runs on test failure",
86+
"learnMore": "Learn more"
87+
}
88+
}
6889
},
6990
"login": {
7091
"bodyInitial": "Logging in gives you access to the {0}. You can set up projects to be recorded and see test data from your project.",

‎packages/frontend-shared/src/utils/getUrlWithParams.ts

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
export type LinkWithParams = {
2+
url: string
3+
params: { [key: string]: string }
4+
}
5+
6+
export const getUrlWithParams = (link: LinkWithParams) => {
7+
let result = link.url
8+
9+
if (link.params) {
10+
result += `?${new URLSearchParams(link.params).toString()}`
11+
}
12+
13+
return result
14+
}

0 commit comments

Comments
 (0)