` attributes, properties and events
-
+
diff --git a/packages/carbon-web-components/src/components/pagination/pagination.stories.ts b/packages/carbon-web-components/src/components/pagination/pagination.stories.ts
new file mode 100644
index 00000000000..c42995cf2b7
--- /dev/null
+++ b/packages/carbon-web-components/src/components/pagination/pagination.stories.ts
@@ -0,0 +1,205 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2019, 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { html } from 'lit';
+import './index';
+import '../select/index';
+import storyDocs from './pagination.mdx';
+import { prefix } from '../../globals/settings';
+import { PAGINATION_SIZE } from './defs';
+
+const sizes = {
+ [`Small size (${PAGINATION_SIZE.SMALL})`]: PAGINATION_SIZE.SMALL,
+ [`Medium size (${PAGINATION_SIZE.MEDIUM})`]: PAGINATION_SIZE.MEDIUM,
+ [`Large size (${PAGINATION_SIZE.LARGE})`]: PAGINATION_SIZE.LARGE,
+};
+
+const args = {
+ backwardText: 'Previous page',
+ disabled: false,
+ forwardText: 'Next page',
+ isLastPage: false,
+ itemsPerPageText: 'Items per page:',
+ page: 1,
+ pageSize: 10,
+ pageInputDisabled: false,
+ pageSizeInputDisabled: false,
+ pagesUnknown: false,
+ size: PAGINATION_SIZE.MEDIUM,
+ totalItems: 103,
+};
+
+const argTypes = {
+ backwardText: {
+ control: 'text',
+ description: 'The description for the backward icon.',
+ },
+ disabled: {
+ control: 'boolean',
+ description:
+ 'true if the backward/forward buttons, as well as the page select elements, should be disabled.',
+ },
+ forwardText: {
+ control: 'text',
+ description: 'The description for the forward icon.',
+ },
+ isLastPage: {
+ control: 'boolean',
+ description:
+ 'true if the current page should be the last page.',
+ },
+ itemsPerPageText: {
+ control: 'text',
+ description: 'The text indicating the number of items per page.',
+ },
+ page: {
+ control: 'number',
+ description: 'The current page.',
+ },
+ pageSize: {
+ control: 'number',
+ description: 'The number dictating how many items a page contains.',
+ },
+ pageInputDisabled: {
+ control: 'boolean',
+ description:
+ 'true if the select box to change the page should be disabled.',
+ },
+ pageSizeInputDisabled: {
+ control: 'boolean',
+ description:
+ 'true if the select box to change the items per page should be disabled.',
+ },
+ pagesUnknown: {
+ control: 'boolean',
+ description: 'true if the total number of items is unknown.',
+ },
+ size: {
+ control: 'select',
+ description: 'Specify the size of the Pagination.',
+ options: sizes,
+ },
+ totalItems: {
+ control: 'number',
+ description: 'The total number of items.',
+ },
+ onChangedCurrent: {
+ action: `${prefix}-pagination-changed-current`,
+ },
+ onChangedPageSizesSelect: {
+ action: `${prefix}-page-sizes-select-changed`,
+ },
+};
+
+export const Default = {
+ render: () => {
+ return html`
+
+ 10
+ 20
+ 30
+ 40
+ 50
+
+ `;
+ },
+};
+
+export const MultiplePaginationComponents = {
+ render: () => {
+ return html`
+
+ 10
+ 20
+ 30
+ 40
+ 50
+
+
+ 10
+ 20
+ 30
+ 40
+ 50
+
+ `;
+ },
+};
+
+export const PaginationWithCustomPageSizesLabel = {
+ render: () => {
+ return html`
+
+ Ten
+ Twenty
+ Thirty
+ Forty
+ Fifty
+
+ `;
+ },
+};
+
+export const Playground = {
+ args,
+ argTypes,
+ render: (args) => {
+ const {
+ backwardText,
+ onChangedCurrent,
+ onChangedPageSizesSelect,
+ disabled,
+ forwardText,
+ isLastPage,
+ itemsPerPageText,
+ page,
+ pageInputDisabled,
+ pageSize,
+ pageSizeInputDisabled,
+ pagesUnknown,
+ size,
+ totalItems,
+ } = args ?? {};
+ return html`
+
+ 10
+ 20
+ 30
+ 40
+ 50
+
+ `;
+ },
+};
+
+const meta = {
+ title: 'Components/Pagination',
+ parameters: {
+ docs: {
+ page: storyDocs,
+ },
+ },
+ decorators: [(story) => html`${story()}
`],
+};
+
+export default meta;
diff --git a/packages/carbon-web-components/src/components/pagination/pagination.ts b/packages/carbon-web-components/src/components/pagination/pagination.ts
index 04486044b6a..e78551f1ff5 100644
--- a/packages/carbon-web-components/src/components/pagination/pagination.ts
+++ b/packages/carbon-web-components/src/components/pagination/pagination.ts
@@ -1,7 +1,7 @@
/**
* @license
*
- * Copyright IBM Corp. 2019, 2023
+ * Copyright IBM Corp. 2019, 2024
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
@@ -216,8 +216,8 @@ class CDSPagination extends FocusMixin(HostListenerMixin(LitElement)) {
/**
* true if the select box to change the page should be disabled.
*/
- @property({ attribute: 'page-input-disabled' })
- pageInputDisabled;
+ @property({ type: Boolean, attribute: 'page-input-disabled' })
+ pageInputDisabled = false;
/**
* Number of items per page.
diff --git a/packages/carbon-web-components/src/components/slug/slug-data-table-story.ts b/packages/carbon-web-components/src/components/slug/slug-data-table-story.ts
deleted file mode 100644
index 16af9651e5e..00000000000
--- a/packages/carbon-web-components/src/components/slug/slug-data-table-story.ts
+++ /dev/null
@@ -1,600 +0,0 @@
-/**
- * @license
- *
- * Copyright IBM Corp. 2019, 2023
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-import { html } from 'lit';
-import View16 from '@carbon/icons/lib/view/16';
-import FolderOpen16 from '@carbon/icons/lib/folder--open/16';
-import Folders16 from '@carbon/icons/lib/folders/16';
-import '../data-table/index';
-
-const content = html`
-
-
AI Explained
-
84%
-
Confidence score
-
- Lorem ipsum dolor sit amet, di os consectetur adipiscing elit, sed do
- eiusmod tempor incididunt ut fsil labore et dolore magna aliqua.
-
-
-
Model type
-
Foundation model
-
Expandable row content
- Description here
-
-
- Load Balancer 1
- HTTP
- 443
- Round robin
- Maureen's VM Groups
- Starting
-
-
- Expandable row content
- Description here
-
-
- Load Balancer 2
- HTTP
- 80
- DNS delegation
- Andrew's VM Groups
- Active
-
-
- Expandable row content
- Description here
-
-
- Load Balancer 6
- HTTP
- 3000
- Round robin
- Marc's VM Groups
- Disabled
-
-
- Expandable row content
- Description here
-
-
- Load Balancer 4
- HTTP
- 443
- Round robin
- Mel's VM Groups
- Starting
-
-
- Expandable row content
- Description here
-
-
- Load Balancer 5
- HTTP
- 80
- DNS delegation
- Ronja's VM Groups
- Active
-
-
- Expandable row content
- Description here
-
-
-
- `;
-};
-
-export const _SlugWithExpansion = () => {
- return html`
-
- DataTable
- With sorting
-
-
-
- Name
- Protocol
- Port
- Rule
- Attached groups
- Status
-
-
-
-
- Load Balancer 3
- HTTP
- 3000
- Round robin
- Kevin's VM Groups
- Disabled
-
-
- Expandable row content
- Description here
-
-
- ${content}${actions}
- Load Balancer 1
- HTTP
- 443
- Round robin
- Maureen's VM Groups
- Starting
-
-
- Expandable row content
- Description here
-
-
- Load Balancer 2
- HTTP
- 80
- DNS delegation
- Andrew's VM Groups
- Active
-
-
- Expandable row content
- Description here
-
-
- ${content}${actions}
- Load Balancer 6
- HTTP
- 3000
- Round robin
- Marc's VM Groups
- Disabled
-
-
- Expandable row content
- Description here
-
-
- ${content}${actions}
- Load Balancer 4
- HTTP
- 443
- Round robin
- Mel's VM Groups
- Starting
-
-
- Expandable row content
- Description here
-
-
- Load Balancer 5
- HTTP
- 80
- DNS delegation
- Ronja's VM Groups
- Active
-
-
- Expandable row content
- Description here
-
-
-
- `;
-};
-
-export const _SlugWithRadioSelection = () => {
- return html`
-
- DataTable
- With selection
-
-
-
- Name
- Protocol
- Port
- Rule
- Attached groups
- Status
-
-
-
-
- Load Balancer 3
- HTTP
- 3000
- Round robin
- Kevin's VM Groups
- Disabled
-
-
- ${content}${actions}
-
- Load Balancer 1
- HTTP
- 443
- Round robin
- Maureen's VM Groups
- Starting
-
-
- Load Balancer 2
- HTTP
- 80
- DNS delegation
- Andrew's VM Groups
- Active
-
-
- ${content}${actions}
-
- Load Balancer 6
- HTTP
- 3000
- Round robin
- Marc's VM Groups
- Disabled
-
-
- ${content}${actions}
-
- Load Balancer 4
- HTTP
- 443
- Round robin
- Mel's VM Groups
- Starting
-
-
- Load Balancer 5
- HTTP
- 80
- DNS delegation
- Ronja's VM Groups
- Active
-
-
-
- `;
-};
-
-export const SlugWithSelection = () => {
- return html`
-
- DataTable
- With selection
-
-
-
- Name
- Protocol
- Port
- Rule
- Attached groups
- Status
-
-
-
-
- Load Balancer 3
- HTTP
- 3000
- Round robin
- Kevin's VM Groups
- Disabled
-
-
- ${content}${actions}
- Load Balancer 1
- HTTP
- 443
- Round robin
- Maureen's VM Groups
- Starting
-
-
- Load Balancer 2
- HTTP
- 80
- DNS delegation
- Andrew's VM Groups
- Active
-
-
- ${content}${actions}
- Load Balancer 6
- HTTP
- 3000
- Round robin
- Marc's VM Groups
- Disabled
-
-
- ${content}${actions}
- Load Balancer 4
- HTTP
- 443
- Round robin
- Mel's VM Groups
- Starting
-
-
- Load Balancer 5
- HTTP
- 80
- DNS delegation
- Ronja's VM Groups
- Active
-
-
-
- `;
-};
-
-export const SlugWithSelectionAndExpansion = () => {
- return html`
-
- DataTable
- With selection
-
-
-
- Name
- Protocol
- Port
- Rule
- Attached groups
- Status
-
-
-
-
- Load Balancer 3
- HTTP
- 3000
- Round robin
- Kevin's VM Groups
- Disabled
-
-
- Expandable row content
- Description here
-
-
- ${content}${actions}
- Load Balancer 1
- HTTP
- 443
- Round robin
- Maureen's VM Groups
- Starting
-
-
- Expandable row content
- Description here
-
-
- Load Balancer 2
- HTTP
- 80
- DNS delegation
- Andrew's VM Groups
- Active
-
-
- Expandable row content
- Description here
-
-
- ${content}${actions}
- Load Balancer 6
- HTTP
- 3000
- Round robin
- Marc's VM Groups
- Disabled
-
-
- Expandable row content
- Description here
-
-
- ${content}${actions}
- Load Balancer 4
- HTTP
- 443
- Round robin
- Mel's VM Groups
- Starting
-
-
- Expandable row content
- Description here
-
-
- Load Balancer 5
- HTTP
- 80
- DNS delegation
- Ronja's VM Groups
- Active
-
-
- Expandable row content
- Description here
-
-
-
- `;
-};
diff --git a/packages/carbon-web-components/src/components/slug/slug-data-table.stories.ts b/packages/carbon-web-components/src/components/slug/slug-data-table.stories.ts
new file mode 100644
index 00000000000..fecce2f9a5d
--- /dev/null
+++ b/packages/carbon-web-components/src/components/slug/slug-data-table.stories.ts
@@ -0,0 +1,616 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2019, 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { html } from 'lit';
+import View16 from '@carbon/icons/lib/view/16';
+import FolderOpen16 from '@carbon/icons/lib/folder--open/16';
+import Folders16 from '@carbon/icons/lib/folders/16';
+import '../data-table/index';
+import '../icon-button/index';
+import '../link/index';
+
+const content = html`
+
+
AI Explained
+
84%
+
Confidence score
+
+ Lorem ipsum dolor sit amet, di os consectetur adipiscing elit, sed do
+ eiusmod tempor incididunt ut fsil labore et dolore magna aliqua.
+
+
+
Model type
+
Foundation model
+
Expandable row content
+ Description here
+
+
+ Load Balancer 1
+ HTTP
+ 443
+ Round robin
+ Maureen's VM Groups
+ Starting
+
+
+ Expandable row content
+ Description here
+
+
+ Load Balancer 2
+ HTTP
+ 80
+ DNS delegation
+ Andrew's VM Groups
+ Active
+
+
+ Expandable row content
+ Description here
+
+
+ Load Balancer 6
+ HTTP
+ 3000
+ Round robin
+ Marc's VM Groups
+ Disabled
+
+
+ Expandable row content
+ Description here
+
+
+ Load Balancer 4
+ HTTP
+ 443
+ Round robin
+ Mel's VM Groups
+ Starting
+
+
+ Expandable row content
+ Description here
+
+
+ Load Balancer 5
+ HTTP
+ 80
+ DNS delegation
+ Ronja's VM Groups
+ Active
+
+
+ Expandable row content
+ Description here
+
+
+
+ `;
+ },
+};
+
+export const _SlugWithExpansion = {
+ render: () => {
+ return html`
+
+ DataTable
+ With sorting
+
+
+
+ Name
+ Protocol
+ Port
+ Rule
+ Attached groups
+ Status
+
+
+
+
+ Load Balancer 3
+ HTTP
+ 3000
+ Round robin
+ Kevin's VM Groups
+ Disabled
+
+
+ Expandable row content
+ Description here
+
+
+ ${content}${actions}
+ Load Balancer 1
+ HTTP
+ 443
+ Round robin
+ Maureen's VM Groups
+ Starting
+
+
+ Expandable row content
+ Description here
+
+
+ Load Balancer 2
+ HTTP
+ 80
+ DNS delegation
+ Andrew's VM Groups
+ Active
+
+
+ Expandable row content
+ Description here
+
+
+ ${content}${actions}
+ Load Balancer 6
+ HTTP
+ 3000
+ Round robin
+ Marc's VM Groups
+ Disabled
+
+
+ Expandable row content
+ Description here
+
+
+ ${content}${actions}
+ Load Balancer 4
+ HTTP
+ 443
+ Round robin
+ Mel's VM Groups
+ Starting
+
+
+ Expandable row content
+ Description here
+
+
+ Load Balancer 5
+ HTTP
+ 80
+ DNS delegation
+ Ronja's VM Groups
+ Active
+
+
+ Expandable row content
+ Description here
+
+
+
+ `;
+ },
+};
+
+export const _SlugWithRadioSelection = {
+ render: () => {
+ return html`
+
+ DataTable
+ With selection
+
+
+
+ Name
+ Protocol
+ Port
+ Rule
+ Attached groups
+ Status
+
+
+
+
+ Load Balancer 3
+ HTTP
+ 3000
+ Round robin
+ Kevin's VM Groups
+ Disabled
+
+
+ ${content}${actions}
+
+ Load Balancer 1
+ HTTP
+ 443
+ Round robin
+ Maureen's VM Groups
+ Starting
+
+
+ Load Balancer 2
+ HTTP
+ 80
+ DNS delegation
+ Andrew's VM Groups
+ Active
+
+
+ ${content}${actions}
+
+ Load Balancer 6
+ HTTP
+ 3000
+ Round robin
+ Marc's VM Groups
+ Disabled
+
+
+ ${content}${actions}
+
+ Load Balancer 4
+ HTTP
+ 443
+ Round robin
+ Mel's VM Groups
+ Starting
+
+
+ Load Balancer 5
+ HTTP
+ 80
+ DNS delegation
+ Ronja's VM Groups
+ Active
+
+
+
+ `;
+ },
+};
+
+export const SlugWithSelection = {
+ render: () => {
+ return html`
+
+ DataTable
+ With selection
+
+
+
+ Name
+ Protocol
+ Port
+ Rule
+ Attached groups
+ Status
+
+
+
+
+ Load Balancer 3
+ HTTP
+ 3000
+ Round robin
+ Kevin's VM Groups
+ Disabled
+
+
+ ${content}${actions}
+ Load Balancer 1
+ HTTP
+ 443
+ Round robin
+ Maureen's VM Groups
+ Starting
+
+
+ Load Balancer 2
+ HTTP
+ 80
+ DNS delegation
+ Andrew's VM Groups
+ Active
+
+
+ ${content}${actions}
+ Load Balancer 6
+ HTTP
+ 3000
+ Round robin
+ Marc's VM Groups
+ Disabled
+
+
+ ${content}${actions}
+ Load Balancer 4
+ HTTP
+ 443
+ Round robin
+ Mel's VM Groups
+ Starting
+
+
+ Load Balancer 5
+ HTTP
+ 80
+ DNS delegation
+ Ronja's VM Groups
+ Active
+
+
+
+ `;
+ },
+};
+
+export const SlugWithSelectionAndExpansion = {
+ render: () => {
+ return html`
+
+ DataTable
+ With selection
+
+
+
+ Name
+ Protocol
+ Port
+ Rule
+ Attached groups
+ Status
+
+
+
+
+ Load Balancer 3
+ HTTP
+ 3000
+ Round robin
+ Kevin's VM Groups
+ Disabled
+
+
+ Expandable row content
+ Description here
+
+
+ ${content}${actions}
+ Load Balancer 1
+ HTTP
+ 443
+ Round robin
+ Maureen's VM Groups
+ Starting
+
+
+ Expandable row content
+ Description here
+
+
+ Load Balancer 2
+ HTTP
+ 80
+ DNS delegation
+ Andrew's VM Groups
+ Active
+
+
+ Expandable row content
+ Description here
+
+
+ ${content}${actions}
+ Load Balancer 6
+ HTTP
+ 3000
+ Round robin
+ Marc's VM Groups
+ Disabled
+
+
+ Expandable row content
+ Description here
+
+
+ ${content}${actions}
+ Load Balancer 4
+ HTTP
+ 443
+ Round robin
+ Mel's VM Groups
+ Starting
+
+
+ Expandable row content
+ Description here
+
+
+ Load Balancer 5
+ HTTP
+ 80
+ DNS delegation
+ Ronja's VM Groups
+ Active
+
+
+ Expandable row content
+ Description here
+
+
+
+ `;
+ },
+};
+
+const meta = {
+ title: 'Experimental/Slug/DataTable',
+};
+
+export default meta;
diff --git a/packages/carbon-web-components/src/components/slug/slug-example-story.ts b/packages/carbon-web-components/src/components/slug/slug-example-story.ts
deleted file mode 100644
index 4881b859498..00000000000
--- a/packages/carbon-web-components/src/components/slug/slug-example-story.ts
+++ /dev/null
@@ -1,614 +0,0 @@
-/**
- * @license
- *
- * Copyright IBM Corp. 2019, 2023
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-import { html } from 'lit';
-import { boolean } from '@storybook/addon-knobs';
-import View16 from '@carbon/icons/lib/view/16';
-import FolderOpen16 from '@carbon/icons/lib/folder--open/16';
-import Folders16 from '@carbon/icons/lib/folders/16';
-import Asleep16 from '@carbon/icons/lib/asleep/16';
-import textNullable from '../../../.storybook/knob-text-nullable';
-import { prefix } from '../../globals/settings';
-import './index';
-import '../icon-button/index';
-import styles from './slug-story.scss?lit';
-
-const items = [
- {
- value: 'option-0',
- text: 'Lorem, ipsum dolor sit amet consectetur adipisicing elit.',
- },
- {
- value: 'option-1',
- text: 'Option 1',
- },
- {
- value: 'option-2',
- text: 'Option 2',
- },
- {
- value: 'option-3',
- text: 'Option 3 - a disabled item',
- disabled: true,
- },
- {
- value: 'option-4',
- text: 'Option 4',
- },
- {
- value: 'option-5',
- text: 'Option 5',
- },
-];
-
-const content = html`
-
-
AI Explained
-
84%
-
Confidence score
-
- Lorem ipsum dolor sit amet, di os consectetur adipiscing elit, sed do
- eiusmod tempor incididunt ut fsil labore et dolore magna aliqua.
-
-
-
Model type
-
Foundation model
-
-
- ${content}${actions}
- Checkbox label
- Checkbox label
- Checkbox label
-
-
-
-
- Checkbox label
- ${content}${actions}
-
-
- Checkbox label
- ${content}${actions}
-
- Checkbox label
-
-
-
-
- Checkbox label
-
- ${content}${actions}
-
-
-
- Checkbox label
-
- ${content}${actions}
-
-
- Checkbox label
-
-
- `;
-};
-
-_Checkbox.parameters = {
- knobs: {
- [`${prefix}-checkbox`]: () => ({
- disabled: boolean('Disabled (disabled)', false),
- invalid: boolean('Invalid (invalid)', false),
- invalidText: textNullable(
- 'Invalid text (invalid-text)',
- 'Error message goes here'
- ),
- warn: boolean('Warn (warn)', false),
- warnText: textNullable(
- 'Warn text (warn-text)',
- 'Warning message that is really long can wrap to more lines but should not be excessively long.'
- ),
- }),
- },
-};
-
-export const _Combobox = () => {
- return html`
-
-
- ${content}${actions}
-
- Option 1
- Option 2
- Option 3
- Option 4
- Option 5
- Option 6
- Option 7
- Option 8
-
-
`;
-};
-
-export const _DatePicker = () => {
- return html`
-
-
-
- ${content}${actions}
-
-
-
`;
-};
-
-export const _Dropdown = () => {
- return html`
-
-
- ${content}${actions}
- ${items.map(
- (elem) => html`
- ${elem.text}
- `
- )}
-
-
`;
-};
-
-export const _Multiselect = () => {
- return html`
-
-
- ${content}${actions}
-
- An example option that is really long to show what should be done to
- handle long text
- Option 1
- Option 2
- Option 3 - a disabled item
- Option 4
- Option 5
-
-
`;
-};
-
-export const _FilterableMultiselect = () => {
- return html`
-
-
- ${content}${actions}
- An example option that is really long to show what should be done to
- handle long text
- Option 1
- Option 2
- Option 3 - a disabled item
- Option 4
- Option 5
-
-
`;
-};
-
-export const _NumberItem = () => {
- return html`
-
-
- ${content}${actions}
-
-
`;
-};
-
-export const _RadioButton = (args) => {
- const { disabled, invalid, invalidText, warn, warnText } =
- args?.['cds-radio-button'] ?? {};
-
- return html`
-
-
- ${content}${actions}
-
-
-
-
-
-
-
- ${content}${actions}
-
-
- ${content}${actions}
-
-
-
-
-
-
-
- ${content}${actions}
-
-
-
-
- ${content}${actions}
-
-
-
-
- `;
-};
-
-_RadioButton.parameters = {
- knobs: {
- [`${prefix}-radio-button`]: () => ({
- disabled: boolean('Disabled (disabled)', false),
- invalid: boolean('Invalid (invalid)', false),
- invalidText: textNullable(
- 'Invalid text (invalid-text)',
- 'Error message goes here'
- ),
- warn: boolean('Warn (warn)', false),
- warnText: textNullable(
- 'Warn text (warn-text)',
- 'Warning message that is really long can wrap to more lines but should not be excessively long.'
- ),
- }),
- },
-};
-
-export const _Select = () => {
- return html`
-
-
- ${content}${actions}
-
- Option 1
- Option 2
-
-
- Option 3
- Option 4
- Option 5
-
-
-
`;
-};
-
-const tagTypes = [
- 'red',
- 'magenta',
- 'purple',
- 'blue',
- 'cyan',
- 'teal',
- 'green',
- 'gray',
- 'cool-gray',
- 'warm-gray',
- 'high-contrast',
- 'outline',
-];
-
-export const _Tag = () => {
- return html`
-
-
- ${tagTypes.map(
- (e) => html`Tag
- ${content}${actions}
- `
- )}
-
-
-
- ${tagTypes.map(
- (e) =>
- html`
- Tag
- ${content}${actions}
- `
- )}
-
-
-
- ${tagTypes.map(
- (e) =>
- html`
- ${Asleep16({ slot: 'icon' })} Tag
- ${content}${actions}
- `
- )}
-
-
-
- ${tagTypes.map(
- (e) =>
- html`
- ${Asleep16({ slot: 'icon' })} Tag
- ${content}${actions}
- `
- )}
-
- `;
-};
-
-export const _TextInput = () => {
- return html`
-
-
- ${content}${actions}
-
-
`;
-};
-
-export const _TextArea = () => {
- return html`
-
-
- ${content}${actions}
-
-
`;
-};
-
-export const _Tile = (args) => {
- const { hasRoundedCorners } = args?.['cds-tile'] ?? {};
- return html`
-
-
-
-
Title
-
- Lorem ipsum dolor sit amet consectetur. Posuere duis fermentum sit
- at consectetur turpis mauris gravida penatibus.
-
-
-
-
-
-
-
Title
-
- Lorem ipsum dolor sit amet consectetur. Posuere duis fermentum sit
- at consectetur turpis mauris gravida penatibus.
-
-
-
-
-
-
-
Title
-
- Lorem ipsum dolor sit amet consectetur. Posuere duis fermentum sit
- at consectetur turpis mauris gravida penatibus.
-
-
-
-
-
-
-
-
Title
-
- Lorem ipsum dolor sit amet consectetur. Posuere duis fermentum sit
- at consectetur turpis mauris gravida penatibus.
-
-
-
Expanded Section
-
- Lorem ipsum dolor sit amet consectetur. Posuere duis fermentum sit
- at consectetur turpis mauris.
-
-
- ${content}${actions}
-
-
+
AI Explained
+
84%
+
Confidence score
+
+ Lorem ipsum dolor sit amet, di os consectetur adipiscing elit, sed do
+ eiusmod tempor incididunt ut fsil labore et dolore magna aliqua.
+
+
+
Model type
+
Foundation model
+
+
+ ${content}${actions}
+ Checkbox label
+ Checkbox label
+ Checkbox label
+
+
+
+
+ Checkbox label
+ ${content}${actions}
+
+
+ Checkbox label
+ ${content}${actions}
+
+ Checkbox label
+
+
+
+
+ Checkbox label
+
+ ${content}${actions}
+
+
+
+ Checkbox label
+
+ ${content}${actions}
+
+
+ Checkbox label
+
+
+ `;
+ },
+};
+
+export const _Combobox = {
+ render: () => {
+ return html`
+
+
+ ${content}${actions}
+
+ Option 1
+ Option 2
+ Option 3
+ Option 4
+ Option 5
+ Option 6
+ Option 7
+ Option 8
+
+
`;
+ },
+};
+
+export const _DatePicker = {
+ render: () => {
+ return html`
+
+
+
+ ${content}${actions}
+
+
+
`;
+ },
+};
+
+export const _Dropdown = {
+ render: () => {
+ return html`
+
+
+ ${content}${actions}
+ ${items.map(
+ (elem) => html`
+ ${elem.text}
+ `
+ )}
+
+
`;
+ },
+};
+
+export const _Multiselect = {
+ render: () => {
+ return html`
+
+
+ ${content}${actions}
+
+ An example option that is really long to show what should be done to
+ handle long text
+ Option 1
+ Option 2
+ Option 3 - a disabled item
+ Option 4
+ Option 5
+
+
`;
+ },
+};
+
+export const _FilterableMultiselect = {
+ render: () => {
+ return html`
+
+
+ ${content}${actions}
+ An example option that is really long to show what should be done
+ to handle long text
+ Option 1
+ Option 2
+ Option 3 - a disabled item
+ Option 4
+ Option 5
+
+
`;
+ },
+};
+
+export const _NumberItem = {
+ render: () => {
+ return html`
+
+
+ ${content}${actions}
+
+
`;
+ },
+};
+
+export const _RadioButton = {
+ args: {
+ disabled: false,
+ invalid: false,
+ invalidText: 'Error message goes here',
+ warn: false,
+ warnText:
+ 'Warning message that is really long can wrap to more lines but should not be excessively long.',
+ },
+ argTypes: {
+ disabled: {
+ control: 'boolean',
+ },
+ invalid: {
+ control: 'boolean',
+ },
+ invalidText: {
+ control: 'text',
+ },
+ warn: {
+ control: 'boolean',
+ },
+ warnText: {
+ control: 'text',
+ },
+ },
+ render: (args) => {
+ const { disabled, invalid, invalidText, warn, warnText } = args ?? {};
+
+ return html`
+
+
+ ${content}${actions}
+
+
+
+
+
+
+
+ ${content}${actions}
+
+
+ ${content}${actions}
+
+
+
+
+
+
+
+ ${content}${actions}
+
+
+
+
+ ${content}${actions}
+
+
+
+
+ `;
+ },
+};
+
+export const _Select = {
+ render: () => {
+ return html`
+
+
+ ${content}${actions}
+
+ Option 1
+ Option 2
+
+
+ Option 3
+ Option 4
+ Option 5
+
+
+
`;
+ },
+};
+
+const tagTypes = [
+ 'red',
+ 'magenta',
+ 'purple',
+ 'blue',
+ 'cyan',
+ 'teal',
+ 'green',
+ 'gray',
+ 'cool-gray',
+ 'warm-gray',
+ 'high-contrast',
+ 'outline',
+];
+
+export const _Tag = {
+ render: () => {
+ return html`
+
+
+ ${tagTypes.map(
+ (e) => html`Tag
+ ${content}${actions}
+ `
+ )}
+
+
+
+ ${tagTypes.map(
+ (e) =>
+ html`
+ Tag
+ ${content}${actions}
+ `
+ )}
+
+
+
+ ${tagTypes.map(
+ (e) =>
+ html`
+ ${Asleep16({ slot: 'icon' })} Tag
+ ${content}${actions}
+ `
+ )}
+
+
+
+ ${tagTypes.map(
+ (e) =>
+ html`
+ ${Asleep16({ slot: 'icon' })} Tag
+ ${content}${actions}
+ `
+ )}
+
+ `;
+ },
+};
+
+export const _TextInput = {
+ render: () => {
+ return html`
+
+
+ ${content}${actions}
+
+
`;
+ },
+};
+
+export const _TextArea = {
+ render: () => {
+ return html`
+
+
+ ${content}${actions}
+
+
`;
+ },
+};
+
+export const _Tile = {
+ args: {
+ hasRoundedCorners: false,
+ },
+ argTypes: {
+ hasRoundedCorners: {
+ control: 'boolean',
+ },
+ },
+ render: (args) => {
+ const { hasRoundedCorners } = args ?? {};
+ return html`
+
+
+
+
Title
+
+ Lorem ipsum dolor sit amet consectetur. Posuere duis fermentum sit
+ at consectetur turpis mauris gravida penatibus.
+
+
+
+
+
+
+
Title
+
+ Lorem ipsum dolor sit amet consectetur. Posuere duis fermentum sit
+ at consectetur turpis mauris gravida penatibus.
+
+
+
+
+
+
+
Title
+
+ Lorem ipsum dolor sit amet consectetur. Posuere duis fermentum sit
+ at consectetur turpis mauris gravida penatibus.
+
+
+
+
+
+
+
+
Title
+
+ Lorem ipsum dolor sit amet consectetur. Posuere duis fermentum
+ sit at consectetur turpis mauris gravida penatibus.
+
+
+
Expanded Section
+
+ Lorem ipsum dolor sit amet consectetur. Posuere duis fermentum sit
+ at consectetur turpis mauris.
+
+
+ ${content}${actions}
+
+
-
AI Explained
-
84%
-
Confidence score
-
- Lorem ipsum dolor sit amet, di os consectetur adipiscing elit, sed do
- eiusmod tempor incididunt ut fsil labore et dolore magna aliqua.
-
-
-
Model type
-
Foundation model
-
-
-
-
-
-
- ${content}${actions}
-
-
-
-
-
-
-
-
- ${content}${actions}
-
-
-
-
-
-
-
- ${content}${actions}
-
-
-
-
-
-
- ${content}${actions}
-
-
-
-
-
-
- ${content}${actions}
- ${items.map(
- (elem) => html`
- ${elem.text}
- `
- )}
-
-
-
-
-
- ${content}${actions}
-
- An example option that is really long to show what should be done
- to handle long text
- Option 1
- Option 2
- Option 3 - a disabled item
- Option 4
- Option 5
-
-
-
-
- ${content}${actions}
- An example option that is really long to show what should be done
- to handle long text
- Option 1
- Option 2
- Option 3 - a disabled item
- Option 4
- Option 5
-
-
-
-
- ${content}${actions}
-
- Option 1
- Option 2
- Option 3
- Option 4
- Option 5
- Option 6
- Option 7
- Option 8
-
-
-
-
- ${content}${actions}
-
- Option 1
- Option 2
-
-
- Option 3
- Option 4
- Option 5
-
-
-
- Submit
-
-
-
- `;
-};
-
-_AIForm.parameters = {
- knobs: {
- [`${prefix}-form-group`]: () => ({
- disabled: boolean('Disabled (disabled)', false),
- invalid: boolean('Invalid (invalid)', false),
- invalidText: textNullable(
- 'Invalid text (invalid-text)',
- 'Error message goes here'
- ),
- warn: boolean('Warn (warn)', false),
- warnText: textNullable(
- 'Warn text (warn-text)',
- 'Warning message that is really long can wrap to more lines but should not be excessively long.'
- ),
- revert: boolean('Revert active (revert-active)', false),
- }),
- },
-};
-
-export const _RevertTest = () => {
- const handleInput = (event) => {
- event.target?.querySelector('cds-slug')?.setAttribute('revert-active', '');
- };
-
- const handleRevert = (value) => {
- return (event) => {
- (event.target as HTMLElement).parentElement?.querySelector('cds-slug')
- ? (event.target as HTMLElement).parentElement?.setAttribute(
- 'value',
- value
- )
- : '';
- };
- };
-
- return html`
-
-
-
-
-
- ${content}
-
-
-
-
-
- ${content}
-
-
-
-
-
- `;
-};
diff --git a/packages/carbon-web-components/src/components/slug/slug-form.stories.ts b/packages/carbon-web-components/src/components/slug/slug-form.stories.ts
new file mode 100644
index 00000000000..1a4630797ab
--- /dev/null
+++ b/packages/carbon-web-components/src/components/slug/slug-form.stories.ts
@@ -0,0 +1,399 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2019, 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { html } from 'lit';
+import View16 from '@carbon/icons/lib/view/16';
+import FolderOpen16 from '@carbon/icons/lib/folder--open/16';
+import Folders16 from '@carbon/icons/lib/folders/16';
+import './index';
+import '../button/index';
+import '../combo-box/index';
+import '../date-picker/index';
+import '../dropdown/index';
+import '../form/index';
+import '../form-group/index';
+import '../icon-button/index';
+import '../multi-select/index';
+import '../number-input/index';
+import '../select/index';
+import '../stack/index';
+import '../textarea/index';
+import '../text-input/index';
+
+const items = [
+ {
+ value: 'option-0',
+ text: 'Lorem, ipsum dolor sit amet consectetur adipisicing elit.',
+ },
+ {
+ value: 'option-1',
+ text: 'Option 1',
+ },
+ {
+ value: 'option-2',
+ text: 'Option 2',
+ },
+ {
+ value: 'option-3',
+ text: 'Option 3 - a disabled item',
+ disabled: true,
+ },
+ {
+ value: 'option-4',
+ text: 'Option 4',
+ },
+ {
+ value: 'option-5',
+ text: 'Option 5',
+ },
+];
+
+const content = html`
+
+
AI Explained
+
84%
+
Confidence score
+
+ Lorem ipsum dolor sit amet, di os consectetur adipiscing elit, sed do
+ eiusmod tempor incididunt ut fsil labore et dolore magna aliqua.
+
+
+
Model type
+
Foundation model
+
+
+
+
+
+
+ ${content}${actions}
+
+
+
+
+
+
+
+
+ ${content}${actions}
+
+
+
+
+
+
+
+ ${content}${actions}
+
+
+
+
+
+
+ ${content}${actions}
+
+
+
+
+
+
+ ${content}${actions}
+ ${items.map(
+ (elem) => html`
+ ${elem.text}
+ `
+ )}
+
+
+
+
+
+ ${content}${actions}
+
+ An example option that is really long to show what should be
+ done to handle long text
+ Option 1
+ Option 2
+ Option 3 - a disabled item
+ Option 4
+ Option 5
+
+
+
+
+ ${content}${actions}
+ An example option that is really long to show what should be
+ done to handle long text
+ Option 1
+ Option 2
+ Option 3 - a disabled item
+ Option 4
+ Option 5
+
+
+
+
+ ${content}${actions}
+
+ Option 1
+ Option 2
+ Option 3
+ Option 4
+ Option 5
+ Option 6
+ Option 7
+ Option 8
+
+
+
+
+ ${content}${actions}
+
+ Option 1
+ Option 2
+
+
+ Option 3
+ Option 4
+ Option 5
+
+
+
+ Submit
+
+
+
+ `;
+ },
+};
+
+export const _RevertTest = {
+ render: () => {
+ const handleInput = (event) => {
+ event.target
+ ?.querySelector('cds-slug')
+ ?.setAttribute('revert-active', '');
+ };
+
+ const handleRevert = (value) => {
+ return (event) => {
+ (event.target as HTMLElement).parentElement?.querySelector('cds-slug')
+ ? (event.target as HTMLElement).parentElement?.setAttribute(
+ 'value',
+ value
+ )
+ : '';
+ };
+ };
+
+ return html`
+
+
+
+
+
+ ${content}
+
+
+
+
+
+ ${content}
+
+
+
+
+
+ `;
+ },
+};
+
+const meta = {
+ title: 'Experimental/Slug/Form',
+};
+
+export default meta;
diff --git a/packages/carbon-web-components/src/components/slug/slug-story.ts b/packages/carbon-web-components/src/components/slug/slug-story.ts
deleted file mode 100644
index 88a38738817..00000000000
--- a/packages/carbon-web-components/src/components/slug/slug-story.ts
+++ /dev/null
@@ -1,254 +0,0 @@
-/**
- * @license
- *
- * Copyright IBM Corp. 2019, 2023
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-import { html } from 'lit';
-import { select, boolean } from '@storybook/addon-knobs';
-import View16 from '@carbon/icons/lib/view/16';
-import FolderOpen16 from '@carbon/icons/lib/folder--open/16';
-import Folders16 from '@carbon/icons/lib/folders/16';
-
-import textNullable from '../../../.storybook/knob-text-nullable';
-import { ifDefined } from 'lit/directives/if-defined.js';
-import { prefix } from '../../globals/settings';
-import './index';
-import '../icon-button/index';
-import styles from './slug-story.scss?lit';
-import storyDocs from './slug-story.mdx';
-
-import { POPOVER_ALIGNMENT } from '../popover/defs';
-import { SLUG_SIZE } from './defs';
-
-const tooltipAlignments = {
- [`top`]: POPOVER_ALIGNMENT.TOP,
- [`top-left`]: POPOVER_ALIGNMENT.TOP_LEFT,
- [`top-right`]: POPOVER_ALIGNMENT.TOP_RIGHT,
- [`bottom`]: POPOVER_ALIGNMENT.BOTTOM,
- [`bottom-left`]: POPOVER_ALIGNMENT.BOTTOM_LEFT,
- [`bottom-right`]: POPOVER_ALIGNMENT.BOTTOM_RIGHT,
- [`left`]: POPOVER_ALIGNMENT.LEFT,
- [`left-bottom`]: POPOVER_ALIGNMENT.LEFT_BOTTOM,
- [`left-top`]: POPOVER_ALIGNMENT.LEFT_TOP,
- [`right`]: POPOVER_ALIGNMENT.RIGHT,
- [`right-bottom`]: POPOVER_ALIGNMENT.RIGHT_BOTTOM,
- [`right-top`]: POPOVER_ALIGNMENT.RIGHT_TOP,
-};
-
-const sizes = {
- [`Mini size (${SLUG_SIZE.MINI})`]: SLUG_SIZE.MINI,
- [`2XS size (${SLUG_SIZE.EXTRA_EXTRA_SMALL})`]: SLUG_SIZE.EXTRA_EXTRA_SMALL,
- [`XS size (${SLUG_SIZE.EXTRA_SMALL})`]: SLUG_SIZE.EXTRA_SMALL,
- [`Small size (${SLUG_SIZE.SMALL})`]: SLUG_SIZE.SMALL,
- [`Medium size (${SLUG_SIZE.MEDIUM})`]: SLUG_SIZE.MEDIUM,
- [`Large size (${SLUG_SIZE.LARGE})`]: SLUG_SIZE.LARGE,
- [`XL size (${SLUG_SIZE.EXTRA_LARGE})`]: SLUG_SIZE.EXTRA_LARGE,
-};
-
-const content = html`
-
-
AI Explained
-
84%
-
Confidence score
-
- Lorem ipsum dolor sit amet, di os consectetur adipiscing elit, sed do
- eiusmod tempor incididunt ut fsil labore et dolore magna aliqua.
-
-
-
Model type
-
Foundation model
-
- ${content}
- ${content}
- ${content}
- ${content}
- ${content}
- ${content}
- ${content}
-
-
-
- ${hollowContent}
-
-
- ${hollowContent}
-
-
- ${hollowContent}
-
-
-
-
- ${content}
-
-
- ${content}
-
-
- ${content}
-
-
-
-
- ${content}
-
-
- ${content}
-
-
- ${content}
-
-
-
-
- ${hollowContent}
-
-
- ${hollowContent}
-
-
- ${hollowContent}
-
-
-
-
- ${hollowContent}
-
-
- ${hollowContent}
-
-
- ${hollowContent}
-
-
- `;
-};
-
-export const Playground = (args) => {
- const { alignment, aiTextLabel, size, kind, dotType, revertActive } =
- args?.[`${prefix}-slug`] ?? {};
- return html`
-
-
-
- ${kind === 'hollow' || dotType === 'hollow' ? hollowContent : content}
- ${kind === 'hollow' || dotType === 'hollow' ? '' : actions}
-
-
- `;
-};
-
-Playground.parameters = {
- knobs: {
- [`${prefix}-slug`]: () => {
- const kind = select(
- 'Kind (kind)',
- ['default', 'hollow', 'inline'],
- 'default'
- );
- const dotType =
- kind === 'inline'
- ? select('DotType (dotType)', ['default', 'hollow'], 'default')
- : ``;
-
- return {
- alignment: select(
- 'Slug alignment to trigger button (alignment)',
- tooltipAlignments,
- POPOVER_ALIGNMENT.BOTTOM
- ),
- size: select('Slug size (size)', sizes, SLUG_SIZE.MEDIUM),
- kind,
- dotType,
- aiTextLabel: textNullable('Ai text label', ''),
- revertActive: boolean('Revert active', false),
- };
- },
- },
-};
-
-export default {
- title: 'Experimental/Slug',
- parameters: {
- ...storyDocs.parameters,
- },
-};
diff --git a/packages/carbon-web-components/src/components/slug/slug-story.mdx b/packages/carbon-web-components/src/components/slug/slug.mdx
similarity index 84%
rename from packages/carbon-web-components/src/components/slug/slug-story.mdx
rename to packages/carbon-web-components/src/components/slug/slug.mdx
index 076dbd432a9..beabac715af 100644
--- a/packages/carbon-web-components/src/components/slug/slug-story.mdx
+++ b/packages/carbon-web-components/src/components/slug/slug.mdx
@@ -1,5 +1,8 @@
-import { Props, Description } from '@storybook/addon-docs/blocks';
+import { ArgsTable, Meta, Markdown } from '@storybook/addon-docs/blocks';
import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn';
+import * as SlugStories from './slug.stories';
+
+
# Slug
@@ -21,8 +24,8 @@ Here's a quick example to get you started.
import '@carbon/web-components/es/components/slug/index.js';
```
-
-
+{`${cdnJs({ components: ['slug'] })}`}
+{`${cdnCss()}`}
### HTML
@@ -49,4 +52,4 @@ Note: For `boolean` attributes, `true` means simply setting the attribute (e.g.
``) and `false` means not setting the attribute (e.g.
`` without `revertActive` attribute).
-
+
diff --git a/packages/carbon-web-components/src/components/slug/slug.stories.ts b/packages/carbon-web-components/src/components/slug/slug.stories.ts
new file mode 100644
index 00000000000..28f382b1d26
--- /dev/null
+++ b/packages/carbon-web-components/src/components/slug/slug.stories.ts
@@ -0,0 +1,275 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2019, 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { html } from 'lit';
+import View16 from '@carbon/icons/lib/view/16';
+import FolderOpen16 from '@carbon/icons/lib/folder--open/16';
+import Folders16 from '@carbon/icons/lib/folders/16';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import './index';
+import '../icon-button/index';
+import styles from './slug-story.scss?lit';
+import storyDocs from './slug.mdx';
+
+import { POPOVER_ALIGNMENT } from '../popover/defs';
+import { SLUG_SIZE } from './defs';
+
+const tooltipAlignments = {
+ [`top`]: POPOVER_ALIGNMENT.TOP,
+ [`top-left`]: POPOVER_ALIGNMENT.TOP_LEFT,
+ [`top-right`]: POPOVER_ALIGNMENT.TOP_RIGHT,
+ [`bottom`]: POPOVER_ALIGNMENT.BOTTOM,
+ [`bottom-left`]: POPOVER_ALIGNMENT.BOTTOM_LEFT,
+ [`bottom-right`]: POPOVER_ALIGNMENT.BOTTOM_RIGHT,
+ [`left`]: POPOVER_ALIGNMENT.LEFT,
+ [`left-bottom`]: POPOVER_ALIGNMENT.LEFT_BOTTOM,
+ [`left-top`]: POPOVER_ALIGNMENT.LEFT_TOP,
+ [`right`]: POPOVER_ALIGNMENT.RIGHT,
+ [`right-bottom`]: POPOVER_ALIGNMENT.RIGHT_BOTTOM,
+ [`right-top`]: POPOVER_ALIGNMENT.RIGHT_TOP,
+};
+
+const sizes = {
+ [`Mini size (${SLUG_SIZE.MINI})`]: SLUG_SIZE.MINI,
+ [`2XS size (${SLUG_SIZE.EXTRA_EXTRA_SMALL})`]: SLUG_SIZE.EXTRA_EXTRA_SMALL,
+ [`XS size (${SLUG_SIZE.EXTRA_SMALL})`]: SLUG_SIZE.EXTRA_SMALL,
+ [`Small size (${SLUG_SIZE.SMALL})`]: SLUG_SIZE.SMALL,
+ [`Medium size (${SLUG_SIZE.MEDIUM})`]: SLUG_SIZE.MEDIUM,
+ [`Large size (${SLUG_SIZE.LARGE})`]: SLUG_SIZE.LARGE,
+ [`XL size (${SLUG_SIZE.EXTRA_LARGE})`]: SLUG_SIZE.EXTRA_LARGE,
+};
+
+const content = html`
+
+
AI Explained
+
84%
+
Confidence score
+
+ Lorem ipsum dolor sit amet, di os consectetur adipiscing elit, sed do
+ eiusmod tempor incididunt ut fsil labore et dolore magna aliqua.
+
+
+
Model type
+
Foundation model
+
default, hollow, or inline.',
+ options: ['default', 'hollow', 'inline'],
+ },
+ size: {
+ control: 'select',
+ description:
+ 'Specify the size of the button, from the following list of sizes: mini, 2xs, xs, sm, md, lg, xl.',
+ options: sizes,
+ },
+ revertActive: {
+ control: 'boolean',
+ description: 'Specify whether the revert button should be visible.',
+ },
+};
+
+export const Default = {
+ render: () => {
+ return html`
+
+
+ ${content}
+ ${content}
+ ${content}
+ ${content}
+ ${content}
+ ${content}
+ ${content}
+
+
+
+ ${hollowContent}
+
+
+ ${hollowContent}
+
+
+ ${hollowContent}
+
+
+
+
+ ${content}
+
+
+ ${content}
+
+
+ ${content}
+
+
+
+
+ ${content}
+
+
+ ${content}
+
+
+ ${content}
+
+
+
+
+ ${hollowContent}
+
+
+ ${hollowContent}
+
+
+ ${hollowContent}
+
+
+
+
+ ${hollowContent}
+
+
+ ${hollowContent}
+
+
+ ${hollowContent}
+
+
+ `;
+ },
+};
+
+export const Playground = {
+ args,
+ argTypes,
+ render: (args) => {
+ const { alignment, aiTextLabel, dotType, kind, revertActive, size } =
+ args ?? {};
+ return html`
+
+
+
+ ${kind === 'hollow' || dotType === 'hollow' ? hollowContent : content}
+ ${kind === 'hollow' || dotType === 'hollow' ? '' : actions}
+
+
+ `;
+ },
+};
+
+const meta = {
+ title: 'Experimental/Slug',
+ parameters: {
+ docs: {
+ page: storyDocs,
+ },
+ },
+};
+
+export default meta;
diff --git a/packages/carbon-web-components/src/components/structured-list/structured-list-story.ts b/packages/carbon-web-components/src/components/structured-list/structured-list-story.ts
deleted file mode 100644
index 69069bbb24d..00000000000
--- a/packages/carbon-web-components/src/components/structured-list/structured-list-story.ts
+++ /dev/null
@@ -1,225 +0,0 @@
-/**
- * @license
- *
- * Copyright IBM Corp. 2019, 2023
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-import { html } from 'lit';
-import { boolean } from '@storybook/addon-knobs';
-import { ifDefined } from 'lit/directives/if-defined.js';
-import './structured-list';
-import './structured-list-head';
-import './structured-list-header-row';
-import './structured-list-header-cell';
-import './structured-list-body';
-import './structured-list-row';
-import './structured-list-cell';
-import './structured-list-header-cell-skeleton';
-import storyDocs from './structured-list-story.mdx';
-import { prefix } from '../../globals/settings';
-
-export const Default = (args) => {
- const { hasSelection } = args?.[`${prefix}-structured-list`] ?? {};
- const selectionName = !hasSelection ? undefined : 'structured-list-selection';
- const selectionValues = !hasSelection
- ? []
- : [
- 'structured-list-selection-0',
- 'structured-list-selection-1',
- 'structured-list-selection-2',
- ];
- return html`
-
-
-
-
- ColumnA
-
-
- ColumnB
-
-
- ColumnC
-
-
-
-
- Row 1
- Row 1
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui
- magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere
- sem vel euismod dignissim. Nulla ut cursus dolor. Pellentesque
- vulputate nisl a porttitor interdum.
-
-
- Row 2
- Row 2
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui
- magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere
- sem vel euismod dignissim. Nulla ut cursus dolor. Pellentesque
- vulputate nisl a porttitor interdum.
-
-
-
- `;
-};
-
-export const Selection = () => {
- const selectionName = 'structured-list-selection';
- const selectionValues = [
- 'structured-list-selection-0',
- 'structured-list-selection-1',
- 'structured-list-selection-2',
- 'structured-list-selection-3',
- ];
- return html`
-
-
-
-
- ColumnA
-
-
- ColumnB
-
-
- ColumnC
-
-
-
-
- ${selectionValues.map(
- (selectionValue, index) => html`
- Row ${index}
- Row ${index}
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui
- magna, finibus id tortor sed, aliquet bibendum augue. Aenean
- posuere sem vel euismod dignissim. Nulla ut cursus dolor.
- Pellentesque vulputate nisl a porttitor
- interdum.
- `
- )}
-
-
- `;
-};
-
-export const Playground = (args) => {
- const { condensed, flush, hasSelection } =
- args?.[`${prefix}-structured-list`] ?? {};
- const selectionName = !hasSelection ? undefined : 'structured-list-selection';
- const selectionValues = !hasSelection
- ? []
- : [
- 'structured-list-selection-0',
- 'structured-list-selection-1',
- 'structured-list-selection-2',
- ];
- return html`
-
-
-
-
- ColumnA
-
-
- ColumnB
-
-
- ColumnC
-
-
-
-
- Row 1
- Row 1
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui
- magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere
- sem vel euismod dignissim. Nulla ut cursus dolor. Pellentesque
- vulputate nisl a porttitor interdum.
-
-
- Row 2
- Row 2
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui
- magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere
- sem vel euismod dignissim. Nulla ut cursus dolor. Pellentesque
- vulputate nisl a porttitor interdum.
-
-
-
- `;
-};
-
-Playground.parameters = {
- knobs: {
- [`${prefix}-structured-list`]: () => ({
- condensed: boolean('Condensed (condensed)', false),
- flush: boolean('Flush (flush)', false),
- hasSelection: boolean(
- 'Supports selection feature (has-selection)',
- false
- ),
- }),
- },
-};
-
-export const skeleton = () => html`
-
- ${Array.apply(null, Array(2)).map(
- () => html`
-
-
-
- ${Array.apply(null, Array(3)).map(
- () => html`
-
-
- `
- )}
-
-
-
- ${Array.apply(null, Array(5)).map(
- () => html`
-
-
-
- `
- )}
-
-
- `
- )}
-
-`;
-
-skeleton.parameters = {
- percy: {
- skip: true,
- },
-};
-
-export default {
- title: 'Components/Structured list',
- parameters: {
- ...storyDocs.parameters,
- },
-};
diff --git a/packages/carbon-web-components/src/components/structured-list/structured-list-story.mdx b/packages/carbon-web-components/src/components/structured-list/structured-list.mdx
similarity index 96%
rename from packages/carbon-web-components/src/components/structured-list/structured-list-story.mdx
rename to packages/carbon-web-components/src/components/structured-list/structured-list.mdx
index 7784c896329..639ac9c5482 100644
--- a/packages/carbon-web-components/src/components/structured-list/structured-list-story.mdx
+++ b/packages/carbon-web-components/src/components/structured-list/structured-list.mdx
@@ -1,4 +1,4 @@
-import { Props, Description } from '@storybook/addon-docs/blocks';
+import { ArgsTable, Description } from '@storybook/addon-docs/blocks';
import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn';
# Structured list
@@ -108,7 +108,7 @@ Note: For `boolean` attributes, `true` means simply setting the attribute (e.g.
``) and `false` means not setting the
attribute (e.g. `` without `has-selection` attribute).
-
+
## `` attributes and properties
@@ -116,4 +116,4 @@ Note: For `boolean` attributes, `true` means simply setting the attribute (e.g.
``) and `false` means not setting the
attribute (e.g. `` without `selected` attribute).
-
+
diff --git a/packages/carbon-web-components/src/components/structured-list/structured-list.stories.ts b/packages/carbon-web-components/src/components/structured-list/structured-list.stories.ts
new file mode 100644
index 00000000000..c7ccbdcf634
--- /dev/null
+++ b/packages/carbon-web-components/src/components/structured-list/structured-list.stories.ts
@@ -0,0 +1,251 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2019, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { html } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import './structured-list';
+import './structured-list-head';
+import './structured-list-header-row';
+import './structured-list-header-cell';
+import './structured-list-body';
+import './structured-list-row';
+import './structured-list-cell';
+import './structured-list-header-cell-skeleton';
+import storyDocs from './structured-list.mdx';
+
+const defaultArgs = {
+ condensed: false,
+ flush: false,
+ hasSelection: false,
+};
+
+const controls = {
+ condensed: {
+ control: 'boolean',
+ description: 'Condensed (condensed)',
+ },
+ flush: {
+ control: 'boolean',
+ description: 'Flush (flush)',
+ },
+ hasSelection: {
+ control: 'boolean',
+ description: 'Supports selection feature (has-selection)',
+ },
+};
+
+export const Default = {
+ argTypes: {
+ hasSelection: {
+ control: 'boolean',
+ description: 'Supports selection feature (has-selection)',
+ },
+ },
+ args: { hasSelection: false },
+ render: ({ hasSelection }) => {
+ const selectionName = !hasSelection
+ ? undefined
+ : 'structured-list-selection';
+ const selectionValues = !hasSelection
+ ? []
+ : [
+ 'structured-list-selection-0',
+ 'structured-list-selection-1',
+ 'structured-list-selection-2',
+ ];
+ return html`
+
+
+
+
+ ColumnA
+
+
+ ColumnB
+
+
+ ColumnC
+
+
+
+
+ Row 1
+ Row 1
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui
+ magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere
+ sem vel euismod dignissim. Nulla ut cursus dolor. Pellentesque
+ vulputate nisl a porttitor interdum.
+
+
+ Row 2
+ Row 2
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui
+ magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere
+ sem vel euismod dignissim. Nulla ut cursus dolor. Pellentesque
+ vulputate nisl a porttitor interdum.
+
+
+
+ `;
+ },
+};
+
+export const Selection = {
+ render: () => {
+ const selectionName = 'structured-list-selection';
+ const selectionValues = [
+ 'structured-list-selection-0',
+ 'structured-list-selection-1',
+ 'structured-list-selection-2',
+ 'structured-list-selection-3',
+ ];
+
+ return html`
+
+
+
+
+ ColumnA
+
+
+ ColumnB
+
+
+ ColumnC
+
+
+
+
+ ${selectionValues.map(
+ (selectionValue, index) => html`
+ Row ${index}
+ Row ${index}
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc
+ dui magna, finibus id tortor sed, aliquet bibendum augue. Aenean
+ posuere sem vel euismod dignissim. Nulla ut cursus dolor.
+ Pellentesque vulputate nisl a porttitor
+ interdum.
+ `
+ )}
+
+
+ `;
+ },
+};
+
+export const Playground = {
+ args: defaultArgs,
+ argTypes: controls,
+ render: ({ condensed, flush, hasSelection }) => {
+ const selectionName = !hasSelection
+ ? undefined
+ : 'structured-list-selection';
+ const selectionValues = !hasSelection
+ ? []
+ : [
+ 'structured-list-selection-0',
+ 'structured-list-selection-1',
+ 'structured-list-selection-2',
+ ];
+ return html`
+
+
+
+
+ ColumnA
+
+
+ ColumnB
+
+
+ ColumnC
+
+
+
+
+ Row 1
+ Row 1
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui
+ magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere
+ sem vel euismod dignissim. Nulla ut cursus dolor. Pellentesque
+ vulputate nisl a porttitor interdum.
+
+
+ Row 2
+ Row 2
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui
+ magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere
+ sem vel euismod dignissim. Nulla ut cursus dolor. Pellentesque
+ vulputate nisl a porttitor interdum.
+
+
+
+ `;
+ },
+};
+
+export const skeleton = {
+ parameters: {
+ percy: {
+ skip: true,
+ },
+ },
+ render: () => html`
+
+ ${Array.apply(null, Array(2)).map(
+ () => html`
+
+
+
+ ${Array.apply(null, Array(3)).map(
+ () => html`
+
+
+ `
+ )}
+
+
+
+ ${Array.apply(null, Array(5)).map(
+ () => html`
+
+
+
+ `
+ )}
+
+
+ `
+ )}
+
+ `,
+};
+
+export default {
+ title: 'Components/Structured list',
+ parameters: {
+ docs: {
+ page: storyDocs,
+ },
+ },
+};
diff --git a/packages/carbon-web-components/src/components/tabs/tabs-story.ts b/packages/carbon-web-components/src/components/tabs/tabs-story.ts
deleted file mode 100644
index ffef7f42bb1..00000000000
--- a/packages/carbon-web-components/src/components/tabs/tabs-story.ts
+++ /dev/null
@@ -1,255 +0,0 @@
-/**
- * @license
- *
- * Copyright IBM Corp. 2019, 2023
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-import { html } from 'lit';
-import { action } from '@storybook/addon-actions';
-import { boolean, select } from '@storybook/addon-knobs';
-import textNullable from '../../../.storybook/knob-text-nullable';
-import { ifDefined } from 'lit/directives/if-defined.js';
-import { TABS_TYPE } from './tabs';
-import './tab';
-import './tabs-skeleton';
-import './tab-skeleton';
-import styles from './tabs-story.scss?lit';
-import storyDocs from './tabs-story.mdx';
-import { prefix } from '../../globals/settings';
-
-const noop = () => {};
-
-const types = {
- 'Regular type': null,
- [`Container type (${TABS_TYPE.CONTAINED})`]: TABS_TYPE.CONTAINED,
-};
-
-export const Default = () => html`
-
-
- Tab label 1
-
- Tab label 2
-
-
- Tab label 3
-
- Tab label 4
-
-
-
- Tab Panel 1
-
-
-
-
-
- Tab Panel 3
-
-
- Tab Panel 4
-
-
-
- Tab Panel 1
-
-
-
-
-
- Tab Panel 3
-
-
- Tab Panel 4
-
-
- Tab Panel 5
-
-
-
- Tab Panel 1
-
-
-
-
-
- Tab Panel 3
-
-
- Tab Panel 4
-
-
+
+ Tab Panel 1
+
+
+
+
+
+ Tab Panel 3
+
+
+ Tab Panel 4
+
+
+
+ Tab Panel 1
+
+
+
+
+
+ Tab Panel 3
+
+
+ Tab Panel 4
+
+
+ Tab Panel 5
+
+
+
+ Tab Panel 1
+
+
+
+
+
+ Tab Panel 3
+
+
+ Tab Panel 4
+
+
-
-
-
- `;
-};
-
-Playground.parameters = {
- knobs: {
- [`${prefix}-input`]: () => ({
- disabled: boolean('Disabled (disabled)', false),
- enableCounter: boolean('Enable counter (enable-counter)', false),
- helperText: textNullable('Helper text (helper-text)', 'Helper text'),
- hideLabel: boolean('Hide label (hide-label)', false),
- inline: boolean('Inline (inline)', false),
- invalid: boolean('Invalid (invalid)', false),
- invalidText: textNullable(
- 'Invalid text (invalid-text)',
- 'Error message goes here'
- ),
- labelText: textNullable('Label text (label)', 'Label text'),
- maxCount: textNullable('Max count (max-count)', '100'),
- placeholder: textNullable(
- 'Placeholder (placeholder)',
- 'Placeholder text'
- ),
- playgroundWidth: number('Playground width', 300, {
- range: true,
- min: 300,
- max: 800,
- step: 50,
- }),
- size: select('Size (size)', sizes, INPUT_SIZE.MEDIUM),
- readonly: boolean('Read only (readonly)', false),
- type: textNullable('Type (type)', 'text'),
- warn: boolean('Warn (warn)', false),
- warnText: textNullable(
- 'Warn text (warn-text)',
- 'Warning message that is really long can wrap to more lines but should not be excessively long.'
- ),
- value: textNullable('Value of input (value)', ''),
- onInput: action(`${prefix}-select-selected`),
- }),
- },
-};
-
-export default {
- title: 'Components/Text Input',
- parameters: {
- ...storyDocs.parameters,
- },
-};
diff --git a/packages/carbon-web-components/src/components/text-input/text-input-story.mdx b/packages/carbon-web-components/src/components/text-input/text-input.mdx
similarity index 86%
rename from packages/carbon-web-components/src/components/text-input/text-input-story.mdx
rename to packages/carbon-web-components/src/components/text-input/text-input.mdx
index e2f64bbfa4e..01de04de43f 100644
--- a/packages/carbon-web-components/src/components/text-input/text-input-story.mdx
+++ b/packages/carbon-web-components/src/components/text-input/text-input.mdx
@@ -1,4 +1,4 @@
-import { Props, Description } from '@storybook/addon-docs/blocks';
+import { ArgTypes, Markdown } from '@storybook/addon-docs/blocks';
import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn';
# Text Input
@@ -23,8 +23,8 @@ Here's a quick example to get you started.
import '@carbon/web-components/es/components/text-input/index.js';
```
-
-
+{`${cdnJs({ components: ['text-input'] })}`}
+{`${cdnCss()}`}
### HTML
@@ -45,7 +45,7 @@ If the input is part of a form, make sure to import and wrap the input with
import '@carbon/web-components/es/components/form/index.js';
```
-
+{`${cdnJs({ components: ['form'] })}`}
```html
@@ -63,4 +63,4 @@ Note: For `boolean` attributes, `true` means simply setting the attribute (e.g.
``) and `false` means not setting the attribute (e.g.
`` without `required` attribute).
-
+
diff --git a/packages/carbon-web-components/src/components/text-input/text-input.stories.ts b/packages/carbon-web-components/src/components/text-input/text-input.stories.ts
new file mode 100644
index 00000000000..35420531135
--- /dev/null
+++ b/packages/carbon-web-components/src/components/text-input/text-input.stories.ts
@@ -0,0 +1,227 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2019, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { html } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import storyDocs from './text-input.mdx';
+import { prefix } from '../../globals/settings';
+import './index';
+import '../form/form-item';
+import { INPUT_SIZE } from './text-input';
+
+const sizes = {
+ [`Small size (${INPUT_SIZE.SMALL})`]: INPUT_SIZE.SMALL,
+ [`Medium size (${INPUT_SIZE.MEDIUM})`]: INPUT_SIZE.MEDIUM,
+ [`Large size (${INPUT_SIZE.LARGE})`]: INPUT_SIZE.LARGE,
+};
+
+const args = {
+ disabled: false,
+ enableCounter: false,
+ helperText: 'Helper text',
+ hideLabel: false,
+ inline: false,
+ invalid: false,
+ invalidText: 'Error message goes here',
+ labelText: 'Label text',
+ maxCount: '100',
+ placeholder: 'Placeholder text',
+ playgroundWidth: 300,
+ size: INPUT_SIZE.MEDIUM,
+ readonly: false,
+ type: 'text',
+ warn: false,
+ warnText:
+ 'Warning message that is really long can wrap to more lines but should not be excessively long.',
+ value: '',
+ onInput: `${prefix}-select-selected`,
+};
+
+const argTypes = {
+ disabled: {
+ control: 'boolean',
+ description: 'Disabled (disabled)',
+ },
+ enableCounter: {
+ control: 'boolean',
+ description: 'Enable counter (enable-counter)',
+ },
+ helperText: {
+ control: 'text',
+ description: 'Helper text (helper-text)',
+ },
+ hideLabel: {
+ control: 'boolean',
+ description: 'Hide label (hide-label)',
+ },
+ inline: {
+ control: 'boolean',
+ description: 'Inline (inline)',
+ },
+ invalid: {
+ control: 'boolean',
+ description: 'Invalid (invalid)',
+ },
+ invalidText: {
+ control: 'text',
+ description: 'Invalid text (invalid-text)',
+ },
+ labelText: {
+ control: 'text',
+ description: 'Label text (label)',
+ },
+ maxCount: {
+ control: 'text',
+ description: 'Max count (max-count)',
+ },
+ placeholder: {
+ control: 'text',
+ description: 'Placeholder (placeholder)',
+ },
+ playgroundWidth: {
+ control: 'number',
+ description: 'Playground width',
+ options: {
+ range: true,
+ min: 300,
+ max: 800,
+ step: 50,
+ },
+ },
+ size: {
+ control: 'select',
+ description: 'Size (size)',
+ options: sizes,
+ },
+ readonly: {
+ control: 'boolean',
+ description: 'Read only (readonly)',
+ },
+ type: {
+ control: 'text',
+ description: 'Type (type)',
+ },
+ warn: {
+ control: 'boolean',
+ description: 'Warn (warn)',
+ },
+ warnText: {
+ control: 'text',
+ description: 'Warn text (warn-text)',
+ },
+ value: {
+ control: 'text',
+ description: 'Value of input (value)',
+ },
+ onInput: {
+ action: `${prefix}-select-selected`,
+ table: {
+ disable: true,
+ },
+ },
+};
+
+export const Default = {
+ render: () => html`
+
+
+ `,
+};
+
+export const ReadOnly = {
+ render: () => html`
+
+
+ `,
+};
+
+export const Skeleton = {
+ render: () => html` `,
+};
+
+export const TogglePasswordVisibility = {
+ render: () => html`
+
+
+ `,
+};
+
+export const WithLayer = {
+ render: () => html`
+
+
+
+
+ `,
+};
+
+export const Playground = {
+ args,
+ argTypes,
+ render: ({
+ disabled,
+ enableCounter,
+ helperText,
+ hideLabel,
+ inline,
+ invalid,
+ invalidText,
+ labelText,
+ maxCount,
+ placeholder,
+ playgroundWidth,
+ readonly,
+ size,
+ type,
+ value,
+ warn,
+ warnText,
+ onInput,
+ }) => html`
+
+
+
+
+ `,
+};
+
+export default {
+ title: 'Components/Text Input',
+ actions: { argTypesRegex: '^on.*' },
+ parameters: {
+ docs: {
+ page: storyDocs,
+ },
+ },
+};
diff --git a/packages/carbon-web-components/src/components/textarea/textarea-story.ts b/packages/carbon-web-components/src/components/textarea/textarea-story.ts
deleted file mode 100644
index 259b52a366f..00000000000
--- a/packages/carbon-web-components/src/components/textarea/textarea-story.ts
+++ /dev/null
@@ -1,111 +0,0 @@
-/**
- * @license
- *
- * Copyright IBM Corp. 2019, 2023
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-import { html } from 'lit';
-import { ifDefined } from 'lit/directives/if-defined.js';
-import * as knobs from '@storybook/addon-knobs';
-import textNullable from '../../../.storybook/knob-text-nullable';
-import './textarea';
-import './textarea-skeleton';
-import '../form/form-item';
-import '../layer';
-import createProps from './stories/helpers';
-import storyDocs from './textarea-story.mdx';
-import { prefix } from '../../globals/settings';
-import '../../../.storybook/templates/with-layer';
-
-export const Default = () => {
- return html`
-
-
-
-
- `;
-};
-
-Default.storyName = 'Default';
-
-export const skeleton = () =>
- html` `;
-
-skeleton.parameters = {
- percy: {
- skip: true,
- },
-};
-
-export const WithLayer = () => {
- return html`
-
-
-
-
- `;
-};
-
-WithLayer.storyName = 'With Layer';
-
-export const Playground = (args) => {
- const {
- cols,
- disabled,
- enableCounter,
- helperText,
- hideLabel,
- invalid,
- invalidText,
- label,
- maxCount,
- onInput,
- placeholder,
- readonly,
- rows,
- value,
- warn,
- warnText,
- } = args?.[`${prefix}-textarea`] ?? {};
- return html`
-
-
- ${value}
-
-
- `;
-};
-
-Playground.storyName = 'Playground';
-
-Playground.parameters = {
- knobs: {
- [`${prefix}-textarea`]: () => createProps({ ...knobs, textNullable }),
- },
-};
-
-export default {
- title: 'Components/Text Area',
- parameters: {
- ...storyDocs.parameters,
- },
-};
diff --git a/packages/carbon-web-components/src/components/textarea/textarea-story.mdx b/packages/carbon-web-components/src/components/textarea/textarea.mdx
similarity index 91%
rename from packages/carbon-web-components/src/components/textarea/textarea-story.mdx
rename to packages/carbon-web-components/src/components/textarea/textarea.mdx
index de11994cc3d..fdb3a7f4676 100644
--- a/packages/carbon-web-components/src/components/textarea/textarea-story.mdx
+++ b/packages/carbon-web-components/src/components/textarea/textarea.mdx
@@ -1,4 +1,4 @@
-import { Props, Description } from '@storybook/addon-docs/blocks';
+import { ArgTypes, Markdown } from '@storybook/addon-docs/blocks';
import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn';
# Textarea
@@ -24,8 +24,8 @@ Here's a quick example to get you started.
import '@carbon/web-components/es/components/textarea/index.js';
```
-
-
+{`${cdnJs({ components: ['textarea'] })}`}
+{`${cdnCss()}`}
### HTML
@@ -70,4 +70,4 @@ Note: For `boolean` attributes, `true` means simply setting the attribute (e.g.
``) and `false` means not setting the attribute (e.g.
`` without `autofocus` attribute).
-
+
diff --git a/packages/carbon-web-components/src/components/textarea/textarea.stories.ts b/packages/carbon-web-components/src/components/textarea/textarea.stories.ts
new file mode 100644
index 00000000000..259df013a6f
--- /dev/null
+++ b/packages/carbon-web-components/src/components/textarea/textarea.stories.ts
@@ -0,0 +1,183 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2019, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { html } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import './index';
+import '../form/form-item';
+import storyDocs from './textarea.mdx';
+
+const args = {
+ cols: 0,
+ disabled: false,
+ enableCounter: true,
+ helperText: 'Textarea helper text',
+ hideLabel: false,
+ invalid: false,
+ invalidText: 'Invalid text',
+ label: 'Textarea label',
+ maxCount: 500,
+ onInput: 'input',
+ placeholder: '',
+ readonly: false,
+ rows: 4,
+ value: '',
+ warn: false,
+ warnText: 'This is a warning message.',
+};
+
+const argTypes = {
+ cols: {
+ control: 'number',
+ description: 'Number of columns (cols)',
+ },
+ disabled: {
+ control: 'boolean',
+ description: 'Disabled (disabled)',
+ },
+ enableCounter: {
+ control: 'boolean',
+ description: 'Enable character counter (enable-counter)',
+ },
+ helperText: {
+ control: 'text',
+ description: 'Helper text (helper-text)',
+ },
+ hideLabel: {
+ control: 'boolean',
+ description: 'Hide label (hide-label)',
+ },
+ invalid: {
+ control: 'boolean',
+ description: 'Invalid (invalid)',
+ },
+ invalidText: {
+ control: 'text',
+ description: 'Invalid text (invalid-text)',
+ },
+ label: {
+ control: 'text',
+ description: 'Label (label)',
+ },
+ maxCount: {
+ control: 'number',
+ description: 'Max character count (max-count)',
+ },
+ onInput: {
+ action: `input`,
+ table: {
+ disable: true,
+ },
+ },
+ placeholder: {
+ control: 'text',
+ description: 'Placeholder text (placeholder)',
+ },
+ readonly: {
+ control: 'boolean',
+ description: 'Read only (readonly)',
+ },
+ rows: {
+ control: 'number',
+ description: 'Number of rows (rows)',
+ },
+ value: {
+ control: 'text',
+ description: 'Value (value)',
+ },
+ warn: {
+ control: 'boolean',
+ description: 'Warn (warn)',
+ },
+ warnText: {
+ control: 'text',
+ description: 'Warn text (warn-text)',
+ },
+};
+
+export const Default = {
+ render: () => html`
+
+
+
+
+ `,
+};
+
+export const skeleton = {
+ parameters: {
+ percy: {
+ skip: true,
+ },
+ },
+ render: () => html` `,
+};
+
+export const WithLayer = {
+ render: () => html`
+
+
+
+
+ `,
+};
+
+export const Playground = {
+ args,
+ argTypes,
+ render: ({
+ cols,
+ disabled,
+ enableCounter,
+ helperText,
+ hideLabel,
+ invalid,
+ invalidText,
+ label,
+ maxCount,
+ onInput,
+ placeholder,
+ readonly,
+ rows,
+ value,
+ warn,
+ warnText,
+ }) => html`
+
+
+ ${value}
+
+
+ `,
+};
+
+export default {
+ title: 'Components/Text Area',
+ parameters: {
+ docs: {
+ page: storyDocs,
+ },
+ },
+};
diff --git a/packages/carbon-web-components/src/components/toggle-tip/toggletip-story.mdx b/packages/carbon-web-components/src/components/toggle-tip/toggletip-story.mdx
deleted file mode 100644
index 50064ebcf4a..00000000000
--- a/packages/carbon-web-components/src/components/toggle-tip/toggletip-story.mdx
+++ /dev/null
@@ -1,105 +0,0 @@
-import { Props, Description } from '@storybook/addon-docs/blocks';
-import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn';
-
-# Tooltip
-
-> 💡 Check our
-> [Stackblitz](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/stackblitz/basic/components/tooltip)
-> example implementation.
-
-[](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/carbon-web-components/examples/stackblitz/basic/components/tooltip)
-
-Tooltips provide additional information upon hover or focus. The information
-should be contextual, useful, and nonessential information. Keep tooltips short.
-
-## Getting started
-
-Here's a quick example to get you started.
-
-### JS (via import)
-
-```javascript
-import '@carbon/web-components/es/components/tooltip/index.js';
-```
-
-
-
-
-### HTML
-
-```html
-
-
-
- This is some tooltip text. This box shows the maximum amount of text that
- should appear inside. If more room is needed please use a modal instead.
-
-
- Learn MoreCreate
-
-
-
-```
-
-## Interactive tooltip (default)
-
-Interactive tooltips may contain rich text and other interactive elements like
-buttons or links. In general, hiding interactive content in a tooltip is
-discouraged. Interactive tooltips are best used for onboarding experiences and
-product tours.
-
-- If a user may need to visit an external resource, like while using a form,
- include a link in your interactive tooltip
-- Don’t use without a label. Consider the context a user needs before clicking a
- link
-
-### `` attributes and properties
-
-Note: For `boolean` attributes, `true` means simply setting the attribute (e.g.
-``) and `false` means not setting the attribute (e.g.
-`` without `open` attribute).
-
-
-
-## Definition tooltip
-
-The definition tooltip provides additional help or defines an item or term. It
-may be used on the label of a UI element, or on a word embedded in a paragraph.
-
-- Should contain brief, read-only text
-- Use on proper nouns, technical terms, or acronyms with two letters or more
-- Do not use a definition tooltip on words with fewer than two letters
-
-```html
-
- Definition Tooltip
-
-```
-
-### `` attributes and properties
-
-
-
-## Icon tooltip
-
-An icon tooltip is used to clarify the action or name of an interactive icon
-button.
-
-- The tooltip content should only contain one or two words.
-
-```html
-
- ${Filter16()}
-
-```
-
-### `` attributes and properties
-
-
diff --git a/packages/carbon-web-components/src/components/toggle-tip/toggletip-story.ts b/packages/carbon-web-components/src/components/toggle-tip/toggletip-story.ts
deleted file mode 100644
index 2ed06a0c498..00000000000
--- a/packages/carbon-web-components/src/components/toggle-tip/toggletip-story.ts
+++ /dev/null
@@ -1,70 +0,0 @@
-/**
- * @license
- *
- * Copyright IBM Corp. 2019, 2023
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-import { html } from 'lit';
-import { select } from '@storybook/addon-knobs';
-import textNullable from '../../../.storybook/knob-text-nullable';
-import { ifDefined } from 'lit/directives/if-defined.js';
-import { prefix } from '../../globals/settings';
-import './toggletip';
-import '../button';
-import { POPOVER_ALIGNMENT } from '../popover/defs';
-import storyDocs from './toggletip-story.mdx';
-
-const tooltipAlignments = {
- [`top`]: POPOVER_ALIGNMENT.TOP,
- [`top-left`]: POPOVER_ALIGNMENT.TOP_LEFT,
- [`top-right`]: POPOVER_ALIGNMENT.TOP_RIGHT,
- [`bottom`]: POPOVER_ALIGNMENT.BOTTOM,
- [`bottom-left`]: POPOVER_ALIGNMENT.BOTTOM_LEFT,
- [`bottom-right`]: POPOVER_ALIGNMENT.BOTTOM_RIGHT,
- [`left`]: POPOVER_ALIGNMENT.LEFT,
- [`left-bottom`]: POPOVER_ALIGNMENT.LEFT_BOTTOM,
- [`left-top`]: POPOVER_ALIGNMENT.LEFT_TOP,
- [`right`]: POPOVER_ALIGNMENT.RIGHT,
- [`right-bottom`]: POPOVER_ALIGNMENT.RIGHT_BOTTOM,
- [`right-top`]: POPOVER_ALIGNMENT.RIGHT_TOP,
-};
-
-export const Default = (args) => {
- const { alignment, bodyText } = args?.[`${prefix}-toggletip`] ?? {};
- return html`
-
- Toggletip label
-
- ${bodyText}
- Test
- Button
-
- `;
-};
-
-Default.parameters = {
- knobs: {
- [`${prefix}-toggletip`]: () => ({
- alignment: select(
- 'Toggletip alignment to trigger button (alignment)',
- tooltipAlignments,
- POPOVER_ALIGNMENT.BOTTOM
- ),
- bodyText: textNullable(
- 'Toggletip content (bodyText)',
- `Lorem ipsum dolor sit amet, di os consectetur adipiscing elit,
- sed do eiusmod tempor incididunt ut fsil labore et dolore magna aliqua.`
- ),
- }),
- },
-};
-
-export default {
- title: 'Components/Toggletip',
- parameters: {
- ...storyDocs.parameters,
- },
-};
diff --git a/packages/carbon-web-components/src/components/toggle-tip/toggletip.mdx b/packages/carbon-web-components/src/components/toggle-tip/toggletip.mdx
new file mode 100644
index 00000000000..94316d26eb3
--- /dev/null
+++ b/packages/carbon-web-components/src/components/toggle-tip/toggletip.mdx
@@ -0,0 +1,49 @@
+import { ArgsTable, Description, Meta } from '@storybook/blocks';
+import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn';
+
+# Toggletip
+
+> 💡 Check our
+> [Stackblitz](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/stackblitz/basic/components/toggletip)
+> example implementation.
+
+[](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/carbon-web-components/examples/stackblitz/basic/components/toggletip)
+
+The Toggletip component provides an accessible way to render interactive content within a popover. If you do not have any interactive content inside of your Toggletip, consider using Tooltip instead.
+
+## Getting started
+
+Here's a quick example to get you started.
+
+### JS (via import)
+
+```javascript
+import '@carbon/web-components/es/components/toggle-tip/index.js';
+import '@carbon/web-components/es/components/link/index.js';
+import '@carbon/web-components/es/components/button/index.js';
+```
+
+
+
+
+### HTML
+
+```html
+
+ Toggletip label
+
+
+ Lorem ipsum dolor sit amet, di os consectetur adipiscing elit, sed do eiusmod tempor incididunt ut fsil labore et dolore magna aliqua.
+
+ Test
+ Button
+
+```
+
+### `` attributes and properties
+
+Note: For `boolean` attributes, `true` means simply setting the attribute (e.g.
+``) and `false` means not setting the attribute (e.g.
+`` without `open` attribute).
+
+
diff --git a/packages/carbon-web-components/src/components/toggle-tip/toggletip.scss b/packages/carbon-web-components/src/components/toggle-tip/toggletip.scss
index 9cce2504793..340bef4557a 100644
--- a/packages/carbon-web-components/src/components/toggle-tip/toggletip.scss
+++ b/packages/carbon-web-components/src/components/toggle-tip/toggletip.scss
@@ -1,7 +1,7 @@
/**
* @license
*
- * Copyright IBM Corp. 2019, 2023
+ * Copyright IBM Corp. 2019, 2024
*
* 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,6 +12,7 @@
@use '@carbon/styles/scss/utilities';
@use '@carbon/styles/scss/spacing' as *;
@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/type' as *;
@use '@carbon/styles/scss/components/toggletip/index' as *;
@use '@carbon/styles/scss/components/tooltip/index' as *;
@use '@carbon/styles/scss/utilities/button-reset';
@@ -31,4 +32,8 @@
.#{$prefix}--popover-caret {
background-color: $background-inverse;
}
+
+ ::slotted([slot='body-text']) {
+ all: unset !important;
+ }
}
diff --git a/packages/carbon-web-components/src/components/toggle-tip/toggletip.stories.ts b/packages/carbon-web-components/src/components/toggle-tip/toggletip.stories.ts
new file mode 100644
index 00000000000..686bd3d88aa
--- /dev/null
+++ b/packages/carbon-web-components/src/components/toggle-tip/toggletip.stories.ts
@@ -0,0 +1,107 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2019, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { html } from 'lit';
+import './toggletip';
+import '../button';
+import { POPOVER_ALIGNMENT } from '../popover/defs';
+import storyDocs from './toggletip.mdx';
+
+const tooltipAlignments = {
+ [`top`]: POPOVER_ALIGNMENT.TOP,
+ [`top-left`]: POPOVER_ALIGNMENT.TOP_LEFT,
+ [`top-right`]: POPOVER_ALIGNMENT.TOP_RIGHT,
+ [`bottom`]: POPOVER_ALIGNMENT.BOTTOM,
+ [`bottom-left`]: POPOVER_ALIGNMENT.BOTTOM_LEFT,
+ [`bottom-right`]: POPOVER_ALIGNMENT.BOTTOM_RIGHT,
+ [`left`]: POPOVER_ALIGNMENT.LEFT,
+ [`left-bottom`]: POPOVER_ALIGNMENT.LEFT_BOTTOM,
+ [`left-top`]: POPOVER_ALIGNMENT.LEFT_TOP,
+ [`right`]: POPOVER_ALIGNMENT.RIGHT,
+ [`right-bottom`]: POPOVER_ALIGNMENT.RIGHT_BOTTOM,
+ [`right-top`]: POPOVER_ALIGNMENT.RIGHT_TOP,
+};
+
+const defaultArgs = {
+ alignment: 'bottom',
+ open: true,
+};
+
+const controls = {
+ alignment: {
+ control: 'select',
+ description: 'Specify how the toggletip should align with the button',
+ options: tooltipAlignments,
+ },
+ open: {
+ control: 'boolean',
+ description: 'Specify if the toggletip should be open',
+ },
+};
+
+export const Default = {
+ render: () => html`
+
+
+
+ Toggletip label
+
+
+ Lorem ipsum dolor sit amet, di os consectetur adipiscing elit, sed
+ do eiusmod tempor incididunt ut fsil labore et dolore magna aliqua.
+
+ Test
+ Button
+
+
+
+
+
+
+ Toggletip label -- using open prop
+
+
+ Lorem ipsum dolor sit amet, di os consectetur adipiscing elit, sed
+ do eiusmod tempor incididunt ut fsil labore et dolore magna aliqua.
+
+ Test
+ Button
+
+
+
open prop
+
+
+ Lorem ipsum dolor sit amet, di os consectetur adipiscing elit, sed do
+ eiusmod tempor incididunt ut fsil labore et dolore magna aliqua.
+
+ Test
+ Button
+
+ `,
+};
+
+const meta = {
+ title: 'Components/Toggletip',
+ parameters: {
+ docs: {
+ page: storyDocs,
+ },
+ },
+};
+
+export default meta;
diff --git a/packages/carbon-web-components/src/components/toggle/toggle-story.ts b/packages/carbon-web-components/src/components/toggle/toggle-story.ts
deleted file mode 100644
index 8c64efa6ccb..00000000000
--- a/packages/carbon-web-components/src/components/toggle/toggle-story.ts
+++ /dev/null
@@ -1,107 +0,0 @@
-/**
- * @license
- *
- * Copyright IBM Corp. 2019, 2023
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-import { html } from 'lit';
-import { ifDefined } from 'lit/directives/if-defined.js';
-import { action } from '@storybook/addon-actions';
-import { boolean, select } from '@storybook/addon-knobs';
-import textNullable from '../../../.storybook/knob-text-nullable';
-import { prefix } from '../../globals/settings';
-import { TOGGLE_SIZE } from './toggle';
-import storyDocs from './toggle-story.mdx';
-
-const sizes = {
- 'Regular size': null,
- [`Small size (${TOGGLE_SIZE.SMALL})`]: TOGGLE_SIZE.SMALL,
-};
-
-export const Default = (args) => {
- const { onChange } = args?.[`${prefix}-toggle`] ?? {};
- return html`
-
- `;
-};
-
-Default.storyName = 'Default';
-
-export const SmallToggle = (args) => {
- const { onChange } = args?.[`${prefix}-toggle`] ?? {};
- return html`
-
- `;
-};
-
-SmallToggle.storyName = 'Small toggle';
-
-export const Playground = (args) => {
- const {
- checked,
- labelA,
- disabled,
- hideLabel,
- labelText,
- readOnly,
- name,
- size,
- labelB,
- value,
- onChange,
- } = args?.[`${prefix}-toggle`] ?? {};
- return html`
-
- `;
-};
-
-Playground.storyName = 'Playground';
-Playground.parameters = {
- knobs: {
- [`${prefix}-toggle`]: () => ({
- checked: boolean('Checked (checked)', true),
- labelA: textNullable('Text for checked state (label-a)', 'On'),
- disabled: boolean('Disabled (disabled)', false),
- hideLabel: boolean('Hide label (hideLabel)', false),
- labelText: textNullable('Label text (label-text)', ''),
- readOnly: boolean('Read only (read-only)', false),
- name: textNullable('Name (name)', ''),
- size: select('Toggle size (size)', sizes, null),
- labelB: textNullable('Text for unchecked state (label-b)', 'Off'),
- value: textNullable('Value (value)', ''),
- onChange: action(`${prefix}-toggle-changed`),
- }),
- },
-};
-
-export default {
- title: 'Components/Toggle',
- parameters: {
- ...storyDocs.parameters,
- },
-};
diff --git a/packages/carbon-web-components/src/components/toggle/toggle-story.mdx b/packages/carbon-web-components/src/components/toggle/toggle.mdx
similarity index 93%
rename from packages/carbon-web-components/src/components/toggle/toggle-story.mdx
rename to packages/carbon-web-components/src/components/toggle/toggle.mdx
index 1912dc63d46..1bb4e1d0a5e 100644
--- a/packages/carbon-web-components/src/components/toggle/toggle-story.mdx
+++ b/packages/carbon-web-components/src/components/toggle/toggle.mdx
@@ -1,4 +1,4 @@
-import { Props, Description } from '@storybook/addon-docs/blocks';
+import { ArgsTable, Description, Meta } from '@storybook/blocks';
import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn';
# Toggle
@@ -47,4 +47,4 @@ import '@carbon/web-components/es/components/toggle/index.js';
## `` attributes, properties and events
-
+
diff --git a/packages/carbon-web-components/src/components/toggle/toggle.stories.ts b/packages/carbon-web-components/src/components/toggle/toggle.stories.ts
new file mode 100644
index 00000000000..f230c52539e
--- /dev/null
+++ b/packages/carbon-web-components/src/components/toggle/toggle.stories.ts
@@ -0,0 +1,120 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2019, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { html } from 'lit';
+import './index';
+import '../stack/index';
+import { TOGGLE_SIZE } from './toggle';
+import storyDocs from './toggle.mdx';
+
+const sizes = {
+ 'Regular size': null,
+ [`Small size (${TOGGLE_SIZE.SMALL})`]: TOGGLE_SIZE.SMALL,
+};
+
+const defaultArgs = {
+ labelA: 'On',
+ labelB: 'Off',
+ checked: true,
+};
+
+const controls = {
+ disabled: {
+ control: 'boolean',
+ description: 'Whether this control should be disabled',
+ },
+ hideLabel: {
+ control: 'boolean',
+ description:
+ "If true, the side labels (props.labelA and props.labelB) will be replaced by props.labelText (if passed), so that the toggle doesn't render a top label.",
+ },
+ labelA: {
+ control: 'text',
+ description: 'The text for the checked state.',
+ },
+ labelB: {
+ control: 'text',
+ description: 'The text for the unchecked state',
+ },
+ labelText: {
+ control: 'text',
+ description: 'The text that is read for the control',
+ },
+ readonly: {
+ control: 'boolean',
+ description: 'Whether the toggle should be read-only',
+ },
+ size: {
+ control: 'radio',
+ description:
+ "Specify the size of the Toggle. Currently only supports 'sm' or 'md' (default)",
+ options: sizes,
+ },
+ checked: {
+ control: 'boolean',
+ description: 'Specify whether the control is toggled',
+ },
+};
+
+export const Default = {
+ render: () => html`
+
+ `,
+};
+
+export const SmallToggle = {
+ render: () => html`
+
+ `,
+};
+
+export const Playground = {
+ argTypes: controls,
+ args: defaultArgs,
+ render: ({
+ disabled,
+ hideLabel,
+ labelA,
+ labelB,
+ labelText,
+ readonly,
+ size,
+ checked,
+ }) => html`
+
+ `,
+};
+
+const meta = {
+ title: 'Components/Toggle',
+ parameters: {
+ docs: {
+ page: storyDocs,
+ },
+ },
+};
+
+export default meta;
diff --git a/packages/carbon-web-components/src/components/ui-shell/ui-shell-story.mdx b/packages/carbon-web-components/src/components/ui-shell/ui-shell.mdx
similarity index 93%
rename from packages/carbon-web-components/src/components/ui-shell/ui-shell-story.mdx
rename to packages/carbon-web-components/src/components/ui-shell/ui-shell.mdx
index fab6ba477d0..c57eed87993 100644
--- a/packages/carbon-web-components/src/components/ui-shell/ui-shell-story.mdx
+++ b/packages/carbon-web-components/src/components/ui-shell/ui-shell.mdx
@@ -1,4 +1,4 @@
-import { Props, Description } from '@storybook/addon-docs/blocks';
+import { ArgTypes, Markdown } from '@storybook/addon-docs/blocks';
import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn';
# UI Shell
@@ -21,8 +21,8 @@ Here's a quick example to get you started.
import '@carbon/web-components/es/components/ui-shell/index.js';
```
-
-
+{`${cdnJs({ components: ['ui-shell'] })}`}
+{`${cdnCss()}`}
### HTML
@@ -181,7 +181,7 @@ Note: For `boolean` attributes, `true` means simply setting the attribute (e.g.
``) and `false` means not setting the attribute (e.g.
`` without `expanded` attribute).
-
+
### `` attributes and properties
@@ -189,7 +189,7 @@ Note: For `boolean` attributes, `true` means simply setting the attribute (e.g.
``) and `false` means not setting the attribute (e.g.
`` without `active` attribute).
-
+
### `` attributes and properties
@@ -197,7 +197,7 @@ Note: For `boolean` attributes, `true` means simply setting the attribute (e.g.
``) and `false` means not setting the attribute (e.g.
`` without `active` attribute).
-
+
### `` attributes and properties
@@ -205,7 +205,7 @@ Note: For `boolean` attributes, `true` means simply setting the attribute (e.g.
``) and `false` means not setting the attribute
(e.g. `` without `active` attribute).
-
+
## Header nav
@@ -221,17 +221,13 @@ Header nav in UI Shell consists of the following components:
| `` | The expando button for side nav |
| `` | The UI to show product name |
-
-
-
-
### `` attributes and properties
-
+
### `` attributes and properties
-
+
### `` attributes and properties
@@ -239,7 +235,7 @@ Note: For `boolean` attributes, `true` means simply setting the attribute (e.g.
``) and `false` means not setting the attribute (e.g.
`` without `expanded` attribute).
-
+
### `` attributes and properties
@@ -247,12 +243,12 @@ Note: For `boolean` attributes, `true` means simply setting the attribute (e.g.
``) and `false` means not setting the attribute
(e.g. `` without `active` attribute).
-
+
### `` attributes and properties
-
+
### `` attributes and properties
-
+
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.stories.ts
similarity index 72%
rename from packages/carbon-web-components/src/components/ui-shell/ui-shell-story.ts
rename to packages/carbon-web-components/src/components/ui-shell/ui-shell.stories.ts
index 91e6a40cca9..a6e56ca0ec7 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.stories.ts
@@ -23,7 +23,7 @@ import '../skip-to-content';
import '../modal/modal';
import '../button/button';
import styles from './ui-shell-story.scss?lit';
-import storyDocs from './ui-shell-story.mdx';
+import storyDocs from './ui-shell.mdx';
import { prefix } from '../../globals/settings';
const linksHref = 'https://www.carbondesignsystem.com/';
@@ -120,205 +120,217 @@ const StoryContent = ({ useResponsiveOffset = true }) => {
`;
};
-export const FixedSideNav = () => {
- const result = html`
-
-
-
-
-
- L0 menu item
-
-
- L0 menu item
-
-
- L0 menu item
-
-
-
-
- L0 menu item
-
-
- L0 menu item
-
-
- L0 menu item
-
-
-
-
- L0 menu item
-
-
- L0 menu item
-
-
- L0 menu item
-
-
- L0 link
- L0 link
-
-
- ${StoryContent({ useResponsiveOffset: false })}
- `;
- (result as any).hasMainTag = true;
- return result;
+export const FixedSideNav = {
+ name: 'Fixed SideNav',
+ render: () => {
+ const result = html`
+
+
+
+
+
+ L0 menu item
+
+
+ L0 menu item
+
+
+ L0 menu item
+
+
+
+
+ L0 menu item
+
+
+ L0 menu item
+
+
+ L0 menu item
+
+
+
+
+ L0 menu item
+
+
+ L0 menu item
+
+
+ L0 menu item
+
+
+ L0 link
+ L0 link
+
+
+ ${StoryContent({ useResponsiveOffset: false })}
+ `;
+ (result as any).hasMainTag = true;
+ return result;
+ },
};
-FixedSideNav.storyName = 'Fixed SideNav';
-
-export const FixedSideNavDivider = () => {
- const result = html`
-
-
-
-
-
- L0 menu item
-
-
- L0 menu item
-
-
- L0 menu item
-
-
-
-
- L0 menu item
-
-
- L0 menu item
-
-
- L0 menu item
-
-
-
-
- L0 menu item
-
-
- L0 menu item
-
-
- L0 menu item
-
-
-
- L0 link
- L0 link
-
-
- ${StoryContent({ useResponsiveOffset: false })}
- `;
- (result as any).hasMainTag = true;
- return result;
+export const FixedSideNavDivider = {
+ name: 'Fixed SideNav w/Divider',
+ render: () => {
+ const result = html`
+
+
+
+
+
+ L0 menu item
+
+
+ L0 menu item
+
+
+ L0 menu item
+
+
+
+
+ L0 menu item
+
+
+ L0 menu item
+
+
+ L0 menu item
+
+
+
+
+ L0 menu item
+
+
+ L0 menu item
+
+
+ L0 menu item
+
+
+
+ L0 link
+ L0 link
+
+
+ ${StoryContent({ useResponsiveOffset: false })}
+ `;
+ (result as any).hasMainTag = true;
+ return result;
+ },
};
-FixedSideNavDivider.storyName = 'Fixed SideNav w/ Divider';
-
-export const FixedSideNavIcons = () => {
- const result = html`
-
-
-
-
- ${Fade16({ slot: 'title-icon' })}
-
- Link
-
-
- Link
-
-
- Link
-
-
-
- ${Fade16({ slot: 'title-icon' })}
-
- Link
-
-
- Link
-
-
- Link
-
-
-
- ${Fade16({ slot: 'title-icon' })}
-
- Link
-
-
- Link
-
-
- Link
-
-
- ${Fade16({ slot: 'title-icon' })}Link
- ${Fade16({ slot: 'title-icon' })}Link
-
-
- ${StoryContent({ useResponsiveOffset: false })}
- `;
- (result as any).hasMainTag = true;
- return result;
+export const FixedSideNavIcons = {
+ name: 'Fixed SideNav w/ Icons',
+ render: () => {
+ const result = html`
+
+
+
+
+ ${Fade16({ slot: 'title-icon' })}
+
+ Link
+
+
+ Link
+
+
+ Link
+
+
+
+ ${Fade16({ slot: 'title-icon' })}
+
+ Link
+
+
+ Link
+
+
+ Link
+
+
+
+ ${Fade16({ slot: 'title-icon' })}
+
+ Link
+
+
+ Link
+
+
+ Link
+
+
+ ${Fade16({ slot: 'title-icon' })}Link
+ ${Fade16({ slot: 'title-icon' })}Link
+
+
+ ${StoryContent({ useResponsiveOffset: false })}
+ `;
+ (result as any).hasMainTag = true;
+ return result;
+ },
};
-FixedSideNavIcons.storyName = 'Fixed SideNav w/ Icons';
-
-export const HeaderBase = () => {
- return html`
[Platform]
- `;
+ `,
};
-export const HeaderBaseWActions = () => {
- return html`
@@ -341,13 +353,12 @@ export const HeaderBaseWActions = () => {
${SwitcherIcon20({ slot: 'icon' })}
- `;
+ `,
};
-HeaderBaseWActions.storyName = 'Header Base w/ Actions';
-
-export const HeaderBaseWActionsRightPanel = () => {
- return html`
@@ -375,14 +386,12 @@ export const HeaderBaseWActionsRightPanel = () => {
id="notification-panel"
expanded
aria-label="Header Panel">
- `;
+ `,
};
-HeaderBaseWActionsRightPanel.storyName =
- 'Header Base w/ Actions and Right Panel';
-
-export const HeaderBaseWActionsSwitcher = () => {
- return html`
@@ -432,13 +441,12 @@ export const HeaderBaseWActionsSwitcher = () => {
- ${StoryContent({ useResponsiveOffset: true })}`;
+ ${StoryContent({ useResponsiveOffset: true })}`,
};
-HeaderBaseWActionsSwitcher.storyName = 'Header Base w/ Actions and Switcher';
-
-export const HeaderBaseWNavigationActionsAndSideNav = () => {
- return html`
@@ -557,14 +565,12 @@ export const HeaderBaseWNavigationActionsAndSideNav = () => {
- ${StoryContent({ useResponsiveOffset: true })}`;
+ ${StoryContent({ useResponsiveOffset: true })}`,
};
-HeaderBaseWNavigationActionsAndSideNav.storyName =
- 'Header Base w/ Navigation, Actions and SideNav';
-
-export const HeaderBaseWNavigationActions = () => {
- return html`
@@ -639,14 +645,12 @@ export const HeaderBaseWNavigationActions = () => {
- `;
+ `,
};
-HeaderBaseWNavigationActions.storyName =
- 'Header Base w/ Navigation and Actions';
-
-export const HeaderBaseWNavigation = () => {
- return html`
@@ -705,85 +709,85 @@ export const HeaderBaseWNavigation = () => {
- `;
+ `,
};
-HeaderBaseWNavigation.storyName = 'Header Base w/ Navigation';
-
-export const HeaderBaseWSideNav = () => {
- const result = html`
-
-
-
- [Platform]
-
-
-
- ${Fade16({ slot: 'title-icon' })}
-
- Link
-
-
- Link
-
-
- Link
-
-
-
- ${Fade16({ slot: 'title-icon' })}
-
- Link
-
-
- Link
-
-
- Link
-
-
-
- ${Fade16({ slot: 'title-icon' })}
-
- Link
-
-
- Link
-
-
- Link
-
-
- ${Fade16({ slot: 'title-icon' })}Link
- ${Fade16({ slot: 'title-icon' })}Link
-
-
-
- ${StoryContent({ useResponsiveOffset: true })}
- `;
- (result as any).hasMainTag = true;
- return result;
+export const HeaderBaseWSideNav = {
+ name: 'Header Base w/ SideNav',
+ render: () => {
+ const result = html`
+
+
+
+ [Platform]
+
+
+
+ ${Fade16({ slot: 'title-icon' })}
+
+ Link
+
+
+ Link
+
+
+ Link
+
+
+
+ ${Fade16({ slot: 'title-icon' })}
+
+ Link
+
+
+ Link
+
+
+ Link
+
+
+
+ ${Fade16({ slot: 'title-icon' })}
+
+ Link
+
+
+ Link
+
+
+ Link
+
+
+ ${Fade16({ slot: 'title-icon' })}Link
+ ${Fade16({ slot: 'title-icon' })}Link
+
+
+
+ ${StoryContent({ useResponsiveOffset: true })}
+ `;
+ (result as any).hasMainTag = true;
+ return result;
+ },
};
-HeaderBaseWSideNav.storyName = 'Header Base w/ SideNav';
-
-export const HeaderBaseWSkipToContent = () => {
- return html`
@@ -808,13 +812,12 @@ export const HeaderBaseWSkipToContent = () => {
- ${StoryContent({ useResponsiveOffset: true })}`;
+ ${StoryContent({ useResponsiveOffset: true })}`,
};
-HeaderBaseWSkipToContent.storyName = 'Header Base w/ SkipToContent';
-
-export const SideNavRail = () => {
- return html`
{
>
- ${StoryContent({ useResponsiveOffset: true })}`;
+ ${StoryContent({ useResponsiveOffset: true })}`,
};
-SideNavRail.storyName = 'SideNav Rail';
-
-export const SideNavRailWHeader = () => {
- return html`
@@ -974,64 +976,66 @@ export const SideNavRailWHeader = () => {
- ${StoryContent({ useResponsiveOffset: true })}`;
+ ${StoryContent({ useResponsiveOffset: true })}`,
};
-SideNavRailWHeader.storyName = 'SideNav Rail w/ Header';
-
-export const SideNavWLargeSideNavItems = () => {
- const result = html`
-
-
-
-
-
- Menu 1
-
-
- Menu 2
-
-
- Menu 3
-
-
- Large link
- ${Fade16({ slot: 'title-icon' })}
-
- Menu 1
-
-
- Menu 2
-
-
- Menu 3
-
-
-
- ${Fade16({ slot: 'title-icon' })} Large link w/icon
-
-
- ${StoryContent({ useResponsiveOffset: true })}
- `;
- (result as any).hasMainTag = true;
- return result;
+export const SideNavWLargeSideNavItems = {
+ name: 'SideNav w/ large side nav items',
+ render: () => {
+ const result = html`
+
+
+
+
+
+ Menu 1
+
+
+ Menu 2
+
+
+ Menu 3
+
+
+ Large link
+ ${Fade16({ slot: 'title-icon' })}
+
+ Menu 1
+
+
+ Menu 2
+
+
+ Menu 3
+
+
+
+ ${Fade16({ slot: 'title-icon' })} Large link
+ w/icon
+
+
+ ${StoryContent({ useResponsiveOffset: true })}
+ `;
+ (result as any).hasMainTag = true;
+ return result;
+ },
};
-SideNavWLargeSideNavItems.storyName = 'SideNav w/ large side nav items';
-
export default {
title: 'Components/UI Shell',
parameters: {
- ...storyDocs.parameters,
+ docs: {
+ page: storyDocs,
+ },
},
};
diff --git a/packages/carbon-web-components/tests/spec/structured-list_spec.ts b/packages/carbon-web-components/tests/spec/structured-list_spec.ts
index 074c3d34b2d..8f79467d8f7 100644
--- a/packages/carbon-web-components/tests/spec/structured-list_spec.ts
+++ b/packages/carbon-web-components/tests/spec/structured-list_spec.ts
@@ -9,7 +9,7 @@
import { render } from 'lit';
import BXStructuredListRow from '../../src/components/structured-list/structured-list-row';
-import { Playground } from '../../src/components/structured-list/structured-list-story';
+import { Playground } from '../../src/components/structured-list/structured-list.stories';
const template = (props?) =>
Playground({
diff --git a/packages/carbon-web-components/tests/spec/tabs_spec.ts b/packages/carbon-web-components/tests/spec/tabs_spec.ts
index b637e6e0cd3..3407cd3e00c 100644
--- a/packages/carbon-web-components/tests/spec/tabs_spec.ts
+++ b/packages/carbon-web-components/tests/spec/tabs_spec.ts
@@ -11,7 +11,7 @@ import { render } from 'lit';
import EventManager from '../utils/event-manager';
import CDSTabs from '../../src/components/tabs/tabs';
import CDSTab from '../../src/components/tabs/tab';
-import { Playground } from '../../src/components/tabs/tabs-story';
+import { Playground } from '../../src/components/tabs/tabs.stories';
const template = (props?) =>
Playground({
diff --git a/packages/carbon-web-components/tests/spec/text-input_spec.ts b/packages/carbon-web-components/tests/spec/text-input_spec.ts
index 1bd3a374fb6..9541a7fbe16 100644
--- a/packages/carbon-web-components/tests/spec/text-input_spec.ts
+++ b/packages/carbon-web-components/tests/spec/text-input_spec.ts
@@ -13,7 +13,7 @@ import EventManager from '../utils/event-manager';
import CDSTextInput, {
INPUT_TYPE,
} from '../../src/components/text-input/text-input';
-import { Playground } from '../../src/components/text-input/text-input-story';
+import { Playground } from '../../src/components/text-input/text-input.stories';
/**
* @param formData A `FormData` instance.
diff --git a/packages/carbon-web-components/tests/spec/textarea_spec.ts b/packages/carbon-web-components/tests/spec/textarea_spec.ts
index 9f142b85524..d5109ff574e 100644
--- a/packages/carbon-web-components/tests/spec/textarea_spec.ts
+++ b/packages/carbon-web-components/tests/spec/textarea_spec.ts
@@ -11,7 +11,7 @@ import { html, render } from 'lit';
import EventManager from '../utils/event-manager';
import CDSTextarea from '../../src/components/textarea/textarea';
-import { Playground } from '../../src/components/textarea/textarea-story';
+import { Playground } from '../../src/components/textarea/textarea.stories';
/**
* @param formData A `FormData` instance.
diff --git a/packages/carbon-web-components/tests/spec/toggle_spec.ts b/packages/carbon-web-components/tests/spec/toggle_spec.ts
index 2bda1322587..822a8258a44 100644
--- a/packages/carbon-web-components/tests/spec/toggle_spec.ts
+++ b/packages/carbon-web-components/tests/spec/toggle_spec.ts
@@ -8,7 +8,7 @@
*/
import { html, render } from 'lit';
-import { Default } from '../../src/components/toggle/toggle-story';
+import { Default } from '../../src/components/toggle/toggle.stories';
/**
* @param formData A `FormData` instance.