@visitscotland/component-library 5.76.1 → 5.78.0

package/dist/stories/components/Accordion.stories.js

@@ -0,0 +1,98 @@
+"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.NoJavascript = exports.OverrideHeadingLevel = exports.ColourBadge = exports.Responsive = exports.WithIcon = exports.Default = void 0;
+var Accordion_vue_1 = __importDefault(require("@/components/accordion/Accordion.vue"));
+var AccordionItem_vue_1 = __importDefault(require("@/components/accordion/components/AccordionItem.vue"));
+var AccordionToggle_vue_1 = __importDefault(require("@/components/accordion/components/AccordionToggle.vue"));
+var Icon_vue_1 = __importDefault(require("@/components/icon/Icon.vue"));
+var Body_vue_1 = __importDefault(require("@/components/body/Body.vue"));
+exports["default"] = {
+    component: Accordion_vue_1["default"],
+    title: 'Components/Layout & content structure/Accordion',
+    argTypes: {
+        breakPoint: {
+            options: [
+                '',
+                'xs',
+                'sm',
+                'md',
+                'lg',
+                'xl',
+                'xxl',
+            ],
+            control: {
+                type: 'select'
+            }
+        }
+    }
+};
+var Template = function (args) { return ({
+    components: {
+        VsAccordion: Accordion_vue_1["default"],
+        VsAccordionItem: AccordionItem_vue_1["default"],
+        VsAccordionToggle: AccordionToggle_vue_1["default"],
+        VsIcon: Icon_vue_1["default"],
+        VsBody: Body_vue_1["default"]
+    },
+    setup: function () {
+        return {
+            args: args
+        };
+    },
+    template: "\n        <div\n            :class=\"args.jsDisabled ? 'no-js' : ''\"\n        >\n            <VsAccordion\n                v-bind=\"args\"\n                :break-point=\"args.breakPoint\"\n            >\n                <VsAccordionItem\n                    v-for=\"accordionItem in args.accordionItems\"\n                    :open-by-default=\"accordionItem.openByDefault\"\n                    :variant=\"accordionItem.variant\"\n                    :control-id=\"accordionItem.controlId\"\n                    :colour-badge=\"accordionItem.colourBadge\"\n                    :heading-level=\"args.headingLevel\"\n                >\n                    <template v-slot:title>\n                        <VsIcon\n                            v-if=\"accordionItem.icon\"\n                            :icon=\"accordionItem.icon\"\n                            size=\"xs\"\n                            class=\"me-025 fa-fw\"\n                        />\n                        {{ accordionItem.title }}\n                    </template>\n\n                    <VsBody class=\"p-075\">\n                        <div v-html=\"accordionItem.content\" />\n                    </VsBody>\n                </VsAccordionItem>\n            </VsAccordion>\n        </div>\n    "
+}); };
+var base = {
+    accordionItems: [
+        {
+            openByDefault: true,
+            controlId: 'accordion_item_1',
+            title: 'Train',
+            content: '<p><a href=https://www.scotrail.co.uk/plan-your-journey/stations-and-facilities/pth" target="_blank" rel="noopener noreferrer" title="">Perth Railway Station<!----></a>&nbsp;offers direct links&nbsp;from&nbsp;<a href="https://www.visitscotland.com/destinations-maps/edinburgh/" target="_self" title="Edinburgh">Edinburgh<!----></a>&nbsp;and&nbsp;<a href="/destinations-maps/glasgow/" target="_self" title="Glasgow">Glasgow<!----></a>&nbsp;and neighbouring towns. A sleeper service direct from London is also available.</p>'
+        },
+        {
+            controlId: 'accordion_item_2',
+            title: 'Driving',
+            content: '<p>The M90 from Edinburgh and the M80, M9 and A9 from Glasgow and Stirling offer the quickest routes into the Perthshire region.</p> <p><a href="https://www.perthcity.co.uk/section/explore-perthshire/travel-to-and-in-perthshire" target="_blank" rel="noopener noreferrer">Travel to Perth</a></p>'
+        },
+        {
+            controlId: 'accordion_item_3',
+            title: 'Flying',
+            content: '<p>Perth\'s central location makes reaching it from the rest of the UK and beyond pretty simple. <a href="https://www.visitscotland.com/info/transport/glasgow-airport-gla-p267891" target="_self">Glasgow Airport</a> is located under an hour and a half\'s drive from Perthshire while <a href="https://www.visitscotland.com/info/transport/edinburgh-airport-p2534181" target="_self">Edinburgh </a>is just an hour and <a href="https://www.hial.co.uk/dundee-airport" target="_blank" rel="noopener noreferrer">Dundee Airport</a> is 30 minutes away. </p><p>Travel time to Perthshire from <a href="https://www.aberdeenairport.com/" target="_blank" rel="noopener noreferrer">Aberdeen Airport</a> is around two hours.</p>'
+        },
+    ],
+    jsDisabled: false
+};
+exports.Default = Template.bind({});
+exports.Default.args = base;
+exports.WithIcon = Template.bind({});
+exports.WithIcon.args = __assign(__assign({}, base), { accordionItems: [
+        __assign(__assign({}, base.accordionItems[0]), { icon: 'fa-regular fa-person-walking' }),
+        __assign(__assign({}, base.accordionItems[1]), { icon: 'fa-regular fa-car-side' }),
+        __assign(__assign({}, base.accordionItems[2]), { icon: 'fa-regular fa-person-biking' }),
+    ] });
+exports.Responsive = Template.bind({});
+exports.Responsive.args = __assign(__assign({}, base), { breakPoint: 'md' });
+exports.ColourBadge = Template.bind({});
+exports.ColourBadge.args = __assign(__assign({}, base), { accordionItems: [
+        __assign(__assign({}, base.accordionItems[0]), { openByDefault: false, colourBadge: '#04C852' }),
+        __assign(__assign({}, base.accordionItems[1]), { colourBadge: '#122B80' }),
+        __assign(__assign({}, base.accordionItems[2]), { colourBadge: '#E71845' }),
+    ] });
+exports.OverrideHeadingLevel = Template.bind({});
+exports.OverrideHeadingLevel.args = __assign(__assign({}, base), { headingLevel: 3 });
+exports.NoJavascript = Template.bind({});
+exports.NoJavascript.args = __assign(__assign({}, base), { jsDisabled: true });

package/dist/stories/components/Address.stories.js

@@ -0,0 +1,32 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+exports.Default = void 0;
+var Address_vue_1 = __importDefault(require("@/components/address/Address.vue"));
+exports["default"] = {
+    component: Address_vue_1["default"],
+    title: 'Components/Layout & content structure/Address',
+    argTypes: {}
+};
+var Template = function (args) { return ({
+    components: {
+        VsAddress: Address_vue_1["default"]
+    },
+    setup: function () {
+        return {
+            args: args
+        };
+    },
+    template: "\n        <VsAddress v-bind=\"args\">\n            <template v-if=\"".concat('default' in args, "\" v-slot>").concat(args["default"], "</template>\n        </VsAddress>\n    ")
+}); };
+var base = {
+    "default": '<span>Edinburgh Castle,</span>'
+        + '<span>Castle Hill,</span>'
+        + '<span>Edinburgh,</span>'
+        + '<span>City of Edinburgh,</span>'
+        + '<span>EH1 2NG</span>'
+};
+exports.Default = Template.bind({});
+exports.Default.args = base;

package/dist/stories/components/Alert.stories.js

@@ -0,0 +1,28 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+exports.Default = void 0;
+var Alert_vue_1 = __importDefault(require("@/components/alert/Alert.vue"));
+exports["default"] = {
+    component: Alert_vue_1["default"],
+    title: 'Components/Feedback & status/Alert',
+    argTypes: {}
+};
+var Template = function (args) { return ({
+    components: {
+        VsAlert: Alert_vue_1["default"]
+    },
+    setup: function () {
+        return {
+            args: args
+        };
+    },
+    template: "\n        <VsAlert v-bind=\"args\">\n            <template v-if=\"".concat('default' in args, "\" v-slot>").concat(args["default"], "</template>\n        </VsAlert>\n    ")
+}); };
+var base = {
+    "default": 'This guide is only for visitors living outside the UK.'
+};
+exports.Default = Template.bind({});
+exports.Default.args = base;

package/dist/stories/components/Article.stories.js

@@ -0,0 +1,143 @@
+"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.NoJavascript = exports.NoCookies = exports.BusinessSupportHubWithSubheaders = exports.BusinessSupportHubNoSidebar = exports.BusinessSupportHub = exports.SidebarVideo = exports.SidebarRightAligned = exports.CoverVideo = exports.CoverImage = exports.Default = void 0;
+var Article_vue_1 = __importDefault(require("@/components/article/Article.vue"));
+var ArticleSidebar_vue_1 = __importDefault(require("@/components/article/components/ArticleSidebar.vue"));
+var ArticleSection_vue_1 = __importDefault(require("@/components/article/components/ArticleSection.vue"));
+var Heading_vue_1 = __importDefault(require("@/components/heading/Heading.vue"));
+var ImageWithCaption_vue_1 = __importDefault(require("@/components/image-with-caption/ImageWithCaption.vue"));
+var Img_vue_1 = __importDefault(require("@/components/img/Img.vue"));
+var Caption_vue_1 = __importDefault(require("@/components/caption/Caption.vue"));
+var Quote_vue_1 = __importDefault(require("@/components/quote/Quote.vue"));
+var Modal_vue_1 = __importDefault(require("@/components/modal/Modal.vue"));
+var Video_vue_1 = __importDefault(require("@/components/video/Video.vue"));
+var VideoCaption_vue_1 = __importDefault(require("@/components/video-caption/VideoCaption.vue"));
+var grid_1 = require("@/components/grid");
+exports["default"] = {
+    component: Article_vue_1["default"],
+    title: 'Components/To be reviewed/Article',
+    argTypes: {
+        vsArticleIntro: {
+            control: {
+                type: 'text'
+            }
+        },
+        sidebarAlign: {
+            options: [
+                'left',
+                'right',
+            ],
+            control: {
+                type: 'radio'
+            }
+        }
+    }
+};
+var Template = function (args) { return ({
+    components: {
+        VsArticle: Article_vue_1["default"],
+        VsArticleSidebar: ArticleSidebar_vue_1["default"],
+        VsArticleSection: ArticleSection_vue_1["default"],
+        VsHeading: Heading_vue_1["default"],
+        VsImageWithCaption: ImageWithCaption_vue_1["default"],
+        VsImg: Img_vue_1["default"],
+        VsCaption: Caption_vue_1["default"],
+        VsQuote: Quote_vue_1["default"],
+        VsModal: Modal_vue_1["default"],
+        VsVideo: Video_vue_1["default"],
+        VsVideoCaption: VideoCaption_vue_1["default"],
+        VsCol: grid_1.VsCol,
+        VsRow: grid_1.VsRow
+    },
+    setup: function () {
+        return {
+            args: args
+        };
+    },
+    template: "\n        <div\n            :class=\"args.jsDisabled ? 'no-js' : ''\"\n        >\n            <VsArticle v-bind=\"args\">\n                <template\n                    v-if=\"args['vs-article-img']\"\n                    v-slot:vs-article-img\n                >\n                    <VsImageWithCaption\n                        :alt-text=\"args['vs-article-img'].alt\"\n                        :image-src=\"args['vs-article-img'].src\"\n                    >\n                        <template v-slot:img-caption>\n                            <VsCaption>\n                                <template v-slot:caption>{{ args['vs-article-img'].caption }}</template>\n                                <template v-slot:credit>{{ args['vs-article-img'].credit }}</template>\n                            </VsCaption>\n                        </template>\n                    </VsImageWithCaption>\n                </template>\n\n                <template\n                    v-if=\"args['vs-article-video']\"\n                    v-slot:vs-article-img\n                >\n                    <VsVideo \n                        :video-id=\"args['vs-article-video'].videoId\"\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                    ></VsVideo>\n                    <VsVideoCaption \n                        :videoId=\"args['vs-article-video'].videoId\"\n                    >\n                        <template v-slot:video-title>\n                            {{ args['vs-article-video'].videoTitle }}\n                        </template>\n                    </VsVideoCaption>\n                </template>\n\n                <template\n                    v-if=\"args['vs-article-intro']\"\n                    v-slot:vs-article-intro\n                >\n                    {{ args['vs-article-intro'] }}\n                </template>\n\n                <VsArticleSection\n                    :sidebar-align=\"args.sidebarAlign\"\n                    :businessSupport=\"args.businessSupport\"\n                >\n                    <template\n                        v-if=\"args.sidebarImg || args.sidebarQuote || args.tableOfContents\"\n                        v-slot:article-sidebar\n                    >\n                        <VsArticleSidebar :sidebar-align=\"args.sidebarAlign\">\n                            <template\n                                v-if=\"args.sidebarImg\"\n                                v-slot:vs-article-sidebar-img\n                            >\n                                <VsImageWithCaption\n                                    v-if=\"!args['sidebarImg'].isVideo\"\n                                    :alt-text=\"args['sidebarImg'].alt\"\n                                    :image-src=\"args['sidebarImg'].imageSrc\"\n                                >\n                                    <template v-slot:img-caption>\n                                        <VsCaption>\n                                            <template v-slot:caption>{{ args['sidebarImg'].caption }}</template>\n                                            <template v-slot:credit>{{ args['sidebarImg'].credit }}</template>\n                                        </VsCaption>\n                                    </template>\n                                </VsImageWithCaption>\n\n                                <VsImageWithCaption\n                                    v-if=\"args['sidebarImg'].isVideo\"\n                                    :alt-text=\"args['sidebarImg'].alt\"\n                                    :image-src=\"args['sidebarImg'].imageSrc\"\n                                    :is-video=\"args['sidebarImg'].isVideo\"\n                                    :video-id=\"args['sidebarImg'].videoId\"\n                                    :video-title=\"args['sidebarImg'].videoTitle\"\n                                    :small-play-button=\"args['sidebarImg'].smallPlayButton\"\n                                    :play-button-text=\"args['sidebarImg'].playButtonText\"\n                                    :show-toggle=\"args['sidebarImg'].showToggle\"\n                                    :toggle-button-text=\"args['sidebarImg'].toggleButtonText\"\n                                    :error-message=\"args['sidebarImg'].errorMessage\"\n                                    :cookie-link-text=\"args['sidebarImg'].cookieLinkText\"\n                                    :no-js-message=\"args['sidebarImg'].noJsMessage\"\n                                    :no-cookies-message=\"args['sidebarImg'].noCookiesMessage\"\n                                >\n\n                                    <template v-slot:video-title>\n                                        {{ args['sidebarImg'].videoTitle}}\n                                    </template>\n                                </VsImageWithCaption>\n                            </template>\n\n                            <template\n                                v-if=\"args.sidebarQuote\"\n                                v-slot:vs-article-sidebar-quote>\n                                <VsQuote :with-border=\"args.businessSupport\">\n                                    <template v-slot:quote-content>\n                                        <p>{{ args.sidebarQuote.quote }}</p>\n                                    </template>\n                                    <template v-slot:quote-author-name>\n                                        {{ args.sidebarQuote.authorName }}\n                                    </template>\n                                    <template v-slot:quote-author-title>\n                                        {{ args.sidebarQuote.authorTitle }}\n                                    </template>\n                                </VsQuote>\n                            </template>\n                        </VsArticleSidebar>\n                    </template>\n\n                    <template v-if=\"args.hasSubheaders\">\n                        ".concat(args.hasHeadersContent, "\n                    </template>\n                    <template v-else>\n                        ").concat(args.defaultContent, "\n                    </template>\n\n                </VsArticleSection>\n            </VsArticle>\n\n            <VsModal\n                modal-id='c05sg3G4oA4' \n                close-btn-text='Close' \n                :is-video-modal='true'\n            >\n                <VsRow>\n                    <VsCol cols=\"12\">\n                        <VsVideo\n                            video-id=\"c05sg3G4oA4\"\n                            video-title=\"Test Video\"\n                            class=\"mb-200\"\n                            cookie-btn-text=\"Manage cookies\"\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                        />\n                    </VsCol>\n                </VsRow>\n            </VsModal>\n        </div>\n    ")
+}); };
+var base = {
+    title: 'Experiencing Ben Nevis',
+    'vs-article-intro': 'Scotland\'s landscape is scattered with Munros and mist-shrouded hills...',
+    sidebarAlign: 'left',
+    sidebarImg: {
+        imageSrc: 'fixtures/article/images/mountain-stream.jpg',
+        alt: 'Mountain stream',
+        useLazyLoading: true,
+        caption: 'Mountain stream',
+        credit: '© CutMedia / Chris Rowland'
+    },
+    sidebarQuote: {
+        authorName: 'Penny',
+        authorTitle: 'Visitor Services Advisor at Fort William iCentre',
+        quote: 'Scotland\'s largest mountain was once a massive active volcano which exploded and collapsed inwards on itself millions of years ago.'
+    },
+    defaultContent: "\n        <p>Ben Nevis is the king of them all. In the north west <a href='#'>Highlands</a>, near the town of <a href='#'>Fort William</a> and part of the <a href='#'>Grampian Mountain</a> range, the famous peak attracts 125k walkers a year. Whether you're an avid ambler or you just love beautiful landscapes, bagging 'the Ben' is likely to feature near the top of your Scottish bucket list.</p>\n        <p>An ancient giant of the land, Ben Nevis was once a massive active volcano which exploded and collapsed inwards on itself millions of years ago. At the summit, there is evidence of an explosion in the form of light-coloured granite. The name itself has two translations from the ancient Gaelic language, meaning 'mountain with its head in the clouds', thanks to its iconic mist-shrouded peak, or it can also mean 'venomous mountain' - you can decide which translation you prefer after the climb!</p>\n        <p>Read on for an overview of walking routes up the mountain, or visit <a href='#'>Walk Highlands</a> for detailed maps, difficulty levels and walking advice.</p>\n        <p>Remember it's never 'easy' to bag a Scottish Munro or Corbett. You'll need a good amount of hillwalking experience, fitness, hill craft and Navigation skills using a map and compass, before attempting any Scottish mountains, even more so in winter.</p>\n    ",
+    hasHeadersContent: "\n        <vs-heading level=\"3\">The mountain</vs-heading>\n        <p>Ben Nevis is the king of them all. In the north west <a href='#'>Highlands</a>, near the town of <a href='#'>Fort William</a> and part of the <a href='#'>Grampian Mountain</a> range, the famous peak attracts 125k walkers a year. Whether you're an avid ambler or you just love beautiful landscapes, bagging 'the Ben' is likely to feature near the top of your Scottish bucket list.</p>\n        <p>An ancient giant of the land, Ben Nevis was once a massive active volcano which exploded and collapsed inwards on itself millions of years ago. At the summit, there is evidence of an explosion in the form of light-coloured granite. The name itself has two translations from the ancient Gaelic language, meaning 'mountain with its head in the clouds', thanks to its iconic mist-shrouded peak, or it can also mean 'venomous mountain' - you can decide which translation you prefer after the climb!</p>\n        <p>Read on for an overview of walking routes up the mountain, or visit <a href='#'>Walk Highlands</a> for detailed maps, difficulty levels and walking advice.</p>\n        <vs-heading level=\"3\">Experience</vs-heading>\n        <p>Remember it's never 'easy' to bag a Scottish Munro or Corbett. You'll need a good amount of hillwalking experience, fitness, hill craft and Navigation skills using a map and compass, before attempting any Scottish mountains, even more so in winter.</p>\n    ",
+    jsDisabled: false,
+    headingLevel: 2
+};
+exports.Default = Template.bind();
+exports.Default.args = base;
+exports.CoverImage = Template.bind();
+exports.CoverImage.args = __assign(__assign({}, base), { 'vs-article-img': {
+        src: 'fixtures/article/images/corpach-sea-lock-and-lighthouse.jpg',
+        alt: 'Ben Nevis',
+        useLazyLoading: true,
+        caption: 'Corpach Sea Lock and Lighthouse in the Shadow of Ben Nevis, Loch Eil by Fort William',
+        credit: '© VisitScotland / Kenny Lam'
+    } });
+exports.CoverVideo = Template.bind();
+exports.CoverVideo.args = __assign(__assign({}, base), { 'vs-article-video': {
+        videoId: 'c05sg3G4oA4',
+        videoTitle: 'Only in Scotland'
+    } });
+exports.SidebarRightAligned = Template.bind();
+exports.SidebarRightAligned.args = __assign(__assign({}, base), { sidebarAlign: 'right' });
+exports.SidebarVideo = Template.bind();
+exports.SidebarVideo.args = __assign(__assign({}, base), { sidebarImg: {
+        isVideo: true,
+        videoId: 'c05sg3G4oA4',
+        videoTitle: 'Only in Scotland',
+        smallPlayButton: true,
+        showToggle: false,
+        playButtonText: 'Play',
+        toggleButtonText: 'Toggle image caption',
+        errorMessage: 'Sorry, something has gone wrong, Please try again later',
+        cookieLinkText: 'Manage cookies',
+        noJsMessage: 'You need JavaScript enabled to see this video',
+        noCookiesMessage: 'You need cookies enabled to see this video',
+        imageSrc: 'fixtures/article/images/corpach-sea-lock-and-lighthouse.jpg'
+    } });
+exports.BusinessSupportHub = Template.bind();
+exports.BusinessSupportHub.args = __assign(__assign({}, base), { sidebarAlign: 'right', businessSupport: true });
+exports.BusinessSupportHubNoSidebar = Template.bind();
+exports.BusinessSupportHubNoSidebar.args = __assign(__assign(__assign({}, exports.CoverImage.args), exports.BusinessSupportHub.args), { sidebarImg: '', sidebarQuote: '' });
+exports.BusinessSupportHubWithSubheaders = Template.bind();
+exports.BusinessSupportHubWithSubheaders.args = __assign(__assign({}, base), { sidebarAlign: 'right', businessSupport: true, 'vs-article-intro': null, hasSubheaders: true });
+exports.NoCookies = Template.bind();
+exports.NoCookies.args = __assign(__assign(__assign({}, base), exports.CoverVideo.args), exports.SidebarVideo.args);
+exports.NoCookies.decorators = [
+    function () {
+        window.bypassCookiesRequired = false;
+        return {
+            template: "\n                <story/>\n            "
+        };
+    },
+];
+exports.NoJavascript = Template.bind();
+exports.NoJavascript.args = __assign(__assign(__assign(__assign({}, base), exports.CoverVideo.args), exports.SidebarVideo.args), { jsDisabled: true });

package/dist/stories/components/ArticleDetails.stories.js

@@ -0,0 +1,64 @@
+"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.StackMobile = exports.NoReadTime = exports.WithAuthor = exports.WithDate = exports.Default = void 0;
+var ArticleDetails_vue_1 = __importDefault(require("@/components/article-details/ArticleDetails.vue"));
+exports["default"] = {
+    component: ArticleDetails_vue_1["default"],
+    title: 'Components/Layout & content structure/ArticleDetails',
+    argTypes: {
+        articlePublishDate: {
+            control: {
+                type: 'text'
+            }
+        }
+    }
+};
+var Template = function (args) { return ({
+    components: {
+        VsArticleDetails: ArticleDetails_vue_1["default"]
+    },
+    setup: function () {
+        return {
+            args: args
+        };
+    },
+    template: "\n        <VsArticleDetails v-bind=\"args\" />\n    "
+}); };
+var base = {
+    articleReadTime: '2 minute read'
+};
+var dateAuthor = {
+    articlePublishDate: '24 January 2025',
+    articleAuthor: 'Sarah Henderson'
+};
+exports.Default = Template.bind({});
+exports.Default.args = base;
+exports.WithDate = Template.bind({});
+exports.WithDate.args = __assign(__assign({}, base), { articlePublishDate: '24 January 2025' });
+exports.WithAuthor = Template.bind({});
+exports.WithAuthor.args = __assign(__assign({}, base), dateAuthor);
+exports.NoReadTime = Template.bind({});
+exports.NoReadTime.args = {
+    articlePublishDate: '24 January 2025'
+};
+exports.StackMobile = Template.bind({});
+exports.StackMobile.args = __assign(__assign({}, base), dateAuthor);
+exports.StackMobile.globals = {
+    viewport: {
+        value: 'mobile2'
+    }
+};

package/dist/stories/components/BackToTop.stories.js

@@ -0,0 +1,40 @@
+"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.NoJavascript = exports.Default = void 0;
+var BackToTop_vue_1 = __importDefault(require("@/components/back-to-top/BackToTop.vue"));
+exports["default"] = {
+    component: BackToTop_vue_1["default"],
+    title: 'Components/Navigation/BackToTop'
+};
+var Template = function (args) { return ({
+    components: {
+        VsBackToTop: BackToTop_vue_1["default"]
+    },
+    setup: function () {
+        return {
+            args: args
+        };
+    },
+    template: "\n        <div :class=\"args.jsDisabled ? 'no-js' : ''\">\n            <div>\n                <p>Scroll down the to see the back to top button.</p>\n                <div style=\"height:2000px\"></div>\n                \n                <VsBackToTop v-bind=\"args\" />\n            </div>\n        </div>\n    "
+}); };
+var base = {
+    'button-text': 'Back to top'
+};
+exports.Default = Template.bind();
+exports.Default.args = base;
+exports.NoJavascript = Template.bind();
+exports.NoJavascript.args = __assign(__assign({}, base), { jsDisabled: true });

package/dist/stories/components/Backdrop.stories.js

@@ -0,0 +1,28 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+exports.Default = void 0;
+var Backdrop_vue_1 = __importDefault(require("@/components/backdrop/Backdrop.vue"));
+var Button_vue_1 = __importDefault(require("@/components/button/Button.vue"));
+var vue_1 = require("vue");
+exports["default"] = {
+    component: Backdrop_vue_1["default"],
+    title: 'Components/Overlays & popups/Backdrop'
+};
+var Template = function () { return ({
+    components: {
+        VsBackdrop: Backdrop_vue_1["default"],
+        VsButton: Button_vue_1["default"]
+    },
+    setup: function () {
+        var show = (0, vue_1.ref)(false);
+        return {
+            show: show
+        };
+    },
+    template: "\n        <div style=\"position: relative;\">\n            <VsButton @click=\"show = true\">\n                Open Backdrop\n            </VsButton>\n\n            <VsBackdrop \n                :show=\"show\" \n                @click=\"show = false\" \n            />\n\n            <div \n                v-if=\"show\" \n                class=\"p-100 bg-white\" \n                style=\"z-index:1050; position: absolute; top: 50px; left: 50px; width: 300px;\"\n            >\n                <p class=\"mb-100\">Content over backdrop</p>\n                <VsButton @click=\"show = false\">\n                    Close\n                </VsButton>\n            </div>\n        </div>\n    "
+}); };
+exports.Default = Template.bind({});
+exports.Default.args = {};

package/dist/stories/components/Badge.stories.js

@@ -0,0 +1,47 @@
+"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.Highlight = exports.Information = exports.Subtle = exports.Default = void 0;
+var Badge_vue_1 = __importDefault(require("@/components/badge/Badge.vue"));
+exports["default"] = {
+    component: Badge_vue_1["default"],
+    title: 'Components/Feedback & status/Badge'
+};
+var Template = function (args) { return ({
+    components: {
+        VsBadge: Badge_vue_1["default"]
+    },
+    setup: function () {
+        return {
+            args: args
+        };
+    },
+    template: "\n        <VsBadge v-bind=\"args\" v-for=\"badge in args.badges\">\n            {{ badge }}\n        </VsBadge>\n    "
+}); };
+var base = {
+    badges: [
+        'Read time',
+        'Content type',
+    ]
+};
+exports.Default = Template.bind();
+exports.Default.args = base;
+exports.Subtle = Template.bind({});
+exports.Subtle.args = __assign(__assign({}, base), { variant: 'subtle' });
+exports.Information = Template.bind({});
+exports.Information.args = __assign(__assign({}, base), { variant: 'information' });
+exports.Highlight = Template.bind({});
+exports.Highlight.args = __assign(__assign({}, base), { variant: 'highlight' });

package/dist/stories/components/Banner.stories.js

@@ -0,0 +1,37 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+exports.Default = void 0;
+var Banner_vue_1 = __importDefault(require("@/components/banner/Banner.vue"));
+var Link_vue_1 = __importDefault(require("@/components/link/Link.vue"));
+exports["default"] = {
+    component: Banner_vue_1["default"],
+    title: 'Components/Feedback & status/Banner',
+    argTypes: {
+        onClick: {
+            action: 'hideBanner'
+        }
+    }
+};
+var Template = function (args) { return ({
+    components: {
+        VsBanner: Banner_vue_1["default"],
+        VsLink: Link_vue_1["default"]
+    },
+    setup: function () {
+        return {
+            args: args
+        };
+    },
+    template: "\n        <VsBanner\n            v-bind=\"args\"\n        >\n            <template\n                v-if=\"args.bannerText\"\n                v-slot:banner-text\n            >\n                <p>\n                    {{ args.bannerText }}\n                </p>\n            </template>\n\n            <template\n                v-if=\"args.bannerCta\"\n                v-slot:banner-cta\n            >\n                <VsLink href=\"#\">\n                    {{ args.bannerCta }}\n                </VsLink>\n            </template>\n        </VsBanner>\n    "
+}); };
+var base = {
+    closeBtnText: 'Close',
+    dontShowAgain: false,
+    bannerText: 'Find the latest information on travel, and Good to Go (Covid-safe) businesses. ',
+    bannerCta: 'View Covid-19 Travel Advice'
+};
+exports.Default = Template.bind({});
+exports.Default.args = base;

package/dist/stories/components/Body.stories.js

@@ -0,0 +1,58 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+exports.WithRichText = exports.NoMargins = exports.Lead = exports.Default = void 0;
+var Body_vue_1 = __importDefault(require("@/components/body/Body.vue"));
+var Link_vue_1 = __importDefault(require("@/components/link/Link.vue"));
+var Heading_vue_1 = __importDefault(require("@/components/heading/Heading.vue"));
+exports["default"] = {
+    component: Body_vue_1["default"],
+    title: 'Components/Text & typography/Body',
+    argTypes: {
+        variant: {
+            options: [
+                'normal',
+                'lead',
+            ],
+            control: {
+                type: 'radio'
+            }
+        }
+    },
+    decorators: [function () { return ({
+            template: '<div style="max-width: 750px;"><story /></div>'
+        }); }]
+};
+var Template = function (args) { return ({
+    components: {
+        VsBody: Body_vue_1["default"],
+        VsLink: Link_vue_1["default"],
+        VsHeading: Heading_vue_1["default"]
+    },
+    setup: function () {
+        return {
+            args: args
+        };
+    },
+    template: "\n        <VsBody v-bind=\"args\">\n            <template v-if=\"".concat('default' in args, "\" v-slot>").concat(args["default"], "</template>\n        </VsBody>\n    ")
+}); };
+exports.Default = Template.bind({});
+exports.Default.args = {
+    "default": "\n        <p>An ancient giant of the land, Ben Nevis was once a massive active volcano which exploded and collapsed inwards on itself millions of years ago. At the summit, there is evidence of an explosion in the form of light-coloured granite. The name itself has two translations from the ancient Gaelic language, meaning 'mountain with its head in the clouds', thanks to its iconic mist-shrouded peak, or it can also mean 'venomous mountain' - you can decide which translation you prefer after the climb!</p>\n    "
+};
+exports.Lead = Template.bind({});
+exports.Lead.args = {
+    "default": "\n        <p>Ben Nevis is the king of them all. In the north west <a href='#' class=\"external-link\">Highlands</a>, near the town of <a href='#'>Fort William</a> and part of the <a href='#'>Grampian Mountain</a> range, the famous peak attracts 125k walkers a year. Whether you're an avid ambler or you just love beautiful landscapes, bagging 'the Ben' is likely to feature near the top of your Scottish bucket list.</p>\n    ",
+    variant: 'lead'
+};
+exports.NoMargins = Template.bind({});
+exports.NoMargins.args = {
+    "default": "\n    <p>An ancient giant of the land, Ben Nevis was once a massive active volcano which exploded and collapsed inwards on itself millions of years ago. At the summit, there is evidence of an explosion in the form of light-coloured granite. The name itself has two translations from the ancient Gaelic language, meaning 'mountain with its head in the clouds', thanks to its iconic mist-shrouded peak, or it can also mean 'venomous mountain' - you can decide which translation you prefer after the climb!</p>\n    ",
+    noMargins: true
+};
+exports.WithRichText = Template.bind({});
+exports.WithRichText.args = {
+    "default": "\n        <h2>\n            Experiencing Ben Nevis\n        </h2>\n        <p>Ben Nevis is the king of them all. In the north west <a href='#' class=\"external-link\">Highlands</a>, near the town of <a href='#'>Fort William</a> and part of the <a href='#'>Grampian Mountain</a> range, the famous peak attracts 125k walkers a year. Whether you're an avid ambler or you just love beautiful landscapes, bagging 'the Ben' is likely to feature near the top of your Scottish bucket list.</p>\n        <p>An ancient giant of the land, Ben Nevis was once a massive active volcano which exploded and collapsed inwards on itself millions of years ago. At the summit, there is evidence of an explosion in the form of light-coloured granite. The name itself has two translations from the ancient Gaelic language, meaning 'mountain with its head in the clouds', thanks to its iconic mist-shrouded peak, or it can also mean 'venomous mountain' - you can decide which translation you prefer after the climb!</p>\n        \n        <h3>\n            More information\n        </h3>\n        <p>Read on for an overview of walking routes up the mountain, or visit <a href='#'>Walk Highlands</a> for detailed maps, difficulty levels and walking advice.</p>\n        <p>Remember it's never 'easy' to bag a Scottish Munro or Corbett. You'll need a good amount of hillwalking experience, fitness, hill craft and Navigation skills using a map and compass, before attempting any Scottish mountains, even more so in winter.</p>\n        \n        <h4>\n            Did you know? \n        </h4>\n        <p>Mauris lacus elit, ultrices eu est eget, tempor viverra leo. Aenean ut lacinia sem. Nam vitae orci ante. Morbi sed diam iaculis, sodales risus ac, tincidunt massa. </p>\n        <p>Proin eu purus ex. Nulla ipsum nisi, consequat eget justo non, feugiat porttitor leo. Ut vitae augue ultricies, tristique sem finibus, facilisis massa.</p>\n\n        <h4>Even more information</h4>\n        <p>Proin fringilla rutrum eros, ac fermentum nulla. Donec ultricies sit amet nisi in sagittis. Donec accumsan enim non tortor tempus, id fringilla justo sodales.</p>\n        \n        <h5>Frequently asked questions</h5>\n        <ul>\n            <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>\n            <li>Maecenas sit amet dignissim nulla. Maecenas tristique mauris eget sem pellentesque, vitae lacinia ex efficitur</li>\n            <li>Proin a leo erat. Pellentesque aliquet orci nulla. Integer commodo tristique gravida.</li>\n        </ul>\n\n        <h6>More questions</h6>\n        <ol>\n            <li>Vestibulum id ante commodo, tincidunt lacus sed, pellentesque ipsum. Nulla commodo feugiat molestie. Nulla aliquam, justo quis pellentesque fringilla, orci felis dictum nibh</li>\n            <li>Curabitur efficitur odio tellus, quis tristique purus rhoncus sit amet. Aliquam erat volutpat.</li>\n            <li>Etiam maximus, tellus vel eleifend vulputate, risus orci malesuada massa, sit amet accumsan nunc erat et magna. Vestibulum eget est mauris. </li>\n        </ol>\n    "
+};