@visitscotland/component-library 5.76.1 → 5.78.0

package/dist/stories/components/SectionHeader.stories.js

@@ -0,0 +1,74 @@
+"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.StackedMobile = exports.HeadingOnly = exports.WithAll = exports.WithAction = exports.WithLede = void 0;
+var SectionHeader_vue_1 = __importDefault(require("@/components/section-header/SectionHeader.vue"));
+var Button_vue_1 = __importDefault(require("@/components/button/Button.vue"));
+exports["default"] = {
+    component: SectionHeader_vue_1["default"],
+    parameters: {
+        layout: 'fullscreen'
+    },
+    title: 'Components/Layout & content structure/SectionHeader',
+    argTypes: {
+        heading: {
+            control: {
+                type: 'text'
+            }
+        },
+        lede: {
+            control: {
+                type: 'text'
+            }
+        },
+        withAction: {
+            control: {
+                type: 'boolean'
+            }
+        }
+    }
+};
+var Template = function (args) { return ({
+    components: {
+        VsSectionHeader: SectionHeader_vue_1["default"],
+        VsButton: Button_vue_1["default"]
+    },
+    setup: function () {
+        return {
+            args: args
+        };
+    },
+    template: "\n        <VsSectionHeader v-bind=\"args\">\n            <template v-slot:section-header-lede v-if=\"args.lede\">\n                <div v-html=\"args.lede\" />\n            </template>\n            <template v-slot:section-header-actions v-if=\"args.withAction\">\n                <VsButton variant=\"secondary\" href=\"#\">\n                    Discover more\n                </VsButton>\n            </template>\n        </VsSectionHeader>\n    "
+}); };
+var base = {
+    heading: 'Explore the lochs and mountains of Scotland'
+};
+var ledeHtml = "\n    <p>Northwest Sutherland is a stunning landscape of perfect sandy beaches and sweeping moorland studded with glittering lochans, overlooked by some of Scotland's most remarkable mountains, individual peaks each with great character.</p>\n";
+exports.WithLede = Template.bind({});
+exports.WithLede.args = __assign({ lede: ledeHtml }, base);
+exports.WithAction = Template.bind({});
+exports.WithAction.args = __assign({ withAction: true }, base);
+exports.WithAll = Template.bind({});
+exports.WithAll.args = __assign({ lede: ledeHtml, withAction: true }, base);
+exports.HeadingOnly = Template.bind({});
+exports.HeadingOnly.args = __assign({}, base);
+exports.StackedMobile = Template.bind({});
+exports.StackedMobile.args = __assign({ lede: ledeHtml, withAction: true }, base);
+exports.StackedMobile.globals = {
+    viewport: {
+        value: 'mobile1'
+    }
+};

package/dist/stories/components/Select.stories.js

@@ -0,0 +1,160 @@
+"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 __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (_) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+exports.HintText = exports.Selected = exports.Invalid = exports.Default = void 0;
+var test_1 = require("storybook/test");
+var Select_vue_1 = __importDefault(require("@/components/select/Select.vue"));
+exports["default"] = {
+    component: Select_vue_1["default"],
+    title: 'Components/Actions & controls/Select'
+};
+var Template = function (args) { return ({
+    components: {
+        VsSelect: Select_vue_1["default"]
+    },
+    setup: function () {
+        return {
+            args: args
+        };
+    },
+    template: "\n        <label :for=\"args.fieldName\">Please enter a country</label>\n        <VsSelect v-bind=\"args\" required=\"true\"></VsSelect>\n    "
+}); };
+var base = {
+    fieldName: 'country',
+    options: [
+        {
+            value: '',
+            text: ''
+        },
+        {
+            value: 'england',
+            text: 'England'
+        },
+        {
+            value: 'northernireland',
+            text: 'Northern Ireland'
+        },
+        {
+            value: 'scotland',
+            text: 'Scotland'
+        },
+        {
+            value: 'wales',
+            text: 'Wales'
+        },
+        {
+            value: 'other',
+            text: 'Rest of World'
+        },
+    ],
+    validationRules: {
+        invalidVal: 'other'
+    },
+    validationMessages: {
+        noInvalid: 'To qualify, you must be based in the uk'
+    },
+    invalid: false,
+    genericValidation: {},
+    hintText: '',
+    triggerValidate: false,
+    reAlertErrors: false
+};
+exports.Default = Template.bind({});
+exports.Default.args = base;
+exports.Invalid = Template.bind({});
+exports.Invalid.args = __assign(__assign({}, base), { validationRules: {
+        invalidVal: 'other'
+    }, validationMessages: {
+        noInvalid: 'To qualify, you must be based in the uk'
+    } });
+exports.Invalid.play = function (_a) {
+    var canvasElement = _a.canvasElement;
+    return __awaiter(void 0, void 0, void 0, function () {
+        var canvas, select;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    canvas = (0, test_1.within)(canvasElement);
+                    select = canvas.getByLabelText('Please enter a country');
+                    return [4 /*yield*/, (0, test_1.waitFor)(function () { return __awaiter(void 0, void 0, void 0, function () {
+                            return __generator(this, function (_a) {
+                                switch (_a.label) {
+                                    case 0: return [4 /*yield*/, test_1.userEvent.selectOptions(select, ['other'])];
+                                    case 1:
+                                        _a.sent();
+                                        return [2 /*return*/];
+                                }
+                            });
+                        }); })];
+                case 1:
+                    _b.sent();
+                    return [4 /*yield*/, (0, test_1.waitFor)(function () { return __awaiter(void 0, void 0, void 0, function () {
+                            return __generator(this, function (_a) {
+                                switch (_a.label) {
+                                    case 0: return [4 /*yield*/, select.blur()];
+                                    case 1:
+                                        _a.sent();
+                                        return [2 /*return*/];
+                                }
+                            });
+                        }); })];
+                case 2:
+                    _b.sent();
+                    return [2 /*return*/];
+            }
+        });
+    });
+};
+exports.Selected = Template.bind({});
+exports.Selected.args = __assign(__assign({}, base), { value: 'scotland' });
+exports.HintText = Template.bind({});
+exports.HintText.args = __assign(__assign({}, base), { hintText: 'If you\'re not based in the UK, please choose \'Rest of the world\'' });

package/dist/stories/components/SiteSearch.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.OpenForm = exports.Default = void 0;
+var SiteSearch_vue_1 = __importDefault(require("@/components/site-search/SiteSearch.vue"));
+var SiteSearchForm_vue_1 = __importDefault(require("@/components/site-search/components/SiteSearchForm.vue"));
+exports["default"] = {
+    component: SiteSearch_vue_1["default"],
+    title: 'Components/To be reviewed/SiteSearch'
+};
+var Template = function (args) { return ({
+    components: {
+        VsSiteSearch: SiteSearch_vue_1["default"],
+        VsSiteSearchForm: SiteSearchForm_vue_1["default"]
+    },
+    setup: function () {
+        return {
+            args: args
+        };
+    },
+    template: "\n        <VsSiteSearch\n            v-bind=\"args\"\n        >\n            <template v-if=\"".concat('default' in args, "\" v-slot>").concat(args["default"], "</template>\n        </VsSiteSearch>\n        <VsSiteSearchForm\n            v-bind=\"args\"\n            v-if=\"args.isShowing\"\n        />\n    ")
+}); };
+var base = {
+    "default": 'Search',
+    isShowing: false,
+    labelText: 'What are you looking for?',
+    submitButtonText: 'Search',
+    clearButtonText: 'Clear form',
+    closeButtonText: 'Close search form'
+};
+exports.Default = Template.bind({});
+exports.Default.args = base;
+exports.OpenForm = Template.bind({});
+exports.OpenForm.args = __assign(__assign({}, base), { isShowing: true });

package/dist/stories/components/SkiScotlandCard.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.FailedLoad = exports.Default = void 0;
+var SkiScotlandCard_vue_1 = __importDefault(require("@/components/ski-scotland/ski-scotland-card/SkiScotlandCard.vue"));
+var grid_1 = require("@/components/grid");
+exports["default"] = {
+    component: SkiScotlandCard_vue_1["default"],
+    title: 'Components/To be reviewed/SkiScotlandCard'
+};
+var Template = function (args) { return ({
+    components: {
+        VsSkiScotlandCard: SkiScotlandCard_vue_1["default"],
+        VsContainer: grid_1.VsContainer,
+        VsRow: grid_1.VsRow,
+        VsCol: grid_1.VsCol
+    },
+    setup: function () {
+        return {
+            args: args
+        };
+    },
+    template: "\n    <VsContainer>\n        <VsRow\n            class=\"mx-n100 mx-lg-n200\"\n        >\n            <VsCol\n                cols=\"12\"\n                sm=\"6\"\n                lg=\"4\"\n                class=\"px-100 px-lg-200\"\n            >\n                <VsSkiScotlandCard\n                    v-bind=\"args\"\n                >\n                    <template v-if=\"args['centre-name']\" v-slot:centre-name>{{ args['centre-name'] }}</template>\n                    <template v-if=\"args['data-loading']\" v-slot:data-loading>{{ args['data-loading'] }}</template>\n                    <template v-if=\"args['data-unavailable']\" v-slot:data-unavailable>{{ args['data-unavailable'] }}</template>\n                    <template v-if=\"args['js-required']\" v-slot:js-required>{{ args['js-required'] }}</template>\n                </VsSkiScotlandCard>\n            </VsCol>\n        </VsRow>\n    </VsContainer>\n    "
+}); };
+var base = {
+    centreInfoUrl: './fixtures/ski-scotland/sample-ski-data.json',
+    locale: 'en-gb',
+    imgSrc: './fixtures/ski-scotland/ski-image.jpg',
+    imgAlt: 'Glencoe ski centre',
+    moreDetailsLink: '#',
+    pisteMapLink: '#',
+    timeoutDuration: 30000,
+    lastUpdatedLabel: 'Last Updated',
+    liftsLabel: 'Lifts',
+    runsLabel: 'Runs',
+    runsLiftsStatusLabel: 'Run/Lift Status',
+    statusLabel: 'Status',
+    summaryClosedLabel: 'Closed',
+    summaryOpenLabel: 'Open',
+    summaryOpeningLabel: 'Opening',
+    summaryLimitedPatrolLabel: 'Limited Patrol',
+    summaryOnHoldLabel: 'On Hold',
+    pisteMapLabel: 'Piste Map',
+    moreDetailsLabel: 'More Details',
+    'centre-name': 'Glencoe Ski Centre',
+    'data-loading': 'Data is currently loading, please wait...',
+    'data-unavailable': 'Data is currently unavailable, please try again later.',
+    'js-required': 'JavaScript is required to load more ski data.'
+};
+exports.Default = Template.bind({});
+exports.Default.args = base;
+exports.FailedLoad = Template.bind({});
+exports.FailedLoad.args = __assign(__assign({}, base), { centreInfoUrl: '/' });

package/dist/stories/components/SkiScotlandStatus.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.FailedLoad = exports.Default = void 0;
+var SkiScotlandStatus_vue_1 = __importDefault(require("@/components/ski-scotland/ski-scotland-status/SkiScotlandStatus.vue"));
+var Heading_vue_1 = __importDefault(require("@/components/heading/Heading.vue"));
+var List_vue_1 = __importDefault(require("@/components/list/List.vue"));
+var Link_vue_1 = __importDefault(require("@/components/link/Link.vue"));
+var Icon_vue_1 = __importDefault(require("@/components/icon/Icon.vue"));
+exports["default"] = {
+    component: SkiScotlandStatus_vue_1["default"],
+    title: 'Components/To be reviewed/SkiScotlandStatus'
+};
+var Template = function (args) { return ({
+    components: {
+        VsSkiScotlandStatus: SkiScotlandStatus_vue_1["default"],
+        VsHeading: Heading_vue_1["default"],
+        VsList: List_vue_1["default"],
+        VsLink: Link_vue_1["default"],
+        VsIcon: Icon_vue_1["default"]
+    },
+    setup: function () {
+        return {
+            args: args
+        };
+    },
+    template: "\n        <VsSkiScotlandStatus\n            v-bind=\"args\"\n        >\n            <template v-if=\"args['centre-information']\" v-slot:centre-information>\n                <VsHeading\n                    level=\"3\"\n                    heading-style=\"heading-xs\"\n                >\n                    Centre Information                    \n                </VsHeading>\n\n                <VsList unstyled>\n                    <li v-if=\"args['centre-information'].phone\" class=\"mb-050\">\n                        <VsIcon\n                            icon=\"fa-regular fa-phone\"\n                            size=\"xs\"\n                            class=\"me-050\"\n                        ></VsIcon>\n                        <span>\n                            {{ args['centre-information'].phone }}\n                        </span>\n                    </li>\n                    <li v-if=\"args['centre-information'].website\" class=\"mb-050\">\n                        <VsIcon\n                            icon=\"fa-regular fa-globe\"\n                            size=\"xs\"\n                            class=\"me-050\"\n                        ></VsIcon>\n                        <VsLink\n                            type=\"external\"\n                            href=\"#\"\n                        >\n                            {{ args['centre-information'].website }}\n                        </VsLink>\n                    </li>\n                    <li v-if=\"args['centre-information'].address\" class=\"mb-050\">\n                        <VsIcon\n                            icon=\"fa-regular fa-location-dot\"\n                            size=\"xs\"\n                            class=\"me-050\"\n                        ></VsIcon>\n                        <span>\n                            {{ args['centre-information'].address }}\n                        </span>\n                    </li>\n                    <li v-if=\"args['centre-information'].pisteMap\" class=\"mb-050\">\n                        <VsIcon\n                            icon=\"fa-regular fa-mountain\"\n                            size=\"xs\"\n                            class=\"me-050\"\n                        ></VsIcon>\n                        <VsLink\n                            type=\"download\"\n                            href=\"args['centre-information'].pisteMap\"\n                        >\n                            View piste map\n                        </VsLink>\n                    </li>\n                    <li v-if=\"args['centre-information'].openingLink\" class=\"mb-050\">\n                        <VsIcon\n                            icon=\"fa-regular fa-clock\"\n                            size=\"xs\"\n                            class=\"me-050\"\n                        ></VsIcon>\n                        <VsLink\n                            href=\"args['centre-information'].openingLink\"\n                        >\n                            View opening times\n                        </VsLink>\n                    </li>\n                    <li v-if=\"args['centre-information'].webcam\" class=\"mb-050\">\n                        <VsIcon\n                            icon=\"fa-regular fa-camera-web\"\n                            size=\"xs\"\n                            class=\"me-050\"\n                        ></VsIcon>\n                        <span> Webcam </span>\n                    </li>\n                </VsList>        \n                <VsLink\n                    href=\"#\"\n                    class=\"d-inline-block mt-100\"\n                >\n                    <div class=\"d-inline-block me-100\">\n                        <span class=\"visually-hidden\">Twitter</span>\n                        <VsIcon\n                            size=\"sm\"\n                            icon=\"fa-brands fa-twitter\"\n                            custom-colour=\"#55ACEE\"\n                        ></VsIcon>\n                    </div>\n                </VsLink>\n                <VsLink\n                    href=\"#\"\n                    class=\"d-inline-block mt-100\"\n                >\n                    <div class=\"d-inline-block me-100\">\n                        <span class=\"visually-hidden\">Facebook</span>\n                        <VsIcon\n                            size=\"sm\"\n                            icon=\"fa-brands fa-facebook\"\n                            custom-colour=\"#3A5A99\"\n                        ></VsIcon>\n                    </div>\n                </VsLink>\n                <VsLink\n                    href=\"#\"\n                    class=\"d-inline-block mt-100\"\n                >\n                    <div class=\"d-inline-block me-100\">\n                        <span class=\"visually-hidden\">Instagram</span>\n                        <VsIcon\n                            size=\"sm\"\n                            icon=\"fa-brands fa-instagram\"\n                            custom-colour=\"#E1306C\"\n                        ></VsIcon>\n                    </div>\n                </VsLink>\n            </template>\n            <template v-if=\"args['data-loading']\" v-slot:data-loading>{{ args['data-loading'] }}</template>\n            <template v-if=\"args['data-unavailable']\" v-slot:data-unavailable>{{ args['data-unavailable'] }}</template>\n            <template v-if=\"args['js-required']\" v-slot:js-required>{{ args['js-required'] }}</template>\n        </VsSkiScotlandStatus>\n    "
+}); };
+var base = {
+    skiStatusUrl: './fixtures/ski-scotland/sample-ski-data.json',
+    locale: 'en-gb',
+    timeoutDuration: 30000,
+    lastUpdatedLabel: 'Last Updated',
+    liftsLabel: 'Lifts',
+    runsLabel: 'Runs',
+    runsLiftsStatusLabel: 'Run/Lift Status',
+    statusLabel: 'Status',
+    summaryClosedLabel: 'Closed',
+    summaryOpenLabel: 'Open',
+    summaryOpeningLabel: 'Opening',
+    summaryLimitedPatrolLabel: 'Limited Patrol',
+    summaryOnHoldLabel: 'On Hold',
+    currentWeatherLabel: 'Current Weather',
+    detailedStatusLabel: 'Detailed Status',
+    difficultLabel: 'Difficult',
+    easyLabel: 'Easy',
+    intermediateLabel: 'Intermediate',
+    itinerariesLabel: 'Itineraries',
+    liftLabel: 'Lift',
+    liftStatusLabel: 'Lift Status',
+    newsLabel: 'News',
+    otherLabel: 'Other',
+    roadsLabel: 'Roads',
+    runLabel: 'Run',
+    runStatusLabel: 'Run Status',
+    snowConditionsLabel: 'Snow Conditions',
+    statusClosedLabel: 'Closed',
+    statusOpenLabel: 'Open',
+    statusOpeningLabel: 'Opening',
+    statusLimitedPatrolLabel: 'Limited Patrol',
+    statusOnHoldLabel: 'On Hold',
+    veryDifficultLabel: 'Very Difficult',
+    weatherForecastLabel: 'Weather Forecast',
+    greenLabel: 'Green',
+    blueLabel: 'Blue',
+    redLabel: 'Red',
+    blackLabel: 'Black',
+    orangeLabel: 'Orange',
+    greyLabel: 'Grey',
+    'data-loading': 'Data is currently loading, please wait...',
+    'data-unavailable': 'Data is currently unavailable, please try again later.',
+    'js-required': 'JavaScript is required to load more ski data.',
+    'centre-information': {
+        phone: '01855 851226',
+        website: 'www.glencoemountain.co.uk',
+        address: 'Kingshouse, Glencoe, Glencoe, PH49 4HZ',
+        pisteMap: 'https://static.visitscotland.com/pdf/glencoe-mountain-piste-map.pdf',
+        openingLink: 'https://www.visitscotland.com/info/see-do/glencoe-mountain-resort-p990461#opening',
+        webcam: 'Webcam'
+    }
+};
+exports.Default = Template.bind({});
+exports.Default.args = base;
+exports.FailedLoad = Template.bind({});
+exports.FailedLoad.args = __assign(__assign({}, base), { skiStatusUrl: '/' });

package/dist/stories/components/SkipTo.stories.js

@@ -0,0 +1,71 @@
+"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.NoSearch = exports.Default = void 0;
+var SkipTo_vue_1 = __importDefault(require("@/components/skip-to/SkipTo.vue"));
+exports["default"] = {
+    component: SkipTo_vue_1["default"],
+    title: 'Components/Navigation/SkipTo',
+    argTypes: {
+        skipToText: {
+            control: {
+                type: 'text'
+            }
+        },
+        mainMenuText: {
+            control: {
+                type: 'text'
+            }
+        },
+        searchText: {
+            control: {
+                type: 'text'
+            }
+        },
+        mainContentText: {
+            control: {
+                type: 'text'
+            }
+        },
+        footerText: {
+            control: {
+                type: 'text'
+            }
+        }
+    }
+};
+var Template = function (args) { return ({
+    components: {
+        VsSkipTo: SkipTo_vue_1["default"]
+    },
+    setup: function () {
+        return {
+            args: args
+        };
+    },
+    template: "\n        <p>Tab into the element below to see the Skip To component appear:</p>\n        <div class=\"border\" style=\"overflow: hidden; position: relative;\">\n            <VsSkipTo\n                skip-to-text=\"".concat(args.skipToText, "\"\n                v-bind=\"args\"\n            >   \n                <template v-slot:main-menu-text>\n                    ").concat(args.mainMenuText, "\n                </template>\n                <template v-slot:main-content-text>\n                    ").concat(args.mainContentText, "\n                </template>\n                <template v-slot:search-text>\n                    ").concat(args.searchText, "\n                </template>\n                <template v-slot:footer-text>\n                    ").concat(args.footerText, "\n                </template>\n            </VsSkipTo>\n        </div>\n    ")
+}); };
+var base = {
+    skipToText: 'Skip to',
+    mainMenuText: 'Main Menu',
+    searchText: 'Search',
+    mainContentText: 'Main Content',
+    footerText: 'Footer'
+};
+exports.Default = Template.bind({});
+exports.Default.args = base;
+exports.NoSearch = Template.bind({});
+exports.NoSearch.args = __assign(__assign({}, base), { hasSearchLink: false });

package/dist/stories/components/SocialCreditLink.stories.js

@@ -0,0 +1,34 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+exports.Default = void 0;
+var SocialCreditLink_vue_1 = __importDefault(require("@/components/social-credit-link/SocialCreditLink.vue"));
+exports["default"] = {
+    component: SocialCreditLink_vue_1["default"],
+    title: 'Components/To be reviewed/SocialCreditLink'
+};
+var Template = function (args) { return ({
+    components: {
+        VsSocialCreditLink: SocialCreditLink_vue_1["default"]
+    },
+    setup: function () {
+        return {
+            args: args
+        };
+    },
+    template: "\n        <VsSocialCreditLink v-bind=\"args\"></VsSocialCreditLink>\n    "
+}); };
+var base = {
+    credit: 'VisitScotland',
+    socialPostUrl: 'http://www.visitscotland.com',
+    source: 'instagram'
+};
+exports.Default = Template.bind({});
+exports.Default.args = base;
+exports.Default.globals = {
+    backgrounds: {
+        value: 'dark'
+    }
+};