@cscfi/csc-ui

CSC Design System - Web Component library

A cross-platform web component library that utilizes CSC Design System guidelines. It helps CSC developers to build applications with unified design. The components can be used with any browser and on top of any front-end framework.

Getting Started

See the documentation on how to use the web components and their attributes.

Contributing

Creating / modifying components

• Run npm install in root of the project
• Run npm run generate in the root of the project to generate new components
• Run npm run build:watch in root of the project

The documentation project

The root project generates a json that is used to generate the base of the documentation of the component.

• Run npm install in documentation/angular
• Run npm start in documentation/angular

Create an example for a new web component

• Run ng g c examples/c-name-of-the-component in documentation/angular

Contributors ✨

Thanks goes to these wonderful people (emoji key):

saulipurhonen 📖 💻

Hang Le 💻

villeerikssoncsc 📖 💻 ⚠️ 🚇

csc-design-system-team 📖 🚇 💻

Oskari Väistö 📖 🚇 💻 ⚠️

This project follows the all-contributors specification. Contributions of any kind welcome!

Changelog

1.0.0 (2023-10-27)

⚠ BREAKING CHANGES

• Changed label into name in radio group items. Items can now be disabled
• Make otp input and radio button group work with regular form
• Form related components work now with regular form
• Removed c-flex and c-container
• Custom trigger removed: Datatable allows nesting. Renamed simple and nohover props.
• Removed path prop from c-button
• Removed number prop from c-text-field
• Unify c-tab-buttons keyboard usage with c-tabs usage
• New components: c-tab-items and c-tab-item
• Side navigation: Three-level support, Remove named main slot
• Simplified c-link usage with an icon

Features

• Add loading state to c-icon-button (07a5523)
• Add prop to justify tabs (ac53d26)
• C-checkbox works inside a native html form (f5797cd)
• Changed label into name in radio group items. Items can now be disabled (62b859f)
• Children can now be nested in c-data-table (0c8e1b9)
• Form related components work now with regular form (126d367)
• Make otp input and radio button group work with regular form (2e086e3)
• New component - c-list (5f088d6)
• New component - c-page (51b012e)
• New component - c-radio (f9a6414)
• New component - c-side-navigation-title (a05755a)
• New component - c-table (948128f)
• new component - c-tags (8fa8d48)
• New component: c-option-value. Used with c-autocomplete (5aaefa2)
• New components: c-tab-items and c-tab-item (4571423)
• Removed c-flex and c-container (3188279)
• Removed number prop from c-text-field (8c68a64)
• Removed path prop from c-button (8723101)
• Side navigation: Three-level support, Remove named main slot (580fb5b)
• Vertical tabs (c89ba83)

Bug Fixes

• Unify c-tab-buttons keyboard usage with c-tabs usage (8144cfc)
• Use dynamic gap in c-card and c-login-buttons (7ff05dd)

Code Refactoring

• Custom trigger removed: Datatable allows nesting. Renamed simple and nohover props. (5ad7faf)
• Simplified c-link usage with an icon (4422a0d)