### Install Design System Package Source: https://github.com/scottish-government-design-system/design-system/blob/main/README.md Install the Scottish Government Design System package using npm. Ensure Node.js is installed, preferably the latest LTS version or a minimum of 8.10.0. ```bash npm install @scottish-government/design-system ``` -------------------------------- ### Import and Use PromiseRequest Source: https://github.com/scottish-government-design-system/design-system/blob/main/src/base/tools/promise-request/readme.md Import the PromiseRequest script and use it to make a GET request. Handle the response using .then() for success and .catch() for errors. ```javascript import PromiseRequest from '../path/to/design-system/src/base/tools/promise-request/promise-request'; ... PromiseRequest(myUrl) .then(result => successFunction(result)) .catch(result => failFunction(result)); ``` -------------------------------- ### Display Paginated Results Range Source: https://github.com/scottish-government-design-system/design-system/blob/main/src/components/search-results/readme.md On subsequent pages, show the range of results currently displayed (e.g., 'Showing 21 to 30') along with the total count and search term. The `start` attribute indicates the starting position of the current results set. ```html Showing 21 to 30 of 87 results for search term ``` -------------------------------- ### Build Production Files Source: https://github.com/scottish-government-design-system/design-system/blob/main/README.md Compile and optimize CSS, JavaScript, and static assets for production use. This command also runs automated tests and updates the /dist directory. ```bash npm run prepack ``` -------------------------------- ### Initialize Autocomplete Component Source: https://github.com/scottish-government-design-system/design-system/blob/main/src/components/autocomplete/README.md Instantiate the Autocomplete object with a target DOM element, search endpoint URL, and optional customization settings. The `suggestionMappingFunction` is crucial for transforming API data into the format the autocomplete expects. ```javascript const autocomplete = new Autocomplete( document.getElementById('site-search-autocomplete'), 'https://www.example.com/path/to/autocomplete?query=', { suggestionMappingFunction: function (suggestionsObj) { return suggestionsObj.map(suggestionsObj => ({ key: suggestionsObj.key, displayText: suggestionsObj.disp, weight: suggestionsObj.wt, type: suggestionsObj.disp_t, category: suggestionsObj.cat } )); } }); autocomplete.init(); ``` -------------------------------- ### Custom Icon Image Path Source: https://github.com/scottish-government-design-system/design-system/blob/main/src/components/date-picker/readme.md Configure the Date Picker component with a custom path for the icon image during instantiation. ```javascript myDatePicker = new DSDatePicker(myelement, {imagePath: '/my/image/path/'}); ``` -------------------------------- ### Import and Use Breakpoint Check Source: https://github.com/scottish-government-design-system/design-system/blob/main/src/base/utilities/breakpoint-check/readme.md Import the breakpointCheck function and use it to conditionally execute code based on the current viewport size. The function accepts a breakpoint name ('small', 'medium', 'large', 'xlarge') and returns a boolean. ```javascript import breakpointCheck from '../path/to/design-system/src/base/utilities/breakpoint-check/breakpoint-check'; ... myElement.addEventListener('click', function (event) { if (breakpointCheck('medium')) { // tablet and above behaviour } else { // other behaviour } }); ``` -------------------------------- ### Import and Use Temporary Focus Source: https://github.com/scottish-government-design-system/design-system/blob/main/src/base/tools/temporary-focus/readme.md Import the temporary focus script and use the exported function to set focus on a specific element. Ensure the element exists in the DOM before calling the function. ```javascript import temporaryFocus from '../path/to/design-system/src/base/tools/temporary-focus/temporary-focus'; ... const elementToFocus = document.getElementById('my-element'); temporaryFocus(elementToFocus); ``` -------------------------------- ### Responsive Breakpoint CSS Source: https://github.com/scottish-government-design-system/design-system/blob/main/src/all/all.html This CSS defines display rules for different screen sizes, allowing components to adapt their visibility based on breakpoints. ```css .ds_breakpoint-check { display: none; } @media screen and (min-width: 480px) { .ds_breakpoint-check.ds_breakpoint-check--small { display: block; } } @media screen and (min-width: 768px) { .ds_breakpoint-check.ds_breakpoint-check--medium { display: block; } } @media screen and (min-width: 992px) { .ds_breakpoint-check.ds_breakpoint-check--large { display: block; } } @media screen and (min-width: 1200px) { .ds_breakpoint-check.ds_breakpoint-check--xlarge { display: block; } } ``` -------------------------------- ### Set a Storage Item with Category Source: https://github.com/scottish-government-design-system/design-system/blob/main/src/base/tools/storage/readme.md Use `storage.set()` to store an item. The item is only set if the user has opted into the specified category. Supports cookies, local storage, and session storage. ```javascript storage.set({ type: storage.types.cookie, category: storage.categories.preferences, name: 'warningBannerDismissed', value: 'true', expires: 7 }); ``` -------------------------------- ### HTML Structure for Autocomplete Source: https://github.com/scottish-government-design-system/design-system/blob/main/src/components/autocomplete/README.md This HTML provides the necessary structure for the autocomplete component, including input fields, labels, buttons, and a container for suggestions. Ensure the IDs and classes match those expected by the JavaScript initialization. ```html
``` -------------------------------- ### Using the Abbreviation Tag Source: https://github.com/scottish-government-design-system/design-system/blob/main/src/base/core/abbr/readme.md Use the `` tag instead of the deprecated `` tag. If the abbreviation does not have a title attribute, its underline is not shown. ```html HTML ``` ```html HTML ``` -------------------------------- ### Allowed Date Ranges Source: https://github.com/scottish-government-design-system/design-system/blob/main/src/components/date-picker/readme.md Set the earliest and latest selectable dates using data-mindate and data-maxdate attributes. The date format follows the data-dateformat attribute or defaults to DMY. ```html ``` -------------------------------- ### Display Total Results on First Page Source: https://github.com/scottish-government-design-system/design-system/blob/main/src/components/search-results/readme.md On the first page of results, display the total number of results and the search term. The `data-total` attribute on the list element stores the total count for tracking scripts. ```html 87 results for search term ``` -------------------------------- ### Check Cookie Permissions Source: https://github.com/scottish-government-design-system/design-system/blob/main/src/base/tools/storage/readme.md Use `window.storage.hasPermission()` to check if a user has granted permission for a specific cookie category. This is useful for conditionally executing code that relies on user consent. ```javascript if (window.storage.hasPermission('preferences')) { // do something } ``` -------------------------------- ### Date Formats Source: https://github.com/scottish-government-design-system/design-system/blob/main/src/components/date-picker/readme.md Specify the desired date format using the data-dateformat attribute on the input element. Defaults to DMY if not provided. ```html ``` -------------------------------- ### Hide This Page Button Placement Source: https://github.com/scottish-government-design-system/design-system/blob/main/src/components/hide-this-page/readme.md Place this button code inside your main layout container (.ds_layout) for correct placement. It utilizes CSS grid and sticky positioning for desktop and fixed positioning as a fallback for older browsers. ```html
``` -------------------------------- ### Breakpoint Check CSS Source: https://github.com/scottish-government-design-system/design-system/blob/main/src/base/utilities/breakpoint-check/breakpoint-check.html These styles define how elements with the class '.ds_breakpoint-check' behave at different screen widths. The base style hides the element, and media queries reveal it for specific breakpoints. ```css .ds_breakpoint-check { display: none; } @media screen and (min-width: 480px) { .ds_breakpoint-check.ds_breakpoint-check--small { display: block; } } @media screen and (min-width: 768px) { .ds_breakpoint-check.ds_breakpoint-check--medium { display: block; } } @media screen and (min-width: 992px) { .ds_breakpoint-check.ds_breakpoint-check--large { display: block; } } @media screen and (min-width: 1200px) { .ds_breakpoint-check.ds_breakpoint-check--xlarge { display: block; } } ``` -------------------------------- ### Remove a Storage Item Source: https://github.com/scottish-government-design-system/design-system/blob/main/src/base/tools/storage/readme.md Use `storage.remove()` to delete a storage item. This method requires the storage type and the item's name. ```javascript storage.remove({ type: storage.types.cookie, name: 'warningBannerDismissed' }); ``` -------------------------------- ### Mobile Display Class Source: https://github.com/scottish-government-design-system/design-system/blob/main/src/components/hide-this-page/readme.md Add the 'ds_has-hide-page' class to the body element for correct display of the 'hide this page' button on mobile devices. ```html ``` -------------------------------- ### Import and Use ID Modifier Source: https://github.com/scottish-government-design-system/design-system/blob/main/src/base/tools/id-modifier/readme.md Import the id-modifier script and use the exported function to generate unique IDs for elements. This is useful for dynamically setting IDs and associating them with ARIA attributes. ```javascript import elementIdModifier from '../path/to/design-system/src/base/tools/id-modifier/id-modifier'; ... const toggle = document.querySelector('.my-toggle'); const content = document.querySelector('.my-content'); content.id = content.id || `my-content-${elementIdModifier()}`; toggle.setAttribute('aria-controls', content.id); ``` === COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.