v4.1.1

Scottish Government Design System v4.1.1

This release fixes a bug with the cookie notification banner that was introduced in v4.1.0.

To install this version with npm, run npm install @scottish-government/design-system@4.1.1

Cookie notification banner

In v4.1.0 the notification banner component changed to use flexbox. This component's layout is inherited by the cookie notification banner, causing a layout defect where content elements appeared side by side instead of stacked. A fix was made in pull request #279 DSP-1632 Add legacy support for cookie notification message layout.

The fix includes support for the current HTML markup, but this has been marked as deprecated and it is recommended that you update to the new markup. Support for this legacy code will be removed in a future release.

To support flexbox the markup should be changed to place the buttons within the same block as the text content.

For example

<div class="ds_notification__text">
   <p>We use <a href="/cookies/">cookies</a> to collect anonymous data to help us improve your site browsing experience.</p>
   <p>Click 'Accept all cookies' to agree to all cookies that collect anonymous data. To only allow the cookies that make the site work, click 'Use essential cookies only.' Visit 'Set cookie preferences' to control specific cookies.</p>
</div>
<div class="ds_button-group">
   <button class="ds_button ds_button--small ds_button--secondary js-accept-all-cookies" type="button">Accept all cookies</button>
   <button class="ds_button ds_button--small ds_button--secondary js-accept-essential-cookies" type="button">Use essential cookies only</button>
   <a href="/cookies/">Set cookie preferences</a>
</div>

Should be changed to

<div class="ds_notification__text">
   <p>We use <a href="/cookies/">cookies</a> to collect anonymous data to help us improve your site browsing experience.</p>
   <p>Click 'Accept all cookies' to agree to all cookies that collect anonymous data. To only allow the cookies that make the site work, click 'Use essential cookies only.' Visit 'Set cookie preferences' to control specific cookies.</p>
   <div class="ds_button-group">
      <button class="ds_button ds_button--small ds_button--secondary js-accept-all-cookies" type="button">Accept all cookies</button>
      <button class="ds_button ds_button--small ds_button--secondary js-accept-essential-cookies" type="button">Use essential cookies only</button>
      <a href="/cookies/">Set cookie preferences</a>
   </div>
</div>

v4.1.0

Scottish Government Design System v4.1.0

This release includes a new file upload component. It also introduces additional states for warning, information and error for the notification message component. Notification banner and warning text components have had changes made to make them consistent with notification message.

To install this version with npm, run npm install @scottish-government/design-system@4.1.0

New features

File upload

A new component that supports single and multiple file uploads with a larger target area for drag and drop functionality. This change was made in pull request #253 DSP 1557 single file upload.

Tracking of drag and drop events was added in pull request #277 DSP 1557: File upload - tracking for drop events.

Notification message

These changes were made in pull request #273 DSP-1595 Add support for other states to notification message and close button support:

• new states for warning, information and error, each with a different colour and icon
• new optional 'close' button
• new tracking attributes that include the message state

Changes

Notification banner

These changes were made in pull request #276 DSP-1598, DSP-1599 update warning triangle icon on 'warning text' and 'notification banner':

• tightened spacing of elements
• applied new 'warning' SVG icon
• removed hover state from 'close' button
• reduced size of 'close' X symbol
• refactored to use flexbox instead of absolutely-positioned items
• removed 'icon inverse' variant
• removed 'icon colour' variant

Warning text

These changes were made in pull request #276 DSP-1598, DSP-1599 update warning triangle icon on 'warning text' and 'notification banner':

• tightened spacing of elements
• applied new 'warning' SVG icon
• provided legacy fallback to avoid a breaking change (icon is applied as CSS background and recreated with CSS shapes for high contrast users)

Tooling

Testing related scripts were changed as part of pull request #277 DSP 1557: File upload - tracking for drop events:

• separated 'fireCustomEvent' into its own module for use by multiple scripts
• moved test-related scripts ('firecustomEvent', 'loadHtml') into /test

The version of vitest was bumped from 4.0.4 to 4.1.7 as part of pull request #276 DSP-1598, DSP-1599 update warning triangle icon on 'warning text' and 'notification banner'.

Fixes

We fixed the vertical position of the currency symbol within a currency text input in pull request #272 https://github.com/scottish-government-design-system/design-system/pull/272

Security updates

The following updates were made:

• Bump postcss from 8.5.6 to 8.5.12
• Bump @xmldom/xmldom from 0.8.12 to 0.8.13

v4.0.1

Scottish Government Design System v4.0.1

This release fixes a bug that was introduced in version 4.0.0 with the autocomplete component.

To install this version with npm, run npm install @scottish-government/design-system@4.0.1.

Fixes

This release contains a fix to Issue 274, correcting an issue where the Autocomplete component could cause browsers to freeze if there were more returned results than could fit in the viewport.

v4.0.0

Scottish Government Design System v4.0.0

This release includes a number of breaking changes, please review these release notes before upgrading from a previous version.

To install this version with npm, run npm install @scottish-government/design-system@4.0.0

Improvements to tooling

JavaScript

The following changes were made in pull request #237 Typescript/Vite/Vitest/Eslint.

Code quality

• Added ESLint
• Migrated from JavaScript to TypeScript
• Improved documentation adding JSDoc-style comments and annotations

Build

• Migrated from Webpack to Vite
• Removed Babel

Testing

• Migrated unit tests to Vitest
• Improved unit test coverage to 100%

Sass

The following changes was made in pull request #229 Sass updates.

Sass modules

We have changed the Sass code over to using modular Dart Sass. The previous method of combining Sass files using @import is now deprecated. You can find out more about how to use the @use and @forward rules on the Sass website.

Changing absolute values to relative values

We have changed any remaining absolute values defined in pixels to relative values such as rem.

Removal of deprecated code

The following deprecated items were removed or changed:

• Category header
• Callout
• Notification actions (from Notification banner)
• 2.35:1 aspect box ratio
• icon sizes 12px and 52px to 80px
• border colour names (Sass variables) - $ds_colour__border--dark and $ds_colour__border--light
• search results with sidebar layout
• icon mask
• grid-gap changed to gap

Mark legacy code as deprecated

The following will be removed in a future release:

• layout mixins
• block margins mixins
• box shadow mixin
• fancy underscore mixin
• heading mixins
• heading styles (alpha, gamma etc)
• icons mixins
• media query mixin
• form mixin for radio checkbox states
• navigation grid area for search results layout
• ds_category-list--narrow for narrow gaps between category list items
• using category item alongside card, it should now just be card within a category list (or card grid)
• .ds_phase-banner__content--stacked

Dropped support for IE11

Specific CSS and JavaScript support for Internet Explorer 11 has now been removed. The change to JavaScript was made as part of the tooling updates while the CSS parts were made in pull request #248 DSP-1470 Remove CSS support for old browsers.

Internet Explorer 11 fallback scripts have been removed. You should no longer use DS.page or DS.components.AspectBox.

Other breaking changes

File path changes

Form components were previously separated out in the /src/forms directory. The lead paragraph styling, defined by the .ds_leader and .ds_leader-first-paragraph classes was previously in the base style settings. These have been moved to sit alongside the other components in the /src/components directory in pull request #260 DSP-1522 Restructure files
.

If you are accessing the compiled assets from the /dist directory then the paths to these remain the same.

If you were accessing component JavaScript files from /src these are now TypeScript files. You can continue to use them if you are working with TypeScript, otherwise you should change your paths to access the compiled JavaScript in /dist/scripts. For example, /dist/scripts/components/accordion/accordion.js.

Date picker spacing

Spacing rules have been removed from the ds_datepicker class to standardise the use of the ds_question class to set spacing on form elements. Date picker instances should be wrapped in a ds_question element for correct spacing, just like other form fields.

This change was made in pull request #241 DSP-1344 Remove bottom margin from ds_datepicker.

File download thumbnail outline

An outline can be applied to the thumbnail of a file download using a new ds_file-download__thumbnail-image--outlined modifier class.

For example:

...
<img class="ds_file-download__thumbnail-image  ds_file-download__thumbnail-image--outlined" src="/images/placeholders/document-thumbnail.png" alt="">
...

This replaces the previous method where outlines were always applied unless the image used was an SVG. This change was made in pull request #242 DSP-1321 Modifier class for file download thumbnail border.

Reveal content

This has been removed in favour of always having the question visible.

This change was made in pull request #244 DSP-1544 Remove reveal content component.

Card navigation pattern

This should be changed to use the new card grid.

For example, change the grid element:

<ul class="ds_category-list  ds_category-list--grid  ds_category-list--narrow">

to

<ul class="ds_card-grid  ds_card-grid--narrow  ds_card-grid--min-height  ds_card-grid--medium-2">

The new card component can then be used within this grid.

For example, change:

<li class="ds_card  ds_card--has-hover  ds_card--fixed-height">
    <div class="ds_category-item  ds_category-item--card">
        <h2 class="ds_category-item__title">
            <a href="${link}" class="ds_category-item__link">Card heading</a>
        </h2>
        Card content
    </div>
</li>

to

<li class="ds_card  ds_card--has-hover">
    <div class="ds_card__content">
        <div class="ds_card__content-header">
            <h2 class="ds_card__title">
                <a href="${link}" class="ds_card__link  ds_card__link--cover">Card heading</a>
            </h2>
        </div>
        <div class="ds_card__content-main">
            <p class="ds_category-item__summary">Card content</p>
        </div>
    </div>
</li>

Renamed components

The JavaScript class for mobile navigation, part of the 'site navigation' component, has been renamed from MobileMenu to SiteNavigation.

The JavaScript class for the 'hide this page' component has been renamed from HidePage to HideThisPage.

New features

Card component and notification tag

A defined card component is now available. This includes a 'navigation' variant where the entire card is a single link. Cards can optionally include an icon a new notification tag component. A simple grid for cards is also included which can be used to replace the previous card navigation pattern.

These were made in pull requests #252 Card with notification tag, #267 Card fixes ahead of v4 release and #254 DSP-1560 Add modifiers to card grid for navigation pattern.

Radios and checkboxes sub question

A radio button or checkbox can have a sub question positioned underneath it. This should be used instead of reveal content which has been removed.

This change was made in pull request #240 DSP-1451 Additional question for radios and checkboxes.

Changes

Confirmation message

This has been changed to become an alias of 'Notification message' which will be included in a future release and have confirmation as one of its 'states'.

This change was made in pull request #243 DSP-1514 Add Notification message component

Fixes

We fixed the idModifier script to understand the DS object global scope in pull request #245 DSP-1556 Make idModifier understand DS on global scope.

Security updates

The following updates were made:

• Pull request #268 DSP-1536 Bump versions of brace-expansion
• Pull request #266 Bump @xmldom/xmldom from 0.8.11 to 0.8.12
• Pull request #264 Bump picomatch from 2.3.1 to 2.3.2
• Pull request #262 Bump flatted from 3.3.3 to 3.4.2
• Pull request #255 DSP-1536 Fix dependency vulnerabilties
• Pull request #250 Bump immutable from 5.1.4 to 5.1.5
• Pull request #249 Bump svgo from 2.8.0 to 2.8.2
• Pull request #247 Bump rollup from 4.53.3 to 4.59.0
• Pull request #246 Bump minimatch

v3.4.1

Scottish Government Design System v3.4.1

This release includes fixes to:

• Button component focus
• Back to top component positioning

To install this version with npm, run npm install @scottish-government/design-system@3.4.1.

Fixes

We fixed inconsistent focus states with the button component in pull request #233 DSP-1481 Fix outline for button focus. Thanks to @lewisdorigo for reporting this issue.

We fixed incorrect positioning of the back to top component in pull request #232 DSP 1480 - Back to top improvements.

Security updates

The following updates were made:

• Pull request #230 Bump lodash from 4.17.21 to 4.17.23

v3.4.0

Scottish Government Design System v3.4.0

This release includes small updates to:

• Site title within the site header
• Details
• Back to top

To install this version with npm, run npm install @scottish-government/design-system@3.4.0.

Changes

Site title

The font weight of the site title within the site header pattern has been changed from light to normal.

We made this change in pull request #224 DSP-1341 Change site header branding title to normal weight

Details

The spacing underneath this component has been changed to be consistent when it is both open and closed.

We made this change in pull request #225 DSP-847 Adjust margin on details component so consistent when open an…

Back to top

The back to top button is now always accessible using keyboard navigation and will receive focus even if the page is too short for the button to be visible.

We made this change in pull request #222 DSP-1438 Back to top: focus behaviour when hidden

Fixes

We fixed the tracking script duplicating some datalayer entries in pull request #226 DSP-1318 Duplicates being added to datalayer.

Security updates

The following updates were made:

• Pull request #223 Bump js-yaml from 4.1.0 to 4.1.1
• Pull request #227 Bump qs and body-parser

v3.3.2

Scottish Government Design System v3.3.2

This release contains changes that fix a display bug that was introduced in v3.3.1 with the 'back to top' and 'datepicker' components.

To install this version with npm, run npm install @scottish-government/design-system@3.3.2.

Fixes

We have introduced new override classes to set the offset positioning for the 'back to top' and 'datepicker' components. The previous method, implemented in v3.3.1, was limited in support by current browsers.

v3.3.1

Scottish Government Design System v3.3.1

This release contains changes that will now support implementation with strict content security policies (CSP).

To install this version with npm, run npm install @scottish-government/design-system@3.3.1.

Fixes

We have removed the use of setting custom properties with JavaScript and replaced this where required.

We've changed the following components:

• Back to top
• Date picker
• Side navigation (value being set in JavaScript is no longer being used so this has been removed)

v3.3.0

Scottish Government Design System v3.3.0

This release contains a range of small updates to:

• tracking script
• summary list
• site footer
• form spacing and labels
• prefilled value list
• page metadata
• date picker and warning text
• various scripts
• various bug fixes

To install this version with npm, run npm install @scottish-government/design-system@3.3.0.

New features

Tracking script

We've added the canonical url to the datalayer.

We made these changes in pull request #210 DSP-1327 Add canonical url to datalayer.

Summary list

We’ve added support for including summary card or summary list content within another summary list's answer. This is intended to be used for more complex forms when displaying submitted answers back to the user.

We made these changes in pull request #204 DSP-1332 Add support for compound answers within summary list.

Changes

Site footer

We've changed the size and position of the 'OGL' logo in the site footer to meet the brand guidelines of the Open Government Licence and removed the link from the logo as it is already present in the footer text.

We made these changes in pull request #209 DSP-1362 Footer OGL/copyright: stack the icon and text, remove left margin.

Form spacing and labels

We've changed the bottom margin below ds_question and ds_datepicker to increase the visual separation between form elements.

We've specified the font size on ds_label elements so they can be applied to fieldset legends for consistent presentation in a form.

We made these changes in pull request #198 DSP-1061 Form spacing and legend sizing changes and pull request #214 DSP-1136 Remove bottom margin on ds_datepicker__input-wrapper.

Prefilled value list

We've simplified the 'Change' button and moved it underneath the value rather than alongside.

For example, change:

<dl class="ds_prefilled-value-list" aria-label="Your current answers">
    <dt class="ds_prefilled-value-list__key">Postcode</dt>
    <dd class="ds_prefilled-value-list__value">
        <div>EH6 6QQ</div>
        <button type="button" class="ds_link  ds_prefilled-value-list__value-actions">Change <span class="visually-hidden">your answer for: <q>Postcode</q></span></button>
    </dd>
</dl>

to:

<dl class="ds_prefilled-value-list" aria-label="Your current answers">
    <dt class="ds_prefilled-value-list__key" id="item-1-key">Postcode</dt>
    <dd class="ds_prefilled-value-list__value">
        <div>EH6 6QQ</div>
        <button type="button" class="ds_link  ds_prefilled-value-list__value-actions" type="button" aria-describedby="item-1-key">Change</button>
    </dd>
</dl>

We made these changes in pull request #215 dsp-965 Amend prefilled value list layout so key, value and button ar….

Page metadata

We've removed the 'tiny' font size from shortened page metadata at mobile sizes to make it consistent with other metadata,

We made these changes in pull request #205 DSP-959 Remove tiny size from inline metadata.

Date picker and warning text SVG icons

We've changed the date picker and warning text components to use their own SVG icons rather than referencing a path to the SVG sprite. This makes them easier to implement as there are no paths that need to be amended.

We made these changes in pull request #208 DSP-1361 Bake icons into components.

JavaScript

We've changed uses of element.innerText changed to element.textContent which is the recommended approach and has wider support.

We made these changes in pull request #207 DSP-1330 Change uses of element.innerText to element.textContent.

Fixes

We fixed the incorrect height of image cards in pull request #216 DSP-1420 Fix height of card content.

We fixed the position of the 'back to top' button, when the page height changes with content being displayed asynchronously, in pull request #212 DSP-1339 Back to top: component gets confused by async page updates.

We fixed the tracking script to support multiple aria-describedby attributes in pull request #211 DSP-1357 Tracking script error: referencing multiple items in aria-describedby triggers error.

v3.2.1

Scottish Government Design System v3.2.1

This release fixes a bug that was introduced in version 3.2.0 with the tabs component.

Fixes

We fixed tabs to not update window.location.hash when initialised in pull request #202 Bugfix: tabs should not update window.location.hash when initialised.