Changelog

This log contains an overview of the different updates of this brandplatform. Every log is collapsable to view more information about the update.

1.9.0

Added account statements page

Added account statements page

  • Added l-form__field-title--small modifier
  • Added o-account-statements
  • Added account statements page
1.8.1

Tab component responsive

Tab component responsive

Components

  • Added JavaScript to the tabs-component to add the correct behaviour with the dropdown.
  • Added the tabs-dropdown element as an m-collapse within the tabs
1.8.0

Added feedback states and loading

Added feedback states and loading

  • Renamed p-transaction-success to p-transaction-feedback
  • Added is-warning and is-error states to the feedback molecule
  • Added example pages for the warning & error error messages
  • Added loader atom
  • Added example page for loader message
1.7.1

Fixed SLDS-specific bugs

Fixed SLDS-specific bugs

  • Fixed overflow issue on tabs
  • Fixed width on tabs
  • Fixed scrolling issue: make sure to add s-slds-root to the l-root element to activate the fix.
1.7.0

Added interest review page and new account detail

Added interest review page and new account detail

Components

  • Download group added
  • Highlight box added
  • List modifiers added (m-list__item--bold)
  • Interest overview added
  • Transaction component removed
  • Table layout added

Pages

  • Interest overview page added
  • New account detail page added

Updates

  • Transaction component removed

  • Overview

    • Detail-product

      • Updated o-transaction component DOM to use the class l-table and removed the transaction component from the list.
      • a-sort-button__icon placed within container and changed classes to a-sort-button__icon-part
1.6.1

Added Input-Calendar overwrite

Added Input-Calendar overwrite

  • Added .s-slds-input-calendar to the input atoms.
1.6.0

Added deposit and download page

Added deposit and download page

Crossbrowser

  • Scrollbar on the left is fixed on Internet Exploder
  • Overbooking width is fixed on Internet Exploder
  • Header is correctly aligned on Internet Exploder

Components

  • Divider added
  • Overlay expanded with o-overlay--full-width
  • Pagination added
  • Button received new modifier: a-button--fill-space
  • Budget component has now two large modifiers: a-budget--1x-large, a-budget--2x-large
  • Added icon component with its different modifiers
  • Added input-group component
  • Added input errors
  • New Button group component used to group two or more buttons in one container

Pages

  • Overbooking - confirm added
  • Detail-transaction-upcoming variation page added
  • Account delete v1, v2, v3 added
  • Inclusion-calculator main page/overlay added
  • Inclusion-calculator result page/overlay added
  • Updated settings pages (account, account-edit and personal-info)
  • Download - transaction added

Updates

  • Budget - component

    • Every instance where an a-budget--1x-large is used is changed to a-budget--2x-large (find and replace all)
    • The a-budget--2x-large is added onto the new overbooking - confirm page
    • Every instance where a-budget--primary is used can be replaced by is-positive state
    • is-positive and is-negative states added to component
  • Overview - page

    • Main - added pagination in the l-section__footer of the deposito accounts section
  • Overbooking - page

    • Succes

      • Added mobile only overlay next to the desktop one, makes use of the o-overlay--full-width modifier, the one on desktop should stay o-overlay--center
      • Added wrapper for the overlay <div class="p-transaction-succes"></div>
      • Moved the a-icon-button as a close out of the m-feedback component and placed it within the p-transaction-succes
      • Removed m-feedback__close class from the close-button
  • search-transactions

    • filter

      • Changes within the l-form where the first two input fields are placed within an o-input-group component and where the other two input fields are placed within another o-input-group, l-grid is also applied here. IMPORTANT here is to note that when the input fields have their own label instead of just one that represents both labels, this o-input-group should not be used.
  • Detail - transaction - 1

    • Changed budget a-budget--primary class to is-positive
  • Overbooking - choice

    • Moved a-icon-button outside of l-section and placed above and placed div-wrapper around it with class p-overbooking__back
  • Settings

    • Account

      • Added p-settings and p-settings--acount and removed p-settings-account
      • Changed p-settings-account__content class to p-settings__tabs
    • Account-edit

      • Removed l-section and moved everything in l-form
      • Added mobile overlay
    • Personal-info

      • Added p-settings and p-settings--info
      • Changed p-settings-account__content class to p-settings__tabs
      • Added tooltip next to the label of the first two input fields
      • Buttons placed in button-group
  • Notifications

    • Detail file

      • Buttons placed in button-group and removed l-section__footer--full-width class
  • Overview

    • Detail product

      • Within l-section__header where there is a class l-section__header--with-actions, the buttons are placed within an m-button-group component
    • Detail transaction upcoming

      • Buttons placed in button-group and removed l-section__footer--full-width class
1.5.0

Added deposit and download page

Added deposit and download page

Components

  • Tooltip added
  • Label added
  • Toggle group added

Pages

  • overview - open deposito page added
  • download - staement page added

Updates

  • Removed m-account refactored to m-summary, m-account__name to m-summary__title, m-summary__container added
  • Removed m-account-select and refactored to m-summary with modifiers (m-summary--expand)
  • Removed m-account-option and refactored to m-option
  • Removed o-account-options and refactored to o-options
  • m-account__info-item--lowercase removed, m-summary__info-item--uppercase added, default value is now lowercase
  • Borders are placed on m-summary, previously m-account, with the class m-summary--contained

  • overbooking

    • main

      • replaced m-account-select by m-summary with class m-summary--expand, make use of the a-label component instead of m-account-select__label
    • choice

      • removed p-overbooking__header
      • within l-section__content, changed o-account-options to o-options
      • wihtin o-options, replaced m-account by m-summary (added m-summary__container)
      • within the mobile version changed o-account-options to o-options and replaced m-account by m-summary
  • overview

    • detail-deposito

      • replaced m-account by m-summary, removed m-account__info-item--lowercase and added m-summary__info-item--uppercase on items that have to be uppercase

      • replaced m-account-select by m-summary with class m-summary--expand, make use of the a-label component instead of m-account-select__label

    • detail-transaction

      • desktop: moved l-section within div p-transaction-detail
      • desktop: moved o-header outside l-section and added class p-transaction-detail__header on o-header
      • desktop: placed l-section underneath o-header
      • desktop: moved a-budget a-budget--2x-large into l-section__content and added class l-content__item, above the new m-summary
      • desktop & mobile: turned wrapping <section></section> into <div></div>
      • mobile: replaced m-account-select by m-summary with class m-summary--expand, make use of the a-label component instead of m-account-select__label
    • detail-product

      • replaced m-account by replaced by m-summary, removed m-account__info-item--lowercase and added m-summary__info-item--uppercase on items that have to be uppercase
    • main

      • replaced m-account by m-summary and added m-summary--contained to m-summary components that need borders, removed m-account__info-item--lowercase and added m-summary__info-item--uppercase on items that have to be uppercase
  • settings

    • accounts

      • replaced m-account by m-summary, removed m-account__info-item--lowercase and added m-summary__info-item--uppercase on items that have to be uppercase
      • added m-summary--contained on the m-summary components because they need the borders around it
  • accounts-edit

    • replaced m-account by m-summary and added m-summary--contained to m-summary components that need borders, removed m-account__info-item--lowercase and added m-summary__info-item--uppercase on items that have to be uppercase
1.4.0

Added settings pages and tabs component

Added settings pages and tabs component

  • All minimal collapse component
  • Added tabs component - without the use of a dropdown
  • Added settings - account page (still susceptible to change)
  • Added settings - edit account overlay (still susceptible to change)
  • Added settings - personal information page (still susceptible to change)
1.3.1

Updated search & filter transactions

Updated search & filter transactions

  • Both overlays now interact with each other on the search-transactions > result page.
1.3.0

Updated header and added more pages and components

Updated header and added more pages and components

  • Page headers have been changed, they are now separated into 3 types: primary, detail and overlay. There have been some class changes. The header that changed the most is the one on the overbooking page. This DOM changed for the most part.
  • The a-icon-button component has remained the same for the DOM, but the extra classes have been changed, every blue icon button that is shown does not need any more classes than its root class a-icon-button, but once a button that is light/white compared to its original is shown, the class a-icon-button--inverted should be shown.
  • The open account pages have been expanded with l-section and l-container as the wrappers of the components
  • l-inner-steps is removed because of inconsistency reasons and the overlay component is used instead.
  • Notifications components added
  • Notificatoins pages added
  • Detail view of message notifications added
  • Detail view of file notifications added
  • Search transactions pages expanded with result page (these overlays still need to be linked with each other)
1.2.0

Added search, added notifications overview, added calendar

Added search, added notifications overview, added calendar

  • Added date atom
  • Added calendar molecule based on SLDS-component
  • Added icons
  • Added collapsable molecule
  • Updated headers
  • Updated overlays
  • Added steps to switch between overlays
  • Added notifications organism
  • Added notifications page
  • Added search transactions page
1.18.0

New version of setting and more pages

New version of setting and more pages

  • New variant of the summary molecule: summary-button
  • Added new icon "id" and fixed "settings-filled" icon
  • Added new border color

  • Made 2 new pages:

    • more-overview
    • settings-overview
  • Adapted 5 pages:

    • more/account-statement-overview
    • more/interest-overview
    • settings/accounts-edit
    • settings/accounts
    • settings/personal-info
    • MFA/devices
1.17.0

Add cookie banner component

Add cookie banner component

  • Add cookie banner component
1.16.9

General bug fixes

General bug fixes

  • Added language switcher to the detail header with modifiers:
    • o-header--with-border
    • m-languages--inverted
  • Fixed menu position and content scroll
  • Added modifiers for tooltip to be placed on the left and right
    • m-tooltip--left
    • m-tooltip--right
1.16.8

Authentication Visuals fixes

Authentication Visuals fixes

  • Changed position of background-image in m-visual
  • Made authentication input wider
1.16.7

Menu bugfix

Menu bugfix

Bugfixes

  • Added a minimum width of 110 pixels to the menu to make sure that it does not shrink on devices above 720 pixels
1.16.6

General bugfixes

General bugfixes

Bugfixes

  • Fixed the l-root component where the interface would be partially cut off on mobile devices. This is done with JavaScript to support every type of device.
  • Fixed the notifications aligned to the right in the table.
  • Fixed Word-break issue by providing an extra utility class: u-word-break.
1.16.5

General bugfixes

General bugfixes

  • Fixed some small bugs for IE11
1.16.4

Styling fixes for IE11

Styling fixes for IE11

  • Fixed the padding on the cards molecule
  • Fixed the overflow on the tab organisms
1.16.3

Fixed inputs, calendar & notification detail

Fixed inputs, calendar & notification detail

  • Fixed the cut off characters in the input fields.
  • Fixed the bg-color of the button in a calendar input.
  • Fixed the position of the footer in the notification detail page.
1.16.2

Added MFA authentication overlay

Added MFA authentication overlay

  • Added page, no DOM changes required.
1.16.15

Updated webpack configuration

Updated webpack configuration

  • removed option devtool: eval in order to add CSP security.
1.16.14

Android scroll to input field fix

Android scroll to input field fix

  • Added input field behaviour to each input field for Android devices: place input in view when focusing.
1.16.13

IOS Safari body - scroll fix

IOS Safari body - scroll fix

  • Added a temporary fix for a known issue in the safari browser. Added a fix to the body that disables scrolling even when overflow: hidden is used. This issue is being handled by the Safari team and as soon as this is fixed, this "fix" can be removed. This is only applicable to mobile devices.
1.16.12

General bug fixes

General bug fixes

  • changed the behaviour of the l-split component to switch to a vertical view on an earlier breakpoint. Through this method only 2 images: desktop and mobile should be provided.

  • Fixed an issue where the transaction-confirm close button of the popup is not clickable because the m-summary__link z-index was higher and placed in front of it.

1.16.11

Image visiblity classes

Image visiblity classes

  • Added more classe to toggle the visiblity of an image between breakpoints, an example can be found on the AOP - forms-2 page.

Breakpoints

  • mobile-default: 480px
  • tablet-default: 720px
  • desktop-default: 1140px
  • desktop-large: 1300px

Classes

u-hide

The hide utility can be used to display the elements based on certain breakpoints.

.u-hide@above-mobile-default Hide the element above the mobile-default breakpoint

.u-hide@above-tablet-default Hide the element above the tablet-default breakpoint

.u-hide@above-desktop-default Hide the element above the desktop-default breakpoint

.u-hide@above-desktop-large Hide the element above the desktop-large breakpoint

.u-hide@below-mobile-default Hide the element below the mobile-default breakpoint

.u-hide@below-tablet-default Hide the element below the tablet-default breakpoint

.u-hide@below-desktop-default Hide the element below the desktop-default breakpoint

.u-hide@below-desktop-large Hide the element below the desktop-large breakpoint

m-visual

The visual component can be used to toggle the behaviour of the image. By default the image is scaled to fill up the entire container it is place within, without losing or changing its aspect ratio.

.m-visual--contained Changes the behaviour of the image to scale until it reaches one of the sides of its parent container, without losing or changing the aspect ratio. This can create whitespace around the image because it is not scaled larger than its parent container.

.m-visual--contained@above-mobile-default Same behaviour as the m-visual--contained, but only applicable above the mobile-default breakpoint.

.m-visual--contained@above-tablet-default Same behaviour as the m-visual--contained, but only applicable above the tablet-default breakpoint.

.m-visual--contained@above-desktop-default Same behaviour as the m-visual--contained, but only applicable above the desktop-default breakpoint.

.m-visual--contained@above-desktop-large Same behaviour as the m-visual--contained, but only applicable above the desktop-large breakpoint.

.m-visual--contained@below-mobile-default Same behaviour as the m-visual--contained, but only applicable below the mobile-default breakpoint.

.m-visual--contained@below-tablet-default Same behaviour as the m-visual--contained, but only applicable below the tablet-default breakpoint.

.m-visual--contained@below-desktop-default Same behaviour as the m-visual--contained, but only applicable below the desktop-default breakpoint.

.m-visual--contained@below-desktop-large Same behaviour as the m-visual--contained, but only applicable below the desktop-large breakpoint.

1.16.10

General bug fixes

General bug fixes

  • Fixed non clickable arrow area's on overbooking page and select boxes
  • Fixed issue where image is not shown correctly

Image not shown correctly

  • Replace l-container--1x-medium class by l-container--1x-large
  • Add m-visual--contain@between-desktop-default-&-desktop-large class to make sure the image gets a contained behaviour between 2 breakpoints.
  • Add l-split__item--image on the l-split__item that contains the visual
  • Add l-split__item--content on the l-split__item that contains the content
1.16.1

Fixed feedback icons

Fixed feedback icons

  • Changed success-feedback icon to icon-checkmark
  • Changed warning-feedback icon to icon-info
1.16.0

Added MFA-pages: notification overlay

Added MFA-pages: notification overlay

  • Updated the feedback molecule
  • Added MFA-notification page
1.15.0

Added MFA-pages: devices, phone & questions

Added MFA-pages: devices, phone & questions

  • Updated tooltip molecule: made it wider and added a .m-tooltip--down modifier.
  • Fixed link hover styling by overwriting the app.css provided by salesforce
  • Added device summary ( DOM changes required to all summary-edit components )
  • Added MFA-devices page
  • Added MFA-phone page
  • Added MFA-questions page
1.14.0

Added MFA-pages: login, password & authentication

Added MFA-pages: login, password & authentication

  • Added password hide & show toggle. ( Javascript needed )
  • Added checklist molecule
  • Added authentication molecule
  • Added MFA authentication page
  • Added MFA login page
  • Added MFA password page
1.13.0

Added AOP-pages

Added AOP-pages

  • Added AOP-voorwaarden page.
  • Added AOP-success page.
  • Renamed the old AOP-success to AOP-confirmation.
  • Fixed sizing bug with the option-button.
1.12.1

Small visual fixes

Small visual fixes

  • Tooltip fixes
  • Stepwizard visual fixes
  • Added spacing to submit button on AOP-choice ( DOM change )
1.12.0

Added AOP form & Success pages

Added AOP form & Success pages

  • Updated UI colors
  • Added option-button molecule
  • Added alert atoms & various states
  • Updated tooltip styling
  • Added aop-success page
  • Added aop-form-1 page
  • Added aop-form-1 page
  • Finetuned aop-list page
  • Finetuned aop-choice page
1.11.1

Added Documentation & code samples. Updated styling

Added Documentation & code samples. Updated styling

  • Added a split layout documentation
  • Added a scroll layout documentation
  • Added a step-wizard organism documentation
  • New style for the cards
  • Removed highlight from open-accounts page
1.11.0

Added AOP-list page.

Added AOP-list page.

  • Reworked the APO choice page, DOM changes.
  • Added a split layout
  • Added a scroll layout
  • Added a visual molecule
  • Added a step-wizard organism
  • New style for the lists
  • Fixed the overflow issue on product detail.
1.10.0

Added AOP page.

Added AOP page.

  • Added progress atom
  • Added l-form--fixed-submit modifier
  • Reworked the header to accommodate for the subtitle
  • Added the AOP-choice page
1.1.0

Added open accounts page

Added open accounts page

  • Added Toggle atom
  • Updated Switch atom
  • Updated root layout
  • Added List molecule modifier
  • Added Header organism modifier
  • Added Card molecule
  • Added New account molecule
  • Added Open account page
  • Updated Overview page
1.0.1

Added extra variations of pages and added documentation

Added extra variations of pages and added documentation

  • Added variation of the detail page of a deposito/transaction
  • Added correct behaviour for the overbooking page overlay
  • Added animations for the overlay components
  • Added animation for the overbooking main/detail view
  • Added documentation about the components, modifiers, states and JavaScript

    • atoms have been documented
    • molecules have been documented
    • organisms have been documented
    • layout components were added and documented
1.0.0

Restructure existing pages and added more consistency

Restructure existing pages and added more consistency

  • Restructure previous existing pages/views

    • overview - main
    • overview - detail transaction
    • overview - detail product
  • Added new pages with new structure

    • overbooking - main
    • overbooking - choice
    • overbooking - succes
  • Updated all current components and removed unnecesary modifiers or variations

  • Missing until next release:

    • Further crossbrowser checks
    • Popover component
    • Mobile version of popover component
    • Extra documentation on components, used classes
0.3.0

Added desktop styling detail page

Added desktop styling detail page

  • Added sort atom
  • Added sortable molecule
  • Added logo's
  • Update Icon links
  • Added detail organism
  • Finetuned mobile typography
0.2.1

Fixed styling issues of the homepage on desktop

Fixed styling issues of the homepage on desktop

  • Added body layout wrapper
  • Added flexible grid module
  • Added responsive utils
  • Added header actions
  • Added section actions
  • Added overview molecule
  • Updated typography on desktop
0.2.0

Added desktop menu. Added Mobile detail page. Update CDN info

Added desktop menu. Added Mobile detail page. Update CDN info

  • Updated CDN info in manual
  • Added body styling for desktop
  • Added menu for desktop
  • Added detail page on mobile
  • Added details molecule
  • Added transaction molecule
  • Added Popover + javascript
  • Added Overlay + javascript
0.1.1

Documentation added

Documentation added

  • Documentation added
  • Font paths change
0.1.0

Added overview page

Added overview page

  • Added an icon
  • Added section molecule
  • Updated general layout
  • Updated typography
0.0.3

Added basic components to the styleguide

Added basic components to the styleguide

  • Added buttons
  • Added links
  • Added a badge
  • Added Input fields
  • Added the navigation tab bar
  • Added a switch
  • Added an account
0.0.2

Added basic styling to the brandplatform

Added basic styling to the brandplatform

  • Added colours
  • Added typography
  • Added box-shadows & border-radius
  • Added basic button & container styling in the styleguide
  • Added links to the visual design & wireframing prototypes
0.0.1

Initial setup of the brandplatform using Nunjucks, SCSS and JavaScript

Initial setup of the brandplatform using Nunjucks, SCSS and JavaScript

  • Added nunjucks structure to support single or multiple categories within one structure
  • Added scss structure and seperated brandplatform from client
  • Created new flow within the brandplatform for a more consistent structure
  • Seperated nunjucks usage for brandplatform and client
  • Added markdown filters so that designers can implement their knowledge into the components
  • Completed the user manual to better explain how to get started and how to styleguide works
  • Added Express routing and express server for dynamic routing
  • Added scripts that create the brandplatform based on file structure and management
  • Added reusable components within the brandplatform
  • Added explanatory resources to represent the way we work
  • Added base styling components such as: colors, icons, typography
  • Added base layout component such as containers
  • Defined the base colors, typography and layout variables to start setting up the components
  • Initialised JavaScript (ES6) usage and split it up between multiple styleguides
  • Seperated brandplatform and client JavaScript
  • Tested multiple use cases and different structures to support the brandplatform
  • Optimised the flow and the structure of the brandplatform to support more functionality per page/component or variation