add new components for promo nav item (#2210)

- add navigation badge component
- add dollar badge icon
- expose a slot in side-nav component
- adjust nav width to new designs

src/lib/components/side-nav.svelte

@@ -36,7 +36,7 @@
       />
     {/if}
   {/each}
-  <svelte.fragment slot="bottom">
+  <svelte:fragment slot="bottom">
     <NavigationButton
       onClick={() => ($useDarkMode = !$useDarkMode)}
       tooltip={$useDarkMode
@@ -53,5 +53,6 @@
       active={$labsMode}
       data-testid="labs-mode-button"
     />
-  </svelte.fragment>
+    <slot name="bottom" />
+  </svelte:fragment>
 </Navigation>

src/lib/holocene/icon/paths.ts

@@ -30,6 +30,7 @@ import converterDown from './svg/converter-down.svelte';
 import converterUp from './svg/converter-up.svelte';
 import copy from './svg/copy.svelte';
 import descending from './svg/descending.svelte';
+import dollarBadge from './svg/dollar-badge.svelte';
 import download from './svg/download.svelte';
 import error from './svg/error.svelte';
 import exit from './svg/exit.svelte';
@@ -132,6 +133,7 @@ export const icons = {
   copy,
   descending,
   download,
+  'dollar-badge': dollarBadge,
   error,
   exit,
   'external-link': externalLink,

src/lib/holocene/icon/svg/dollar-badge.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+  import Svg from '../svg.svelte';
+</script>
+
+<Svg {...$$props}>
+  <path
+    fill="currentcolor"
+    d="M 9.38907,3.82032 C 9.885945,2.88282 10.870305,2.25 12,2.25 c 1.129695,0 2.11407,0.63282 2.610945,1.57032 l 0.435855,0.824985 0.8907,-0.27186 c 1.0125,-0.309375 2.1609,-0.065625 2.95785,0.73593 0.7968,0.801555 1.0452,1.945305 0.7359,2.95782 L 19.3593,8.95782 20.17965,9.39375 c 0.9375,0.496875 1.57035,1.48125 1.57035,2.610945 0,1.12968 -0.63285,2.114055 -1.57035,2.61093 l -0.825,0.431175 0.27195,0.8907 c 0.3093,1.0125 0.06555,2.1609 -0.7359,2.95785 -0.8016,0.7968 -1.94535,1.0452 -2.95785,0.7359 l -0.8907,-0.27195 -0.4359,0.82035 C 14.109375,21.11715 13.125,21.75 11.995305,21.75 c -1.12968,0 -2.114055,-0.63285 -2.61093,-1.57035 L 8.953125,19.35465 8.0625,19.6266 C 7.05,19.9359 5.90157,19.69215 5.104695,18.8907 4.30782,18.0891 4.059375,16.95 4.36875,15.9375 L 4.640625,15.0468 3.82032,14.610945 C 2.88282,14.11407 2.25,13.129695 2.25,12 2.25,10.870305 2.88282,9.885945 3.82032,9.38907 L 4.645305,8.953125 4.373445,8.0625 C 4.06407,7.05 4.30782,5.90157 5.109375,5.104695 5.91093,4.30782 7.05,4.059375 8.0625,4.36875 L 8.953125,4.640625 Z M 12,0 C 10.317195,0 8.821875,0.796875 7.870305,2.034375 6.32343,1.83282 4.70157,2.325 3.510945,3.515625 2.32032,4.70625 1.828125,6.328125 2.02968,7.875 0.796875,8.821875 0,10.317195 0,12 0,13.682805 0.796875,15.1782 2.034375,16.12965 1.83282,17.6766 2.325,19.2984 3.515625,20.4891 4.70625,21.67965 6.328125,22.1718 7.875,21.97035 8.821875,23.2032 10.317195,24 12,24 c 1.682805,0 3.1782,-0.7968 4.12965,-2.0343 1.54695,0.20145 3.16875,-0.2907 4.35945,-1.4814 1.19055,-1.19055 1.6827,-2.8125 1.48125,-4.3593 C 23.2032,15.17805 24,13.682805 24,12 24,10.317195 23.2032,8.821875 21.9657,7.870305 22.16715,6.32343 21.675,4.70157 20.4843,3.510945 19.29375,2.32032 17.6718,1.828125 16.125,2.02968 15.17805,0.796875 13.682805,0 12,0 Z m 0.97968,6.998445 v -0.9375 h -1.875 v 0.9375 0.39843 c -0.314055,0.060945 -0.614055,0.15 -0.895305,0.276555 -0.754695,0.342195 -1.40157,0.975 -1.560945,1.884375 -0.089055,0.510945 -0.04218,1.00314 0.168765,1.448445 0.206235,0.435945 0.52968,0.74532 0.86718,0.975 0.590625,0.398445 1.37343,0.6375 1.9875,0.82032 l 0.10782,0.0328 c 0.721875,0.215625 1.232805,0.38907 1.556235,0.623445 0.14064,0.103125 0.20157,0.1875 0.229695,0.25311 0.02812,0.06095 0.05625,0.18282 0.01875,0.40782 -0.0375,0.22032 -0.164055,0.403125 -0.478125,0.534375 C 12.76407,14.798445 12.22968,14.86407 11.55,14.76093 11.22657,14.70937 10.659375,14.5125 10.1625,14.34375 10.05,14.30625 9.94218,14.26875 9.839055,14.235945 L 8.94843,13.940625 8.35782,15.7218 9.248445,16.01715 c 0.06561,0.02355 0.145305,0.04695 0.234375,0.07965 0.43593,0.15015 1.124985,0.38445 1.62186,0.4875 v 0.4173 0.9375 h 1.875 v -0.9375 -0.375 c 0.304695,-0.0516 0.59532,-0.13125 0.867195,-0.24855 0.79218,-0.3375 1.420275,-0.98895 1.584375,-1.94055 0.0891,-0.525 0.0516,-1.021875 -0.14535,-1.471875 -0.1968,-0.45 -0.5109,-0.778125 -0.8484,-1.021875 -0.61875,-0.45 -1.44375,-0.69843 -2.08125,-0.890625 l -0.0375,-0.0094 C 11.5875,10.82342 11.067195,10.65935 10.734375,10.43435 c -0.14532,-0.09844 -0.20157,-0.17343 -0.225,-0.225 -0.01875,-0.04218 -0.05157,-0.13125 -0.01407,-0.323445 0.02345,-0.145305 0.135945,-0.3375 0.487515,-0.49686 0.35625,-0.159375 0.895305,-0.24375 1.551555,-0.140625 0.22968,0.0375 0.9375,0.17343 1.13907,0.22968 L 14.578125,9.71717 15.0609,7.9031 14.15625,7.65467 C 13.90782,7.58907 13.3125,7.471875 12.97968,7.410945 Z"
+  />
+</Svg>

src/lib/holocene/navigation/navigation-badge.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+  import type { IconName } from '../icon';
+  import Icon from '../icon/icon.svelte';
+
+  export let icon: IconName;
+  export let link: string;
+  export let tooltip: string = '';
+  export let external = false;
+
+  $: rel = external ? 'noopener noreferrer' : '';
+  $: target = external ? '_blank' : '';
+</script>
+
+<div class="relative" role="listitem" data-testid={$$props['data-testid']}>
+  <a
+    href={link}
+    {rel}
+    {target}
+    class="relative flex cursor-pointer items-center whitespace-nowrap rounded-lg border border-white/10 bg-white/5 text-white hover:bg-white hover:text-black group-data-[nav=closed]:p-1 group-data-[nav=open]:px-2.5 group-data-[nav=open]:py-2"
+  >
+    <div
+      class="flex h-6 w-6 items-center after:absolute after:left-[calc(100%_+_1.5rem)] after:top-0 after:hidden after:h-8 after:items-center after:rounded-md after:bg-slate-800 after:p-1 after:px-2 after:text-xs after:text-white after:content-[attr(data-tooltip)] group-data-[nav=open]:hidden group-data-[nav=open]:justify-start group-data-[nav=closed]:justify-center group-data-[nav=closed]:hover:after:flex"
+      data-tooltip={tooltip}
+    >
+      {#if icon}
+        <Icon name={icon} />
+      {/if}
+    </div>
+    <div
+      class="text-xs font-medium group-data-[nav=open]:visible group-data-[nav=closed]:hidden"
+    >
+      <slot />
+    </div>
+  </a>
+</div>

src/lib/holocene/navigation/navigation-container.svelte

@@ -17,7 +17,7 @@
 
 <nav
   class={merge(
-    'group grid h-screen min-h-[600px] w-16 grid-cols-[2rem] grid-rows-[fit-content(1.5rem)_minmax(3rem,4rem)_1fr_8rem] gap-2 border-r border-subtle px-4 py-5 transition-width data-[nav=open]:w-40 data-[nav=open]:grid-cols-[100%]',
+    'group grid h-screen min-h-[600px] w-16 grid-cols-[2rem] grid-rows-[fit-content(1.5rem)_minmax(3rem,4rem)_1fr_8rem] gap-2 border-r border-subtle px-4 py-5 transition-width data-[nav=open]:w-[180px] data-[nav=open]:grid-cols-[100%]',
     'focus-visible:[&_[role=button]]:outline-none focus-visible:[&_[role=button]]:ring-4 focus-visible:[&_[role=button]]:ring-primary/70 focus-visible:[&_a]:outline-none focus-visible:[&_a]:ring-4 focus-visible:[&_a]:ring-primary/70',
     isCloud
       ? 'bg-gradient-to-b from-indigo-600 to-indigo-950 text-off-white focus-visible:[&_[role=button]]:ring-success focus-visible:[&_a]:ring-success'
@@ -45,7 +45,7 @@
   <div class="self-end">
     <slot name="bottom" />
     <div
-      class="self-center justify-self-center pb-3 text-center text-[0.6rem] text-slate-300"
+      class="self-center justify-self-center py-3 text-center text-[0.6rem] text-slate-300"
     >
       <span class="sr-only">{translate('common.version')}</span>
       {version}