@clevercloud/components

---

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?

1. 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.
2. 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.
3. 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:

• https://github.com/Leaflet/Leaflet.heat
• https://github.com/mourner/simpleheat

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

Changelog

10.0.0 (2022-11-07)

⚠️ BREAKING CHANGES

• <cc-toggle>: update component host default display CSS property (BREAKING CHANGE).
• <cc-input-text>: set default font back to --cc-ff-monospace when the input contains tags (BREAKING CHANGE).
• Introduce a new project file structure (BREAKING CHANGE).
• all components: change rem units to em (BREAKING CHANGE).
• <cc-select>: use the value property of the select element instead of the selected attribute. The value prop should always be set when using the <cc-select> component. It may be set to an empty string if a placeholder is provided (BREAKING CHANGE).
• <cc-html-frame>: change title prop to iframeTitle (iframe-title when used as an attribute) to avoid conflicts with the native title attribute (BREAKING CHANGE).

Components

• <cc-map>: make dot markers not focusable.
• <cc-zone-input>: make server markers not focusable.
• <cc-addon-admin>:
  • fix skeleton mode
  • add visually hidden label for addon name and addon tags input fields so that these fields can be identified by assistive technologies.
• <cc-env-var-form>: fix toggling to JSON mode while in skeleton state.
• <cc-button>: display progress bar during waiting state when button is in link mode.
• <cc-badge>: add skeleton mode
• <cc-input-text>:
  • remove the unique id generation technique and rely on Shadow DOM isolation instead.
  • add hiddenLabel prop to allow the label to be visually hidden in some cases.
  • add red border and redish focus ring when error slot is used
• <cc-input-number>:
  • remove the unique id generation technique and rely on Shadow DOM isolation instead.
  • update stories to always show visible labels.
  • remove tagsWithLabel story since there is always a visible label now.
  • add alt attribute values for controls (+ / -) so that they can be identified by assistive technologies.
  • add hiddenLabel prop to allow the label to be visually hidden in some cases.
  • add red border and redish focus ring when error slot is used
• <cc-select>:
  • remove the unique id generation technique and rely on Shadow DOM isolation instead.
  • only disable the placeholder option if the component is in required mode.
  • add red border and redish focus ring when error slot is used.
• <cc-toggle>: remove the unique name generation technique and rely on Shadow DOM isolation instead.
• accessibility styles: add new accessibilityStyles containing a visually-hidden class to hide content visually but not from assistive technologies.
• <cc-env-var-create>: add visually hidden label for all input fields so that these fields can be identified by assistive technologies.
• <cc-env-var-editor-expert>: add visually hidden label for the <textarea> so that it can be identified by assistive technologies.
• <cc-env-var-editor-json>: add visually hidden label for the <textarea> so that it can be identified by assistive technologies.
• <cc-env-var-editor>: add visually hidden label for the <textarea> so that it can be identified by assistive technologies.
• <cc-env-var-input>: add visually hidden label for the input field so that it can be identified by assistive technologies.
• <cc-header-addon>: add visually hidden label for addonId and realAddonId input fields so that these fields can be identified by assistive technologies.
• <cc-html-frame> loading story: add a title attribute so that it can be identified by assistive technologies.
• <cc-invoice>: add a title on the <cc-html-frame> so that the <iframe> can be identified by assistive technologies.
• <cc-pricing-estimation>: add visually hidden label for <cc-input-number> showing the quantity so that they can be identified by assistive technologies.
• <cc-pricing-product-consumption>:
  • add text content to <cc-button> elements (toggle State buttons) so that they can be identified by assistive technologies.
  • add visually hidden label for <cc-input-number> showing the size or the quantity so that they can be identified by assistive technologies.
• <cc-pricing-table>: add text content to <cc-button> elements (toggle State and add buttons) so that they can be identified by assistive technologies.
• resizeObserver: add window.requestAnimationFrame in the resize observer callback to mitigate the resize observer loop limit exceeded issue.
• stories: fix several stories not being passed to enhancedStoryNames.
• <cc-tile-status-codes>: fix JavaScript errors in case initial loading fails (error state).
• <cc-button>:
  • add a new accessibleName prop to override the aria-label and title values.
  • fix layout bug that occurred on Safari with the <cc-header-app> component.
• New component:
  • <cc-action-dispatcher>
  • <cc-ssh-key-list>
  • <cc-stretch>
  • <cc-email-list>

For devs

• Improve display of components:check-i18n task.
• Upgrade from lit-element@2.5.1 to lit@2.3.1.
• Upgrade from @web/dev-server@0.1.29 to @web/dev-server@0.1.34.
• Upgrade from @open-wc/dev-server-hmr@0.1.2 to @web/dev-server@0.1.3.
• Upgrade from @open-wc/dev-server-hmr@0.1.2 to @web/dev-server@0.1.3.
• Upgrade from @web/dev-server-rollup@0.3.13 to @web/dev-server@0.3.19.
• Upgrade from @web/dev-server-storybook@0.4.1 to @web/dev-server@0.5.4.
• Upgrade from @web/rollup-plugin-import-meta-assets@0.4.1 to @web/dev-server@0.5.4.
• Upgrade from @web/rollup-plugin-import-meta-assets@1.0.6 to @web/rollup-plugin-import-meta-assets@1.0.7.
• Upgrade from @web/test-runner@0.13.4 to @web/test-runner@0.14.0.
• Upgrade from @web/test-runner-mocha@0.7.2 to @web/test-runner-mocha@0.7.5.
• Upgrade from @custom-elements-manifest/analyzer@0.4.1 to @custom-elements-manifest/analyzer@0.6.4.
• Fix Custom Element Manifest generation web dev server plugin: disable caching.
• Add JSDoc based typechecking with TypeScript's CLI (just utils.js for now).
• Rollback the smart-manager to the old low level API and move the observable API to a different module.
• Introduce a new defineSmartComponent function.
• Add FocusLostController, a Lit Reactive Controller that helps manage focus loss.
• Add new eslint plugin eslint-plugin-lit-a11y to prevent accessibility issues.
• Add new dependency @open-wc/testing to allow Web Test Runner to run tests for accessibility issues.
• Add new dependency @web/test-runner-commands so that Web Test Runner can test both on desktop and mobile.
• Add new helpers to extract stories and run accessibility test on them.
• Add new test files in most of the component folders. These test files only contain accessibility tests for the moment.
• Update eslint no-new rule from "error" to "off".
• <cc-tcp-redirection-form>: rework state, types and smart for TCP redirection components.
• Refactor type files from the new file structure.
• Update our CEM support-typedef-jsdoc plugin with some tests and new features.