cc-pricing-product: the component now displays features that have no translations registered as long as they have a name property. Make sure you filter out unwanted features using the addonFeatures (smart component usage) or productFeatures prop (directly set on the cc-pricing-product component). See the related issue for more info.
cc-addon-encryption-at-rest-option: The price in the options property is no more needed on components:
- cc-addon-elasticsearch-options
- cc-addon-jenkins-options
- cc-addon-mongodb-options
- cc-addon-mysql-options
- cc-addon-postgresql-options
- cc-addon-redis-options
cc-error: remove component
cc-addon-admin: change error property from an enum to a boolean.
cc-addon-credentials: the icon property is now image. It still requires a URL.
cc-block: the icon property now requires an icon object instead of a URL. If you want to pass a URL nevertheless, use the new image property instead.
cc-badge: the icon-alt property is now icon-accessible-name.
cc-badge: the icon-src property is now icon and requires an icon object instead of a URL.
cc-icon: IconModel interface should be imported from src/components/common.types.d.ts file and not src/components/cc-icon/cc-icon.types.d.ts file anymore.
cc-flex-gap: remove component
cc-tile-consumption: remove component
cc-action-dispatcher: remove component
cc-pricing-page: We needed to be able to style and move the pricing components inside the cc-pricing-page component a lot more. For instance, the cc-pricing-header can now be positioned wherever one wants within the cc-pricing-page because everything is slotted within the cc-pricing-page. The smart cc-pricing-page smart component was mainly interacting with cc-pricing-header data (fetching zones). This is why we removed the cc-pricing-page.smart part and added a cc-pricing-header.smart.
cc-pricing-estimation: see more details below
- add new way of handling the component state and passing data to the component.
- use the new smart API.
cc-pricing-header: see more details below
- add new way of handling the component state and passing data to the component.
- use the new smart API.
- add a temporality selector component.
cc-pricing-product-consumption: see more details below
- add new way of handling the component state and passing data to the component.
- the smart component now uses the new smart API.
- remove the slots for heading, description and image.
cc-pricing-table: The cc-pricing-table component has been merged into the cc-pricing-product component.
cc-pricing-product: see details below
- add new way of handling the component state and passing data to the component.
- remove the heading, desc and image/logo slots.
- use the new smart API.
- directly render a table within the component instead of relying on a cc-pricing-table sub-component to do so.
- merge the cc-pricing-table component and stories into cc-pricing-product.

Features

add missing notice a11y translations (9957264)
cc-action-dispatcher: remove component (879bc30)
cc-addon-admin: make use of the cc-notice instead of cc-error (c22a4cc)
cc-addon-backups: implement cc-icon (0097bed)
cc-addon-backups: make use of the cc-notice instead of cc-error (422815c)
cc-addon-credentials: make use of the cc-notice instead of cc-error (7b8e4c3)
cc-addon-credentials: rename icon property to image (1d0655a)
cc-addon-elasticsearch-options: replace error message to get rid of cc-error (884a7ad)
cc-addon-encryption-at-rest-option: implement cc-icon (629806c)
cc-addon-encryption-at-rest-option: Remove pricing notice on addon encryption at rest option (ff4b89b), closes #809
cc-addon-encryption-at-rest-option: replace error message to get rid of cc-error (137b7e9)
cc-addon-features: implement cc-icon (14e6c28)
cc-addon-features: make use of the cc-notice instead of cc-error (14a4495)
cc-addon-jenkins-options: get rid of cc-error (b0b92c0)
cc-addon-linked-apps: make use of the cc-notice instead of cc-error (34caaf9)
cc-addon-mongodb-options: get rid of cc-error (e4e1c77)
cc-addon-mysql-options: get rid of cc-error (b5db7c1)
cc-addon-option-form: add style for the addon components error message (e88ec63)
cc-addon-option-form: properly pass new cc-addon-option icon property (fc76583)
cc-addon-option: add icon property to receive an IconModel (b72e0b5)
cc-addon-option: replace error message to get rid of cc-error (b928866)
cc-addon-postgresql-options: get rid of cc-error (144db10)
cc-addon-redis-options: get rid of cc-error (727be87)
cc-article-list: make use of the cc-notice instead of cc-error (4e8f1cd)
cc-badge: rename iconAlt property to iconAccessibleName (eb4494b)
cc-badge: use cc-icon instead of cc-img (b48032d)
cc-block: get rid of overlay error story (9cf782e)
cc-block: implement cc-icon (4f06188)
cc-block: rename icon property to image and add icon property to receive an IconModel (51e9bf9)
cc-doc-list: make use of the cc-notice instead of cc-error (0357ca2)
cc-elasticsearch-info: implement cc-icon (12828bb)
cc-elasticsearch-info: make use of the cc-notice instead of cc-error (5ec6767)
cc-email-list: implement cc-icon (8619af3)
cc-email-list: make use of the cc-notice instead of cc-error (46624bb)
cc-env-var-create: make use of the cc-notice instead of cc-error (524d523)
cc-env-var-editor-expert: make use of the cc-notice instead of cc-error (37d8721)
cc-env-var-editor-json: make use of the cc-notice instead of cc-error (3120d93)
cc-env-var-form: make use of the cc-notice instead of cc-error (c5e2594)
cc-env-var-linked-services: make use of the cc-notice instead of cc-error (3676829)
cc-error: implement cc-icon (205265d)
cc-error: remove component (b642530)
cc-flex-gap: remove component (cb9f24c)
cc-grafana-info: implement cc-icon (285af26)
cc-grafana-info: make use of the cc-notice instead of cc-error (0f424fd)
cc-header-addon: make use of the cc-notice instead of cc-error (f8574f9)
cc-header-app: implement cc-icon (3863243)
cc-header-app: make use of the cc-notice instead of cc-error (d6c423a)
cc-header-orga: implement cc-icon (eb3980a)
cc-header-orga: make use of the cc-notice instead of cc-error (3cd3b72)
cc-heptapod-info: make use of the cc-notice instead of cc-error (e475cc6)
cc-icon: delete unused legacy icons and update documentation (df98f26)
cc-input-number: implement cc-icon (a26c6c2)
cc-input-text: implement cc-icon (158c19e)
cc-invoice-list: make use of the cc-notice instead of cc-error (aceb9cc)
cc-invoice-table: implement cc-icon (2296126)
cc-invoice: implement cc-icon (e5d4b44)
cc-invoice: make use of the cc-notice instead of cc-error (59534d8)
cc-jenkins-info: implement cc-icon (3cebef0)
cc-jenkins-info: make use of the cc-notice instead of cc-error (88429b0)
cc-map: make use of the cc-notice instead of cc-error (380baf3)
cc-matomo-info: implement cc-icon (489e35d)
cc-matomo-info: make use of the cc-notice instead of cc-error (8e4a0f0)
cc-notice: implement cc-icon (fac4c73)
cc-orga-member-card: implement cc-icon (8951bdf)
cc-orga-member-card: make use of the cc-notice instead of cc-error (44af4b1)
cc-orga-member-list: make use of the cc-notice instead of cc-error (0380c1b)
cc-overview: add error story overview stories (7d3b06e)
cc-pricing-estimation: display non translated features (b7b1093), closes #796
cc-pricing-estimation: update component styles and behavior (3d85f83)
cc-pricing-header: update component styles, smart and state (46022fa)
cc-pricing-page stories: add fake product to the stories (2404aff)
cc-pricing-page: update styles and behavior, remove smart (68f4d67)
cc-pricing-product-consumption: make use of the new cc-notice instead of cc-error (a474a28)
cc-pricing-product-consumption: rework assets (b55f737)
cc-pricing-product-consumption: update styles, smart, and state (cce27e2)
cc-pricing-product: display non translated features (24ec318), closes #796
cc-pricing-product: make use of the cc-notice instead of cc-error (92b6f24)
cc-pricing-product: update styles, smart, and state (5b79751)
cc-ssh-key-list: make use of the cc-notice instead of cc-error (496d77d)
cc-tcp-redirection-form: make use of the cc-notice instead of cc-error (acc2a67)
cc-tcp-redirection: implement cc-icon (ec31ed4)
cc-tile-consumption: remove component (e7a859f)
cc-tile-deployments: replace error message to get rid of cc-error (dd10c2a)
cc-tile-instances: implement cc-icon (ec67cf3)
cc-tile-instances: replace error message to get rid of cc-error (42eacab)
cc-tile-metrics: implement cc-icon (8450410)
cc-tile-metrics: replace error message to get rid of cc-error (4482990)
cc-tile-requests: implement cc-icon (73e98d6)
cc-tile-requests: replace error message to get rid of cc-error (c76a297)
cc-tile-scalability: replace error message to get rid of cc-error (4567dcf)
cc-tile-status-codes: implement cc-icon (44a26b7)
cc-tile-status-codes: replace error message to get rid of cc-error (2318d0b)
cc-toaster: implement cc-icon (29c03d9)
cc-toast: implement cc-icon (3386f32)
cc-zone-input: make use of the cc-notice instead of cc-error (73e44a1)
cc-zone: add new styling options for zone tags (1d091b0)
cc-zone: remove cc-flex-gap (64ab365)
tokens: add --cc-border-radius-default and use it when relevant (a9f344a)
tokens: add --cc-border-radius-small and use it when relevant (c321b79)
tokens: add --cc-color-border-neutral-disabled and use it when relevant (3034296)
tokens: add --cc-color-border-neutral-focused and use it when relevant (593fe51)
tokens: add --cc-color-border-neutral-hovered and use it when relevant (8445e1b)
tokens: add --cc-color-border-neutral-strong and use it when relevant (03aed66)
tokens: add --cc-color-border-neutral-weak and use it when relevant (07fa2a6)
tokens: add --cc-color-border-neutral and use it when relevant (8021678)

Bug Fixes

cc-block: fix close button title (50c8b46), closes #721
cc-button: apply proper opacity value on cc-icon in circle mode and loading state (95d4187)
cc-email-list: fix sample domain name (2d6f6e4), closes #642
cc-env-var-form: fix textarea cropped focus outline (f405788), closes #739
cc-input-*: use --cc-color-bg-neutral-readonly when relevant (22bbc9c), closes #511
cc-invoice: move <template> inside unsafeHTML expression (92b20ec), closes #784
cc-pricing-page dollar story: fix dollar currency not being set properly (280c410)
cc-pricing-product-consumption: add visible labels and legends (4824ffb), closes #561
cc-pricing-product: update boolean i18n argument to match the expected parameter (c919e70)
default-theme: add missing line break, reorder tokens and update doc (816d0db)
English translations: change temporality translation (b08f568)
issue in Custom Element Manifest generation when detecting @typedef imports (2d1ab38), closes #737

Miscellaneous Chores

cc-pricing-table: remove component (157bd7a)

Code Refactoring

cc-icon: refactor IconModel interface to common.types.d.ts (89a6409)

Readme

Source

kind: 🏠 Home title: ' Readme'

Collection of Web Components by Clever Cloud

What is this?

This project contains a collection of Web Components made by Clever Cloud.

Some of those components are low-level like <cc-button>, <cc-input-text> or <cc-loader>, the other components are more high-level and specific to Clever Cloud's domain model.

We use them on different Web UIs we have (public and internal).

Why is it public?

We want to share our knowledge and experience with Web Components along with the tooling we used to build them. We hope it will help others for their own components.
We use those components ourselves but we also want our clients and partners to use them in their own custom Web UIs based on our products.
We think it's a great way for our clients to give feedbacks (and even contributions) on small parts of our Web UIs.

Can I see those components?

All our components are showcased with "stories" using Storybook. You can see all our components (and their stories) on this preview.

Storybook is a great tool to present your components in many different situations. This way, you can check how they behave with different inputs (properties, attributes...) and make sure they produce the right outputs (emit events...).

We also use web-component-analyzer to generate a documentation spec sheet for each component. You can find it in the Notes tab of a component's story (example).

Can I use them in my project?

Sure, they're available on npm. Contact us if you want more details.

License

This project is licensed under the Apache-2.0.

We're using modified versions of two projects related to Leaflet:

Both projects are licensed with BSD-2-Clause. They aren't updated anymore, and we wanted them to be exposed as modern ES modules. This is the main reason we decided to copy them in our own repo. The respective copyrights are at the top of each file:

src/lib/leaflet-heat.js
src/lib/simpleheat.js

Icons are powered by Remix Icon.

Keywords

FAQs

What is @clevercloud/components?

Is @clevercloud/components popular?

Is @clevercloud/components well maintained?

Last updated on 18 Jul 2023

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install