CHANGELOG.md

Changelog

All notable changes to this project will be documented in this file. See standard-version for commit guidelines.

4.0.0-beta.24 (2023-02-22)

4.0.0-beta.23 (2022-11-22)

4.0.0-beta.22 (2022-08-01)

4.0.0-beta.21 (2022-08-01)

4.0.0-beta.20 (2022-04-28)

4.0.0-beta.18 (2022-04-08)

4.0.0-beta.17 (2022-02-28)

4.0.0-beta.16 (2022-02-03)

4.0.0-beta.15 (2021-10-04)

4.0.0 (2021-10-04)

4.0.0-beta.14 (2021-09-15)

4.0.0-beta.13 (2021-09-14)

4.0.0-beta.12 (2021-08-26)

4.0.0-beta.11 (2021-08-24)

4.0.0-beta.10 (2021-08-24)

4.0.0-beta.9 (2021-08-24)

4.0.0-beta.8 (2021-08-20)

4.0.0-beta.7 (2021-06-24)

4.0.0-beta.5 (2021-06-15)

Bug Fixes

• build: infinite loop in build watch (5591894)
• input-wrapper: fix textarea resize in blink browsers (41a735c)
• react: Fix importing components in non-typescript react (522567d)

4.0.0-beta.4 (2021-05-18)

Features

• menu-item-nested: Add css variables (9cd2a23)

4.0.0-beta.3 (2021-05-17)

Features

• hamburger: Add --gds-hamburger-border-radius (f3278aa)
• input-wrapper: style for slotted textarea (b8f1b77)

4.0.0-beta.2 (2021-05-08)

Bug Fixes

• gds-search-form: remove hard-coded color value (369d7d0)
• search-form: fix positioning of floating search (b1cfb80)
• search-form: remove hard-coded color (3262a05)

4.0.0-beta.1 (2021-05-03)

Bug Fixes

• gds-search-form: remove hard-coded color value (369d7d0)
• search-form: fix positioning of floating search (b1cfb80)
• search-form: remove hard-coded color (3262a05)

4.0.0-beta.0 (2021-04-14)

⚠ BREAKING CHANGES

• variables: All variables have now been prefixed with --gds-. You can use the following commands to rename them in your theme

find -E . -type f -not -path "./node_modules/*" -not -path "./vendor/*" -regex ".*\.(js|css|scss|tsx|php)" -exec sed -i '' -E 's/--(color|spacing|body|heading|label|paragraph|tag|button|text-button|navigation|card|media-card|logo-grid-item|icon|accordion|menu-item)/--gds-\1/g' {} +

find -E . -type f -not -path "./node_modules/*" -not -path "./vendor/*" -regex ".*\.(js|css|scss|tsx|php)" -exec sed -i '' -E 's/(spacing|heading)-xxxs/\1-3xs/g' {} +
find -E . -type f -not -path "./node_modules/*" -not -path "./vendor/*" -regex ".*\.(js|css|scss|tsx|php)" -exec sed -i '' -E 's/(spacing|heading)-xxs/\1-2xs/g' {} +
find -E . -type f -not -path "./node_modules/*" -not -path "./vendor/*" -regex ".*\.(js|css|scss|tsx|php)" -exec sed -i '' -E 's/(spacing|heading)-xxl/\1-2xl/g' {} +
find -E . -type f -not -path "./node_modules/*" -not -path "./vendor/*" -regex ".*\.(js|css|scss|tsx|php)" -exec sed -i '' -E 's/(spacing|heading)-xxxl/\1-3xl/g' {} +

• variables: The following variables have changed name:

--heading-2xl-font-family: var(--heading-xxl-font-family);
--heading-2xl-font-weight: var(--heading-xxl-font-weight);
--heading-2xl-font-size: var(--heading-xxl-font-size);
--heading-2xl-line-height: var(--heading-xxl-line-height);
--heading-2xl-text-transform: var(--heading-xxl-text-transform);
--heading-2xl-letter-spacing: var(--heading-xxl-letter-spacing);
--heading-2xl-margin-top: var(--heading-xxl-margin-top);
--heading-2xl-margin-bottom: var(--heading-xxl-margin-bottom);

--spacing-3xs: var(--spacing-xxxs);
--spacing-2xs: var(--spacing-xxs);
--spacing-2xl: var(--spacing-xxl);
--spacing-3xl: var(--spacing-xxxl);

• variables: The following variables have been deprecated, please use the specific colors instead.

--color-primary: var(--color-ui-03);
--color-secondary: var(--color-ui-04);
--border-color-light: #dddddd;
--background-color-primary: var(--color-ui-background-01);
--background-color-secondary: var(--color-ui-background-02);
--text-color-primary: var(--color-black);

• gds-paragraph: The paragraph.base mixin has been deprecated since it's quite common for paragraph sizes to have both different font families and font weights.

Consuming projects that happen to use the SASS mixins can simply remove the mixin wherever it's used and things should keep working based on the size only.

• a11y: Menu item underline

--menu-item-underline-display has been replaced by --gds-menu-item-underline-active and the underlines are no longer spanning the entire block, only the text content. Additionally you can modify the offset and thickness; and --navigation-underline-color is now called --gds-menu-item-underline-color-active.

// BEFORE:
--menu-item-underline-display: none;
--navigation-underline-color: var(--color-black);

// AFTER:
--gds-menu-item-underline-active: underline;
--gds-menu-item-underline-thickness-active: 3px;
--gds-menu-item-underline-color-active: currentColor;
--gds-menu-item-underline-offset-active: var(--spacing-xxs);

Menu variables renamed

All --menu-* variables have been prefixed with --gds-menu instead.

// BEFORE:
--menu-text-align: left;
--menu-item-background-color-active: var(--background-color-primary);

// AFTER:
--gds-menu-text-align: left;
--gds-menu-item-background-color-active: var(--background-color-primary);

Markup change for ´`

Using <gds-menu-nested-item> should now wrap the link content in <gds-menu-item>.

 <gds-menu>
   <gds-menu-item-nested slot="item" submenu-icon="❯">
     <a slot="link" href="#first">
-      First item
+      <gds-menu-item>First item</gds-menu-item>
     </a>
   </gds-menu-item-nested>
 </gds-menu>

With the above change, the --gds-menu-item-nested-a-padding variable has now been removed and the padding is instead styled from the <gds-menu-item> component.

// REMOVED:
--gds-menu-item-nested-a-padding: var(--spacing-xs) 0;

Navigation gutters

Durings this refactoring the fixed menu height that used to be set var(--spacing-xxl), is now fluid and instead uses the following variables for adjusting the padding on <gds-menu-item> depending on the direction of the <gds-menu> component:

--gds-menu-item-padding-horizontal: var(--spacing-s) var(--spacing-s) calc(var(--spacing-s) - 0.15em) var(--spacing-s);
--gds-menu-item-padding-vertical: var(--spacing-s) var(--spacing-m) calc(var(--spacing-s) - 0.15em) var(--spacing-m);

This is likely to break some implementations or at least change the height of the navigation by a few pixels.

The navigation containers now supports --navigation-padding to consistently set left/right padding. You most likely need to change some theme styles for the right padding of the navigation as well as reduce the left padding for the navigation logo --navigation-logo-padding. By default the --navigation-padding sets the same values as before, making spacing identical as it used to on both desktop and mobile. If you override the variable you should consider the spacing both for desktop and for mobile.

// Before
--navigation-logo-padding: 0 0 0 var(--spacing-s);

// After
--navigation-logo-padding: 0;

Navigation hamburger icon

The navigations default mobile hamburger has now been changed to an animated <gds-hamburger> component, if you applied color styling to this in your theme you might need to make adjustments.

Navigation menu item justification

<gds-menu> used within a <gds-navigation> needs to specify that the menu items should be centered to maintain the previous behavior otherwise the menu will be aligned to the left.

Add this to your css:

// NEW VARIABLE:
--gds-menu-justify-content: center;

<gds-input-wrapper> no longer using shadow-dom

Due to accessibility issues and it not being possible to reference input fields in a slot from a <label> inside a component, the <gds-input-wrapper> is now using light-dom and scoped styles instead of shadow-dom. This could cause high specificity global styles to pollute the component.

Features

• a11y: make all components accessible (b5b069c)
• build: allow building from git (e37e94c)
• gds-hamburger: add component (3a290c4)
• gds-input-wrapper: add placeholder color variable (51a265b)
• gds-input-wrapper: split styling into mixins so they can be used in wordpress (ca44de5)
• gds-input-wrapper: style select inputs on safari (68d7923)
• gds-link: add full mode (b0c68f7)
• gds-menu-item: add variables for underline in all item states (59c9960)
• gds-navigation: add more css variables (9145b40)
• gds-paragraph: add per size variables and deprecate base mixing (4168276)
• gds-search-form: add component (f89aec0)
• gds-search-form: add native mediaquery support (2e41747)
• gds-visually-hidden: add component (e9bf15b)
• storybook: Add support for story controls (bd51bf8)
• submenu: add submenu and related components (9408cad)
• submenu: add support for mobile submenu (544e8bd)

Bug Fixes

• a11y: respect reduced motion user preference (ee5bfcf)

• audit: update dependencies (fe9b644)

• build: allow building from git (9765eb8)

• build: incorrect types property set in package.json (8d77ec9)

• gds-hint: fix overflow in safari (36bc0b7)

• gds-navigation: escape doesnt close mobile navigation (2ea7ba4)

• gds-search-form: add color variable for label before focused (e142ec7)

• gds-search-form: mobile safari overflow (0fa50bf)

• gds-search-form: properly center button icon (acf2223)

• spacing errors and support custom font weight in search form (c42c566)

• safari: use all:unset to reset button and input styling (0671da8)

• variables: prefix all variables with gds (f6f2dca)

• variables: remove confusing duplicate color variables (8d9df14)

• variables: rename xxs/xxl etc to use numeric names like 2xs/2xl (9ef0886)

3.17.0 (2021-03-26)

Features

• submenu: add support for mobile submenu (544e8bd)

3.16.0 (2021-03-12)

Features

• storybook: Add support for story controls (bd51bf8)
• submenu: add submenu and related components (9408cad)

Bug Fixes

• audit: update dependencies (fe9b644)

3.15.0 (2021-02-12)

3.14.0 (2021-02-12)

Features

• gds-navigation: add more css variables (9145b40)

3.13.1 (2021-02-02)

Bug Fixes

• audit: update commit lint and standard version (5cda963)
• audit: update dependencies (67e9e06)

3.13.0 (2021-02-02)

Features

• gds-media-card: add --media card height variable (30deaef)
• gsd-media-card: add --media-card-height variable (75219e2)

3.12.0 (2021-01-26)

3.11.0 (2021-01-13)

Features

• gds-accordion: add css variables for plain text accordion (aad6ffd)
• gds-accordion: can use expanded attribute to control expanding (51672cd)
• gds-button: add :active background color and image variables (d2ca3fa)
• gds-button: disabled button won't trigger click events (c7b992d)
• gds-google-maps: add Google Maps wrapper component (34f2f3d)
• gds-google-maps: can pass options to addMarker (2a87e35)
• gds-heading: can define top and bottom margins (d350172)
• gds-input-wrapper: add styles also for select element (34c3661)
• gds-label: add variables for line-height (9ba3446)
• gds-media-card: add --media-card-display variable (9877e2d)
• gds-media-card: add --media-card-media-padding variable (7dd87dc)
• gds-media-card: add --media-card-width variable (1d1b411)
• gds-navigation: add method to close menu (57afc5e)
• gds-slider: add gds-slider component that encapsulates input range (8f126cc)
• gds-youtube-player: displays an iframe based youtube player (6bb6140)

Bug Fixes

• gds-card: --card-width, --card-max-width now define correct props (a1d6c98)
• gds-google-maps: don't load Google Maps SDK if it's already loaded (8959954)
• gds-navigation: hide before hydration (666c299)

3.10.0 (2021-01-05)

Features

• gds-media-card: add --media-card-width variable (1d1b411)

3.9.0 (2020-12-02)

Features

• gds-button: add :active background color and image variables (d2ca3fa)

3.8.0 (2020-12-02)

Features

• gds-media-card: add --media-card-display variable (9877e2d)

3.7.0 (2020-11-28)

Features

• gds-label: add variables for line-height (9ba3446)

3.6.0 (2020-11-26)

Features

• gds-accordion: can use expanded attribute to control expanding (51672cd)

3.5.0 (2020-11-25)

Features

• gds-slider: add gds-slider component that encapsulates input range (8f126cc)

3.4.1 (2020-11-20)

Bug Fixes

• gds-google-maps: don't load Google Maps SDK if it's already loaded (8959954)

3.4.0 (2020-11-20)

Features

• gds-input-wrapper: add styles also for select element (34c3661)

3.3.1 (2020-11-11)

Bug Fixes

• gds-navigation: hide before hydration (666c299)

3.3.0 (2020-11-06)

Features

• gds-navigation: add method to close menu (57afc5e)

3.2.0 (2020-11-06)

Features

• gds-google-maps: can pass options to addMarker (2a87e35)

3.1.0 (2020-11-04)

Features

• gds-button: disabled button won't trigger click events (c7b992d)

3.0.0 (2020-10-29)

--card-width, --card-max-width change could potentially be a breaking change for some projects since they might have relied on --card-width actually defining max-width.

Maybe in the future we should try to postpone minor breaking changes to limit major version numbers for bigger changes.

Features

• gds-heading: can define top and bottom margins (d350172)

Bug Fixes

• gds-card: --card-width, --card-max-width now define correct props (a1d6c98)

2.3.0 (2020-10-27)

Features

• gds-google-maps: add Google Maps wrapper component (34f2f3d)

2.2.0 (2020-10-22)

Features

• gds-youtube-player: displays an iframe based youtube player (6bb6140)

2.1.0 (2020-10-22)

Features

• gds-accordion: add css variables for plain text accordion (aad6ffd)

2.0.0 (2020-10-19)

This version change should not require any modifications to the code, however, this will remove default support for older browsers (IE11, Edge 16-18, Safari 10, and ES5). If you need support for this, you need to follow these instructions: https://github.com/ionic-team/stencil/blob/master/CHANGELOG.md#-200-2020-08-31

Also if you find any problems with loading the .mjs file, then look into this: https://github.com/ionic-team/stencil/blob/master/CHANGELOG.md#dist-packagejson

Features

• stencil: update to version 2 (e5f50d1), closes /github.com/ionic-team/stencil/blob/master/CHANGELOG.md#-200-2020-08-31

1.1.0 (2020-10-14)

From version 1 onwards semver should be used as intended.

Features

• heading: add size specific font-family override (3648164)
• heading: reorganize heading and paragraph css variables (924f9c8)
• input-wrapper: use host element so it can be styled from outside (a59117d)

1.0.0 (2020-10-14)

Features

• hint: add gds-hint (888c61c)
• input-wrapper: add gds-input-wrapper (7e25654)
• paragraph: add xs size to cover special cases with smaller text (01818a6)
• text: add gds-text (eb55409)

0.41.0 (2020-10-08)

Features

• card: add --card-box-shadow-active css variable (13577c2)

Bug Fixes

• tag-group: fix tag-group mobile gutters (826004d)

0.40.0 (2020-10-05)

Bug Fixes

• card: add transition for box-shadow hover (a28df8f)

0.39.0 (2020-10-03)

Features

• accordion: add gds-accordion (1c1eee0)
• card: add --card-box-shadow-hover css variable (fa9d2a5)
• icon: better default value for hover (e1dbce2)
• label: add --label-text-transform css variable (5e1be19)
• menu, menu-item: add 4 css variables (ced896a)
• navigation: add styling customizations especially for mobile (9c0b02a)
• navigation: can slot anything for the mobile hamburger icon (db08d1d)
• storybook: rename component classifications (4df47be)

0.38.0 (2020-09-24)

Features

• accordion: add gds-accordion (1c1eee0)
• storybook: rename component classifications (4df47be)

0.37.0 (2020-09-18)

Features

• label: add --label-text-transform css variable (5e1be19)
• menu, menu-item: add 4 css variables (ced896a)
• navigation: add styling customizations especially for mobile (9c0b02a)

0.36.0 (2020-09-18)

Features

• icon: better default value for hover (e1dbce2)
• navigation: can slot anything for the mobile hamburger icon (db08d1d)

0.35.0 (2020-09-15)

Bug Fixes

• gds-card: remove align-items (fd2ec27)

0.34.0 (2020-09-15)

Features

• add variable --card-text-align (9ef974b)

0.33.0 (2020-09-15)

Features

• button: don't render icon slots without icons (3279ba2)
• icon: add Font Awesome icons as gds-icon (5c84122)

Bug Fixes

• button, text-button: slotted icons not rendering (b1382c1)

0.32.0 (2020-09-14)

Features

• icon: add Font Awesome icons as gds-icon (5c84122)

Bug Fixes

• button, text-button: slotted icons not rendering (b1382c1)

0.31.0 (2020-09-11)

Features

• button: don't render icon slots without icons (3279ba2)

0.30.1 (2020-09-02)

0.30.0 (2020-09-02)

0.29.0 (2020-09-02)

Features

• add rel attribute for nofollow etc (dcf755d)

Bug Fixes

• link: host element should also be block when set (61c2b96)
• media-card: support percentage card heights (466c7d7)

0.28.0 (2020-09-01)

Bug Fixes

• link: host element should also be block when set (61c2b96)
• media-card: support percentage card heights (466c7d7)

0.27.0 (2020-09-01)

Features

• media-card: use blur and background color blend mode (240431f)

Bug Fixes

• media-card: superimposed image side alignment support (e5e8dde)

0.26.0 (2020-08-28)

Features

• gds-button: support icon slots (331e640)
• gds-text-button: add hover effect (26a8668)
• gds-text-button: split button text variation to own component (6e8062c)
• heading: add xs size (8e55314)
• label: add xl size (785199a)
• mobile: fix basic mobile support (eaed152)
• tag-group: add tag group component (923d335)

Bug Fixes

• button: text-button variation padding and font weight (ba0f4e2)
• heading: remove top margin when first block (337e4e2)
• media-card: apply reduced paragraph spacing in content slot (ead79cc)
• media-card: fix vertical spacing for both slots and properties (10ddd13)
• media-card: lintfix (6dec26b)
• paragraph: adjascent block margins should overflow eachother (7790422)
• paragraph: composed paragraph blocks dont have correct size (2e352bf)
• tag: let host behave like inline-block to use margins (c87a7ac)
• vars: use color palette for variables and fix logo grid item width (2f555d2)

0.25.0 (2020-08-27)

Features

• gds-media-card: support overlay color and blur effect (48a00ce)

0.24.0 (2020-08-26)

Features

• add css variables for brand colors (a3f72c0)
• add navigation and menu (aa11b3b)
• components crucial to SEO render to Light DOM (5cffcc3)
• customize navigation link colors (3235e09)
• make Navigation more WP friendly (8230954)
• modified gds-navigation to be SEO friendly (6b23547)
• more css variables for buttons and labels (abd8c99)
• gds-navigation: add transparent attribute (3b0e80b)
• remove global box-sizing rules (60f92df)
• colors: remove gds prefix from color variables (a9a8f71)
• gds-button: add outline, border, and background variables for default/hover/active (3df9f7f)
• gds-card: add customization via css variables (68aa8cb)
• gds-heading: add letter-spacing and text-transform variables (7aa2a30)
• gds-heading: add more css variables for headings (a04cc41)
• gds-media-card: add --gds-media-card-media-height (b0027a8)
• gds-media-card: add free form content slot (e274a86)
• gds-media-card: add object-fit variable for card image (3822afb)
• gds-media-card: add superimposed image (f7778ac)
• gds-navigation: minor tweaks spacing and transparent color (d336aac)
• gds-tag: add border and padding variables (73571b1)
• gds-tag: add line-height variable (6699f48)
• logo-grid: support customizing the grid through variables (fa44a0e)
• tag can define colors and border via css variables (6881b74)
• wip (099a5e6)
• storybook: update to stable version 6 (1498775)

Bug Fixes

• audit warnings (16ba942)
• make button more WP friendly (a24adb3)
• navigation and button tweaks for WP (5d4b4ed)
• some styling issues with menu and labels (d35b1f9)
• somehow the stencil build is broken when using --dev flag (286fa05)
• gds-button: broken font-size (aff5276)
• gds-button: remove direct height definitions (eed0342)
• gds-media-card: remove unnecessary margin (db1e018)
• gds-media-card: rename superimposed attributes (f69a673)

0.23.1 (2020-08-25)

Features

• gds-tag: add line-height variable (6699f48)

0.23.0 (2020-08-25)

Features

• gds-tag: add border and padding variables (73571b1)

0.22.0 (2020-08-24)

Features

• gds-media-card: add object-fit variable for card image (3822afb)

0.21.0 (2020-08-21)

Bug Fixes

• gds-media-card: rename superimposed attributes (f69a673)

0.20.0 (2020-08-21)

Features

• gds-heading: add letter-spacing and text-transform variables (7aa2a30)

0.19.0 (2020-08-20)

Features

• colors: remove gds prefix from color variables (5b15dca)
• gds-card: add customization via css variables (68aa8cb)
• add css variables for brand colors (a3f72c0)

0.18.0 (2020-08-19)

Features

• gds-heading: add more css variables for headings (a04cc41)

0.17.2 (2020-08-17)

Bug Fixes

• gds-button: broken font-size (aff5276)

0.17.1 (2020-08-17)

Bug Fixes

• gds-button: remove direct height definitions (eed0342)

0.17.0 (2020-08-14)

Features

• gds-button: add outline, border, and background variables for default/hover/active (3df9f7f)
• storybook: update to stable version 6 (1498775)

0.16.1 (2020-08-14)

Features

• gds-navigation: minor tweaks spacing and transparent color (d336aac)

0.16.0 (2020-08-14)

Features

• gds-navigation: add transparent attribute (3b0e80b)

0.15.0 (2020-08-12)

Features

• gds-media-card: add superimposed image (f7778ac)

0.14.1 (2020-08-11)

Bug Fixes

• gds-media-card: remove unnecessary margin (db1e018)

0.14.0 (2020-08-10)

Features

• gds-media-card: add --gds-media-card-media-height (b0027a8)

0.13.0 (2020-08-10)

Features

• gds-media-card: add free form content slot (e274a86)

0.12.0 (2020-08-07)

Features

• tag can define colors and border via css variables (6881b74)

0.11.4 (2020-08-07)

Bug Fixes

• navigation and button tweaks for WP (5d4b4ed)

0.11.3 (2020-08-06)

Features

• customize navigation link colors (3235e09)

0.11.2 (2020-08-06)

Features

• make Navigation more WP friendly (8230954)

Bug Fixes

• somehow the stencil build is broken when using --dev flag (286fa05)

0.11.1 (2020-08-06)

Bug Fixes

• audit warnings (16ba942)
• make button more WP friendly (a24adb3)

0.11.0 (2020-07-03)

Features

• modified gds-navigation to be SEO friendly (6b23547)

0.10.0 (2020-07-02)

Features

• components crucial to SEO render to Light DOM (5cffcc3)

Bug Fixes

• some styling issues with menu and labels (d35b1f9)

0.9.0 (2020-07-01)

Features

• more css variables for buttons and labels (abd8c99)

0.8.0 (2020-06-30)

Features

• add navigation and menu (aa11b3b)
• wip (099a5e6)

0.7.0 (2020-06-29)

Features

• remove global box-sizing rules (60f92df)

0.6.0 (2020-06-28)

Features

• use shadow dom for all components (5e69386)

0.5.0 (2020-06-27)

Features

• add font character icon support for gds-button (b26b57c)

Bug Fixes

• fonts not loading in github pages (8da9a34)

0.4.0 (2020-06-26)

Features

• add gds-button (5ff831c)
• button tweaks (d9e2bcb)

Bug Fixes

• add forgotten file (d509a29)

0.3.0 (2020-06-26)

Features

• add gds-button (5ff831c)

0.2.0 (2020-06-26)

Features

• add basic colors (f4ae3ce)
• add commitlint (d05b827)
• add gds-body and proposal for variables (5e7e2a5)
• add gds-heading component (88fb6cc)
• add gds-label component (3724f96)
• add gds-link component (fa3fe4c)
• add gds-logo-grid and gds-logo-grid-item components (4748c2b)
• add gds-tag component (a105624)
• add general use gds-card container (e36752c)
• add standard-version tool (c14976e)
• add support for commitizen (8831ee6)
• automate changelog (23fe752)
• basic version of gds-media-card (fe8f9c9)
• rename gds-body to gds-paragraph (f275bc3)
• storybook to github pages (84840a5)
• use css custom variables and gilroy fonts in stories (c25a718)

Bug Fixes

• commit problems (931f103)
• include global index.css (c9c4786)
• minor issues from pull requests (5aaf738)