design-library v2.4.0

The design library is expanding once again, with two great contributions from @lukaspoloki and @starkris51 🎉

New Features

🆕 Pagination component

A versatile pagination component that can be used separately or together with the table.

View on Storybook

🆕 Accordion component

Great when you want to make some content hidden but still easily accessible.

View on Storybook

What's Changed

• change default auth method for documentation on developer.bcc.no to bcc-login by @Oz-Okun in #296
• Bump vite from 4.5.2 to 4.5.3 in /design-library by @dependabot in #299
• Add BccAccordion component by @lukaspoloki in #297
• BccPagination by @starkris51 in #300

New Contributors

• @Oz-Okun made their first contribution in #296
• @starkris51 made their first contribution in #300

Full Changelog: v2.3.0...v2.4.0

design-library v2.3.0

This release adds two very nice new components, courtesy of @lukaspoloki!

New Features

🆕 Stepper component

For all your wizard needs, easily visualise to users which step they are on.

View on Storybook

🆕 Tooltip component

Essential for any application, and now you can easily add them in BCC's style.

View on Storybook

What's Changed

• Add BccStepper component to design library by @lukaspoloki in #291
• Add BccTooltip component to design library by @lukaspoloki in #292
• Fix shadow on buttons by @laurensgroeneveld in #293

New Contributors

• @lukaspoloki made their first contribution in #291

Full Changelog: v2.2.4...v2.3.0

design-library v2.2.4

What's Changed

• Export types from table component by @laurensgroeneveld in #290

Full Changelog: v2.2.3...v2.2.4

design-library v2.2.3

What's Changed

• Fixes rounding on Graphic parent by @u12206050 in #289

Full Changelog: v2.2.2...v2.2.3

design-library v2.2.2

What's Changed

• Some design updates to Graphic and Tabs by @u12206050 in #288

Full Changelog: v2.2.1...v2.2.2

design-library v2.2.1

What's Changed

• Small fixes for Table component by @laurensgroeneveld in #287

Full Changelog: v2.2.0...v2.2.1

design-library v2.2.0

In our quest to be the definitive collection of UI components for everything BCC, this release brings several widget-related components from the Event app to the design library 🎉

New Features

🆕 Graphic component

A large banner with customisable logo and background, for all your leading image needs.

View on Storybook

🆕 Header component

A more opinionated header component with options for an over- or underline and slot. If you need more options, consider using the typography classes from the design system directly.

View on Storybook

🆕 Info component

A way to render information with supporting text.

View on Storybook

🆕 ItemTile component

Not a full card component, but a way to display information in a uniform way.

View on Storybook

🆕 LinkItem component

Use several of these in sequence to display a nice list of styled links.

View on Storybook

Other Changes

As the library keeps growing, so does the list of components in Storybook. Besides the already existing Form category, components are now subdivided in more categories to help you more easily find the component you need.

What's Changed

• Bump vite from 4.4.12 to 4.5.2 in /design-library by @dependabot in #284
• Add writeShadows script to generate shadows from tokens by @u12206050 in #285
• Add Info, Header, ItemTile, SelectionElement and Graphic components by @StevenMalaihollo in #282
• Categorize stories in Common, Widgets and Other by @laurensgroeneveld in #286

Full Changelog: v2.1.0...v2.2.0

design-library v2.1.0

New Features

🆕 BccReact component

No, we're not switching our frontend framework just yet 😉 You might have seen this component in action on the BCC Event app already. A really nice way to have people leave emoji reactions, and fully customisable!

View on Storybook

What's Changed

• Add info for where to find icons manually by @u12206050 in #273
• Bump vite from 4.4.3 to 4.4.12 in /design-library by @dependabot in #274
• Add BccReact component by @u12206050 in #281

Full Changelog: v2.0.0...v2.1.0

design-library v2.0.0

We are happy to present the second major release for the design library! The amount of new features in this release is limited, as we took the opportunity to address some backwards incompatible changes. Upgrading from v1.8 should for most applications take under 15 minutes, and we encourage everyone to upgrade as soon as possible as the 1.x series will no longer be maintained.

Breaking changes

New typography styles

Estimated upgrade time: 15-30min

The typography styles have been updated, with several styles added and removed and most others renamed. If you do not use these directly in your application, as we expect most current users do, no action is needed.

Recommended migration: do a search and replace for each of these classes in your code, then check if your application still looks acceptable and adjust were needed.

Note: Since the underlying styles were updated, these classes do not always map one-on-one. Be sure to check Storybook to view all available classes.

Removed classes

Make sure these classes no longer exist in your code:

• text-display: This style has been removed, and can be replaced with text-title-xl.
• text-overline: No explicit alternative is provided

Renamed classes

Almost all classes have seen a renaming of their size variants:

• large to lg
• medium to no postfix (so text-title-medium to text-title)
• base to sm or no postfix depending on the style
• small to sm

To find usage, search for each of these classes, and then adjust where needed:

• text-title
• text-heading
• text-body
• text-label

Centered button layout by default

Estimated upgrade time: 5min

The button component layout is now centered by default both in the Vue component and in CSS. Previously the Vue component would always add a .bcc-button-center class. This class is now removed in favor of .bcc-button-justify-content class.

To migrate do a search-and-replace for these classes/props:

When using the Vue library

1. Replace any :center="false" prop usage with justify-content for BccButtons.

When using the CSS library

1. Check if you had any buttons without .bcc-button-center and add .bcc-button-justify-content.
2. Remove any .bcc-button-center class usage

Other Fixes

Mobile fixes

The default font size for inputs was updated to 16px on mobile to prevent the OS from zooming in. The modal was adjusted so it no longer hides behind the browser navigation.

Typography included in CSS

The typography styles were not included in the compiled CSS library, this is now solved.

All Changes

• Updated typography classes in components. Updated docs by @u12206050 in #255
• CI: support beta releases by @laurensgroeneveld in #257
• Bump postcss from 8.4.29 to 8.4.31 in /design-library by @dependabot in #259
• Make button centered by default in CSS by @laurensgroeneveld in #260
• Bump @babel/traverse from 7.22.11 to 7.23.2 in /design-library by @dependabot in #263
• feat: improve Shadow DOM compatibility by @Bernton in #264
• Fix BccProgress component not exported from TS by @laurensgroeneveld in #267
• Update input default text size to be 16px on mobile by @u12206050 in #268
• fix: modal for mobile by @Bernton in #265
• Include typography css in compiled style.css by @u12206050 in #272
• Updated icons-vue dependency in design library to 1.4 by @u12206050 in #271

New Contributors

• @Bernton made their first contribution in #264

Missing Something?

If you're missing a component or feature, we welcome community contributions! To get started, read our new contributing guide or leave a message on Discord.

Full Changelog: v1.8.0...v2.0.0

design-library v2.0.0-beta.4

What's Changed

• Update input default text size to be 16px on mobile by @u12206050 in #268

Full Changelog: v2.0.0-beta.3...v2.0.0-beta.4