@visitscotland/component-library 5.76.0 → 5.78.0

package/dist/stories/patterns/cards/CardPatterns.stories.js

@@ -0,0 +1,108 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+exports.EventCard = exports.CategoryVideoCard = exports.CategoryImageCard = exports.LinkCardWithIcon = exports.LinkCardWithDetails = exports.LinkCard = exports.SplitLinkHorizontalCard = exports.SplitLinkCard = void 0;
+var Card_vue_1 = __importDefault(require("@/components/card/Card.vue"));
+var Heading_vue_1 = __importDefault(require("@/components/heading/Heading.vue"));
+var Img_vue_1 = __importDefault(require("@/components/img/Img.vue"));
+var Link_vue_1 = __importDefault(require("@/components/link/Link.vue"));
+var Button_vue_1 = __importDefault(require("@/components/button/Button.vue"));
+var Body_vue_1 = __importDefault(require("@/components/body/Body.vue"));
+var Detail_vue_1 = __importDefault(require("@/components/detail/Detail.vue"));
+var ArticleDetails_vue_1 = __importDefault(require("@/components/article-details/ArticleDetails.vue"));
+var Badge_vue_1 = __importDefault(require("@/components/badge/Badge.vue"));
+var Icon_vue_1 = __importDefault(require("@/components/icon/Icon.vue"));
+var Video_vue_1 = __importDefault(require("@/components/video/Video.vue"));
+var ToggleButton_vue_1 = __importDefault(require("@/components/toggle-button/ToggleButton.vue"));
+var prefers_reduced_motion_1 = __importDefault(require("@/utils/prefers-reduced-motion"));
+var split_link_card_1 = __importDefault(require("./card-examples/split-link-card"));
+var split_link_horizontal_card_1 = __importDefault(require("./card-examples/split-link-horizontal-card"));
+var link_card_1 = __importDefault(require("./card-examples/link-card"));
+var link_card_with_details_1 = __importDefault(require("./card-examples/link-card-with-details"));
+var link_card_with_icon_1 = __importDefault(require("./card-examples/link-card-with-icon"));
+var category_image_card_1 = __importDefault(require("./card-examples/category-image-card"));
+var category_video_card_1 = __importDefault(require("./card-examples/category-video-card"));
+var event_card_1 = __importDefault(require("./card-examples/event-card"));
+var components = {
+    VsCard: Card_vue_1["default"],
+    VsHeading: Heading_vue_1["default"],
+    VsImg: Img_vue_1["default"],
+    VsLink: Link_vue_1["default"],
+    VsButton: Button_vue_1["default"],
+    VsBody: Body_vue_1["default"],
+    VsArticleDetails: ArticleDetails_vue_1["default"],
+    VsBadge: Badge_vue_1["default"],
+    VsIcon: Icon_vue_1["default"],
+    VsDetail: Detail_vue_1["default"],
+    VsVideo: Video_vue_1["default"],
+    VsToggleButton: ToggleButton_vue_1["default"]
+};
+var decorators = {
+    "default": function () { return ({
+        template: '<div style="width: 22rem"><story /></div>'
+    }); },
+    fullWidth: function () { return ({
+        template: '<div style="width: 100%"><story /></div>'
+    }); }
+};
+/**
+ * Generic helper for simple template stories
+ */
+var createStory = function (template, decorator, options) {
+    if (decorator === void 0) { decorator = decorators["default"]; }
+    if (options === void 0) { options = {}; }
+    return ({
+        render: function () { return (__assign({ components: components, template: template }, options)); },
+        decorators: [decorator],
+        parameters: {
+            docs: {
+                source: {
+                    code: template
+                }
+            }
+        }
+    });
+};
+exports["default"] = {
+    title: 'Patterns/Cards'
+};
+exports.SplitLinkCard = createStory(split_link_card_1["default"]);
+exports.SplitLinkHorizontalCard = createStory(split_link_horizontal_card_1["default"], decorators.fullWidth);
+exports.LinkCard = createStory(link_card_1["default"]);
+exports.LinkCardWithDetails = createStory(link_card_with_details_1["default"]);
+exports.LinkCardWithIcon = createStory(link_card_with_icon_1["default"]);
+exports.CategoryImageCard = createStory(category_image_card_1["default"]);
+/**
+ * Interactive story (video play/pause)
+ */
+exports.CategoryVideoCard = createStory(category_video_card_1["default"], decorators["default"], {
+    data: function () {
+        return {
+            isReducedMotion: (0, prefers_reduced_motion_1["default"])()
+        };
+    },
+    methods: {
+        /**
+         * Toggles the video in the video examples with the ref given
+         * using the exposed toggleVideo method in the video component
+         */
+        toggleVideo: function (refKey) {
+            var _a, _b;
+            (_b = (_a = this.$refs[refKey]) === null || _a === void 0 ? void 0 : _a.toggleVideo) === null || _b === void 0 ? void 0 : _b.call(_a);
+        }
+    }
+});
+exports.EventCard = createStory(event_card_1["default"]);

package/dist/stories/patterns/cards/card-examples/category-image-card.js

@@ -0,0 +1,3 @@
+"use strict";
+exports.__esModule = true;
+exports["default"] = "\n    <VsCard card-style=\"overlay\">\n        <template #vs-card-image>\n            <VsImg \n                src=\"https://2f1a7f9478.visitscotland.net/binaries/content/gallery/visitscotland/cms-images/2024/11/05/creel-seafood?size=md\" \n                class=\"w-100 aspect-ratio-3-2 rounded-1 object-fit-cover img-zoom-on-hover\"\n            />\n        </template>\n\n        <template #vs-card-footer>\n            <div class=\"px-125 pb-125\">\n                <VsHeading\n                    level=\"2\"\n                    no-margins\n                    heading-style=\"heading-m\"\n                >\n                    <VsLink\n                        href=\"#\"\n                        class=\"stretched-link text-decoration-none\"\n                        variant=\"on-dark\"\n                        no-visited-styles\n                    >\n                        Food & drink\n                    </VsLink>\n                </VsHeading>\n            </div>\n        </template>\n    </VsCard>\n";

package/dist/stories/patterns/cards/card-examples/category-video-card.js

@@ -0,0 +1,3 @@
+"use strict";
+exports.__esModule = true;
+exports["default"] = "\n    <VsCard card-style=\"overlay\">\n        <template #vs-card-image>\n            <VsVideo\n                ref=\"categoryVideo\"\n                video-type=\"html5\"\n                poster-image-src=\"fixtures/hero/images/lavendar-fields.jpg\"\n                video-src=\"fixtures/hero/video/lavendar-fields.mp4\"\n                :show-toggle=\"false\"\n                video-id=\"category-card-video\"\n            />\n        </template>\n\n        <template #vs-card-overlay-controls>\n            <VsToggleButton\n                v-if=\"!isReducedMotion\"\n                variant=\"overlay\"\n                icon=\"vs-icon-control-pause\"\n                pressed-icon=\"vs-icon-control-play\"\n                label=\"Pause video\"\n                pressed-label=\"Play video\"\n                aria-controls=\"category-card-video\"\n                @click=\"(val) => toggleVideo('categoryVideo')\"\n            />\n        </template>\n\n        <template #vs-card-footer>\n            <div class=\"px-125 pb-125\">\n                <VsHeading level=\"2\" no-margins heading-style=\"heading-m\">\n                    <VsLink\n                        href=\"#\"\n                        class=\"stretched-link text-decoration-none\"\n                        variant=\"on-dark\"\n                        no-visited-styles\n                    >\n                        Landscape & nature\n                    </VsLink>\n                </VsHeading>\n            </div>\n        </template>\n    </VsCard>\n";

package/dist/stories/patterns/cards/card-examples/event-card.js

@@ -0,0 +1,3 @@
+"use strict";
+exports.__esModule = true;
+exports["default"] = "\n    <VsCard>\n        <template #vs-card-header>\n            <div class=\"position-relative\">\n                <VsImg\n                    src=\"./fixtures/megalinks/ashton-lane-wide.jpg\"\n                    class=\"w-100 aspect-ratio-3-2 rounded-1 object-fit-cover img-zoom-on-hover\"\n                />\n                <div class=\"position-absolute bottom-0 start-0 d-flex gap-2\">\n                    <VsBadge\n                        variant=\"information\"\n                        class=\"rounded-top-end rounded-bottom-start\"\n                    >\n                        From \u00A310\n                    </VsBadge>\n\n                    <VsBadge \n                        variant=\"information\"\n                        class=\"rounded-top-end rounded-top-start\"\n                    >\n                        25 Oct 2025\n                    </VsBadge>\n                </div>\n\n                <div class=\"position-absolute bottom-0 end-0 d-flex\">\n                    <VsBadge\n                        variant=\"highlight\"\n                        class=\"rounded-top-start rounded-bottom-start mx-0\"\n                    >\n                        Event\n                    </VsBadge>\n                </div>\n            </div>\n        </template>\n\n        <template #vs-card-body >\n            <VsHeading\n                level=\"3\"\n                heading-style=\"heading-xs\"\n            >\n                <VsLink\n                    href=\"#\"\n                    class=\"stretched-link\"\n                    variant=\"secondary\"\n                    no-visited-styles\n                >\n                    Neuk presents: Edit Your Creative Scotland Bid with Truffle Pig\n                </VsLink>\n            </VsHeading>\n\n            <VsBody>\n                <p class=\"truncate-2-lines\">\n                    A special in-person workshop for Neuk Collective members.\n                </p>\n            </VsBody>\n        </template>\n\n        <template #vs-card-footer>\n            <div class=\"d-flex justify-content-between align-items-end\">\n                <div class=\"d-flex align-items-center\">\n                    <VsIcon\n                        icon=\"fa-solid fa-location-dot\"\n                        variant=\"highlight\"\n                        class=\"me-050\"\n                        size=\"sm\"\n                    />\n                    <VsDetail no-margins color=\"tertiary\">\n                        Perth Theatre, Perth\n                    </VsDetail>\n                </div>\n\n                <VsIcon \n                    icon=\"vs-icon-control-external-link\"\n                    variant=\"highlight\"\n                    size=\"sm\"\n                    class=\"ms-050\"\n                />\n            </div>\n        </template>\n    </VsCard>\n";

package/dist/stories/patterns/cards/card-examples/link-card-with-details.js

@@ -0,0 +1,3 @@
+"use strict";
+exports.__esModule = true;
+exports["default"] = "\n    <VsCard \n        card-style=\"elevated\"\n        fill-color=\"vs-color-background-primary\"\n        accent-bar\n    >\n        <template #vs-card-header>\n            <VsBadge \n                variant=\"subtle\"\n                class=\"mt-125 mx-075\"\n            >\n                Article\n            </VsBadge>\n        </template>\n\n        <template #vs-card-body>\n            <div class=\"px-125\">\n                <VsHeading\n                    level=\"3\"\n                    heading-style=\"heading-xs\"\n                >\n                    <VsLink\n                        href=\"#\"\n                        class=\"stretched-link\"\n                        variant=\"secondary\"\n                        no-visited-styles\n                    >\n                        Managing your website\n                    </VsLink>\n                </VsHeading>\n\n                <VsBody class=\"mb-150\">\n                    <p class=\"truncate-3-lines\">\n                        Find out what makes a good accessible website including key pages and booking systems, and how you can develop and improve this digital channel.\n                    </p>\n                </VsBody>\n            </div>\n        </template>\n\n        <template #vs-card-footer>\n            <VsArticleDetails \n                class=\"px-125 mb-150\"\n                article-read-time=\"2 minute read\"\n            />\n        </template>\n    </VsCard>\n";

package/dist/stories/patterns/cards/card-examples/link-card-with-icon.js

@@ -0,0 +1,3 @@
+"use strict";
+exports.__esModule = true;
+exports["default"] = "\n    <VsCard \n        card-style=\"elevated\"\n        fill-color=\"vs-color-background-primary\"\n        accent-bar\n    >\n        <template #vs-card-header>\n            <VsIcon \n                icon=\"fa-regular fa-atom-simple\"\n                variant=\"highlight\"\n                size=\"lg\"\n                class=\"px-125 mt-125\"\n            />\n        </template>\n\n        <template #vs-card-body>\n            <div class=\"px-125\">\n                <VsHeading\n                    level=\"3\"\n                    heading-style=\"heading-xs\"\n                >\n                    <VsLink\n                        href=\"#\"\n                        class=\"stretched-link\"\n                        variant=\"secondary\"\n                        no-visited-styles\n                    >\n                        Managing your website\n                    </VsLink>\n                </VsHeading>\n\n                <VsBody class=\"mb-150\">\n                    <p class=\"truncate-3-lines\">\n                        Find out what makes a good accessible website including key pages and booking systems, and how you can develop and improve this digital channel.\n                    </p>\n                </VsBody>\n            </div>\n        </template>\n    </VsCard>\n";

package/dist/stories/patterns/cards/card-examples/link-card.js

@@ -0,0 +1,3 @@
+"use strict";
+exports.__esModule = true;
+exports["default"] = "\n    <VsCard \n        card-style=\"elevated\"\n        fill-color=\"vs-color-background-primary\"\n        accent-bar\n    >\n        <template #vs-card-header>\n            <VsBadge \n                variant=\"subtle\"\n                class=\"mt-125 mx-075\"\n            >\n                Article\n            </VsBadge>\n        </template>\n\n        <template #vs-card-body>\n            <div class=\"px-125\">\n                <VsHeading\n                    level=\"3\"\n                    heading-style=\"heading-xs\"\n                >\n                    <VsLink\n                        href=\"#\"\n                        class=\"stretched-link\"\n                        variant=\"secondary\"\n                        no-visited-styles\n                    >\n                        Managing your website\n                    </VsLink>\n                </VsHeading>\n\n                <VsBody class=\"mb-150\">\n                    <p class=\"truncate-3-lines\">\n                        Find out what makes a good accessible website including key pages and booking systems, and how you can develop and improve this digital channel.\n                    </p>\n                </VsBody>\n            </div>\n        </template>\n    </VsCard>\n";

package/dist/stories/patterns/cards/card-examples/split-link-card.js

@@ -0,0 +1,3 @@
+"use strict";
+exports.__esModule = true;
+exports["default"] = "\n    <VsCard>\n        <template #vs-card-header>\n            <VsImg\n                src=\"./fixtures/megalinks/ashton-lane-wide.jpg\"\n                class=\"w-100 aspect-ratio-3-2 rounded-1 object-fit-cover img-zoom-on-hover\"\n            />\n        </template>\n\n        <template #vs-card-body >\n            <VsHeading\n                level=\"3\"\n                heading-style=\"heading-xs\"\n            >\n                <VsLink\n                    href=\"#\"\n                    class=\"stretched-link\"\n                    variant=\"secondary\"\n                    no-visited-styles\n                >\n                    Unusual accommodation in Scotland\n                </VsLink>\n            </VsHeading>\n\n            <VsBody>\n                <p class=\"truncate-2-lines\">\n                    Fancy staying somewhere a little different? From castles to lighthouses, teepees to brochs, there's lots of unusual choices.\n                </p>\n            </VsBody>\n        </template>\n    </VsCard>\n";

package/dist/stories/patterns/cards/card-examples/split-link-horizontal-card.js

@@ -0,0 +1,3 @@
+"use strict";
+exports.__esModule = true;
+exports["default"] = "\n    <VsCard horizontal>\n        <template #vs-card-header>\n            <VsImg\n                src=\"./fixtures/megalinks/ashton-lane-wide.jpg\"\n                class=\"w-100 aspect-ratio-3-2 rounded-1 object-fit-cover img-zoom-on-hover\"\n            />\n        </template>\n\n        <template #vs-card-body>\n            <div class=\"px-125\">    \n                <VsHeading\n                    level=\"3\"\n                    heading-style=\"heading-xs\"\n                >\n                    <VsLink\n                        href=\"#\"\n                        class=\"stretched-link\"\n                        variant=\"secondary\"\n                        no-visited-styles\n                    >\n                        Unusual accommodation in Scotland\n                    </VsLink>\n                </VsHeading>\n\n                <VsBody class=\"d-none d-sm-block\">\n                    <p class=\"truncate-2-lines\">\n                        Fancy staying somewhere a little different? From castles to lighthouses, teepees to brochs, there's lots of unusual choices.\n                    </p>\n                </VsBody>\n            </div>\n        </template>\n    </VsCard>\n";

package/dist/stories/patterns/media/MediaLayout.stories.js

@@ -0,0 +1,43 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+exports.ImageWithCaption = exports.EmbeddedVideo = void 0;
+var MediaCaption_vue_1 = __importDefault(require("@/components/media-caption/MediaCaption.vue"));
+var Video_vue_1 = __importDefault(require("@/components/video/Video.vue"));
+var Img_vue_1 = __importDefault(require("@/components/img/Img.vue"));
+var embedded_video_1 = __importDefault(require("./templates/embedded-video"));
+var image_with_caption_1 = __importDefault(require("./templates/image-with-caption"));
+var components = {
+    VsMediaCaption: MediaCaption_vue_1["default"],
+    VsVideo: Video_vue_1["default"],
+    VsImg: Img_vue_1["default"]
+};
+var decorators = {
+    "default": function () { return ({
+        template: '<div style="max-width: 620px"><story /></div>'
+    }); }
+};
+var createStory = function (template, decorator) {
+    if (decorator === void 0) { decorator = decorators["default"]; }
+    return ({
+        render: function () { return ({
+            components: components,
+            template: template
+        }); },
+        decorators: [decorator],
+        parameters: {
+            docs: {
+                source: {
+                    code: template
+                }
+            }
+        }
+    });
+};
+exports["default"] = {
+    title: 'Patterns/Media'
+};
+exports.EmbeddedVideo = createStory(embedded_video_1["default"]);
+exports.ImageWithCaption = createStory(image_with_caption_1["default"]);

package/dist/stories/patterns/media/templates/embedded-video.js

@@ -0,0 +1,3 @@
+"use strict";
+exports.__esModule = true;
+exports["default"] = "\n    <VsVideo \n        video-id=\"h9bQwcndGfo\"\n        error-message=\"Sorry, something's gone wrong. Please try again later\"\n        no-js-message=\"You need Javascript enabled to see this video\"\n        no-cookies-message=\"You need cookies enabled to see this video\"\n        cookie-btn-text=\"Manage cookies\"\n    />\n    <VsMediaCaption \n        video-id=\"h9bQwcndGfo\"\n    >\n        <template v-slot:caption>\n            A promotional film inviting viewers to rediscover Scotland's landscapes and culture.\n        </template>\n    </VsMediaCaption>\n";

package/dist/stories/patterns/media/templates/image-with-caption.js

@@ -0,0 +1,3 @@
+"use strict";
+exports.__esModule = true;
+exports["default"] = "\n<figure>\n    <VsImg \n        src=\"./fixtures/image-with-caption/images/blair-castle.webp\"\n        fluid\n        class=\"rounded-2\"\n    />\n    <figcaption>\n        <VsMediaCaption>\n            <template v-slot:caption>\n                Blair Castle, Blair Atholl, Perthshire\n            </template>\n            <template v-slot:credit>\n                \u00A9 VisitScotland / Paul Tomkins\n            </template>\n        </VsMediaCaption>\n    </figcaption>\n</figure>\n";

package/dist/stories/patterns/page-header/PageHeader.stories.js

@@ -0,0 +1,87 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+exports.GeneralHeader = exports.ArticleHeader = exports.NavigationPageHeader = exports.SplitHeader = exports.VideoHeader = void 0;
+var HeroSection_vue_1 = __importDefault(require("@/components/hero-section/HeroSection.vue"));
+var LinkList_vue_1 = __importDefault(require("@/components/link-list/LinkList.vue"));
+var LinkListItem_vue_1 = __importDefault(require("@/components/link-list/components/LinkListItem.vue"));
+var grid_1 = require("@/components/grid");
+var ArticleDetails_vue_1 = __importDefault(require("@/components/article-details/ArticleDetails.vue"));
+var Breadcrumb_vue_1 = __importDefault(require("@/components/breadcrumb/Breadcrumb.vue"));
+var BreadcrumbItem_vue_1 = __importDefault(require("@/components/breadcrumb/components/BreadcrumbItem.vue"));
+var PageHeader_vue_1 = __importDefault(require("../../../src/templates/PageHeader.vue"));
+var article_header_1 = __importDefault(require("./templates/article-header"));
+var general_header_1 = __importDefault(require("./templates/general-header"));
+var video_header_1 = __importDefault(require("./templates/video-header"));
+var split_header_1 = __importDefault(require("./templates/split-header"));
+var navigation_page_1 = __importDefault(require("./templates/navigation-page"));
+exports["default"] = {
+    component: PageHeader_vue_1["default"],
+    title: 'Patterns/Page Header',
+    argTypes: {},
+    parameters: {
+        layout: 'fullscreen'
+    },
+    tags: ['!autodocs']
+};
+var createTemplate = function (templateString) { return function (args) { return ({
+    components: {
+        VsPageHeader: PageHeader_vue_1["default"],
+        VsHeroSection: HeroSection_vue_1["default"],
+        VsLinkListItem: LinkListItem_vue_1["default"],
+        VsLinkList: LinkList_vue_1["default"],
+        VsCol: grid_1.VsCol,
+        VsContainer: grid_1.VsContainer,
+        VsRow: grid_1.VsRow,
+        VsArticleDetails: ArticleDetails_vue_1["default"],
+        VsBreadcrumb: Breadcrumb_vue_1["default"],
+        VsBreadcrumbItem: BreadcrumbItem_vue_1["default"]
+    },
+    setup: function () {
+        return {
+            args: args
+        };
+    },
+    template: templateString
+}); }; };
+exports.VideoHeader = createTemplate(video_header_1["default"]).bind({});
+exports.VideoHeader.args = {
+    pageTitle: 'Scotland, <br/>it\'s good for the soul',
+    pageLede: 'Where history meets breathtaking beauty, and every visit feels like home.',
+    imgUrl: 'fixtures/hero/images/lavendar-fields.jpg',
+    imgCaption: 'Sunset at Lochan na h-Achlaise on Rannoch Moor',
+    imgCredit: 'VisitScotland / Kenny Lam',
+    playButtonLabel: 'Play video',
+    pauseButtonLabel: 'Pause video'
+};
+exports.SplitHeader = createTemplate(split_header_1["default"]).bind({});
+exports.SplitHeader.args = {
+    pageTitle: 'Join the journey to change',
+    pageLede: 'Scotland views business events as catalysts for social and economic transformation, addressing climate change, and advocating human rights.',
+    imgUrl: 'fixtures/hero/images/visitscotland_38462263949.jpg',
+    imgCaption: 'Paisley Abbey',
+    imgCredit: 'VisitScotland'
+};
+exports.NavigationPageHeader = createTemplate(navigation_page_1["default"]).bind({});
+exports.NavigationPageHeader.args = {
+    pageTitle: 'Things to see & do in Scotland',
+    pageLede: 'What unique and incredible things do you want to do in Scotland? Let the kids learn new stories in amazing attractions, take your friends to a new festival or spend some time relaxing at stunning nature spots.',
+    imgUrl: 'https://2f1a7f9478.visitscotland.net/binaries/content/gallery/visitscotland/cms-images/2025/04/16/paisley-abbey-header-new.jpg',
+    imgCaption: 'Paisley Abbey',
+    imgCredit: 'VisitScotland'
+};
+exports.ArticleHeader = createTemplate(article_header_1["default"]).bind({});
+exports.ArticleHeader.args = {
+    pageTitle: 'Highland Games in Scotland',
+    pageLede: 'Highland games have been a part of Scotland\'s culture for hundreds of years and are just as popular today as they\'ve ever been.',
+    imgUrl: 'https://2f1a7f9478.visitscotland.net/binaries/content/gallery/visitscotland/cms-images/2022/07/13/pipe-band-marching-at-the-ballater-highland-games.jpg?size=md',
+    imgCaption: 'Pipe band marching at Ballater Highland Games',
+    imgCredit: 'VisitScotland'
+};
+exports.GeneralHeader = createTemplate(general_header_1["default"]).bind({});
+exports.GeneralHeader.args = {
+    pageTitle: 'Improve your business',
+    pageLede: 'Deliver quality experiences with customer insights, accessibility and service excellence.'
+};

package/dist/stories/patterns/page-header/templates/article-header.js

@@ -0,0 +1,3 @@
+"use strict";
+exports.__esModule = true;
+exports["default"] = "\n    <VsPageHeader menu-type=\"b2c\">\n        <template #breadcrumb>\n            <VsContainer class=\"mt-075 mt-lg-200\">\n                <VsRow>\n                    <VsCol\n                        cols=\"10\"\n                        lg=\"8\"\n                    >\n                        <VsBreadcrumb>\n                            <VsBreadcrumbItem\n                                href=\"#\"\n                                text=\"Home\"\n                            />\n                            <VsBreadcrumbItem\n                                href=\"#\"\n                                text=\"Things to do\"\n                            />\n                            <VsBreadcrumbItem\n                                href=\"#\"\n                                text=\"Events\"\n                            />\n                            <VsBreadcrumbItem\n                                href=\"#\"\n                                text=\"Highland Games\"\n                                active\n                            />\n                        </VsBreadcrumb>\n                    </VsCol>\n                </VsRow>\n            </VsContainer>\n        </template>\n\n        <template #heroSection>\n            <VsHeroSection\n                :heading=\"args.pageTitle\"\n                :lede=\"args.pageLede\"\n                :img-src=\"args.imgUrl\"\n                :img-caption=\"args.imgCaption\"\n                :img-credit=\"args.imgCredit\"\n                inset\n            >\n                <template #hero-section-article-details>\n                    <VsArticleDetails\n                        article-author=\"Frank Smith\"\n                        article-publish-date=\"May 10, 2025\"\n                        article-read-time=\"2 minute read\"\n                    />\n                </template>\n            </VsHeroSection>\n        </template>\n    </VsPageHeader>\n";

package/dist/stories/patterns/page-header/templates/general-header.js

@@ -0,0 +1,3 @@
+"use strict";
+exports.__esModule = true;
+exports["default"] = "\n    <VsPageHeader>\n        <template v-slot:breadcrumb>\n            <VsContainer class=\"mt-075 mt-lg-200\">\n                <VsRow>\n                    <VsCol\n                        cols=\"10\"\n                        lg=\"8\"\n                    >\n                        <VsBreadcrumb>\n                            <VsBreadcrumbItem\n                                href=\"#\"\n                                text=\"Home\"\n                            />\n                            <VsBreadcrumbItem\n                                href=\"#\"\n                                text=\"Advice and Support\"\n                            />\n                            <VsBreadcrumbItem\n                                href=\"#\"\n                                text=\"Improve your business\"\n                                active\n                            />\n                        </VsBreadcrumb>\n                    </VsCol>\n                </VsRow>\n            </VsContainer>\n        </template>\n\n        <template v-slot:heroSection>\n            <VsHeroSection\n                :heading=\"args.pageTitle\"\n                :lede=\"args.pageLede\"\n            />\n        </template>\n    </VsPageHeader>\n";

package/dist/stories/patterns/page-header/templates/navigation-page.js

@@ -0,0 +1,3 @@
+"use strict";
+exports.__esModule = true;
+exports["default"] = "\n    <VsPageHeader menu-type=\"b2c\">\n        <template #breadcrumb>\n            <VsContainer class=\"mt-075 mt-lg-200\">\n                <VsRow>\n                    <VsCol\n                        cols=\"10\"\n                        lg=\"8\"\n                    >\n                        <VsBreadcrumb>\n                            <VsBreadcrumbItem\n                                href=\"#\"\n                                text=\"Home\"\n                            />\n                            <VsBreadcrumbItem\n                                href=\"#\"\n                                text=\"Things to do\"\n                                active\n                            />\n                        </VsBreadcrumb>\n                    </VsCol>\n                </VsRow>\n            </VsContainer>\n        </template>\n\n        <template #heroSection>\n            <VsHeroSection\n                :heading=\"args.pageTitle\"\n                :lede=\"args.pageLede\"\n                :img-src=\"args.imgUrl\"\n                :img-caption=\"args.imgCaption\"\n                :img-credit=\"args.imgCredit\"\n            />\n        </template>\n    </VsPageHeader>\n";

package/dist/stories/patterns/page-header/templates/split-header.js

@@ -0,0 +1,3 @@
+"use strict";
+exports.__esModule = true;
+exports["default"] = "\n    <VsPageHeader>\n        <template v-slot:heroSection>\n            <VsHeroSection\n                :heading=\"args.pageTitle\"\n                :lede=\"args.pageLede\"\n                :img-src=\"args.imgUrl\"\n                :img-caption=\"args.imgCaption\"\n                :img-credit=\"args.imgCredit\"\n                :split=\"true\"\n            />\n        </template>\n    </VsPageHeader>\n";

package/dist/stories/patterns/page-header/templates/video-header.js

@@ -0,0 +1,3 @@
+"use strict";
+exports.__esModule = true;
+exports["default"] = "\n    <VsPageHeader menu-type=\"b2c\">\n        <template v-slot:heroSection>\n            <VsHeroSection\n                :heading=\"args.pageTitle\"\n                :lede=\"args.pageLede\"\n                :img-src=\"args.imgUrl\"\n                :img-caption=\"args.imgCaption\"\n                :img-credit=\"args.imgCredit\"\n                video-src=\"fixtures/hero/video/lavendar-fields.mp4\"\n                :play-button-label=\"args.playButtonLabel\"\n                :pause-button-label=\"args.pauseButtonLabel\"\n            />\n        </template>\n    </VsPageHeader>\n";

package/dist/test/unit/helpers/axe-helper.js

@@ -0,0 +1,9 @@
+var configureAxe = require('jest-axe').configureAxe;
+var axe = configureAxe({
+    rules: {
+        region: {
+            enabled: false
+        }
+    }
+});
+module.exports = axe;

package/dist/test/unit/jest.conf.js

@@ -0,0 +1,38 @@
+var path = require('path');
+module.exports = {
+    rootDir: path.resolve(__dirname, '../../'),
+    roots: ['<rootDir>/src'],
+    testEnvironment: 'jsdom',
+    testEnvironmentOptions: {
+        customExportConditions: ['node', 'node-addons']
+    },
+    testMatch: ['**/?(*.)jest.spec.js?(x)'],
+    modulePaths: ['<rootDir>'],
+    moduleFileExtensions: ['js', 'json', 'vue', 'ts'],
+    moduleNameMapper: {
+        '^@components/(.*)$': '<rootDir>/src/components/$1',
+        '^@/(.*)$': '<rootDir>/src/$1',
+        '^@test/(.*)$': '<rootDir>/test/$1',
+        '\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': '<rootDir>/test/unit/mocks/fileMock.js',
+        '\\.svg$': '<rootDir>/test/unit/mocks/svgMock.js'
+    },
+    transform: {
+        '^.+\\.ts$': '<rootDir>/node_modules/ts-jest',
+        '^.+\\.js$': '<rootDir>/node_modules/babel-jest',
+        '.*\\.(vue)$': '<rootDir>/node_modules/@vue/vue3-jest'
+    },
+    transformIgnorePatterns: ['<rootDir>/node_modules/(?!(bootstrap-vue)/)'],
+    snapshotSerializers: ['<rootDir>/node_modules/jest-serializer-vue'],
+    coverageDirectory: '<rootDir>/test/unit/coverage',
+    collectCoverageFrom: [
+        '<rootDir>/src/**/*.{js,vue}',
+        '!<rootDir>/cypress/**/*.{js,vue}',
+        '!<rootDir>/**/*.spec.js',
+        '!<rootDir>/src/main.js',
+        '!<rootDir>/node_modules/**',
+        '!<rootDir>/src/system.js',
+        '!<rootDir>/src/system-components.js',
+        '!<rootDir>/docs/**/*',
+    ],
+    setupFilesAfterEnv: ['<rootDir>/test/unit/setup.js']
+};

package/dist/test/unit/mocks/fileMock.js

@@ -0,0 +1 @@
+module.exports = "test-file-stub";

package/dist/test/unit/mocks/svgMock.js

@@ -0,0 +1 @@
+module.exports = "\n<?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"no\"?>\n<svg\n  xmlns=\"http://www.w3.org/2000/svg\"\n  id=\"svg2\"\n  viewBox=\"0 0 161.64 223.98\"\n  style=\"fill:red;border:1px solid black\"\n>\n  <path\n    id=\"path4\"\n    d=\"m75.066 166.68c13.7 6.3 20.2 7.2 34.6 4.3l-13.6 9.7-6.2 36.6-1.7-37.6zm-72.6-86.5c-2.9 4.5-3.5 7.7-0.4 12.2l47.9 68.7-9.4 62.9h86.4v-53.7l23.8-48.1c3.1-6.2 3.7-10.2 3.7-23.9l-28.5 29.5-24.1-12.4-7.3 38.9c-7.7-35.9-24.7-57.8-51.4-69.1l7.6-14.6c30.8 16.5 42.2-11.7 37.3-14l-48-23c-4-1.9-6.4-1.8-8.85 2.1zm143.3-13.6-33.3 36.7c-2.1 2.3 11.6 16.3 13.7 14.5l35.1-31.5c3-2.7-13-22.5-15.5-19.7zm-55.8 16.1c-1.8 2.4 17.5 19.4 19.2 17.5l35.7-39.6c3.7-4.1-20.1-25.4-22.55-22.05zm1.4-67.6-17.4 29.2 15.7 8.2c4 2.1 5.2 8 1.5 21.4l28-40.7c2.9-4.4-25.3-22.3-27.8-18.1zm-32.7-14.2-15.9 28.7 26.7 12.6 16.5-27.3c2.7-4.5-24.8-18.5-27.3-14z\"\n  />\n</svg>\n";

package/dist/test/unit/setup.js

@@ -0,0 +1,38 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var test_utils_1 = require("@vue/test-utils");
+var mitt_1 = __importDefault(require("mitt"));
+var testing_1 = require("@pinia/testing");
+var jest_axe_1 = require("jest-axe");
+// used for Axe accessibility testing
+expect.extend(jest_axe_1.toHaveNoViolations);
+// used for testing events
+var testEmitter = (0, mitt_1["default"])();
+test_utils_1.config.global.mocks = {
+    emitter: testEmitter
+};
+test_utils_1.config.global.plugins = [
+    (0, testing_1.createTestingPinia)(),
+];
+window.URL.createObjectURL = function () { };
+// test mocks
+jest.mock('mapbox-gl/dist/mapbox-gl', function () { return ({
+    GeolocateControl: jest.fn(),
+    Map: jest.fn(function () { return ({
+        addControl: jest.fn(),
+        on: jest.fn(),
+        remove: jest.fn(),
+        resize: jest.fn(),
+        scrollZoom: {
+            disable: jest.fn()
+        }
+    }); }),
+    FullscreenControl: jest.fn(),
+    NavigationControl: jest.fn()
+}); });
+jest.mock('vue-youtube-vue-3', function () { return ({
+    VueYoutube: jest.fn(function () { return ({}); })
+}); });

package/dist/vite.config.mjs

@@ -0,0 +1,138 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var vite_1 = require("vite");
+var plugin_vue_1 = __importDefault(require("@vitejs/plugin-vue"));
+var path_1 = __importDefault(require("path"));
+var vite_plugin_dts_1 = __importDefault(require("vite-plugin-dts"));
+var plugin_replace_1 = __importDefault(require("@rollup/plugin-replace"));
+exports["default"] = (0, vite_1.defineConfig)(function (_a) {
+    var mode = _a.mode;
+    var env = (0, vite_1.loadEnv)(mode, process.cwd(), '');
+    return {
+        define: {
+            'process.env': JSON.stringify({
+                ICON_KIT_TOKEN: env.ICON_KIT_TOKEN,
+                ICON_API_TOKEN: env.ICON_API_TOKEN,
+                RECAPTCHA_TOKEN: env.RECAPTCHA_TOKEN,
+                EVENTS_API_URL: env.EVENTS_API_URL,
+                CLUDO_API_KEY: env.CLUDO_API_KEY,
+                CLUDO_CUSTOMER_ID: env.CLUDO_CUSTOMER_ID,
+                CLUDO_ENGINE_ID: env.CLUDO_ENGINE_ID,
+                GOOGLE_MAPS_API_KEY: env.GOOGLE_MAPS_API_KEY
+            }),
+            'process.versions': process.versions,
+            'process.platform': "\"".concat(process.platform, "\"")
+        },
+        css: {
+            preprocessorOptions: {
+                scss: {
+                    additionalData: "\n                        @import \"@/styles/resources.scss\";\n                    ",
+                    silenceDeprecations: ['mixed-decls', 'color-functions', 'global-builtin', 'import', 'legacy-js-api']
+                }
+            }
+        },
+        resolve: {
+            alias: {
+                '@': path_1["default"].resolve(__dirname, './src'),
+                find: '@vue/runtime-core',
+                replacement: '@vue/runtime-core/dist/runtime-core.esm-bundler.js'
+            },
+            dedupe: [
+                'vue',
+            ]
+        },
+        plugins: [
+            (0, plugin_vue_1["default"])({
+                template: {
+                    compilerOptions: {
+                        /**
+                         * Custom Google Maps Places UI Kit components
+                         * listed here to stop errors in console.
+                         */
+                        isCustomElement: function (tag) { return [
+                            'gmp-map',
+                            'gmp-advanced-marker',
+                            'gmp-place-search',
+                            'gmp-place-search-all-content',
+                            'gmp-place-text-search-request',
+                            'gmp-place-nearby-search-request',
+                            'gmp-place-details',
+                            'gmp-place-details-place-request',
+                            'gmp-place-all-content',
+                            'gmp-place-content-config',
+                            'gmp-place-address',
+                            'gmp-place-rating',
+                            'gmp-place-type',
+                            'gmp-place-price',
+                            'gmp-place-accessible-entrance-icon',
+                            'gmp-place-opening-hours',
+                            'gmp-place-website',
+                            'gmp-place-phone-number',
+                            'gmp-place-summary',
+                            'gmp-place-type-specific-highlights',
+                            'gmp-place-reviews',
+                            'gmp-place-feature-list',
+                            'gmp-place-media',
+                            'gmp-place-attribution',
+                        ].includes(tag); }
+                    }
+                }
+            }),
+            (0, vite_plugin_dts_1["default"])({
+                outDir: './dist/components',
+                include: [
+                    './src/components',
+                    './src/custom-components',
+                    './src/directives',
+                    './src/mixins',
+                    './src/stores',
+                    './src/styles',
+                    './src/tokens',
+                    './src/types',
+                    './src/utils',
+                    './src/component-entry.ts',
+                    './src/constants.ts',
+                ],
+                exclude: [
+                    './src/components/**/__tests__/**',
+                    './src/stores/__mocks__/**',
+                    './src/utils/__mocks__/**',
+                ]
+            }),
+            (0, plugin_replace_1["default"])({
+                'process.getuid': '() => -1',
+                preventAssignment: true
+            }),
+        ],
+        build: {
+            cssCodeSplit: false,
+            lib: {
+                entry: {
+                    'vs-component-library': path_1["default"].resolve(__dirname, 'src/component-entry.ts'),
+                    'vs-component-library-maps': path_1["default"].resolve(__dirname, 'src/components/map-index.ts'),
+                    fonts: path_1["default"].resolve(__dirname, 'src/assets/fonts/fonts.scss'),
+                    icons: path_1["default"].resolve(__dirname, 'src/styles/third-party/_font-awesome.scss')
+                },
+                name: 'vs-component-library',
+                fileName: '[name]'
+            },
+            rollupOptions: {
+                external: [
+                    'vue',
+                    'pinia',
+                ],
+                output: {
+                    dir: 'dist/components',
+                    globals: {
+                        vue: 'Vue',
+                        'bootstrap-vue-next': 'BootstrapVueNext',
+                        pinia: 'Pinia'
+                    }
+                }
+            }
+        }
+    };
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@visitscotland/component-library",
-  "version": "5.76.0",
+  "version": "5.78.0",
   "description": "VisitScotland Component Library",
   "author": "VisitScotland",
   "homepage": "https://github.com/visitscotland/vs-component-library#readme",
@@ -71,10 +71,10 @@
     "@rollup/plugin-replace": "^6.0.2",
     "@semantic-release/exec": "^7.1.0",
     "@semantic-release/npm": "^13.1.5",
-    "@storybook/addon-a11y": "10.5.3",
-    "@storybook/addon-docs": "10.5.3",
-    "@storybook/addon-links": "10.5.5",
-    "@storybook/vue3-vite": "10.5.2",
+    "@storybook/addon-a11y": "10.5.6",
+    "@storybook/addon-docs": "10.5.7",
+    "@storybook/addon-links": "10.5.7",
+    "@storybook/vue3-vite": "10.5.6",
     "@types/google.maps": "^3.64.0",
     "@types/node": "^26.0.1",
     "@types/react": "^19.2.16",
@@ -95,7 +95,7 @@
     "globals": "^17.6.0",
     "husky": "^9.1.7",
     "jest": "^30.4.2",
-    "jest-axe": "^10.0.0",
+    "jest-axe": "^11.0.0",
     "jest-environment-jsdom": "^30.4.1",
     "jest-serializer-vue": "^3.1.0",
     "jiti": "^2.7.0",
@@ -189,4 +189,4 @@
     "tar": "^7.5.13"
   },
   "packageManager": "yarn@4.16.0"
-}
+}