├── .commitlintrc.json ├── .editorconfig ├── .eslintrc ├── .eslintrc-a11y ├── .github └── CODEOWNERS ├── .gitignore ├── .huskyrc.json ├── .prettierrc.json ├── .stylelintrc.json ├── .yarn ├── plugins │ └── @yarnpkg │ │ └── plugin-workspace-tools.cjs └── releases │ └── yarn-3.2.4.cjs ├── .yarnrc.yml ├── AUTHORS ├── CHANGELOG.md ├── CONTRIBUTING.md ├── CONTRIBUTORS ├── LICENSE.md ├── MAINTAINERS ├── MIGRATION.md ├── README.md ├── RELEASING.md ├── THIRD-PARTY-LICENCES ├── TROUBLESHOOTING.md ├── assets └── githubbanner.png ├── changelog.preset.config.js ├── docs ├── .gitignore ├── .gitkeep └── README.md ├── lerna.json ├── package.json ├── packages ├── examples │ ├── react-webpack │ │ ├── .babelrc │ │ ├── .gitignore │ │ ├── CHANGELOG.md │ │ ├── package.json │ │ ├── src │ │ │ ├── app │ │ │ │ ├── App.tsx │ │ │ │ ├── app.scss │ │ │ │ └── components │ │ │ │ │ ├── formFormik │ │ │ │ │ ├── FormFormik.tsx │ │ │ │ │ └── formFormik.scss │ │ │ │ │ ├── formHookForm │ │ │ │ │ ├── FormHookForm.tsx │ │ │ │ │ └── formHookForm.scss │ │ │ │ │ ├── formNative │ │ │ │ │ ├── FormNative.tsx │ │ │ │ │ └── formNative.scss │ │ │ │ │ ├── gallery │ │ │ │ │ ├── Gallery.tsx │ │ │ │ │ └── gallery.scss │ │ │ │ │ ├── testAccordion │ │ │ │ │ └── TestAccordion.tsx │ │ │ │ │ ├── testCombobox │ │ │ │ │ ├── TestCombobox.tsx │ │ │ │ │ └── testCombobox.scss │ │ │ │ │ ├── testModal │ │ │ │ │ └── TestModal.tsx │ │ │ │ │ ├── testSelect │ │ │ │ │ └── TestSelect.tsx │ │ │ │ │ ├── testTimepicker │ │ │ │ │ └── TestTimepicker.tsx │ │ │ │ │ └── testToggle │ │ │ │ │ └── TestToggle.tsx │ │ │ ├── assets │ │ │ │ └── images │ │ │ │ │ └── favicon.png │ │ │ ├── global.d.ts │ │ │ ├── index.html │ │ │ ├── index.tsx │ │ │ └── router-app │ │ │ │ ├── RouterApp.tsx │ │ │ │ ├── components │ │ │ │ └── breadcrumb │ │ │ │ │ ├── Breadcrumb.tsx │ │ │ │ │ └── breadcrumb.scss │ │ │ │ ├── constants │ │ │ │ └── navigation.ts │ │ │ │ ├── modules │ │ │ │ └── products │ │ │ │ │ ├── Products.tsx │ │ │ │ │ └── modules │ │ │ │ │ ├── home │ │ │ │ │ └── Home.tsx │ │ │ │ │ ├── list │ │ │ │ │ └── List.tsx │ │ │ │ │ └── view │ │ │ │ │ └── View.tsx │ │ │ │ └── routerApp.scss │ │ ├── tsconfig.json │ │ └── webpack.config.js │ └── vanilla-webpack │ │ ├── .babelrc │ │ ├── .gitignore │ │ ├── CHANGELOG.md │ │ ├── package.json │ │ ├── src │ │ ├── assets │ │ │ └── images │ │ │ │ └── favicon.png │ │ ├── index.html │ │ └── index.ts │ │ ├── tsconfig.json │ │ └── webpack.config.js ├── ods │ ├── .gitignore │ ├── .npmignore │ ├── CHANGELOG.md │ ├── jest.config.ts │ ├── package.json │ ├── react │ │ ├── .gitignore │ │ ├── .npmignore │ │ ├── CHANGELOG.md │ │ ├── babel.config.json │ │ ├── package.json │ │ ├── testing-library │ │ │ ├── input │ │ │ │ └── input.test.tsx │ │ │ └── jest.config.ts │ │ ├── tests │ │ │ ├── _app │ │ │ │ ├── CHANGELOG.md │ │ │ │ ├── index.html │ │ │ │ ├── package.json │ │ │ │ ├── src │ │ │ │ │ ├── components.ts │ │ │ │ │ ├── components │ │ │ │ │ │ ├── ods-accordion.tsx │ │ │ │ │ │ ├── ods-badge.tsx │ │ │ │ │ │ ├── ods-breadcrumb.tsx │ │ │ │ │ │ ├── ods-button.tsx │ │ │ │ │ │ ├── ods-card.tsx │ │ │ │ │ │ ├── ods-checkbox.tsx │ │ │ │ │ │ ├── ods-clipboard.tsx │ │ │ │ │ │ ├── ods-code.tsx │ │ │ │ │ │ ├── ods-combobox.tsx │ │ │ │ │ │ ├── ods-datepicker.tsx │ │ │ │ │ │ ├── ods-divider.tsx │ │ │ │ │ │ ├── ods-drawer.tsx │ │ │ │ │ │ ├── ods-file-upload.tsx │ │ │ │ │ │ ├── ods-form-field.tsx │ │ │ │ │ │ ├── ods-icon.tsx │ │ │ │ │ │ ├── ods-input.tsx │ │ │ │ │ │ ├── ods-link.tsx │ │ │ │ │ │ ├── ods-medium.tsx │ │ │ │ │ │ ├── ods-message.tsx │ │ │ │ │ │ ├── ods-modal.tsx │ │ │ │ │ │ ├── ods-pagination.tsx │ │ │ │ │ │ ├── ods-password.tsx │ │ │ │ │ │ ├── ods-phone-number.tsx │ │ │ │ │ │ ├── ods-popover.tsx │ │ │ │ │ │ ├── ods-progress-bar.tsx │ │ │ │ │ │ ├── ods-quantity.tsx │ │ │ │ │ │ ├── ods-radio.tsx │ │ │ │ │ │ ├── ods-range.tsx │ │ │ │ │ │ ├── ods-select.tsx │ │ │ │ │ │ ├── ods-skeleton.tsx │ │ │ │ │ │ ├── ods-spinner.tsx │ │ │ │ │ │ ├── ods-switch.tsx │ │ │ │ │ │ ├── ods-table.tsx │ │ │ │ │ │ ├── ods-tabs.tsx │ │ │ │ │ │ ├── ods-tag.tsx │ │ │ │ │ │ ├── ods-text.tsx │ │ │ │ │ │ ├── ods-textarea.tsx │ │ │ │ │ │ ├── ods-timepicker.tsx │ │ │ │ │ │ ├── ods-toggle.tsx │ │ │ │ │ │ └── ods-tooltip.tsx │ │ │ │ │ └── index.tsx │ │ │ │ ├── tsconfig.json │ │ │ │ └── vite.config.ts │ │ │ ├── e2e │ │ │ │ ├── ods-accordion.e2e.ts │ │ │ │ ├── ods-badge.e2e.ts │ │ │ │ ├── ods-breadcrumb.e2e.ts │ │ │ │ ├── ods-button.e2e.ts │ │ │ │ ├── ods-card.e2e.ts │ │ │ │ ├── ods-checkbox.e2e.ts │ │ │ │ ├── ods-clipboard.e2e.ts │ │ │ │ ├── ods-code.e2e.ts │ │ │ │ ├── ods-combobox.e2e.ts │ │ │ │ ├── ods-datepicker.e2e.ts │ │ │ │ ├── ods-divider.e2e.ts │ │ │ │ ├── ods-drawer.e2e.ts │ │ │ │ ├── ods-file-upload.e2e.ts │ │ │ │ ├── ods-form-field.e2e.ts │ │ │ │ ├── ods-icon.e2e.ts │ │ │ │ ├── ods-input.e2e.ts │ │ │ │ ├── ods-link.e2e.ts │ │ │ │ ├── ods-medium.e2e.ts │ │ │ │ ├── ods-message.e2e.ts │ │ │ │ ├── ods-modal.e2e.ts │ │ │ │ ├── ods-pagination.e2e.ts │ │ │ │ ├── ods-password.e2e.ts │ │ │ │ ├── ods-phone-number.e2e.ts │ │ │ │ ├── ods-popover.e2e.ts │ │ │ │ ├── ods-progress-bar.e2e.ts │ │ │ │ ├── ods-quantity.e2e.ts │ │ │ │ ├── ods-radio.e2e.ts │ │ │ │ ├── ods-range.e2e.ts │ │ │ │ ├── ods-select.e2e.ts │ │ │ │ ├── ods-skeleton.e2e.ts │ │ │ │ ├── ods-spinner.e2e.ts │ │ │ │ ├── ods-switch.e2e.ts │ │ │ │ ├── ods-table.e2e.ts │ │ │ │ ├── ods-tabs.e2e.ts │ │ │ │ ├── ods-tag.e2e.ts │ │ │ │ ├── ods-text.e2e.ts │ │ │ │ ├── ods-textarea.e2e.ts │ │ │ │ ├── ods-timepicker.e2e.ts │ │ │ │ ├── ods-toggle.e2e.ts │ │ │ │ └── ods-tooltip.e2e.ts │ │ │ ├── jest.config.js │ │ │ └── setup.ts │ │ ├── tsconfig.cjs.json │ │ └── tsconfig.json │ ├── scripts │ │ ├── build-stencil.js │ │ ├── cem-enum-plugin.mjs │ │ └── wait-for-http.js │ ├── src │ │ ├── components │ │ │ ├── accordion │ │ │ │ ├── .gitignore │ │ │ │ ├── CHANGELOG.md │ │ │ │ ├── custom-elements-manifest.config.mjs │ │ │ │ ├── package.json │ │ │ │ ├── src │ │ │ │ │ ├── components │ │ │ │ │ │ └── ods-accordion │ │ │ │ │ │ │ ├── ods-accordion.scss │ │ │ │ │ │ │ └── ods-accordion.tsx │ │ │ │ │ ├── globals.ts │ │ │ │ │ ├── index.html │ │ │ │ │ ├── index.ts │ │ │ │ │ └── interfaces │ │ │ │ │ │ └── events.ts │ │ │ │ ├── stencil.config.ts │ │ │ │ ├── tests │ │ │ │ │ ├── behaviour │ │ │ │ │ │ └── ods-accordion.e2e.ts │ │ │ │ │ ├── navigation │ │ │ │ │ │ └── ods-accordion.e2e.ts │ │ │ │ │ ├── rendering │ │ │ │ │ │ ├── ods-accordion.e2e.ts │ │ │ │ │ │ └── ods-accordion.spec.ts │ │ │ │ │ └── setup.ts │ │ │ │ └── tsconfig.json │ │ │ ├── badge │ │ │ │ ├── .gitignore │ │ │ │ ├── CHANGELOG.md │ │ │ │ ├── custom-elements-manifest.config.mjs │ │ │ │ ├── package.json │ │ │ │ ├── src │ │ │ │ │ ├── components │ │ │ │ │ │ └── ods-badge │ │ │ │ │ │ │ ├── ods-badge.scss │ │ │ │ │ │ │ └── ods-badge.tsx │ │ │ │ │ ├── constants │ │ │ │ │ │ ├── badge-color.ts │ │ │ │ │ │ ├── badge-icon-alignment.ts │ │ │ │ │ │ └── badge-size.ts │ │ │ │ │ ├── globals.ts │ │ │ │ │ ├── index.html │ │ │ │ │ └── index.ts │ │ │ │ ├── stencil.config.ts │ │ │ │ ├── tests │ │ │ │ │ └── rendering │ │ │ │ │ │ ├── ods-badge.e2e.ts │ │ │ │ │ │ └── ods-badge.spec.ts │ │ │ │ └── tsconfig.json │ │ │ ├── breadcrumb │ │ │ │ ├── .gitignore │ │ │ │ ├── CHANGELOG.md │ │ │ │ ├── custom-elements-manifest.config.mjs │ │ │ │ ├── package.json │ │ │ │ ├── src │ │ │ │ │ ├── components │ │ │ │ │ │ ├── ods-breadcrumb-item │ │ │ │ │ │ │ ├── ods-breadcrumb-item.scss │ │ │ │ │ │ │ └── ods-breadcrumb-item.tsx │ │ │ │ │ │ └── ods-breadcrumb │ │ │ │ │ │ │ ├── ods-breadcrumb.scss │ │ │ │ │ │ │ └── ods-breadcrumb.tsx │ │ │ │ │ ├── controller │ │ │ │ │ │ └── ods-breadcrumb.ts │ │ │ │ │ ├── globals.ts │ │ │ │ │ ├── index.html │ │ │ │ │ ├── index.ts │ │ │ │ │ └── interfaces │ │ │ │ │ │ └── events.ts │ │ │ │ ├── stencil.config.ts │ │ │ │ ├── tests │ │ │ │ │ ├── accessibility │ │ │ │ │ │ └── ods-breadcrumb.e2e.ts │ │ │ │ │ ├── behaviour │ │ │ │ │ │ └── ods-breadcrumb-item.spec.ts │ │ │ │ │ ├── controller │ │ │ │ │ │ └── ods-breadcrumb.spec.ts │ │ │ │ │ ├── navigation │ │ │ │ │ │ ├── ods-breadcrumb-item.e2e.ts │ │ │ │ │ │ └── ods-breadcrumb.e2e.ts │ │ │ │ │ └── rendering │ │ │ │ │ │ ├── ods-breadcrumb-item.e2e.ts │ │ │ │ │ │ ├── ods-breadcrumb-item.spec.ts │ │ │ │ │ │ └── ods-breadcrumb.e2e.ts │ │ │ │ └── tsconfig.json │ │ │ ├── button │ │ │ │ ├── .gitignore │ │ │ │ ├── CHANGELOG.md │ │ │ │ ├── custom-elements-manifest.config.mjs │ │ │ │ ├── package.json │ │ │ │ ├── src │ │ │ │ │ ├── components │ │ │ │ │ │ └── ods-button │ │ │ │ │ │ │ ├── ods-button.scss │ │ │ │ │ │ │ └── ods-button.tsx │ │ │ │ │ ├── constants │ │ │ │ │ │ ├── button-color.ts │ │ │ │ │ │ ├── button-icon-alignment.ts │ │ │ │ │ │ ├── button-size.ts │ │ │ │ │ │ └── button-variant.ts │ │ │ │ │ ├── controller │ │ │ │ │ │ └── ods-button.ts │ │ │ │ │ ├── globals.ts │ │ │ │ │ ├── index.html │ │ │ │ │ └── index.ts │ │ │ │ ├── stencil.config.ts │ │ │ │ ├── tests │ │ │ │ │ ├── controller │ │ │ │ │ │ └── ods-button.spec.ts │ │ │ │ │ ├── navigation │ │ │ │ │ │ └── ods-button.e2e.ts │ │ │ │ │ └── rendering │ │ │ │ │ │ ├── ods-button.e2e.ts │ │ │ │ │ │ └── ods-button.spec.ts │ │ │ │ └── tsconfig.json │ │ │ ├── card │ │ │ │ ├── .gitignore │ │ │ │ ├── CHANGELOG.md │ │ │ │ ├── custom-elements-manifest.config.mjs │ │ │ │ ├── package.json │ │ │ │ ├── src │ │ │ │ │ ├── components │ │ │ │ │ │ └── ods-card │ │ │ │ │ │ │ ├── ods-card.scss │ │ │ │ │ │ │ └── ods-card.tsx │ │ │ │ │ ├── constants │ │ │ │ │ │ └── card-color.ts │ │ │ │ │ ├── globals.ts │ │ │ │ │ ├── index.html │ │ │ │ │ └── index.ts │ │ │ │ ├── stencil.config.ts │ │ │ │ ├── tests │ │ │ │ │ └── rendering │ │ │ │ │ │ ├── ods-card.e2e.ts │ │ │ │ │ │ └── ods-card.spec.ts │ │ │ │ └── tsconfig.json │ │ │ ├── checkbox │ │ │ │ ├── .gitignore │ │ │ │ ├── CHANGELOG.md │ │ │ │ ├── custom-elements-manifest.config.mjs │ │ │ │ ├── package.json │ │ │ │ ├── src │ │ │ │ │ ├── components │ │ │ │ │ │ └── ods-checkbox │ │ │ │ │ │ │ ├── ods-checkbox.scss │ │ │ │ │ │ │ └── ods-checkbox.tsx │ │ │ │ │ ├── globals.ts │ │ │ │ │ ├── index.html │ │ │ │ │ ├── index.ts │ │ │ │ │ └── interfaces │ │ │ │ │ │ └── event.ts │ │ │ │ ├── stencil.config.ts │ │ │ │ ├── tests │ │ │ │ │ ├── behaviour │ │ │ │ │ │ └── ods-checkbox.e2e.ts │ │ │ │ │ ├── navigation │ │ │ │ │ │ └── ods-checkbox.e2e.ts │ │ │ │ │ ├── rendering │ │ │ │ │ │ ├── ods-checkbox.e2e.ts │ │ │ │ │ │ └── ods-checkbox.spec.ts │ │ │ │ │ └── validity │ │ │ │ │ │ └── ods-checkbox.e2e.ts │ │ │ │ └── tsconfig.json │ │ │ ├── clipboard │ │ │ │ ├── .gitignore │ │ │ │ ├── CHANGELOG.md │ │ │ │ ├── custom-elements-manifest.config.mjs │ │ │ │ ├── package.json │ │ │ │ ├── src │ │ │ │ │ ├── components │ │ │ │ │ │ └── ods-clipboard │ │ │ │ │ │ │ ├── ods-clipboard.scss │ │ │ │ │ │ │ └── ods-clipboard.tsx │ │ │ │ │ ├── globals.ts │ │ │ │ │ ├── index.html │ │ │ │ │ └── index.ts │ │ │ │ ├── stencil.config.ts │ │ │ │ ├── tests │ │ │ │ │ ├── accessibility │ │ │ │ │ │ └── ods-clipboard.e2e.ts │ │ │ │ │ ├── behaviour │ │ │ │ │ │ ├── ods-clipboard.e2e.ts │ │ │ │ │ │ └── ods-clipboard.spec.ts │ │ │ │ │ ├── navigation │ │ │ │ │ │ └── ods-clipboard.e2e.ts │ │ │ │ │ └── rendering │ │ │ │ │ │ ├── ods-clipboard.e2e.ts │ │ │ │ │ │ └── ods-clipboard.spec.ts │ │ │ │ └── tsconfig.json │ │ │ ├── code │ │ │ │ ├── .gitignore │ │ │ │ ├── CHANGELOG.md │ │ │ │ ├── custom-elements-manifest.config.mjs │ │ │ │ ├── package.json │ │ │ │ ├── src │ │ │ │ │ ├── components │ │ │ │ │ │ └── ods-code │ │ │ │ │ │ │ ├── ods-code.scss │ │ │ │ │ │ │ └── ods-code.tsx │ │ │ │ │ ├── globals.ts │ │ │ │ │ ├── index.html │ │ │ │ │ └── index.ts │ │ │ │ ├── stencil.config.ts │ │ │ │ ├── tests │ │ │ │ │ ├── accessibility │ │ │ │ │ │ └── ods-code.e2e.ts │ │ │ │ │ ├── behaviour │ │ │ │ │ │ └── ods-code.e2e.ts │ │ │ │ │ ├── navigation │ │ │ │ │ │ └── ods-code.e2e.ts │ │ │ │ │ └── rendering │ │ │ │ │ │ ├── ods-code.e2e.ts │ │ │ │ │ │ └── ods-code.spec.ts │ │ │ │ └── tsconfig.json │ │ │ ├── combobox │ │ │ │ ├── .gitignore │ │ │ │ ├── CHANGELOG.md │ │ │ │ ├── custom-elements-manifest.config.mjs │ │ │ │ ├── package.json │ │ │ │ ├── src │ │ │ │ │ ├── components │ │ │ │ │ │ ├── ods-combobox-group │ │ │ │ │ │ │ ├── ods-combobox-group.scss │ │ │ │ │ │ │ └── ods-combobox-group.tsx │ │ │ │ │ │ ├── ods-combobox-item │ │ │ │ │ │ │ ├── ods-combobox-item.scss │ │ │ │ │ │ │ └── ods-combobox-item.tsx │ │ │ │ │ │ └── ods-combobox │ │ │ │ │ │ │ ├── ods-combobox.scss │ │ │ │ │ │ │ └── ods-combobox.tsx │ │ │ │ │ ├── constants │ │ │ │ │ │ └── combobox-strategy.ts │ │ │ │ │ ├── controller │ │ │ │ │ │ └── ods-combobox.ts │ │ │ │ │ ├── globals.ts │ │ │ │ │ ├── index.html │ │ │ │ │ ├── index.ts │ │ │ │ │ └── interfaces │ │ │ │ │ │ └── events.ts │ │ │ │ ├── stencil.config.ts │ │ │ │ ├── tests │ │ │ │ │ ├── accessibility │ │ │ │ │ │ ├── ods-combobox-item.e2e.ts │ │ │ │ │ │ └── ods-combobox.e2e.ts │ │ │ │ │ ├── behaviour │ │ │ │ │ │ ├── ods-combobox-item.e2e.ts │ │ │ │ │ │ └── ods-combobox.e2e.ts │ │ │ │ │ ├── controller │ │ │ │ │ │ └── ods-combobox.spec.ts │ │ │ │ │ ├── navigation │ │ │ │ │ │ └── ods-combobox.e2e.ts │ │ │ │ │ ├── rendering │ │ │ │ │ │ ├── ods-combobox-group.e2e.ts │ │ │ │ │ │ ├── ods-combobox-item.e2e.ts │ │ │ │ │ │ ├── ods-combobox-item.spec.ts │ │ │ │ │ │ ├── ods-combobox.e2e.ts │ │ │ │ │ │ └── ods-combobox.spec.ts │ │ │ │ │ └── validity │ │ │ │ │ │ └── ods-combobox.e2e.ts │ │ │ │ └── tsconfig.json │ │ │ ├── datepicker │ │ │ │ ├── .gitignore │ │ │ │ ├── CHANGELOG.md │ │ │ │ ├── custom-elements-manifest.config.mjs │ │ │ │ ├── jestStub.js │ │ │ │ ├── package.json │ │ │ │ ├── src │ │ │ │ │ ├── components │ │ │ │ │ │ └── ods-datepicker │ │ │ │ │ │ │ ├── ods-datepicker.scss │ │ │ │ │ │ │ └── ods-datepicker.tsx │ │ │ │ │ ├── constants │ │ │ │ │ │ ├── datepicker-day.ts │ │ │ │ │ │ ├── datepicker-locale.ts │ │ │ │ │ │ └── datepicker-strategy.ts │ │ │ │ │ ├── controller │ │ │ │ │ │ └── ods-datepicker.ts │ │ │ │ │ ├── globals.ts │ │ │ │ │ ├── index.html │ │ │ │ │ ├── index.ts │ │ │ │ │ └── interfaces │ │ │ │ │ │ └── events.ts │ │ │ │ ├── stencil.config.ts │ │ │ │ ├── tests │ │ │ │ │ ├── behaviour │ │ │ │ │ │ └── ods-datepicker.e2e.ts │ │ │ │ │ ├── controller │ │ │ │ │ │ └── ods-datepicker.spec.ts │ │ │ │ │ ├── navigation │ │ │ │ │ │ └── ods-datepicker.e2e.ts │ │ │ │ │ ├── rendering │ │ │ │ │ │ ├── ods-datepicker.e2e.ts │ │ │ │ │ │ └── ods-datepicker.spec.ts │ │ │ │ │ └── validity │ │ │ │ │ │ └── ods-datepicker.e2e.ts │ │ │ │ └── tsconfig.json │ │ │ ├── divider │ │ │ │ ├── .gitignore │ │ │ │ ├── CHANGELOG.md │ │ │ │ ├── custom-elements-manifest.config.mjs │ │ │ │ ├── package.json │ │ │ │ ├── src │ │ │ │ │ ├── components │ │ │ │ │ │ └── ods-divider │ │ │ │ │ │ │ ├── ods-divider.scss │ │ │ │ │ │ │ └── ods-divider.tsx │ │ │ │ │ ├── constants │ │ │ │ │ │ ├── divider-color.ts │ │ │ │ │ │ └── divider-spacing.ts │ │ │ │ │ ├── globals.ts │ │ │ │ │ ├── index.html │ │ │ │ │ └── index.ts │ │ │ │ ├── stencil.config.ts │ │ │ │ ├── tests │ │ │ │ │ └── rendering │ │ │ │ │ │ ├── ods-divider.e2e.ts │ │ │ │ │ │ └── ods-divider.spec.ts │ │ │ │ └── tsconfig.json │ │ │ ├── drawer │ │ │ │ ├── .gitignore │ │ │ │ ├── CHANGELOG.md │ │ │ │ ├── custom-elements-manifest.config.mjs │ │ │ │ ├── package.json │ │ │ │ ├── src │ │ │ │ │ ├── components │ │ │ │ │ │ └── ods-drawer │ │ │ │ │ │ │ ├── ods-drawer.scss │ │ │ │ │ │ │ └── ods-drawer.tsx │ │ │ │ │ ├── constant │ │ │ │ │ │ └── drawer-position.ts │ │ │ │ │ ├── globals.ts │ │ │ │ │ ├── index.html │ │ │ │ │ └── index.ts │ │ │ │ ├── stencil.config.ts │ │ │ │ ├── tests │ │ │ │ │ ├── behaviour │ │ │ │ │ │ ├── ods-drawer.e2e.ts │ │ │ │ │ │ └── ods-drawer.spec.ts │ │ │ │ │ ├── navigation │ │ │ │ │ │ └── ods-drawer.e2e.ts │ │ │ │ │ └── rendering │ │ │ │ │ │ ├── ods-drawer.e2e.ts │ │ │ │ │ │ └── ods-drawer.spec.ts │ │ │ │ └── tsconfig.json │ │ │ ├── file-upload │ │ │ │ ├── .gitignore │ │ │ │ ├── CHANGELOG.md │ │ │ │ ├── custom-elements-manifest.config.mjs │ │ │ │ ├── package.json │ │ │ │ ├── src │ │ │ │ │ ├── components │ │ │ │ │ │ ├── ods-file-upload-item │ │ │ │ │ │ │ ├── ods-file-upload-item.scss │ │ │ │ │ │ │ └── ods-file-upload-item.tsx │ │ │ │ │ │ └── ods-file-upload │ │ │ │ │ │ │ ├── ods-file-upload.scss │ │ │ │ │ │ │ └── ods-file-upload.tsx │ │ │ │ │ ├── constants │ │ │ │ │ │ └── file-error.ts │ │ │ │ │ ├── controller │ │ │ │ │ │ └── ods-file-upload.ts │ │ │ │ │ ├── globals.ts │ │ │ │ │ ├── index.html │ │ │ │ │ ├── index.ts │ │ │ │ │ └── interfaces │ │ │ │ │ │ ├── attributes.ts │ │ │ │ │ │ └── events.ts │ │ │ │ ├── stencil.config.ts │ │ │ │ ├── tests │ │ │ │ │ ├── behaviour │ │ │ │ │ │ ├── ods-file-upload-item.e2e.ts │ │ │ │ │ │ └── ods-file-upload.e2e.ts │ │ │ │ │ ├── controller │ │ │ │ │ │ └── ods-file-upload.spec.ts │ │ │ │ │ ├── navigation │ │ │ │ │ │ ├── ods-file-upload-item.e2e.ts │ │ │ │ │ │ └── ods-file-upload.e2e.ts │ │ │ │ │ └── rendering │ │ │ │ │ │ ├── ods-file-upload-item.e2e.ts │ │ │ │ │ │ ├── ods-file-upload-item.spec.ts │ │ │ │ │ │ ├── ods-file-upload.e2e.ts │ │ │ │ │ │ └── ods-file-upload.spec.ts │ │ │ │ └── tsconfig.json │ │ │ ├── form-field │ │ │ │ ├── .gitignore │ │ │ │ ├── CHANGELOG.md │ │ │ │ ├── custom-elements-manifest.config.mjs │ │ │ │ ├── package.json │ │ │ │ ├── src │ │ │ │ │ ├── components │ │ │ │ │ │ └── ods-form-field │ │ │ │ │ │ │ ├── ods-form-field.scss │ │ │ │ │ │ │ └── ods-form-field.tsx │ │ │ │ │ ├── globals.ts │ │ │ │ │ ├── index.html │ │ │ │ │ └── index.ts │ │ │ │ ├── stencil.config.ts │ │ │ │ ├── tests │ │ │ │ │ └── rendering │ │ │ │ │ │ ├── ods-form-field.e2e.ts │ │ │ │ │ │ └── ods-form-field.spec.ts │ │ │ │ └── tsconfig.json │ │ │ ├── icon │ │ │ │ ├── .gitignore │ │ │ │ ├── CHANGELOG.md │ │ │ │ ├── custom-elements-manifest.config.mjs │ │ │ │ ├── package.json │ │ │ │ ├── src │ │ │ │ │ ├── components │ │ │ │ │ │ └── ods-icon │ │ │ │ │ │ │ ├── ods-icon.scss │ │ │ │ │ │ │ └── ods-icon.tsx │ │ │ │ │ ├── constants │ │ │ │ │ │ └── icon-name.ts │ │ │ │ │ ├── globals.ts │ │ │ │ │ ├── index.html │ │ │ │ │ └── index.ts │ │ │ │ ├── stencil.config.ts │ │ │ │ ├── tests │ │ │ │ │ └── rendering │ │ │ │ │ │ ├── ods-icon.e2e.ts │ │ │ │ │ │ └── ods-icon.spec.ts │ │ │ │ └── tsconfig.json │ │ │ ├── index.ts │ │ │ ├── input │ │ │ │ ├── .gitignore │ │ │ │ ├── CHANGELOG.md │ │ │ │ ├── custom-elements-manifest.config.mjs │ │ │ │ ├── package.json │ │ │ │ ├── src │ │ │ │ │ ├── components │ │ │ │ │ │ └── ods-input │ │ │ │ │ │ │ ├── ods-input.scss │ │ │ │ │ │ │ └── ods-input.tsx │ │ │ │ │ ├── constants │ │ │ │ │ │ └── input-type.ts │ │ │ │ │ ├── controller │ │ │ │ │ │ └── ods-input.ts │ │ │ │ │ ├── globals.ts │ │ │ │ │ ├── index.html │ │ │ │ │ ├── index.ts │ │ │ │ │ └── interfaces │ │ │ │ │ │ └── events.ts │ │ │ │ ├── stencil.config.ts │ │ │ │ ├── tests │ │ │ │ │ ├── behaviour │ │ │ │ │ │ ├── ods-input.e2e.ts │ │ │ │ │ │ └── ods-input.spec.ts │ │ │ │ │ ├── controller │ │ │ │ │ │ └── ods-input.spec.ts │ │ │ │ │ ├── navigation │ │ │ │ │ │ └── ods-input.e2e.ts │ │ │ │ │ ├── rendering │ │ │ │ │ │ ├── ods-input.e2e.ts │ │ │ │ │ │ └── ods-input.spec.ts │ │ │ │ │ └── validity │ │ │ │ │ │ └── ods-input.e2e.ts │ │ │ │ └── tsconfig.json │ │ │ ├── link │ │ │ │ ├── .gitignore │ │ │ │ ├── CHANGELOG.md │ │ │ │ ├── custom-elements-manifest.config.mjs │ │ │ │ ├── package.json │ │ │ │ ├── src │ │ │ │ │ ├── components │ │ │ │ │ │ └── ods-link │ │ │ │ │ │ │ ├── ods-link.scss │ │ │ │ │ │ │ └── ods-link.tsx │ │ │ │ │ ├── constant │ │ │ │ │ │ ├── link-color.ts │ │ │ │ │ │ └── link-icon-alignment.ts │ │ │ │ │ ├── globals.ts │ │ │ │ │ ├── index.html │ │ │ │ │ └── index.ts │ │ │ │ ├── stencil.config.ts │ │ │ │ ├── tests │ │ │ │ │ ├── navigation │ │ │ │ │ │ └── ods-link.e2e.ts │ │ │ │ │ └── rendering │ │ │ │ │ │ ├── ods-link.e2e.ts │ │ │ │ │ │ └── ods-link.spec.ts │ │ │ │ └── tsconfig.json │ │ │ ├── medium │ │ │ │ ├── .gitignore │ │ │ │ ├── CHANGELOG.md │ │ │ │ ├── custom-elements-manifest.config.mjs │ │ │ │ ├── package.json │ │ │ │ ├── src │ │ │ │ │ ├── components │ │ │ │ │ │ └── ods-medium │ │ │ │ │ │ │ ├── ods-medium.scss │ │ │ │ │ │ │ └── ods-medium.tsx │ │ │ │ │ ├── globals.ts │ │ │ │ │ ├── index.html │ │ │ │ │ └── index.ts │ │ │ │ ├── stencil.config.ts │ │ │ │ ├── tests │ │ │ │ │ └── rendering │ │ │ │ │ │ ├── ods-medium.e2e.ts │ │ │ │ │ │ └── ods-medium.spec.ts │ │ │ │ └── tsconfig.json │ │ │ ├── message │ │ │ │ ├── .gitignore │ │ │ │ ├── CHANGELOG.md │ │ │ │ ├── custom-elements-manifest.config.mjs │ │ │ │ ├── package.json │ │ │ │ ├── src │ │ │ │ │ ├── components │ │ │ │ │ │ └── ods-message │ │ │ │ │ │ │ ├── ods-message.scss │ │ │ │ │ │ │ └── ods-message.tsx │ │ │ │ │ ├── constants │ │ │ │ │ │ ├── message-color.ts │ │ │ │ │ │ └── message-variant.ts │ │ │ │ │ ├── controller │ │ │ │ │ │ └── ods-message.ts │ │ │ │ │ ├── globals.ts │ │ │ │ │ ├── index.html │ │ │ │ │ └── index.ts │ │ │ │ ├── stencil.config.ts │ │ │ │ ├── tests │ │ │ │ │ ├── controller │ │ │ │ │ │ └── ods-message.spec.ts │ │ │ │ │ ├── navigation │ │ │ │ │ │ └── ods-message.e2e.ts │ │ │ │ │ └── rendering │ │ │ │ │ │ ├── ods-message.e2e.ts │ │ │ │ │ │ └── ods-message.spec.ts │ │ │ │ └── tsconfig.json │ │ │ ├── modal │ │ │ │ ├── .gitignore │ │ │ │ ├── CHANGELOG.md │ │ │ │ ├── custom-elements-manifest.config.mjs │ │ │ │ ├── package.json │ │ │ │ ├── src │ │ │ │ │ ├── components │ │ │ │ │ │ └── ods-modal │ │ │ │ │ │ │ ├── ods-modal.scss │ │ │ │ │ │ │ └── ods-modal.tsx │ │ │ │ │ ├── constants │ │ │ │ │ │ └── modal-color.ts │ │ │ │ │ ├── globals.ts │ │ │ │ │ ├── index.html │ │ │ │ │ └── index.ts │ │ │ │ ├── stencil.config.ts │ │ │ │ ├── tests │ │ │ │ │ ├── behaviour │ │ │ │ │ │ ├── ods-modal.e2e.ts │ │ │ │ │ │ └── ods-modal.spec.ts │ │ │ │ │ ├── navigation │ │ │ │ │ │ └── ods-modal.e2e.ts │ │ │ │ │ └── rendering │ │ │ │ │ │ ├── ods-modal.e2e.ts │ │ │ │ │ │ └── ods-modal.spec.ts │ │ │ │ └── tsconfig.json │ │ │ ├── pagination │ │ │ │ ├── .gitignore │ │ │ │ ├── CHANGELOG.md │ │ │ │ ├── custom-elements-manifest.config.mjs │ │ │ │ ├── package.json │ │ │ │ ├── src │ │ │ │ │ ├── components │ │ │ │ │ │ └── ods-pagination │ │ │ │ │ │ │ ├── ods-pagination.scss │ │ │ │ │ │ │ └── ods-pagination.tsx │ │ │ │ │ ├── constants │ │ │ │ │ │ └── pagination-per-page.ts │ │ │ │ │ ├── controller │ │ │ │ │ │ └── ods-pagination.ts │ │ │ │ │ ├── globals.ts │ │ │ │ │ ├── index.html │ │ │ │ │ ├── index.ts │ │ │ │ │ └── interfaces │ │ │ │ │ │ ├── events.ts │ │ │ │ │ │ └── pagination-page-list.ts │ │ │ │ ├── stencil.config.ts │ │ │ │ ├── tests │ │ │ │ │ ├── accessibility │ │ │ │ │ │ └── ods-pagination.e2e.ts │ │ │ │ │ ├── controller │ │ │ │ │ │ └── ods-pagination.spec.ts │ │ │ │ │ ├── navigation │ │ │ │ │ │ └── ods-pagination.e2e.ts │ │ │ │ │ └── rendering │ │ │ │ │ │ ├── ods-pagination.e2e.ts │ │ │ │ │ │ └── ods-pagination.spec.ts │ │ │ │ └── tsconfig.json │ │ │ ├── password │ │ │ │ ├── .gitignore │ │ │ │ ├── CHANGELOG.md │ │ │ │ ├── custom-elements-manifest.config.mjs │ │ │ │ ├── package.json │ │ │ │ ├── src │ │ │ │ │ ├── components │ │ │ │ │ │ └── ods-password │ │ │ │ │ │ │ ├── ods-password.scss │ │ │ │ │ │ │ └── ods-password.tsx │ │ │ │ │ ├── controller │ │ │ │ │ │ └── ods-password.ts │ │ │ │ │ ├── globals.ts │ │ │ │ │ ├── index.html │ │ │ │ │ ├── index.ts │ │ │ │ │ └── interfaces │ │ │ │ │ │ └── events.ts │ │ │ │ ├── stencil.config.ts │ │ │ │ ├── tests │ │ │ │ │ ├── behaviour │ │ │ │ │ │ └── ods-password.e2e.ts │ │ │ │ │ ├── controller │ │ │ │ │ │ └── ods-password.spec.ts │ │ │ │ │ ├── navigation │ │ │ │ │ │ └── ods-password.e2e.ts │ │ │ │ │ ├── rendering │ │ │ │ │ │ ├── ods-password.e2e.ts │ │ │ │ │ │ └── ods-password.spec.ts │ │ │ │ │ └── validity │ │ │ │ │ │ └── ods-password.e2e.ts │ │ │ │ └── tsconfig.json │ │ │ ├── phone-number │ │ │ │ ├── .gitignore │ │ │ │ ├── CHANGELOG.md │ │ │ │ ├── README.md │ │ │ │ ├── custom-elements-manifest.config.mjs │ │ │ │ ├── package.json │ │ │ │ ├── scripts │ │ │ │ │ └── validate-i18n-keys.ts │ │ │ │ ├── src │ │ │ │ │ ├── assets │ │ │ │ │ │ ├── sprite-flags-24x24.png │ │ │ │ │ │ └── sprite-flags-24x24.scss │ │ │ │ │ ├── components │ │ │ │ │ │ └── ods-phone-number │ │ │ │ │ │ │ ├── ods-phone-number.scss │ │ │ │ │ │ │ └── ods-phone-number.tsx │ │ │ │ │ ├── constants │ │ │ │ │ │ ├── phone-number-country-iso-code.ts │ │ │ │ │ │ ├── phone-number-country-preset.ts │ │ │ │ │ │ └── phone-number-locale.ts │ │ │ │ │ ├── controller │ │ │ │ │ │ └── ods-phone-number.ts │ │ │ │ │ ├── globals.ts │ │ │ │ │ ├── i18n │ │ │ │ │ │ ├── countries-de.ts │ │ │ │ │ │ ├── countries-en.ts │ │ │ │ │ │ ├── countries-es.ts │ │ │ │ │ │ ├── countries-fr.ts │ │ │ │ │ │ ├── countries-it.ts │ │ │ │ │ │ ├── countries-nl.ts │ │ │ │ │ │ ├── countries-pl.ts │ │ │ │ │ │ └── countries-pt.ts │ │ │ │ │ ├── index.html │ │ │ │ │ ├── index.ts │ │ │ │ │ └── interfaces │ │ │ │ │ │ └── events.ts │ │ │ │ ├── stencil.config.ts │ │ │ │ ├── tests │ │ │ │ │ ├── behaviour │ │ │ │ │ │ └── ods-phone-number.e2e.ts │ │ │ │ │ ├── controller │ │ │ │ │ │ └── ods-phone-number.spec.ts │ │ │ │ │ ├── navigation │ │ │ │ │ │ └── ods-phone-number.e2e.ts │ │ │ │ │ ├── rendering │ │ │ │ │ │ ├── ods-phone-number.e2e.ts │ │ │ │ │ │ └── ods-phone-number.spec.ts │ │ │ │ │ └── validity │ │ │ │ │ │ └── ods-phone-number.e2e.ts │ │ │ │ └── tsconfig.json │ │ │ ├── popover │ │ │ │ ├── .gitignore │ │ │ │ ├── CHANGELOG.md │ │ │ │ ├── custom-elements-manifest.config.mjs │ │ │ │ ├── package.json │ │ │ │ ├── src │ │ │ │ │ ├── components │ │ │ │ │ │ └── ods-popover │ │ │ │ │ │ │ ├── ods-popover.scss │ │ │ │ │ │ │ └── ods-popover.tsx │ │ │ │ │ ├── constants │ │ │ │ │ │ ├── popover-position.ts │ │ │ │ │ │ └── popover-strategy.ts │ │ │ │ │ ├── globals.ts │ │ │ │ │ ├── index.html │ │ │ │ │ └── index.ts │ │ │ │ ├── stencil.config.ts │ │ │ │ ├── tests │ │ │ │ │ ├── behaviour │ │ │ │ │ │ └── ods-popover.e2e.ts │ │ │ │ │ ├── navigation │ │ │ │ │ │ └── ods-popover.e2e.ts │ │ │ │ │ └── rendering │ │ │ │ │ │ ├── ods-popover.e2e.ts │ │ │ │ │ │ └── ods-popover.spec.ts │ │ │ │ └── tsconfig.json │ │ │ ├── progress-bar │ │ │ │ ├── .gitignore │ │ │ │ ├── CHANGELOG.md │ │ │ │ ├── custom-elements-manifest.config.mjs │ │ │ │ ├── package.json │ │ │ │ ├── src │ │ │ │ │ ├── components │ │ │ │ │ │ └── ods-progress-bar │ │ │ │ │ │ │ ├── ods-progress-bar.scss │ │ │ │ │ │ │ └── ods-progress-bar.tsx │ │ │ │ │ ├── globals.ts │ │ │ │ │ ├── index.html │ │ │ │ │ └── index.ts │ │ │ │ ├── stencil.config.ts │ │ │ │ ├── tests │ │ │ │ │ └── rendering │ │ │ │ │ │ ├── ods-progress-bar.e2e.ts │ │ │ │ │ │ └── ods-progress-bar.spec.ts │ │ │ │ └── tsconfig.json │ │ │ ├── quantity │ │ │ │ ├── .gitignore │ │ │ │ ├── CHANGELOG.md │ │ │ │ ├── custom-elements-manifest.config.mjs │ │ │ │ ├── package.json │ │ │ │ ├── src │ │ │ │ │ ├── components │ │ │ │ │ │ └── ods-quantity │ │ │ │ │ │ │ ├── ods-quantity.scss │ │ │ │ │ │ │ └── ods-quantity.tsx │ │ │ │ │ ├── controller │ │ │ │ │ │ └── ods-quantity.ts │ │ │ │ │ ├── globals.ts │ │ │ │ │ ├── index.html │ │ │ │ │ ├── index.ts │ │ │ │ │ └── interfaces │ │ │ │ │ │ └── events.ts │ │ │ │ ├── stencil.config.ts │ │ │ │ ├── tests │ │ │ │ │ ├── behaviour │ │ │ │ │ │ └── ods-quantity.e2e.ts │ │ │ │ │ ├── controller │ │ │ │ │ │ └── ods-quantity.spec.ts │ │ │ │ │ ├── navigation │ │ │ │ │ │ └── ods-quantity.e2e.ts │ │ │ │ │ ├── rendering │ │ │ │ │ │ ├── ods-quantity.e2e.ts │ │ │ │ │ │ └── ods-quantity.spec.ts │ │ │ │ │ └── validity │ │ │ │ │ │ └── ods-quantity.e2e.ts │ │ │ │ └── tsconfig.json │ │ │ ├── radio │ │ │ │ ├── .gitignore │ │ │ │ ├── CHANGELOG.md │ │ │ │ ├── custom-elements-manifest.config.mjs │ │ │ │ ├── package.json │ │ │ │ ├── src │ │ │ │ │ ├── components │ │ │ │ │ │ └── ods-radio │ │ │ │ │ │ │ ├── ods-radio.scss │ │ │ │ │ │ │ └── ods-radio.tsx │ │ │ │ │ ├── globals.ts │ │ │ │ │ ├── index.html │ │ │ │ │ ├── index.ts │ │ │ │ │ └── interfaces │ │ │ │ │ │ └── events.ts │ │ │ │ ├── stencil.config.ts │ │ │ │ ├── tests │ │ │ │ │ ├── behaviour │ │ │ │ │ │ └── ods-radio.e2e.ts │ │ │ │ │ ├── navigation │ │ │ │ │ │ └── ods-radio.e2e.ts │ │ │ │ │ ├── rendering │ │ │ │ │ │ ├── ods-radio.e2e.ts │ │ │ │ │ │ └── ods-radio.spec.ts │ │ │ │ │ └── validity │ │ │ │ │ │ └── ods-radio.e2e.ts │ │ │ │ └── tsconfig.json │ │ │ ├── range │ │ │ │ ├── .gitignore │ │ │ │ ├── CHANGELOG.md │ │ │ │ ├── custom-elements-manifest.config.mjs │ │ │ │ ├── package.json │ │ │ │ ├── src │ │ │ │ │ ├── components │ │ │ │ │ │ └── ods-range │ │ │ │ │ │ │ ├── ods-range.scss │ │ │ │ │ │ │ └── ods-range.tsx │ │ │ │ │ ├── controller │ │ │ │ │ │ └── ods-range.ts │ │ │ │ │ ├── globals.ts │ │ │ │ │ ├── index.html │ │ │ │ │ ├── index.ts │ │ │ │ │ └── interfaces │ │ │ │ │ │ └── event.ts │ │ │ │ ├── stencil.config.ts │ │ │ │ ├── tests │ │ │ │ │ ├── behaviour │ │ │ │ │ │ └── ods-range.e2e.ts │ │ │ │ │ ├── controller │ │ │ │ │ │ └── ods-range.spec.ts │ │ │ │ │ ├── navigation │ │ │ │ │ │ └── ods-range.e2e.ts │ │ │ │ │ ├── rendering │ │ │ │ │ │ ├── ods-range.e2e.ts │ │ │ │ │ │ └── ods-range.spec.ts │ │ │ │ │ └── validity │ │ │ │ │ │ └── ods-range.e2e.ts │ │ │ │ └── tsconfig.json │ │ │ ├── select │ │ │ │ ├── .gitignore │ │ │ │ ├── CHANGELOG.md │ │ │ │ ├── custom-elements-manifest.config.mjs │ │ │ │ ├── package.json │ │ │ │ ├── src │ │ │ │ │ ├── components │ │ │ │ │ │ └── ods-select │ │ │ │ │ │ │ ├── ods-select.scss │ │ │ │ │ │ │ └── ods-select.tsx │ │ │ │ │ ├── constants │ │ │ │ │ │ └── select-strategy.ts │ │ │ │ │ ├── controller │ │ │ │ │ │ └── ods-select.ts │ │ │ │ │ ├── globals.ts │ │ │ │ │ ├── index.html │ │ │ │ │ ├── index.ts │ │ │ │ │ └── interfaces │ │ │ │ │ │ ├── events.ts │ │ │ │ │ │ └── options.ts │ │ │ │ ├── stencil.config.ts │ │ │ │ ├── tests │ │ │ │ │ ├── accessibility │ │ │ │ │ │ └── ods-select.e2e.ts │ │ │ │ │ ├── behaviour │ │ │ │ │ │ ├── ods-select.e2e.ts │ │ │ │ │ │ └── ods-select.spec.ts │ │ │ │ │ ├── controller │ │ │ │ │ │ └── ods-select.spec.ts │ │ │ │ │ ├── navigation │ │ │ │ │ │ └── ods-select.e2e.ts │ │ │ │ │ ├── rendering │ │ │ │ │ │ ├── ods-select.e2e.ts │ │ │ │ │ │ └── ods-select.spec.ts │ │ │ │ │ ├── setup.ts │ │ │ │ │ └── validity │ │ │ │ │ │ └── ods-select.e2e.ts │ │ │ │ └── tsconfig.json │ │ │ ├── skeleton │ │ │ │ ├── .gitignore │ │ │ │ ├── CHANGELOG.md │ │ │ │ ├── custom-elements-manifest.config.mjs │ │ │ │ ├── package.json │ │ │ │ ├── src │ │ │ │ │ ├── components │ │ │ │ │ │ └── ods-skeleton │ │ │ │ │ │ │ ├── ods-skeleton.scss │ │ │ │ │ │ │ └── ods-skeleton.tsx │ │ │ │ │ ├── globals.ts │ │ │ │ │ ├── index.html │ │ │ │ │ └── index.ts │ │ │ │ ├── stencil.config.ts │ │ │ │ ├── tests │ │ │ │ │ └── rendering │ │ │ │ │ │ └── ods-skeleton.e2e.ts │ │ │ │ └── tsconfig.json │ │ │ ├── spinner │ │ │ │ ├── .gitignore │ │ │ │ ├── CHANGELOG.md │ │ │ │ ├── custom-elements-manifest.config.mjs │ │ │ │ ├── package.json │ │ │ │ ├── src │ │ │ │ │ ├── components │ │ │ │ │ │ └── ods-spinner │ │ │ │ │ │ │ ├── ods-spinner.scss │ │ │ │ │ │ │ └── ods-spinner.tsx │ │ │ │ │ ├── constants │ │ │ │ │ │ ├── spinner-color.ts │ │ │ │ │ │ └── spinner-size.ts │ │ │ │ │ ├── globals.ts │ │ │ │ │ ├── index.html │ │ │ │ │ └── index.ts │ │ │ │ ├── stencil.config.ts │ │ │ │ ├── tests │ │ │ │ │ ├── accessibility │ │ │ │ │ │ └── ods-spinner.e2e.ts │ │ │ │ │ └── rendering │ │ │ │ │ │ ├── ods-spinner.e2e.ts │ │ │ │ │ │ └── ods-spinner.spec.ts │ │ │ │ └── tsconfig.json │ │ │ ├── switch │ │ │ │ ├── .gitignore │ │ │ │ ├── CHANGELOG.md │ │ │ │ ├── custom-elements-manifest.config.mjs │ │ │ │ ├── package.json │ │ │ │ ├── src │ │ │ │ │ ├── components │ │ │ │ │ │ ├── ods-switch-item │ │ │ │ │ │ │ ├── ods-switch-item.scss │ │ │ │ │ │ │ └── ods-switch-item.tsx │ │ │ │ │ │ └── ods-switch │ │ │ │ │ │ │ ├── ods-switch.scss │ │ │ │ │ │ │ └── ods-switch.tsx │ │ │ │ │ ├── constant │ │ │ │ │ │ └── switch-size.ts │ │ │ │ │ ├── controller │ │ │ │ │ │ └── ods-switch.ts │ │ │ │ │ ├── globals.ts │ │ │ │ │ ├── index.html │ │ │ │ │ ├── index.ts │ │ │ │ │ └── interfaces │ │ │ │ │ │ └── events.ts │ │ │ │ ├── stencil.config.ts │ │ │ │ ├── tests │ │ │ │ │ ├── behaviour │ │ │ │ │ │ └── ods-switch.e2e.ts │ │ │ │ │ ├── controller │ │ │ │ │ │ └── ods-switch.spec.ts │ │ │ │ │ ├── navigation │ │ │ │ │ │ └── ods-switch.e2e.ts │ │ │ │ │ ├── rendering │ │ │ │ │ │ ├── ods-switch-item.spec.ts │ │ │ │ │ │ ├── ods-switch.e2e.ts │ │ │ │ │ │ └── ods-switch.spec.ts │ │ │ │ │ └── validity │ │ │ │ │ │ └── ods-switch.e2e.ts │ │ │ │ └── tsconfig.json │ │ │ ├── table │ │ │ │ ├── .gitignore │ │ │ │ ├── CHANGELOG.md │ │ │ │ ├── custom-elements-manifest.config.mjs │ │ │ │ ├── package.json │ │ │ │ ├── src │ │ │ │ │ ├── components │ │ │ │ │ │ └── ods-table │ │ │ │ │ │ │ ├── ods-table.scss │ │ │ │ │ │ │ └── ods-table.tsx │ │ │ │ │ ├── constants │ │ │ │ │ │ ├── table-size.ts │ │ │ │ │ │ └── table-variant.ts │ │ │ │ │ ├── globals.ts │ │ │ │ │ ├── index.html │ │ │ │ │ └── index.ts │ │ │ │ ├── stencil.config.ts │ │ │ │ ├── tests │ │ │ │ │ └── rendering │ │ │ │ │ │ ├── ods-table.e2e.ts │ │ │ │ │ │ └── ods-table.spec.ts │ │ │ │ └── tsconfig.json │ │ │ ├── tabs │ │ │ │ ├── .gitignore │ │ │ │ ├── CHANGELOG.md │ │ │ │ ├── custom-elements-manifest.config.mjs │ │ │ │ ├── package.json │ │ │ │ ├── src │ │ │ │ │ ├── components │ │ │ │ │ │ ├── ods-tab │ │ │ │ │ │ │ ├── ods-tab.scss │ │ │ │ │ │ │ └── ods-tab.tsx │ │ │ │ │ │ └── ods-tabs │ │ │ │ │ │ │ ├── ods-tabs.scss │ │ │ │ │ │ │ └── ods-tabs.tsx │ │ │ │ │ ├── globals.ts │ │ │ │ │ ├── index.html │ │ │ │ │ ├── index.ts │ │ │ │ │ └── interfaces │ │ │ │ │ │ └── events.ts │ │ │ │ ├── stencil.config.ts │ │ │ │ ├── tests │ │ │ │ │ ├── accessibility │ │ │ │ │ │ ├── ods-tab.e2e.ts │ │ │ │ │ │ └── ods-tabs.e2e.ts │ │ │ │ │ ├── navigation │ │ │ │ │ │ ├── ods-tab.e2e.ts │ │ │ │ │ │ └── ods-tabs.e2e.ts │ │ │ │ │ └── rendering │ │ │ │ │ │ ├── ods-tab.e2e.ts │ │ │ │ │ │ ├── ods-tab.spec.ts │ │ │ │ │ │ └── ods-tabs.e2e.ts │ │ │ │ └── tsconfig.json │ │ │ ├── tag │ │ │ │ ├── .gitignore │ │ │ │ ├── CHANGELOG.md │ │ │ │ ├── custom-elements-manifest.config.mjs │ │ │ │ ├── package.json │ │ │ │ ├── src │ │ │ │ │ ├── components │ │ │ │ │ │ └── ods-tag │ │ │ │ │ │ │ ├── ods-tag.scss │ │ │ │ │ │ │ └── ods-tag.tsx │ │ │ │ │ ├── constants │ │ │ │ │ │ ├── tag-color.ts │ │ │ │ │ │ └── tag-size.ts │ │ │ │ │ ├── controller │ │ │ │ │ │ └── ods-tag.ts │ │ │ │ │ ├── globals.ts │ │ │ │ │ ├── index.html │ │ │ │ │ ├── index.ts │ │ │ │ │ └── interfaces │ │ │ │ │ │ └── events.ts │ │ │ │ ├── stencil.config.ts │ │ │ │ ├── tests │ │ │ │ │ ├── controller │ │ │ │ │ │ └── ods-tag.spec.ts │ │ │ │ │ ├── navigation │ │ │ │ │ │ └── ods-tag.e2e.ts │ │ │ │ │ └── rendering │ │ │ │ │ │ ├── ods-tag.e2e.ts │ │ │ │ │ │ └── ods-tag.spec.ts │ │ │ │ └── tsconfig.json │ │ │ ├── text │ │ │ │ ├── .gitignore │ │ │ │ ├── CHANGELOG.md │ │ │ │ ├── custom-elements-manifest.config.mjs │ │ │ │ ├── package.json │ │ │ │ ├── src │ │ │ │ │ ├── components │ │ │ │ │ │ └── ods-text │ │ │ │ │ │ │ ├── ods-text.scss │ │ │ │ │ │ │ └── ods-text.tsx │ │ │ │ │ ├── constants │ │ │ │ │ │ └── text-preset.ts │ │ │ │ │ ├── globals.ts │ │ │ │ │ ├── index.html │ │ │ │ │ └── index.ts │ │ │ │ ├── stencil.config.ts │ │ │ │ ├── tests │ │ │ │ │ └── rendering │ │ │ │ │ │ ├── ods-text.e2e.ts │ │ │ │ │ │ └── ods-text.spec.ts │ │ │ │ └── tsconfig.json │ │ │ ├── textarea │ │ │ │ ├── .gitignore │ │ │ │ ├── CHANGELOG.md │ │ │ │ ├── custom-elements-manifest.config.mjs │ │ │ │ ├── package.json │ │ │ │ ├── src │ │ │ │ │ ├── components │ │ │ │ │ │ └── ods-textarea │ │ │ │ │ │ │ ├── ods-textarea.scss │ │ │ │ │ │ │ └── ods-textarea.tsx │ │ │ │ │ ├── controller │ │ │ │ │ │ └── ods-textarea.ts │ │ │ │ │ ├── globals.ts │ │ │ │ │ ├── index.html │ │ │ │ │ ├── index.ts │ │ │ │ │ └── interfaces │ │ │ │ │ │ └── events.ts │ │ │ │ ├── stencil.config.ts │ │ │ │ ├── tests │ │ │ │ │ ├── accessibility │ │ │ │ │ │ └── ods-textarea.e2e.ts │ │ │ │ │ ├── behaviour │ │ │ │ │ │ ├── ods-textarea.e2e.ts │ │ │ │ │ │ └── ods-textarea.spec.ts │ │ │ │ │ ├── controller │ │ │ │ │ │ └── ods-textarea.spec.ts │ │ │ │ │ ├── navigation │ │ │ │ │ │ └── ods-textarea.e2e.ts │ │ │ │ │ ├── rendering │ │ │ │ │ │ ├── ods-textarea.e2e.ts │ │ │ │ │ │ └── ods-textarea.spec.ts │ │ │ │ │ └── validity │ │ │ │ │ │ └── ods-textarea.e2e.ts │ │ │ │ └── tsconfig.json │ │ │ ├── timepicker │ │ │ │ ├── .gitignore │ │ │ │ ├── CHANGELOG.md │ │ │ │ ├── custom-elements-manifest.config.mjs │ │ │ │ ├── package.json │ │ │ │ ├── src │ │ │ │ │ ├── components │ │ │ │ │ │ └── ods-timepicker │ │ │ │ │ │ │ ├── ods-timepicker.scss │ │ │ │ │ │ │ └── ods-timepicker.tsx │ │ │ │ │ ├── constant │ │ │ │ │ │ ├── timezone-preset.ts │ │ │ │ │ │ └── timezones.ts │ │ │ │ │ ├── controller │ │ │ │ │ │ └── ods-timepicker.ts │ │ │ │ │ ├── globals.ts │ │ │ │ │ ├── index.html │ │ │ │ │ ├── index.ts │ │ │ │ │ └── interfaces │ │ │ │ │ │ └── event.ts │ │ │ │ ├── stencil.config.ts │ │ │ │ ├── tests │ │ │ │ │ ├── behavior │ │ │ │ │ │ └── ods-timepicker.e2e.ts │ │ │ │ │ ├── controller │ │ │ │ │ │ └── ods-timepicker.spec.ts │ │ │ │ │ ├── navigation │ │ │ │ │ │ └── ods-timepicker.e2e.ts │ │ │ │ │ ├── rendering │ │ │ │ │ │ ├── ods-timepicker.e2e.ts │ │ │ │ │ │ └── ods-timepicker.spec.ts │ │ │ │ │ └── validity │ │ │ │ │ │ └── ods-timepicker.e2e.ts │ │ │ │ └── tsconfig.json │ │ │ ├── toggle │ │ │ │ ├── .gitignore │ │ │ │ ├── CHANGELOG.md │ │ │ │ ├── custom-elements-manifest.config.mjs │ │ │ │ ├── package.json │ │ │ │ ├── src │ │ │ │ │ ├── components │ │ │ │ │ │ └── ods-toggle │ │ │ │ │ │ │ ├── ods-toggle.scss │ │ │ │ │ │ │ └── ods-toggle.tsx │ │ │ │ │ ├── controller │ │ │ │ │ │ └── ods-toggle.ts │ │ │ │ │ ├── globals.ts │ │ │ │ │ ├── index.html │ │ │ │ │ ├── index.ts │ │ │ │ │ └── interfaces │ │ │ │ │ │ └── event.ts │ │ │ │ ├── stencil.config.ts │ │ │ │ ├── tests │ │ │ │ │ ├── accessibility │ │ │ │ │ │ └── ods-toggle.e2e.ts │ │ │ │ │ ├── behaviour │ │ │ │ │ │ └── ods-toggle.e2e.ts │ │ │ │ │ ├── controller │ │ │ │ │ │ └── ods-toggle.spec.ts │ │ │ │ │ ├── navigation │ │ │ │ │ │ └── ods-toggle.e2e.ts │ │ │ │ │ ├── rendering │ │ │ │ │ │ ├── ods-toggle.e2e.ts │ │ │ │ │ │ └── ods-toggle.spec.ts │ │ │ │ │ └── validity │ │ │ │ │ │ └── ods-toggle.e2e.ts │ │ │ │ └── tsconfig.json │ │ │ └── tooltip │ │ │ │ ├── .gitignore │ │ │ │ ├── CHANGELOG.md │ │ │ │ ├── custom-elements-manifest.config.mjs │ │ │ │ ├── package.json │ │ │ │ ├── src │ │ │ │ ├── components │ │ │ │ │ └── ods-tooltip │ │ │ │ │ │ ├── ods-tooltip.scss │ │ │ │ │ │ └── ods-tooltip.tsx │ │ │ │ ├── constants │ │ │ │ │ ├── tooltip-position.ts │ │ │ │ │ └── tooltip-strategy.ts │ │ │ │ ├── globals.ts │ │ │ │ ├── index.html │ │ │ │ └── index.ts │ │ │ │ ├── stencil.config.ts │ │ │ │ ├── tests │ │ │ │ ├── behaviour │ │ │ │ │ └── ods-tooltip.e2e.ts │ │ │ │ ├── navigation │ │ │ │ │ └── ods-tooltip.e2e.ts │ │ │ │ └── rendering │ │ │ │ │ ├── ods-tooltip.e2e.ts │ │ │ │ │ └── ods-tooltip.spec.ts │ │ │ │ └── tsconfig.json │ │ ├── config │ │ │ ├── jest.ts │ │ │ └── stencil.ts │ │ ├── index.ts │ │ ├── style │ │ │ ├── _badge.scss │ │ │ ├── _breakpoint.scss │ │ │ ├── _button.scss │ │ │ ├── _checkbox.scss │ │ │ ├── _drawer.scss │ │ │ ├── _flag.scss │ │ │ ├── _focus.scss │ │ │ ├── _font.scss │ │ │ ├── _icon.scss │ │ │ ├── _input.scss │ │ │ ├── _link.scss │ │ │ ├── _message.scss │ │ │ ├── _modal.scss │ │ │ ├── _overlay.scss │ │ │ ├── _progress-bar.scss │ │ │ ├── _radio.scss │ │ │ ├── _range.scss │ │ │ ├── _scroll.scss │ │ │ ├── _skeleton.scss │ │ │ ├── _state.scss │ │ │ ├── _table.scss │ │ │ ├── _tag.scss │ │ │ ├── _text.scss │ │ │ └── index.scss │ │ ├── types │ │ │ ├── form.ts │ │ │ └── index.ts │ │ └── utils │ │ │ ├── debounce.ts │ │ │ ├── dom.ts │ │ │ ├── file.ts │ │ │ ├── locale.ts │ │ │ ├── overlay.ts │ │ │ ├── regExp.ts │ │ │ ├── select.ts │ │ │ └── type.ts │ ├── stencil.config.ts │ ├── style │ │ ├── .gitignore │ │ ├── .npmignore │ │ ├── CHANGELOG.md │ │ ├── README.md │ │ └── package.json │ ├── tests │ │ └── utils │ │ │ ├── debounce.spec.ts │ │ │ ├── dom.spec.ts │ │ │ ├── file.spec.ts │ │ │ ├── overlay.spec.ts │ │ │ ├── regExp.spec.ts │ │ │ ├── select.spec.ts │ │ │ └── type.spec.ts │ ├── tsconfig.json │ ├── tsconfig.prod.json │ ├── tsconfig.react.json │ ├── tsconfig.vue.json │ └── vue │ │ ├── .gitignore │ │ ├── .npmignore │ │ ├── CHANGELOG.md │ │ ├── package.json │ │ ├── tests │ │ ├── _app │ │ │ ├── CHANGELOG.md │ │ │ ├── index.html │ │ │ ├── package.json │ │ │ ├── src │ │ │ │ ├── App.vue │ │ │ │ ├── components.ts │ │ │ │ ├── components │ │ │ │ │ ├── ods-accordion.vue │ │ │ │ │ ├── ods-badge.vue │ │ │ │ │ ├── ods-breadcrumb.vue │ │ │ │ │ ├── ods-button.vue │ │ │ │ │ ├── ods-card.vue │ │ │ │ │ ├── ods-checkbox.vue │ │ │ │ │ ├── ods-clipboard.vue │ │ │ │ │ ├── ods-code.vue │ │ │ │ │ ├── ods-combobox.vue │ │ │ │ │ ├── ods-datepicker.vue │ │ │ │ │ ├── ods-divider.vue │ │ │ │ │ ├── ods-drawer.vue │ │ │ │ │ ├── ods-file-upload.vue │ │ │ │ │ ├── ods-form-field.vue │ │ │ │ │ ├── ods-icon.vue │ │ │ │ │ ├── ods-input.vue │ │ │ │ │ ├── ods-link.vue │ │ │ │ │ ├── ods-medium.vue │ │ │ │ │ ├── ods-message.vue │ │ │ │ │ ├── ods-modal.vue │ │ │ │ │ ├── ods-pagination.vue │ │ │ │ │ ├── ods-password.vue │ │ │ │ │ ├── ods-phone-number.vue │ │ │ │ │ ├── ods-popover.vue │ │ │ │ │ ├── ods-progress-bar.vue │ │ │ │ │ ├── ods-quantity.vue │ │ │ │ │ ├── ods-radio.vue │ │ │ │ │ ├── ods-range.vue │ │ │ │ │ ├── ods-select.vue │ │ │ │ │ ├── ods-skeleton.vue │ │ │ │ │ ├── ods-spinner.vue │ │ │ │ │ ├── ods-switch.vue │ │ │ │ │ ├── ods-table.vue │ │ │ │ │ ├── ods-tabs.vue │ │ │ │ │ ├── ods-tag.vue │ │ │ │ │ ├── ods-text.vue │ │ │ │ │ ├── ods-textarea.vue │ │ │ │ │ ├── ods-timepicker.vue │ │ │ │ │ ├── ods-toggle.vue │ │ │ │ │ └── ods-tooltip.vue │ │ │ │ ├── main.ts │ │ │ │ └── router │ │ │ │ │ └── index.ts │ │ │ ├── tsconfig.json │ │ │ └── vite.config.ts │ │ ├── e2e │ │ │ ├── ods-accordion.e2e.ts │ │ │ ├── ods-badge.e2e.ts │ │ │ ├── ods-breadcrumb.e2e.ts │ │ │ ├── ods-button.e2e.ts │ │ │ ├── ods-card.e2e.ts │ │ │ ├── ods-checkbox.e2e.ts │ │ │ ├── ods-clipboard.e2e.ts │ │ │ ├── ods-code.e2e.ts │ │ │ ├── ods-combobox.e2e.ts │ │ │ ├── ods-datepicker.e2e.ts │ │ │ ├── ods-divider.e2e.ts │ │ │ ├── ods-drawer.e2e.ts │ │ │ ├── ods-file-upload.e2e.ts │ │ │ ├── ods-form-field.e2e.ts │ │ │ ├── ods-icon.e2e.ts │ │ │ ├── ods-input.e2e.ts │ │ │ ├── ods-link.e2e.ts │ │ │ ├── ods-medium.e2e.ts │ │ │ ├── ods-message.e2e.ts │ │ │ ├── ods-modal.e2e.ts │ │ │ ├── ods-pagination.e2e.ts │ │ │ ├── ods-password.e2e.ts │ │ │ ├── ods-phone-number.e2e.ts │ │ │ ├── ods-popover.e2e.ts │ │ │ ├── ods-progress-bar.e2e.ts │ │ │ ├── ods-quantity.e2e.ts │ │ │ ├── ods-radio.e2e.ts │ │ │ ├── ods-range.e2e.ts │ │ │ ├── ods-select.e2e.ts │ │ │ ├── ods-skeleton.e2e.ts │ │ │ ├── ods-spinner.e2e.ts │ │ │ ├── ods-switch.e2e.ts │ │ │ ├── ods-table.e2e.ts │ │ │ ├── ods-tabs.e2e.ts │ │ │ ├── ods-tag.e2e.ts │ │ │ ├── ods-text.e2e.ts │ │ │ ├── ods-textarea.e2e.ts │ │ │ ├── ods-timepicker.e2e.ts │ │ │ ├── ods-toggle.e2e.ts │ │ │ └── ods-tooltip.e2e.ts │ │ ├── jest.config.js │ │ └── setup.ts │ │ ├── tsconfig.cjs.json │ │ └── tsconfig.json ├── storybook │ ├── .gitignore │ ├── .npmignore │ ├── .storybook │ │ ├── addons │ │ │ ├── githubLink.tsx │ │ │ └── odsVersions.tsx │ │ ├── main.ts │ │ ├── manager.tsx │ │ ├── ods.theme.ts │ │ └── preview.tsx │ ├── CHANGELOG.md │ ├── assets │ │ ├── components │ │ │ ├── accordion │ │ │ │ └── anatomy.png │ │ │ ├── badge │ │ │ │ └── anatomy.png │ │ │ ├── breadcrumb │ │ │ │ └── anatomy.png │ │ │ ├── button │ │ │ │ └── anatomy.png │ │ │ ├── card │ │ │ │ └── anatomy.png │ │ │ ├── checkbox │ │ │ │ └── anatomy.png │ │ │ ├── clipboard │ │ │ │ └── anatomy.png │ │ │ ├── code │ │ │ │ └── anatomy.png │ │ │ ├── combobox │ │ │ │ └── anatomy.png │ │ │ ├── datepicker │ │ │ │ └── anatomy.png │ │ │ ├── divider │ │ │ │ └── anatomy.png │ │ │ ├── drawer │ │ │ │ └── anatomy.png │ │ │ ├── file-upload │ │ │ │ └── anatomy.png │ │ │ ├── form-field │ │ │ │ └── anatomy.png │ │ │ ├── icon │ │ │ │ └── anatomy.png │ │ │ ├── input │ │ │ │ └── anatomy.png │ │ │ ├── link │ │ │ │ └── anatomy.png │ │ │ ├── medium │ │ │ │ └── anatomy.png │ │ │ ├── message │ │ │ │ └── anatomy.png │ │ │ ├── modal │ │ │ │ └── anatomy.png │ │ │ ├── pagination │ │ │ │ └── anatomy.png │ │ │ ├── password │ │ │ │ └── anatomy.png │ │ │ ├── phone-number │ │ │ │ └── anatomy.png │ │ │ ├── popover │ │ │ │ └── anatomy.png │ │ │ ├── progress-bar │ │ │ │ └── anatomy.png │ │ │ ├── quantity │ │ │ │ └── anatomy.png │ │ │ ├── radio │ │ │ │ └── anatomy.png │ │ │ ├── range │ │ │ │ └── anatomy.png │ │ │ ├── select │ │ │ │ └── anatomy.png │ │ │ ├── skeleton │ │ │ │ └── anatomy.png │ │ │ ├── spinner │ │ │ │ └── anatomy.png │ │ │ ├── switch │ │ │ │ └── anatomy.png │ │ │ ├── table │ │ │ │ └── anatomy.png │ │ │ ├── tabs │ │ │ │ └── anatomy.png │ │ │ ├── tag │ │ │ │ └── anatomy.png │ │ │ ├── text │ │ │ │ └── anatomy.png │ │ │ ├── textarea │ │ │ │ └── anatomy.png │ │ │ ├── timepicker │ │ │ │ └── anatomy.png │ │ │ ├── toggle │ │ │ │ └── anatomy.png │ │ │ └── tooltip │ │ │ │ └── anatomy.png │ │ ├── css │ │ │ ├── preview.css │ │ │ └── storybook.css │ │ ├── favicon.ico │ │ ├── favicon.png │ │ ├── github_logo.png │ │ ├── ods_bg.png │ │ └── ods_logo.svg │ ├── package.json │ ├── scripts │ │ └── generate-version-list.js │ ├── src │ │ ├── components │ │ │ ├── banner │ │ │ │ ├── Banner.tsx │ │ │ │ └── banner.module.css │ │ │ ├── bestPractices │ │ │ │ ├── BestPractices.tsx │ │ │ │ └── bestPractices.module.css │ │ │ ├── canvasWithoutContext │ │ │ │ ├── CanvasWithoutContext.tsx │ │ │ │ └── canvasWithoutContext.module.css │ │ │ ├── datepickerFormatsTable │ │ │ │ └── DatepickerFormatsTable.tsx │ │ │ ├── designTokens │ │ │ │ └── DesignTokens.tsx │ │ │ ├── gallery │ │ │ │ ├── Gallery.tsx │ │ │ │ └── gallery.module.css │ │ │ ├── heading │ │ │ │ ├── Heading.tsx │ │ │ │ └── heading.module.css │ │ │ ├── homepage │ │ │ │ ├── Homepage.tsx │ │ │ │ └── homepage.module.css │ │ │ ├── identityCard │ │ │ │ ├── IdentityCard.tsx │ │ │ │ └── identityCard.module.css │ │ │ ├── storybookLink │ │ │ │ └── StorybookLink.tsx │ │ │ ├── technicalSpecification │ │ │ │ ├── ClassModule.tsx │ │ │ │ ├── TechnicalSpecification.tsx │ │ │ │ ├── classModule.module.css │ │ │ │ └── technicalSpecification.module.css │ │ │ ├── tokenMigrationTable │ │ │ │ └── TokenMigrationTable.tsx │ │ │ ├── tokenPreview │ │ │ │ ├── TokenPreview.tsx │ │ │ │ └── tokenPreview.module.css │ │ │ ├── tokensTable │ │ │ │ ├── TokensTable.tsx │ │ │ │ └── tokensTable.module.css │ │ │ └── validityState │ │ │ │ └── validityState.ts │ │ ├── constants │ │ │ ├── atomicDesign.ts │ │ │ ├── controls.ts │ │ │ ├── designTokens.ts │ │ │ └── meta.ts │ │ ├── helpers │ │ │ └── controls.ts │ │ └── hooks │ │ │ └── withResetRoot.ts │ ├── stories │ │ ├── components │ │ │ ├── accordion │ │ │ │ ├── accordion.stories.ts │ │ │ │ ├── documentation.mdx │ │ │ │ ├── migration.from.17.x.mdx │ │ │ │ └── technical-information.mdx │ │ │ ├── badge │ │ │ │ ├── badge.stories.ts │ │ │ │ ├── documentation.mdx │ │ │ │ ├── migration.from.17.x.mdx │ │ │ │ └── technical-information.mdx │ │ │ ├── breadcrumb │ │ │ │ ├── breadcrumb.stories.ts │ │ │ │ ├── documentation.mdx │ │ │ │ ├── migration.from.17.x.mdx │ │ │ │ └── technical-information.mdx │ │ │ ├── button │ │ │ │ ├── button.stories.ts │ │ │ │ ├── documentation.mdx │ │ │ │ ├── migration.from.17.x.mdx │ │ │ │ └── technical-information.mdx │ │ │ ├── card │ │ │ │ ├── card.stories.ts │ │ │ │ ├── documentation.mdx │ │ │ │ ├── migration.from.17.x.mdx │ │ │ │ └── technical-information.mdx │ │ │ ├── cart │ │ │ │ └── migration.from.17.x.mdx │ │ │ ├── checkbox │ │ │ │ ├── checkbox.stories.ts │ │ │ │ ├── documentation.mdx │ │ │ │ ├── migration.from.17.x.mdx │ │ │ │ └── technical-information.mdx │ │ │ ├── chip │ │ │ │ └── migration.from.17.x.mdx │ │ │ ├── clipboard │ │ │ │ ├── clipboard.stories.ts │ │ │ │ ├── documentation.mdx │ │ │ │ ├── migration.from.17.x.mdx │ │ │ │ └── technical-information.mdx │ │ │ ├── code │ │ │ │ ├── code.stories.ts │ │ │ │ ├── documentation.mdx │ │ │ │ ├── migration.from.17.x.mdx │ │ │ │ └── technical-information.mdx │ │ │ ├── combobox │ │ │ │ ├── combobox.stories.ts │ │ │ │ ├── documentation.mdx │ │ │ │ └── technical-information.mdx │ │ │ ├── content-addon │ │ │ │ └── migration.from.17.x.mdx │ │ │ ├── datepicker │ │ │ │ ├── datepicker.stories.ts │ │ │ │ ├── documentation.mdx │ │ │ │ ├── migration.from.17.x.mdx │ │ │ │ └── technical-information.mdx │ │ │ ├── divider │ │ │ │ ├── divider.stories.ts │ │ │ │ ├── documentation.mdx │ │ │ │ ├── migration.from.17.x.mdx │ │ │ │ └── technical-information.mdx │ │ │ ├── drawer │ │ │ │ ├── documentation.mdx │ │ │ │ ├── drawer.stories.ts │ │ │ │ └── technical-information.mdx │ │ │ ├── file-upload │ │ │ │ ├── documentation.mdx │ │ │ │ ├── file-upload.stories.ts │ │ │ │ ├── migration.from.17.x.mdx │ │ │ │ └── technical-information.mdx │ │ │ ├── flag │ │ │ │ └── migration.from.17.x.mdx │ │ │ ├── form-field │ │ │ │ ├── documentation.mdx │ │ │ │ ├── form-field.stories.ts │ │ │ │ ├── migration.from.17.x.mdx │ │ │ │ └── technical-information.mdx │ │ │ ├── gallery.mdx │ │ │ ├── icon │ │ │ │ ├── documentation.mdx │ │ │ │ ├── icon.stories.ts │ │ │ │ ├── migration.from.17.x.mdx │ │ │ │ └── technical-information.mdx │ │ │ ├── input │ │ │ │ ├── documentation.mdx │ │ │ │ ├── input.stories.ts │ │ │ │ ├── migration.from.17.x.mdx │ │ │ │ └── technical-information.mdx │ │ │ ├── link │ │ │ │ ├── documentation.mdx │ │ │ │ ├── link.stories.ts │ │ │ │ ├── migration.from.17.x.mdx │ │ │ │ └── technical-information.mdx │ │ │ ├── medium │ │ │ │ ├── documentation.mdx │ │ │ │ ├── medium.stories.ts │ │ │ │ ├── migration.from.17.x.mdx │ │ │ │ └── technical-information.mdx │ │ │ ├── menu │ │ │ │ └── migration.from.17.x.mdx │ │ │ ├── message │ │ │ │ ├── documentation.mdx │ │ │ │ ├── message.stories.ts │ │ │ │ ├── migration.from.17.x.mdx │ │ │ │ └── technical-information.mdx │ │ │ ├── modal │ │ │ │ ├── documentation.mdx │ │ │ │ ├── migration.from.17.x.mdx │ │ │ │ ├── modal.stories.ts │ │ │ │ └── technical-information.mdx │ │ │ ├── pagination │ │ │ │ ├── documentation.mdx │ │ │ │ ├── migration.from.17.x.mdx │ │ │ │ ├── pagination.stories.ts │ │ │ │ └── technical-information.mdx │ │ │ ├── password │ │ │ │ ├── documentation.mdx │ │ │ │ ├── migration.from.17.x.mdx │ │ │ │ ├── password.stories.ts │ │ │ │ └── technical-information.mdx │ │ │ ├── phone-number │ │ │ │ ├── documentation.mdx │ │ │ │ ├── migration.from.17.x.mdx │ │ │ │ ├── phone-number.stories.ts │ │ │ │ └── technical-information.mdx │ │ │ ├── popover │ │ │ │ ├── documentation.mdx │ │ │ │ ├── migration.from.17.x.mdx │ │ │ │ ├── popover.stories.ts │ │ │ │ └── technical-information.mdx │ │ │ ├── progress-bar │ │ │ │ ├── documentation.mdx │ │ │ │ ├── migration.from.17.x.mdx │ │ │ │ ├── progress-bar.stories.ts │ │ │ │ └── technical-information.mdx │ │ │ ├── quantity │ │ │ │ ├── documentation.mdx │ │ │ │ ├── migration.from.17.x.mdx │ │ │ │ ├── quantity.stories.ts │ │ │ │ └── technical-information.mdx │ │ │ ├── radio │ │ │ │ ├── documentation.mdx │ │ │ │ ├── migration.from.17.x.mdx │ │ │ │ ├── radio.stories.ts │ │ │ │ └── technical-information.mdx │ │ │ ├── range │ │ │ │ ├── documentation.mdx │ │ │ │ ├── migration.from.17.x.mdx │ │ │ │ ├── range.stories.ts │ │ │ │ └── technical-information.mdx │ │ │ ├── search-bar │ │ │ │ └── migration.from.17.x.mdx │ │ │ ├── select │ │ │ │ ├── documentation.mdx │ │ │ │ ├── migration.from.17.x.mdx │ │ │ │ ├── select.stories.ts │ │ │ │ └── technical-information.mdx │ │ │ ├── skeleton │ │ │ │ ├── documentation.mdx │ │ │ │ ├── migration.from.17.x.mdx │ │ │ │ ├── skeleton.stories.ts │ │ │ │ └── technical-information.mdx │ │ │ ├── spinner │ │ │ │ ├── documentation.mdx │ │ │ │ ├── migration.from.17.x.mdx │ │ │ │ ├── spinner.stories.ts │ │ │ │ └── technical-information.mdx │ │ │ ├── switch │ │ │ │ ├── documentation.mdx │ │ │ │ ├── migration.from.17.x.mdx │ │ │ │ ├── switch.stories.ts │ │ │ │ └── technical-information.mdx │ │ │ ├── table │ │ │ │ ├── documentation.mdx │ │ │ │ ├── migration.from.17.x.mdx │ │ │ │ ├── table.stories.ts │ │ │ │ └── technical-information.mdx │ │ │ ├── tabs │ │ │ │ ├── documentation.mdx │ │ │ │ ├── migration.from.17.x.mdx │ │ │ │ ├── tabs.stories.ts │ │ │ │ └── technical-information.mdx │ │ │ ├── tag │ │ │ │ ├── documentation.mdx │ │ │ │ ├── migration.from.17.x.mdx │ │ │ │ ├── tag.stories.ts │ │ │ │ └── technical-information.mdx │ │ │ ├── text │ │ │ │ ├── documentation.mdx │ │ │ │ ├── migration.from.17.x.mdx │ │ │ │ ├── technical-information.mdx │ │ │ │ └── text.stories.ts │ │ │ ├── textarea │ │ │ │ ├── documentation.mdx │ │ │ │ ├── migration.from.17.x.mdx │ │ │ │ ├── technical-information.mdx │ │ │ │ └── textarea.stories.ts │ │ │ ├── tile │ │ │ │ └── migration.from.17.x.mdx │ │ │ ├── timepicker │ │ │ │ ├── documentation.mdx │ │ │ │ ├── migration.from.17.x.mdx │ │ │ │ ├── technical-information.mdx │ │ │ │ └── timepicker.stories.ts │ │ │ ├── toggle │ │ │ │ ├── documentation.mdx │ │ │ │ ├── migration.from.17.x.mdx │ │ │ │ ├── technical-information.mdx │ │ │ │ └── toggle.stories.ts │ │ │ └── tooltip │ │ │ │ ├── documentation.mdx │ │ │ │ ├── migration.from.17.x.mdx │ │ │ │ ├── technical-information.mdx │ │ │ │ └── tooltip.stories.ts │ │ └── ovhcloud-design-system │ │ │ ├── design-and-style │ │ │ ├── apply-ods-style.mdx │ │ │ ├── design-tokens.mdx │ │ │ ├── migration.from.17.x.mdx │ │ │ └── style-customization.mdx │ │ │ ├── faq.mdx │ │ │ ├── get-started.mdx │ │ │ ├── guides │ │ │ ├── events.mdx │ │ │ ├── form.mdx │ │ │ └── methods.mdx │ │ │ ├── home.mdx │ │ │ └── whatsnew │ │ │ ├── changelog.mdx │ │ │ ├── migration │ │ │ ├── migration.12.x.to.13.x.mdx │ │ │ ├── migration.13.x.to.14.x.mdx │ │ │ ├── migration.14.x.to.15.x.mdx │ │ │ ├── migration.15.x.to.16.x.mdx │ │ │ ├── migration.16.x.to.17.x.mdx │ │ │ └── migration.17.x.to.18.x.mdx │ │ │ └── whatsnew.mdx │ └── tsconfig.json └── themes │ ├── .gitignore │ ├── .npmignore │ ├── CHANGELOG.md │ ├── README.md │ ├── assets │ └── fonts │ │ ├── ods-icon │ │ ├── icomoon │ │ │ ├── icomoon.eot │ │ │ ├── icomoon.svg │ │ │ ├── icomoon.ttf │ │ │ ├── icomoon.woff │ │ │ └── selection.json │ │ └── index.scss │ │ ├── source-code-pro │ │ ├── base64 │ │ │ ├── source-code-pro-base64-200-italic.scss │ │ │ ├── source-code-pro-base64-200-normal.scss │ │ │ ├── source-code-pro-base64-300-italic.scss │ │ │ ├── source-code-pro-base64-300-normal.scss │ │ │ ├── source-code-pro-base64-400-italic.scss │ │ │ ├── source-code-pro-base64-400-normal.scss │ │ │ ├── source-code-pro-base64-500-italic.scss │ │ │ ├── source-code-pro-base64-500-normal.scss │ │ │ ├── source-code-pro-base64-600-italic.scss │ │ │ ├── source-code-pro-base64-600-normal.scss │ │ │ ├── source-code-pro-base64-700-italic.scss │ │ │ ├── source-code-pro-base64-700-normal.scss │ │ │ ├── source-code-pro-base64-800-italic.scss │ │ │ ├── source-code-pro-base64-800-normal.scss │ │ │ ├── source-code-pro-base64-900-italic.scss │ │ │ └── source-code-pro-base64-900-normal.scss │ │ └── index.scss │ │ └── source-sans-pro │ │ ├── base64 │ │ ├── source-sans-pro-base64-200-italic.scss │ │ ├── source-sans-pro-base64-200-normal.scss │ │ ├── source-sans-pro-base64-300-italic.scss │ │ ├── source-sans-pro-base64-300-normal.scss │ │ ├── source-sans-pro-base64-400-italic.scss │ │ ├── source-sans-pro-base64-400-normal.scss │ │ ├── source-sans-pro-base64-600-italic.scss │ │ ├── source-sans-pro-base64-600-normal.scss │ │ ├── source-sans-pro-base64-700-italic.scss │ │ ├── source-sans-pro-base64-700-normal.scss │ │ ├── source-sans-pro-base64-900-italic.scss │ │ └── source-sans-pro-base64-900-normal.scss │ │ └── index.scss │ ├── package.json │ ├── src │ ├── default │ │ ├── _variables.scss │ │ └── index.scss │ └── index.ts │ └── tsconfig.json ├── scripts ├── component-generator │ ├── plopfile.js │ └── templates │ │ ├── component │ │ ├── .gitignore │ │ ├── custom-elements-manifest.config.mjs │ │ ├── package.json.hbs │ │ ├── src │ │ │ ├── components │ │ │ │ └── ods-{{>component-name}} │ │ │ │ │ ├── ods-{{>component-name}}.scss.hbs │ │ │ │ │ └── ods-{{>component-name}}.tsx.hbs │ │ │ ├── globals.ts │ │ │ ├── index.html.hbs │ │ │ └── index.ts.hbs │ │ ├── stencil.config.ts.hbs │ │ ├── tests │ │ │ ├── accessibility │ │ │ │ └── ods-{{>component-name}}.e2e.ts.hbs │ │ │ └── rendering │ │ │ │ ├── ods-{{>component-name}}.e2e.ts.hbs │ │ │ │ └── ods-{{>component-name}}.spec.ts.hbs │ │ └── tsconfig.json │ │ ├── react │ │ └── tests │ │ │ ├── _app │ │ │ └── src │ │ │ │ └── components │ │ │ │ └── ods-{{>component-name}}.tsx.hbs │ │ │ └── e2e │ │ │ └── ods-{{> component-name }}.e2e.ts.hbs │ │ ├── storybook │ │ ├── documentation.mdx.hbs │ │ ├── technical-information.mdx │ │ └── {{> component-name }}.stories.ts.hbs │ │ └── vue │ │ └── tests │ │ ├── _app │ │ └── src │ │ │ └── components │ │ │ └── ods-{{>component-name}}.vue.hbs │ │ └── e2e │ │ └── ods-{{> component-name }}.e2e.ts.hbs ├── generate-gh-pages.mjs └── ods-release-prepare.mjs └── yarn.lock /.commitlintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": ["@commitlint/config-conventional"], 3 | "rules": { 4 | "footer-max-line-length": [2, "always", 300] 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /.eslintrc-a11y: -------------------------------------------------------------------------------- 1 | { 2 | "extends": [ 3 | "plugin:jsx-a11y/strict" 4 | ], 5 | "parser": "@typescript-eslint/parser", 6 | "parserOptions": { 7 | "ecmaVersion": 2020, 8 | "project": ["tsconfig.json"], 9 | "sourceType": "module" 10 | }, 11 | "plugins": [ 12 | "eslint-plugin-jsx-a11y" 13 | ], 14 | "root": true, 15 | "settings": { 16 | "import/resolver": { 17 | "typescript": { 18 | "project": "./tsconfig.json" 19 | } 20 | } 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /.github/CODEOWNERS: -------------------------------------------------------------------------------- 1 | # Default owner 2 | * @ovh/ods-core-team 3 | -------------------------------------------------------------------------------- /.huskyrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "hooks": { 3 | "commit-msg": "commitlint -E HUSKY_GIT_PARAMS" 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /.prettierrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "arrowParens": "avoid", 3 | "bracketSpacing": true, 4 | "jsxBracketSameLine": false, 5 | "jsxSingleQuote": false, 6 | "quoteProps": "consistent", 7 | "printWidth": 180, 8 | "semi": true, 9 | "singleQuote": true, 10 | "tabWidth": 2, 11 | "trailingComma": "all", 12 | "useTabs": false 13 | } 14 | -------------------------------------------------------------------------------- /.yarnrc.yml: -------------------------------------------------------------------------------- 1 | nodeLinker: node-modules 2 | 3 | npmScopes: 4 | ods: 5 | npmRegistryServer: "" 6 | 7 | plugins: 8 | - path: .yarn/plugins/@yarnpkg/plugin-workspace-tools.cjs 9 | spec: "@yarnpkg/plugin-workspace-tools" 10 | 11 | yarnPath: .yarn/releases/yarn-3.2.4.cjs 12 | -------------------------------------------------------------------------------- /AUTHORS: -------------------------------------------------------------------------------- 1 | # This is the official list of ODS authors for copyright purposes. 2 | # This file is distinct from the CONTRIBUTORS files 3 | # and it lists the copyright holders only. 4 | 5 | # Names should be added to this file as one of 6 | # Organization's name 7 | # Individual's name 8 | # Individual's name 9 | # See CONTRIBUTORS for the meaning of multiple email addresses. 10 | 11 | # Please keep the list sorted. 12 | 13 | OVH SAS 14 | -------------------------------------------------------------------------------- /THIRD-PARTY-LICENCES: -------------------------------------------------------------------------------- 1 | This file was generated with the generate-license-file npm package! 2 | https://www.npmjs.com/package/generate-license-file 3 | -------------------------------------------------------------------------------- /TROUBLESHOOTING.md: -------------------------------------------------------------------------------- 1 | # NodeJS 2 | 3 | If you have error like this: 4 | ```bash 5 | ../../../node_modules/@jest/types/build/Config.d.ts:300:38 - error TS2694: Namespace 'NodeJS' has no exported member 'Global'. 6 | 300 extraGlobals: Array; 7 | ``` 8 | It is a well known issue with jest in combination with a node types version >= 16: 9 | [https://github.com/facebook/jest/issues/11640#issuecomment-874184215](https://github.com/facebook/jest/issues/11640#issuecomment-874184215) 10 | -------------------------------------------------------------------------------- /assets/githubbanner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ovh/design-system/2499ec45e5c43cbd03e88bcb348a801fb7960d7a/assets/githubbanner.png -------------------------------------------------------------------------------- /docs/.gitignore: -------------------------------------------------------------------------------- 1 | * 2 | !.gitignore 3 | !.gitkeep 4 | !README.md 5 | -------------------------------------------------------------------------------- /docs/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ovh/design-system/2499ec45e5c43cbd03e88bcb348a801fb7960d7a/docs/.gitkeep -------------------------------------------------------------------------------- /docs/README.md: -------------------------------------------------------------------------------- 1 | # OVHcloud Design System Documentation 2 | 3 | This directory is used to store the GitHub pages with a generated static Storybook 4 | -------------------------------------------------------------------------------- /lerna.json: -------------------------------------------------------------------------------- 1 | { 2 | "version": "18.6.3", 3 | "npmClient": "yarn", 4 | "useWorkspaces": true, 5 | "command": { 6 | "publish": { 7 | "registry": "" 8 | }, 9 | "version": { 10 | "changelogPreset": "./changelog.preset.config.js", 11 | "allowBranch": [ 12 | "master", 13 | "release/*" 14 | ] 15 | } 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /packages/examples/react-webpack/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "plugins": [ 3 | ["@babel/plugin-transform-runtime", { "regenerator": true }] 4 | ], 5 | "presets": [ 6 | ["@babel/preset-env", { "modules": "auto" }], 7 | "@babel/preset-react", 8 | "@babel/preset-typescript" 9 | ] 10 | } 11 | -------------------------------------------------------------------------------- /packages/examples/react-webpack/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | dist/ 4 | !src/global.d.ts 5 | 6 | # Log files 7 | npm-debug.log* 8 | yarn-debug.log* 9 | yarn-error.log* 10 | pnpm-debug.log* 11 | 12 | # Editor directories and files 13 | .idea 14 | .vscode 15 | *.suo 16 | *.ntvs* 17 | *.njsproj 18 | *.sln 19 | *.sw? 20 | -------------------------------------------------------------------------------- /packages/examples/react-webpack/src/app/app.scss: -------------------------------------------------------------------------------- 1 | // @import '@ovhcloud/ods-components/style'; 2 | 3 | .app { 4 | font-family: var(--ods-font-family-default); 5 | } 6 | -------------------------------------------------------------------------------- /packages/examples/react-webpack/src/app/components/formFormik/formFormik.scss: -------------------------------------------------------------------------------- 1 | .form-formik { 2 | display: flex; 3 | flex-flow: column; 4 | row-gap: 1rem; 5 | } 6 | -------------------------------------------------------------------------------- /packages/examples/react-webpack/src/app/components/formHookForm/formHookForm.scss: -------------------------------------------------------------------------------- 1 | .form-hook-form { 2 | display: flex; 3 | flex-flow: column; 4 | row-gap: 1rem; 5 | } 6 | -------------------------------------------------------------------------------- /packages/examples/react-webpack/src/app/components/formNative/formNative.scss: -------------------------------------------------------------------------------- 1 | .form-native { 2 | display: flex; 3 | flex-flow: column; 4 | row-gap: 1rem; 5 | } 6 | -------------------------------------------------------------------------------- /packages/examples/react-webpack/src/app/components/testCombobox/testCombobox.scss: -------------------------------------------------------------------------------- 1 | .test-combobox { 2 | &__item-1 { 3 | background-color: green; 4 | } 5 | 6 | &__item-2 { 7 | background-color: cyan; 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /packages/examples/react-webpack/src/assets/images/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ovh/design-system/2499ec45e5c43cbd03e88bcb348a801fb7960d7a/packages/examples/react-webpack/src/assets/images/favicon.png -------------------------------------------------------------------------------- /packages/examples/react-webpack/src/global.d.ts: -------------------------------------------------------------------------------- 1 | declare module '*.scss'; 2 | -------------------------------------------------------------------------------- /packages/examples/react-webpack/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | <%= htmlWebpackPlugin.options.title %> 7 | 8 | 9 | 10 |
11 | 12 | 13 | -------------------------------------------------------------------------------- /packages/examples/react-webpack/src/router-app/components/breadcrumb/breadcrumb.scss: -------------------------------------------------------------------------------- 1 | .breadcrumb { 2 | &__item { 3 | text-transform: capitalize; 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /packages/examples/react-webpack/src/router-app/constants/navigation.ts: -------------------------------------------------------------------------------- 1 | enum ROUTE { 2 | products = '/products' 3 | } 4 | 5 | export { 6 | ROUTE, 7 | }; 8 | -------------------------------------------------------------------------------- /packages/examples/react-webpack/src/router-app/modules/products/modules/home/Home.tsx: -------------------------------------------------------------------------------- 1 | import React, { type ReactElement } from 'react'; 2 | import { Link } from 'react-router-dom'; 3 | import { ROUTE } from 'router-app/constants/navigation'; 4 | 5 | function Home(): ReactElement { 6 | return ( 7 |
8 |

9 | Products Home Page 10 |

11 | 12 | 13 | Go to list page 14 | 15 |
16 | ); 17 | } 18 | 19 | export { Home }; 20 | -------------------------------------------------------------------------------- /packages/examples/react-webpack/src/router-app/routerApp.scss: -------------------------------------------------------------------------------- 1 | // @import '@ovhcloud/ods-components/style'; 2 | 3 | .router-app { 4 | font-family: var(--ods-font-family-default); 5 | } 6 | -------------------------------------------------------------------------------- /packages/examples/vanilla-webpack/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "plugins": [ 3 | ["@babel/plugin-transform-runtime", { "regenerator": true }] 4 | ], 5 | "presets": [ 6 | ["@babel/preset-env", { "modules": "auto" }], 7 | "@babel/preset-typescript" 8 | ] 9 | } 10 | -------------------------------------------------------------------------------- /packages/examples/vanilla-webpack/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | dist/ 4 | 5 | # Log files 6 | npm-debug.log* 7 | yarn-debug.log* 8 | yarn-error.log* 9 | pnpm-debug.log* 10 | 11 | # Editor directories and files 12 | .idea 13 | .vscode 14 | *.suo 15 | *.ntvs* 16 | *.njsproj 17 | *.sln 18 | *.sw? 19 | -------------------------------------------------------------------------------- /packages/examples/vanilla-webpack/src/assets/images/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ovh/design-system/2499ec45e5c43cbd03e88bcb348a801fb7960d7a/packages/examples/vanilla-webpack/src/assets/images/favicon.png -------------------------------------------------------------------------------- /packages/examples/vanilla-webpack/src/index.ts: -------------------------------------------------------------------------------- 1 | import '@ovhcloud/ods-themes/default'; 2 | 3 | // Use this configuration to test the lazy loader 4 | import { defineCustomElements } from '@ovhcloud/ods-components/dist/loader'; 5 | defineCustomElements(); 6 | 7 | // Use this configuration to test the "per-component" import 8 | // import { defineCustomElement as defineButton } from '@ovhcloud/ods-components/dist/components/ods-button'; 9 | // defineButton(); 10 | -------------------------------------------------------------------------------- /packages/ods/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | dist/ 4 | src/components/types/ 5 | src/components/utils/ 6 | tests/coverage/ 7 | documentation/ 8 | 9 | # Log files 10 | npm-debug.log* 11 | yarn-debug.log* 12 | yarn-error.log* 13 | pnpm-debug.log* 14 | 15 | # Editor directories and files 16 | .idea 17 | .vscode 18 | *.suo 19 | *.ntvs* 20 | *.njsproj 21 | *.sln 22 | *.sw? 23 | -------------------------------------------------------------------------------- /packages/ods/.npmignore: -------------------------------------------------------------------------------- 1 | !dist/ 2 | -------------------------------------------------------------------------------- /packages/ods/jest.config.ts: -------------------------------------------------------------------------------- 1 | import { getJestOption } from './src/config/jest'; 2 | 3 | export default getJestOption({ 4 | args: [], 5 | option: { 6 | collectCoverageFrom: [ 7 | '/src/!(components)/**/*.{ts,tsx}', 8 | ], 9 | coverageDirectory: '/tests/coverage', 10 | testPathIgnorePatterns: [ 11 | '/node_modules/', 12 | 'dist/', 13 | 'scripts/', 14 | 'src/components/', 15 | ], 16 | }, 17 | }); 18 | -------------------------------------------------------------------------------- /packages/ods/react/.gitignore: -------------------------------------------------------------------------------- 1 | dist/ 2 | src/ 3 | !tests/_app/src 4 | -------------------------------------------------------------------------------- /packages/ods/react/.npmignore: -------------------------------------------------------------------------------- 1 | !dist/ 2 | src/ 3 | -------------------------------------------------------------------------------- /packages/ods/react/babel.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | [ "@babel/preset-env", { "targets": { "node": "current" } } ], 4 | "@babel/preset-typescript" 5 | ] 6 | } 7 | -------------------------------------------------------------------------------- /packages/ods/react/testing-library/jest.config.ts: -------------------------------------------------------------------------------- 1 | import { Config } from 'jest'; 2 | 3 | const jestConfig: Config = { 4 | clearMocks: true, 5 | testEnvironment: "jsdom", 6 | testRegex: "./*test.tsx$", 7 | transform: { 8 | '\\.(ts|tsx)$': 'ts-jest', 9 | '^.+\\.(js|jsx)$': 'babel-jest', 10 | }, 11 | transformIgnorePatterns: [ 12 | '/node_modules/(?!(@ovhcloud|@stencil)/)', 13 | ], 14 | rootDir: '../', 15 | }; 16 | 17 | export default jestConfig; 18 | -------------------------------------------------------------------------------- /packages/ods/react/tests/_app/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | React Test App 7 | 8 | 9 |
10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /packages/ods/react/tests/_app/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ods-components-react-test-app", 3 | "private": true, 4 | "version": "18.6.3", 5 | "type": "module", 6 | "scripts": { 7 | "start": "vite" 8 | }, 9 | "dependencies": { 10 | "react": "18.2.0", 11 | "react-dom": "18.2.0", 12 | "react-router-dom": "6.22.1" 13 | }, 14 | "devDependencies": { 15 | "@vitejs/plugin-react": "4.2.1", 16 | "vite": "5.0.10", 17 | "vite-tsconfig-paths": "4.2.3" 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /packages/ods/react/tests/_app/src/components/ods-badge.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react-dom/client'; 2 | import { OdsBadge } from 'ods-components-react'; 3 | 4 | const Badge = () => { 5 | return ( 6 | 7 | ); 8 | }; 9 | 10 | export default Badge; 11 | -------------------------------------------------------------------------------- /packages/ods/react/tests/_app/src/components/ods-breadcrumb.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react-dom/client'; 2 | import { OdsBreadcrumb, OdsBreadcrumbItem } from 'ods-components-react'; 3 | 4 | const Breadcrumb = () => { 5 | return ( 6 | 7 | 8 | 9 | 10 | 11 | ); 12 | }; 13 | 14 | export default Breadcrumb; 15 | -------------------------------------------------------------------------------- /packages/ods/react/tests/_app/src/components/ods-card.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react-dom/client'; 2 | import { OdsCard, OdsText } from 'ods-components-react'; 3 | 4 | const Card = () => { 5 | return ( 6 | 7 | Hello, world! 8 | 9 | ); 10 | }; 11 | 12 | export default Card; 13 | -------------------------------------------------------------------------------- /packages/ods/react/tests/_app/src/components/ods-checkbox.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react-dom/client'; 2 | import { OdsCheckbox } from 'ods-components-react'; 3 | 4 | const Checkbox = () => { 5 | function onOdsChange() { 6 | console.log('React checkbox odsChange'); 7 | } 8 | 9 | return ( 10 | <> 11 | 12 | 13 | 15 | 16 | ); 17 | }; 18 | 19 | export default Checkbox; 20 | -------------------------------------------------------------------------------- /packages/ods/react/tests/_app/src/components/ods-clipboard.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react-dom/client'; 2 | import { OdsClipboard } from 'ods-components-react'; 3 | 4 | const Clipboard = () => { 5 | return ( 6 | 7 | ); 8 | }; 9 | 10 | export default Clipboard; 11 | -------------------------------------------------------------------------------- /packages/ods/react/tests/_app/src/components/ods-code.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react-dom/client'; 2 | import { OdsCode } from 'ods-components-react'; 3 | 4 | const Code = () => { 5 | return ( 6 | 7 | Some code to copy 8 | 9 | ); 10 | }; 11 | 12 | export default Code; 13 | -------------------------------------------------------------------------------- /packages/ods/react/tests/_app/src/components/ods-datepicker.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react-dom/client'; 2 | import { OdsDatepicker } from 'ods-components-react'; 3 | 4 | const Datepicker = () => { 5 | return ( 6 | 7 | ); 8 | }; 9 | 10 | export default Datepicker; 11 | -------------------------------------------------------------------------------- /packages/ods/react/tests/_app/src/components/ods-divider.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react-dom/client'; 2 | import { OdsDivider } from 'ods-components-react'; 3 | 4 | const Divider = () => { 5 | return ( 6 | 7 | ); 8 | }; 9 | 10 | export default Divider; 11 | -------------------------------------------------------------------------------- /packages/ods/react/tests/_app/src/components/ods-icon.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react-dom/client'; 2 | import { ODS_ICON_NAME } from '@ovhcloud/ods-components'; 3 | import { OdsIcon } from 'ods-components-react'; 4 | 5 | const Icon = () => { 6 | return ( 7 | 8 | ); 9 | }; 10 | 11 | export default Icon; 12 | -------------------------------------------------------------------------------- /packages/ods/react/tests/_app/src/components/ods-input.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react-dom/client'; 2 | import { OdsInput } from 'ods-components-react'; 3 | 4 | const Input = () => { 5 | function onOdsChange() { 6 | console.log('React input odsChange'); 7 | } 8 | 9 | return ( 10 | <> 11 | 13 | 14 | 16 | 17 | ); 18 | }; 19 | 20 | export default Input; 21 | -------------------------------------------------------------------------------- /packages/ods/react/tests/_app/src/components/ods-link.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react-dom/client'; 2 | import { OdsLink } from 'ods-components-react'; 3 | 4 | const Link = () => { 5 | return ( 6 | 7 | ); 8 | }; 9 | 10 | export default Link; 11 | -------------------------------------------------------------------------------- /packages/ods/react/tests/_app/src/components/ods-medium.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react-dom/client'; 2 | import { OdsMedium } from 'ods-components-react'; 3 | 4 | const Medium = () => { 5 | return ( 6 | 8 | ); 9 | }; 10 | 11 | export default Medium; 12 | -------------------------------------------------------------------------------- /packages/ods/react/tests/_app/src/components/ods-message.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react-dom/client'; 2 | import { OdsMessage } from 'ods-components-react'; 3 | 4 | const Message = () => { 5 | return ( 6 | 7 | Some message content 8 | 9 | ); 10 | }; 11 | 12 | export default Message; 13 | -------------------------------------------------------------------------------- /packages/ods/react/tests/_app/src/components/ods-pagination.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react-dom/client'; 2 | import { OdsPagination } from 'ods-components-react'; 3 | 4 | const Pagination = () => { 5 | return ( 6 | 7 | ); 8 | }; 9 | 10 | export default Pagination; 11 | -------------------------------------------------------------------------------- /packages/ods/react/tests/_app/src/components/ods-password.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react-dom/client'; 2 | import { OdsPassword } from 'ods-components-react'; 3 | 4 | const Password = () => { 5 | function onOdsChange() { 6 | console.log('React password odsChange'); 7 | } 8 | 9 | return ( 10 | <> 11 | 13 | 14 | 16 | 17 | ); 18 | }; 19 | 20 | export default Password; 21 | -------------------------------------------------------------------------------- /packages/ods/react/tests/_app/src/components/ods-popover.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react-dom/client'; 2 | import { OdsPopover } from 'ods-components-react'; 3 | 4 | const Popover = () => { 5 | return ( 6 | <> 7 |
8 | Trigger 9 |
10 | 11 | 14 | Popover content 15 | 16 | 17 | ); 18 | }; 19 | 20 | export default Popover; 21 | -------------------------------------------------------------------------------- /packages/ods/react/tests/_app/src/components/ods-progress-bar.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react-dom/client'; 2 | import { OdsProgressBar } from 'ods-components-react'; 3 | 4 | const ProgressBar = () => { 5 | return ( 6 | 7 | ); 8 | }; 9 | 10 | export default ProgressBar; 11 | -------------------------------------------------------------------------------- /packages/ods/react/tests/_app/src/components/ods-quantity.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react-dom/client'; 2 | import { OdsQuantity } from 'ods-components-react'; 3 | 4 | const Quantity = () => { 5 | function onOdsChange() { 6 | console.log('React quantity odsChange'); 7 | } 8 | 9 | return ( 10 | <> 11 | 13 | 14 | 16 | 17 | ); 18 | }; 19 | 20 | export default Quantity; 21 | -------------------------------------------------------------------------------- /packages/ods/react/tests/_app/src/components/ods-radio.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react-dom/client'; 2 | import { OdsRadio } from 'ods-components-react'; 3 | 4 | const Radio = () => { 5 | function onOdsChange() { 6 | console.log('React radio odsChange'); 7 | } 8 | 9 | return ( 10 | <> 11 | 12 | 13 | 15 | 16 | ); 17 | }; 18 | 19 | export default Radio; 20 | -------------------------------------------------------------------------------- /packages/ods/react/tests/_app/src/components/ods-range.tsx: -------------------------------------------------------------------------------- 1 | import { OdsRange } from 'ods-components-react'; 2 | import React from 'react-dom/client'; 3 | 4 | const Range = () => { 5 | return ( 6 | 7 | ); 8 | }; 9 | 10 | export default Range; 11 | -------------------------------------------------------------------------------- /packages/ods/react/tests/_app/src/components/ods-skeleton.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react-dom/client'; 2 | import { OdsSkeleton } from 'ods-components-react'; 3 | 4 | const Skeleton = () => { 5 | return ( 6 | 7 | ); 8 | }; 9 | 10 | export default Skeleton; 11 | -------------------------------------------------------------------------------- /packages/ods/react/tests/_app/src/components/ods-spinner.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react-dom/client'; 2 | import { OdsSpinner } from 'ods-components-react'; 3 | 4 | const Spinner = () => { 5 | return ( 6 | 7 | ); 8 | }; 9 | 10 | export default Spinner; 11 | -------------------------------------------------------------------------------- /packages/ods/react/tests/_app/src/components/ods-text.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react-dom/client'; 2 | import { OdsText } from 'ods-components-react'; 3 | 4 | const Text = () => { 5 | return ( 6 | lorem ipsum 7 | ); 8 | }; 9 | 10 | export default Text; 11 | -------------------------------------------------------------------------------- /packages/ods/react/tests/_app/src/components/ods-toggle.tsx: -------------------------------------------------------------------------------- 1 | import { OdsToggle } from 'ods-components-react'; 2 | import React from 'react-dom/client'; 3 | 4 | const Toggle = () => { 5 | function onClick() { 6 | console.log('React toggle click'); 7 | } 8 | 9 | return ( 10 | <> 11 | 12 | 13 | 14 | 15 | ); 16 | }; 17 | 18 | export default Toggle; 19 | -------------------------------------------------------------------------------- /packages/ods/react/tests/_app/src/components/ods-tooltip.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react-dom/client'; 2 | import { OdsTooltip } from 'ods-components-react'; 3 | 4 | const Tooltip = () => { 5 | return ( 6 | <> 7 |
8 | Trigger 9 |
10 | 11 | 14 | Tooltip content 15 | 16 | 17 | ); 18 | }; 19 | 20 | export default Tooltip; 21 | -------------------------------------------------------------------------------- /packages/ods/react/tests/_app/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tsconfig.react.json", 3 | "compilerOptions": { 4 | "lib": ["ES2020", "DOM"], 5 | "module": "ESNext", 6 | "paths": { 7 | "ods-components-react": ["../../src/components/stencil-generated"] 8 | } 9 | }, 10 | "include": ["src"] 11 | } 12 | -------------------------------------------------------------------------------- /packages/ods/react/tests/_app/vite.config.ts: -------------------------------------------------------------------------------- 1 | import react from '@vitejs/plugin-react' 2 | import { defineConfig } from 'vite' 3 | import tsconfigPaths from 'vite-tsconfig-paths' 4 | 5 | export default defineConfig({ 6 | plugins: [react(), tsconfigPaths({ root: '.' })], 7 | server: { 8 | port: 3000, 9 | }, 10 | }) 11 | -------------------------------------------------------------------------------- /packages/ods/react/tests/jest.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | preset: 'jest-puppeteer', 3 | testRegex: "./*\\e2e\\.ts$", 4 | transform: { 5 | '\\.(ts|tsx)$': 'ts-jest', 6 | }, 7 | }; 8 | -------------------------------------------------------------------------------- /packages/ods/react/tsconfig.cjs.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "dist/cjs", 5 | "module": "CommonJS", 6 | "declaration": false, 7 | "declarationDir": null 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /packages/ods/react/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.react.json", 3 | "compilerOptions": { 4 | "outDir": "dist/esm", 5 | "declarationDir": "dist/types" 6 | }, 7 | "include": [ 8 | "src/**/*.ts", 9 | "src/**/*.tsx" 10 | ] 11 | } 12 | -------------------------------------------------------------------------------- /packages/ods/src/components/accordion/.gitignore: -------------------------------------------------------------------------------- 1 | # Local Stencil command generates external ods component build at the root of the project 2 | # Excluding them is a temporary solution to avoid pushing generated files 3 | # But the issue may cause main build (ods-component package) to fails, as it detects multiples occurences 4 | # of the same component and thus you have to delete all those generated dir manually 5 | */src/ 6 | -------------------------------------------------------------------------------- /packages/ods/src/components/accordion/custom-elements-manifest.config.mjs: -------------------------------------------------------------------------------- 1 | import cemEnumPlugin from '../../../scripts/cem-enum-plugin.mjs'; 2 | 3 | export default { 4 | globs: ['src/**/*.+(ts|tsx)'], 5 | outdir: 'documentation', 6 | plugins: [cemEnumPlugin()], 7 | stencil: true, 8 | }; 9 | -------------------------------------------------------------------------------- /packages/ods/src/components/accordion/src/globals.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Import here all the external ODS component that you need to run the current component 3 | * when running dev server (yarn start) or e2e tests 4 | * 5 | * ex: 6 | * import '../../text/src'; 7 | */ 8 | 9 | import '../../text/src'; 10 | import '../../icon/src'; -------------------------------------------------------------------------------- /packages/ods/src/components/accordion/src/index.ts: -------------------------------------------------------------------------------- 1 | export { OdsAccordion } from './components/ods-accordion/ods-accordion'; 2 | export { type OdsAccordionToggleEvent, type OdsAccordionToggleEventDetail } from './interfaces/events'; 3 | -------------------------------------------------------------------------------- /packages/ods/src/components/accordion/src/interfaces/events.ts: -------------------------------------------------------------------------------- 1 | interface OdsAccordionToggleEventDetail { 2 | isOpen: boolean; 3 | } 4 | 5 | type OdsAccordionToggleEvent = CustomEvent; 6 | 7 | export { 8 | type OdsAccordionToggleEvent, 9 | type OdsAccordionToggleEventDetail, 10 | }; 11 | -------------------------------------------------------------------------------- /packages/ods/src/components/accordion/stencil.config.ts: -------------------------------------------------------------------------------- 1 | import { getStencilConfig } from '../../config/stencil'; 2 | 3 | export const config = getStencilConfig({ 4 | args: process.argv.slice(2), 5 | componentCorePackage: '@ovhcloud/ods-component-accordion', 6 | jestOption: { 7 | setupFiles: ['/tests/setup.ts'], 8 | }, 9 | namespace: 'ods-accordion', 10 | }); 11 | -------------------------------------------------------------------------------- /packages/ods/src/components/accordion/tests/setup.ts: -------------------------------------------------------------------------------- 1 | global.MutationObserver = jest 2 | .fn() 3 | .mockImplementation(() => ({ 4 | disconnect: jest.fn(), 5 | observe: jest.fn(), 6 | takeRecords: jest.fn(), 7 | })); 8 | -------------------------------------------------------------------------------- /packages/ods/src/components/accordion/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tsconfig.json", 3 | "include": [ 4 | "src", 5 | "tests" 6 | ] 7 | } 8 | -------------------------------------------------------------------------------- /packages/ods/src/components/badge/.gitignore: -------------------------------------------------------------------------------- 1 | # Local Stencil command generates external ods component build at the root of the project 2 | # Excluding them is a temporary solution to avoid pushing generated files 3 | # But the issue may cause main build (ods-component package) to fails, as it detects multiples occurences 4 | # of the same component and thus you have to delete all those generated dir manually 5 | */src/ 6 | -------------------------------------------------------------------------------- /packages/ods/src/components/badge/custom-elements-manifest.config.mjs: -------------------------------------------------------------------------------- 1 | import cemEnumPlugin from '../../../scripts/cem-enum-plugin.mjs'; 2 | 3 | export default { 4 | globs: ['src/**/*.+(ts|tsx)'], 5 | outdir: 'documentation', 6 | plugins: [cemEnumPlugin()], 7 | stencil: true, 8 | }; 9 | -------------------------------------------------------------------------------- /packages/ods/src/components/badge/src/constants/badge-color.ts: -------------------------------------------------------------------------------- 1 | enum ODS_BADGE_COLOR { 2 | alpha = 'alpha', 3 | beta = 'beta', 4 | critical = 'critical', 5 | information = 'information', 6 | neutral = 'neutral', 7 | new = 'new', 8 | promotion = 'promotion', 9 | success = 'success', 10 | warning = 'warning', 11 | } 12 | 13 | type OdsBadgeColor =`${ODS_BADGE_COLOR}`; 14 | 15 | const ODS_BADGE_COLORS = Object.freeze(Object.values(ODS_BADGE_COLOR)); 16 | 17 | export { 18 | ODS_BADGE_COLOR, 19 | ODS_BADGE_COLORS, 20 | type OdsBadgeColor, 21 | }; 22 | -------------------------------------------------------------------------------- /packages/ods/src/components/badge/src/constants/badge-icon-alignment.ts: -------------------------------------------------------------------------------- 1 | enum ODS_BADGE_ICON_ALIGNMENT { 2 | left = 'left', 3 | right = 'right', 4 | } 5 | 6 | type OdsBadgeIconAlignment =`${ODS_BADGE_ICON_ALIGNMENT}`; 7 | 8 | const ODS_BADGE_ICON_ALIGNMENTS = Object.freeze(Object.values(ODS_BADGE_ICON_ALIGNMENT)); 9 | 10 | export { 11 | ODS_BADGE_ICON_ALIGNMENT, 12 | ODS_BADGE_ICON_ALIGNMENTS, 13 | type OdsBadgeIconAlignment, 14 | }; 15 | -------------------------------------------------------------------------------- /packages/ods/src/components/badge/src/constants/badge-size.ts: -------------------------------------------------------------------------------- 1 | enum ODS_BADGE_SIZE { 2 | lg = 'lg', 3 | md = 'md', 4 | sm = 'sm', 5 | } 6 | 7 | type OdsBadgeSize =`${ODS_BADGE_SIZE}`; 8 | 9 | const ODS_BADGE_SIZES = Object.freeze(Object.values(ODS_BADGE_SIZE)); 10 | 11 | export { 12 | ODS_BADGE_SIZE, 13 | ODS_BADGE_SIZES, 14 | type OdsBadgeSize, 15 | }; 16 | -------------------------------------------------------------------------------- /packages/ods/src/components/badge/src/globals.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Import here all the external ODS component that you need to run the current component 3 | * when running dev server (yarn start) or e2e tests 4 | * 5 | * ex: 6 | * import '../../text/src'; 7 | */ 8 | import '../../icon/src'; 9 | -------------------------------------------------------------------------------- /packages/ods/src/components/badge/src/index.ts: -------------------------------------------------------------------------------- 1 | export { OdsBadge } from './components/ods-badge/ods-badge'; 2 | export { ODS_BADGE_COLOR, ODS_BADGE_COLORS, type OdsBadgeColor } from './constants/badge-color'; 3 | export { ODS_BADGE_ICON_ALIGNMENT, ODS_BADGE_ICON_ALIGNMENTS, type OdsBadgeIconAlignment } from './constants/badge-icon-alignment'; 4 | export { ODS_BADGE_SIZE, ODS_BADGE_SIZES, type OdsBadgeSize } from './constants/badge-size'; 5 | -------------------------------------------------------------------------------- /packages/ods/src/components/badge/stencil.config.ts: -------------------------------------------------------------------------------- 1 | import { getStencilConfig } from '../../config/stencil'; 2 | 3 | export const config = getStencilConfig({ 4 | args: process.argv.slice(2), 5 | componentCorePackage: '@ovhcloud/ods-component-badge', 6 | namespace: 'ods-badge', 7 | }); 8 | -------------------------------------------------------------------------------- /packages/ods/src/components/badge/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tsconfig.json", 3 | "include": [ 4 | "src", 5 | "tests" 6 | ] 7 | } 8 | -------------------------------------------------------------------------------- /packages/ods/src/components/breadcrumb/.gitignore: -------------------------------------------------------------------------------- 1 | # Local Stencil command generates external ods component build at the root of the project 2 | # Excluding them is a temporary solution to avoid pushing generated files 3 | # But the issue may cause main build (ods-component package) to fails, as it detects multiples occurences 4 | # of the same component and thus you have to delete all those generated dir manually 5 | */src/ 6 | -------------------------------------------------------------------------------- /packages/ods/src/components/breadcrumb/custom-elements-manifest.config.mjs: -------------------------------------------------------------------------------- 1 | import cemEnumPlugin from '../../../scripts/cem-enum-plugin.mjs'; 2 | 3 | export default { 4 | globs: ['src/**/*.+(ts|tsx)'], 5 | outdir: 'documentation', 6 | plugins: [cemEnumPlugin()], 7 | stencil: true, 8 | }; 9 | -------------------------------------------------------------------------------- /packages/ods/src/components/breadcrumb/src/components/ods-breadcrumb-item/ods-breadcrumb-item.scss: -------------------------------------------------------------------------------- 1 | @use '../../../../../style/link'; 2 | 3 | :host(.ods-breadcrumb-item) { 4 | display: inline-flex; 5 | font-size: 0.875rem; 6 | font-weight: link.$ods-link-font-weight; 7 | } 8 | 9 | :host(.ods-breadcrumb-item--collapsed) { 10 | display: none; 11 | } 12 | 13 | .ods-breadcrumb-item { 14 | &__last { 15 | color: var(--ods-color-text); 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /packages/ods/src/components/breadcrumb/src/components/ods-breadcrumb/ods-breadcrumb.scss: -------------------------------------------------------------------------------- 1 | $breadcrumb-spacing: 8px; 2 | 3 | :host(.ods-breadcrumb) { 4 | display: flex; 5 | flex-wrap: wrap; 6 | column-gap: $breadcrumb-spacing; 7 | 8 | ::slotted(ods-breadcrumb-item:not(:last-child)) { 9 | &::after { 10 | padding-left: $breadcrumb-spacing; 11 | color: var(--ods-color-text); 12 | font-size: 0.875rem; 13 | font-weight: 700; 14 | content: '|'; 15 | } 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /packages/ods/src/components/breadcrumb/src/globals.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Import here all the external ODS component that you need to run the current component 3 | * when running dev server (yarn start) or e2e tests 4 | * 5 | * ex: 6 | * import '../../text/src'; 7 | */ 8 | import '../../icon/src'; 9 | import '../../link/src'; 10 | -------------------------------------------------------------------------------- /packages/ods/src/components/breadcrumb/src/index.ts: -------------------------------------------------------------------------------- 1 | export { OdsBreadcrumb } from './components/ods-breadcrumb/ods-breadcrumb'; 2 | export { OdsBreadcrumbItem } from './components/ods-breadcrumb-item/ods-breadcrumb-item'; 3 | export { type OdsBreadcrumbItemClickEvent, type OdsBreadcrumbItemExpandEvent } from './interfaces/events'; 4 | -------------------------------------------------------------------------------- /packages/ods/src/components/breadcrumb/src/interfaces/events.ts: -------------------------------------------------------------------------------- 1 | type OdsBreadcrumbItemClickEvent = CustomEvent; 2 | type OdsBreadcrumbItemExpandEvent = CustomEvent; 3 | 4 | export { 5 | type OdsBreadcrumbItemClickEvent, 6 | type OdsBreadcrumbItemExpandEvent, 7 | }; 8 | -------------------------------------------------------------------------------- /packages/ods/src/components/breadcrumb/stencil.config.ts: -------------------------------------------------------------------------------- 1 | import { getStencilConfig } from '../../config/stencil'; 2 | 3 | export const config = getStencilConfig({ 4 | args: process.argv.slice(2), 5 | componentCorePackage: '@ovhcloud/ods-component-breadcrumb', 6 | namespace: 'ods-breadcrumb', 7 | }); 8 | -------------------------------------------------------------------------------- /packages/ods/src/components/breadcrumb/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tsconfig.json", 3 | "include": [ 4 | "src", 5 | "tests" 6 | ] 7 | } 8 | -------------------------------------------------------------------------------- /packages/ods/src/components/button/.gitignore: -------------------------------------------------------------------------------- 1 | # Local Stencil command generates external ods component build at the root of the project 2 | # Excluding them is a temporary solution to avoid pushing generated files 3 | # But the issue may cause main build (ods-component package) to fails, as it detects multiples occurences 4 | # of the same component and thus you have to delete all those generated dir manually 5 | */src/ 6 | -------------------------------------------------------------------------------- /packages/ods/src/components/button/custom-elements-manifest.config.mjs: -------------------------------------------------------------------------------- 1 | import cemEnumPlugin from '../../../scripts/cem-enum-plugin.mjs'; 2 | 3 | export default { 4 | globs: ['src/**/*.+(ts|tsx)'], 5 | outdir: 'documentation', 6 | plugins: [cemEnumPlugin()], 7 | stencil: true, 8 | }; 9 | -------------------------------------------------------------------------------- /packages/ods/src/components/button/src/constants/button-color.ts: -------------------------------------------------------------------------------- 1 | enum ODS_BUTTON_COLOR { 2 | critical = 'critical', 3 | neutral = 'neutral', 4 | primary = 'primary', 5 | } 6 | 7 | type OdsButtonColor =`${ODS_BUTTON_COLOR}`; 8 | 9 | const ODS_BUTTON_COLORS = Object.freeze(Object.values(ODS_BUTTON_COLOR)); 10 | 11 | export { 12 | ODS_BUTTON_COLOR, 13 | ODS_BUTTON_COLORS, 14 | type OdsButtonColor, 15 | }; 16 | -------------------------------------------------------------------------------- /packages/ods/src/components/button/src/constants/button-icon-alignment.ts: -------------------------------------------------------------------------------- 1 | enum ODS_BUTTON_ICON_ALIGNMENT { 2 | left = 'left', 3 | right = 'right', 4 | } 5 | 6 | type OdsButtonIconAlignment =`${ODS_BUTTON_ICON_ALIGNMENT}`; 7 | 8 | const ODS_BUTTON_ICON_ALIGNMENTS = Object.freeze(Object.values(ODS_BUTTON_ICON_ALIGNMENT)); 9 | 10 | export { 11 | ODS_BUTTON_ICON_ALIGNMENT, 12 | ODS_BUTTON_ICON_ALIGNMENTS, 13 | type OdsButtonIconAlignment, 14 | }; 15 | -------------------------------------------------------------------------------- /packages/ods/src/components/button/src/constants/button-size.ts: -------------------------------------------------------------------------------- 1 | enum ODS_BUTTON_SIZE { 2 | md = 'md', 3 | sm = 'sm', 4 | xs = 'xs', 5 | } 6 | 7 | type OdsButtonSize =`${ODS_BUTTON_SIZE}`; 8 | 9 | const ODS_BUTTON_SIZES = Object.freeze(Object.values(ODS_BUTTON_SIZE)); 10 | 11 | export { 12 | ODS_BUTTON_SIZE, 13 | ODS_BUTTON_SIZES, 14 | type OdsButtonSize, 15 | }; 16 | -------------------------------------------------------------------------------- /packages/ods/src/components/button/src/constants/button-variant.ts: -------------------------------------------------------------------------------- 1 | enum ODS_BUTTON_VARIANT { 2 | default = 'default', 3 | ghost = 'ghost', 4 | outline = 'outline', 5 | } 6 | 7 | type OdsButtonVariant =`${ODS_BUTTON_VARIANT}`; 8 | 9 | const ODS_BUTTON_VARIANTS = Object.freeze(Object.values(ODS_BUTTON_VARIANT)); 10 | 11 | export { 12 | ODS_BUTTON_VARIANT, 13 | ODS_BUTTON_VARIANTS, 14 | type OdsButtonVariant, 15 | }; 16 | -------------------------------------------------------------------------------- /packages/ods/src/components/button/src/controller/ods-button.ts: -------------------------------------------------------------------------------- 1 | function handleClick(type: HTMLButtonElement['type'], form: HTMLFormElement | null): void { 2 | if (form) { 3 | if (type === 'submit') { 4 | return form.requestSubmit(); 5 | } 6 | 7 | if (type === 'reset') { 8 | return form.reset(); 9 | } 10 | } 11 | } 12 | 13 | export { 14 | handleClick, 15 | }; 16 | -------------------------------------------------------------------------------- /packages/ods/src/components/button/src/globals.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Import here all the external ODS component that you need to run the current component 3 | * when running dev server (yarn start) or e2e tests 4 | * 5 | * ex: 6 | * import '../../text/src'; 7 | */ 8 | import '../../icon/src'; 9 | import '../../spinner/src'; 10 | -------------------------------------------------------------------------------- /packages/ods/src/components/button/src/index.ts: -------------------------------------------------------------------------------- 1 | export { OdsButton } from './components/ods-button/ods-button'; 2 | export { ODS_BUTTON_COLOR, ODS_BUTTON_COLORS, type OdsButtonColor } from './constants/button-color'; 3 | export { ODS_BUTTON_ICON_ALIGNMENT, ODS_BUTTON_ICON_ALIGNMENTS, type OdsButtonIconAlignment } from './constants/button-icon-alignment'; 4 | export { ODS_BUTTON_SIZE, ODS_BUTTON_SIZES, type OdsButtonSize } from './constants/button-size'; 5 | export { ODS_BUTTON_VARIANT, ODS_BUTTON_VARIANTS, type OdsButtonVariant } from './constants/button-variant'; 6 | -------------------------------------------------------------------------------- /packages/ods/src/components/button/stencil.config.ts: -------------------------------------------------------------------------------- 1 | import { getStencilConfig } from '../../config/stencil'; 2 | 3 | export const config = getStencilConfig({ 4 | args: process.argv.slice(2), 5 | componentCorePackage: '@ovhcloud/ods-component-button', 6 | namespace: 'ods-button', 7 | }); 8 | -------------------------------------------------------------------------------- /packages/ods/src/components/button/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tsconfig.json", 3 | "include": [ 4 | "src", 5 | "tests" 6 | ] 7 | } 8 | -------------------------------------------------------------------------------- /packages/ods/src/components/card/.gitignore: -------------------------------------------------------------------------------- 1 | # Local Stencil command generates external ods component build at the root of the project 2 | # Excluding them is a temporary solution to avoid pushing generated files 3 | # But the issue may cause main build (ods-component package) to fails, as it detects multiples occurences 4 | # of the same component and thus you have to delete all those generated dir manually 5 | */src/ 6 | -------------------------------------------------------------------------------- /packages/ods/src/components/card/custom-elements-manifest.config.mjs: -------------------------------------------------------------------------------- 1 | import cemEnumPlugin from '../../../scripts/cem-enum-plugin.mjs'; 2 | 3 | export default { 4 | globs: ['src/**/*.+(ts|tsx)'], 5 | outdir: 'documentation', 6 | plugins: [cemEnumPlugin()], 7 | stencil: true, 8 | }; 9 | -------------------------------------------------------------------------------- /packages/ods/src/components/card/src/components/ods-card/ods-card.scss: -------------------------------------------------------------------------------- 1 | :host(.ods-card) { 2 | box-sizing: border-box; 3 | display: inline-block; 4 | border: 1px solid; 5 | border-radius: 8px; 6 | } 7 | 8 | :host(.ods-card--neutral) { 9 | border-color: var(--ods-color-neutral-200); 10 | } 11 | 12 | :host(.ods-card--primary) { 13 | border-color: var(--ods-color-primary-200); 14 | } 15 | -------------------------------------------------------------------------------- /packages/ods/src/components/card/src/constants/card-color.ts: -------------------------------------------------------------------------------- 1 | enum ODS_CARD_COLOR { 2 | neutral = 'neutral', 3 | primary = 'primary', 4 | } 5 | 6 | type OdsCardColor = `${ODS_CARD_COLOR}`; 7 | 8 | const ODS_CARD_COLORS = Object.freeze(Object.values(ODS_CARD_COLOR)); 9 | 10 | export { 11 | ODS_CARD_COLOR, 12 | ODS_CARD_COLORS, 13 | type OdsCardColor, 14 | }; -------------------------------------------------------------------------------- /packages/ods/src/components/card/src/globals.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Import here all the external ODS component that you need to run the current component 3 | * when running dev server (yarn start) or e2e tests 4 | * 5 | * ex: 6 | * import '../../text/src'; 7 | */ 8 | -------------------------------------------------------------------------------- /packages/ods/src/components/card/src/index.ts: -------------------------------------------------------------------------------- 1 | export { OdsCard } from './components/ods-card/ods-card'; 2 | export { ODS_CARD_COLOR, ODS_CARD_COLORS, type OdsCardColor } from './constants/card-color'; -------------------------------------------------------------------------------- /packages/ods/src/components/card/stencil.config.ts: -------------------------------------------------------------------------------- 1 | import { getStencilConfig } from '../../config/stencil'; 2 | 3 | export const config = getStencilConfig({ 4 | args: process.argv.slice(2), 5 | componentCorePackage: '@ovhcloud/ods-component-card', 6 | namespace: 'ods-card', 7 | }); 8 | -------------------------------------------------------------------------------- /packages/ods/src/components/card/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tsconfig.json", 3 | "include": [ 4 | "src", 5 | "tests" 6 | ] 7 | } 8 | -------------------------------------------------------------------------------- /packages/ods/src/components/checkbox/.gitignore: -------------------------------------------------------------------------------- 1 | # Local Stencil command generates external ods component build at the root of the project 2 | # Excluding them is a temporary solution to avoid pushing generated files 3 | # But the issue may cause main build (ods-component package) to fails, as it detects multiples occurences 4 | # of the same component and thus you have to delete all those generated dir manually 5 | */src/ 6 | -------------------------------------------------------------------------------- /packages/ods/src/components/checkbox/custom-elements-manifest.config.mjs: -------------------------------------------------------------------------------- 1 | import cemEnumPlugin from '../../../scripts/cem-enum-plugin.mjs'; 2 | 3 | export default { 4 | globs: ['src/**/*.+(ts|tsx)'], 5 | outdir: 'documentation', 6 | plugins: [cemEnumPlugin()], 7 | stencil: true, 8 | }; 9 | -------------------------------------------------------------------------------- /packages/ods/src/components/checkbox/src/components/ods-checkbox/ods-checkbox.scss: -------------------------------------------------------------------------------- 1 | @use '../../../../../style/checkbox'; 2 | 3 | .ods-checkbox { 4 | display: inline-flex; 5 | width: inherit; 6 | height: inherit; 7 | 8 | &__checkbox { 9 | @include checkbox.ods-checkbox(); 10 | 11 | &--error { 12 | border-color: var(--ods-color-form-element-border-critical); 13 | } 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /packages/ods/src/components/checkbox/src/globals.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Import here all the external ODS component that you need to run the current component 3 | * when running dev server (yarn start) or e2e tests 4 | * 5 | * ex: 6 | * import '../../text/src'; 7 | */ 8 | -------------------------------------------------------------------------------- /packages/ods/src/components/checkbox/src/index.ts: -------------------------------------------------------------------------------- 1 | export { OdsCheckbox } from './components/ods-checkbox/ods-checkbox'; 2 | export { type OdsCheckboxChangeEvent, type OdsCheckboxChangeEventDetail } from './interfaces/event'; 3 | -------------------------------------------------------------------------------- /packages/ods/src/components/checkbox/src/interfaces/event.ts: -------------------------------------------------------------------------------- 1 | interface OdsCheckboxChangeEventDetail { 2 | checked: boolean; 3 | name: string; 4 | validity?: ValidityState; 5 | value: string | null; 6 | } 7 | 8 | type OdsCheckboxChangeEvent = CustomEvent; 9 | 10 | export { 11 | type OdsCheckboxChangeEvent, 12 | type OdsCheckboxChangeEventDetail, 13 | }; 14 | -------------------------------------------------------------------------------- /packages/ods/src/components/checkbox/stencil.config.ts: -------------------------------------------------------------------------------- 1 | import { getStencilConfig } from '../../config/stencil'; 2 | 3 | export const config = getStencilConfig({ 4 | args: process.argv.slice(2), 5 | componentCorePackage: '@ovhcloud/ods-component-checkbox', 6 | namespace: 'ods-checkbox', 7 | }); 8 | -------------------------------------------------------------------------------- /packages/ods/src/components/checkbox/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tsconfig.json", 3 | "include": [ 4 | "src", 5 | "tests" 6 | ] 7 | } 8 | -------------------------------------------------------------------------------- /packages/ods/src/components/clipboard/.gitignore: -------------------------------------------------------------------------------- 1 | # Local Stencil command generates external ods component build at the root of the project 2 | # Excluding them is a temporary solution to avoid pushing generated files 3 | # But the issue may cause main build (ods-component package) to fails, as it detects multiples occurences 4 | # of the same component and thus you have to delete all those generated dir manually 5 | */src/ 6 | -------------------------------------------------------------------------------- /packages/ods/src/components/clipboard/custom-elements-manifest.config.mjs: -------------------------------------------------------------------------------- 1 | import cemEnumPlugin from '../../../scripts/cem-enum-plugin.mjs'; 2 | 3 | export default { 4 | globs: ['src/**/*.+(ts|tsx)'], 5 | outdir: 'documentation', 6 | plugins: [cemEnumPlugin()], 7 | stencil: true, 8 | }; 9 | -------------------------------------------------------------------------------- /packages/ods/src/components/clipboard/src/globals.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Import here all the external ODS component that you need to run the current component 3 | * when running dev server (yarn start) or e2e tests 4 | * 5 | * ex: 6 | * import '../../text/src'; 7 | */ 8 | import '../../button/src'; 9 | import '../../icon/src'; 10 | import '../../input/src'; 11 | import '../../tooltip/src'; 12 | import '../../form-field/src'; 13 | -------------------------------------------------------------------------------- /packages/ods/src/components/clipboard/src/index.ts: -------------------------------------------------------------------------------- 1 | export { OdsClipboard } from './components/ods-clipboard/ods-clipboard'; 2 | -------------------------------------------------------------------------------- /packages/ods/src/components/clipboard/stencil.config.ts: -------------------------------------------------------------------------------- 1 | import { getStencilConfig } from '../../config/stencil'; 2 | 3 | export const config = getStencilConfig({ 4 | args: process.argv.slice(2), 5 | componentCorePackage: '@ovhcloud/ods-component-clipboard', 6 | namespace: 'ods-clipboard', 7 | }); 8 | -------------------------------------------------------------------------------- /packages/ods/src/components/clipboard/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tsconfig.json", 3 | "include": [ 4 | "src", 5 | "tests" 6 | ] 7 | } 8 | -------------------------------------------------------------------------------- /packages/ods/src/components/code/.gitignore: -------------------------------------------------------------------------------- 1 | # Local Stencil command generates external ods component build at the root of the project 2 | # Excluding them is a temporary solution to avoid pushing generated files 3 | # But the issue may cause main build (ods-component package) to fails, as it detects multiples occurences 4 | # of the same component and thus you have to delete all those generated dir manually 5 | */src/ 6 | -------------------------------------------------------------------------------- /packages/ods/src/components/code/custom-elements-manifest.config.mjs: -------------------------------------------------------------------------------- 1 | import cemEnumPlugin from '../../../scripts/cem-enum-plugin.mjs'; 2 | 3 | export default { 4 | globs: ['src/**/*.+(ts|tsx)'], 5 | outdir: 'documentation', 6 | plugins: [cemEnumPlugin()], 7 | stencil: true, 8 | }; 9 | -------------------------------------------------------------------------------- /packages/ods/src/components/code/src/globals.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Import here all the external ODS component that you need to run the current component 3 | * when running dev server (yarn start) or e2e tests 4 | * 5 | * ex: 6 | * import '../../text/src'; 7 | */ 8 | import '../../button/src'; 9 | import '../../icon/src'; 10 | import '../../tooltip/src'; 11 | -------------------------------------------------------------------------------- /packages/ods/src/components/code/src/index.ts: -------------------------------------------------------------------------------- 1 | export { OdsCode } from './components/ods-code/ods-code'; 2 | -------------------------------------------------------------------------------- /packages/ods/src/components/code/stencil.config.ts: -------------------------------------------------------------------------------- 1 | import { getStencilConfig } from '../../config/stencil'; 2 | 3 | export const config = getStencilConfig({ 4 | args: process.argv.slice(2), 5 | componentCorePackage: '@ovhcloud/ods-component-code', 6 | namespace: 'ods-code', 7 | }); 8 | -------------------------------------------------------------------------------- /packages/ods/src/components/code/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tsconfig.json", 3 | "include": [ 4 | "src", 5 | "tests" 6 | ] 7 | } 8 | -------------------------------------------------------------------------------- /packages/ods/src/components/combobox/.gitignore: -------------------------------------------------------------------------------- 1 | # Local Stencil command generates external ods component build at the root of the project 2 | # Excluding them is a temporary solution to avoid pushing generated files 3 | # But the issue may cause main build (ods-component package) to fails, as it detects multiples occurences 4 | # of the same component and thus you have to delete all those generated dir manually 5 | */src/ 6 | -------------------------------------------------------------------------------- /packages/ods/src/components/combobox/custom-elements-manifest.config.mjs: -------------------------------------------------------------------------------- 1 | import cemEnumPlugin from '../../../scripts/cem-enum-plugin.mjs'; 2 | 3 | export default { 4 | globs: ['src/**/*.+(ts|tsx)'], 5 | outdir: 'documentation', 6 | plugins: [cemEnumPlugin()], 7 | stencil: true, 8 | }; 9 | -------------------------------------------------------------------------------- /packages/ods/src/components/combobox/src/constants/combobox-strategy.ts: -------------------------------------------------------------------------------- 1 | import { ODS_OVERLAY_STRATEGIES, ODS_OVERLAY_STRATEGY, type OdsOverlayStrategy } from '../../../../utils/overlay'; 2 | 3 | export { 4 | ODS_OVERLAY_STRATEGIES as ODS_COMBOBOX_STRATEGIES, 5 | ODS_OVERLAY_STRATEGY as ODS_COMBOBOX_STRATEGY, 6 | type OdsOverlayStrategy as OdsComboboxStrategy, 7 | }; 8 | -------------------------------------------------------------------------------- /packages/ods/src/components/combobox/src/globals.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Import here all the external ODS component that you need to run the current component 3 | * when running dev server (yarn start) or e2e tests 4 | * 5 | * ex: 6 | * import '../../text/src'; 7 | */ 8 | import '../../icon/src'; 9 | import '../../input/src'; 10 | import '../../modal/src'; 11 | import '../../tag/src'; 12 | -------------------------------------------------------------------------------- /packages/ods/src/components/combobox/stencil.config.ts: -------------------------------------------------------------------------------- 1 | import { getStencilConfig } from '../../config/stencil'; 2 | 3 | export const config = getStencilConfig({ 4 | args: process.argv.slice(2), 5 | componentCorePackage: '@ovhcloud/ods-component-combobox', 6 | namespace: 'ods-combobox', 7 | }); 8 | -------------------------------------------------------------------------------- /packages/ods/src/components/combobox/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tsconfig.json", 3 | "include": [ 4 | "src", 5 | "tests" 6 | ] 7 | } 8 | -------------------------------------------------------------------------------- /packages/ods/src/components/datepicker/.gitignore: -------------------------------------------------------------------------------- 1 | # Local Stencil command generates external ods component build at the root of the project 2 | # Excluding them is a temporary solution to avoid pushing generated files 3 | # But the issue may cause main build (ods-component package) to fails, as it detects multiples occurences 4 | # of the same component and thus you have to delete all those generated dir manually 5 | */src/ 6 | -------------------------------------------------------------------------------- /packages/ods/src/components/datepicker/custom-elements-manifest.config.mjs: -------------------------------------------------------------------------------- 1 | import cemEnumPlugin from '../../../scripts/cem-enum-plugin.mjs'; 2 | 3 | export default { 4 | globs: [ 5 | 'src/**/*.+(ts|tsx)', 6 | '../../utils/locale.ts', // to be able to generate the enum list 7 | ], 8 | outdir: 'documentation', 9 | plugins: [cemEnumPlugin({ 10 | rename: { 11 | ODS_LOCALE: 'ODS_DATEPICKER_LOCALE', 12 | }, 13 | })], 14 | stencil: true, 15 | }; 16 | -------------------------------------------------------------------------------- /packages/ods/src/components/datepicker/jestStub.js: -------------------------------------------------------------------------------- 1 | class Stub { 2 | constructor() {} 3 | 4 | static locales = {}; 5 | 6 | static formatDate(date, format) { 7 | return `${date} ${format}`; 8 | } 9 | 10 | static parseDate() { 11 | 12 | } 13 | } 14 | 15 | // eslint-disable-next-line no-undef 16 | module.exports = { 17 | Datepicker: Stub, 18 | }; 19 | -------------------------------------------------------------------------------- /packages/ods/src/components/datepicker/src/constants/datepicker-day.ts: -------------------------------------------------------------------------------- 1 | enum ODS_DATEPICKER_DAY { 2 | monday = 1, 3 | tuesday = 2, 4 | wednesday = 3, 5 | thursday = 4, 6 | friday = 5, 7 | saturday = 6, 8 | sunday = 0, 9 | } 10 | 11 | type OdsDatepickerDay = `${ODS_DATEPICKER_DAY}`; 12 | 13 | const ODS_DATEPICKER_DAYS = Object.freeze(Object.values(ODS_DATEPICKER_DAY)); 14 | 15 | export { 16 | ODS_DATEPICKER_DAY, 17 | ODS_DATEPICKER_DAYS, 18 | type OdsDatepickerDay, 19 | }; 20 | -------------------------------------------------------------------------------- /packages/ods/src/components/datepicker/src/constants/datepicker-locale.ts: -------------------------------------------------------------------------------- 1 | import { ODS_LOCALE, ODS_LOCALES, type OdsLocale } from '../../../../utils/locale'; 2 | 3 | export { ODS_LOCALE as ODS_DATEPICKER_LOCALE, ODS_LOCALES as ODS_DATEPICKER_LOCALES, type OdsLocale as OdsDatepickerLocale }; 4 | -------------------------------------------------------------------------------- /packages/ods/src/components/datepicker/src/constants/datepicker-strategy.ts: -------------------------------------------------------------------------------- 1 | import { ODS_OVERLAY_STRATEGIES, ODS_OVERLAY_STRATEGY, type OdsOverlayStrategy } from '../../../../utils/overlay'; 2 | 3 | export { 4 | ODS_OVERLAY_STRATEGIES as ODS_DATEPICKER_STRATEGIES, 5 | ODS_OVERLAY_STRATEGY as ODS_DATEPICKER_STRATEGY, 6 | type OdsOverlayStrategy as OdsDatepickerStrategy, 7 | }; 8 | -------------------------------------------------------------------------------- /packages/ods/src/components/datepicker/src/globals.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Import here all the external ODS component that you need to run the current component 3 | * when running dev server (yarn start) or e2e tests 4 | * 5 | * ex: 6 | * import '../../text/src'; 7 | */ 8 | import '../../icon/src'; 9 | import '../../spinner/src'; 10 | import '../../modal/src'; 11 | -------------------------------------------------------------------------------- /packages/ods/src/components/datepicker/src/interfaces/events.ts: -------------------------------------------------------------------------------- 1 | interface OdsDatepickerChangeEventDetail { 2 | formattedValue?: string; 3 | name: string; 4 | previousValue?: Date | null; 5 | validity?: ValidityState; 6 | value?: Date | null; 7 | } 8 | 9 | type OdsDatepickerChangeEvent = CustomEvent; 10 | 11 | export { 12 | type OdsDatepickerChangeEvent, 13 | type OdsDatepickerChangeEventDetail, 14 | }; 15 | -------------------------------------------------------------------------------- /packages/ods/src/components/datepicker/stencil.config.ts: -------------------------------------------------------------------------------- 1 | import { getStencilConfig } from '../../config/stencil'; 2 | 3 | export const config = getStencilConfig({ 4 | args: process.argv.slice(2), 5 | componentCorePackage: '@ovhcloud/ods-component-datepicker', 6 | jestOption: { 7 | moduleNameMapper: { 8 | 'vanillajs-datepicker': '/jestStub.js', 9 | }, 10 | }, 11 | namespace: 'ods-datepicker', 12 | }); 13 | -------------------------------------------------------------------------------- /packages/ods/src/components/datepicker/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tsconfig.json", 3 | "include": [ 4 | "src", 5 | "tests" 6 | ] 7 | } 8 | -------------------------------------------------------------------------------- /packages/ods/src/components/divider/.gitignore: -------------------------------------------------------------------------------- 1 | # Local Stencil command generates external ods component build at the root of the project 2 | # Excluding them is a temporary solution to avoid pushing generated files 3 | # But the issue may cause main build (ods-component package) to fails, as it detects multiples occurences 4 | # of the same component and thus you have to delete all those generated dir manually 5 | */src/ 6 | -------------------------------------------------------------------------------- /packages/ods/src/components/divider/custom-elements-manifest.config.mjs: -------------------------------------------------------------------------------- 1 | import cemEnumPlugin from '../../../scripts/cem-enum-plugin.mjs'; 2 | 3 | export default { 4 | globs: ['src/**/*.+(ts|tsx)'], 5 | outdir: 'documentation', 6 | plugins: [cemEnumPlugin()], 7 | stencil: true, 8 | }; 9 | -------------------------------------------------------------------------------- /packages/ods/src/components/divider/src/constants/divider-color.ts: -------------------------------------------------------------------------------- 1 | enum ODS_DIVIDER_COLOR { 2 | dark = 'dark', 3 | light = 'light', 4 | } 5 | 6 | type OdsDividerColor = `${ODS_DIVIDER_COLOR}`; 7 | 8 | const ODS_DIVIDER_COLORS = Object.freeze(Object.values(ODS_DIVIDER_COLOR)); 9 | 10 | export { 11 | ODS_DIVIDER_COLOR, 12 | ODS_DIVIDER_COLORS, 13 | type OdsDividerColor, 14 | }; 15 | -------------------------------------------------------------------------------- /packages/ods/src/components/divider/src/globals.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Import here all the external ODS component that you need to run the current component 3 | * when running dev server (yarn start) or e2e tests 4 | * 5 | * ex: 6 | * import '../../text/src'; 7 | */ 8 | -------------------------------------------------------------------------------- /packages/ods/src/components/divider/src/index.ts: -------------------------------------------------------------------------------- 1 | export type { OdsDividerColor } from './constants/divider-color'; 2 | export type { OdsDividerSpacing } from './constants/divider-spacing'; 3 | export { ODS_DIVIDER_COLOR, ODS_DIVIDER_COLORS } from './constants/divider-color'; 4 | export { ODS_DIVIDER_SPACING, ODS_DIVIDER_SPACINGS } from './constants/divider-spacing'; 5 | export { OdsDivider } from './components/ods-divider/ods-divider'; 6 | -------------------------------------------------------------------------------- /packages/ods/src/components/divider/stencil.config.ts: -------------------------------------------------------------------------------- 1 | import { getStencilConfig } from '../../config/stencil'; 2 | 3 | export const config = getStencilConfig({ 4 | args: process.argv.slice(2), 5 | componentCorePackage: '@ovhcloud/ods-component-divider', 6 | namespace: 'ods-divider', 7 | }); 8 | -------------------------------------------------------------------------------- /packages/ods/src/components/divider/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tsconfig.json", 3 | "include": [ 4 | "src", 5 | "tests" 6 | ] 7 | } 8 | -------------------------------------------------------------------------------- /packages/ods/src/components/drawer/.gitignore: -------------------------------------------------------------------------------- 1 | # Local Stencil command generates external ods component build at the root of the project 2 | # Excluding them is a temporary solution to avoid pushing generated files 3 | # But the issue may cause main build (ods-component package) to fails, as it detects multiples occurences 4 | # of the same component and thus you have to delete all those generated dir manually 5 | */src/ 6 | -------------------------------------------------------------------------------- /packages/ods/src/components/drawer/custom-elements-manifest.config.mjs: -------------------------------------------------------------------------------- 1 | import cemEnumPlugin from '../../../scripts/cem-enum-plugin.mjs'; 2 | 3 | export default { 4 | globs: ['src/**/*.+(ts|tsx)'], 5 | outdir: 'documentation', 6 | plugins: [cemEnumPlugin()], 7 | stencil: true, 8 | }; 9 | -------------------------------------------------------------------------------- /packages/ods/src/components/drawer/src/constant/drawer-position.ts: -------------------------------------------------------------------------------- 1 | enum ODS_DRAWER_POSITION { 2 | bottom = 'bottom', 3 | left = 'left', 4 | right = 'right', 5 | top = 'top', 6 | } 7 | 8 | type OdsDrawerPosition = `${ODS_DRAWER_POSITION}`; 9 | 10 | const ODS_DRAWER_POSITIONS = Object.freeze(Object.values(ODS_DRAWER_POSITION)); 11 | 12 | export { 13 | ODS_DRAWER_POSITION, 14 | ODS_DRAWER_POSITIONS, 15 | type OdsDrawerPosition, 16 | }; 17 | -------------------------------------------------------------------------------- /packages/ods/src/components/drawer/src/globals.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Import here all the external ODS component that you need to run the current component 3 | * when running dev server (yarn start) or e2e tests 4 | * 5 | * ex: 6 | * import '../../text/src'; 7 | */ 8 | import '../../modal/src'; 9 | -------------------------------------------------------------------------------- /packages/ods/src/components/drawer/src/index.ts: -------------------------------------------------------------------------------- 1 | export { OdsDrawer } from './components/ods-drawer/ods-drawer'; 2 | export { ODS_DRAWER_POSITION, ODS_DRAWER_POSITIONS, type OdsDrawerPosition } from './constant/drawer-position'; 3 | -------------------------------------------------------------------------------- /packages/ods/src/components/drawer/stencil.config.ts: -------------------------------------------------------------------------------- 1 | import { getStencilConfig } from '../../config/stencil'; 2 | 3 | export const config = getStencilConfig({ 4 | args: process.argv.slice(2), 5 | componentCorePackage: '@ovhcloud/ods-component-drawer', 6 | namespace: 'ods-drawer', 7 | }); 8 | -------------------------------------------------------------------------------- /packages/ods/src/components/drawer/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tsconfig.json", 3 | "include": [ 4 | "src", 5 | "tests" 6 | ] 7 | } 8 | -------------------------------------------------------------------------------- /packages/ods/src/components/file-upload/.gitignore: -------------------------------------------------------------------------------- 1 | # Local Stencil command generates external ods component build at the root of the project 2 | # Excluding them is a temporary solution to avoid pushing generated files 3 | # But the issue may cause main build (ods-component package) to fails, as it detects multiples occurences 4 | # of the same component and thus you have to delete all those generated dir manually 5 | */src/ 6 | -------------------------------------------------------------------------------- /packages/ods/src/components/file-upload/custom-elements-manifest.config.mjs: -------------------------------------------------------------------------------- 1 | import cemEnumPlugin from '../../../scripts/cem-enum-plugin.mjs'; 2 | 3 | export default { 4 | globs: ['src/**/*.+(ts|tsx)'], 5 | outdir: 'documentation', 6 | plugins: [cemEnumPlugin()], 7 | stencil: true, 8 | }; 9 | -------------------------------------------------------------------------------- /packages/ods/src/components/file-upload/src/constants/file-error.ts: -------------------------------------------------------------------------------- 1 | enum ODS_FILE_REJECTION_CAUSE { 2 | maxFileReached = 'max-file-reached', 3 | sizeTooLarge = 'size-too-large', 4 | wrongFormat = 'wrong-format', 5 | } 6 | 7 | type OdsFileRejectionCause = `${ODS_FILE_REJECTION_CAUSE}`; 8 | 9 | const ODS_FILE_REJECTION_CAUSES = Object.freeze(Object.values(ODS_FILE_REJECTION_CAUSE)); 10 | 11 | export { 12 | ODS_FILE_REJECTION_CAUSE, 13 | ODS_FILE_REJECTION_CAUSES, 14 | type OdsFileRejectionCause, 15 | }; 16 | -------------------------------------------------------------------------------- /packages/ods/src/components/file-upload/src/globals.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Import here all the external ODS component that you need to run the current component 3 | * when running dev server (yarn start) or e2e tests 4 | * 5 | * ex: 6 | * import '../../text/src'; 7 | */ 8 | import '../../button/src'; 9 | import '../../divider/src'; 10 | import '../../icon/src'; 11 | import '../../progress-bar/src'; 12 | -------------------------------------------------------------------------------- /packages/ods/src/components/file-upload/src/index.ts: -------------------------------------------------------------------------------- 1 | export { OdsFileUpload } from './components/ods-file-upload/ods-file-upload'; 2 | export { ODS_FILE_REJECTION_CAUSE, ODS_FILE_REJECTION_CAUSES, type OdsFileRejectionCause } from './constants/file-error'; 3 | export { type OdsFile } from './interfaces/attributes'; 4 | export { type OdsFileCancelEvent, type OdsFileChangeEvent, type OdsFileChangeEventDetail, type OdsFileRejectedEvent, type OdsFileRejectedEventDetail } from './interfaces/events'; 5 | -------------------------------------------------------------------------------- /packages/ods/src/components/file-upload/src/interfaces/attributes.ts: -------------------------------------------------------------------------------- 1 | interface OdsFile extends File { 2 | error?: string; 3 | isUploaded?: boolean; 4 | odsId?: string; 5 | progress?: number; 6 | } 7 | 8 | export { 9 | type OdsFile, 10 | }; 11 | -------------------------------------------------------------------------------- /packages/ods/src/components/file-upload/stencil.config.ts: -------------------------------------------------------------------------------- 1 | import { getStencilConfig } from '../../config/stencil'; 2 | 3 | export const config = getStencilConfig({ 4 | args: process.argv.slice(2), 5 | componentCorePackage: '@ovhcloud/ods-component-file-upload', 6 | namespace: 'ods-file-upload', 7 | }); 8 | -------------------------------------------------------------------------------- /packages/ods/src/components/file-upload/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tsconfig.json", 3 | "include": [ 4 | "src", 5 | "tests" 6 | ] 7 | } 8 | -------------------------------------------------------------------------------- /packages/ods/src/components/form-field/.gitignore: -------------------------------------------------------------------------------- 1 | # Local Stencil command generates external ods component build at the root of the project 2 | # Excluding them is a temporary solution to avoid pushing generated files 3 | # But the issue may cause main build (ods-component package) to fails, as it detects multiples occurences 4 | # of the same component and thus you have to delete all those generated dir manually 5 | */src/ 6 | -------------------------------------------------------------------------------- /packages/ods/src/components/form-field/custom-elements-manifest.config.mjs: -------------------------------------------------------------------------------- 1 | import cemEnumPlugin from '../../../scripts/cem-enum-plugin.mjs'; 2 | 3 | export default { 4 | globs: ['src/**/*.+(ts|tsx)'], 5 | outdir: 'documentation', 6 | plugins: [cemEnumPlugin()], 7 | stencil: true, 8 | }; 9 | -------------------------------------------------------------------------------- /packages/ods/src/components/form-field/src/globals.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Import here all the external ODS component that you need to run the current component 3 | * when running dev server (yarn start) or e2e tests 4 | * 5 | * ex: 6 | * import '../../text/src'; 7 | */ 8 | import '../../text/src'; 9 | import '../../icon/src'; 10 | import '../../input/src'; 11 | import '../../textarea/src'; 12 | import '../../tooltip/src'; 13 | -------------------------------------------------------------------------------- /packages/ods/src/components/form-field/src/index.ts: -------------------------------------------------------------------------------- 1 | export { OdsFormField } from './components/ods-form-field/ods-form-field'; 2 | -------------------------------------------------------------------------------- /packages/ods/src/components/form-field/stencil.config.ts: -------------------------------------------------------------------------------- 1 | import { getStencilConfig } from '../../config/stencil'; 2 | 3 | export const config = getStencilConfig({ 4 | args: process.argv.slice(2), 5 | componentCorePackage: '@ovhcloud/ods-component-form-field', 6 | namespace: 'ods-form-field', 7 | }); 8 | -------------------------------------------------------------------------------- /packages/ods/src/components/form-field/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tsconfig.json", 3 | "include": [ 4 | "src", 5 | "tests" 6 | ] 7 | } 8 | -------------------------------------------------------------------------------- /packages/ods/src/components/icon/.gitignore: -------------------------------------------------------------------------------- 1 | # Local Stencil command generates external ods component build at the root of the project 2 | # Excluding them is a temporary solution to avoid pushing generated files 3 | # But the issue may cause main build (ods-component package) to fails, as it detects multiples occurences 4 | # of the same component and thus you have to delete all those generated dir manually 5 | */src/ 6 | -------------------------------------------------------------------------------- /packages/ods/src/components/icon/custom-elements-manifest.config.mjs: -------------------------------------------------------------------------------- 1 | import cemEnumPlugin from '../../../scripts/cem-enum-plugin.mjs'; 2 | 3 | export default { 4 | globs: ['src/**/*.+(ts|tsx)'], 5 | outdir: 'documentation', 6 | plugins: [cemEnumPlugin()], 7 | stencil: true, 8 | }; 9 | -------------------------------------------------------------------------------- /packages/ods/src/components/icon/src/globals.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Import here all the external ODS component that you need to run the current component 3 | * when running dev server (yarn start) or e2e tests 4 | * 5 | * ex: 6 | * import '../../text/src'; 7 | */ 8 | -------------------------------------------------------------------------------- /packages/ods/src/components/icon/src/index.ts: -------------------------------------------------------------------------------- 1 | export { ODS_ICON_NAME, ODS_ICON_NAMES, type OdsIconName } from './constants/icon-name'; 2 | export { OdsIcon } from './components/ods-icon/ods-icon'; 3 | -------------------------------------------------------------------------------- /packages/ods/src/components/icon/stencil.config.ts: -------------------------------------------------------------------------------- 1 | import { getStencilConfig } from '../../config/stencil'; 2 | 3 | export const config = getStencilConfig({ 4 | args: process.argv.slice(2), 5 | componentCorePackage: '@ovhcloud/ods-component-icon', 6 | namespace: 'ods-icon', 7 | }); 8 | -------------------------------------------------------------------------------- /packages/ods/src/components/icon/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tsconfig.json", 3 | "include": [ 4 | "src", 5 | "tests" 6 | ] 7 | } 8 | -------------------------------------------------------------------------------- /packages/ods/src/components/input/.gitignore: -------------------------------------------------------------------------------- 1 | # Local Stencil command generates external ods component build at the root of the project 2 | # Excluding them is a temporary solution to avoid pushing generated files 3 | # But the issue may cause main build (ods-component package) to fails, as it detects multiples occurences 4 | # of the same component and thus you have to delete all those generated dir manually 5 | */src/ 6 | -------------------------------------------------------------------------------- /packages/ods/src/components/input/custom-elements-manifest.config.mjs: -------------------------------------------------------------------------------- 1 | import cemEnumPlugin from '../../../scripts/cem-enum-plugin.mjs'; 2 | 3 | export default { 4 | globs: ['src/**/*.+(ts|tsx)'], 5 | outdir: 'documentation', 6 | plugins: [cemEnumPlugin()], 7 | stencil: true, 8 | }; 9 | -------------------------------------------------------------------------------- /packages/ods/src/components/input/src/constants/input-type.ts: -------------------------------------------------------------------------------- 1 | enum ODS_INPUT_TYPE { 2 | email = 'email', 3 | number = 'number', 4 | password = 'password', 5 | search = 'search', 6 | text = 'text', 7 | time = 'time', 8 | url = 'url', 9 | } 10 | 11 | type OdsInputType =`${ODS_INPUT_TYPE}`; 12 | 13 | const ODS_INPUT_TYPES = Object.freeze(Object.values(ODS_INPUT_TYPE)); 14 | 15 | export { 16 | ODS_INPUT_TYPE, 17 | ODS_INPUT_TYPES, 18 | type OdsInputType, 19 | }; 20 | -------------------------------------------------------------------------------- /packages/ods/src/components/input/src/globals.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Import here all the external ODS component that you need to run the current component 3 | * when running dev server (yarn start) or e2e tests 4 | * 5 | * ex: 6 | * import '../../text/src'; 7 | */ 8 | import '../../icon/src'; 9 | import '../../spinner/src'; 10 | -------------------------------------------------------------------------------- /packages/ods/src/components/input/src/index.ts: -------------------------------------------------------------------------------- 1 | export { OdsInput } from './components/ods-input/ods-input'; 2 | export { ODS_INPUT_TYPE, ODS_INPUT_TYPES, type OdsInputType } from './constants/input-type'; 3 | export { type OdsInputChangeEvent, type OdsInputChangeEventDetail } from './interfaces/events'; 4 | -------------------------------------------------------------------------------- /packages/ods/src/components/input/src/interfaces/events.ts: -------------------------------------------------------------------------------- 1 | interface OdsInputChangeEventDetail { 2 | name: string; 3 | previousValue?: string | number | null; 4 | validity?: ValidityState; 5 | value: string | number | null; 6 | } 7 | 8 | type OdsInputChangeEvent = CustomEvent; 9 | 10 | export { 11 | type OdsInputChangeEvent, 12 | type OdsInputChangeEventDetail, 13 | }; 14 | -------------------------------------------------------------------------------- /packages/ods/src/components/input/stencil.config.ts: -------------------------------------------------------------------------------- 1 | import { getStencilConfig } from '../../config/stencil'; 2 | 3 | export const config = getStencilConfig({ 4 | args: process.argv.slice(2), 5 | componentCorePackage: '@ovhcloud/ods-component-input', 6 | namespace: 'ods-input', 7 | }); 8 | -------------------------------------------------------------------------------- /packages/ods/src/components/input/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tsconfig.json", 3 | "include": [ 4 | "src", 5 | "tests" 6 | ] 7 | } 8 | -------------------------------------------------------------------------------- /packages/ods/src/components/link/.gitignore: -------------------------------------------------------------------------------- 1 | # Local Stencil command generates external ods component build at the root of the project 2 | # Excluding them is a temporary solution to avoid pushing generated files 3 | # But the issue may cause main build (ods-component package) to fails, as it detects multiples occurences 4 | # of the same component and thus you have to delete all those generated dir manually 5 | */src/ 6 | -------------------------------------------------------------------------------- /packages/ods/src/components/link/custom-elements-manifest.config.mjs: -------------------------------------------------------------------------------- 1 | import cemEnumPlugin from '../../../scripts/cem-enum-plugin.mjs'; 2 | 3 | export default { 4 | globs: ['src/**/*.+(ts|tsx)'], 5 | outdir: 'documentation', 6 | plugins: [cemEnumPlugin()], 7 | stencil: true, 8 | }; 9 | -------------------------------------------------------------------------------- /packages/ods/src/components/link/src/constant/link-color.ts: -------------------------------------------------------------------------------- 1 | enum ODS_LINK_COLOR { 2 | primary = 'primary', 3 | } 4 | 5 | type OdsLinkColor =`${ODS_LINK_COLOR}`; 6 | 7 | const ODS_LINK_COLORS = Object.freeze(Object.values(ODS_LINK_COLOR)); 8 | 9 | export { 10 | ODS_LINK_COLOR, 11 | ODS_LINK_COLORS, 12 | type OdsLinkColor, 13 | }; 14 | -------------------------------------------------------------------------------- /packages/ods/src/components/link/src/constant/link-icon-alignment.ts: -------------------------------------------------------------------------------- 1 | enum ODS_LINK_ICON_ALIGNMENT { 2 | left = 'left', 3 | right = 'right', 4 | } 5 | 6 | type OdsLinkIconAlignment =`${ODS_LINK_ICON_ALIGNMENT}`; 7 | 8 | const ODS_LINK_ICON_ALIGNMENTS = Object.freeze(Object.values(ODS_LINK_ICON_ALIGNMENT)); 9 | 10 | export { 11 | ODS_LINK_ICON_ALIGNMENT, 12 | ODS_LINK_ICON_ALIGNMENTS, 13 | type OdsLinkIconAlignment, 14 | }; 15 | -------------------------------------------------------------------------------- /packages/ods/src/components/link/src/globals.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Import here all the external ODS component that you need to run the current component 3 | * when running dev server (yarn start) or e2e tests 4 | * 5 | * ex: 6 | * import '../../text/src'; 7 | */ 8 | import '../../icon/src'; 9 | import '../../tooltip/src'; 10 | -------------------------------------------------------------------------------- /packages/ods/src/components/link/src/index.ts: -------------------------------------------------------------------------------- 1 | export { OdsLink } from './components/ods-link/ods-link'; 2 | export { ODS_LINK_COLOR, ODS_LINK_COLORS, type OdsLinkColor } from './constant/link-color'; 3 | export { ODS_LINK_ICON_ALIGNMENT, ODS_LINK_ICON_ALIGNMENTS, type OdsLinkIconAlignment } from './constant/link-icon-alignment'; 4 | -------------------------------------------------------------------------------- /packages/ods/src/components/link/stencil.config.ts: -------------------------------------------------------------------------------- 1 | import { getStencilConfig } from '../../config/stencil'; 2 | 3 | export const config = getStencilConfig({ 4 | args: process.argv.slice(2), 5 | componentCorePackage: '@ovhcloud/ods-component-link', 6 | namespace: 'ods-link', 7 | }); 8 | -------------------------------------------------------------------------------- /packages/ods/src/components/link/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tsconfig.json", 3 | "include": [ 4 | "src", 5 | "tests" 6 | ] 7 | } 8 | -------------------------------------------------------------------------------- /packages/ods/src/components/medium/.gitignore: -------------------------------------------------------------------------------- 1 | # Local Stencil command generates external ods component build at the root of the project 2 | # Excluding them is a temporary solution to avoid pushing generated files 3 | # But the issue may cause main build (ods-component package) to fails, as it detects multiples occurences 4 | # of the same component and thus you have to delete all those generated dir manually 5 | */src/ 6 | -------------------------------------------------------------------------------- /packages/ods/src/components/medium/custom-elements-manifest.config.mjs: -------------------------------------------------------------------------------- 1 | import cemEnumPlugin from '../../../scripts/cem-enum-plugin.mjs'; 2 | 3 | export default { 4 | globs: ['src/**/*.+(ts|tsx)'], 5 | outdir: 'documentation', 6 | plugins: [cemEnumPlugin()], 7 | stencil: true, 8 | }; 9 | -------------------------------------------------------------------------------- /packages/ods/src/components/medium/src/components/ods-medium/ods-medium.scss: -------------------------------------------------------------------------------- 1 | :host(.ods-medium) { 2 | display: inline-flex; 3 | } 4 | -------------------------------------------------------------------------------- /packages/ods/src/components/medium/src/globals.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Import here all the external ODS component that you need to run the current component 3 | * when running dev server (yarn start) or e2e tests 4 | * 5 | * ex: 6 | * import '../../text/src'; 7 | */ 8 | -------------------------------------------------------------------------------- /packages/ods/src/components/medium/src/index.ts: -------------------------------------------------------------------------------- 1 | export { OdsMedium } from './components/ods-medium/ods-medium'; 2 | -------------------------------------------------------------------------------- /packages/ods/src/components/medium/stencil.config.ts: -------------------------------------------------------------------------------- 1 | import { getStencilConfig } from '../../config/stencil'; 2 | 3 | export const config = getStencilConfig({ 4 | args: process.argv.slice(2), 5 | componentCorePackage: '@ovhcloud/ods-component-medium', 6 | namespace: 'ods-medium', 7 | }); 8 | -------------------------------------------------------------------------------- /packages/ods/src/components/medium/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tsconfig.json", 3 | "include": [ 4 | "src", 5 | "tests" 6 | ] 7 | } 8 | -------------------------------------------------------------------------------- /packages/ods/src/components/message/.gitignore: -------------------------------------------------------------------------------- 1 | # Local Stencil command generates external ods component build at the root of the project 2 | # Excluding them is a temporary solution to avoid pushing generated files 3 | # But the issue may cause main build (ods-component package) to fails, as it detects multiples occurences 4 | # of the same component and thus you have to delete all those generated dir manually 5 | */src/ 6 | -------------------------------------------------------------------------------- /packages/ods/src/components/message/custom-elements-manifest.config.mjs: -------------------------------------------------------------------------------- 1 | import cemEnumPlugin from '../../../scripts/cem-enum-plugin.mjs'; 2 | 3 | export default { 4 | globs: ['src/**/*.+(ts|tsx)'], 5 | outdir: 'documentation', 6 | plugins: [cemEnumPlugin()], 7 | stencil: true, 8 | }; 9 | -------------------------------------------------------------------------------- /packages/ods/src/components/message/src/constants/message-color.ts: -------------------------------------------------------------------------------- 1 | enum ODS_MESSAGE_COLOR { 2 | critical = 'critical', 3 | danger = 'danger', 4 | information = 'information', 5 | success = 'success', 6 | warning = 'warning', 7 | } 8 | 9 | type OdsMessageColor =`${ODS_MESSAGE_COLOR}`; 10 | 11 | const ODS_MESSAGE_COLORS = Object.freeze(Object.values(ODS_MESSAGE_COLOR)); 12 | 13 | export { 14 | ODS_MESSAGE_COLOR, 15 | ODS_MESSAGE_COLORS, 16 | type OdsMessageColor, 17 | }; 18 | -------------------------------------------------------------------------------- /packages/ods/src/components/message/src/constants/message-variant.ts: -------------------------------------------------------------------------------- 1 | enum ODS_MESSAGE_VARIANT { 2 | default = 'default', 3 | light = 'light', 4 | } 5 | 6 | type OdsMessageVariant =`${ODS_MESSAGE_VARIANT}`; 7 | 8 | const ODS_MESSAGE_VARIANTS = Object.freeze(Object.values(ODS_MESSAGE_VARIANT)); 9 | 10 | export { 11 | ODS_MESSAGE_VARIANT, 12 | ODS_MESSAGE_VARIANTS, 13 | type OdsMessageVariant, 14 | }; 15 | -------------------------------------------------------------------------------- /packages/ods/src/components/message/src/globals.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Import here all the external ODS component that you need to run the current component 3 | * when running dev server (yarn start) or e2e tests 4 | * 5 | * ex: 6 | * import '../../text/src'; 7 | */ 8 | import '../../icon/src'; 9 | import '../../text/src'; 10 | import '../../tooltip/src'; 11 | -------------------------------------------------------------------------------- /packages/ods/src/components/message/src/index.ts: -------------------------------------------------------------------------------- 1 | export { OdsMessage } from './components/ods-message/ods-message'; 2 | export { ODS_MESSAGE_COLOR, ODS_MESSAGE_COLORS, type OdsMessageColor } from './constants/message-color'; 3 | export { ODS_MESSAGE_VARIANT, ODS_MESSAGE_VARIANTS, type OdsMessageVariant } from './constants/message-variant'; 4 | -------------------------------------------------------------------------------- /packages/ods/src/components/message/stencil.config.ts: -------------------------------------------------------------------------------- 1 | import { getStencilConfig } from '../../config/stencil'; 2 | 3 | export const config = getStencilConfig({ 4 | args: process.argv.slice(2), 5 | componentCorePackage: '@ovhcloud/ods-component-message', 6 | namespace: 'ods-message', 7 | }); 8 | -------------------------------------------------------------------------------- /packages/ods/src/components/message/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tsconfig.json", 3 | "include": [ 4 | "src", 5 | "tests" 6 | ] 7 | } 8 | -------------------------------------------------------------------------------- /packages/ods/src/components/modal/.gitignore: -------------------------------------------------------------------------------- 1 | # Local Stencil command generates external ods component build at the root of the project 2 | # Excluding them is a temporary solution to avoid pushing generated files 3 | # But the issue may cause main build (ods-component package) to fails, as it detects multiples occurences 4 | # of the same component and thus you have to delete all those generated dir manually 5 | */src/ 6 | -------------------------------------------------------------------------------- /packages/ods/src/components/modal/custom-elements-manifest.config.mjs: -------------------------------------------------------------------------------- 1 | import cemEnumPlugin from '../../../scripts/cem-enum-plugin.mjs'; 2 | 3 | export default { 4 | globs: ['src/**/*.+(ts|tsx)'], 5 | outdir: 'documentation', 6 | plugins: [cemEnumPlugin()], 7 | stencil: true, 8 | }; 9 | -------------------------------------------------------------------------------- /packages/ods/src/components/modal/src/constants/modal-color.ts: -------------------------------------------------------------------------------- 1 | enum ODS_MODAL_COLOR { 2 | critical = 'critical', 3 | information = 'information', 4 | neutral = 'neutral', 5 | success = 'success', 6 | warning = 'warning', 7 | } 8 | 9 | type OdsModalColor =`${ODS_MODAL_COLOR}`; 10 | 11 | const ODS_MODAL_COLORS = Object.freeze(Object.values(ODS_MODAL_COLOR)); 12 | 13 | export { 14 | ODS_MODAL_COLOR, 15 | ODS_MODAL_COLORS, 16 | type OdsModalColor, 17 | }; 18 | -------------------------------------------------------------------------------- /packages/ods/src/components/modal/src/globals.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Import here all the external ODS component that you need to run the current component 3 | * when running dev server (yarn start) or e2e tests 4 | * 5 | * ex: 6 | * import '../../text/src'; 7 | */ 8 | 9 | import '../../button/src'; 10 | import '../../icon/src'; 11 | import '../../select/src'; 12 | import '../../text/src'; 13 | -------------------------------------------------------------------------------- /packages/ods/src/components/modal/src/index.ts: -------------------------------------------------------------------------------- 1 | export { OdsModal } from './components/ods-modal/ods-modal'; 2 | export { ODS_MODAL_COLOR, ODS_MODAL_COLORS, type OdsModalColor } from './constants/modal-color'; -------------------------------------------------------------------------------- /packages/ods/src/components/modal/stencil.config.ts: -------------------------------------------------------------------------------- 1 | import { getStencilConfig } from '../../config/stencil'; 2 | 3 | export const config = getStencilConfig({ 4 | args: process.argv.slice(2), 5 | componentCorePackage: '@ovhcloud/ods-component-modal', 6 | namespace: 'ods-modal', 7 | }); 8 | -------------------------------------------------------------------------------- /packages/ods/src/components/modal/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tsconfig.json", 3 | "include": [ 4 | "src", 5 | "tests" 6 | ] 7 | } 8 | -------------------------------------------------------------------------------- /packages/ods/src/components/pagination/.gitignore: -------------------------------------------------------------------------------- 1 | # Local Stencil command generates external ods component build at the root of the project 2 | # Excluding them is a temporary solution to avoid pushing generated files 3 | # But the issue may cause main build (ods-component package) to fails, as it detects multiples occurences 4 | # of the same component and thus you have to delete all those generated dir manually 5 | */src/ 6 | -------------------------------------------------------------------------------- /packages/ods/src/components/pagination/custom-elements-manifest.config.mjs: -------------------------------------------------------------------------------- 1 | import cemEnumPlugin from '../../../scripts/cem-enum-plugin.mjs'; 2 | 3 | export default { 4 | globs: ['src/**/*.+(ts|tsx)'], 5 | outdir: 'documentation', 6 | plugins: [cemEnumPlugin()], 7 | stencil: true, 8 | }; 9 | -------------------------------------------------------------------------------- /packages/ods/src/components/pagination/src/globals.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Import here all the external ODS component that you need to run the current component 3 | * when running dev server (yarn start) or e2e tests 4 | * 5 | * ex: 6 | * import '../../text/src'; 7 | */ 8 | 9 | import '../../button/src'; 10 | import '../../icon/src'; 11 | import '../../select/src'; 12 | import '../../text/src'; 13 | import '../../tooltip/src'; -------------------------------------------------------------------------------- /packages/ods/src/components/pagination/src/index.ts: -------------------------------------------------------------------------------- 1 | export { OdsPagination } from './components/ods-pagination/ods-pagination'; 2 | export { ODS_PAGINATION_PER_PAGE, ODS_PAGINATION_PER_PAGE_OPTIONS } from './constants/pagination-per-page'; 3 | export type { OdsPaginationCurrentChangeEvent, OdsPaginationChangedEventDetail, OdsPaginationEvent, OdsPaginationItemPerPageChangedEvent, OdsPaginationItemPerPageChangedEventDetail } from './interfaces/events'; 4 | -------------------------------------------------------------------------------- /packages/ods/src/components/pagination/src/interfaces/pagination-page-list.ts: -------------------------------------------------------------------------------- 1 | interface OdsPaginationPageContent { 2 | active: boolean; 3 | pageId: number; 4 | } 5 | 6 | type OdsPaginationPageList = Array; 7 | 8 | export type { 9 | OdsPaginationPageList, 10 | }; 11 | -------------------------------------------------------------------------------- /packages/ods/src/components/pagination/stencil.config.ts: -------------------------------------------------------------------------------- 1 | import { getStencilConfig } from '../../config/stencil'; 2 | 3 | export const config = getStencilConfig({ 4 | args: process.argv.slice(2), 5 | componentCorePackage: '@ovhcloud/ods-component-pagination', 6 | namespace: 'ods-pagination', 7 | }); 8 | -------------------------------------------------------------------------------- /packages/ods/src/components/pagination/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tsconfig.json", 3 | "include": [ 4 | "src", 5 | "tests" 6 | ] 7 | } 8 | -------------------------------------------------------------------------------- /packages/ods/src/components/password/.gitignore: -------------------------------------------------------------------------------- 1 | # Local Stencil command generates external ods component build at the root of the project 2 | # Excluding them is a temporary solution to avoid pushing generated files 3 | # But the issue may cause main build (ods-component package) to fails, as it detects multiples occurences 4 | # of the same component and thus you have to delete all those generated dir manually 5 | */src/ 6 | -------------------------------------------------------------------------------- /packages/ods/src/components/password/custom-elements-manifest.config.mjs: -------------------------------------------------------------------------------- 1 | import cemEnumPlugin from '../../../scripts/cem-enum-plugin.mjs'; 2 | 3 | export default { 4 | globs: ['src/**/*.+(ts|tsx)'], 5 | outdir: 'documentation', 6 | plugins: [cemEnumPlugin()], 7 | stencil: true, 8 | }; 9 | -------------------------------------------------------------------------------- /packages/ods/src/components/password/src/components/ods-password/ods-password.scss: -------------------------------------------------------------------------------- 1 | :host(.ods-password) { 2 | display: inline-block; 3 | } 4 | 5 | .ods-password { 6 | &__input { 7 | width: inherit; 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /packages/ods/src/components/password/src/globals.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Import here all the external ODS component that you need to run the current component 3 | * when running dev server (yarn start) or e2e tests 4 | * 5 | * ex: 6 | * import '../../text/src'; 7 | */ 8 | import '../../input/src'; 9 | import '../../icon/src'; 10 | import '../../spinner/src'; 11 | -------------------------------------------------------------------------------- /packages/ods/src/components/password/src/index.ts: -------------------------------------------------------------------------------- 1 | export { OdsPassword } from './components/ods-password/ods-password'; 2 | export { type OdsPasswordChangeEvent, type OdsPasswordChangeEventDetail } from './interfaces/events'; 3 | -------------------------------------------------------------------------------- /packages/ods/src/components/password/src/interfaces/events.ts: -------------------------------------------------------------------------------- 1 | import type { OdsInputChangeEvent, OdsInputChangeEventDetail } from '../../../input/src'; 2 | 3 | export { 4 | type OdsInputChangeEvent as OdsPasswordChangeEvent, 5 | type OdsInputChangeEventDetail as OdsPasswordChangeEventDetail, 6 | }; 7 | -------------------------------------------------------------------------------- /packages/ods/src/components/password/stencil.config.ts: -------------------------------------------------------------------------------- 1 | import { getStencilConfig } from '../../config/stencil'; 2 | 3 | export const config = getStencilConfig({ 4 | args: process.argv.slice(2), 5 | componentCorePackage: '@ovhcloud/ods-component-password', 6 | namespace: 'ods-password', 7 | }); 8 | -------------------------------------------------------------------------------- /packages/ods/src/components/password/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tsconfig.json", 3 | "include": [ 4 | "src", 5 | "tests" 6 | ] 7 | } 8 | -------------------------------------------------------------------------------- /packages/ods/src/components/phone-number/.gitignore: -------------------------------------------------------------------------------- 1 | # Local Stencil command generates external ods component build at the root of the project 2 | # Excluding them is a temporary solution to avoid pushing generated files 3 | # But the issue may cause main build (ods-component package) to fails, as it detects multiples occurences 4 | # of the same component and thus you have to delete all those generated dir manually 5 | */src/ 6 | -------------------------------------------------------------------------------- /packages/ods/src/components/phone-number/README.md: -------------------------------------------------------------------------------- 1 | # How-to generate flag spritesheet 2 | 3 | For now, we use https://github.com/flarik/css-sprite-flags. 4 | 5 | You will need to add those last 7 that are missing in the repo css: 6 | 7 | ```scss 8 | 'wf': -0px -360px, 9 | 'ws': -24px -360px, 10 | 'ye': -48px -360px, 11 | 'yt': -72px -360px, 12 | 'za': -96px -360px, 13 | 'zm': -120px -360px, 14 | 'zw': -144px -360px, 15 | ``` 16 | 17 | If we need to update the flag list to a custom one, please describe precisely 18 | here the workflow used to generate such files. 19 | -------------------------------------------------------------------------------- /packages/ods/src/components/phone-number/custom-elements-manifest.config.mjs: -------------------------------------------------------------------------------- 1 | import cemEnumPlugin from '../../../scripts/cem-enum-plugin.mjs'; 2 | 3 | export default { 4 | globs: [ 5 | 'src/**/*.+(ts|tsx)', 6 | '../../utils/locale.ts', // to be able to generate the enum list 7 | ], 8 | outdir: 'documentation', 9 | plugins: [cemEnumPlugin({ 10 | rename: { 11 | ODS_LOCALE: 'ODS_PHONE_NUMBER_LOCALE', 12 | }, 13 | })], 14 | stencil: true, 15 | }; 16 | -------------------------------------------------------------------------------- /packages/ods/src/components/phone-number/src/assets/sprite-flags-24x24.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ovh/design-system/2499ec45e5c43cbd03e88bcb348a801fb7960d7a/packages/ods/src/components/phone-number/src/assets/sprite-flags-24x24.png -------------------------------------------------------------------------------- /packages/ods/src/components/phone-number/src/constants/phone-number-country-preset.ts: -------------------------------------------------------------------------------- 1 | enum ODS_PHONE_NUMBER_COUNTRY_PRESET { 2 | all = 'all', 3 | } 4 | 5 | type OdsPhoneNumberCountryPreset = `${ODS_PHONE_NUMBER_COUNTRY_PRESET}`; 6 | 7 | const ODS_PHONE_NUMBER_COUNTRY_PRESETS = Object.freeze(Object.values(ODS_PHONE_NUMBER_COUNTRY_PRESET)); 8 | 9 | export { 10 | ODS_PHONE_NUMBER_COUNTRY_PRESET, 11 | ODS_PHONE_NUMBER_COUNTRY_PRESETS, 12 | type OdsPhoneNumberCountryPreset, 13 | }; 14 | -------------------------------------------------------------------------------- /packages/ods/src/components/phone-number/src/constants/phone-number-locale.ts: -------------------------------------------------------------------------------- 1 | import { ODS_LOCALE, ODS_LOCALES, type OdsLocale } from '../../../../utils/locale'; 2 | 3 | export { ODS_LOCALE as ODS_PHONE_NUMBER_LOCALE, ODS_LOCALES as ODS_PHONE_NUMBER_LOCALES, type OdsLocale as OdsPhoneNumberLocale }; 4 | -------------------------------------------------------------------------------- /packages/ods/src/components/phone-number/src/globals.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Import here all the external ODS component that you need to run the current component 3 | * when running dev server (yarn start) or e2e tests 4 | * 5 | * ex: 6 | * import '../../text/src'; 7 | */ 8 | import '../../input/src'; 9 | import '../../select/src'; 10 | -------------------------------------------------------------------------------- /packages/ods/src/components/phone-number/stencil.config.ts: -------------------------------------------------------------------------------- 1 | import { getStencilConfig } from '../../config/stencil'; 2 | 3 | export const config = getStencilConfig({ 4 | args: process.argv.slice(2), 5 | componentCorePackage: '@ovhcloud/ods-component-phone-number', 6 | namespace: 'ods-phone-number', 7 | }); 8 | -------------------------------------------------------------------------------- /packages/ods/src/components/phone-number/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tsconfig.json", 3 | "include": [ 4 | "src", 5 | "tests" 6 | ] 7 | } 8 | -------------------------------------------------------------------------------- /packages/ods/src/components/popover/.gitignore: -------------------------------------------------------------------------------- 1 | # Local Stencil command generates external ods component build at the root of the project 2 | # Excluding them is a temporary solution to avoid pushing generated files 3 | # But the issue may cause main build (ods-component package) to fails, as it detects multiples occurences 4 | # of the same component and thus you have to delete all those generated dir manually 5 | */src/ 6 | -------------------------------------------------------------------------------- /packages/ods/src/components/popover/custom-elements-manifest.config.mjs: -------------------------------------------------------------------------------- 1 | import cemEnumPlugin from '../../../scripts/cem-enum-plugin.mjs'; 2 | 3 | export default { 4 | globs: [ 5 | 'src/**/*.+(ts|tsx)', 6 | '../../utils/overlay.ts', // to be able to generate the enum list 7 | ], 8 | outdir: 'documentation', 9 | plugins: [cemEnumPlugin({ 10 | rename: { 11 | ODS_OVERLAY_POSITION: 'ODS_POPOVER_POSITION', 12 | ODS_OVERLAY_STRATEGY: 'ODS_POPOVER_STRATEGY', 13 | }, 14 | })], 15 | stencil: true, 16 | }; 17 | -------------------------------------------------------------------------------- /packages/ods/src/components/popover/src/components/ods-popover/ods-popover.scss: -------------------------------------------------------------------------------- 1 | @use '../../../../../style/overlay'; 2 | 3 | :host(.ods-popover) { 4 | @include overlay.ods-tooltip(); 5 | 6 | display: none; 7 | top: 0; 8 | left: 0; 9 | } 10 | 11 | :host(.ods-popover--absolute) { 12 | position: absolute; 13 | } 14 | 15 | :host(.ods-popover--fixed) { 16 | position: fixed; 17 | } 18 | 19 | .ods-popover { 20 | &__arrow { 21 | @include overlay.ods-tooltip-arrow(); 22 | 23 | &--hidden { 24 | display: none; 25 | } 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /packages/ods/src/components/popover/src/constants/popover-position.ts: -------------------------------------------------------------------------------- 1 | import { ODS_OVERLAY_POSITION, ODS_OVERLAY_POSITIONS, type OdsOverlayPosition } from '../../../../utils/overlay'; 2 | 3 | export { 4 | ODS_OVERLAY_POSITION as ODS_POPOVER_POSITION, 5 | ODS_OVERLAY_POSITIONS as ODS_POPOVER_POSITIONS, 6 | type OdsOverlayPosition as OdsPopoverPosition, 7 | }; 8 | -------------------------------------------------------------------------------- /packages/ods/src/components/popover/src/constants/popover-strategy.ts: -------------------------------------------------------------------------------- 1 | import { ODS_OVERLAY_STRATEGIES, ODS_OVERLAY_STRATEGY, type OdsOverlayStrategy } from '../../../../utils/overlay'; 2 | 3 | export { 4 | ODS_OVERLAY_STRATEGIES as ODS_POPOVER_STRATEGIES, 5 | ODS_OVERLAY_STRATEGY as ODS_POPOVER_STRATEGY, 6 | type OdsOverlayStrategy as OdsPopoverStrategy, 7 | }; 8 | -------------------------------------------------------------------------------- /packages/ods/src/components/popover/src/globals.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Import here all the external ODS component that you need to run the current component 3 | * when running dev server (yarn start) or e2e tests 4 | * 5 | * ex: 6 | * import '../../text/src'; 7 | */ 8 | import '../../button/src'; 9 | import '../../input/src'; 10 | import '../../modal/src'; 11 | -------------------------------------------------------------------------------- /packages/ods/src/components/popover/src/index.ts: -------------------------------------------------------------------------------- 1 | export { OdsPopover } from './components/ods-popover/ods-popover'; 2 | export { type OdsPopoverPosition, ODS_POPOVER_POSITION, ODS_POPOVER_POSITIONS } from './constants/popover-position'; 3 | export { type OdsPopoverStrategy, ODS_POPOVER_STRATEGIES, ODS_POPOVER_STRATEGY } from './constants/popover-strategy'; 4 | -------------------------------------------------------------------------------- /packages/ods/src/components/popover/stencil.config.ts: -------------------------------------------------------------------------------- 1 | import { getStencilConfig } from '../../config/stencil'; 2 | 3 | export const config = getStencilConfig({ 4 | args: process.argv.slice(2), 5 | componentCorePackage: '@ovhcloud/ods-component-popover', 6 | namespace: 'ods-popover', 7 | }); 8 | -------------------------------------------------------------------------------- /packages/ods/src/components/popover/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tsconfig.json", 3 | "include": [ 4 | "src", 5 | "tests" 6 | ] 7 | } 8 | -------------------------------------------------------------------------------- /packages/ods/src/components/progress-bar/.gitignore: -------------------------------------------------------------------------------- 1 | # Local Stencil command generates external ods component build at the root of the project 2 | # Excluding them is a temporary solution to avoid pushing generated files 3 | # But the issue may cause main build (ods-component package) to fails, as it detects multiples occurences 4 | # of the same component and thus you have to delete all those generated dir manually 5 | */src/ 6 | -------------------------------------------------------------------------------- /packages/ods/src/components/progress-bar/custom-elements-manifest.config.mjs: -------------------------------------------------------------------------------- 1 | import cemEnumPlugin from '../../../scripts/cem-enum-plugin.mjs'; 2 | 3 | export default { 4 | globs: ['src/**/*.+(ts|tsx)'], 5 | outdir: 'documentation', 6 | plugins: [cemEnumPlugin()], 7 | stencil: true, 8 | }; 9 | -------------------------------------------------------------------------------- /packages/ods/src/components/progress-bar/src/components/ods-progress-bar/ods-progress-bar.scss: -------------------------------------------------------------------------------- 1 | @use '../../../../../style/progress-bar'; 2 | 3 | :host(.ods-progress-bar) { 4 | display: inline-flex; 5 | } 6 | 7 | .ods-progress-bar { 8 | &__progress { 9 | @include progress-bar.ods-progress-bar(); 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /packages/ods/src/components/progress-bar/src/globals.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Import here all the external ODS component that you need to run the current component 3 | * when running dev server (yarn start) or e2e tests 4 | * 5 | * ex: 6 | * import '../../text/src'; 7 | */ 8 | -------------------------------------------------------------------------------- /packages/ods/src/components/progress-bar/src/index.ts: -------------------------------------------------------------------------------- 1 | export { OdsProgressBar } from './components/ods-progress-bar/ods-progress-bar'; 2 | -------------------------------------------------------------------------------- /packages/ods/src/components/progress-bar/stencil.config.ts: -------------------------------------------------------------------------------- 1 | import { getStencilConfig } from '../../config/stencil'; 2 | 3 | export const config = getStencilConfig({ 4 | args: process.argv.slice(2), 5 | componentCorePackage: '@ovhcloud/ods-component-progress-bar', 6 | namespace: 'ods-progress-bar', 7 | }); 8 | -------------------------------------------------------------------------------- /packages/ods/src/components/progress-bar/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tsconfig.json", 3 | "include": [ 4 | "src", 5 | "tests" 6 | ] 7 | } 8 | -------------------------------------------------------------------------------- /packages/ods/src/components/quantity/.gitignore: -------------------------------------------------------------------------------- 1 | # Local Stencil command generates external ods component build at the root of the project 2 | # Excluding them is a temporary solution to avoid pushing generated files 3 | # But the issue may cause main build (ods-component package) to fails, as it detects multiples occurences 4 | # of the same component and thus you have to delete all those generated dir manually 5 | */src/ 6 | -------------------------------------------------------------------------------- /packages/ods/src/components/quantity/custom-elements-manifest.config.mjs: -------------------------------------------------------------------------------- 1 | import cemEnumPlugin from '../../../scripts/cem-enum-plugin.mjs'; 2 | 3 | export default { 4 | globs: ['src/**/*.+(ts|tsx)'], 5 | outdir: 'documentation', 6 | plugins: [cemEnumPlugin()], 7 | stencil: true, 8 | }; 9 | -------------------------------------------------------------------------------- /packages/ods/src/components/quantity/src/globals.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Import here all the external ODS component that you need to run the current component 3 | * when running dev server (yarn start) or e2e tests 4 | * 5 | * ex: 6 | * import '../../text/src'; 7 | */ 8 | import '../../button/src'; 9 | import '../../input/src'; 10 | -------------------------------------------------------------------------------- /packages/ods/src/components/quantity/src/index.ts: -------------------------------------------------------------------------------- 1 | export { OdsQuantity } from './components/ods-quantity/ods-quantity'; 2 | export { type OdsQuantityChangeEvent, type OdsQuantityChangeEventDetail } from './interfaces/events'; 3 | -------------------------------------------------------------------------------- /packages/ods/src/components/quantity/src/interfaces/events.ts: -------------------------------------------------------------------------------- 1 | interface OdsQuantityChangeEventDetail { 2 | name: string; 3 | previousValue?: number | null; 4 | validity?: ValidityState; 5 | value: number | null; 6 | } 7 | 8 | type OdsQuantityChangeEvent = CustomEvent; 9 | 10 | export { 11 | type OdsQuantityChangeEvent, 12 | type OdsQuantityChangeEventDetail, 13 | }; 14 | -------------------------------------------------------------------------------- /packages/ods/src/components/quantity/stencil.config.ts: -------------------------------------------------------------------------------- 1 | import { getStencilConfig } from '../../config/stencil'; 2 | 3 | export const config = getStencilConfig({ 4 | args: process.argv.slice(2), 5 | componentCorePackage: '@ovhcloud/ods-component-quantity', 6 | namespace: 'ods-quantity', 7 | }); 8 | -------------------------------------------------------------------------------- /packages/ods/src/components/quantity/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tsconfig.json", 3 | "include": [ 4 | "src", 5 | "tests" 6 | ] 7 | } 8 | -------------------------------------------------------------------------------- /packages/ods/src/components/radio/.gitignore: -------------------------------------------------------------------------------- 1 | # Local Stencil command generates external ods component build at the root of the project 2 | # Excluding them is a temporary solution to avoid pushing generated files 3 | # But the issue may cause main build (ods-component package) to fails, as it detects multiples occurences 4 | # of the same component and thus you have to delete all those generated dir manually 5 | */src/ 6 | -------------------------------------------------------------------------------- /packages/ods/src/components/radio/custom-elements-manifest.config.mjs: -------------------------------------------------------------------------------- 1 | import cemEnumPlugin from '../../../scripts/cem-enum-plugin.mjs'; 2 | 3 | export default { 4 | globs: ['src/**/*.+(ts|tsx)'], 5 | outdir: 'documentation', 6 | plugins: [cemEnumPlugin()], 7 | stencil: true, 8 | }; 9 | -------------------------------------------------------------------------------- /packages/ods/src/components/radio/src/components/ods-radio/ods-radio.scss: -------------------------------------------------------------------------------- 1 | @use '../../../../../style/radio'; 2 | 3 | .ods-radio { 4 | display: inline-flex; 5 | width: inherit; 6 | height: inherit; 7 | 8 | &__radio { 9 | @include radio.ods-radio(); 10 | 11 | &--error { 12 | border-color: var(--ods-color-form-element-border-critical); 13 | } 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /packages/ods/src/components/radio/src/globals.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Import here all the external ODS component that you need to run the current component 3 | * when running dev server (yarn start) or e2e tests 4 | * 5 | * ex: 6 | * import '../../text/src'; 7 | */ 8 | -------------------------------------------------------------------------------- /packages/ods/src/components/radio/src/index.ts: -------------------------------------------------------------------------------- 1 | export { OdsRadio } from './components/ods-radio/ods-radio'; 2 | export { type OdsRadioChangeEvent, type OdsRadioChangeEventDetail } from './interfaces/events'; 3 | -------------------------------------------------------------------------------- /packages/ods/src/components/radio/src/interfaces/events.ts: -------------------------------------------------------------------------------- 1 | interface OdsRadioChangeEventDetail { 2 | checked: boolean; 3 | name: string; 4 | validity?: ValidityState; 5 | value: string | null; 6 | } 7 | 8 | type OdsRadioChangeEvent = CustomEvent; 9 | 10 | export { 11 | type OdsRadioChangeEvent, 12 | type OdsRadioChangeEventDetail, 13 | }; 14 | -------------------------------------------------------------------------------- /packages/ods/src/components/radio/stencil.config.ts: -------------------------------------------------------------------------------- 1 | import { getStencilConfig } from '../../config/stencil'; 2 | 3 | export const config = getStencilConfig({ 4 | args: process.argv.slice(2), 5 | componentCorePackage: '@ovhcloud/ods-component-radio', 6 | namespace: 'ods-radio', 7 | }); 8 | -------------------------------------------------------------------------------- /packages/ods/src/components/radio/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tsconfig.json", 3 | "include": [ 4 | "src", 5 | "tests" 6 | ] 7 | } 8 | -------------------------------------------------------------------------------- /packages/ods/src/components/range/.gitignore: -------------------------------------------------------------------------------- 1 | # Local Stencil command generates external ods component build at the root of the project 2 | # Excluding them is a temporary solution to avoid pushing generated files 3 | # But the issue may cause main build (ods-component package) to fails, as it detects multiples occurences 4 | # of the same component and thus you have to delete all those generated dir manually 5 | */src/ 6 | -------------------------------------------------------------------------------- /packages/ods/src/components/range/custom-elements-manifest.config.mjs: -------------------------------------------------------------------------------- 1 | import cemEnumPlugin from '../../../scripts/cem-enum-plugin.mjs'; 2 | 3 | export default { 4 | globs: ['src/**/*.+(ts|tsx)'], 5 | outdir: 'documentation', 6 | plugins: [cemEnumPlugin()], 7 | stencil: true, 8 | }; 9 | -------------------------------------------------------------------------------- /packages/ods/src/components/range/src/globals.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Import here all the external ODS component that you need to run the current component 3 | * when running dev server (yarn start) or e2e tests 4 | * 5 | * ex: 6 | * import '../../text/src'; 7 | */ 8 | import '../../tooltip/src'; 9 | -------------------------------------------------------------------------------- /packages/ods/src/components/range/src/index.ts: -------------------------------------------------------------------------------- 1 | export { OdsRange } from './components/ods-range/ods-range'; 2 | export { type OdsRangeChangeEventDetail, type OdsRangeChangeEvent } from './interfaces/event'; 3 | -------------------------------------------------------------------------------- /packages/ods/src/components/range/src/interfaces/event.ts: -------------------------------------------------------------------------------- 1 | interface OdsRangeChangeEventDetail { 2 | name: string; 3 | validity?: ValidityState; 4 | value: number | [number, number] | [null, null] | null; 5 | } 6 | 7 | type OdsRangeChangeEvent = CustomEvent; 8 | 9 | export { 10 | type OdsRangeChangeEvent, 11 | type OdsRangeChangeEventDetail, 12 | }; 13 | -------------------------------------------------------------------------------- /packages/ods/src/components/range/stencil.config.ts: -------------------------------------------------------------------------------- 1 | import { getStencilConfig } from '../../config/stencil'; 2 | 3 | export const config = getStencilConfig({ 4 | args: process.argv.slice(2), 5 | componentCorePackage: '@ovhcloud/ods-component-range', 6 | namespace: 'ods-range', 7 | }); 8 | -------------------------------------------------------------------------------- /packages/ods/src/components/range/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tsconfig.json", 3 | "include": [ 4 | "src", 5 | "tests" 6 | ] 7 | } 8 | -------------------------------------------------------------------------------- /packages/ods/src/components/select/.gitignore: -------------------------------------------------------------------------------- 1 | # Local Stencil command generates external ods component build at the root of the project 2 | # Excluding them is a temporary solution to avoid pushing generated files 3 | # But the issue may cause main build (ods-component package) to fails, as it detects multiples occurences 4 | # of the same component and thus you have to delete all those generated dir manually 5 | */src/ 6 | -------------------------------------------------------------------------------- /packages/ods/src/components/select/custom-elements-manifest.config.mjs: -------------------------------------------------------------------------------- 1 | import cemEnumPlugin from '../../../scripts/cem-enum-plugin.mjs'; 2 | 3 | export default { 4 | globs: ['src/**/*.+(ts|tsx)'], 5 | outdir: 'documentation', 6 | plugins: [cemEnumPlugin()], 7 | stencil: true, 8 | }; 9 | -------------------------------------------------------------------------------- /packages/ods/src/components/select/src/constants/select-strategy.ts: -------------------------------------------------------------------------------- 1 | import { ODS_OVERLAY_STRATEGIES, ODS_OVERLAY_STRATEGY, type OdsOverlayStrategy } from '../../../../utils/overlay'; 2 | 3 | export { 4 | ODS_OVERLAY_STRATEGIES as ODS_SELECT_STRATEGIES, 5 | ODS_OVERLAY_STRATEGY as ODS_SELECT_STRATEGY, 6 | type OdsOverlayStrategy as OdsSelectStrategy, 7 | }; 8 | -------------------------------------------------------------------------------- /packages/ods/src/components/select/src/globals.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Import here all the external ODS component that you need to run the current component 3 | * when running dev server (yarn start) or e2e tests 4 | * 5 | * ex: 6 | * import '../../text/src'; 7 | */ 8 | import '../../icon/src'; 9 | import '../../modal/src'; 10 | -------------------------------------------------------------------------------- /packages/ods/src/components/select/src/index.ts: -------------------------------------------------------------------------------- 1 | export { OdsSelect } from './components/ods-select/ods-select'; 2 | export { ODS_SELECT_STRATEGIES, ODS_SELECT_STRATEGY, type OdsSelectStrategy } from './constants/select-strategy'; 3 | export { type OdsSelectChangeEvent, type OdsSelectChangeEventDetail } from './interfaces/events'; 4 | export { type OdsSelectCustomRenderer, type OdsSelectCustomRendererData } from './interfaces/options'; 5 | -------------------------------------------------------------------------------- /packages/ods/src/components/select/src/interfaces/events.ts: -------------------------------------------------------------------------------- 1 | interface OdsSelectChangeEventDetail { 2 | name: string; 3 | previousValue?: string | null; 4 | validity?: ValidityState; 5 | value: string | null; 6 | } 7 | 8 | type OdsSelectChangeEvent = CustomEvent; 9 | 10 | export { 11 | type OdsSelectChangeEvent, 12 | type OdsSelectChangeEventDetail, 13 | }; 14 | -------------------------------------------------------------------------------- /packages/ods/src/components/select/src/interfaces/options.ts: -------------------------------------------------------------------------------- 1 | type OdsSelectCustomRendererData = { 2 | text: string, 3 | value: string, 4 | [key: string]: string, 5 | } 6 | 7 | type OdsSelectCustomRenderer = { 8 | item?: (data: OdsSelectCustomRendererData) => string, 9 | option?: (data: OdsSelectCustomRendererData) => string, 10 | }; 11 | 12 | export { 13 | type OdsSelectCustomRenderer, 14 | type OdsSelectCustomRendererData, 15 | }; 16 | -------------------------------------------------------------------------------- /packages/ods/src/components/select/stencil.config.ts: -------------------------------------------------------------------------------- 1 | import { getStencilConfig } from '../../config/stencil'; 2 | 3 | export const config = getStencilConfig({ 4 | args: process.argv.slice(2), 5 | componentCorePackage: '@ovhcloud/ods-component-select', 6 | jestOption: { 7 | setupFiles: ['/tests/setup.ts'], 8 | }, 9 | namespace: 'ods-select' 10 | }); 11 | -------------------------------------------------------------------------------- /packages/ods/src/components/select/tests/setup.ts: -------------------------------------------------------------------------------- 1 | global.MutationObserver = jest 2 | .fn() 3 | .mockImplementation(() => ({ 4 | disconnect: jest.fn(), 5 | observe: jest.fn(), 6 | takeRecords: jest.fn(), 7 | })); 8 | -------------------------------------------------------------------------------- /packages/ods/src/components/select/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tsconfig.json", 3 | "include": [ 4 | "src", 5 | "tests" 6 | ] 7 | } 8 | -------------------------------------------------------------------------------- /packages/ods/src/components/skeleton/.gitignore: -------------------------------------------------------------------------------- 1 | # Local Stencil command generates external ods component build at the root of the project 2 | # Excluding them is a temporary solution to avoid pushing generated files 3 | # But the issue may cause main build (ods-component package) to fails, as it detects multiples occurences 4 | # of the same component and thus you have to delete all those generated dir manually 5 | */src/ 6 | -------------------------------------------------------------------------------- /packages/ods/src/components/skeleton/custom-elements-manifest.config.mjs: -------------------------------------------------------------------------------- 1 | import cemEnumPlugin from '../../../scripts/cem-enum-plugin.mjs'; 2 | 3 | export default { 4 | globs: ['src/**/*.+(ts|tsx)'], 5 | outdir: 'documentation', 6 | plugins: [cemEnumPlugin()], 7 | stencil: true, 8 | }; 9 | -------------------------------------------------------------------------------- /packages/ods/src/components/skeleton/src/components/ods-skeleton/ods-skeleton.scss: -------------------------------------------------------------------------------- 1 | @use '../../../../../style/skeleton'; 2 | 3 | .ods-skeleton { 4 | &__loader { 5 | @include skeleton.ods-skeleton(); 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /packages/ods/src/components/skeleton/src/components/ods-skeleton/ods-skeleton.tsx: -------------------------------------------------------------------------------- 1 | import { Component, type FunctionalComponent, Host, h } from '@stencil/core'; 2 | 3 | @Component({ 4 | shadow: true, 5 | styleUrl: 'ods-skeleton.scss', 6 | tag: 'ods-skeleton', 7 | }) 8 | export class OdsSkeleton { 9 | render(): FunctionalComponent { 10 | return ( 11 | 12 |
13 |
14 | 15 | ); 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /packages/ods/src/components/skeleton/src/globals.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Import here all the external ODS component that you need to run the current component 3 | * when running dev server (yarn start) or e2e tests 4 | * 5 | * ex: 6 | * import '../../text/src'; 7 | */ 8 | -------------------------------------------------------------------------------- /packages/ods/src/components/skeleton/src/index.ts: -------------------------------------------------------------------------------- 1 | export { OdsSkeleton } from './components/ods-skeleton/ods-skeleton'; 2 | -------------------------------------------------------------------------------- /packages/ods/src/components/skeleton/stencil.config.ts: -------------------------------------------------------------------------------- 1 | import { getStencilConfig } from '../../config/stencil'; 2 | 3 | export const config = getStencilConfig({ 4 | args: process.argv.slice(2), 5 | componentCorePackage: '@ovhcloud/ods-component-skeleton', 6 | namespace: 'ods-skeleton', 7 | }); 8 | -------------------------------------------------------------------------------- /packages/ods/src/components/skeleton/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tsconfig.json", 3 | "include": [ 4 | "src", 5 | "tests" 6 | ] 7 | } 8 | -------------------------------------------------------------------------------- /packages/ods/src/components/spinner/.gitignore: -------------------------------------------------------------------------------- 1 | # Local Stencil command generates external ods component build at the root of the project 2 | # Excluding them is a temporary solution to avoid pushing generated files 3 | # But the issue may cause main build (ods-component package) to fails, as it detects multiples occurences 4 | # of the same component and thus you have to delete all those generated dir manually 5 | */src/ 6 | -------------------------------------------------------------------------------- /packages/ods/src/components/spinner/custom-elements-manifest.config.mjs: -------------------------------------------------------------------------------- 1 | import cemEnumPlugin from '../../../scripts/cem-enum-plugin.mjs'; 2 | 3 | export default { 4 | globs: ['src/**/*.+(ts|tsx)'], 5 | outdir: 'documentation', 6 | plugins: [cemEnumPlugin()], 7 | stencil: true, 8 | }; 9 | -------------------------------------------------------------------------------- /packages/ods/src/components/spinner/src/constants/spinner-color.ts: -------------------------------------------------------------------------------- 1 | enum ODS_SPINNER_COLOR { 2 | neutral = 'neutral', 3 | primary = 'primary', 4 | white = 'white', 5 | } 6 | 7 | type OdsSpinnerColor =`${ODS_SPINNER_COLOR}`; 8 | 9 | const ODS_SPINNER_COLORS = Object.freeze(Object.values(ODS_SPINNER_COLOR)); 10 | 11 | export type { 12 | OdsSpinnerColor, 13 | }; 14 | export { 15 | ODS_SPINNER_COLOR, 16 | ODS_SPINNER_COLORS, 17 | }; 18 | -------------------------------------------------------------------------------- /packages/ods/src/components/spinner/src/constants/spinner-size.ts: -------------------------------------------------------------------------------- 1 | enum ODS_SPINNER_SIZE { 2 | xs = 'xs', 3 | sm = 'sm', 4 | md = 'md', 5 | lg = 'lg', 6 | } 7 | 8 | type OdsSpinnerSize =`${ODS_SPINNER_SIZE}`; 9 | 10 | const ODS_SPINNER_SIZES = Object.freeze(Object.values(ODS_SPINNER_SIZE)); 11 | 12 | export type { 13 | OdsSpinnerSize, 14 | }; 15 | export { 16 | ODS_SPINNER_SIZE, 17 | ODS_SPINNER_SIZES, 18 | }; 19 | 20 | -------------------------------------------------------------------------------- /packages/ods/src/components/spinner/src/globals.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Import here all the external ODS component that you need to run the current component 3 | * when running dev server (yarn start) or e2e tests 4 | * 5 | * ex: 6 | * import '../../text/src'; 7 | */ 8 | -------------------------------------------------------------------------------- /packages/ods/src/components/spinner/src/index.ts: -------------------------------------------------------------------------------- 1 | export type { OdsSpinnerColor } from './constants/spinner-color'; 2 | export type { OdsSpinnerSize } from './constants/spinner-size'; 3 | export { ODS_SPINNER_COLOR, ODS_SPINNER_COLORS } from './constants/spinner-color'; 4 | export { ODS_SPINNER_SIZE, ODS_SPINNER_SIZES } from './constants/spinner-size'; 5 | export { OdsSpinner } from './components/ods-spinner/ods-spinner'; 6 | -------------------------------------------------------------------------------- /packages/ods/src/components/spinner/stencil.config.ts: -------------------------------------------------------------------------------- 1 | import { getStencilConfig } from '../../config/stencil'; 2 | 3 | export const config = getStencilConfig({ 4 | args: process.argv.slice(2), 5 | componentCorePackage: '@ovhcloud/ods-component-spinner', 6 | namespace: 'ods-spinner', 7 | }); 8 | -------------------------------------------------------------------------------- /packages/ods/src/components/spinner/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tsconfig.json", 3 | "include": [ 4 | "src", 5 | "tests" 6 | ] 7 | } 8 | -------------------------------------------------------------------------------- /packages/ods/src/components/switch/.gitignore: -------------------------------------------------------------------------------- 1 | # Local Stencil command generates external ods component build at the root of the project 2 | # Excluding them is a temporary solution to avoid pushing generated files 3 | # But the issue may cause main build (ods-component package) to fails, as it detects multiples occurences 4 | # of the same component and thus you have to delete all those generated dir manually 5 | */src/ 6 | -------------------------------------------------------------------------------- /packages/ods/src/components/switch/custom-elements-manifest.config.mjs: -------------------------------------------------------------------------------- 1 | import cemEnumPlugin from '../../../scripts/cem-enum-plugin.mjs'; 2 | 3 | export default { 4 | globs: ['src/**/*.+(ts|tsx)'], 5 | outdir: 'documentation', 6 | plugins: [cemEnumPlugin()], 7 | stencil: true, 8 | }; 9 | -------------------------------------------------------------------------------- /packages/ods/src/components/switch/src/constant/switch-size.ts: -------------------------------------------------------------------------------- 1 | enum ODS_SWITCH_SIZE { 2 | md = 'md', 3 | sm = 'sm', 4 | } 5 | 6 | type OdsSwitchSize = `${ODS_SWITCH_SIZE}`; 7 | 8 | const ODS_SWITCH_SIZES = Object.freeze(Object.values(ODS_SWITCH_SIZE)); 9 | 10 | export { 11 | ODS_SWITCH_SIZE, 12 | ODS_SWITCH_SIZES, 13 | type OdsSwitchSize, 14 | }; 15 | -------------------------------------------------------------------------------- /packages/ods/src/components/switch/src/globals.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Import here all the external ODS component that you need to run the current component 3 | * when running dev server (yarn start) or e2e tests 4 | * 5 | * ex: 6 | * import '../../text/src'; 7 | */ 8 | -------------------------------------------------------------------------------- /packages/ods/src/components/switch/src/index.ts: -------------------------------------------------------------------------------- 1 | export { OdsSwitch } from './components/ods-switch/ods-switch'; 2 | export { OdsSwitchItem } from './components/ods-switch-item/ods-switch-item'; 3 | export { ODS_SWITCH_SIZE, ODS_SWITCH_SIZES, type OdsSwitchSize } from './constant/switch-size'; 4 | export { type OdsSwitchChangeEvent, type OdsSwitchChangeEventDetail } from './interfaces/events'; 5 | -------------------------------------------------------------------------------- /packages/ods/src/components/switch/src/interfaces/events.ts: -------------------------------------------------------------------------------- 1 | interface OdsSwitchChangeEventDetail { 2 | name: string; 3 | validity?: ValidityState; 4 | value: string | null; 5 | } 6 | 7 | type OdsSwitchChangeEvent = CustomEvent; 8 | 9 | export { 10 | type OdsSwitchChangeEvent, 11 | type OdsSwitchChangeEventDetail, 12 | }; 13 | -------------------------------------------------------------------------------- /packages/ods/src/components/switch/stencil.config.ts: -------------------------------------------------------------------------------- 1 | import { getStencilConfig } from '../../config/stencil'; 2 | 3 | export const config = getStencilConfig({ 4 | args: process.argv.slice(2), 5 | componentCorePackage: '@ovhcloud/ods-component-switch', 6 | namespace: 'ods-switch', 7 | }); 8 | -------------------------------------------------------------------------------- /packages/ods/src/components/switch/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tsconfig.json", 3 | "include": [ 4 | "src", 5 | "tests" 6 | ] 7 | } 8 | -------------------------------------------------------------------------------- /packages/ods/src/components/table/.gitignore: -------------------------------------------------------------------------------- 1 | # Local Stencil command generates external ods component build at the root of the project 2 | # Excluding them is a temporary solution to avoid pushing generated files 3 | # But the issue may cause main build (ods-component package) to fails, as it detects multiples occurences 4 | # of the same component and thus you have to delete all those generated dir manually 5 | */src/ 6 | -------------------------------------------------------------------------------- /packages/ods/src/components/table/custom-elements-manifest.config.mjs: -------------------------------------------------------------------------------- 1 | import cemEnumPlugin from '../../../scripts/cem-enum-plugin.mjs'; 2 | 3 | export default { 4 | globs: ['src/**/*.+(ts|tsx)'], 5 | outdir: 'documentation', 6 | plugins: [cemEnumPlugin()], 7 | stencil: true, 8 | }; 9 | -------------------------------------------------------------------------------- /packages/ods/src/components/table/src/constants/table-size.ts: -------------------------------------------------------------------------------- 1 | enum ODS_TABLE_SIZE { 2 | lg = 'lg', 3 | md = 'md', 4 | sm = 'sm', 5 | } 6 | 7 | type OdsTableSize =`${ODS_TABLE_SIZE}`; 8 | 9 | const ODS_TABLE_SIZES = Object.freeze(Object.values(ODS_TABLE_SIZE)); 10 | 11 | export { 12 | ODS_TABLE_SIZE, 13 | ODS_TABLE_SIZES, 14 | type OdsTableSize, 15 | }; 16 | -------------------------------------------------------------------------------- /packages/ods/src/components/table/src/constants/table-variant.ts: -------------------------------------------------------------------------------- 1 | enum ODS_TABLE_VARIANT { 2 | default = 'default', 3 | striped = 'striped', 4 | } 5 | 6 | type OdsTableVariant =`${ODS_TABLE_VARIANT}`; 7 | 8 | const ODS_TABLE_VARIANTS = Object.freeze(Object.values(ODS_TABLE_VARIANT)); 9 | 10 | export { 11 | ODS_TABLE_VARIANT, 12 | ODS_TABLE_VARIANTS, 13 | type OdsTableVariant, 14 | }; 15 | -------------------------------------------------------------------------------- /packages/ods/src/components/table/src/globals.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Import here all the external ODS component that you need to run the current component 3 | * when running dev server (yarn start) or e2e tests 4 | * 5 | * ex: 6 | * import '../../text/src'; 7 | */ 8 | -------------------------------------------------------------------------------- /packages/ods/src/components/table/src/index.ts: -------------------------------------------------------------------------------- 1 | export { OdsTable } from './components/ods-table/ods-table'; 2 | export { ODS_TABLE_SIZE, ODS_TABLE_SIZES, type OdsTableSize } from './constants/table-size'; 3 | export { ODS_TABLE_VARIANT, ODS_TABLE_VARIANTS, type OdsTableVariant } from './constants/table-variant'; 4 | -------------------------------------------------------------------------------- /packages/ods/src/components/table/stencil.config.ts: -------------------------------------------------------------------------------- 1 | import { getStencilConfig } from '../../config/stencil'; 2 | 3 | export const config = getStencilConfig({ 4 | args: process.argv.slice(2), 5 | componentCorePackage: '@ovhcloud/ods-component-table', 6 | namespace: 'ods-table', 7 | }); 8 | -------------------------------------------------------------------------------- /packages/ods/src/components/table/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tsconfig.json", 3 | "include": [ 4 | "src", 5 | "tests" 6 | ] 7 | } 8 | -------------------------------------------------------------------------------- /packages/ods/src/components/tabs/.gitignore: -------------------------------------------------------------------------------- 1 | # Local Stencil command generates external ods component build at the root of the project 2 | # Excluding them is a temporary solution to avoid pushing generated files 3 | # But the issue may cause main build (ods-component package) to fails, as it detects multiples occurences 4 | # of the same component and thus you have to delete all those generated dir manually 5 | */src/ 6 | -------------------------------------------------------------------------------- /packages/ods/src/components/tabs/custom-elements-manifest.config.mjs: -------------------------------------------------------------------------------- 1 | import cemEnumPlugin from '../../../scripts/cem-enum-plugin.mjs'; 2 | 3 | export default { 4 | globs: ['src/**/*.+(ts|tsx)'], 5 | outdir: 'documentation', 6 | plugins: [cemEnumPlugin()], 7 | stencil: true, 8 | }; 9 | -------------------------------------------------------------------------------- /packages/ods/src/components/tabs/src/components/ods-tabs/ods-tabs.scss: -------------------------------------------------------------------------------- 1 | @use '../../../../../style/scroll'; 2 | 3 | $ods-tabs-border-bottom-size: 2px; 4 | 5 | :host(.ods-tabs) { 6 | @include scroll.hide-scrollbar(); 7 | 8 | display: block; 9 | padding: var(--ods-outline-width); 10 | width: 100%; 11 | overflow-x: auto; 12 | } 13 | 14 | .ods-tabs { 15 | &__wrapper { 16 | display: inline-flex; 17 | border-bottom: solid $ods-tabs-border-bottom-size var(--ods-color-neutral-100); 18 | min-width: 100%; 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /packages/ods/src/components/tabs/src/globals.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Import here all the external ODS component that you need to run the current component 3 | * when running dev server (yarn start) or e2e tests 4 | * 5 | * ex: 6 | * import '../../text/src'; 7 | */ 8 | -------------------------------------------------------------------------------- /packages/ods/src/components/tabs/src/index.ts: -------------------------------------------------------------------------------- 1 | export { OdsTab } from './components/ods-tab/ods-tab'; 2 | export { OdsTabs } from './components/ods-tabs/ods-tabs'; 3 | export { type OdsTabSelectedEventDetail, type OdsTabSelectedEvent, type OdsTabsSelectedEvent } from './interfaces/events'; 4 | -------------------------------------------------------------------------------- /packages/ods/src/components/tabs/src/interfaces/events.ts: -------------------------------------------------------------------------------- 1 | type OdsTabSelectedEventDetail = KeyboardEvent | MouseEvent; 2 | type OdsTabSelectedEvent = CustomEvent; 3 | type OdsTabsSelectedEvent = CustomEvent; 4 | 5 | export { 6 | type OdsTabSelectedEventDetail, 7 | type OdsTabSelectedEvent, 8 | type OdsTabsSelectedEvent, 9 | }; 10 | -------------------------------------------------------------------------------- /packages/ods/src/components/tabs/stencil.config.ts: -------------------------------------------------------------------------------- 1 | import { getStencilConfig } from '../../config/stencil'; 2 | 3 | export const config = getStencilConfig({ 4 | args: process.argv.slice(2), 5 | componentCorePackage: '@ovhcloud/ods-component-tabs', 6 | namespace: 'ods-tabs', 7 | }); 8 | -------------------------------------------------------------------------------- /packages/ods/src/components/tabs/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tsconfig.json", 3 | "include": [ 4 | "src", 5 | "tests" 6 | ] 7 | } 8 | -------------------------------------------------------------------------------- /packages/ods/src/components/tag/.gitignore: -------------------------------------------------------------------------------- 1 | # Local Stencil command generates external ods component build at the root of the project 2 | # Excluding them is a temporary solution to avoid pushing generated files 3 | # But the issue may cause main build (ods-component package) to fails, as it detects multiples occurences 4 | # of the same component and thus you have to delete all those generated dir manually 5 | */src/ 6 | -------------------------------------------------------------------------------- /packages/ods/src/components/tag/custom-elements-manifest.config.mjs: -------------------------------------------------------------------------------- 1 | import cemEnumPlugin from '../../../scripts/cem-enum-plugin.mjs'; 2 | 3 | export default { 4 | globs: ['src/**/*.+(ts|tsx)'], 5 | outdir: 'documentation', 6 | plugins: [cemEnumPlugin()], 7 | stencil: true, 8 | }; 9 | -------------------------------------------------------------------------------- /packages/ods/src/components/tag/src/constants/tag-color.ts: -------------------------------------------------------------------------------- 1 | enum ODS_TAG_COLOR { 2 | critical = 'critical', 3 | information = 'information', 4 | neutral = 'neutral', 5 | success = 'success', 6 | warning = 'warning', 7 | } 8 | 9 | type OdsTagColor = `${ODS_TAG_COLOR}`; 10 | 11 | const ODS_TAG_COLORS = Object.freeze(Object.values(ODS_TAG_COLOR)); 12 | 13 | export { 14 | ODS_TAG_COLOR, 15 | ODS_TAG_COLORS, 16 | type OdsTagColor, 17 | }; 18 | -------------------------------------------------------------------------------- /packages/ods/src/components/tag/src/constants/tag-size.ts: -------------------------------------------------------------------------------- 1 | enum ODS_TAG_SIZE { 2 | lg = 'lg', 3 | md = 'md', 4 | } 5 | 6 | type OdsTagSize = `${ODS_TAG_SIZE}`; 7 | 8 | const ODS_TAG_SIZES = Object.freeze(Object.values(ODS_TAG_SIZE)); 9 | 10 | export { 11 | ODS_TAG_SIZE, 12 | ODS_TAG_SIZES, 13 | type OdsTagSize, 14 | }; 15 | -------------------------------------------------------------------------------- /packages/ods/src/components/tag/src/globals.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Import here all the external ODS component that you need to run the current component 3 | * when running dev server (yarn start) or e2e tests 4 | * 5 | * ex: 6 | * import '../../text/src'; 7 | */ 8 | import '../../icon/src'; 9 | -------------------------------------------------------------------------------- /packages/ods/src/components/tag/src/index.ts: -------------------------------------------------------------------------------- 1 | export { OdsTag } from './components/ods-tag/ods-tag'; 2 | export { ODS_TAG_COLOR, ODS_TAG_COLORS, type OdsTagColor } from './constants/tag-color'; 3 | export { ODS_TAG_SIZE, ODS_TAG_SIZES, type OdsTagSize } from './constants/tag-size'; 4 | export { type OdsTagRemoveEvent, type OdsTagRemoveEventDetail } from './interfaces/events'; 5 | -------------------------------------------------------------------------------- /packages/ods/src/components/tag/src/interfaces/events.ts: -------------------------------------------------------------------------------- 1 | interface OdsTagRemoveEventDetail { 2 | id?: string; 3 | } 4 | 5 | type OdsTagRemoveEvent = CustomEvent; 6 | 7 | export { 8 | type OdsTagRemoveEvent, 9 | type OdsTagRemoveEventDetail, 10 | }; 11 | -------------------------------------------------------------------------------- /packages/ods/src/components/tag/stencil.config.ts: -------------------------------------------------------------------------------- 1 | import { getStencilConfig } from '../../config/stencil'; 2 | 3 | export const config = getStencilConfig({ 4 | args: process.argv.slice(2), 5 | componentCorePackage: '@ovhcloud/ods-component-tag', 6 | namespace: 'ods-tag', 7 | }); 8 | -------------------------------------------------------------------------------- /packages/ods/src/components/tag/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tsconfig.json", 3 | "include": [ 4 | "src", 5 | "tests" 6 | ] 7 | } 8 | -------------------------------------------------------------------------------- /packages/ods/src/components/text/.gitignore: -------------------------------------------------------------------------------- 1 | # Local Stencil command generates external ods component build at the root of the project 2 | # Excluding them is a temporary solution to avoid pushing generated files 3 | # But the issue may cause main build (ods-component package) to fails, as it detects multiples occurences 4 | # of the same component and thus you have to delete all those generated dir manually 5 | */src/ 6 | -------------------------------------------------------------------------------- /packages/ods/src/components/text/custom-elements-manifest.config.mjs: -------------------------------------------------------------------------------- 1 | import cemEnumPlugin from '../../../scripts/cem-enum-plugin.mjs'; 2 | 3 | export default { 4 | globs: ['src/**/*.+(ts|tsx)'], 5 | outdir: 'documentation', 6 | plugins: [cemEnumPlugin()], 7 | stencil: true, 8 | }; 9 | -------------------------------------------------------------------------------- /packages/ods/src/components/text/src/globals.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Import here all the external ODS component that you need to run the current component 3 | * when running dev server (yarn start) or e2e tests 4 | * 5 | * ex: 6 | * import '../../text/src'; 7 | */ 8 | -------------------------------------------------------------------------------- /packages/ods/src/components/text/src/index.ts: -------------------------------------------------------------------------------- 1 | export { OdsText } from './components/ods-text/ods-text'; 2 | export { type OdsTextPreset, ODS_TEXT_PRESETS, ODS_TEXT_PRESET } from './constants/text-preset'; 3 | -------------------------------------------------------------------------------- /packages/ods/src/components/text/stencil.config.ts: -------------------------------------------------------------------------------- 1 | import { getStencilConfig } from '../../config/stencil'; 2 | 3 | const config = getStencilConfig({ 4 | args: process.argv.slice(2), 5 | componentCorePackage: '@ovhcloud/ods-component-text', 6 | namespace: 'ods-text', 7 | }); 8 | 9 | export { 10 | config, 11 | }; 12 | -------------------------------------------------------------------------------- /packages/ods/src/components/text/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tsconfig.json", 3 | "include": [ 4 | "src", 5 | "tests" 6 | ] 7 | } 8 | -------------------------------------------------------------------------------- /packages/ods/src/components/textarea/.gitignore: -------------------------------------------------------------------------------- 1 | # Local Stencil command generates external ods component build at the root of the project 2 | # Excluding them is a temporary solution to avoid pushing generated files 3 | # But the issue may cause main build (ods-component package) to fails, as it detects multiples occurences 4 | # of the same component and thus you have to delete all those generated dir manually 5 | */src/ 6 | -------------------------------------------------------------------------------- /packages/ods/src/components/textarea/custom-elements-manifest.config.mjs: -------------------------------------------------------------------------------- 1 | import cemEnumPlugin from '../../../scripts/cem-enum-plugin.mjs'; 2 | 3 | export default { 4 | globs: ['src/**/*.+(ts|tsx)'], 5 | outdir: 'documentation', 6 | plugins: [cemEnumPlugin()], 7 | stencil: true, 8 | }; 9 | -------------------------------------------------------------------------------- /packages/ods/src/components/textarea/src/globals.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Import here all the external ODS component that you need to run the current component 3 | * when running dev server (yarn start) or e2e tests 4 | * 5 | * ex: 6 | * import '../../text/src'; 7 | */ 8 | -------------------------------------------------------------------------------- /packages/ods/src/components/textarea/src/index.ts: -------------------------------------------------------------------------------- 1 | export { OdsTextarea } from './components/ods-textarea/ods-textarea'; 2 | export { type OdsTextareaChangeEvent, type OdsTextareaChangeEventDetail } from './interfaces/events'; 3 | -------------------------------------------------------------------------------- /packages/ods/src/components/textarea/src/interfaces/events.ts: -------------------------------------------------------------------------------- 1 | interface OdsTextareaChangeEventDetail { 2 | name: string; 3 | previousValue?: string | null; 4 | validity?: ValidityState; 5 | value: string | null; 6 | } 7 | 8 | type OdsTextareaChangeEvent = CustomEvent; 9 | 10 | export { 11 | type OdsTextareaChangeEvent, 12 | type OdsTextareaChangeEventDetail, 13 | }; 14 | -------------------------------------------------------------------------------- /packages/ods/src/components/textarea/stencil.config.ts: -------------------------------------------------------------------------------- 1 | import { getStencilConfig } from '../../config/stencil'; 2 | 3 | export const config = getStencilConfig({ 4 | args: process.argv.slice(2), 5 | componentCorePackage: '@ovhcloud/ods-component-textarea', 6 | namespace: 'ods-textarea', 7 | }); 8 | -------------------------------------------------------------------------------- /packages/ods/src/components/textarea/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tsconfig.json", 3 | "include": [ 4 | "src", 5 | "tests" 6 | ] 7 | } 8 | -------------------------------------------------------------------------------- /packages/ods/src/components/timepicker/.gitignore: -------------------------------------------------------------------------------- 1 | # Local Stencil command generates external ods component build at the root of the project 2 | # Excluding them is a temporary solution to avoid pushing generated files 3 | # But the issue may cause main build (ods-component package) to fails, as it detects multiples occurences 4 | # of the same component and thus you have to delete all those generated dir manually 5 | */src/ 6 | -------------------------------------------------------------------------------- /packages/ods/src/components/timepicker/custom-elements-manifest.config.mjs: -------------------------------------------------------------------------------- 1 | import cemEnumPlugin from '../../../scripts/cem-enum-plugin.mjs'; 2 | 3 | export default { 4 | globs: ['src/**/*.+(ts|tsx)'], 5 | outdir: 'documentation', 6 | plugins: [cemEnumPlugin()], 7 | stencil: true, 8 | }; 9 | -------------------------------------------------------------------------------- /packages/ods/src/components/timepicker/src/components/ods-timepicker/ods-timepicker.scss: -------------------------------------------------------------------------------- 1 | :host(.ods-timepicker) { 2 | display: inline-flex; 3 | column-gap: 8px; 4 | } 5 | 6 | .ods-timepicker { 7 | &__input { 8 | width: inherit; 9 | } 10 | 11 | &__timezones { 12 | min-width: 89px; 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /packages/ods/src/components/timepicker/src/constant/timezone-preset.ts: -------------------------------------------------------------------------------- 1 | enum ODS_TIMEZONES_PRESET { 2 | all = 'all' 3 | } 4 | 5 | /** @deprecated use `OdsTimezonesPreset` instead */ 6 | type OdsTimezonePreset =`${ODS_TIMEZONES_PRESET}`; 7 | 8 | type OdsTimezonesPreset = OdsTimezonePreset; 9 | 10 | const ODS_TIMEZONES_PRESETS = Object.freeze(Object.values(ODS_TIMEZONES_PRESET)); 11 | 12 | export { 13 | type OdsTimezonePreset, 14 | type OdsTimezonesPreset, 15 | ODS_TIMEZONES_PRESETS, 16 | ODS_TIMEZONES_PRESET, 17 | }; 18 | -------------------------------------------------------------------------------- /packages/ods/src/components/timepicker/src/globals.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Import here all the external ODS component that you need to run the current component 3 | * when running dev server (yarn start) or e2e tests 4 | * 5 | * ex: 6 | * import '../../text/src'; 7 | */ 8 | import '../../input/src'; 9 | import '../../select/src'; 10 | -------------------------------------------------------------------------------- /packages/ods/src/components/timepicker/src/index.ts: -------------------------------------------------------------------------------- 1 | export { OdsTimepicker } from './components/ods-timepicker/ods-timepicker'; 2 | export { ODS_TIMEZONES_PRESET, ODS_TIMEZONES_PRESETS, type OdsTimezonePreset, type OdsTimezonesPreset } from './constant/timezone-preset'; 3 | export { ODS_TIMEZONE, ODS_TIMEZONES, type OdsTimezone } from './constant/timezones'; 4 | export { type OdsTimepickerChangeEventDetail, type OdsTimepickerChangeEvent } from './interfaces/event'; 5 | -------------------------------------------------------------------------------- /packages/ods/src/components/timepicker/src/interfaces/event.ts: -------------------------------------------------------------------------------- 1 | import type { OdsTimezone } from '../constant/timezones'; 2 | 3 | interface OdsTimepickerChangeEventDetail { 4 | currentTimezone?: OdsTimezone; 5 | name: string; 6 | previousValue?: string | null; 7 | validity?: ValidityState; 8 | value: string | null; 9 | } 10 | 11 | type OdsTimepickerChangeEvent = CustomEvent; 12 | 13 | export { 14 | type OdsTimepickerChangeEvent, 15 | type OdsTimepickerChangeEventDetail, 16 | }; 17 | -------------------------------------------------------------------------------- /packages/ods/src/components/timepicker/stencil.config.ts: -------------------------------------------------------------------------------- 1 | import { getStencilConfig } from '../../config/stencil'; 2 | 3 | export const config = getStencilConfig({ 4 | args: process.argv.slice(2), 5 | componentCorePackage: '@ovhcloud/ods-component-timepicker', 6 | namespace: 'ods-timepicker', 7 | }); 8 | -------------------------------------------------------------------------------- /packages/ods/src/components/timepicker/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tsconfig.json", 3 | "include": [ 4 | "src", 5 | "tests" 6 | ] 7 | } 8 | -------------------------------------------------------------------------------- /packages/ods/src/components/toggle/.gitignore: -------------------------------------------------------------------------------- 1 | # Local Stencil command generates external ods component build at the root of the project 2 | # Excluding them is a temporary solution to avoid pushing generated files 3 | # But the issue may cause main build (ods-component package) to fails, as it detects multiples occurences 4 | # of the same component and thus you have to delete all those generated dir manually 5 | */src/ 6 | -------------------------------------------------------------------------------- /packages/ods/src/components/toggle/custom-elements-manifest.config.mjs: -------------------------------------------------------------------------------- 1 | import cemEnumPlugin from '../../../scripts/cem-enum-plugin.mjs'; 2 | 3 | export default { 4 | globs: ['src/**/*.+(ts|tsx)'], 5 | outdir: 'documentation', 6 | plugins: [cemEnumPlugin()], 7 | stencil: true, 8 | }; 9 | -------------------------------------------------------------------------------- /packages/ods/src/components/toggle/src/globals.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Import here all the external ODS component that you need to run the current component 3 | * when running dev server (yarn start) or e2e tests 4 | * 5 | * ex: 6 | * import '../../text/src'; 7 | */ 8 | -------------------------------------------------------------------------------- /packages/ods/src/components/toggle/src/index.ts: -------------------------------------------------------------------------------- 1 | export { OdsToggle } from './components/ods-toggle/ods-toggle'; 2 | export { type OdsToggleChangeEvent, type OdsToggleChangeEventDetail } from './interfaces/event'; 3 | -------------------------------------------------------------------------------- /packages/ods/src/components/toggle/src/interfaces/event.ts: -------------------------------------------------------------------------------- 1 | interface OdsToggleChangeEventDetail { 2 | name: string; 3 | previousValue?: boolean; 4 | validity?: ValidityState; 5 | value: boolean; 6 | } 7 | 8 | type OdsToggleChangeEvent = CustomEvent; 9 | 10 | export { 11 | type OdsToggleChangeEvent, 12 | type OdsToggleChangeEventDetail, 13 | }; 14 | -------------------------------------------------------------------------------- /packages/ods/src/components/toggle/stencil.config.ts: -------------------------------------------------------------------------------- 1 | import { getStencilConfig } from '../../config/stencil'; 2 | 3 | export const config = getStencilConfig({ 4 | args: process.argv.slice(2), 5 | componentCorePackage: '@ovhcloud/ods-component-toggle', 6 | namespace: 'ods-toggle', 7 | }); 8 | -------------------------------------------------------------------------------- /packages/ods/src/components/toggle/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tsconfig.json", 3 | "include": [ 4 | "src", 5 | "tests" 6 | ] 7 | } 8 | -------------------------------------------------------------------------------- /packages/ods/src/components/tooltip/.gitignore: -------------------------------------------------------------------------------- 1 | # Local Stencil command generates external ods component build at the root of the project 2 | # Excluding them is a temporary solution to avoid pushing generated files 3 | # But the issue may cause main build (ods-component package) to fails, as it detects multiples occurences 4 | # of the same component and thus you have to delete all those generated dir manually 5 | */src/ 6 | -------------------------------------------------------------------------------- /packages/ods/src/components/tooltip/custom-elements-manifest.config.mjs: -------------------------------------------------------------------------------- 1 | import cemEnumPlugin from '../../../scripts/cem-enum-plugin.mjs'; 2 | 3 | export default { 4 | globs: [ 5 | 'src/**/*.+(ts|tsx)', 6 | '../../utils/overlay.ts', // to be able to generate the enum list 7 | ], 8 | outdir: 'documentation', 9 | plugins: [cemEnumPlugin({ 10 | rename: { 11 | ODS_OVERLAY_POSITION: 'ODS_TOOLTIP_POSITION', 12 | ODS_OVERLAY_STRATEGY: 'ODS_TOOLTIP_STRATEGY', 13 | }, 14 | })], 15 | stencil: true, 16 | }; 17 | -------------------------------------------------------------------------------- /packages/ods/src/components/tooltip/src/components/ods-tooltip/ods-tooltip.scss: -------------------------------------------------------------------------------- 1 | @use '../../../../../style/overlay'; 2 | 3 | :host(.ods-tooltip) { 4 | @include overlay.ods-tooltip(); 5 | 6 | display: none; 7 | top: 0; 8 | left: 0; 9 | } 10 | 11 | :host(.ods-tooltip--absolute) { 12 | position: absolute; 13 | } 14 | 15 | :host(.ods-tooltip--fixed) { 16 | position: fixed; 17 | } 18 | 19 | .ods-tooltip { 20 | &__arrow { 21 | @include overlay.ods-tooltip-arrow(); 22 | 23 | &--hidden { 24 | display: none; 25 | } 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /packages/ods/src/components/tooltip/src/constants/tooltip-position.ts: -------------------------------------------------------------------------------- 1 | import { ODS_OVERLAY_POSITION, ODS_OVERLAY_POSITIONS, type OdsOverlayPosition } from '../../../../utils/overlay'; 2 | 3 | export { 4 | ODS_OVERLAY_POSITION as ODS_TOOLTIP_POSITION, 5 | ODS_OVERLAY_POSITIONS as ODS_TOOLTIP_POSITIONS, 6 | type OdsOverlayPosition as OdsTooltipPosition, 7 | }; 8 | -------------------------------------------------------------------------------- /packages/ods/src/components/tooltip/src/constants/tooltip-strategy.ts: -------------------------------------------------------------------------------- 1 | import { ODS_OVERLAY_STRATEGIES, ODS_OVERLAY_STRATEGY, type OdsOverlayStrategy } from '../../../../utils/overlay'; 2 | 3 | export { 4 | ODS_OVERLAY_STRATEGIES as ODS_TOOLTIP_STRATEGIES, 5 | ODS_OVERLAY_STRATEGY as ODS_TOOLTIP_STRATEGY, 6 | type OdsOverlayStrategy as OdsTooltipStrategy, 7 | }; 8 | -------------------------------------------------------------------------------- /packages/ods/src/components/tooltip/src/globals.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Import here all the external ODS component that you need to run the current component 3 | * when running dev server (yarn start) or e2e tests 4 | * 5 | * ex: 6 | * import '../../text/src'; 7 | */ 8 | import '../../modal/src'; 9 | -------------------------------------------------------------------------------- /packages/ods/src/components/tooltip/src/index.ts: -------------------------------------------------------------------------------- 1 | export { OdsTooltip } from './components/ods-tooltip/ods-tooltip'; 2 | export { type OdsTooltipPosition, ODS_TOOLTIP_POSITION, ODS_TOOLTIP_POSITIONS } from './constants/tooltip-position'; 3 | export { type OdsTooltipStrategy, ODS_TOOLTIP_STRATEGIES, ODS_TOOLTIP_STRATEGY } from './constants/tooltip-strategy'; 4 | -------------------------------------------------------------------------------- /packages/ods/src/components/tooltip/stencil.config.ts: -------------------------------------------------------------------------------- 1 | import { getStencilConfig } from '../../config/stencil'; 2 | 3 | export const config = getStencilConfig({ 4 | args: process.argv.slice(2), 5 | componentCorePackage: '@ovhcloud/ods-component-tooltip', 6 | namespace: 'ods-tooltip', 7 | }); 8 | -------------------------------------------------------------------------------- /packages/ods/src/components/tooltip/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tsconfig.json", 3 | "include": [ 4 | "src", 5 | "tests" 6 | ] 7 | } 8 | -------------------------------------------------------------------------------- /packages/ods/src/index.ts: -------------------------------------------------------------------------------- 1 | export * from './components'; 2 | export * from './components/index'; 3 | export * from './types'; 4 | -------------------------------------------------------------------------------- /packages/ods/src/style/_breakpoint.scss: -------------------------------------------------------------------------------- 1 | $ods-breakpoint-sub-mobile: 360px; 2 | $ods-breakpoint-mobile: 576px; 3 | $ods-breakpoint-tablet: 768px; 4 | $ods-breakpoint-desktop: 992px; 5 | $ods-breakpoint-large-screen: 1200px; 6 | $ods-breakpoint-widescreen: 1400px; 7 | -------------------------------------------------------------------------------- /packages/ods/src/style/_flag.scss: -------------------------------------------------------------------------------- 1 | @mixin ods-flag() { 2 | box-shadow: 0 0 12px var(--ods-color-neutral-200); 3 | aspect-ratio: 4/3; 4 | } 5 | -------------------------------------------------------------------------------- /packages/ods/src/style/_focus.scss: -------------------------------------------------------------------------------- 1 | @mixin ods-focus() { 2 | outline: var(--ods-outline-style-default) var(--ods-outline-width) var(--ods-outline-color-default); 3 | outline-offset: var(--ods-outline-offset); 4 | } 5 | -------------------------------------------------------------------------------- /packages/ods/src/style/_font.scss: -------------------------------------------------------------------------------- 1 | @use 'sass:math'; 2 | 3 | /** 4 | * Transform a px value to its rem equivalent 5 | * ex: px-to-rem(14px) => return 0.875rem 6 | */ 7 | @function px-to-rem($size, $font-size: 16px) { 8 | @return math.div($size, $font-size) * 1rem; 9 | } 10 | 11 | @mixin ellipsis() { 12 | overflow: hidden; 13 | text-overflow: ellipsis; 14 | white-space: nowrap; 15 | } 16 | -------------------------------------------------------------------------------- /packages/ods/src/style/_icon.scss: -------------------------------------------------------------------------------- 1 | @mixin ods-icon() { 2 | /* use !important to prevent issues with browser extensions that change fonts */ 3 | line-height: 1; 4 | font-family: 'ODS Icon', serif !important; 5 | speak: never; 6 | font-weight: normal; 7 | -webkit-font-smoothing: antialiased; 8 | -moz-osx-font-smoothing: grayscale; 9 | font-variant: normal; 10 | font-style: normal; 11 | } 12 | -------------------------------------------------------------------------------- /packages/ods/src/style/_scroll.scss: -------------------------------------------------------------------------------- 1 | @mixin hide-scrollbar() { 2 | -ms-overflow-style: none; 3 | scrollbar-width: none; 4 | 5 | &::-webkit-scrollbar { 6 | display: none; 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /packages/ods/src/style/index.scss: -------------------------------------------------------------------------------- 1 | @forward 'badge'; 2 | @forward 'breakpoint'; 3 | @forward 'button'; 4 | @forward 'checkbox'; 5 | @forward 'focus'; 6 | @forward 'font'; 7 | @forward 'icon'; 8 | @forward 'input'; 9 | @forward 'link'; 10 | @forward 'message'; 11 | @forward 'modal'; 12 | @forward 'overlay'; 13 | @forward 'progress-bar'; 14 | @forward 'radio'; 15 | @forward 'scroll'; 16 | @forward 'range'; 17 | @forward 'skeleton'; 18 | @forward 'state'; 19 | @forward 'table'; 20 | @forward 'tag'; 21 | @forward 'text'; 22 | -------------------------------------------------------------------------------- /packages/ods/src/types/form.ts: -------------------------------------------------------------------------------- 1 | interface OdsFormElement { 2 | checkValidity(): Promise; 3 | getValidationMessage: () => Promise; 4 | getValidity(): Promise; 5 | reportValidity(): Promise; 6 | willValidate(): Promise; 7 | } 8 | 9 | export type { 10 | OdsFormElement, 11 | }; 12 | -------------------------------------------------------------------------------- /packages/ods/src/types/index.ts: -------------------------------------------------------------------------------- 1 | export * from './form'; 2 | -------------------------------------------------------------------------------- /packages/ods/src/utils/debounce.ts: -------------------------------------------------------------------------------- 1 | function debounce) => ReturnType>(callback: F, waitFor: number): (...args: Parameters) => void { 2 | let timeout: ReturnType; 3 | 4 | return (...args: Parameters) => { 5 | clearTimeout(timeout); 6 | timeout = setTimeout(() => callback(...args), waitFor); 7 | }; 8 | } 9 | 10 | export { 11 | debounce, 12 | }; 13 | -------------------------------------------------------------------------------- /packages/ods/src/utils/locale.ts: -------------------------------------------------------------------------------- 1 | enum ODS_LOCALE { 2 | de = 'de', // German 3 | en = 'en', // English 4 | es = 'es', // Spanish 5 | fr = 'fr', // French 6 | it = 'it', // Italian 7 | nl = 'nl', // Dutch 8 | pl = 'pl', // Polish 9 | pt = 'pt', // Portuguese 10 | } 11 | 12 | type OdsLocale = `${ODS_LOCALE}`; 13 | 14 | const ODS_LOCALES = Object.freeze(Object.values(ODS_LOCALE)); 15 | 16 | export { 17 | ODS_LOCALE, 18 | ODS_LOCALES, 19 | type OdsLocale, 20 | }; 21 | -------------------------------------------------------------------------------- /packages/ods/src/utils/regExp.ts: -------------------------------------------------------------------------------- 1 | // Inspired by lodash.escaperegexp 2 | const reRegExpChar = /[\\^$.*+?()[\]{}|]/g; 3 | const reHasRegExpChar = RegExp(reRegExpChar.source); 4 | 5 | function escapeRegExp(string: string): string { 6 | return (string && reHasRegExpChar.test(string)) 7 | ? string.replace(reRegExpChar, '\\$&') 8 | : string || ''; 9 | } 10 | 11 | export { 12 | escapeRegExp, 13 | }; 14 | -------------------------------------------------------------------------------- /packages/ods/src/utils/type.ts: -------------------------------------------------------------------------------- 1 | function isDate(date: Date): boolean { 2 | // Needed as values from runtime are not TS problem anymore 3 | return date instanceof Date && !isNaN(date.valueOf()); 4 | } 5 | 6 | function isNumeric(n?: string | number | null): boolean { 7 | return n === 0 || !!n && !isNaN(parseFloat(n.toString())) && isFinite(n as number); 8 | } 9 | 10 | export { 11 | isDate, 12 | isNumeric, 13 | }; 14 | -------------------------------------------------------------------------------- /packages/ods/stencil.config.ts: -------------------------------------------------------------------------------- 1 | import { getStencilConfig } from './src/config/stencil'; 2 | 3 | export const config = getStencilConfig({ 4 | args: process.argv.slice(2), 5 | componentCorePackage: '@ovhcloud/ods-components', 6 | namespace: 'ods-components', 7 | tsconfig: 'tsconfig.prod.json', 8 | }); 9 | -------------------------------------------------------------------------------- /packages/ods/style/.gitignore: -------------------------------------------------------------------------------- 1 | dist/ 2 | -------------------------------------------------------------------------------- /packages/ods/style/.npmignore: -------------------------------------------------------------------------------- 1 | !dist/ 2 | -------------------------------------------------------------------------------- /packages/ods/style/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@ovhcloud/ods-components-style", 3 | "version": "18.6.3", 4 | "private": true, 5 | "description": "Style helpers for ODS", 6 | "keywords": [], 7 | "author": "OVH SAS", 8 | "license": "Apache-2.0", 9 | "main": "./dist/index.scss", 10 | "scripts": { 11 | "build": "npm run clean && shx cp -r ../src/style ./dist", 12 | "clean": "rimraf dist" 13 | }, 14 | "devDependencies": { 15 | "shx": "0.3.4" 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /packages/ods/tsconfig.prod.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "declaration": true, 5 | }, 6 | "include": [ 7 | "src" 8 | ], 9 | "exclude": [ 10 | "node_modules", 11 | "react", 12 | "vue", 13 | "**/**/.stencil", 14 | "**/**/dist", 15 | "**/**/www", 16 | "**/**/*.spec.ts", 17 | "**/**/*.e2e.ts", 18 | "**/**/*.e2e.screenshot.ts", 19 | "**/**/*.d.ts", 20 | "**/**/globals.ts" 21 | ] 22 | } 23 | -------------------------------------------------------------------------------- /packages/ods/vue/.gitignore: -------------------------------------------------------------------------------- 1 | dist/ 2 | src/ 3 | !tests/_app/src 4 | -------------------------------------------------------------------------------- /packages/ods/vue/.npmignore: -------------------------------------------------------------------------------- 1 | !dist/ 2 | src/ 3 | -------------------------------------------------------------------------------- /packages/ods/vue/tests/_app/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Vue Test App 7 | 8 | 9 |
10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /packages/ods/vue/tests/_app/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ods-components-vue-test-app", 3 | "private": true, 4 | "version": "18.6.3", 5 | "type": "module", 6 | "scripts": { 7 | "start": "vite" 8 | }, 9 | "dependencies": { 10 | "core-js": "3.36.0", 11 | "vue": "3.4.21", 12 | "vue-router": "4.3.0" 13 | }, 14 | "devDependencies": { 15 | "@vitejs/plugin-vue": "5.0.4", 16 | "vite": "5.0.10", 17 | "vite-tsconfig-paths": "4.2.3" 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /packages/ods/vue/tests/_app/src/App.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 7 | -------------------------------------------------------------------------------- /packages/ods/vue/tests/_app/src/components/ods-badge.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 16 | -------------------------------------------------------------------------------- /packages/ods/vue/tests/_app/src/components/ods-card.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 19 | -------------------------------------------------------------------------------- /packages/ods/vue/tests/_app/src/components/ods-clipboard.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 16 | -------------------------------------------------------------------------------- /packages/ods/vue/tests/_app/src/components/ods-code.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 18 | -------------------------------------------------------------------------------- /packages/ods/vue/tests/_app/src/components/ods-datepicker.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 16 | -------------------------------------------------------------------------------- /packages/ods/vue/tests/_app/src/components/ods-divider.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 16 | -------------------------------------------------------------------------------- /packages/ods/vue/tests/_app/src/components/ods-icon.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 22 | -------------------------------------------------------------------------------- /packages/ods/vue/tests/_app/src/components/ods-link.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 16 | -------------------------------------------------------------------------------- /packages/ods/vue/tests/_app/src/components/ods-medium.vue: -------------------------------------------------------------------------------- 1 | 5 | 6 | 17 | -------------------------------------------------------------------------------- /packages/ods/vue/tests/_app/src/components/ods-message.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 18 | -------------------------------------------------------------------------------- /packages/ods/vue/tests/_app/src/components/ods-pagination.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 16 | -------------------------------------------------------------------------------- /packages/ods/vue/tests/_app/src/components/ods-password.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 16 | -------------------------------------------------------------------------------- /packages/ods/vue/tests/_app/src/components/ods-phone-number.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 16 | -------------------------------------------------------------------------------- /packages/ods/vue/tests/_app/src/components/ods-progress-bar.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 16 | -------------------------------------------------------------------------------- /packages/ods/vue/tests/_app/src/components/ods-range.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 16 | -------------------------------------------------------------------------------- /packages/ods/vue/tests/_app/src/components/ods-skeleton.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 16 | -------------------------------------------------------------------------------- /packages/ods/vue/tests/_app/src/components/ods-spinner.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 16 | -------------------------------------------------------------------------------- /packages/ods/vue/tests/_app/src/components/ods-tabs.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 21 | -------------------------------------------------------------------------------- /packages/ods/vue/tests/_app/src/components/ods-text.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 16 | -------------------------------------------------------------------------------- /packages/ods/vue/tests/_app/src/components/ods-timepicker.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 16 | -------------------------------------------------------------------------------- /packages/ods/vue/tests/_app/src/components/ods-toggle.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 16 | -------------------------------------------------------------------------------- /packages/ods/vue/tests/_app/src/main.ts: -------------------------------------------------------------------------------- 1 | import { createApp } from 'vue'; 2 | import App from './App.vue'; 3 | import router from './router'; 4 | import '@ovhcloud/ods-themes/default'; 5 | 6 | createApp(App).use(router).mount('#app'); 7 | -------------------------------------------------------------------------------- /packages/ods/vue/tests/_app/src/router/index.ts: -------------------------------------------------------------------------------- 1 | import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'; 2 | import { componentNames } from '../components'; 3 | 4 | const routes: Array = componentNames.map((componentName) => ({ 5 | component: () => import(`../components/ods-${componentName}.vue`), 6 | path: `/ods-${componentName}`, 7 | name: `ods-${componentName}`, 8 | })) 9 | 10 | const router = createRouter({ 11 | history: createWebHashHistory(), 12 | routes, 13 | }); 14 | 15 | export default router; 16 | -------------------------------------------------------------------------------- /packages/ods/vue/tests/_app/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tsconfig.vue.json", 3 | "compilerOptions": { 4 | "lib": ["ES2020", "DOM"], 5 | "module": "ESNext", 6 | "paths": { 7 | "ods-components-react": ["../../src/components/stencil-generated"] 8 | } 9 | }, 10 | "include": ["src"] 11 | } 12 | -------------------------------------------------------------------------------- /packages/ods/vue/tests/_app/vite.config.ts: -------------------------------------------------------------------------------- 1 | import vue from '@vitejs/plugin-vue' 2 | import { defineConfig } from 'vite' 3 | import tsconfigPaths from 'vite-tsconfig-paths' 4 | 5 | export default defineConfig({ 6 | plugins: [vue(), tsconfigPaths({ root: '.' })], 7 | server: { 8 | port: 3000, 9 | }, 10 | }) 11 | -------------------------------------------------------------------------------- /packages/ods/vue/tests/jest.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | preset: 'jest-puppeteer', 3 | testRegex: "./*\\e2e\\.ts$", 4 | testTimeout: 10000, 5 | transform: { 6 | '\\.(ts|tsx)$': 'ts-jest', 7 | }, 8 | }; 9 | -------------------------------------------------------------------------------- /packages/ods/vue/tsconfig.cjs.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "dist/cjs", 5 | "module": "CommonJS", 6 | "declaration": false, 7 | "declarationDir": null 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /packages/ods/vue/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.vue.json", 3 | "compilerOptions": { 4 | "outDir": "dist/esm", 5 | "declarationDir": "dist/types" 6 | }, 7 | "include": [ 8 | "src/**/*.ts", 9 | "src/**/*.tsx" 10 | ] 11 | } 12 | -------------------------------------------------------------------------------- /packages/storybook/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | docs/ 4 | assets/ods-versions.json 5 | 6 | # Log files 7 | npm-debug.log* 8 | yarn-debug.log* 9 | yarn-error.log* 10 | pnpm-debug.log* 11 | 12 | # Editor directories and files 13 | .idea 14 | .vscode 15 | *.suo 16 | *.ntvs* 17 | *.njsproj 18 | *.sln 19 | *.sw? 20 | -------------------------------------------------------------------------------- /packages/storybook/.npmignore: -------------------------------------------------------------------------------- 1 | !docs/ 2 | -------------------------------------------------------------------------------- /packages/storybook/assets/components/accordion/anatomy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ovh/design-system/2499ec45e5c43cbd03e88bcb348a801fb7960d7a/packages/storybook/assets/components/accordion/anatomy.png -------------------------------------------------------------------------------- /packages/storybook/assets/components/badge/anatomy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ovh/design-system/2499ec45e5c43cbd03e88bcb348a801fb7960d7a/packages/storybook/assets/components/badge/anatomy.png -------------------------------------------------------------------------------- /packages/storybook/assets/components/breadcrumb/anatomy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ovh/design-system/2499ec45e5c43cbd03e88bcb348a801fb7960d7a/packages/storybook/assets/components/breadcrumb/anatomy.png -------------------------------------------------------------------------------- /packages/storybook/assets/components/button/anatomy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ovh/design-system/2499ec45e5c43cbd03e88bcb348a801fb7960d7a/packages/storybook/assets/components/button/anatomy.png -------------------------------------------------------------------------------- /packages/storybook/assets/components/card/anatomy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ovh/design-system/2499ec45e5c43cbd03e88bcb348a801fb7960d7a/packages/storybook/assets/components/card/anatomy.png -------------------------------------------------------------------------------- /packages/storybook/assets/components/checkbox/anatomy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ovh/design-system/2499ec45e5c43cbd03e88bcb348a801fb7960d7a/packages/storybook/assets/components/checkbox/anatomy.png -------------------------------------------------------------------------------- /packages/storybook/assets/components/clipboard/anatomy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ovh/design-system/2499ec45e5c43cbd03e88bcb348a801fb7960d7a/packages/storybook/assets/components/clipboard/anatomy.png -------------------------------------------------------------------------------- /packages/storybook/assets/components/code/anatomy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ovh/design-system/2499ec45e5c43cbd03e88bcb348a801fb7960d7a/packages/storybook/assets/components/code/anatomy.png -------------------------------------------------------------------------------- /packages/storybook/assets/components/combobox/anatomy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ovh/design-system/2499ec45e5c43cbd03e88bcb348a801fb7960d7a/packages/storybook/assets/components/combobox/anatomy.png -------------------------------------------------------------------------------- /packages/storybook/assets/components/datepicker/anatomy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ovh/design-system/2499ec45e5c43cbd03e88bcb348a801fb7960d7a/packages/storybook/assets/components/datepicker/anatomy.png -------------------------------------------------------------------------------- /packages/storybook/assets/components/divider/anatomy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ovh/design-system/2499ec45e5c43cbd03e88bcb348a801fb7960d7a/packages/storybook/assets/components/divider/anatomy.png -------------------------------------------------------------------------------- /packages/storybook/assets/components/drawer/anatomy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ovh/design-system/2499ec45e5c43cbd03e88bcb348a801fb7960d7a/packages/storybook/assets/components/drawer/anatomy.png -------------------------------------------------------------------------------- /packages/storybook/assets/components/file-upload/anatomy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ovh/design-system/2499ec45e5c43cbd03e88bcb348a801fb7960d7a/packages/storybook/assets/components/file-upload/anatomy.png -------------------------------------------------------------------------------- /packages/storybook/assets/components/form-field/anatomy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ovh/design-system/2499ec45e5c43cbd03e88bcb348a801fb7960d7a/packages/storybook/assets/components/form-field/anatomy.png -------------------------------------------------------------------------------- /packages/storybook/assets/components/icon/anatomy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ovh/design-system/2499ec45e5c43cbd03e88bcb348a801fb7960d7a/packages/storybook/assets/components/icon/anatomy.png -------------------------------------------------------------------------------- /packages/storybook/assets/components/input/anatomy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ovh/design-system/2499ec45e5c43cbd03e88bcb348a801fb7960d7a/packages/storybook/assets/components/input/anatomy.png -------------------------------------------------------------------------------- /packages/storybook/assets/components/link/anatomy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ovh/design-system/2499ec45e5c43cbd03e88bcb348a801fb7960d7a/packages/storybook/assets/components/link/anatomy.png -------------------------------------------------------------------------------- /packages/storybook/assets/components/medium/anatomy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ovh/design-system/2499ec45e5c43cbd03e88bcb348a801fb7960d7a/packages/storybook/assets/components/medium/anatomy.png -------------------------------------------------------------------------------- /packages/storybook/assets/components/message/anatomy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ovh/design-system/2499ec45e5c43cbd03e88bcb348a801fb7960d7a/packages/storybook/assets/components/message/anatomy.png -------------------------------------------------------------------------------- /packages/storybook/assets/components/modal/anatomy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ovh/design-system/2499ec45e5c43cbd03e88bcb348a801fb7960d7a/packages/storybook/assets/components/modal/anatomy.png -------------------------------------------------------------------------------- /packages/storybook/assets/components/pagination/anatomy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ovh/design-system/2499ec45e5c43cbd03e88bcb348a801fb7960d7a/packages/storybook/assets/components/pagination/anatomy.png -------------------------------------------------------------------------------- /packages/storybook/assets/components/password/anatomy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ovh/design-system/2499ec45e5c43cbd03e88bcb348a801fb7960d7a/packages/storybook/assets/components/password/anatomy.png -------------------------------------------------------------------------------- /packages/storybook/assets/components/phone-number/anatomy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ovh/design-system/2499ec45e5c43cbd03e88bcb348a801fb7960d7a/packages/storybook/assets/components/phone-number/anatomy.png -------------------------------------------------------------------------------- /packages/storybook/assets/components/popover/anatomy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ovh/design-system/2499ec45e5c43cbd03e88bcb348a801fb7960d7a/packages/storybook/assets/components/popover/anatomy.png -------------------------------------------------------------------------------- /packages/storybook/assets/components/progress-bar/anatomy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ovh/design-system/2499ec45e5c43cbd03e88bcb348a801fb7960d7a/packages/storybook/assets/components/progress-bar/anatomy.png -------------------------------------------------------------------------------- /packages/storybook/assets/components/quantity/anatomy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ovh/design-system/2499ec45e5c43cbd03e88bcb348a801fb7960d7a/packages/storybook/assets/components/quantity/anatomy.png -------------------------------------------------------------------------------- /packages/storybook/assets/components/radio/anatomy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ovh/design-system/2499ec45e5c43cbd03e88bcb348a801fb7960d7a/packages/storybook/assets/components/radio/anatomy.png -------------------------------------------------------------------------------- /packages/storybook/assets/components/range/anatomy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ovh/design-system/2499ec45e5c43cbd03e88bcb348a801fb7960d7a/packages/storybook/assets/components/range/anatomy.png -------------------------------------------------------------------------------- /packages/storybook/assets/components/select/anatomy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ovh/design-system/2499ec45e5c43cbd03e88bcb348a801fb7960d7a/packages/storybook/assets/components/select/anatomy.png -------------------------------------------------------------------------------- /packages/storybook/assets/components/skeleton/anatomy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ovh/design-system/2499ec45e5c43cbd03e88bcb348a801fb7960d7a/packages/storybook/assets/components/skeleton/anatomy.png -------------------------------------------------------------------------------- /packages/storybook/assets/components/spinner/anatomy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ovh/design-system/2499ec45e5c43cbd03e88bcb348a801fb7960d7a/packages/storybook/assets/components/spinner/anatomy.png -------------------------------------------------------------------------------- /packages/storybook/assets/components/switch/anatomy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ovh/design-system/2499ec45e5c43cbd03e88bcb348a801fb7960d7a/packages/storybook/assets/components/switch/anatomy.png -------------------------------------------------------------------------------- /packages/storybook/assets/components/table/anatomy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ovh/design-system/2499ec45e5c43cbd03e88bcb348a801fb7960d7a/packages/storybook/assets/components/table/anatomy.png -------------------------------------------------------------------------------- /packages/storybook/assets/components/tabs/anatomy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ovh/design-system/2499ec45e5c43cbd03e88bcb348a801fb7960d7a/packages/storybook/assets/components/tabs/anatomy.png -------------------------------------------------------------------------------- /packages/storybook/assets/components/tag/anatomy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ovh/design-system/2499ec45e5c43cbd03e88bcb348a801fb7960d7a/packages/storybook/assets/components/tag/anatomy.png -------------------------------------------------------------------------------- /packages/storybook/assets/components/text/anatomy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ovh/design-system/2499ec45e5c43cbd03e88bcb348a801fb7960d7a/packages/storybook/assets/components/text/anatomy.png -------------------------------------------------------------------------------- /packages/storybook/assets/components/textarea/anatomy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ovh/design-system/2499ec45e5c43cbd03e88bcb348a801fb7960d7a/packages/storybook/assets/components/textarea/anatomy.png -------------------------------------------------------------------------------- /packages/storybook/assets/components/timepicker/anatomy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ovh/design-system/2499ec45e5c43cbd03e88bcb348a801fb7960d7a/packages/storybook/assets/components/timepicker/anatomy.png -------------------------------------------------------------------------------- /packages/storybook/assets/components/toggle/anatomy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ovh/design-system/2499ec45e5c43cbd03e88bcb348a801fb7960d7a/packages/storybook/assets/components/toggle/anatomy.png -------------------------------------------------------------------------------- /packages/storybook/assets/components/tooltip/anatomy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ovh/design-system/2499ec45e5c43cbd03e88bcb348a801fb7960d7a/packages/storybook/assets/components/tooltip/anatomy.png -------------------------------------------------------------------------------- /packages/storybook/assets/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ovh/design-system/2499ec45e5c43cbd03e88bcb348a801fb7960d7a/packages/storybook/assets/favicon.ico -------------------------------------------------------------------------------- /packages/storybook/assets/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ovh/design-system/2499ec45e5c43cbd03e88bcb348a801fb7960d7a/packages/storybook/assets/favicon.png -------------------------------------------------------------------------------- /packages/storybook/assets/github_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ovh/design-system/2499ec45e5c43cbd03e88bcb348a801fb7960d7a/packages/storybook/assets/github_logo.png -------------------------------------------------------------------------------- /packages/storybook/assets/ods_bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ovh/design-system/2499ec45e5c43cbd03e88bcb348a801fb7960d7a/packages/storybook/assets/ods_bg.png -------------------------------------------------------------------------------- /packages/storybook/src/components/banner/banner.module.css: -------------------------------------------------------------------------------- 1 | .banner { 2 | position: relative; 3 | margin-top: -1.5rem; 4 | border-radius: 0 0 1rem 1rem; 5 | background-color: var(--ods-color-primary-500); 6 | padding: 1.25rem; 7 | min-height: 5rem; 8 | color: var(--ods-color-primary-000); 9 | } 10 | -------------------------------------------------------------------------------- /packages/storybook/src/components/bestPractices/bestPractices.module.css: -------------------------------------------------------------------------------- 1 | .best-practices__do-table, 2 | .best-practices__dont-table { 3 | width: 100%; 4 | } 5 | 6 | .best-practices__do-table__cell { 7 | background-color: var(--ods-color-success-050); 8 | } 9 | 10 | .best-practices__dont-table__cell { 11 | background-color: var(--ods-color-critical-050); 12 | } 13 | -------------------------------------------------------------------------------- /packages/storybook/src/components/canvasWithoutContext/canvasWithoutContext.module.css: -------------------------------------------------------------------------------- 1 | .canvas-without-context [scale="1"] { 2 | transform: none; 3 | } 4 | -------------------------------------------------------------------------------- /packages/storybook/src/components/heading/heading.module.css: -------------------------------------------------------------------------------- 1 | .heading-1, 2 | .heading-2, 3 | .heading-3, 4 | .heading-4, 5 | .heading-5, 6 | .heading-6 { 7 | display: flex; 8 | flex-flow: row; 9 | align-items: center; 10 | margin-bottom: 0; 11 | color: var(--ods-color-primary-800); 12 | } 13 | -------------------------------------------------------------------------------- /packages/storybook/src/components/identityCard/identityCard.module.css: -------------------------------------------------------------------------------- 1 | .identity-card { 2 | display: grid; 3 | grid-template-columns: 1.5fr 1fr; 4 | column-gap: 2rem; 5 | } 6 | 7 | .identity-card__table { 8 | align-self: flex-start; 9 | text-align: left; 10 | } 11 | 12 | .identity-card__atomic-link { 13 | text-transform: capitalize; 14 | } 15 | 16 | .identity-card__app-link { 17 | display: block; 18 | } 19 | -------------------------------------------------------------------------------- /packages/storybook/src/components/technicalSpecification/technicalSpecification.module.css: -------------------------------------------------------------------------------- 1 | .technical-specification__enums__keys { 2 | display: flex; 3 | flex-flow: column; 4 | row-gap: 1rem; 5 | padding: 0 20px; 6 | } 7 | 8 | .technical-specification__enums__keys__name { 9 | font-weight: bold; 10 | } 11 | -------------------------------------------------------------------------------- /packages/storybook/src/constants/atomicDesign.ts: -------------------------------------------------------------------------------- 1 | enum ATOMIC_TYPE { 2 | atom = 'atom', 3 | molecule = 'molecule', 4 | organism = 'organism', 5 | quark = 'Quark', 6 | } 7 | 8 | export { 9 | ATOMIC_TYPE, 10 | }; 11 | -------------------------------------------------------------------------------- /packages/storybook/src/constants/controls.ts: -------------------------------------------------------------------------------- 1 | enum CONTROL_CATEGORY { 2 | accessibility = 'Accessibility', 3 | design = 'Design', 4 | general = 'General', 5 | slot = 'Slot', 6 | validation = 'Validation', 7 | } 8 | 9 | export { 10 | CONTROL_CATEGORY, 11 | }; 12 | -------------------------------------------------------------------------------- /packages/storybook/src/hooks/withResetRoot.ts: -------------------------------------------------------------------------------- 1 | const resetRoot = () => { 2 | const storybookRoot = document.querySelector('#storybook-root'); 3 | if (storybookRoot) { 4 | storybookRoot.innerHTML = ''; 5 | } 6 | }; 7 | 8 | const withResetRoot = (storyFn: any) => { 9 | resetRoot(); 10 | return storyFn(); 11 | }; 12 | 13 | export { 14 | withResetRoot, 15 | }; 16 | -------------------------------------------------------------------------------- /packages/storybook/stories/components/medium/migration.from.17.x.mdx: -------------------------------------------------------------------------------- 1 | import { Meta } from '@storybook/blocks'; 2 | import * as MediumStories from './medium.stories'; 3 | import { Heading } from '../../../src/components/heading/Heading'; 4 | 5 | 6 | 7 | 8 | 9 | There are no changes between v17 and v18 for this component. 10 | -------------------------------------------------------------------------------- /packages/storybook/stories/ovhcloud-design-system/home.mdx: -------------------------------------------------------------------------------- 1 | import { Meta } from '@storybook/blocks'; 2 | import { Homepage } from '../../src/components/homepage/Homepage'; 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /packages/storybook/stories/ovhcloud-design-system/whatsnew/changelog.mdx: -------------------------------------------------------------------------------- 1 | import { Markdown, Meta } from '@storybook/blocks'; 2 | import ChangeLog from '../../../../../CHANGELOG.md?raw'; // TODO weird reference 3 | 4 | 5 | 6 | { ChangeLog } 7 | -------------------------------------------------------------------------------- /packages/themes/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | dist/ 4 | 5 | # Log files 6 | npm-debug.log* 7 | yarn-debug.log* 8 | yarn-error.log* 9 | pnpm-debug.log* 10 | 11 | # Editor directories and files 12 | .idea 13 | .vscode 14 | *.suo 15 | *.ntvs* 16 | *.njsproj 17 | *.sln 18 | *.sw? 19 | -------------------------------------------------------------------------------- /packages/themes/.npmignore: -------------------------------------------------------------------------------- 1 | !dist/ 2 | -------------------------------------------------------------------------------- /packages/themes/assets/fonts/ods-icon/icomoon/icomoon.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ovh/design-system/2499ec45e5c43cbd03e88bcb348a801fb7960d7a/packages/themes/assets/fonts/ods-icon/icomoon/icomoon.eot -------------------------------------------------------------------------------- /packages/themes/assets/fonts/ods-icon/icomoon/icomoon.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ovh/design-system/2499ec45e5c43cbd03e88bcb348a801fb7960d7a/packages/themes/assets/fonts/ods-icon/icomoon/icomoon.ttf -------------------------------------------------------------------------------- /packages/themes/assets/fonts/ods-icon/icomoon/icomoon.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ovh/design-system/2499ec45e5c43cbd03e88bcb348a801fb7960d7a/packages/themes/assets/fonts/ods-icon/icomoon/icomoon.woff -------------------------------------------------------------------------------- /packages/themes/src/index.ts: -------------------------------------------------------------------------------- 1 | enum ODS_THEME { 2 | default = 'default', 3 | } 4 | 5 | const ODS_THEMES = Object.freeze(Object.values(ODS_THEME)); 6 | 7 | export { 8 | ODS_THEME, 9 | ODS_THEMES, 10 | }; 11 | -------------------------------------------------------------------------------- /scripts/component-generator/templates/component/.gitignore: -------------------------------------------------------------------------------- 1 | # Local Stencil command generates external ods component build at the root of the project 2 | # Excluding them is a temporary solution to avoid pushing generated files 3 | # But the issue may cause main build (ods-component package) to fails, as it detects multiples occurences 4 | # of the same component and thus you have to delete all those generated dir manually 5 | */src/ 6 | -------------------------------------------------------------------------------- /scripts/component-generator/templates/component/custom-elements-manifest.config.mjs: -------------------------------------------------------------------------------- 1 | import cemEnumPlugin from '../../../scripts/cem-enum-plugin.mjs'; 2 | 3 | export default { 4 | globs: ['src/**/*.+(ts|tsx)'], 5 | outdir: 'documentation', 6 | plugins: [cemEnumPlugin()], 7 | stencil: true, 8 | }; 9 | -------------------------------------------------------------------------------- /scripts/component-generator/templates/component/src/components/ods-{{>component-name}}/ods-{{>component-name}}.scss.hbs: -------------------------------------------------------------------------------- 1 | :host(.ods-{{> component-name }}) { 2 | // Style to apply directly to the Host element 3 | } 4 | 5 | .ods-{{> component-name }} { 6 | // BEM elements and modifiers 7 | } 8 | -------------------------------------------------------------------------------- /scripts/component-generator/templates/component/src/globals.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Import here all the external ODS component that you need to run the current component 3 | * when running dev server (yarn start) or e2e tests 4 | * 5 | * ex: 6 | * import '../../text/src'; 7 | */ 8 | -------------------------------------------------------------------------------- /scripts/component-generator/templates/component/src/index.ts.hbs: -------------------------------------------------------------------------------- 1 | export { Ods{{> ComponentName }} } from './components/ods-{{> component-name }}/ods-{{> component-name }}'; 2 | -------------------------------------------------------------------------------- /scripts/component-generator/templates/component/stencil.config.ts.hbs: -------------------------------------------------------------------------------- 1 | import { getStencilConfig } from '../../config/stencil'; 2 | 3 | export const config = getStencilConfig({ 4 | args: process.argv.slice(2), 5 | componentCorePackage: '@ovhcloud/ods-component-{{> component-name }}', 6 | namespace: 'ods-{{> component-name }}', 7 | }); 8 | -------------------------------------------------------------------------------- /scripts/component-generator/templates/component/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tsconfig.json", 3 | "include": [ 4 | "src", 5 | "tests" 6 | ] 7 | } 8 | -------------------------------------------------------------------------------- /scripts/component-generator/templates/react/tests/_app/src/components/ods-{{>component-name}}.tsx.hbs: -------------------------------------------------------------------------------- 1 | import React from 'react-dom/client'; 2 | import { Ods{{> ComponentName }} } from 'ods-components-react'; 3 | 4 | const {{> ComponentName }} = () => { 5 | return ( 6 | ComponentName }} /> 7 | ); 8 | }; 9 | 10 | export default {{> ComponentName }}; 11 | -------------------------------------------------------------------------------- /scripts/component-generator/templates/vue/tests/_app/src/components/ods-{{>component-name}}.vue.hbs: -------------------------------------------------------------------------------- 1 | 4 | 5 | 16 | --------------------------------------------------------------------------------