@clevercloud/components - npm Package Versions

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.

9.0.1 (2022-10-28)

• <cc-button>: fix layout bug that occurred on Safari with the <cc-header-app> component.

9.0.0 (2022-07-19)

⚠️ BREAKING CHANGES

• <cc-input-text>:
  • change default font-family to inherit instead of monospace (BREAKING CHANGE),
  • add CSS Custom Prop to change the <input> font-family.
• <cc-input-number>:
  • change default font-family to inherit instead of monospace (BREAKING CHANGE),
  • add CSS Custom Prop to change the <input> font-family.
• <cc-toggle>:
  • rename --cc-text-transform to --cc-toggle-text-transform (BREAKING CHANGE),
  • add CSS Custom Prop to customize border-radius, font-weight.
• Introduce a public theme based on a CSS files (BREAKING CHANGE):
  • move default-theme (design tokens) from a JavaScript file to a CSS file (BREAKING CHANGE),
  • remove default-theme import from all components (BREAKING CHANGE),
  • prefix decision design tokens with cc- (BREAKING CHANGE),
  • define default text color using cc-color-text-default where necessary (BREAKING CHANGE),
  • define default background colors using cc-color-bg-default where necessary (BREAKING CHANGE).
• colors: change color decision names finishing with -light to -weak (for instance: cc-color-text-weak). (BREAKING CHANGE)

Components

• Replace error state after user action by cc-toast notification (cc-grafana-info, cc-tcp-redirection-form, cc-env-var-form).
• New components:
  • <cc-toaster>
  • <cc-toast>
• <cc-button>: add CSS Custom Props to customize border-radius, font-weight and text-transform.

For devs

• rollup:
  • add new plugin rollup-plugin-styles-assets to bundle the default-theme CSS file.
  • add new property (array) styles in deps-manifest to specify the hashed name of the default-theme CSS file corresponding to a specific version (to be used by the CDN).

...

8.0.1 (2022-07-15)

Components

• <cc-env-var-form>: fix the reset button not working.

For devs

• storybook: limit the width of the preview (and center it)
• storybook: add a displayMode option in makeStory to simplify story layout and code

8.0.0 (2022-07-01)

⚠️ BREAKING CHANGES

• <cc-doc-card>: rename title property to heading to fix a conflict.
• <cc-doc-list>: use heading when initializing the cards instead of title.

Components

• <cc-article-list>: fix error mode not triggering on XML parsing failure (smart).
• parseRssFeed(): trim XML string before parse to avoid whitespaces error.
• <cc-button>: update waiting loader animation in circle state.
• Color design tokens: add darker shades for light colors.
• New component:
  • <cc-badge>
• <cc-tcp-redirection-form>: Use <cc-badge> to display redirection count.
• <cc-header-app>: Change footer background to neutral.
• <cc-header-addon>: Change footer background to neutral.
• <cc-header-orga>: Use <cc-badge> to display org status and hotline number.
• <cc-input-text>: add inline prop to place the label on the left of the <input> element. Add new inline story to show this behavior.
• <cc-input-number>: add inline prop to place the label on the left of the <input> element. Add new inline story to show this behavior.
• <cc-select>: add inline prop to place the label on the left of the <select> element. Add new inline story to show this behavior.
• <cc-toggle>: add inline prop to place the label on the left of the group of radio input elements. Add new inline story to show this behavior.
• <cc-invoice-list>: inline year filters (<cc-toggle> for desktop and <cc-select> for mobile).

7.12.0 (2022-05-20)

• cc-link: remove defaultThemeStyles insertion in CSS.
• <cc-addon-linked-apps>: add defaultThemeStyles import so that variables can be used by cc-link.
• <cc-addon-option-form>: add defaultThemeStyles import so that variables can be used by cc-link.
• <cc-elasticsearch-info>: add defaultThemeStyles import so that variables can be used by cc-link.
• <cc-jenkins-info>: add defaultThemeStyles import so that variables can be used by cc-link.
• <cc-matomo-info>: add defaultThemeStyles import so that variables can be used by cc-link.
• <cc-env-var-form>: add defaultThemeStyles import so that variables can be used by cc-link.
• <cc-article-card>: add defaultThemeStyles import so that variables can be used by cc-link.
• <cc-invoice>: add defaultThemeStyles import so that variables can be used by cc-link.
• <cc-grafana-info>: add defaultThemeStyles import so that variables can be used by cc-link.
• cc-link story: update documentation following the color update. Add defaultThemeStyles import inside the example.
• cc-link: fix :visited and :active color so that they are the same as the link with default state (primary highlight).
• <cc-input-text>: set line-height to 1.25em for the <label> element.
• <cc-input-number>: set line-height to 1.25em for the <label> element.
• <cc-select>: set line-height to 1.25em for the <label> element.
• <cc-toggle>: set line-height to 1.25em for the <legend> element.
• defaultThemeStyles: add variable to be used as margin-top value on a <cc-button> when one wants to align all form elements horizontally.
• all-form-controls story: add new story with help message and add a note about how to handle horizontal layout inside forms.
• New components:
  • <cc-article-card>
  • <cc-article-list> (with smart definition)
  • <cc-doc-card>
  • <cc-doc-list>

7.11.0 (2022-04-14)

• colors: use variables to specify colors and swap old colors for new contrasted ones. Add ADR about colors and Design Tokens.
• all-form-controls story: display disabled and readonly form controls next to each other to make sure they look the same.
• New component:
  • <cc-warning-payment>
• cc-input-text: add help text and error message support as well as their related stories. Remove label stories and add label inside all stories.
• cc-input-number: add help text and error message support as well as their related stories. Remove label stories and add label inside all stories.
• cc-select: add help text support as well as its related story.

7.10.1 (2022-03-23)

<cc-matomo-info>: fix logo URLs for PHP, MySQL and Redis

7.10.0 (2022-03-23)

• <cc-input-number>: fix controls mode not working properly from types introduction
• <cc-pricing-header>: fix skeleton animation still displaying on the select on Safari after loading of data
• New component:
  • <cc-matomo-info>