icons v1.0.1

Maintenance release to update several links to the new monorepo setup we have created for all BCC design system packages.

v1.4.1

New Features

Render nested objects in the table

It's now possible to render content from a nested object in the table, by passing a column key with a dot notation. For example, if your data looks like this:

{
  // ...
  progress: {
      amount: 42
  }
}

You can render the contents of this column by setting progress.amount as the column key:

const columns = [
    // ...
    {
      text: "Progress",
      key: "progress.amount",
    },
]

Bug Fixes

A reactivity issue was fixed in the table, leading to it not always correctly rendering an updated items list.

What's Changed

• Make it possible for the table to render a subitem by @laurensgroeneveld in #165
• Fix table reactivity issue by @laurensgroeneveld in #166

Full Changelog: v1.4.0...v1.4.1

v1.4.0

New Features

🆕 Table component

The library now features a BccTable component which can be used to render data. The component provides automatic sorting of columns and easy customization of table cells.

View on Storybook

Icon only button is now square

In accordance with the rest of the button, the icon only button is now square by default, instead of always rounded like previously. Add the rounded prop to get the previous look:

View on Storybook

Bug Fixes

• Fixed v-model not working on the radio component
• All form elements are now wrapped in an inline-flex container instead of flex so the components only take as much space as they need by default

What's Changed

• Create table component by @laurensgroeneveld in #154
• Make icon only button square by default by @laurensgroeneveld in #160
• Fix v-model not working for radio input by @laurensgroeneveld in #161
• Render form elements with inline-flex instead of flex by @laurensgroeneveld in #162

Full Changelog: v1.3.2...v1.4.0

v1.3.2

New Features

🆕 FormMessage component

This component was extracted from the input and select components to be standalone so it can be used for other form elements as well, for example to show inline validation messages.

View on Storybook

CSS changes

The CSS classes for this component were updated from .bcc-input-message to .bcc-form-message. For now the old class names are supported but it's recommend to change this if you were using these classes.

What's Changed

• Extract FormMessage component by @laurensgroeneveld in #151

Full Changelog: v1.3.1...v1.3.2

v1.3.1

New Features

🆕 Form label component

Previously the label was embedded in the input and select components. Now you can use the BccFormLabel component as a standalone component, enabling its usage with for example radio groups:

View on Storybook

Textarea support for input

The input component now supports an is prop to change it to an textarea:

View on Storybook

Changes to CSS classes

Two important CSS changes:

• With the new form label component, the two label classes were updated from .bcc-input-label and .bcc-input-optional-label to .bcc-form-label and .bcc-form-label-optional. The old classes are still available but we recommend updating your app if you depend on these classes as they might get removed in 2.0
• A base bcc-input-message class was added to the input message on the input and select elements. This will probably become it's own component in the future as well.

What's Changed

• Create form label component by @laurensgroeneveld in #149
• Add textarea by @laurensgroeneveld in #150

Full Changelog: v1.3.0...v1.3.1

v1.3.0

New features

🆕 Checkbox, Radio and Select components

The collection of form components was expanded with a new checkbox, radio and select component. These components use the native input and select elements under the hood and their API should be fairly familiar.

View checkbox on Storybook

View radio on Storybook

View select on Storybook

🆕 Alert component

View alert on Storybook

🆕 Form label component

See v1.3.1 release notes

🆕 Form message component

See v1.3.2 release notes

Icon and clearable support for input

The input component now supports a prop for an icon and for a "clear button", making it possible to create a search input:

View input on Storybook

Textarea support for input

See v1.3.1 release notes

New Storybook URL

The URL for Storybook was updated to design-library.developer.bcc.no signify that it's not just usable for Vue components. Because we took the opportunity to update our infrastructure and move the server, the old URL will no longer be updated and will be taken down soon.

The Button, Input and Toggle stories were also placed in a new "Forms" category, to better distinguish them from other components.

Additionally, there is now design-library-dev.developer.bcc.no site to view the latest from the main branch - this corresponds to the dev tag in npm that makes it possible to install the latest unreleased components.

What's Changed

• Update npm dependencies by @laurensgroeneveld in #135
• Add icon to input by @laurensgroeneveld in #137
• Add custom checkbox and radio input by @laurensgroeneveld in #139
• Make input clearable by @laurensgroeneveld in #138
• Import Tailwind Forms plugin in our plugin by @laurensgroeneveld in #141
• Create dev Storybook site by @laurensgroeneveld in #142
• Consolidate infrastructure by @adelinn in #143
• Update focus style for checkbox and radio by @laurensgroeneveld in #144
• Create alert component by @laurensgroeneveld in #145
• Create select component mirroring/using input styles by @laurensgroeneveld in #147
• Update production Storybook deploy to new app by @laurensgroeneveld in #148

New Contributors

• @adelinn made their first contribution in #143

Full Changelog: v1.2.1...v1.3.0

v1.2.1

What's Changed

• Don't render modal body if title and content are empty by @laurensgroeneveld in #134

Full Changelog: v1.2.0...v1.2.1

v1.2.0

New features

🆕 Modal

View in Storybook

🆕 Cookie banner

View in Storybook

Updated docs

Most components have updated documentation with better, more representative code examples and more information about each prop and story.

What's Changed

• Add cookie banner component by @laurensgroeneveld in #130
• Add modal component by @laurensgroeneveld in #131
• Fix modal overlay & make title optional by @laurensgroeneveld in #132
• Update cookie banner to latest design by @laurensgroeneveld in #133

Full Changelog: v1.1.0...v1.2.0

v1.1.0

New Features

🆕 Status indicator component

A new BccStatusIndicator is introduced, which pairs well with the existing BccCapacityIndicator. Where the capacity indicator displays how much capacity is used up in for example an activity, the status indicator is a companion component with a similar layout that can display any icon, with default, success and danger states.

View on Storybook

Capacity indicator only animates changes

Until now, when the animate prop was set the capacity indicator would animate to the current value when rendered. Because this can be annoying for users, the prop was turned to false by default in a previous release. Now we have changed it so that the component will only animate when the underlying value changes:

capacity_indicator_animation.mov

Because of this the animate prop was removed, as we think this new behaviour is what almost everyone would expect from a component like this, and this was actually intended like this originally.

A new animationDuration prop is introduced to control the length of the animation. Set it to 0 to totally disable all animation.

View on Storybook

Other Changes

• Add list example for Avatar by @laurensgroeneveld in #120
• Move CSS files to their component directory by @laurensgroeneveld in #121
• Upgrade Vue to 3.3 by @laurensgroeneveld in #123
• Add all states for capacity indicator by @laurensgroeneveld in #124
• Only animate capacity indicator on value change by @laurensgroeneveld in #126

Full Changelog: v1.0.1...v1.1.0

v1.0.1

This release fixes the documentation for the toggle component. Be sure to checkout the release notes for v1.0 if you haven't upgraded yet.

What's Changed

• Fix interactive toggle example by @laurensgroeneveld in #119

Full Changelog: v1.0.0...v1.0.1