Design Guide v10.13.0

Changelog

[10.13.0] - 11.11.2024

Identity

• Colors

  • updated primary color from current value #FDC129 to actual Brand guideline's #FDC92A

• Logotypes

  • updated logotype to the new fixed version
  • update Documentation to enforce recommended pathname use

Component changes

• Toggle
  • updated colors
  • added new theme colors (white and gray)
• Expandable PayEx (contribution from Simon Wahlstrom 💫)
  • font family change for PayEx expandables
• Button PayEx (contribution from Johanna Prinz 💫)
  • font family change
  • colors updated
• Table PayEx (contribution from Johanna Prinz 💫)
  • colors updated
  • hover color fixed

Technical changes

• updated dependencies

Design Guide v10.12.2

Changelog

[10.12.2] - 16.08.2024

Component changes

• Typography

  • change font family of "title 6"/h6 from Arial to the brand's headline font (e.g. "SwedbankPay Headline Bold" or "Futura PT W08 Demi" depending on brand)

• Progress-steps

  • fix UI of the horizontal yellow line when the 1st and last steps are in state “ongoing selected”

• Dropdown

  • fix script for initating for a specific id (init(id))

Design Guide v10.12.1

Changelog

[10.12.1] - 21.06.2024

Component changes

• Dialog

  • if no invoker or close btn JS fails gracefully, providing helpful feedback in the console instead of throwing Error
  • CSS support for old syntax now checks it is not picked up also by the new syntax (make sure not dialog.dialog)
  • new dialog can have multiple invokers

• Buttons

  • loading spinner of buttons keep their aspect-ratio even if the buttons is squashed, when they're in overflow state

• Cards

  • add support for div.illustration & picture elements in lieu of the img element as illustrations of used in the cards component (changes in documentation will come in a future release)
  • default cards wide with no img and no text content -> align-items: center (better default when title wraps)

• Dropdown

  • dropdown.init() method now accept id parameter to initialize specific dropdowns, instead of always all dropdowns found in the DOM

• Utility classes

  • Add utility classes for display grid and inline grid

Technical changes

• chore deps (update deps packages minor versions)

Design Guide v10.12.0

Changelog

[10.12.0] - 16.05.2024

Component changes

• Input fields

  • Labels line-height increased & mobile values adjusted, so values are in sync with h4 typography style

• Radio inputs

  • Minor non-breaking UI change to the default input radio
  • Minor UI changes to checkmark variant
    • Some non-breaking UI changes (colors, width, ...)
    • Now we achieve the checkmark icon using span.checkmark-icon instead of loading an actual icon element with an svg
    • New "large" variant for checkmark radio input
    • Possibility to add a subtext inside the checkmark variant (use span.subtext)

• Buttons

  • minor non-breaking UI updates (height for size large, unify hover state, update active & focus-visible UI, and more)
  • add Danish MitId button style (you can use either i.bank-id-dk OR i.mitid-dk, both are supported)
  • secondary buttons get a transparent background-color

• Cards

  • fix style .cards-wide on mobile

• Dialog

  • UI update
  • new syntax, leveraging the standard tag
  • silent support for the old syntax until the next major release
  • add transitions

Technical changes

• chore deps (update deps packages minor versions)

• remove Sentry from codebase

Design Guide v10.11.0

Changelog

[10.11.0] - 21.03.2024

Component changes

• Cards
  • update Cards style & syntax. The update requires code changes from DG consuming devs in HTML. BUT there is silent support for "old" card syntax until next major version release. Please check the documentation for more details.
  • the new UI requires the introduction of new classes (.cards-cta, span.arrow, ...). Unless one of these new classes (.cards-cta) is present, then the old UI will be used, by checking conditionally cards:has(.cards-cta). If your project does NOT support the :has() selector yet, but requires fallback support for the old UI, then add .legacy class to the .cards element.
  • deprecated cards variants (.primary, .secondary, .tertiary)
  • cards title text need to have the .h4 class

Technical changes

• Dependencies updates (finished GH actions Node -> 20 update & others misc)

Design System website

• update Playbook Profiles content

Design Guide v10.10.1

Changelog

[10.10.1] - 14.02.2024

Component changes

Non breaking UI changes

• Icons migration step 2 (still non-breaking. But the migrations is decided and is happening, so move when you can. Silent support of Material-icons until next major version release).
  • Toast icons are modified. Since Toast is created entirely via a script shipped in the package, nothing is requiring from devs consuming the package. But expect a change in the icon used by the Toast component.

NON Breaking UI changes BUT CAN & SHOULD modify code when have time

• Tags
  • the close icon is now a cross set via CSS only, no need to add an <i> element anymore
• Dialog
  • the close icon is now a cross set via CSS only, no need to add an <i> element anymore
• Progress steps
  • the "check" icon for steps completed should be converted to <i class="completed steps-icon"></i>

UI bugfixes

• Input addon (pre or post input) color when input is disabled

Design System website

• Migrate icons used on the DS documentation website from Material-icons to Atlas + Swepay-icon custom icons

Design Guide v10.10.0

Changelog

[10.10.0] - 06.02.2024

Component changes

Non breaking UI changes

• Icons migration step 1 (NON BREAKING ... for now and until next major release. But we're moving away from Google's material-icons)
  • Import Atlas icons (via CDN via CSS) for Atlas icons
  • Add custom icons "Swepay-icons": svg icons saved locally to complement the ones missing from Atlas icons set (called Swepay-icons but supported for both Swedbankpay AND PayEx sides)
  • Add support in the components styles for the Atlas icons and our new custom made "Swepay-icons"

Maintenance

• npm packages dependencies upgrades

Design System website

• Update iconography page

  • Add sections about new Atlas and custom icons
  • Improve sections about sizes
  • Update status of material-icons

• Deadlink fix (thanks Yvonne for the heads-up)

Design Guide v10.9.1

Changelog

[10.9.1] - 24.01.2024

Component changes

Non breaking UI changes

• PayEx - non-breaking UI updates
  • color variables updates (brand-secondary hover, btn-secondary-hover, disabled, ...)
  • input fields colors (for states disabled & success)
  • badge colors
  • skip-link font
  • link
    • hover state colors on bright mode
    • hover state for inline links
  • code tags secondary & tertiary background colors

Bugfix

• Tooltip
  • fix position tooltip (it got detached from its parent element a few versions back)

Maintenance

• npm packages dependencies upgrades

Design System website

Design Guide v10.9.0

Changelog

[10.9.0] - 24.11.2023

Component changes

Non breaking UI changes

• Typography

  • update typography values (line-heights)
  • add text-wrap balance for headings & pretty for paragraphs (progressive enhancement)

• Colors ( & colors utilities):

  • some colors variables got updated
  • removed the possibility to combine text-color utility classes WITH .text-muted to decrease their opacity
  • .text-muted class still exist, but it will always mean a full opacity color

Maintenance

• npm packages dependencies upgrades

Design System website

• Update the Identity/Colors page for SwedbankPay side

Design Guide v10.8.7

Changelog

[10.8.7] - 07.11.2023

Component changes

• Topbar - v2 experimental stage - disabled by default (migration involves breaking changes)

Design System website

• Add the new Playbook section in Identity