init commit

src/components/jet/action/ExternalUrlAction.svelte

@@ -0,0 +1,52 @@
+<script lang="ts">
+    import type { HTMLAnchorAttributes } from 'svelte/elements';
+    import type { ExternalUrlAction } from '@jet-app/app-store/api/models';
+    import ArrowIcon from '@amp/web-app-components/assets/icons/arrow.svg';
+    import { getJetPerform } from '~/jet';
+
+    type AllowedAnchorAttributes = Omit<
+        HTMLAnchorAttributes,
+        // The `href` attribute is not allowed because it will be provided
+        // by the `ExternalUrlAction`
+        'href'
+    >;
+
+    interface $$Props extends AllowedAnchorAttributes {
+        destination: ExternalUrlAction;
+        includeArrowIcon?: boolean;
+    }
+
+    const perform = getJetPerform();
+
+    export let destination: ExternalUrlAction;
+    export let includeArrowIcon: boolean = true;
+
+    function handleClickAction() {
+        perform(destination);
+    }
+</script>
+
+<a
+    {...$$restProps}
+    data-test-id="external-link"
+    href={destination.url}
+    target="_blank"
+    rel="nofollow noopener noreferrer"
+    on:click={handleClickAction}
+>
+    <slot />
+    {#if includeArrowIcon}
+        <ArrowIcon class="external-link-arrow" aria-hidden="true" />
+    {/if}
+</a>
+
+<style lang="scss">
+    @use '@amp/web-shared-styles/sasskit-stylekit/ac-sasskit-config';
+    @use 'ac-sasskit/core/locale' as *;
+
+    a :global(.external-link-arrow) {
+        @include rtl {
+            transform: rotate(-90deg);
+        }
+    }
+</style>

src/components/jet/action/FlowAction.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+    import type { HTMLAnchorAttributes } from 'svelte/elements';
+    import type { FlowAction } from '@jet-app/app-store/api/models';
+    import { getJetPerform } from '~/jet';
+
+    type AllowedAnchorAttributes = Omit<
+        HTMLAnchorAttributes,
+        // The `href` attribute is not allowed because it will be provided
+        // by the `FlowAction`
+        'href'
+    >;
+
+    interface $$Props extends AllowedAnchorAttributes {
+        destination: FlowAction;
+    }
+
+    const perform = getJetPerform();
+
+    export let destination: FlowAction;
+
+    // Web cannot support internal protocols, so this guard prevents
+    // them from showing up in anchor tags.
+    $: pageUrl = destination.pageUrl?.includes('x-as3-internal:')
+        ? '#'
+        : destination?.pageUrl;
+
+    function onClick(event: MouseEvent) {
+        event.preventDefault();
+
+        perform(destination);
+    }
+</script>
+
+<a
+    {...$$restProps}
+    href={pageUrl}
+    data-test-id="internal-link"
+    on:click={onClick}
+>
+    <slot />
+</a>

src/components/jet/action/ShelfBasedPageScrollAction.svelte

@@ -0,0 +1,51 @@
+<script lang="ts" context="module">
+    import type {
+        Action,
+        ShelfBasedPageScrollAction,
+    } from '@jet-app/app-store/api/models';
+
+    export function isShelfBasedPageScrollAction(
+        action: Action,
+    ): action is ShelfBasedPageScrollAction {
+        return (
+            action.$kind === 'ShelfBasedPageScrollAction' && 'shelfId' in action
+        );
+    }
+</script>
+
+<script lang="ts">
+    import type { HTMLAnchorAttributes } from 'svelte/elements';
+
+    interface $$Props extends HTMLAnchorAttributes {
+        destination: ShelfBasedPageScrollAction;
+    }
+
+    export let destination: ShelfBasedPageScrollAction;
+
+    function handleLinkClick(e: Event) {
+        const anchorElement = e.currentTarget as HTMLAnchorElement;
+        const hash = anchorElement.hash;
+        const elementToScrollTo = document.querySelector(hash);
+        if (!elementToScrollTo) {
+            return;
+        }
+        elementToScrollTo.scrollIntoView({
+            behavior: 'smooth',
+            block: 'start',
+        });
+        history.replaceState(null, '', hash);
+    }
+</script>
+
+{#if destination.shelfId}
+    <a
+        {...$$restProps}
+        data-test-id="scroll-link"
+        href={`#${destination.shelfId}`}
+        on:click|preventDefault|stopPropagation={handleLinkClick}
+    >
+        <slot />
+    </a>
+{:else}
+    <slot />
+{/if}