diff --git a/packages/carbon-web-components/.storybook/main.js b/packages/carbon-web-components/.storybook/main.js index 3e45df0723d..c4d29448004 100644 --- a/packages/carbon-web-components/.storybook/main.js +++ b/packages/carbon-web-components/.storybook/main.js @@ -1,7 +1,7 @@ /** * @license * - * Copyright IBM Corp. 2020, 2023 + * Copyright IBM Corp. 2020, 2022 * * This source code is licensed under the Apache-2.0 license found in the * LICENSE file in the root directory of this source tree. @@ -171,9 +171,9 @@ module.exports = { if (!config.resolve.alias) { config.resolve.alias = {}; } - // In our development environment (where `@carbon/web-components/es/icons` may not have been built yet), + // In our development environment (where `carbon-web-components/es/icons` may not have been built yet), // we load icons from `@carbon/icons` and use a WebPack loader to convert the icons to `lit-html` version - config.resolve.alias['@carbon/web-components/es/icons'] = + config.resolve.alias['carbon-web-components/es/icons'] = '@carbon/icons/lib'; return config; diff --git a/packages/carbon-web-components/README.md b/packages/carbon-web-components/README.md index fe5e53c0a37..2af6280cd18 100644 --- a/packages/carbon-web-components/README.md +++ b/packages/carbon-web-components/README.md @@ -23,13 +23,13 @@ with no framework tax, no framework silo.

-# `@carbon/web-components` +# `carbon-web-components` -`@carbon/web-components` is a variant of Carbon Design System with Custom +`carbon-web-components` is a variant of Carbon Design System with Custom Elements v1 and Shadow DOM v1 specs. -> The original repository, `carbon-web-components`, has been archived. All -> future work for the package will take place in this monorepo. Please visit the +> The original `carbon-web-components` repository has been archived. All future +> work for the package will take place in this monorepo. Please visit the > [original repository](https://github.com/carbon-design-system/carbon-web-components) > for full history of the files. @@ -294,7 +294,7 @@ import { AppComponent } from './app.component'; export class AppModule {} ``` -The `.d.ts` files in `@carbon/web-components` package are compiled with +The `.d.ts` files in `carbon-web-components` package are compiled with TypeScript 3.7. You can use TypeScript 3.7 in your Angular application with upcoming Angular `9.0` release, or with the following instructions, so your application can use those `.d.ts` files: @@ -312,7 +312,7 @@ application can use those `.d.ts` files: [![Edit carbon-web-components with React](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-web-components/tree/main/examples/codesandbox/react) You can use wrapper React components in -`@carbon/web-components/es/components-react` generated +`carbon-web-components/es/components-react` generated [automatically from the custom elements](./src/globals/wrappers/createReactCustomElementType.ts) which allows you to use our components seamlessly in your React code. Here's an example: diff --git a/packages/carbon-web-components/docs/form.md b/packages/carbon-web-components/docs/form.md index 2d52546c5ea..a4668bd5447 100644 --- a/packages/carbon-web-components/docs/form.md +++ b/packages/carbon-web-components/docs/form.md @@ -33,12 +33,12 @@ You can use our form components with Redux Form by creating a React component th ```javascript import { Field } from 'redux-form'; -import BXFormItem from '@carbon/web-components/es/components-react/form/form-item'; -import BXInput from '@carbon/web-components/es/components-react/input/input'; +import BXFormItem from 'carbon-web-components/es/components-react/form/form-item'; +import BXInput from 'carbon-web-components/es/components-react/input/input'; ... -// A React component that wraps form components from `@carbon/web-components` +// A React component that wraps form components from `carbon-web-components` const FieldImpl = ({ input, label, type, meta: { touched, error } }) => { const validityMessage = !touched ? undefined : error; return ( diff --git a/packages/carbon-web-components/docs/styling-story.mdx b/packages/carbon-web-components/docs/styling-story.mdx index a597b5cc24d..b7f095489d2 100644 --- a/packages/carbon-web-components/docs/styling-story.mdx +++ b/packages/carbon-web-components/docs/styling-story.mdx @@ -92,7 +92,7 @@ You can create a derived class of our component and override [static `styles` pr ```javascript import { css, customElement } from 'lit-element'; -import BXDropdown from '@carbon/web-components/es/components/dropdown/dropdown'; +import BXDropdown from 'carbon-web-components/es/components/dropdown/dropdown'; @customElement('my-dropdown') class MyDropdown extends BXDropdown { diff --git a/packages/carbon-web-components/docs/styling.md b/packages/carbon-web-components/docs/styling.md index a23cacd71f1..74e6ee08443 100644 --- a/packages/carbon-web-components/docs/styling.md +++ b/packages/carbon-web-components/docs/styling.md @@ -1,6 +1,6 @@ # Using custom styles in components -As Shadow DOM (one of the Web Components specs that `@carbon/web-components` uses) promises, styles that `@carbon/web-components` defines does not affect styles in your application, or vice versa. +As Shadow DOM (one of the Web Components specs that `carbon-web-components` uses) promises, styles that `carbon-web-components` defines does not affect styles in your application, or vice versa. However, in cases where your application or a Carbon-derived style guide wants to change the styles of our components, there are a few options. @@ -93,7 +93,7 @@ You can create a derived class of our component and override [static `styles` pr ```javascript import { css, customElement } from 'lit-element'; -import BXDropdown from '@carbon/web-components/es/components/dropdown/dropdown'; +import BXDropdown from 'carbon-web-components/es/components/dropdown/dropdown'; @customElement('my-dropdown') class MyDropdown extends BXDropdown { diff --git a/packages/carbon-web-components/docs/welcome-story.mdx b/packages/carbon-web-components/docs/welcome-story.mdx index 8feb0f7cdae..de54ef5e952 100644 --- a/packages/carbon-web-components/docs/welcome-story.mdx +++ b/packages/carbon-web-components/docs/welcome-story.mdx @@ -60,8 +60,8 @@ The first thing you need is **setting up a module bundler** to resolve ECMAScrip Once you set up a module bundler, you can start importing our component modules, for example: ```javascript -import '@carbon/web-components/es/components/dropdown/dropdown'; -import '@carbon/web-components/es/components/dropdown/dropdown-item'; +import 'carbon-web-components/es/components/dropdown/dropdown'; +import 'carbon-web-components/es/components/dropdown/dropdown-item'; ``` Once you've imported the component modules, you can use our components in the same manner as native HTML tags, for example: diff --git a/packages/carbon-web-components/src/components/button/button-story.ts b/packages/carbon-web-components/src/components/button/button-story.ts index 4ab3bbfe311..92303290e18 100644 --- a/packages/carbon-web-components/src/components/button/button-story.ts +++ b/packages/carbon-web-components/src/components/button/button-story.ts @@ -1,7 +1,7 @@ /** * @license * - * Copyright IBM Corp. 2019, 2023 + * Copyright IBM Corp. 2019, 2022 * * This source code is licensed under the Apache-2.0 license found in the * LICENSE file in the root directory of this source tree. @@ -10,10 +10,10 @@ import { html } from 'lit-html'; import { action } from '@storybook/addon-actions'; import { boolean, select } from '@storybook/addon-knobs'; -// Below path will be there when an application installs `@carbon/web-components` package. +// Below path will be there when an application installs `carbon-web-components` package. // In our dev env, we auto-generate the file and re-map below path to to point to the generated file. // @ts-ignore -import Add16 from '@carbon/web-components/es/icons/add/16'; +import Add16 from 'carbon-web-components/es/icons/add/16'; import ifNonNull from '../../globals/directives/if-non-null'; import { BUTTON_KIND, BUTTON_SIZE, BUTTON_ICON_LAYOUT } from './button'; import './button-skeleton'; diff --git a/packages/carbon-web-components/src/components/data-table/data-table-story.ts b/packages/carbon-web-components/src/components/data-table/data-table-story.ts index 231b0c697aa..a4dfdba9075 100644 --- a/packages/carbon-web-components/src/components/data-table/data-table-story.ts +++ b/packages/carbon-web-components/src/components/data-table/data-table-story.ts @@ -1,7 +1,7 @@ /** * @license * - * Copyright IBM Corp. 2019, 2023 + * Copyright IBM Corp. 2019, 2022 * * This source code is licensed under the Apache-2.0 license found in the * LICENSE file in the root directory of this source tree. @@ -12,14 +12,14 @@ import { html, property, LitElement } from 'lit-element'; import { repeat } from 'lit-html/directives/repeat'; import { action } from '@storybook/addon-actions'; import { boolean, select } from '@storybook/addon-knobs'; -// Below path will be there when an application installs `@carbon/web-components` package. +// Below path will be there when an application installs `carbon-web-components` package. // In our dev env, we auto-generate the file and re-map below path to to point to the generated file. // @ts-ignore -import Delete16 from '@carbon/web-components/es/icons/delete/16'; +import Delete16 from 'carbon-web-components/es/icons/delete/16'; // @ts-ignore -import Download16 from '@carbon/web-components/es/icons/download/16'; +import Download16 from 'carbon-web-components/es/icons/download/16'; // @ts-ignore -import Settings16 from '@carbon/web-components/es/icons/settings/16'; +import Settings16 from 'carbon-web-components/es/icons/settings/16'; import BXBtn from '../button/button'; import ifNonNull from '../../globals/directives/if-non-null'; import '../overflow-menu/overflow-menu'; @@ -114,9 +114,9 @@ class BXCEDemoDataTable extends LitElement { * @param lhs A value. * @param rhs Another value. * @returns - * `0` if the given two values are equal - * A negative value to sort `lhs` to an index lower than `rhs` - * A positive value to sort `rhs` to an index lower than `lhs` + * * `0` if the given two values are equal + * * A negative value to sort `lhs` to an index lower than `rhs` + * * A positive value to sort `rhs` to an index lower than `lhs` */ private _compare(lhs, rhs) { if (typeof lhs === 'number' && typeof rhs === 'number') { diff --git a/packages/carbon-web-components/src/components/icon/icon-story.ts b/packages/carbon-web-components/src/components/icon/icon-story.ts index dbe56261ddc..75f16fd0026 100644 --- a/packages/carbon-web-components/src/components/icon/icon-story.ts +++ b/packages/carbon-web-components/src/components/icon/icon-story.ts @@ -1,7 +1,7 @@ /** * @license * - * Copyright IBM Corp. 2019, 2023 + * Copyright IBM Corp. 2019, 2022 * * This source code is licensed under the Apache-2.0 license found in the * LICENSE file in the root directory of this source tree. @@ -9,16 +9,16 @@ import { html, svg } from 'lit-html'; -// Below path will be there when an application installs `@carbon/web-components` package. +// Below path will be there when an application installs `carbon-web-components` package. // In our dev env, we auto-generate the file and re-map below path to to point to the generated file. // @ts-ignore -import Add16 from '@carbon/web-components/es/icons/add/16'; +import Add16 from 'carbon-web-components/es/icons/add/16'; // @ts-ignore -import Add20 from '@carbon/web-components/es/icons/add/20'; +import Add20 from 'carbon-web-components/es/icons/add/20'; // @ts-ignore -import Add24 from '@carbon/web-components/es/icons/add/24'; +import Add24 from 'carbon-web-components/es/icons/add/24'; // @ts-ignore -import Add32 from '@carbon/web-components/es/icons/add/32'; +import Add32 from 'carbon-web-components/es/icons/add/32'; import storyDocs from './icon-story.mdx'; diff --git a/packages/carbon-web-components/src/components/link/link-story.ts b/packages/carbon-web-components/src/components/link/link-story.ts index 5bc44a56b94..9708bea7a97 100644 --- a/packages/carbon-web-components/src/components/link/link-story.ts +++ b/packages/carbon-web-components/src/components/link/link-story.ts @@ -1,7 +1,7 @@ /** * @license * - * Copyright IBM Corp. 2019, 2023 + * Copyright IBM Corp. 2019, 2022 * * This source code is licensed under the Apache-2.0 license found in the * LICENSE file in the root directory of this source tree. @@ -10,10 +10,10 @@ import { html } from 'lit-element'; import { action } from '@storybook/addon-actions'; import { boolean, select } from '@storybook/addon-knobs'; -// Below path will be there when an application installs `@carbon/web-components` package. +// Below path will be there when an application installs `carbon-web-components` package. // In our dev env, we auto-generate the file and re-map below path to to point to the generated file. // @ts-ignore -import Download16 from '@carbon/web-components/es/icons/download/16'; +import Download16 from 'carbon-web-components/es/icons/download/16'; import textNullable from '../../../.storybook/knob-text-nullable'; import ifNonNull from '../../globals/directives/if-non-null'; import { LINK_SIZE } from './link'; diff --git a/packages/carbon-web-components/src/components/tooltip/tooltip-story.ts b/packages/carbon-web-components/src/components/tooltip/tooltip-story.ts index 90173311e52..258612d903f 100644 --- a/packages/carbon-web-components/src/components/tooltip/tooltip-story.ts +++ b/packages/carbon-web-components/src/components/tooltip/tooltip-story.ts @@ -1,7 +1,7 @@ /** * @license * - * Copyright IBM Corp. 2019, 2023 + * Copyright IBM Corp. 2019, 2022 * * This source code is licensed under the Apache-2.0 license found in the * LICENSE file in the root directory of this source tree. @@ -9,10 +9,10 @@ import { html } from 'lit-element'; import { boolean, select } from '@storybook/addon-knobs'; -// Below path will be there when an application installs `@carbon/web-components` package. +// Below path will be there when an application installs `carbon-web-components` package. // In our dev env, we auto-generate the file and re-map below path to to point to the generated file. // @ts-ignore -import Filter16 from '@carbon/web-components/es/icons/filter/16'; +import Filter16 from 'carbon-web-components/es/icons/filter/16'; import textNullable from '../../../.storybook/knob-text-nullable'; import ifNonNull from '../../globals/directives/if-non-null'; import '../button/button'; diff --git a/packages/carbon-web-components/src/components/ui-shell/ui-shell-story.ts b/packages/carbon-web-components/src/components/ui-shell/ui-shell-story.ts index 9c3d01bcf9f..665a203183e 100644 --- a/packages/carbon-web-components/src/components/ui-shell/ui-shell-story.ts +++ b/packages/carbon-web-components/src/components/ui-shell/ui-shell-story.ts @@ -1,7 +1,7 @@ /** * @license * - * Copyright IBM Corp. 2019, 2023 + * Copyright IBM Corp. 2019, 2022 * * This source code is licensed under the Apache-2.0 license found in the * LICENSE file in the root directory of this source tree. @@ -9,10 +9,10 @@ import { html } from 'lit-element'; import { boolean, select } from '@storybook/addon-knobs'; -// Below path will be there when an application installs `@carbon/web-components` package. +// Below path will be there when an application installs `carbon-web-components` package. // In our dev env, we auto-generate the file and re-map below path to to point to the generated file. // @ts-ignore -import Fade16 from '@carbon/web-components/es/icons/fade/16'; +import Fade16 from 'carbon-web-components/es/icons/fade/16'; import contentStyles from 'carbon-components/scss/components/ui-shell/_content.scss'; import textNullable from '../../../.storybook/knob-text-nullable'; import ifNonNull from '../../globals/directives/if-non-null'; diff --git a/packages/carbon-web-components/tests/karma.conf.js b/packages/carbon-web-components/tests/karma.conf.js index 006d37d894d..15a3d3fb77d 100644 --- a/packages/carbon-web-components/tests/karma.conf.js +++ b/packages/carbon-web-components/tests/karma.conf.js @@ -1,7 +1,7 @@ /** * @license * - * Copyright IBM Corp. 2019, 2023 + * Copyright IBM Corp. 2019, 2022 * * This source code is licensed under the Apache-2.0 license found in the * LICENSE file in the root directory of this source tree. @@ -68,9 +68,9 @@ module.exports = function setupKarma(config) { devtool: 'inline-source-maps', resolve: { alias: { - // In our development environment (where `@carbon/web-components/es/icons` may not have been built yet), + // In our development environment (where `carbon-web-components/es/icons` may not have been built yet), // we load icons from `@carbon/icons` and use a Webpack loader to convert the icons to `lit-html` version - '@carbon/web-components/es/icons': '@carbon/icons/lib', + 'carbon-web-components/es/icons': '@carbon/icons/lib', }, extensions: ['.js', '.ts'], },