Changelog

What's new

• New month picker
• Bump LF Icons from 2.2.0 to 3.3.0
• Buttons in alerts now drop down below in full width on mobile
• Fix font stack issue

Full Changelog: v10.1.11...v10.2.0

Fix asset link issue + update component status version numbers.

What's New

• Shortcut component rewrite. See it in action.
  • Bringing a cleaner API and improved visual details.
  • Removing the "alert" ("glasspinne") version.
  • Adding on-the-fly and in-context config with CSS variables. For example, the Öppna Sidorna team could set --shortcut-border-color to a light blue, instead of a light gray, when Shortcuts are used on a light blue background. This is a pattern that we'll explore further coming up, in the form of theme classes.
• Custom radio and checkbox card rewrite. See it in action here and here.
  • Fixing visual bugs and syncing design with Shortcuts.
  • The pricing box, which is built using radio cards, was also updated.
• LFUI-Icons 2.2.0 released
  • Removing the 20x20 icon set, as the design team is moving away from it. The 24x24 icon set is to be used instead.
  • Adding a new "warning" icon.
• LFUI available publicly in the npm registry. Finally!
  • npm install @lansforsakringar/components
  • npm install @lansforsakringar/icons
• Alerts updated again (!) but this only visually. See it in action.
  • Adding shadow options
  • Removing the dark temporary versions
  • Tweaking colors
• Navbar has been removed. The navbar in LFUI has been out of sync with reality for years and hasn't been recommended for implementation. It might be brought back when it has been updated with a synced design (likely in collaboration with the Mina Sidor team).
• New easing variables. Instead of the built-in CSS easings keywords, these CSS props are recommended instead: --ease,--ease-in, --ease-out.
• Improving build scripts.
• Improved HTML examples for most components. This is an ongoing project to find undocumented features.

Bug fixes

• Fixed button issue with rounded corners
• Fixed primary link issue, causing the arrow to jump a few pixels on hover

Migrating from 10.0.0

• Installing the latest versions from npm, note the updated package names that should be reflected in your app.
  • from @LF-digitala-kanaler/lfui-components to @lansforsakringar/components
  • from @LF-digitala-kanaler/lfui-icons to @lansforsakringar/icons
• Shortcuts require a new implementation. Documentation.
  • Look for shortcut, shortcut-alert, and shortcut-block to see if this affects you.
• Radio/checkbox cards require a new implementation. Documentation (radio button, checkbox)
  • Look for checkbox-card, radio-card, and price-container to see if this affects you.
• For icons, see the LFUI-Icons v2.2.0 release notes
• Optionally, check your CSS for ease, ease-in, and ease-out and replace them with the new CSS properties. For example, var(--ease-in)
• custom-multi-select class was removed – undocumented and we don't know what it is. Do let us know if you depend on it, thanks!

What's New

• Cutting javascript asset size by ~60%. This is a big win for code maintenance and for the customers that will see faster page loads. This was achieved by removing legacy code that has been dragging along for years; Information on how all these changes effects LFUI is detailed below in the migration guide.
  • Dropping jQuery. A clunky legacy dependency that has been a showstopper for LF teams that are setting up new applications – no more.
  • Dropping Moment.js. With the new date picker from version 9, and now with a simplified time picker, this obsolete and large dependency has been removed.
  • Dropping charts. The statistical charts that were part of LFUI and LFDS are removed after being neglected both technically and from a UX perspective for years.
    • Chart-related things are in development by other teams, and some of that effort might be included in LFDS in the future.
• Faster build script. Leaving Webpack for Vite, our build script is now a joy to work with and ready for years to come. LFDS, LFUI, and our Storybook continue to work just the same as before.
• Big steps towards Bootstrap 5. Of the about 60 internal parts that make up LFUI, 37 are now updated to the latest version av Bootstrap. The majority of work is now done so it’s all downhill from here.
  • With this, we now have access to all BS5 utilities and helpers.
• Link underlines now make sense again. This is a strange one, but up until now, links in LFUI were being underlined by a background hack instead of the traditional method to get thin nice underlining. With new tricks in the CSS toolbox, the hack has been removed across LFUI while also keeping the thinner line design.
• New dark version of Alerts, to be used for testing in the coming months. See example .
• Both multi and single dropdown select now support the "label inside" options. See example.
• JavaScript modules can now be imported in all possible ways, including ESM and UMD.
• Typescript definitions are now included in the build and available to consumers. (see issue)

Bug fixes

• Close buttons (crosses) now has a bumped z-index to always stay on top. Also, note the existence of the .layout-zbump CSS utility.
• The look of links within headings can now be easily controlled to be visible or invisible. See new examples.
• Removed postcss-base64 that where causing issues on some installs (see issue)
• Added missing documentation about updated markup for active buttons in button-groups (see issue)
• Fixed incorrect datepicker placeholder format (see issue)
• Fix Alerts not supporting other children than paragraph elements (see issue).

Migrating from 9.x.x

• Timepicker was dropped, in favor of a simple native element. See example.
• Intervall range sliders were rewritten. Same functionality but without jQuery and jQuery UI. Requires an updated implementation.
• Set and reset underlines properly with text-decoration rather than with background-image.
• Price box has been completely refactored. It now relies on the default Bootstrap collapse javascript, and styling is based much more on CSS utilities.
• Links in headings are now visible by default, use .link-adaptive to hide them (in combination with .text-black or other color utilities, if you wish.
• The old date picker is now removed. It was deprecated in version 9.
• Search and replace:
  • $variable-prefix → $prefix
  • .payoff-alternative → .text-blue
  • .link-complex-target → .link-no-underline for removing text underlining (when not actually used in a link-complex context).
  • $color-info-text → $color-info (also for danger, success and warning)
    • Those are now “dark” by default, and the lighter ones have a suffix: $color-info-light
    • This also affects the text and background CSS utilities (for example .text-success and .bg-success, where the defaults are now the darker variant and we now have lighter ones as well: .text-success-light and .bg-success-light.
  • data-dismiss="alert" → data-bs-dismiss="alert". All Bootstrap js data- attrebutes are now prefixed with bs, so also data-toggle="alert" → data-bs-toggle="alert"
• Removed older diagonal patterns: bg-diagonal-stripes-danger|success|warning|info, and bg-diagonal-stripes-gray. Use .stripe-pattern instead.
• “Media object” component removed. This wasn't our call, but it's being dropped in BS5. Here’s a utility implementation instead:

  <div class="d-flex">
    <div class="flex-shrink-0">
      <img src="..." alt="...">
    </div>
    <div class="flex-grow-1 ms-3">
      This is some content from a media component. You can replace this with any content and adjust it as needed.
    </div>
  </div>
  

What's New

• New date picker. The component has been completely revamped with a more accessible and modern implementation based on the @duetds/date-picker library. The API for the date picker has changed significantly.
  • The time picker is stand-alone and remains the same for now.
• Updated button groups, fixing strange font rendering and introducing rounded corners.
• Alers now support larger icons up to 32x32.

Migrating from 8.x.x

• All select elements need to be implemented. Please refer to LFDS for the latest documentation.
• Button group
  • Updated markdown required with added data-text attributes. Read more.

Updates our build tools. No migration notes are needed

Updating Webpack lead to a change of our folder structure. The content of the /dist sub-folder lfui has been moved to the root of the list folder.

Bug fix release. No migration notes are needed

• 7bba5e5 Fixed select component so that it can't be initialized more than once

Bug fix release. No migration notes are needed

• 0aeb152 Fixed file upload example
• 8a4c2a3 Fixed custom-dropdown importance conflict
• 615ea92 Fixed hr on white background
• d171c9b Fixed the width of custom select elements

What's New

• Code now available to install via npm, published on the Github npm registry.
• New Select component. Complete rewrite of the Dropdown component, with accessible markup ready for screen readers and keyboard navigation and a set of new features. With this, the Dropdown component has been marked for deprecation.
• Updated Alert component. Dropping the diagonal pattern and adding an (optional) shadow. There’s also now support for icons within alerts, and a new top-of-page version for site-wide alerts.
• Updated Close component. Slightly improved design, that syncs the X symbol with our icon set
• Updated Tag component, adding additional themes and sizes.
• Updated some color names along. Colors are now also exposed as [CSS Custom Properties](https://css-tricks.com/a-complete-guide-to-custom-properties/).
• Updated all html examples to be in English.
• Added code linting.

Migrating from 7.x.x

• Deprecating .dropdown in favour of a new .select component
  • New markdown requered. See component documentation
• Changes to .alert component.
  • Please see the [html examples][lfui-components-webpage], the markup has changed in various ways
• Changes to .close component
  • Class change .close → .btn-close
  • Removed modifier class: .close-large (the modal now fixes this automatically)
  • The class .close-absolute has was removed
• Changes to .slider component
  • Switch to a CSS custom variable (--progress) for setting value, instead of inline styles
• Search and replace
  • Deprecated color variable $alabaster – if you use it, add it to your codebase: #fafafa
  • Class change .bg-risk-default → .bg-risk-0
  • Class change .text-risk-default → .text-risk-0
  • Class chagnes for the .shortcut component:
    • shortcut-important → shortcut-alert
    • shortcut-shortcut-info-ice → shortcut-info
    • shortcut-shortcut-success-ice → shortcut-success
    • shortcut-shortcut-warning-ice → shortcut-warning
    • shortcut-shortcut-danger-ice → shortcut-danger
  • Updated color variables. Search and replace in your codebase:
    • $alert-info-color → $color-info
    • $alert-info-bg → $color-info
    • $alert-warning-bg → $color-warning
    • $alert-danger-bg → $color-danger
    • $lf-info → $color-info
    • $lf-success → $color-success
    • $lf-danger → $color-danger
    • $lf-warning → $color-warning
    • $risk-color-default → $color-risk-0
    • $risk-color-1 → $color-risk-1
    • $risk-color-2 → $color-risk-2
    • $risk-color-3 → $color-risk-3
    • $risk-color-4 → $color-risk-4
    • $risk-color-5 → $color-risk-5
    • $risk-color-6 → $color-risk-6
    • $risk-color-7 → $color-risk-7

• Removed LFUI-icons dependency

• Security update

We have finally separated LFUI into 3 different parts and repositories, LFUI-components, LFUI-icons, and documentation. These parts together will act as our design system LFDS.

There haven't been so many changes to the core components in this version. We have made some changes to get the file size down and some performance improvements. But there is a couple of changes worth mentioning.

• We have removed D3.js for charts in favor of Chart.js. Not really included in LFUI-components but more as an add-on. Examples of charts are all updated on the storybook site

• New fonts, it's been an issue for a while that our web fonts didn't match the files our designers used, so it's been updated. The new font is a bit tighter and you might need to adjust some font sizes and word lengths ( talk to your designers about this)

• Icons is now a dependency and removed from LFUI-components. We have changed the way we load icons and this is a breaking change that will involve a lot of work to migrate to but is necessary for performance.

• Introduced in 6.7.0 but worth mentioning anyway, we have introduced rounded corners on buttons and shortcuts.

• New documentation site for components has been added and new examples created.

• LFUI-component should now work with the latest node.js since there have been upgrades to dependencies.

Features

• #3 Padding change on all our buttons. Buttons will now be tighter and match the design.
• #15 Add option to have sorting in a table
• #51 Add font-display variable and set default to swap.
• #55 New component - Tag
• #63 Dropdown - removed listeners in 'destroy' method.
• #66 Custom multiselect - Init with already checked checkboxes

Changes

• #40 Remove btn-outline-primary since it's been deprecated for a long time use .btn-primary instead.
• #18 Update our fonts to be the same as in the design(f27bdb8)
• #19 Replaced D3 with chart.js
• #13 Since icons now has it's own repository it's been removed from LFUI-components

Bugfixes

• #4 There was an issue with extend in _buttons.scss so it's been refactored to get the size of the file down

Documentation

• New Storybook documentation site for components added and new examples of all components created.
• #28 Example of Donut chart with Chart.js
• #10 Example of Map chart with Chart.js
• #11 Example of Plot chart with Chart.js
• #10 Example of Map chart with Chart.js
• #9 Example of Line chart with Chart.js
• #7 Example of Bar chart with Chart.js

Migrating from 6.x.x or earlier

• Remove the old lfui package and replace it with @lf-digitala-kanaler/lfui-components in your package.json and install it.

• Depending on your build setup update lf.js and lf.css with the new one in @lf-digitala-kanaler/lfui-components.

• Update the font files (they have been regenerated). See above documentation on how to set that up.

• Now it's time for the time-consuming part. We have a new icon system, and all icons in your project need to be updated. Head [to the Länsförsäkringar Icons][lfui-icons] repo and follow the guide.

• Remove the old lfui package and replace it with
  @lf-digitala-kanaler/lfui-components in your package.json and install it.

• Depending on your build setup update lf.js and lf.css with the new one in
  @lf-digitala-kanaler/lfui-components.

• If you want the updated fonts to follow the steps above to copy them over.

• Now it's time for the time-consuming part. We have a new icon system and all
  icons in your project need to be updated. Head [to the Länsförsäkringar Icons][lfui-icons] repo and follow
  the guide.

What's Changed

• update bankID multicolor to only a solid color by @mfredlundh in #71

Full Changelog: v3.3.0...v3.3.1

The return of the 20x20 icons. Please see the v3.0.0 migration guide.

• Added new icon, group, in sizes 24, 32, 40

With long-term iterations and progress, even icon libraries get technical debt. In version 3, we do the (not too exciting) work of cleaning that up, so that we can move faster moving forward. Here, that means syncing and renaming icons.

Below is the complete list of changes, that should be reflected in your code base.

• Left side: past name
• Right side: new name

--------------------------------------------------------------------------------
# Single color 20x20 icons

accident-20               first-aid-20
arrow-enclosed-20         arrow-right-enclosed-20
attach-20                 attachment-20
bills-coins-20            money-20
chevron-20                chevron-right-20
contentcard-20            content-card-20
growth-arrow-20           arrow-growth-20
notification-envelope-20  envelope-20
notification-flag-20      flag-20
notification-swish-20     swish-20
pdf-doc-20                pdf-document-20
pencil-20                 write-20
phone-20                  phone-retro-20
text-1-round-20           text-1-enclosed-20
text-2-round-20           text-2-enclosed-20
text-3-round-20           text-3-enclosed-20
thumbup-20                thumb-up-20

--------------------------------------------------------------------------------
# Colored 20x20 icons

bankid-mc-20            bankid-multicolor-20
car-damaged-20          car-damage-multicolor-20
special_star-20         star-filled-20

--------------------------------------------------------------------------------
# Single color 24x24 icons

arrow-enclosed-24       arrow-right-enclosed-24
attach_24               attachment-24
bank-24                 institution-24
bills-coins-24          money-24
chevron-24              chevron-right-24
circlediagram-24        chart-pie-24
common-camera-24        camera-24
contact-header-24       call-center-24
fund-assortment-24      chart-line-24
growth-arrow-24         arrow-growth-24
image-doc-24            picture-24
mobile-phone-24         phone-24
notification-swish-24   swish-24
pdf-doc-24              pdf-document-24
pencil-24               write-24
phone-24                phone-retro-24
save-24                 savings-24
text-1-round-24         text-1-enclosed-24
text-2-round-24         text-2-enclosed-24
text-3-round-24         text-3-enclosed-24

--------------------------------------------------------------------------------
# Colored 24x24 icons

bankid-mc-24            bankid-multicolor-24
car-damaged-24          car-damage-multicolor-24

--------------------------------------------------------------------------------
# Single color 32x32 icons

arrow-enclosed-32            arrow-right-enclosed-32
arrows-apart2-32             arrows-apart-32
attach-32                    attachment-32
bills-coins-32               money-32
chevron-32                   chevron-right-32
circlediagram-32             chart-pie-32
contact-menu-32              call-center-32
mobile-phone-32              phone-32
navigation-accounts-32       accounts-32
navigation-bank-32           institution-32
navigation-card-32           card-32
navigation-filetransfer-32   filetransfer-32
navigation-globe-32          globe-32
navigation-home-32           house-32
navigation-mortgage-32       mortgage-32
navigation-payment-32        payment-32
navigation-pension-32        pension-32
navigation-phone-32          phone-32
navigation-piggybank-32      savings-32
navigation-transfer-32       arrows-apart-32
navigation-umbrella-32       umbrella-32
navigation-wages-32          wallet-open-32
notification-swish-32        swish-32
pdf-doc-32                   pdf-document-32
pencil-32                    write-32
pension-32                   parasol-32
pension-32                   parasol-32
phone-32                     phone-retro-32
save-32                      savings-alt-32
text-1-round-32              text-1-enclosed-32
text-2-round-32              text-2-enclosed-32
text-3-round-32              text-3-enclosed-32
truck-32                     tractor-32

--------------------------------------------------------------------------------
# Colored 32x32 icons

bankid-mc-32                bankid-multicolor-32
car-damaged-multicolor-32   car-damage-multicolor-32
loan-multicolor-32          money-multicolor-32
save-multicolor-32          savings-multicolor-32

--------------------------------------------------------------------------------
# Single color 40x40 icons

bank-40                  institution-40
bills-coins-40           money-40
block-card-40            card-block-40
circlediagram-40         chart-pie-40
common-camera-40         camera-40
dog-risk-40              dog-alt-40
fund-assortment-40       chart-line-40
growth-arrow-40          arrow-growth-40
mobile-phone-40          phone-40
mobile-phone-broken-40   phone-broken-40
notification-swish-40    swish-40
pension-40               parasol-40
retro-phone-40           phone-retro-40
save-40                  savings-40
thumbup-40               thumb-up-40

--------------------------------------------------------------------------------
# Colored 40x40 icons

bankid-mc-40         bankid-multicolor-40
loan-multicolor-40   money-multicolor-40

--------------------------------------------------------------------------------
# Single color 70x70 icons

bank-70                 institution-70
bills-coins-70          money-70
circlediagram-70        chart-pie-70
contact-70              call-center-70
growth-arrow-70         arrow-growth-70
menu-envelope-70        letter-70
mobile-phone-70         phone-70
notification-swish-70   swish-70
retro-phone-40          phone-retro-40
save-70                 savings-70
truck-70                tractor-70

--------------------------------------------------------------------------------
# Colored 70x70 icons

bankid-mc-70                     bankid-multicolor-70
pension-capital-mc-70            pension-capital-multicolor-70
pension-occupational-in-mc-70    pension-occupational-in-multicolor-70
pension-occupational-mc-70       pension-occupational-multicolor-70
pension-occupational-out-mc-70   pension-occupational-out-multicolor-70
pension-private-in-mc-70         pension-private-in-multicolor-70
pension-private-mc-70            pension-private-multicolor-70
pension-private-out-mc-70        pension-private-out-multicolor-70

tab-bank-70     card-70
tab-car-70      car-70
tab-damage-70   damage-70
tab-house-70    house-70
tab-loan-70     money-70
tab-offer-70    offer-70
tab-save-70     savings-70
tab-travel-70   travel-70

--------------------------------------------------------------------------------
# Random special icons
The SVG URL for all these contains "/special/", so might be able to check our 
apps for that string to see if any of these are in use.

calendar-26       calendar-24
kontakta_oss-26   call-center-24

multicolor-bike-48          bike-multicolor-48
multicolor-car-48           car-multicolor-48
multicolor-car-damaged-48   car-damage-multicolor-48
multicolor-dog-left-48      dog-left-multicolor-48
multicolor-dog-right-48     dog-right-multicolor-48
multicolor-house-48         house-multicolor-48
multicolor-moose-48         moose-multicolor-48
multicolor-things-48        things-multicolor-48
multicolor-travel-48        travel-multicolor-48

multicolor-chat-heart-64       chat-heart-multicolor-64
multicolor-dog-left-64         dog-left-multicolor-64
multicolor-dog-right-64        dog-right-multicolor-64
multicolor-happy-accepted-64   happy-accepted-multicolor-64
multicolor-sad-declined-64     sad-declined-multicolor-64

report-building-50         building-multicolor-70-50
report-indemnity-50        indemnity-multicolor-70-50
report-legal-50            legal-multicolor-70-50
report-other-50            other-multicolor-70-50
report-person-50           person-multicolor-70-50
report-transportation-50   transportation-multicolor-70-50

multicolor-adult_children-50   adult-children-multicolor-84-50
multicolor-alone-50            alone-multicolor-84-50
multicolor-apart-50            apart-multicolor-84-50
multicolor-married-50          married-multicolor-84-50
multicolor-single-50           single-multicolor-84-50
multicolor-small_children-50   small-children-multicolor-84-50

arrow_external_link          external-link
arrow_external_link_inline   external-link-inline
arrow_large_left             arrow-large-left
arrow_large_right            arrow-large-right
arrow_small_left             arrow-small-left
arrow_small_right            arrow-small-right
arrow_standard_left          arrow-left
arrow_standard_right         arrow-right

// Shotcuts:

shortcut-bankid-50            bankid-multicolor-50
shortcut-change-company-50    change-company-multicolor-50
shortcut-documents-50         documents-multicolor-50
shortcut-fund-assortment-50   chart-line-multicolor-50
shortcut-messages-50          messages-multicolor-50
shortcut-payment-50           payment-multicolor-50
shortcut-report-damage-50     report-damage-multicolor-50
shortcut-transfer-50          transfer-multicolor-50

// Mega menu:

about_LF-32            about-megamenu-32
accont-32              accont-megamenu-32
apply_job-32           career-megamenu-32
bank-32                institution-24-megamenu-32
card_payment-32        card-payment-megamenu-32
contact-32             contact-megamenu-32
digital_services-32    digital-services-megamenu-32
economy-32             economy-megamenu-32
finance-32             finance-megamenu-32
forms-32               forms-megamenu-32
insurance_animal-32    animal-megamenu-32
insurance_boat-32      boat-megamenu-32
insurance_car-32       car-megamenu-32
insurance_home-32      house-megamenu-32
insurance_truck-32     truck-megamenu-32
insurance_vehicle-32   vehicle-megamenu-32
insurance-32           insurance-megamenu-32
investment-32          investment-megamenu-32
loan-32                money-megamenu-32
offer-32               offer-megamenu-32
other_vehicles-32      other-vehicles-megamenu-32
pension_mega-32        pension-megamenu-32
press_Media-32         press-megamenu-32
prevent-32             prevent-megamenu-32
report_damage-32       damage-megamenu-32
save_profile-32        savings-megamenu-32
subsidiaries-32        subsidiaries-megamenu-32
travel_plane-32        travel-megamenu-32

This release drops the 20x20 mono and color icons. 24x24 icons are to be used instead across our apps.

Two icons were saved and moved to the special folder. Both were renamed in that process. Migration would be a matter of searching and replacing, something along these lines:

• From: lf-icons/sprite/20/icons.svg#external-link-20
  To: lf-icons/sprite/special/icons.svg#arrow_external_link
• From: lf-icons/sprite/20/icons.svg#external-link-inline-20
  To: lf-icons/sprite/special/icons.svg#arrow_external_link_inline

Fix warning-24 sizing issue

New icon: warning 24px

New URLs, added CSS file and updated build steps

Icons in special folder should now have correct ID

New icon: engine 40px

Initial release, code split from the previous mono repo setup.

Migrating from previous setup, 6.x.x or earlier

First, you need to use Component and not the older LFUI setup, in order to use Icons.

There is no automatic way to upgrade from the old icon system, you will have to change the path of all icons in your project to the new structure.

Icons is now combined to sprites depending on size and the structure looks like:

.
├── 20/
├── 20-color/
├── 24/
├── 24-color/
├── 32/
├── 32-color/
├── 40/
├── 40-color/
├── 70/
├── 70-color/
├── special/

Let's have a look how the structure have changed from 6.7.0.

• 10px icons → special/
• 20px icons → 20/
• 20px color icons → 20-color/
• 24px icons → 24/
• 24px color icons → 24-color/
• 26px icons → special/
• 32px icons → 32/
• 32px color icons → 32-color/
• 40px icons → 40/
• 40px color icons → 40-color/
• 48px color icons → special/
• 50px color icons → special/
• 70x50px color icons → special/
• 56px color icons → special/
• 64px color icons → special/
• 70px icons → 70/
• 70px color icons → 70-color/
• 84x50px color icons → special/
• Mega menu icons → special/ (updated names, "icon-" have been removed, so icon-insurance_home-32 becomes insurance_home-32)
• Special → 32/