feat(unify): add growth prompts

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

@@ -1,39 +1,80 @@
 <template>
   <button
+    v-if="!href"
     style="width: fit-content"
     class="flex select-none items-center border rounded gap-8px outline-none"
     :class="classes"
   >
-    <span
-      v-if="prefixIcon || $slots.prefix"
-      class="justify-self-start flex items-center"
-    >
-      <slot name="prefix">
-        <component
-          :is="prefixIcon"
-          :class="prefixIconClass"
-        />
-      </slot>
-    </span>
-    <span class="flex-grow">
-      <slot />
-    </span>
-    <span
-      v-if="suffixIcon || $slots.suffix"
-      class="justify-self-start flex items-center"
-    >
-      <slot name="suffix">
-        <component
-          :is="suffixIcon"
-          :class="suffixIconClass"
-        />
-      </slot>
-    </span>
+    <ButtonInternals>
+      <template
+        v-if="prefixIcon || $slots.prefix"
+        #prefix
+      >
+        <slot name="prefix">
+          <component
+            :is="prefixIcon"
+            :class="prefixIconClass"
+          />
+        </slot>
+      </template>
+      <template #default>
+        <slot />
+      </template>
+      <template
+        v-if="suffixIcon || $slots.suffix"
+        #suffix
+      >
+        <slot name="suffix">
+          <component
+            :is="suffixIcon"
+            :class="suffixIconClass"
+          />
+        </slot>
+      </template>
+    </ButtonInternals>
   </button>
+  <a
+    v-else
+    :href="href"
+    style="width: fit-content"
+    class="flex select-none items-center border rounded gap-8px outline-none"
+    :class="classes"
+    :target="internalLink ? '' : '_blank'"
+  >
+    <ButtonInternals>
+      <template
+        v-if="prefixIcon || $slots.prefix"
+        #prefix
+      >
+        <slot name="prefix">
+          <component
+            :is="prefixIcon"
+            :class="prefixIconClass"
+          />
+        </slot>
+      </template>
+      <template #default>
+        <slot />
+      </template>
+      <template #suffix>
+        <slot
+          v-if="suffixIcon || $slots.suffix"
+          name="suffix"
+        >
+          <component
+            :is="suffixIcon"
+            :class="suffixIconClass"
+          />
+        </slot>
+      </template>
+
+    </ButtonInternals>
+  </a>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue'
+import ButtonInternals from './ButtonInternals.vue'
 
 export default defineComponent({
   inheritAttrs: true,
@@ -71,6 +112,8 @@ const props = defineProps<{
   variant?: 'primary' | 'tertiary' | 'outline' | 'link' | 'text' | 'pending'
   prefixIconClass?: string
   suffixIconClass?: string
+  href?: string // will cause the button to render as link element with button styles
+  internalLink?: boolean
 }>()
 
 const attrs = useAttrs() as ButtonHTMLAttributes

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

@@ -0,0 +1,49 @@
+<template>
+  <span
+    v-if="prefixIcon || $slots.prefix"
+    class="justify-self-start flex items-center"
+  >
+    <slot name="prefix">
+      <component
+        :is="prefixIcon"
+        :class="prefixIconClass"
+      />
+    </slot>
+  </span>
+  <span class="flex-grow">
+    <slot />
+  </span>
+  <span
+    v-if="suffixIcon || $slots.suffix"
+    class="justify-self-start flex items-center"
+  >
+    <slot name="suffix">
+      <component
+        :is="suffixIcon"
+        :class="suffixIconClass"
+      />
+    </slot>
+  </span>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  inheritAttrs: true,
+})
+</script>
+
+<script lang="ts" setup>
+
+// eslint-disable-next-line no-duplicate-imports
+import type { FunctionalComponent, SVGAttributes } from 'vue'
+
+const props = defineProps<{
+  prefixIcon?: FunctionalComponent<SVGAttributes>
+  suffixIcon?: FunctionalComponent<SVGAttributes>
+  prefixIconClass?: string
+  suffixIconClass?: string
+}>()
+
+</script>

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

@@ -64,7 +64,28 @@
       "ciTitle": "Run in CI/CD",
       "ciSetup": "Set up CI",
       "fasterTests": "Run tests faster",
-      "smartOrchestration": "Smart Orchestration"
+      "smartOrchestration": "Smart Orchestration",
+      "prompts": {
+        "ci": {
+          "title": "Configure CI",
+          "description": "Optimize your tests in CI by following these guides.",
+          "seeOtherGuides": "See Other Guides",
+          "intro": "Introduction to CI",
+          "learnTheBasics": "Learn the basics of running Cypress in CI."
+        },
+        "orchestration": {
+          "title": "Run tests faster in CI",
+          "parallelTime": "5 mins",
+          "noParallelTime": "12 mins",
+          "withParallelization": "with Parallelization",
+          "withoutParallelization": "without Parallelization",
+          "intro": " With Smart Orchestration, you’ll be able to:",
+          "bullet1": "Run spec files in parallel",
+          "bullet2": "Prioritize failed specs to run first",
+          "bullet3": "Cancel CI runs on test failure",
+          "learnMore": "Learn more"
+        }
+      }
     },
     "login": {
       "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

@@ -0,0 +1,14 @@
+export type LinkWithParams = {
+    url: string
+    params: { [key: string]: string }
+  }
+
+export const getUrlWithParams = (link: LinkWithParams) => {
+  let result = link.url
+
+  if (link.params) {
+    result += `?${new URLSearchParams(link.params).toString()}`
+  }
+
+  return result
+}