@visitscotland/component-library 5.76.0 → 5.78.0

package/dist/stories/components/Video.stories.js

@@ -0,0 +1,66 @@
+"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.AmbientVideo = exports.Default = void 0;
+var Video_vue_1 = __importDefault(require("@/components/video/Video.vue"));
+exports["default"] = {
+    component: Video_vue_1["default"],
+    title: 'Components/Media & data visualisation/Video',
+    decorators: [function () { return ({
+            template: '<div style="max-width: 520px;"><story /></div>'
+        }); }]
+};
+var Template = function (args) { return ({
+    components: {
+        VsVideo: Video_vue_1["default"]
+    },
+    setup: function () {
+        return {
+            args: args
+        };
+    },
+    template: "\n        <div :class=\"args.jsDisabled ? 'no-js' : ''\">\n            <VsVideo \n                v-bind=\"args\"\n            ></VsVideo>\n        </div>\n    "
+}); };
+var base = {
+    videoId: 'c05sg3G4oA4',
+    noJsMessage: 'You need Javascript enabled to see this video',
+    noCookiesMessage: 'You need cookies enabled to see this video',
+    cookieBtnText: 'Manage cookies',
+    jsDisabled: false
+};
+exports.Default = Template.bind();
+exports.Default.args = __assign({}, base);
+exports.AmbientVideo = Template.bind();
+exports.AmbientVideo.args = {
+    videoType: 'html5',
+    videoSrc: 'fixtures/hero/video/lavendar-fields.mp4',
+    posterImageSrc: 'fixtures/hero/images/lavendar-fields.jpg',
+    playButtonLabel: 'Play video',
+    pauseButtonLabel: 'Pause video',
+    videoId: 'ambient-video'
+};
+exports.NoCookies = Template.bind();
+exports.NoCookies.args = __assign({}, base);
+exports.NoCookies.decorators = [
+    function () {
+        window.bypassCookiesRequired = false;
+        return {
+            template: "\n                <story/>\n            "
+        };
+    },
+];
+exports.NoJavascript = Template.bind();
+exports.NoJavascript.args = __assign(__assign({}, base), { jsDisabled: true });

package/dist/stories/components/VideoCaption.stories.js

@@ -0,0 +1,61 @@
+"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.Narrow = exports.Default = void 0;
+var VideoCaption_vue_1 = __importDefault(require("@/components/video-caption/VideoCaption.vue"));
+var ImageWithCaption_vue_1 = __importDefault(require("@/components/image-with-caption/ImageWithCaption.vue"));
+var Modal_vue_1 = __importDefault(require("@/components/modal/Modal.vue"));
+var Video_vue_1 = __importDefault(require("@/components/video/Video.vue"));
+var grid_1 = require("@/components/grid");
+exports["default"] = {
+    component: VideoCaption_vue_1["default"],
+    title: 'Components/Deprecated/VideoCaption',
+    decorators: [function () { return ({
+            template: '<div style="max-width: 500px; margin-top: 4rem;"><story /></div>'
+        }); }],
+    tags: ['deprecated']
+};
+var Template = function (args) { return ({
+    components: {
+        VsVideoCaption: VideoCaption_vue_1["default"],
+        VsImageWithCaption: ImageWithCaption_vue_1["default"],
+        VsModal: Modal_vue_1["default"],
+        VsVideo: Video_vue_1["default"],
+        VsRow: grid_1.VsRow,
+        VsCol: grid_1.VsCol
+    },
+    setup: function () {
+        return {
+            args: args
+        };
+    },
+    template: "\n        <div style=\"background: #940f2c17; padding: 1rem; border: 1px solid #940F2C; margin-bottom: 1rem;\">\n            \u26A0\uFE0F Deprecated: Use new MediaCaption component and utility-based spacing instead. \n            This component will be removed in a future release. \n            See the <a href=\"https://visitscotland.atlassian.net/wiki/spaces/DE/pages/941981697/Video+caption+deprecated\">Video caption migration docs.</a> \n        </div>\n\n        <VsVideoCaption v-bind=\"args\">\n            <template v-if=\"".concat('video-title' in args, "\" v-slot:video-title>").concat(args['video-title'], "</template>\n        </VsVideoCaption>\n\n        <VsModal\n            :closeBtnText=\"args.closeBtnText\"\n            :modalId=\"args.videoId\"\n            :isVideoModal=\"true\"\n        >\n            <VsRow>\n                <VsCol cols=\"12\">\n                    <VsVideo\n                        v-bind=\"args\"\n                        class=\"mb-200\"\n                    >\n                    </VsVideo>\n                </VsCol>\n            </VsRow>\n        </VsModal>\n    ")
+}); };
+var base = {
+    videoId: 'h9bQwcndGfo',
+    withToggleBtn: true,
+    videoBtnText: 'Play Video',
+    'video-title': 'Only in Scotland: Why Scotland Needs You',
+    noJsMessage: 'JavaScript needs to be enabled to watch videos',
+    noCookiesMessage: 'Please accept cookies to watch videos',
+    cookieBtnText: 'Accept cookies here',
+    errorMessage: 'Something went wrong, please try again later',
+    closeBtnText: 'Close'
+};
+exports.Default = Template.bind({});
+exports.Default.args = base;
+exports.Narrow = Template.bind({});
+exports.Narrow.args = __assign(__assign({}, base), { variant: 'narrow' });

package/dist/stories/components/Warning.stories.js

@@ -0,0 +1,78 @@
+"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.DifferentIcon = exports.Small = exports.NoCookies = exports.ExtraContent = exports.Default = void 0;
+var Warning_vue_1 = __importDefault(require("@/components/warning/Warning.vue"));
+var Link_vue_1 = __importDefault(require("@/components/link/Link.vue"));
+exports["default"] = {
+    component: Warning_vue_1["default"],
+    title: 'Components/Feedback & status/Warning',
+    argTypes: {
+        type: {
+            options: [
+                'normal',
+                'cookie',
+            ],
+            control: {
+                type: 'radio'
+            }
+        },
+        size: {
+            options: [
+                'xs',
+                'small',
+                'normal',
+            ],
+            control: {
+                type: 'radio'
+            }
+        },
+        align: {
+            options: [
+                'left',
+                'right',
+            ],
+            control: {
+                type: 'radio'
+            }
+        }
+    }
+};
+var Template = function (args) { return ({
+    components: {
+        VsWarning: Warning_vue_1["default"],
+        VsLink: Link_vue_1["default"]
+    },
+    setup: function () {
+        return {
+            args: args
+        };
+    },
+    template: "\n    <div :style=\"args.size === 'small' ? 'width: 540px; height: 110px;' : 'width: 720px; height: 400px;'\">\n        <VsWarning v-bind=\"args\">\n            <template v-if=\"args.default\" v-slot>".concat(args["default"], "</template>\n\n            <template\n                v-if=\"args['extra-content']\"\n                v-slot:extra-content\n            >\n                ").concat(args['extra-content'], " <VsLink href=\"#\">").concat(args.ctaLink, "</VsLink>.\n            </template>\n\n            <template\n                v-if=\"args['button-text']\"\n                v-slot:button-text\n            >\n                ").concat(args['button-text'], "\n            </template>\n\n        </VsWarning>\n    </div>\n    ")
+}); };
+var base = {
+    "default": 'JavaScript needs to be enabled to watch this video. You can turn this on in your browser settings.'
+};
+exports.Default = Template.bind({});
+exports.Default.args = base;
+exports.ExtraContent = Template.bind({});
+exports.ExtraContent.args = __assign(__assign({}, base), { "default": 'JavaScript needs to be enabled to watch this video.', 'extra-content': 'You can turn this on in your browser settings or subscribe by sending an email to', ctaLink: 'info@visitscotland.com' });
+exports.NoCookies = Template.bind({});
+exports.NoCookies.args = __assign(__assign({}, base), { type: 'cookie', "default": 'Cookies need to be enabled to watch this video', 'extra-content': 'You can turn this on in your browser settings or subscribe by sending an email to', ctaLink: 'info@visitscotland.com', 'button-text': 'Manage cookies settings' });
+exports.Small = Template.bind({});
+exports.Small.args = __assign(__assign({}, base), { "default": 'Cookies need to be enabled to watch this video', 'button-text': 'Manage cookies settings', size: 'small' });
+exports.DifferentIcon = Template.bind({});
+exports.DifferentIcon.args = __assign(__assign({}, base), { "default": 'You have 10 minutes before this form times out', icon: 'fa-regular fa-clock', size: 'small' });

package/dist/stories/components/templates/card-layout-examples/category-grid.js

@@ -0,0 +1,3 @@
+"use strict";
+exports.__esModule = true;
+exports["default"] = "\n    <VsContainer class=\"mt-075 mt-lg-200\">\n        <VsRow>\n            <VsCol>\n                <VsCardGroup :scroll-snap=\"scrollSnap\">\n                    <VsCard \n                        v-for=\"(card, index) in cardListOverlay\"\n                        :key=\"'category-card-list-' + index\"\n                        card-style=\"overlay\"\n                    >\n                        <template #vs-card-image>\n                            <VsImg \n                                :src=\"card.image\" \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                                    >\n                                        {{ card.title }}\n                                    </VsLink>\n                                </VsHeading>\n                            </div>\n                        </template>\n                    </VsCard>\n                </VsCardGroup>\n            </VsCol>\n        </VsRow>\n    </VsContainer>\n";

package/dist/stories/components/templates/card-layout-examples/link-grid-3.js

@@ -0,0 +1,3 @@
+"use strict";
+exports.__esModule = true;
+exports["default"] = "\n    <VsContainer class=\"mt-075 mt-lg-200\">\n        <VsRow>\n            <VsCol>\n                <VsCardGroup\n                    :scroll-snap=\"scrollSnap\"\n                    :cards-per-row=\"cardsPerRow\"\n                >\n                    <VsCard\n                        v-for=\"(card, index) in textCardList3\"\n                        :key=\"'text-card-list-3-' + index\"\n                        card-style=\"elevated\"\n                        accent-bar\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                                    >\n                                        {{ card.title }}\n                                    </VsLink>\n                                </VsHeading>\n\n                                <VsBody class=\"mb-150\">\n                                    <p class=\"truncate-3-lines\">\n                                        {{ card.description }}\n                                    </p>\n                                </VsBody>\n                            </div>\n                        </template>\n                    </VsCard>\n                </VsCardGroup>\n            </VsCol>\n        </VsRow>\n    </VsContainer>\n";

package/dist/stories/components/templates/card-layout-examples/link-grid-4.js

@@ -0,0 +1,3 @@
+"use strict";
+exports.__esModule = true;
+exports["default"] = "\n    <VsContainer class=\"mt-075 mt-lg-200\">\n        <VsRow>\n            <VsCol>\n                <VsCardGroup\n                    :scroll-snap=\"scrollSnap\"\n                    :cards-per-row=\"cardsPerRow\"\n                >\n                    <VsCard\n                        v-for=\"(card, index) in textCardList2\"\n                        :key=\"'text-card-list-2-' + index\"\n                        card-style=\"elevated\"\n                        accent-bar\n                    >\n                        <template #vs-card-header>\n                            <VsBadge \n                                variant=\"subtle\"\n                                class=\"mt-125 mx-075\"\n                            >\n                                {{ card.badgeTitle }}\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                                    >\n                                        {{ card.title }}\n                                    </VsLink>\n                                </VsHeading>\n\n                                <VsBody class=\"mb-150\">\n                                    <p class=\"truncate-3-lines\">\n                                        {{ card.description }}\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=\"card.metaData\"\n                            />\n                        </template>\n                    </VsCard>\n                </VsCardGroup>\n            </VsCol>\n        </VsRow>\n    </VsContainer>\n";

package/dist/stories/components/templates/card-layout-examples/split-link-grid-3.js

@@ -0,0 +1,3 @@
+"use strict";
+exports.__esModule = true;
+exports["default"] = "\n    <VsContainer class=\"mt-075 mt-lg-200\">\n        <VsRow>\n            <VsCol>\n                <VsCardGroup\n                    :scroll-snap=\"scrollSnap\"\n                    :cards-per-row=\"cardsPerRow\"\n                >\n                    <VsCard\n                        v-for=\"(card, index) in cardList2\"\n                        :key=\"'card-list-2-' + index\"\n                    >\n                        <template #vs-card-header>\n                            <VsImg\n                                v-if=\"card.image\"\n                                :src=\"card.image\"\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>\n                                <VsHeading\n                                    level=\"3\"\n                                    heading-style=\"heading-xs\"\n                                >\n                                    <VsLink\n                                        :href=\"card.link\"\n                                        class=\"stretched-link\"\n                                        variant=\"secondary\"\n                                    >\n                                        {{ card.title }}\n                                    </VsLink>\n                                </VsHeading>\n\n                                <VsBody class=\"mb-150\">\n                                    <p class=\"truncate-2-lines\">\n                                        {{ card.description }}\n                                    </p>\n                                </VsBody>\n                            </div>\n                        </template>\n                    </VsCard>\n                </VsCardGroup>\n            </VsCol>\n        </VsRow>\n    </VsContainer>\n";

package/dist/stories/components/templates/card-layout-examples/split-link-grid-4.js

@@ -0,0 +1,3 @@
+"use strict";
+exports.__esModule = true;
+exports["default"] = "\n    <VsContainer class=\"mt-075 mt-lg-200\">\n        <VsRow>\n            <VsCol>\n                <VsCardGroup\n                    :scroll-snap=\"scrollSnap\"\n                    :cards-per-row=\"cardsPerRow\"\n                >\n                    <VsCard\n                        v-for=\"(card, index) in cardList3\"\n                        :key=\"'card-list-3-' + index\"\n                    >\n                        <template #vs-card-header>\n                            <VsImg\n                                v-if=\"card.image\"\n                                :src=\"card.image\"\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>\n                                <VsHeading\n                                    level=\"3\"\n                                    heading-style=\"heading-xs\"\n                                >\n                                    <VsLink\n                                        :href=\"card.link\"\n                                        class=\"stretched-link\"\n                                        variant=\"secondary\"\n                                    >\n                                        {{ card.title }}\n                                    </VsLink>\n                                </VsHeading>\n\n                                <VsBody class=\"mb-150\">\n                                    <p class=\"truncate-2-lines\">\n                                        {{ card.description }}\n                                    </p>\n                                </VsBody>\n                            </div>\n                        </template>\n                    </VsCard>\n                </VsCardGroup>\n            </VsCol>\n        </VsRow>\n    </VsContainer>\n";

package/dist/stories/custom-components/MainMap.stories.js

@@ -0,0 +1,99 @@
+"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.NoCookies = exports.NoJavascript = exports.Espanol = exports.Default = void 0;
+var MainMap_vue_1 = __importDefault(require("@/custom-components/maps/MainMap.vue"));
+var map_labels_json_1 = __importDefault(require("@/assets/fixtures/custom-components/main-map/map-labels.json"));
+var map_featured_places_json_1 = __importDefault(require("@/assets/fixtures/custom-components/main-map/map-featured-places.json"));
+exports["default"] = {
+    component: MainMap_vue_1["default"],
+    title: 'Custom components/Main Map',
+    argTypes: {},
+    parameters: {
+        layout: 'fullscreen'
+    }
+};
+var Template = function (args) { return ({
+    components: {
+        VsMainMap: MainMap_vue_1["default"]
+    },
+    setup: function () {
+        return {
+            args: args
+        };
+    },
+    template: "\n        <div :class=\"args.jsDisabled ? 'no-js' : ''\">\n            <VsMainMap v-bind=\"args\" />\n        </div>\n    "
+}); };
+var base = {
+    mapId: '80fe83bd0f6b4f3f24adc270',
+    mapTypeVector: true,
+    center: {
+        lat: 56.490153,
+        lng: -4.10959
+    },
+    zoom: 6,
+    radius: 5000,
+    categoriesLocation: './fixtures/custom-components/main-map/map-categories.json',
+    featuredPlaces: map_featured_places_json_1["default"],
+    categoryLabels: map_labels_json_1["default"],
+    jsDisabled: false,
+    noResultsMessage: 'We couldn\'t find anything here.',
+    resetMapNoResultsMessage: 'Reset the map to explore more locations.',
+    noJsMessage: 'JavaScript is required to use the map. Enable JavaScript then reload the page to use the map.',
+    noCookiesMessage: 'Cookies are required to use the map',
+    cookieBtnText: 'Manage cookies',
+    labels: {
+        heading: 'Discover your Scotland',
+        closeSidebarBtn: 'Close Sidebar',
+        searchBarAriaLabel: 'Search the map',
+        inputPlaceholder: 'Type in your keyword',
+        searchButton: 'Search',
+        clearMap: 'Clear all',
+        subFilterHeader: 'Refine your results',
+        searchResults: 'Search results for ',
+        openSidebarButton: 'openSidebarButton',
+        resetLocation: 'All locations',
+        locationSelect: 'Refine your results by location',
+        searchAreaButton: 'Search this area'
+    },
+    alertText: 'A selection of places matching your search is shown below. Up to 20 results are displayed.'
+};
+exports.Default = Template.bind();
+exports.Default.args = base;
+exports.Espanol = Template.bind();
+exports.Espanol.args = __assign(__assign({}, base), { noResultsMessage: 'No pudimos encontrar nada aquí.', resetMapNoResultsMessage: 'Restablezca el mapa para explorar más ubicaciones.', labels: {
+        heading: 'Descubre tu Escocia',
+        closeSidebarBtn: 'Cerrar barra lateral',
+        searchBarAriaLabel: 'Buscar en el mapa',
+        inputPlaceholder: 'Escribe tu palabra clave',
+        searchButton: 'Buscar',
+        clearMap: 'Borrar mapa',
+        subFilterHeader: 'Perfecciona tus resultados',
+        searchResults: 'Resultados de la búsqueda para ',
+        openSidebarButton: 'Abrir barra lateral'
+    }, languageCode: 'es' });
+exports.NoJavascript = Template.bind();
+exports.NoJavascript.args = __assign(__assign({}, base), { jsDisabled: true });
+exports.NoCookies = Template.bind();
+exports.NoCookies.args = __assign({}, base);
+exports.NoCookies.decorators = [
+    function () {
+        window.bypassCookiesRequired = false;
+        return {
+            template: "\n                <story/>\n            "
+        };
+    },
+];

package/dist/stories/custom-components/MapSidebar.stories.js

@@ -0,0 +1,74 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+exports.Default = void 0;
+var vue_1 = require("vue");
+var map_labels_json_1 = __importDefault(require("@/assets/fixtures/custom-components/main-map/map-labels.json"));
+var MapSidebar_vue_1 = __importDefault(require("@/custom-components/maps/components/MapSidebar.vue"));
+exports["default"] = {
+    component: MapSidebar_vue_1["default"],
+    title: 'Custom components/Map Sidebar',
+    argTypes: {}
+};
+var Template = function (args) { return ({
+    components: {
+        VsMapSidebar: MapSidebar_vue_1["default"]
+    },
+    setup: function () {
+        (0, vue_1.provide)('featuredPlaces', {
+            categories: [
+                {
+                    id: 'cities',
+                    label: 'Cities'
+                },
+                {
+                    id: 'towns',
+                    label: 'Towns'
+                },
+                {
+                    id: 'islands',
+                    label: 'Islands'
+                },
+                {
+                    id: 'regions',
+                    label: 'Regions'
+                },
+                {
+                    id: 'national-parks',
+                    label: 'National Parks'
+                },
+            ],
+            places: []
+        });
+        (0, vue_1.provide)('addDestinationMarkers', function () { });
+        return {
+            args: args
+        };
+    },
+    template: "\n        <VsMapSidebar v-bind=\"args\">\n        <template #vs-map-sidebar-sub-filters v-if=\"args.selectedCategories\">\n                <div style=\"\n                    background: rgba(252, 227, 247, 1); \n                    padding: 5em 5em;\n                    text-align: center\"\n                >\n                    <span>SLOT FOR SUBCATEGORIES</span>\n                </div>\n            </template>\n            <template #vs-map-sidebar-search-results v-if=\"args.query\">\n                <div style=\"\n                    background: rgb(227, 252, 252); \n                    padding: 15em 5em;\n                    text-align: center\"\n                >\n                    <span>SLOT FOR PLACES UI KIT</span>\n                </div>\n            </template>\n        </VsMapSidebar>\n    "
+}); };
+var base = {
+    sidebarLabels: {
+        headerLabel: 'Discover your Scotland',
+        closeSidebarButtonLabel: 'Close Sidebar',
+        searchBarAriaLabel: 'Search the map',
+        inputPlaceholderLabel: 'Type in your keyword',
+        searchButtonLabel: 'Search',
+        clearMapLabel: 'Clear Map',
+        subFilterHeaderLabel: 'Refine your results',
+        searchResultsLabel: 'Showing results for: ',
+        openSidebarButtonLabel: 'Open Sidebar',
+        resetLocationLabel: 'All locations',
+        locationSelectLabel: 'Refine your results by location'
+    },
+    categories: map_labels_json_1["default"]
+};
+exports.Default = Template.bind();
+exports.Default.args = base;
+exports.Default.globals = {
+    backgrounds: {
+        value: 'grey'
+    }
+};

package/dist/stories/pages/article-pages/ArticlePage.stories.js

@@ -0,0 +1,99 @@
+"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.ItineraryArticle = exports.StructuredArticle = exports.RichArticle = void 0;
+var PageHeader_vue_1 = __importDefault(require("@/templates/PageHeader.vue"));
+var Breadcrumb_vue_1 = __importDefault(require("@/components/breadcrumb/Breadcrumb.vue"));
+var BreadcrumbItem_vue_1 = __importDefault(require("@/components/breadcrumb/components/BreadcrumbItem.vue"));
+var HeroSection_vue_1 = __importDefault(require("@/components/hero-section/HeroSection.vue"));
+var grid_1 = require("@/components/grid");
+var Heading_vue_1 = __importDefault(require("@/components/heading/Heading.vue"));
+var Img_vue_1 = __importDefault(require("@/components/img/Img.vue"));
+var Body_vue_1 = __importDefault(require("@/components/body/Body.vue"));
+var Button_vue_1 = __importDefault(require("@/components/button/Button.vue"));
+var SectionHeader_vue_1 = __importDefault(require("@/components/section-header/SectionHeader.vue"));
+var Panel_vue_1 = __importDefault(require("@/components/panel/Panel.vue"));
+var Icon_vue_1 = __importDefault(require("@/components/icon/Icon.vue"));
+var Detail_vue_1 = __importDefault(require("@/components/detail/Detail.vue"));
+var Link_vue_1 = __importDefault(require("@/components/link/Link.vue"));
+var ContentSwiper_vue_1 = __importDefault(require("@/components/content-swiper/ContentSwiper.vue"));
+var ContentSwiperSlide_1 = __importDefault(require("@/components/content-swiper/components/ContentSwiperSlide"));
+var Card_vue_1 = __importDefault(require("@/components/card/Card.vue"));
+var SpotlightSection_vue_1 = __importDefault(require("@/components/spotlight-section/SpotlightSection.vue"));
+var IllustratedMap_vue_1 = __importDefault(require("@/components/illustrated-map/IllustratedMap.vue"));
+var MediaCaption_vue_1 = __importDefault(require("@/components/media-caption/MediaCaption.vue"));
+var Quote_vue_1 = __importDefault(require("@/components/quote/Quote.vue"));
+var visual_impact_cards_json_1 = __importDefault(require("@/assets/fixtures/navigation-pages/visual-impact-cards.json"));
+var content_swiper_images_json_1 = __importDefault(require("@/assets/fixtures/content-swiper/content-swiper-images.json"));
+var rich_article_template_1 = __importDefault(require("./templates/rich-article-template"));
+var structured_article_template_1 = __importDefault(require("./templates/structured-article-template"));
+var itinerary_template_1 = __importDefault(require("./templates/itinerary-template"));
+var components = {
+    VsPageHeader: PageHeader_vue_1["default"],
+    VsHeroSection: HeroSection_vue_1["default"],
+    VsBreadcrumb: Breadcrumb_vue_1["default"],
+    VsBreadcrumbItem: BreadcrumbItem_vue_1["default"],
+    VsCol: grid_1.VsCol,
+    VsContainer: grid_1.VsContainer,
+    VsRow: grid_1.VsRow,
+    VsSectionHeader: SectionHeader_vue_1["default"],
+    VsHeading: Heading_vue_1["default"],
+    VsImg: Img_vue_1["default"],
+    VsBody: Body_vue_1["default"],
+    VsButton: Button_vue_1["default"],
+    VsPanel: Panel_vue_1["default"],
+    VsIcon: Icon_vue_1["default"],
+    VsDetail: Detail_vue_1["default"],
+    VsLink: Link_vue_1["default"],
+    VsCard: Card_vue_1["default"],
+    VsSpotlightSection: SpotlightSection_vue_1["default"],
+    VsIllustratedMap: IllustratedMap_vue_1["default"],
+    VsMediaCaption: MediaCaption_vue_1["default"],
+    VsQuote: Quote_vue_1["default"],
+    VsContentSwiper: ContentSwiper_vue_1["default"],
+    VsContentSwiperSlide: ContentSwiperSlide_1["default"]
+};
+var createStory = function (template) { return ({
+    render: function () { return ({
+        components: components,
+        template: template,
+        setup: function () {
+            var _a, _b, _c;
+            var cardList4 = ((_a = visual_impact_cards_json_1["default"].cardList4) === null || _a === void 0 ? void 0 : _a.cards) || [];
+            var landscapeImages = ((_b = content_swiper_images_json_1["default"].landscapeImages) === null || _b === void 0 ? void 0 : _b.images) || [];
+            var portraitImages = ((_c = content_swiper_images_json_1["default"].portraitImages) === null || _c === void 0 ? void 0 : _c.images) || [];
+            return {
+                cardList4: cardList4,
+                landscapeImages: landscapeImages,
+                portraitImages: portraitImages
+            };
+        }
+    }); },
+    parameters: {
+        layout: 'fullscreen',
+        docs: {
+            source: {
+                code: template
+            }
+        }
+    }
+}); };
+exports["default"] = {
+    title: 'Pages/Article'
+};
+exports.RichArticle = __assign({}, createStory(rich_article_template_1["default"]));
+exports.StructuredArticle = __assign({}, createStory(structured_article_template_1["default"]));
+exports.ItineraryArticle = __assign({}, createStory(itinerary_template_1["default"]));