DesignGuide v4.6.1

Changelog

[4.6.1] - 2020-03-17

Fixed

• Sheet
  • Fixed a scroll bug whenever a user navigated away from a route without closing a sheet

DesignGuide v4.6.0

Changelog

[4.6.0] - 2020-03-16

Added

• Links
  • Added Links section

Changed

• Action link
  • Moved to Links
• Buttons
  • Changed color of executive button
• Input Group
  • Changed select height to 3rem
• Topbar
  • Made inactive elements gray to improve contrast between active element and inactive elements.

Fixed

• Forms
  • Fixed togglebox checkbox showing
• Design guide
  • Action list
    • Fixed javascript methods missing same capitalization as in script
  • Fix PayEx brand missing accordion styling

DesignGuide v4.5.0

Changelog

[4.5.0] - 2020-02-28

Added

• Accordion

  • Added accordion component

• Code tags

  • Added default code tags style when using html code tag

• Tables

  • Added plain table as an alternative

• Topbar

  • Added sticky topbar

Changed

• Alert

  • Removed turquise informative alert
  • Changed neutral alert to informative alert

• Button

  • Updated btn-link styling
  • Removed destructive button

• Dialog

  • Escape button can now be used to close dialog

• Expandable

  • Changed text color to #512b2b
  • Changed headline styling to be similar to H3

• Grid

  • Change gutter width to 32px

• Lists

  • Changed bordered item list border color and style

• Sidebar

  • Added more spacing from top
  • Removed automatic scrolling when a nav-leaf is clicked
  • Made only one element of each type open at a time

• Tables

  • Changed default table to be striped

• Tabs

  • Changed tabs default behavior. Basic tabs now covers 100% width on chosen breakpoint

• Topbar

  • Added brand line to topbar

• Design guide

  • Forms

    • Removed unnecessary input group from examples

  • Code tags

    • Made documentation more specific, with more and better examples

Fixed

• Action link

  • Fixed action link arrow not visible and misaligned in IE11

• Action list

  • Fixed action list not having same background as parent element on IE11

• Expandable

  • Fixed the yellow top border not properly aligned

• Sidebar

  • Fixed nav-leaf elements not properly aligned in IE11
  • Fixed sidebar covering more of the viewport

• Tabs

  • Fixed tabs incorrectly showing fade on IE11 in certain scenarios

• Design guide

  • Fixed Javascript methods missing component name on some methods

DesignGuide v4.4.0

Changelog

[4.4.0] - 2020-02-10

Added

• Logos
  • Added section presenting the different logos available
• Sidebar
  • Added sidebar component
• Design Guide
  • Sidebar
    • Sidebar documentation added
    • Sidebar example added

Changed

• Alert
  • Removed default alert
• Core/typography
  • Removed font-weight bold property from style sheet for H1-H3
• Favicon
  • Moved under Logos section
• HR
  • Changed color of HR to #d4c4bc
• Input and form groups
  • Removed has-success state. Only has-error state is shown when necessary.
  • All input fields now have a height of 48px, even when outside of Input group
• Status
  • Changed padding of status, altering the distance between the status circle and status text
• Topbar
  • Added hover state
  • Added more space between elements
• Design Guide
  • Alert
    • Changed icon used in informative alert examples
  • Tables
    • Moved to components section
  • Lists
    • Moved to components section
  • Charts
    • Moved to components section
  • Design guide now uses code tags provided
  • Design guide uses list instead of table to display JavaScript documentation
  • Design guide footer removed

Fixed

• Action list
  • Fix action list not working on IE and Edge

DesignGuide v4.3.0

Changelog

[4.3.0] - 2020-01-14

Added

• PNG logo
• Badge
  • For numbers, using Swedbank Headline instead of Arial
• Tabs
  • With scroll, have fades on the sides to signal more tabs, and an optional scroll state control function when control of the tabs scroll behaviour is needed
• Code tags
• Topbar
  • With PNG logo
• Alert
  • Alert informative with border-color #31a3ae and background-color #e8eff9
• Lists
  • Bullet list
• Core/typography
  • Akkurat Mono font
  • H4-H6
  • Hero title
  • Expandable with content from resources/typography
• Examples using Design Guide components and utilities

Changed

• Charts
  • Colors and opacity changed
  • No-fill set as default
• Badge
  • Renamed
  • Colors updated
• Core/typography
  • Lead text
    • Changed font-family, font-size, font-weight and line-height
• Alert
  • Changed alert-body margin
• Design Guide
  • Body text color to #512b2b
  • Download buttons in Resources section
  • Download buttons in Templates section
  • Bordered lists examples in core/lists
    • Changed H5 to H3
  • Action list examples in core/lists and core/iconography
    • Examples use new implementation of action list
  • Core/colors
    • Main colors split into sublists
  • Dialog, Topbar and Sheet open and close functions refactored

Fixed

• Core/Page layout
  • Had wrong topbar height
• Core/colors
  • Typos and naming inconsistencies

Release 4.2.1

Changelog

[4.2.1] - 2019-10-29

Changed

• H3 font size on mobile changed
• Checkbox beneath Togglebox visible on line break bug fixed
• Refresh bug on Resources and Templates sections fixed
• Image and download links in deployment fixed

DesignGuide v4.2.0

Changelog

[4.2.0] - 2019-10-17

Added

• Resources section added
• Templates section added

Changed

• Action Link with small text added
• Action Link for new tab added
• Readme updated and improved
• Whitelist urls added to Sentry
• Topbar wide close button bug fixed
• Status not vertically centered bug fixed

DesignGuide v4.1.0

Changelog

[4.1.0] - 2019-09-24

Changed

• New brown and gray scale added to components
• Fonts updated
• Tabs updated
• Slabs updated
• Action Links updated
• Documentation navigation updated
• Alert wrapping updated
• Form inputs updated
• Sheet animation updated
• Action List more accessible
• Pagination updated

DesignGuide v4.0.0

Changelog

[4.0.0] - 2019-09-04

Added

• Build flagging
  - E.g. npm run start:payex or npm run build:payex
  - These scripts adds a PayEx brand flag which is used to fetch PayEx variables, images and icons to render DesignGuide with a PayEx theme.

Changed

• Project infrastructure updated to support dual branding.
  • Generic brand "less" variables
  • Generic scripts
• Main output filenames have been renamed to
  • /scripts/dg.js
  • /scripts/dg-dashboard.js
  • /styles/dg-style.css
    • Due to a bug in webpack where a cachegroup cannot have the same name as an entry file (dg), this filename is suffixed with -style
• px and all references to this object are now: dg
  • E.g. dg.script.initAll(), dg.toast() etc...
• Alert colors updated
• Input fields
  • No longer italic errors
  • Font sizes updated
  • Spacing updated
  • Height updated
• Action links
  • Arrow spacing updated
• Font colors
  • New gray scale
• Expandable
  • Color updated
• Badge
  • A single digit results in a circled badge
• Slab
  • Uses the same system as cards
    • New variants: slab-primary slab-secondary slab-plain

Fixed

Removed

DesignGuide v3.5.0

Changelog

[3.5.0] - 2019-08-16

Added

• Added .dialog-header and .dialog-footer to the dialog component.
• Added tab lock to dialog making it so you can't tab out of the dialog until an option is clicked.
• Added aria labels to dialog documentation to show an example of how to use dialog accessibly.
• Added .expandable-headline and .expandable-subtitle to .expandable.
• Added aria-expanded attribute to expandable script.
• Added aria-controls to expandable example.
• Added document listener adding and removing .intent-mouse on the body tag. This class disables :focus styling.
• Added window resize listener for topbar so it is closed when the window size changes.
• Added tab trapping and correct focus to the topbar nav.
• Added new outline styling for buttons when focused.

Changed

• Made it so you don't have to include the ID on the close buttons inside Dialog.
• Changed the close button in dialog to be a button instead of an icon.
• Renamed .expandable-content to .expandable-body.
• Changed animation for expandables making it smoother.
• Changed expandable header to a button instead of a div.
• Updated nav styling to fit Swedbank Pay better.
• Updated documentation to only show recommended usage of the nav component.
• Increased hitbox for all nav variants to make the component more user friendly.
• Changed the close icon in dialog to be a button.
• Changed the close icon in the topbar to be a button.

Fixed

• Fixed display issue with topbar for IE.
• Fixed styling issue when resizing the window with an open topbar.