)', ''),
- onRequestClose: action('onRequestClose'),
- onRequestSubmit: action('onRequestSubmit'),
- }),
-};
-
-const scrollingContent = (
- <>
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id accumsan augue. Phasellus
- consequat augue vitae tellus tincidunt posuere. Curabitur justo urna, consectetur vel elit
- iaculis, ultrices condimentum risus. Nulla facilisi. Etiam venenatis molestie tellus. Quisque
- consectetur non risus eu rutrum.{' '}
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id accumsan augue. Phasellus
- consequat augue vitae tellus tincidunt posuere. Curabitur justo urna, consectetur vel elit
- iaculis, ultrices condimentum risus. Nulla facilisi. Etiam venenatis molestie tellus. Quisque
- consectetur non risus eu rutrum.{' '}
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id accumsan augue. Phasellus
- consequat augue vitae tellus tincidunt posuere. Curabitur justo urna, consectetur vel elit
- iaculis, ultrices condimentum risus. Nulla facilisi. Etiam venenatis molestie tellus. Quisque
- consectetur non risus eu rutrum.{' '}
-
- Lorem ipsum
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id accumsan augue. Phasellus
- consequat augue vitae tellus tincidunt posuere. Curabitur justo urna, consectetur vel elit
- iaculis, ultrices condimentum risus. Nulla facilisi. Etiam venenatis molestie tellus. Quisque
- consectetur non risus eu rutrum.{' '}
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id accumsan augue. Phasellus
- consequat augue vitae tellus tincidunt posuere. Curabitur justo urna, consectetur vel elit
- iaculis, ultrices condimentum risus. Nulla facilisi. Etiam venenatis molestie tellus. Quisque
- consectetur non risus eu rutrum.{' '}
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id accumsan augue. Phasellus
- consequat augue vitae tellus tincidunt posuere. Curabitur justo urna, consectetur vel elit
- iaculis, ultrices condimentum risus. Nulla facilisi. Etiam venenatis molestie tellus. Quisque
- consectetur non risus eu rutrum.{' '}
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id accumsan augue. Phasellus
- consequat augue vitae tellus tincidunt posuere. Curabitur justo urna, consectetur vel elit
- iaculis, ultrices condimentum risus. Nulla facilisi. Etiam venenatis molestie tellus. Quisque
- consectetur non risus eu rutrum.{' '}
-
-
-);
-
-export default {
- title: 'ComposedModal',
- decorators: [withKnobs],
-};
-
-export const UsingHeaderFooterProps = () => {
- const { size, ...rest } = props.composedModal();
- return (
-
-
-
- Please see ModalWrapper for more examples and demo of the functionality.
-
- {props.modalBody().hasScrollingContent && scrollingContent}
-
-
- );
-};
-
-UsingHeaderFooterProps.story = {
- name: 'Using Header / Footer Props',
-
- parameters: {
- info: {
- text: `
- Composed Modal allows you to create your own modal with just the parts you need. The ComposedModal element provides the state management for open/close, as well as passes the ModalHeader a prop to close the modal (with the close button).
-
- The interior components - ModalHeader / ModalBody / ModalFooter - are all container elements that will render any children you add in, wrapped in the appropriate CSS classes.
-
- The Modal Header / Modal Footer come with some built in props to let you accelerate towards standard Carbon modal UI. If there are customizations you need to do, see the next example of just using the interior components as containers.
- `,
- },
- },
-};
-
-export const UsingChildNodes = () => {
- const { size, ...rest } = props.composedModal();
- return (
-
-
- Testing
-
-
- Please see ModalWrapper for more examples and demo of the functionality.
- {props.modalBody().hasScrollingContent && scrollingContent}
-
-
- Cancel
- Save
-
-
- );
-};
-
-UsingChildNodes.story = {
- name: 'Using child nodes',
-
- parameters: {
- info: {
- text: `
- Alternatively, you can just use the Modal components as wrapper elements and figure the children out yourself. We do suggest for the header you utilize the built in props for label and title though, for the footer it's mostly a composed element so creating the two buttons yourself (using the Button component) is probably the most straight-forward pattern.
- `,
- },
- },
-};
-
-export const TitleOnly = () => {
- const { size, ...rest } = props.composedModal({ titleOnly: true });
- return (
-
-
- );
-};
-
-TitleOnly.story = {
- name: 'Title only',
-
- parameters: {
- info: {
- text: `
- In "small" and "xs" modals size, the title is allowed to span multiple lines and be used for the main message.
- It should be less than 3 lines of text. If more room is required then use the standard body copy format.
- `,
- },
- },
-};
-
-export const ExampleUsageWithTriggerButton = () => {
- class ComposedModalExample extends React.Component {
- state = { open: false };
- toggleModal = open => this.setState({ open });
- render() {
- const { open } = this.state;
- const { size, ...rest } = props.composedModal();
- return (
- <>
- this.toggleModal(true)}>Launch composed modal
- this.toggleModal(false)}
- >
-
-
- Please see ModalWrapper for more examples and demo of the functionality.
-
- {props.modalBody().hasScrollingContent && scrollingContent}
-
-
-
- );
- }
- }
- return
-
- );
-};
-
-Default.story = {
- parameters: {
- info: {
- text: `
- The Content Switcher component manipulates the content shown following an exclusive or “either/or” pattern.
- Create Switch components for each section in the content switcher.
- `,
- },
- },
-};
-
-export const Selected = () => {
- const switchProps = props.switch();
- return (
-
-
- );
-};
-
-Selected.story = {
- parameters: {
- info: {
- text: `
- Render the Content Switcher with a different section automatically selected
- `,
- },
- },
-};
diff --git a/packages/styles/src/carbon-stories/CopyButton/CopyButton-story.js b/packages/styles/src/carbon-stories/CopyButton/CopyButton-story.js
deleted file mode 100644
index 31cacdd3f65..00000000000
--- a/packages/styles/src/carbon-stories/CopyButton/CopyButton-story.js
+++ /dev/null
@@ -1,35 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2020
- *
- * 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 React from 'react';
-import { action } from '@storybook/addon-actions';
-
-import { withKnobs, number, text } from '@storybook/addon-knobs';
-import { CopyButton } from 'carbon-components-react';
-
-const props = () => ({
- feedback: text('The text shown upon clicking (feedback)', 'Copied!'),
- feedbackTimeout: number('How long the text is shown upon clicking (feedbackTimeout)', 3000),
- iconDescription: text('Feedback icon description (iconDescription)', 'Copy to clipboard'),
- onClick: action('onClick'),
-});
-
-export default {
- title: 'CopyButton',
- decorators: [withKnobs],
-};
-
-export const Default = () => alongside and
- to create the toolbar and placeholder for where the batch action menu will
- be displayed.
-
- You can use the \`getBatchActionProps\` prop getter on the
- component to have it wire up the ghost menu for you.
-
- Individual components take in any kind of event handler
- prop that you would expect to use, like \`onClick\`. You can use these
- alongside the \`selectedRows\` property in your \`render\` prop function
- to pass along this info to your batch action handler.
-
- You can find more detailed information surrounding usage of this component
- at the following url: ${readmeURL}
- `,
- },
- },
-};
-
-export const WithDynamicContent = withReadme(readme, () =>
- require('./stories/with-dynamic-content').default(props())
-);
-
-WithDynamicContent.story = {
- name: 'with dynamic content',
-
- parameters: {
- info: {
- text: `
- Showcases DataTable behavior when rows are added to the component,
- and when cell data changes dynamically.
- `,
- },
- },
-};
-
-export const WithBooleanColumn = withReadme(readme, () =>
- require('./stories/with-boolean-column').default(props())
-);
-
-WithBooleanColumn.story = {
- name: 'with boolean column',
-
- parameters: {
- info: {
- text: `
- DataTable with toolbar and filtering with column has boolean value.
- `,
- },
- },
-};
-
-export const WithOptions = withReadme(readme, () =>
- require('./stories/with-options').default(props())
-);
-
-WithOptions.story = {
- name: 'with options',
-
- parameters: {
- info: {
- text: `
- DataTable with options like disabled, isSelected, isExpanded etc.
-
- You can find more detailed information surrounding usage of this component
- at the following url: ${readmeURL}
- `,
- },
- },
-};
-
-// export const WithOverflowMenu = withReadme(readme, () =>
-// require('./stories/with-overflow-menu').default(props())
-// );
-//
-// WithOverflowMenu.story = {
-// name: 'with overflow menu',
-//
-// parameters: {
-// info: {
-// text: `
-// DataTable with Overflow menus added.
-//
-// You can find more detailed information surrounding usage of this component
-// at the following url: ${readmeURL}
-// `,
-// },
-// },
-// };
diff --git a/packages/styles/src/carbon-stories/DataTable/README.md b/packages/styles/src/carbon-stories/DataTable/README.md
deleted file mode 100644
index 18257c9d0fa..00000000000
--- a/packages/styles/src/carbon-stories/DataTable/README.md
+++ /dev/null
@@ -1,769 +0,0 @@
-# `DataTable` component
-
-> A set of table primitives to help teams build simple, flexible, and WAI-ARIA
-> compliant Tables in React
-
-## Table of Contents
-
-
-
-
-
-
-
-- [Installation](#installation)
-- [Usage](#usage)
-- [Props](#props)
- - [`rows`](#rows)
- - [`headers`](#headers)
- - [`sortRow`](#sortrow)
- - [`filterRows`](#filterrows)
- - [`locale`](#locale)
-- [Render Prop Function](#render-prop-function)
- - [Prop Getters](#prop-getters)
- - [Actions](#actions)
- - [State](#state)
- - [Props](#props-1)
-- [Use-cases](#use-cases)
- - [Sorting](#sorting)
- - [Programmatic sorting](#programmatic-sorting)
- - [Custom sorting](#custom-sorting)
- - [Expansion](#expansion)
- - [Programmatic expansion](#programmatic-expansion)
- - [Selection](#selection)
- - [Programmatic selection](#programmatic-selection)
- - [Filtering](#filtering)
- - [Batch Actions](#batch-actions)
-- [Attribution](#attribution)
-
-
-
-## Installation
-
-This component comes with any installation of the `carbon-components-react`
-package on NPM. You can install this package by running the following in your
-terminal:
-
-```bash
-npm i carbon-components carbon-components-react carbon-icons --save
-# Or, with yarn
-yarn add carbon-components carbon-components-react carbon-icons
-```
-
-## Usage
-
-You can include `DataTable` and its components by doing the following in your
-project:
-
-```js
-import { DataTable } from 'carbon-components-react';
-```
-
-The default export for `DataTable` also includes properties for all the `Table*`
-components that you will also want to use in your application. You can access
-them by doing either of the following:
-
-```js
-import { DataTable } from 'carbon-components-react';
-// De-structure `DataTable` directly to get local references
-const { Table, TableHead, TableHeader, TableBody, TableCell } = DataTable;
-
-// Or, just use them in your React projects by doing
- (
-
-
-
-
- {headers.map(header => (
-
- {header.header}
-
- ))}
-
-
-
- {rows.map(row => (
-
- {row.cells.map(cell => (
- {cell.value}
- ))}
-
- ))}
-
-
-
- )}
- />
- );
-}
-```
-
-In the example above, we can see that the `render` prop is just a function that
-has the following arguments:
-
-- `rows` which are the rows to be rendered inside of `TableBody`
-- `headers` which are the headers to be rendered inside of `TableHead`
-- `getHeaderProps` which is our first `prop` getter. This is used for adding in
- the hooks for `TableHeader` to properly sort your table
-
-For a full list of what is available in this `render` prop, check out the
-[Render Prop Function](#render-prop-function) section.
-
-## Props
-
-### `rows`
-
-The `rows` prop is where you provide us with a list of all the rows that you
-want to render in the table. The only hard requirement is that this is an array
-of objects, and that each object has a unique `id` field available on it. For
-example:
-
-```js
-const rows = [
- {
- id: 'a',
- field1: 'Field 1a',
- },
- {
- id: 'b',
- field1: 'Field 1b',
- },
- {
- id: 'c',
- field1: 'Field 1c',
- },
-];
-```
-
-#### Extra Options
-
-You can also pass optional options with each row object
-
-| property | type | description |
-| ------------ | ------- | ------------------------ |
-| `disabled` | boolean | will render row disabled |
-| `isSelected` | boolean | will render row selected |
-| `isExpanded` | boolean | will render row expanded |
-
-```js
-const rows = [
- {
- id: 'a',
- field1: 'Field 1a',
- disabled: true,
- isExpanded: true,
- },
- {
- id: 'b',
- field1: 'Field 1b',
- isSelected: true,
- },
-];
-```
-
-### `headers`
-
-The `headers` prop represents the order in which the headers should appear in
-the table. We expect an array of objects to be passed in, where `key` is the
-name of the key in a row object, and `header` is the name of the header. For
-example:
-
-```js
-// Given that we have the following rows with the fields `foo`, `bar`, and `baz`
-const rows = [
- {
- id: 'a',
- foo: 'Foo a',
- bar: 'Bar a',
- baz: 'Baz a',
- },
- {
- id: 'b',
- foo: 'Foo b',
- bar: 'Bar b',
- baz: 'Baz b',
- },
- {
- id: 'c',
- foo: 'Foo c',
- bar: 'Bar c',
- baz: 'Baz c',
- },
-];
-
-// We would have a headers array like the following
-const headers = [
- {
- // `key` is the name of the field on the row object itself for the header
- key: 'foo',
- // `header` will be the name you want rendered in the Table Header
- header: 'Foo',
- },
- {
- key: 'bar',
- header: 'Bar',
- },
- {
- key: 'baz',
- header: 'Baz',
- },
-];
-```
-
-### `sortRow`
-
-Optional hook to manually control sorting of the rows. You can find more
-information about this [here](#custom-sorting).
-
-### `filterRows`
-
-Optional hook to manually control filtering of the rows from the
-`TableToolbarSearch` component. The signature for the default implementation of
-this looks like the following:
-
-```js
-/**
- * Default implemention of how we filter rows internally. The idea behind this
- * implementation is to use the given list of row ids and headers to get the
- * individual cell values for a row. Then, we go through each cell value and see
- * if any of them includes the given inputValue.
- *
- * @param {Array[string]} rowIds array of all the row ids in the table
- * @param {Array[Object]} headers
- * @param {Object} cellsById object containing a map of cell id to cell
- * @param {string} inputValue the current input value in the Table Search
- * @returns {Array[string]} rowIds
- */
-const filterRows = ({ rowIds, headers, cellsById, inputValue }) => {
- // ...
-};
-```
-
-### `locale`
-
-Provide a string for the current locale. Defaults to `en`. This helps our
-default comparison methods better sort numeric inputs.
-
-## Render Prop Function
-
-The `render` prop is a function that you give to the `DataTable` component that
-takes in a variety of arguments and should ultimately return a valid React
-element, or component. This could be as simple or complex as the following
-example:
-
-```jsx
-// Not very useful, but returns a valid React element
-const renderProp = () =>
;
-// Useful and returns a valid React Component
-const renderProp = ({ rows, headers, getHeaderProps }) => (
-
-
-
-
- {headers.map(header => (
-
- {header.header}
-
- ))}
-
-
-
- {rows.map(row => (
-
- {row.cells.map(cell => (
- {cell.value}
- ))}
-
- ))}
-
-
-
-);
-```
-
-The types of arguments that this function has are as follows:
-
-- [Prop Getters](#prop-getters)
-- [Actions](#actions)
-- [State](#state)
-- [Props](#props)
-
-### Prop Getters
-
-> See
-> [the blog post about prop getters](https://blog.kentcdodds.com/how-to-give-rendering-control-to-users-with-prop-getters-549eaef76acf)
-
-These functions are used to apply props to the elements that you render. The
-idea behind this is that it can allow you more flexibility when deciding when to
-render, and where, while still allowing `DataTable` to help orchestrate state
-changes inside of the Table itself.
-
-You are able to call these on specific elements in your `render` prop function
-by doing the following:
-
-```jsx
-{header.header}
-```
-
-In order to make sure that everything works as intended, it's important that you
-pass all of the `props` that you want to place on the component as fields on the
-object you give to a prop getter. For example, if you wanted to add an `onClick`
-handler to `TableHeader` above, you would do the following:
-
-```js
-
- {header.header}
-
-```
-
-| property | type | description |
-| ------------------- | ----------------------- | -------------------------------------------------------- |
-| `getHeaderProps` | `({ header }) => props` | returns the props you should apply to a specific header |
-| `getRowProps` | `({ row }) => props` | returns the props you should apply to a specific row |
-| `getSelectionProps` | `({ row? }) => props` | returns the props you should apply to selection elements |
-
-### Actions
-
-These are functions you can call to change the state of the `DataTable`
-component.
-
-| property | type | description |
-| --------------- | ----------------------------- | ----------------------------------------------- |
-| `sortBy` | `(headerKey: string) => void` | Sort by the given `headerKey` value |
-| `selectAll` | `() => void` | Toggle the selection status of all rows |
-| `selectRow` | `(rowId: string) => void` | Select a specific row by the given `rowId` |
-| `expandRow` | `(rowId: string) => void` | Expand a specific row by the given `rowId` |
-| `onInputChange` | `(event: Event) => void` | Handle the input change of a table search field |
-
-### State
-
-These are values that represent the current state of the `DataTable` component.
-
-| property | type | description |
-| ------------ | ------- | ----------------------------------------------- |
-| rows | `Array` | The array of rows to render for the given table |
-| selectedRows | `Array` | the array of currently selected rows |
-
-### Props
-
-As a convenience, `headers` is passed through to make it easier to render the
-headers in your table.
-
-## Use-cases
-
-### Sorting
-
-In order to enable the sort behavior for a given `DataTable`, all you need to do
-is apply the `getHeaderProps` prop getter to each individual `TableHeader` that
-you want the sort actions hooked up for. In practice, this looks like the
-following:
-
-```jsx
- (
-
-
-
-
- {headers.map(header => (
-
- {header.header}
-
- ))}
-
-
-
- {rows.map(row => (
-
- {row.cells.map(cell => (
- {cell.value}
- ))}
-
- ))}
-
-
-
- )}
-/>
-```
-
-#### Programmatic sorting
-
-In addition to the prop getter specified in the previous section, you can also
-change the sort status of the table by using the `sortBy` action made available
-in your `render` prop function. This `sortBy` utility takes in the `key` of the
-header you want to sort by as an argument. After invoking this method with the
-given `key`, the table should be sorted by the header that you've specified.
-
-#### Custom sorting
-
-If the default sorting logic doesn't match your use-case, you can provide a
-custom sort method as a `sortRow` prop to `DataTable`.
-
-`sortRow` is a method that takes in the values of two cells, in addition to some
-info, and should return -1, 0, or 1 as a result (mirroring the native sort
-behavior in JavaScript).
-
-The two cells that are passed in are derived by accessing the value of the sort
-header in each row that we're comparing. For example, if we're sorting on the
-`Foo` header, with the `foo` key available in each row, then for row `a` and row
-`b` we would get the `a.foo` and `b.foo` field values.
-
-As a result, a custom `sortRow` function would take on the following shape:
-
-```js
-const customSortRow = (cellA, cellB, { sortDirection, sortStates, locale }) => {
- if (sortDirection === sortStates.DESC) {
- return compare(cellB, cellA, locale);
- }
-
- return compare(cellA, cellB, locale);
-};
-```
-
-### Expansion
-
-`DataTable` introduces the following components to help out with doing row
-expansion:
-
-- `TableExpandHeader`: generic component that you place in your `TableHead`.
- Acts as a column placeholder
-- `TableExpandRow`: generic component used for a row that you want to be
- expandable
-- `TableExpandedRow`: generic component used for the expanded part of a row.
- Anything you place in this component will appear when the row is expanded
-
-In practice, the combination of these components looks like the following:
-
-```jsx
- (
-
-
-
-
- {/* add the expand header before all other headers */}
-
- {header.header}
-
- ))}
-
-
-
- {rows.map(row => (
- {/* here we use a React fragment so that both rows are returned in the body */}
-
-
- {row.cells.map(cell => (
- {cell.value}
- ))}
-
- {/* toggle based off of if the row is expanded. If it is, render TableExpandedRow */}
- {row.isExpanded && (
-
- Expandable row content
- Description here
-
- )}
-
- ))}
-
-
-
- )}
-/>
-```
-
-Some things to note:
-
-- `TableExpandHeader` is placed before all other headers as a placeholder/blank
- column
-- `TableExpandRow` is what you use instead of `TableRow` for the content of your
- row. We make sure to add `getRowProps` so that it has the right props
-- `row.isExpanded` is the field available on `row` to know if the `row` is
- expanded or not
-- `TableExpandedRow` is used as a wrapper for any content you want to appear in
- the expanded row
- - Tip: the `colSpan` attribute on the `TableExpandedRow` should be
- `headers.length + 1` in order to span the whole table
- - `TableExpandedRow` should not have a `TableCell` child
-
-#### Programmatic expansion
-
-You can use the `expandRow` action made available through your `render` prop
-function to toggle the expansion state of a given row. This method takes in the
-row id as a single argument.
-
-### Selection
-
-Selection in a `DataTable` has two parts:
-
-- `TableSelectAll`: component used in the header of the table to select all rows
-- `TableSelectRow`: component used to render the selection checkbox in a
- `TableRow`
-
-In practice, it looks like the following in a `DataTable`:
-
-```jsx
- (
-
-
-
-
-
- {header.header}
-
- ))}
-
-
-
- {rows.map(row => (
-
- {cell.value}
- ))}
-
- ))}
-
-
-
-```
-
-Some items to note:
-
-- `TableSelectAll` is placed before all other headers. It also uses
- `getSelectionProps` to wire up all the necessary actions
-- `TableSelectRow` is placed before all the cells in a row. It also uses
- `getSelectionProps`, but it also passes in the specific `row` in order to get
- selection information about the given row.
-
-You can access all the selected rows through the `selectedRows` property passed
-into your `render` prop function.
-
-#### Programmatic selection
-
-You can use either of the following actions from your `render` prop function to
-update the selection status of a row:
-
-- `selectAll`: invoking this will toggle the selection of all rows, either by
- making all selected or de-selecting all rows
-- `selectRow`: invoking this will toggle the selection of a specific row. Takes
- in a valid row id as an argument
-
-### Filtering
-
-Filtering in a `DataTable` is provided through usage of the `TableToolbar` and
-the `TableToolbarSearch` component. Any input entered through
-`TableToolbarSearch` will be used when the `filterRows` prop is applied. By
-default `filterRows` is provided through our default implementation. However,
-you can provide your own method if needed.
-
-In practice, this looks like the following:
-
-```jsx
- (
-
-
- {/* pass in `onInputChange` change here to make filtering work */}
-
-
- Add new
-
-
-
-
-
-
- {headers.map(header => (
-
- {header.header}
-
- ))}
-
-
-
- {rows.map(row => (
-
- {row.cells.map(cell => (
- {cell.value}
- ))}
-
- ))}
-
-
-
- )}
-/>
-```
-
-All you need to do to make sure filtering is hooked up is provide the
-`onInputChange` handler as the `onChange` prop to `TableToolbarSearch` in your
-`TableToolbar` component.
-
-### Batch Actions
-
-Batch actions are typically used when you want to the user to select multiple
-rows in your table and then allow them to perform a single action on the
-selected rows. To orchestrate this behavior, you'll need to include both the
-Table components for selection and for batch actions, which include:
-
-- `TableToolbar`
-- `TableToolbarAction`
-- `TableBatchActions`
-- `TableBatchAction`
-- `TableSelectAll`
-- `TableSelectRow`
-
-In practice, this looks like the following:
-
-```jsx
- (
-
-
- {/* make sure to apply getBatchActionProps so that the bar renders */}
-
- {/* inside of you batch actinos, you can include selectedRows */}
-
- Ghost
-
-
- Ghost
-
-
- Ghost
-
-
-
-
- Add new
-
-
-
-
-
-
-
- {header.header}
-
- ))}
-
-
-
- {rows.map(row => (
-
- {cell.value}
- ))}
-
- ))}
-
-
-
- )}
-/>
-```
-
-The import aspects of this example are:
-
-- That we are including the relevant markup for the Table Toolbar
-- We are wiring up the Batch Actions component with `getBatchActionProps`. This
- handles toggling the batch action menu for you
-- We are reading the `selectedItems` from the `render` prop function in our
- Batch Action click handlers
-
-## Attribution
-
-This `README.md` file is adapted from the
-[Downshift `README.md`](https://github.com/paypal/downshift/blob/master/README.md)
-file.
diff --git a/packages/styles/src/carbon-stories/DataTable/stories/default.js b/packages/styles/src/carbon-stories/DataTable/stories/default.js
deleted file mode 100644
index ad7c93d905a..00000000000
--- a/packages/styles/src/carbon-stories/DataTable/stories/default.js
+++ /dev/null
@@ -1,62 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2018
- *
- * 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 React from 'react';
-
-import {
- DataTable,
- Table,
- TableBody,
- TableCell,
- TableContainer,
- TableHead,
- TableHeader,
- TableRow,
-} from 'carbon-components-react';
-import { initialRows, headers } from './shared';
-
-export default props => (
- (
-
-
-
-
- {headers.map(header => (
-
- {header.header}
-
- ))}
-
-
-
- {rows.map(row => (
-
- {row.cells.map(cell => (
- {cell.value}
- ))}
-
- ))}
-
-
-
- )}
- />
-);
diff --git a/packages/styles/src/carbon-stories/DataTable/stories/shared.js b/packages/styles/src/carbon-stories/DataTable/stories/shared.js
deleted file mode 100644
index 7babd043695..00000000000
--- a/packages/styles/src/carbon-stories/DataTable/stories/shared.js
+++ /dev/null
@@ -1,95 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2018
- *
- * 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 { action } from '@storybook/addon-actions';
-
-export const initialRows = [
- {
- id: 'a',
- name: 'Load Balancer 3',
- protocol: 'HTTP',
- port: 3000,
- rule: 'Round robin',
- attached_groups: 'Kevins VM Groups',
- status: 'Disabled',
- },
- {
- id: 'b',
- name: 'Load Balancer 1',
- protocol: 'HTTP',
- port: 443,
- rule: 'Round robin',
- attached_groups: 'Maureens VM Groups',
- status: 'Starting',
- },
- {
- id: 'c',
- name: 'Load Balancer 2',
- protocol: 'HTTP',
- port: 80,
- rule: 'DNS delegation',
- attached_groups: 'Andrews VM Groups',
- status: 'Active',
- },
- {
- id: 'd',
- name: 'Load Balancer 6',
- protocol: 'HTTP',
- port: 3000,
- rule: 'Round robin',
- attached_groups: 'Marcs VM Groups',
- status: 'Disabled',
- },
- {
- id: 'e',
- name: 'Load Balancer 4',
- protocol: 'HTTP',
- port: 443,
- rule: 'Round robin',
- attached_groups: 'Mels VM Groups',
- status: 'Starting',
- },
- {
- id: 'f',
- name: 'Load Balancer 5',
- protocol: 'HTTP',
- port: 80,
- rule: 'DNS delegation',
- attached_groups: 'Ronjas VM Groups',
- status: 'Active',
- },
-];
-
-export const headers = [
- {
- key: 'name',
- header: 'Name',
- },
- {
- key: 'protocol',
- header: 'Protocol',
- },
- {
- key: 'port',
- header: 'Port',
- },
- {
- key: 'rule',
- header: 'Rule',
- },
- {
- key: 'attached_groups',
- header: 'Attached Groups',
- },
- {
- key: 'status',
- header: 'Status',
- },
-];
-
-export const batchActionClick = selectedRows => () =>
- action('batch action click')(selectedRows);
diff --git a/packages/styles/src/carbon-stories/DataTable/stories/with-batch-actions.js b/packages/styles/src/carbon-stories/DataTable/stories/with-batch-actions.js
deleted file mode 100644
index 1f1125bb8a6..00000000000
--- a/packages/styles/src/carbon-stories/DataTable/stories/with-batch-actions.js
+++ /dev/null
@@ -1,120 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2018
- *
- * 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 React from 'react';
-import { action } from '@storybook/addon-actions';
-import {
- Delete16 as Delete,
- Save16 as Save,
- Download16 as Download,
-} from '@carbon/icons-react';
-import {
- DataTable,
- Table,
- TableBatchAction,
- TableBatchActions,
- TableBody,
- TableCell,
- TableContainer,
- TableHead,
- TableHeader,
- TableRow,
- TableSelectAll,
- TableSelectRow,
- TableToolbar,
- TableToolbarAction,
- TableToolbarContent,
- TableToolbarSearch,
- TableToolbarMenu,
- Button,
-} from 'carbon-components-react';
-
-import { batchActionClick, initialRows, headers } from './shared';
-
-export default props => (
- (
-
-
-
-
- Delete
-
-
- Save
-
-
- Download
-
-
-
-
- alert('Alert 1')}>
- Action 1
-
- alert('Alert 2')}>
- Action 2
-
- alert('Alert 3')}>
- Action 3
-
-
-
- Add new
-
-
-
-
-
-
-
- {header.header}
-
- ))}
-
-
-
- {rows.map(row => (
-
- {cell.value}
- ))}
-
- ))}
-
-
-
- )}
- />
-);
diff --git a/packages/styles/src/carbon-stories/DataTable/stories/with-batch-expansion.js b/packages/styles/src/carbon-stories/DataTable/stories/with-batch-expansion.js
deleted file mode 100644
index 17923468386..00000000000
--- a/packages/styles/src/carbon-stories/DataTable/stories/with-batch-expansion.js
+++ /dev/null
@@ -1,75 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2018
- *
- * 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 React from 'react';
-import {
- DataTable,
- Table,
- TableBody,
- TableCell,
- TableContainer,
- TableExpandHeader,
- TableExpandRow,
- TableExpandedRow,
- TableHead,
- TableHeader,
- TableRow,
-} from 'carbon-components-react';
-import { initialRows, headers } from './shared';
-
-export default props => (
- (
-
-
-
-
-
- {header.header}
-
- ))}
-
-
-
- {rows.map(row => (
-
-
- {row.cells.map(cell => (
- {cell.value}
- ))}
-
-
- Expandable row content
- Description here
-
-
- ))}
-
-
-
- )}
- />
-);
diff --git a/packages/styles/src/carbon-stories/DataTable/stories/with-boolean-column.js b/packages/styles/src/carbon-stories/DataTable/stories/with-boolean-column.js
deleted file mode 100644
index 7817eff31c4..00000000000
--- a/packages/styles/src/carbon-stories/DataTable/stories/with-boolean-column.js
+++ /dev/null
@@ -1,141 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2018
- *
- * 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 React from 'react';
-import {
- Checkbox,
- DataTable,
- Table,
- TableBody,
- TableCell,
- TableContainer,
- TableHead,
- TableHeader,
- TableRow,
-} from 'carbon-components-react';
-// import { initialRows, headers } from './shared';
-
-const initialRows = [
- {
- id: 'a',
- name: 'Load Balancer 3',
- protocol: 'HTTP',
- port: 3000,
- rule: 'Round robin',
- attached_groups: 'Kevins VM Groups',
- status: 'Disabled',
- enabled: true,
- },
- {
- id: 'b',
- name: 'Load Balancer 1',
- protocol: 'HTTP',
- port: 443,
- rule: 'Round robin',
- attached_groups: 'Maureens VM Groups',
- status: 'Starting',
- enabled: true,
- },
- {
- id: 'c',
- name: 'Load Balancer 2',
- protocol: 'HTTP',
- port: 80,
- rule: 'DNS delegation',
- attached_groups: 'Andrews VM Groups',
- status: 'Active',
- enabled: false,
- },
-];
-
-export const headers = [
- {
- key: 'name',
- header: 'Name',
- },
- {
- key: 'protocol',
- header: 'Protocol',
- },
- {
- key: 'port',
- header: 'Port',
- },
- {
- key: 'rule',
- header: 'Rule',
- },
- {
- key: 'attached_groups',
- header: 'Attached Groups',
- },
- {
- key: 'status',
- header: 'Status',
- },
- {
- key: 'enabled',
- header: 'Enabled',
- },
-];
-
-export default props => (
- (
-
-
-
-
- {headers.map(header => (
-
- {header.header}
-
- ))}
-
-
-
- {rows.map(row => (
-
- {row.cells.map(cell => {
- if (cell.info.header === 'enabled') {
- return (
-
-
- );
- } else {
- return {cell.value} ;
- }
- })}
-
- ))}
-
-
-
- )}
- />
-);
diff --git a/packages/styles/src/carbon-stories/DataTable/stories/with-dynamic-content.js b/packages/styles/src/carbon-stories/DataTable/stories/with-dynamic-content.js
deleted file mode 100644
index 7c15a284b04..00000000000
--- a/packages/styles/src/carbon-stories/DataTable/stories/with-dynamic-content.js
+++ /dev/null
@@ -1,193 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2018
- *
- * 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 React from 'react';
-import {
- Delete16 as Delete,
- Save16 as Save,
- Download16 as Download,
-} from '@carbon/icons-react';
-
-import {
- DataTable,
- Table,
- TableBatchAction,
- TableBatchActions,
- TableBody,
- TableCell,
- TableContainer,
- TableExpandHeader,
- TableExpandRow,
- TableExpandedRow,
- TableHead,
- TableHeader,
- TableRow,
- TableSelectAll,
- TableSelectRow,
- TableToolbar,
- TableToolbarAction,
- TableToolbarContent,
- TableToolbarSearch,
- TableToolbarMenu,
-} from 'carbon-components-react';
-import { batchActionClick, initialRows, headers } from './shared';
-
-export default props => {
- const insertInRandomPosition = (array, element) => {
- const index = Math.floor(Math.random() * (array.length + 1));
- return [...array.slice(0, index), element, ...array.slice(index)];
- };
-
- class DynamicRows extends React.Component {
- state = {
- rows: initialRows,
- headers: headers,
- id: 0,
- };
-
- handleOnHeaderAdd = () => {
- const length = this.state.headers.length;
- const header = {
- key: `header_${length}`,
- header: `Header ${length}`,
- };
-
- this.setState(state => {
- const rows = state.rows.map(row => {
- return {
- ...row,
- [header.key]: header.header,
- };
- });
- return {
- rows,
- headers: state.headers.concat(header),
- };
- });
- };
-
- handleOnRowAdd = () => {
- this.setState(state => {
- const { id: _id, rows } = state;
- const id = _id + 1;
- const row = {
- id: '' + id,
- name: `New Row ${id}`,
- protocol: 'HTTP',
- port: id * 100,
- rule: id % 2 === 0 ? 'Round robin' : 'DNS delegation',
- attached_groups: `Row ${id}'s VM Groups`,
- status: 'Starting',
- };
-
- state.headers
- .filter(header => row[header.key] === undefined)
- .forEach(header => {
- row[header.key] = header.header;
- });
-
- return {
- id,
- rows: insertInRandomPosition(rows, row),
- };
- });
- };
-
- render() {
- return (
- (
-
-
-
-
- Delete
-
-
- Save
-
-
- Download
-
-
-
-
-
- Add row
-
-
- Add header
-
-
-
-
-
-
-
-
- {header.header}
-
- ))}
-
-
-
- {rows.map(row => (
-
-
- {cell.value}
- ))}
-
-
- Expandable row content
- Description here
-
-
- ))}
-
-
-
- )}
- />
- );
- }
- }
- return (
-
-
-
-
-
- {header.header}
-
- ))}
-
-
-
- {rows.map(row => (
-
-
- {row.cells.map(cell => (
- {cell.value}
- ))}
-
-
- Expandable row content
- Description here
-
-
- ))}
-
-
-
- )}
- />
-);
diff --git a/packages/styles/src/carbon-stories/DataTable/stories/with-options.js b/packages/styles/src/carbon-stories/DataTable/stories/with-options.js
deleted file mode 100644
index 1243778a68c..00000000000
--- a/packages/styles/src/carbon-stories/DataTable/stories/with-options.js
+++ /dev/null
@@ -1,80 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2018
- *
- * 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 React from 'react';
-
-import {
- DataTable,
- Table,
- TableBody,
- TableCell,
- TableContainer,
- TableExpandedRow,
- TableExpandHeader,
- TableExpandRow,
- TableHead,
- TableHeader,
- TableRow,
- TableSelectAll,
- TableSelectRow,
-} from 'carbon-components-react';
-import { headers, initialRows } from './shared';
-
-export default props => (
- (
-
-
-
-
-
- {header.header}
-
- ))}
-
-
-
- {rows.map(row => (
-
-
- {cell.value}
- ))}
-
-
- Expandable row content
- Description here
-
-
- ))}
-
-
-
- )}
- />
-);
diff --git a/packages/styles/src/carbon-stories/DataTable/stories/with-overflow-menu.js b/packages/styles/src/carbon-stories/DataTable/stories/with-overflow-menu.js
deleted file mode 100644
index d64b0b91f2f..00000000000
--- a/packages/styles/src/carbon-stories/DataTable/stories/with-overflow-menu.js
+++ /dev/null
@@ -1,71 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2018
- *
- * 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 React from 'react';
-import {
- DataTable,
- OverflowMenuItem,
- OverflowMenu,
- Table,
- TableBody,
- TableCell,
- TableContainer,
- TableHead,
- TableHeader,
- TableRow,
- TableSelectAll,
- TableSelectRow,
-} from 'carbon-components-react';
-import { initialRows, headers } from './shared';
-
-export default props => (
- (
-
-
-
-
-
- {header.header}
-
- ))}
-
-
-
- {rows.map(row => (
-
- {cell.value}
- ))}
-
-
- Action 1
- Action 2
- Action 3
-
-
-
- ))}
-
-
-
- )}
- />
-);
diff --git a/packages/styles/src/carbon-stories/DataTable/stories/with-selection--radio.js b/packages/styles/src/carbon-stories/DataTable/stories/with-selection--radio.js
deleted file mode 100644
index 9c3c513cc0c..00000000000
--- a/packages/styles/src/carbon-stories/DataTable/stories/with-selection--radio.js
+++ /dev/null
@@ -1,66 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2018
- *
- * 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 React from 'react';
-import {
- DataTable,
- Table,
- TableBody,
- TableCell,
- TableContainer,
- TableHead,
- TableHeader,
- TableRow,
- TableSelectRow,
-} from 'carbon-components-react';
-import { initialRows, headers } from './shared';
-
-export default props => (
- (
-
-
-
-
-
- {header.header}
-
- ))}
-
-
-
- {rows.map(row => (
-
- {cell.value}
- ))}
-
- ))}
-
-
-
- )}
- />
-);
diff --git a/packages/styles/src/carbon-stories/DataTable/stories/with-selection.js b/packages/styles/src/carbon-stories/DataTable/stories/with-selection.js
deleted file mode 100644
index c7ff8cf5f71..00000000000
--- a/packages/styles/src/carbon-stories/DataTable/stories/with-selection.js
+++ /dev/null
@@ -1,66 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2018
- *
- * 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 React from 'react';
-import {
- DataTable,
- Table,
- TableBody,
- TableCell,
- TableContainer,
- TableHead,
- TableHeader,
- TableRow,
- TableSelectAll,
- TableSelectRow,
-} from 'carbon-components-react';
-import { initialRows, headers } from './shared';
-
-export default props => (
- (
-
-
-
-
-
- {header.header}
-
- ))}
-
-
-
- {rows.map(row => (
-
- {cell.value}
- ))}
-
- ))}
-
-
-
- )}
- />
-);
diff --git a/packages/styles/src/carbon-stories/DataTable/stories/with-sorting.js b/packages/styles/src/carbon-stories/DataTable/stories/with-sorting.js
deleted file mode 100644
index f0ba66eba27..00000000000
--- a/packages/styles/src/carbon-stories/DataTable/stories/with-sorting.js
+++ /dev/null
@@ -1,62 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2018
- *
- * 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 React from 'react';
-import {
- DataTable,
- Table,
- TableBody,
- TableCell,
- TableContainer,
- TableHead,
- TableHeader,
- TableRow,
-} from 'carbon-components-react';
-import { initialRows, headers } from './shared';
-
-export default props => (
- (
-
-
-
-
- {headers.map(header => (
-
- {header.header}
-
- ))}
-
-
-
- {rows.map(row => (
-
- {row.cells.map(cell => (
- {cell.value}
- ))}
-
- ))}
-
-
-
- )}
- />
-);
diff --git a/packages/styles/src/carbon-stories/DataTable/stories/with-toolbar.js b/packages/styles/src/carbon-stories/DataTable/stories/with-toolbar.js
deleted file mode 100644
index f0cee2dfaa9..00000000000
--- a/packages/styles/src/carbon-stories/DataTable/stories/with-toolbar.js
+++ /dev/null
@@ -1,89 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2018
- *
- * 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 React from 'react';
-import { action } from '@storybook/addon-actions';
-import {
- Button,
- DataTable,
- Table,
- TableBody,
- TableCell,
- TableContainer,
- TableHead,
- TableHeader,
- TableRow,
- TableToolbar,
- TableToolbarAction,
- TableToolbarContent,
- TableToolbarSearch,
- TableToolbarMenu,
-} from 'carbon-components-react';
-
-import { initialRows, headers } from './shared';
-
-export default props => (
- (
-
-
-
-
-
- Action 1
-
-
- Action 2
-
-
- Action 3
-
-
- Primary Button
-
-
-
-
-
- {headers.map(header => (
-
- {header.header}
-
- ))}
-
-
-
- {rows.map(row => (
-
- {row.cells.map(cell => (
- {cell.value}
- ))}
-
- ))}
-
-
-
- )}
- />
-);
diff --git a/packages/styles/src/carbon-stories/DataTableSkeleton/DataTableSkeleton-story.js b/packages/styles/src/carbon-stories/DataTableSkeleton/DataTableSkeleton-story.js
deleted file mode 100644
index 3ec87d9fcfa..00000000000
--- a/packages/styles/src/carbon-stories/DataTableSkeleton/DataTableSkeleton-story.js
+++ /dev/null
@@ -1,49 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2020
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-/* eslint-disable no-console */
-
-import React from 'react';
-
-import { withKnobs, boolean, array } from '@storybook/addon-knobs';
-import { DataTableSkeleton } from 'carbon-components-react';
-
-const props = () => ({
- headers: array(
- 'Optional table headers (headers)',
- ['Name', 'Protocol', 'Port', 'Rule', 'Attached Groups'],
- ','
- ),
- zebra: boolean('Use zebra stripe (zebra)', false),
- compact: boolean('Compact variant (compact)', false),
-});
-
-export default {
- title: 'DataTableSkeleton',
- decorators: [withKnobs],
-};
-
-export const Default = () => (
-
-
-);
-
-Default.story = {
- name: 'default',
-
- parameters: {
- info: {
- text: `
- Skeleton states are used as a progressive loading state while the user waits for content to load.
-
- This example shows a skeleton state for a data table.
- `,
- },
- },
-};
diff --git a/packages/styles/src/carbon-stories/DatePicker/DatePicker-story.js b/packages/styles/src/carbon-stories/DatePicker/DatePicker-story.js
deleted file mode 100644
index c8b633fb8d8..00000000000
--- a/packages/styles/src/carbon-stories/DatePicker/DatePicker-story.js
+++ /dev/null
@@ -1,187 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2020
- *
- * 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 React from 'react';
-import { action, decorateAction } from '@storybook/addon-actions';
-
-import { withKnobs, boolean, select, text } from '@storybook/addon-knobs';
-import { DatePicker, DatePickerInput, DatePickerSkeleton } from 'carbon-components-react';
-import WithState from '../../carbon-tools/withState';
-
-// Datepickers last argument contains an instance of flatpickr
-// and will cause action logger to enter an infinite loop. Just don't log that argument
-const datePickerOnChangeActions = decorateAction([args => args.slice(0, args.length - 2)]);
-
-const patterns = {
- 'Short (d{1,2}/d{4})': 'd{1,2}/d{4}',
- 'Regular (d{1,2}/d{1,2}/d{4})': 'd{1,2}/d{1,2}/d{4}',
-};
-
-const props = {
- datePicker: () => ({
- id: 'date-picker',
- light: boolean('Light variant (light in )', false),
- onChange: datePickerOnChangeActions('onPickerChange'),
- onClose: action('onClose'),
- }),
- datePickerInput: () => ({
- id: 'date-picker-input-id',
- className: 'some-class',
- labelText: text('Label text (labelText in )', 'Date Picker label'),
- pattern: select('The date format (pattern in )', patterns, 'd{1,2}/d{4}'),
- placeholder: text('Placeholder text (placeholder in )', 'mm/dd/yyyy'),
- disabled: boolean('Disabled (disabled in )', false),
- invalid: boolean('Show form validation UI (invalid in )', false),
- invalidText: text(
- 'Form validation UI content (invalidText in )',
- 'A valid value is required'
- ),
- iconDescription: text(
- 'Icon description (iconDescription in )',
- 'Icon description'
- ),
- onClick: action('onClick'),
- onChange: action('onInputChange'),
- }),
-};
-
-export default {
- title: 'DatePicker',
- decorators: [withKnobs],
-};
-
-export const Simple = () => (
- )', false)}
- datePickerType="simple"
- >
-
-);
-
-Simple.story = {
- name: 'simple',
-
- parameters: {
- info: {
- text: 'A simple Date Picker consists of an input field and no calendar.',
- },
- },
-};
-
-export const SingleWithCalendar = () => (
- )', 'm/d/Y')}
- >
-
-);
-
-SingleWithCalendar.story = {
- name: 'single with calendar',
-
- parameters: {
- info: {
- text: `
- A single Date Picker consists of an input field and a calendar.
- `,
- },
- },
-};
-
-export const RangeWithCalendar = () => {
- const datePickerInputProps = props.datePickerInput();
- return (
- )', 'm/d/Y')}
- >
-
- );
-};
-
-RangeWithCalendar.story = {
- name: 'range with calendar',
-
- parameters: {
- info: {
- text: `
- A range Date Picker consists of two input fields and a calendar.
- `,
- },
- },
-};
-
-export const RangeWithCalendarAndMinMaxDates = () => {
- const datePickerInputProps = props.datePickerInput();
- return (
-
-
- );
-};
-
-RangeWithCalendarAndMinMaxDates.story = {
- name: 'range with calendar and min/max dates',
-
- parameters: {
- info: {
- text: `
- A range Date Picker consists of two input fields and a calendar, and optionally, the minDate and maxDate fields.
- `,
- },
- },
-};
-
-export const FullyControlled = () => (
-
- {({ state, setState }) => (
- <>
- {
- const value = eventOrDates.target ? eventOrDates.target.value : eventOrDates[0];
- setState({ date: value });
- }}
- >
-
- setState({ date: '01/01/2011' })}>
- Click me to set to 01/01/2011
-
-
- )}
-
-);
-
-FullyControlled.story = {
- name: 'fully controlled',
-
- parameters: {
- info: {
- text: `
- If your application needs to control the value of the date picker and
- be notified of any changes.
- `,
- },
- },
-};
diff --git a/packages/styles/src/carbon-stories/Dropdown/Dropdown-story.js b/packages/styles/src/carbon-stories/Dropdown/Dropdown-story.js
deleted file mode 100644
index fdb2be13686..00000000000
--- a/packages/styles/src/carbon-stories/Dropdown/Dropdown-story.js
+++ /dev/null
@@ -1,160 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2020
- *
- * 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 React from 'react';
-import { action } from '@storybook/addon-actions';
-import { withKnobs, boolean, select, text } from '@storybook/addon-knobs';
-import { Dropdown, DropdownSkeleton } from 'carbon-components-react';
-import WithState from '../../carbon-tools/withState';
-
-const items = [
- {
- id: 'option-1',
- text: 'Option 1',
- },
- {
- id: 'option-2',
- text: 'Option 2',
- },
- {
- id: 'option-3',
- text: 'Option 3',
- },
- {
- id: 'option-4',
- text: 'Option 4',
- },
-];
-
-const stringItems = ['Option 1', 'Option 2', 'Option 3'];
-
-const types = {
- 'Default (default)': 'default',
- 'Inline (inline)': 'inline',
-};
-
-const sizes = {
- 'Extra large size (xl)': 'xl',
- 'Regular size (lg)': '',
- 'Small size (sm)': 'sm',
-};
-
-const props = () => ({
- id: text('Dropdown ID (id)', 'carbon-dropdown-example'),
- type: select('Dropdown type (type)', types, 'default'),
- label: text('Label (label)', 'Dropdown menu options'),
- size: select('Field size (size)', sizes, '') || undefined,
- ariaLabel: text('Aria Label (ariaLabel)', 'Dropdown'),
- disabled: boolean('Disabled (disabled)', false),
- light: boolean('Light variant (light)', false),
- titleText: text('Title (titleText)', 'This is not a dropdown title.'),
- helperText: text('Helper text (helperText)', 'This is not some helper text.'),
- invalid: boolean('Show form validation UI (invalid)', false),
- invalidText: text('Form validation UI content (invalidText)', 'A valid value is required'),
-});
-
-const itemToElement = item => {
- const itemAsArray = item.text.split(' ');
- return (
-
- {itemAsArray[0]}
- {itemAsArray[1]}
-
- );
-};
-
-export default {
- title: 'Dropdown',
- decorators: [withKnobs],
-};
-
-export const Default = () => (
-
- (item ? item.text : '')}
- onChange={action('onChange')}
- />
-
-);
-
-Default.story = {
- name: 'default',
-
- parameters: {
- info: {
- text: 'Dropdown',
- },
- },
-};
-
-export const ItemsAsStrings = () => (
-
-
-);
-
-ItemsAsStrings.story = {
- name: 'items as strings',
-
- parameters: {
- info: {
- text: 'Rendering an array of strings as `items`',
- },
- },
-};
-
-export const ItemsAsComponents = () => (
-
- (item ? item.text : '')}
- itemToElement={itemToElement}
- onChange={action('onChange')}
- />
-
-);
-
-ItemsAsComponents.story = {
- name: 'items as components',
-
- parameters: {
- info: {
- text: `Rendering items as custom components`,
- },
- },
-};
-
-export const FullyControlled = () => (
-
- {({ state, setState }) => (
-
- (item ? item.text : '')}
- onChange={({ selectedItem }) => setTimeout(() => setState({ selectedItem }), 1000)}
- selectedItem={state.selectedItem}
- />
-
- )}
-
-);
-
-FullyControlled.story = {
- name: 'fully controlled',
-
- parameters: {
- info: {
- text: `
- Sometimes you want to control everything.
- `,
- },
- },
-};
diff --git a/packages/styles/src/carbon-stories/FileUploader/FileUploader-story.js b/packages/styles/src/carbon-stories/FileUploader/FileUploader-story.js
deleted file mode 100644
index 973cb6742ee..00000000000
--- a/packages/styles/src/carbon-stories/FileUploader/FileUploader-story.js
+++ /dev/null
@@ -1,189 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2020
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-/* eslint-disable no-console */
-
-import React from 'react';
-import { action } from '@storybook/addon-actions';
-import { withKnobs, array, boolean, number, select, text } from '@storybook/addon-knobs';
-import { settings } from 'carbon-components';
-import {
- FileUploader,
- FileUploaderButton,
- FileUploaderSkeleton,
- Button,
- FileUploaderItem,
- FileUploaderDropContainer,
-} from 'carbon-components-react';
-
-const { prefix } = settings;
-const buttonKinds = {
- 'Primary (primary)': 'primary',
- 'Secondary (secondary)': 'secondary',
- 'Danger (danger)': 'danger',
- 'Ghost (ghost)': 'ghost',
- 'Danger Primary (danger--primary)': 'danger--primary',
- 'Tertiary (tertiary)': 'tertiary',
-};
-
-const filenameStatuses = {
- 'Edit (edit)': 'edit',
- 'Complete (complete)': 'complete',
- 'Uploading (uploading)': 'uploading',
-};
-
-const props = {
- fileUploaderButton: () => {
- const buttonKind = select('Button kind (buttonKind)', buttonKinds, '');
- return {
- className: 'bob',
- labelText: text('Label text (labelText)', 'Add files'),
- name: text('Form item name: (name)', ''),
- multiple: boolean('Supports multiple files (multiple)', true),
- disabled: boolean('Disabled (disabled)', false),
- buttonKind: buttonKind || 'primary',
- disableLabelChanges: boolean(
- 'Prevent the label from being replaced with file selected file (disableLabelChanges)',
- false
- ),
- role: text('ARIA role of the button (role)', 'button'),
- tabIndex: number('Tab index (tabIndex)', 0),
- onChange: action('onChange'),
- };
- },
- fileUploader: () => ({
- labelTitle: text('The label title (labelTitle)', 'Upload'),
- labelDescription: text(
- 'The label description (labelDescription)',
- 'only .jpg files at 500mb or less'
- ),
- buttonLabel: text('The button label (buttonLabel)', 'Add files'),
- filenameStatus: select('Status for file name (filenameStatus)', filenameStatuses, 'edit'),
- accept: array('Accepted file extensions (accept)', ['.jpg', '.png'], ','),
- name: text('Form item name: (name)', ''),
- multiple: boolean('Supports multiple files (multiple)', true),
- iconDescription: text('Close button icon description (iconDescription)', 'Clear file'),
- }),
- fileUploaderItem: () => ({
- name: text('Filename (name)', 'README.md'),
- status: select('Status for file name (status)', filenameStatuses, 'edit'),
- iconDescription: text('Close button icon description (iconDescription)', 'Clear file'),
- onDelete: action('onDelete'),
- invalid: boolean('Invalid (invalid)', false),
- errorSubject: text('Error subject (errorSubject)', 'File size exceeds limit'),
- errorBody: text(
- 'Error body (errorBody)',
- '500kb max file size. Select a new file and try again.'
- ),
- }),
- fileUploaderDropContainer: () => ({
- labelText: text('Label text (labelText)', 'Drag and drop files here or click to upload'),
- name: text('Form item name (name)', ''),
- multiple: boolean('Supports multiple files (multiple)', true),
- accept: array(
- 'Accepted MIME types or file extensions (accept)',
- ['image/jpeg', 'image/png'],
- ','
- ),
- disabled: boolean('Disabled (disabled)', false),
- role: text('ARIA role of the button (role)', ''),
- tabIndex: number('Tab index (tabIndex)', 0),
- onChange: action('onChange'),
- }),
-};
-
-export default {
- title: 'FileUploader',
- decorators: [withKnobs],
-};
-
-export const _FileUploaderButton = () =>
- (fileUploader = node)} />
- {
- fileUploader.clearFiles();
- }}
- >
- Clear File
-
-
- );
-};
-
-_FileUploader.story = {
- name: 'FileUploader',
-
- parameters: {
- info: {
- text: `
- The FileUploader components allow the user to upload any necessary files. This uses the FileUploaderButton and Filename components. Filename components will appear below the FileUploaderButton when files are added. Use the filenameStatus prop to control what icon appears in Filename ('edit', 'complete', or 'uploading').
- `,
- },
- },
-};
-
-export const _FileUploaderItem = () =>
- Account photo
-
- Only .jpg and .png files. 500kb max file size
-
-
- {files.map(
- ({ uuid, name, size, status, iconDescription, invalid, ...rest }) => (
-
-
- );
-}
-
-export default props => (legendText)', 'Checkbox heading'),
- message: boolean('Show form requirement (message)', false),
- messageText: text('Form requirement text (messageText)', ''),
- invalid: boolean('Mark as invalid (invalid)', false),
-});
-
-const numberInputProps = {
- className: 'some-class',
- id: 'number-input-1',
- label: 'Number Input',
- min: 0,
- max: 100,
- value: 50,
- step: 10,
-};
-
-const toggleProps = {
- className: 'some-class',
-};
-
-const fieldsetToggleProps = {
- className: 'some-class',
- legendText: 'Toggle heading',
-};
-
-const fileUploaderEvents = {
- buttonLabel: 'Add files',
- className: 'some-class',
-};
-
-const fieldsetFileUploaderProps = {
- className: 'some-class',
- legendText: 'File Uploader',
-};
-
-const radioProps = {
- className: 'some-class',
-};
-
-const fieldsetRadioProps = {
- className: 'some-class',
- legendText: 'Radio Button heading',
-};
-
-const searchProps = {
- className: 'some-class',
-};
-
-const fieldsetSearchProps = {
- className: 'some-class',
- legendText: 'Search',
-};
-
-const selectProps = {
- className: 'some-class',
-};
-
-const TextInputProps = {
- className: 'some-class',
- id: 'test2',
- labelText: 'Text Input label',
- placeholder: 'Placeholder text',
-};
-
-const PasswordProps = {
- className: 'some-class',
- id: 'test3',
- labelText: 'Password',
-};
-
-const InvalidPasswordProps = {
- className: 'some-class',
- id: 'test4',
- labelText: 'Password',
- invalid: true,
- invalidText:
- 'Your password must be at least 6 characters as well as contain at least one uppercase, one lowercase, and one number.',
-};
-
-const textareaProps = {
- labelText: 'Text Area label',
- className: 'some-class',
- placeholder: 'Placeholder text',
- id: 'test5',
- cols: 50,
- rows: 4,
-};
-
-const buttonEvents = {
- className: 'some-class',
-};
-
-RadioButton.displayName = 'RadioButton';
-
-export default {
- title: 'Form',
- decorators: [withKnobs],
-};
-
-export const Default = () => (
-
-);
-
-Default.story = {
- parameters: {
- info: {
- text: `
- Forms are widely used to collect user input.
-
- Form can have any number of react components enclosed within FormGroup component. FormGroup component
- is a wrapper for legend and fieldset component.
-
- `,
- },
- },
-};
diff --git a/packages/styles/src/carbon-stories/Form/form-story.scss b/packages/styles/src/carbon-stories/Form/form-story.scss
deleted file mode 100644
index e11c4c66203..00000000000
--- a/packages/styles/src/carbon-stories/Form/form-story.scss
+++ /dev/null
@@ -1,41 +0,0 @@
-//
-// Copyright IBM Corp. 2020, 2021
-//
-// 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 'carbon-components/scss/globals/scss/vars';
-
-.dds-story--form-group--button,
-.dds-story--form-group--toggle-small {
- .bx--form-item {
- align-items: flex-end;
- }
-}
-
-.dds-story--form-group--number-input,
-.dds-story--form-group--select {
- .#{$prefix}--form-item {
- align-items: stretch;
- }
-}
-
-.dds-story--form-group--select {
- .#{$prefix}--select {
- align-items: stretch;
- }
-
- .#{$prefix}--select-input__wrapper {
- justify-content: stretch;
- }
-
- .#{$prefix}--select-input {
- flex: 1;
- max-width: none;
- }
-}
-
-.dds-story--form-group--toggle-small legend {
- text-align: right;
-}
diff --git a/packages/styles/src/carbon-stories/FormItem/FormItem-story.js b/packages/styles/src/carbon-stories/FormItem/FormItem-story.js
deleted file mode 100644
index 88e9187024f..00000000000
--- a/packages/styles/src/carbon-stories/FormItem/FormItem-story.js
+++ /dev/null
@@ -1,27 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2020
- *
- * 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 React from 'react';
-import { FormItem, NumberInput } from 'carbon-components-react';
-
-export default {
- title: 'FormItem',
-};
-
-export const Default = () => (
-
-
-);
-
-Default.story = {
- parameters: {
- info: {
- text: 'Form item.',
- },
- },
-};
diff --git a/packages/styles/src/carbon-stories/FormLabel/FormLabel-story.js b/packages/styles/src/carbon-stories/FormLabel/FormLabel-story.js
deleted file mode 100644
index b4d36354f63..00000000000
--- a/packages/styles/src/carbon-stories/FormLabel/FormLabel-story.js
+++ /dev/null
@@ -1,44 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2020
- *
- * 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 React from 'react';
-
-import { FormLabel, Tooltip } from 'carbon-components-react';
-
-const additionalProps = {
- className: 'some-class',
-};
-
-export default {
- title: 'FormLabel',
-};
-
-export const Default = () => Label ;
-
-Default.story = {
- parameters: {
- info: {
- text: 'Form label.',
- },
- },
-};
-
-export const WithTooltip = () => (
-
- This is the content of the tooltip.
-
-);
-
-WithTooltip.story = {
- name: 'With tooltip',
-
- parameters: {
- info: {
- text: 'Form label with tooltip.',
- },
- },
-};
diff --git a/packages/styles/src/carbon-stories/Icon/Icon-story.js b/packages/styles/src/carbon-stories/Icon/Icon-story.js
deleted file mode 100644
index 8b2ce2c10b3..00000000000
--- a/packages/styles/src/carbon-stories/Icon/Icon-story.js
+++ /dev/null
@@ -1,80 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2020
- *
- * 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 React from 'react';
-import { iconAdd, iconAddSolid, iconAddOutline } from 'carbon-icons';
-import { withKnobs, select, text } from '@storybook/addon-knobs';
-import { Icon, IconSkeleton } from 'carbon-components-react';
-
-const icons = {
- 'Add (iconAdd from `carbon-icons`)': 'iconAdd',
- 'Add with filled circle (iconAddSolid from `carbon-icons`)': 'iconAddSolid',
- 'Add with circle (iconAddOutline from `carbon-icons`)': 'iconAddOutline',
-};
-
-const iconMap = {
- iconAdd,
- iconAddSolid,
- iconAddOutline,
-};
-
-const props = () => {
- const selectedIcon = select('The icon (icon (regular)/name (legacy))', icons, 'iconAdd');
- return {
- style: {
- margin: '50px',
- },
- icon: iconMap[selectedIcon],
- name: iconMap[selectedIcon] ? undefined : selectedIcon,
- role: text('ARIA role (role)', 'img'),
- fill: text('The SVG `fill` attribute (fill)', 'grey'),
- fillRule: text('The SVG `fillRule` attribute (fillRule)', ''),
- width: text('The SVG `width` attribute (width)', ''),
- height: text('The SVG `height` attribute (height)', ''),
- description: text(
- 'The a11y text (description)',
- 'This is a description of the icon and what it does in context'
- ),
- iconTitle: text('The content in in SVG (iconTitle)', ''),
- className: 'extra-class',
- };
-};
-
-const propsSkeleton = {
- style: {
- margin: '50px',
- },
-};
-
-const propsSkeleton2 = {
- style: {
- margin: '50px',
- width: '24px',
- height: '24px',
- },
-};
-
-export default {
- title: 'Icon',
- decorators: [withKnobs],
-};
-
-export const Default = () => (
- <div>
- <Icon {...props()} />
- </div>
-);
-
-Default.story = {
- parameters: {
- info: {
- text: `
- Icons are used in the product to present common actions and commands. Modify the fill property to change the color of the icon. The name property defines which icon to display. For accessibility, provide a context-rich description with the description prop. For a full list of icon names, see https://www.carbondesignsystem.com/guidelines/iconography/library
- `,
- },
- },
-};
diff --git a/packages/styles/src/carbon-stories/InlineLoading/InlineLoading-story.js b/packages/styles/src/carbon-stories/InlineLoading/InlineLoading-story.js
deleted file mode 100644
index fee69208358..00000000000
--- a/packages/styles/src/carbon-stories/InlineLoading/InlineLoading-story.js
+++ /dev/null
@@ -1,115 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2020
- *
- * 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 React, { useState } from 'react';
-import { action } from '@storybook/addon-actions';
-import { withKnobs, number, select, text } from '@storybook/addon-knobs';
-import { Button, InlineLoading } from 'carbon-components-react';
-
-const props = () => ({
- status: select('Loading status (status)', ['inactive', 'active', 'finished', 'error'], 'active'),
- iconDescription: text('Icon description (iconDescription)', 'Active loading indicator'),
- description: text('Loading progress description (description)', 'Loading data...'),
- successDelay: number(
- 'The duration for successful state before `onSuccess` fires (successDelay)',
- 1500
- ),
- onSuccess: action('onSuccess'),
-});
-
-export default {
- title: 'InlineLoading',
- decorators: [withKnobs],
-};
-
-export const _InlineLoading = () => <InlineLoading {...props()} />;
-
-_InlineLoading.story = {
- name: 'Inline loading',
-
- parameters: {
- info: {
- text: `
- Inline Loading spinners are used when creating, updating, or deleting an item.
- They help notify users that their change is underway, with different states for 'loading' and 'success'.
- `,
- },
- },
-};
-
-export const UxExample = () => {
- function MockSubmission({ children }) {
- const [isSubmitting, setIsSubmitting] = useState(false);
- const [success, setSuccess] = useState(false);
- const [description, setDescription] = useState('Submitting...');
- const [ariaLive, setAriaLive] = useState('off');
- const handleSubmit = () => {
- setIsSubmitting(true);
- setAriaLive('assertive');
-
- // Instead of making a real request, we mock it with a timer
- setTimeout(() => {
- setIsSubmitting(false);
- setSuccess(true);
- setDescription('Submitted!');
-
- // To make submittable again, we reset the state after a bit so the user gets completion feedback
- setTimeout(() => {
- setSuccess(false);
- setDescription('Submitting...');
- setAriaLive('off');
- }, 1500);
- }, 2000);
- };
-
- return children({
- handleSubmit,
- isSubmitting,
- success,
- description,
- ariaLive,
- });
- }
-
- MockSubmission.displayName = 'InlineLoading';
-
- return (
- <MockSubmission>
- {({ handleSubmit, isSubmitting, success, description, ariaLive }) => (
- <div style={{ display: 'flex', width: '300px' }}>
- <Button kind="secondary" disabled={isSubmitting || success}>
- Cancel
- </Button>
- {isSubmitting || success ? (
- <InlineLoading
- style={{ marginLeft: '1rem' }}
- description={description}
- status={success ? 'finished' : 'active'}
- aria-live={ariaLive}
- />
- ) : (
- <Button onClick={handleSubmit}>Submit</Button>
- )}
- </div>
- )}
- </MockSubmission>
- );
-};
-
-UxExample.story = {
- name: 'UX example',
-
- parameters: {
- info: {
- text: `
- This is a full example of how to levarage the <InlineLoading /> component to create a nice user experience when submitting a form.
-
- For the full source code of this example, check out the 'story' panel below.
- `,
- },
- },
-};
diff --git a/packages/styles/src/carbon-stories/Link/Link-story.js b/packages/styles/src/carbon-stories/Link/Link-story.js
deleted file mode 100644
index 51ca555cff0..00000000000
--- a/packages/styles/src/carbon-stories/Link/Link-story.js
+++ /dev/null
@@ -1,42 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2020
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-/* eslint-disable no-console */
-
-import React from 'react';
-import { action } from '@storybook/addon-actions';
-import { withKnobs, text, boolean } from '@storybook/addon-knobs';
-import { Link } from 'carbon-components-react';
-
-const props = () => ({
- className: 'some-class',
- href: text('The link href (href)', '#'),
- inline: boolean('Use the in-line variant (inline)', false),
- onClick: (handler => evt => {
- evt.preventDefault(); // Prevent link from being followed for demo purpose
- handler(evt);
- })(action('onClick')),
- disabled: boolean('Disabled', false),
-});
-
-export default {
- title: 'Link',
- decorators: [withKnobs],
-};
-
-export const Default = () => <Link {...props()}>Link</Link>;
-
-Default.story = {
- parameters: {
- info: {
- text: `
- Links are typically used as a means of navigation either within the application, to a place outside, or to a resource.
- For anything else, especially things that change data, you should be using a button.
- `,
- },
- },
-};
diff --git a/packages/styles/src/carbon-stories/Loading/Loading-story.js b/packages/styles/src/carbon-stories/Loading/Loading-story.js
deleted file mode 100644
index a42e8ec492a..00000000000
--- a/packages/styles/src/carbon-stories/Loading/Loading-story.js
+++ /dev/null
@@ -1,38 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2020
- *
- * 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 React from 'react';
-import { withKnobs, boolean, text } from '@storybook/addon-knobs';
-import { Loading } from 'carbon-components-react';
-
-const props = () => ({
- active: boolean('Active (active)', true),
- withOverlay: boolean('With overlay (withOverlay)', false),
- small: boolean('Small (small)', false),
- description: text('Description (description)', 'Active loading indicator'),
-});
-
-export default {
- title: 'Loading',
- decorators: [withKnobs],
-};
-
-export const Default = () => {
- return <Loading {...props()} className={'some-class'} />;
-};
-
-Default.story = {
- parameters: {
- info: {
- text: `
- Loading spinners are used when retrieving data or performing slow computations,
- and help to notify users that loading is underway. The 'active' property is true by default;
- set to false to end the animation.
- `,
- },
- },
-};
diff --git a/packages/styles/src/carbon-stories/Modal/Modal-story.js b/packages/styles/src/carbon-stories/Modal/Modal-story.js
deleted file mode 100644
index 7b95f7ad7f5..00000000000
--- a/packages/styles/src/carbon-stories/Modal/Modal-story.js
+++ /dev/null
@@ -1,203 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2020
- *
- * 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 React from 'react';
-import { action } from '@storybook/addon-actions';
-
-import { withKnobs, boolean, select, text } from '@storybook/addon-knobs';
-import { Modal, TextInput } from 'carbon-components-react';
-import { settings } from 'carbon-components';
-
-const { prefix } = settings;
-
-const sizes = {
- Default: '',
- 'Extra small (xs)': 'xs',
- 'Small (sm)': 'sm',
- 'Large (lg)': 'lg',
-};
-
-const props = () => ({
- className: 'some-class',
- open: boolean('Open (open)', true),
- passiveModal: boolean('Without footer (passiveModal)', false),
- danger: boolean('Danger mode (danger)', false),
- shouldSubmitOnEnter: boolean('Enter key to submit (shouldSubmitOnEnter)', false),
- focusTrap: boolean('Trap focus (focusTrap)', false),
- hasScrollingContent: boolean('Modal contains scrollable content (hasScrollingContent)', true),
- modalHeading: text('Modal heading (modalHeading)', 'Modal heading'),
- modalLabel: text('Optional label (modalLabel)', 'Label'),
- modalAriaLabel: text(
- 'ARIA label, used only if modalLabel not provided (modalAriaLabel)',
- 'A label to be read by screen readers on the modal root node'
- ),
- primaryButtonText: text('Primary button text (primaryButtonText)', 'Primary Button'),
- secondaryButtonText: text('Secondary button text (secondaryButtonText)', 'Secondary Button'),
- selectorPrimaryFocus: text(
- 'Primary focus element selector (selectorPrimaryFocus)',
- '[data-modal-primary-focus]'
- ),
- size: select('Size (size)', sizes),
- iconDescription: text('Close icon description (iconDescription)', 'Close the modal'),
- onBlur: action('onBlur'),
- onClick: action('onClick'),
- onFocus: action('onFocus'),
- onRequestClose: action('onRequestClose'),
- onRequestSubmit: action('onRequestSubmit'),
- onSecondarySubmit: action('onSecondarySubmit'),
-});
-
-const titleOnlyProps = () => {
- const passiveModal = boolean('Without footer (passiveModal)', false);
- return {
- className: 'some-class',
- open: boolean('Open (open)', true),
- passiveModal,
- danger: !passiveModal && boolean('Danger mode (danger)', false),
- modalHeading: text(
- 'Modal heading (modalHeading)',
- `
- Passive modal title as the message. Should be direct and 3 lines or less.
- `.trim()
- ),
- modalAriaLabel: text(
- 'ARIA label, used only if modalLabel not provided (modalAriaLabel)',
- 'A label to be read by screen readers on the modal root node'
- ),
- primaryButtonText: text('Primary button text (primaryButtonText)', 'Primary Button'),
- secondaryButtonText: text('Secondary button text (secondaryButtonText)', 'Secondary Button'),
- size: select('Size (size)', sizes, 'sm'),
- iconDescription: text('Close icon description (iconDescription)', 'Close the modal'),
- onBlur: action('onBlur'),
- onClick: action('onClick'),
- onFocus: action('onFocus'),
- onRequestClose: action('onRequestClose'),
- };
-};
-
-export default {
- title: 'Modal',
- decorators: [withKnobs],
-};
-
-export const _Default = () => {
- const { size, ...rest } = props();
- return (
- <Modal {...rest} size={size || undefined}>
- <p className={`${prefix}--modal-content__text`}>
- Please see ModalWrapper for more examples and demo of the functionality.
- </p>
- {rest.hasScrollingContent && (
- <>
- <p>
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id accumsan augue.
- Phasellus consequat augue vitae tellus tincidunt posuere. Curabitur justo urna,
- consectetur vel elit iaculis, ultrices condimentum risus. Nulla facilisi. Etiam
- venenatis molestie tellus. Quisque consectetur non risus eu rutrum.{' '}
- </p>
- <p>
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id accumsan augue.
- Phasellus consequat augue vitae tellus tincidunt posuere. Curabitur justo urna,
- consectetur vel elit iaculis, ultrices condimentum risus. Nulla facilisi. Etiam
- venenatis molestie tellus. Quisque consectetur non risus eu rutrum.{' '}
- </p>
- <p>
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id accumsan augue.
- Phasellus consequat augue vitae tellus tincidunt posuere. Curabitur justo urna,
- consectetur vel elit iaculis, ultrices condimentum risus. Nulla facilisi. Etiam
- venenatis molestie tellus. Quisque consectetur non risus eu rutrum.{' '}
- </p>
- <h3>Lorem ipsum</h3>
- <p>
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id accumsan augue.
- Phasellus consequat augue vitae tellus tincidunt posuere. Curabitur justo urna,
- consectetur vel elit iaculis, ultrices condimentum risus. Nulla facilisi. Etiam
- venenatis molestie tellus. Quisque consectetur non risus eu rutrum.{' '}
- </p>
- <p>
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id accumsan augue.
- Phasellus consequat augue vitae tellus tincidunt posuere. Curabitur justo urna,
- consectetur vel elit iaculis, ultrices condimentum risus. Nulla facilisi. Etiam
- venenatis molestie tellus. Quisque consectetur non risus eu rutrum.{' '}
- </p>
- <p>
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id accumsan augue.
- Phasellus consequat augue vitae tellus tincidunt posuere. Curabitur justo urna,
- consectetur vel elit iaculis, ultrices condimentum risus. Nulla facilisi. Etiam
- venenatis molestie tellus. Quisque consectetur non risus eu rutrum.{' '}
- </p>
- <p>
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id accumsan augue.
- Phasellus consequat augue vitae tellus tincidunt posuere. Curabitur justo urna,
- consectetur vel elit iaculis, ultrices condimentum risus. Nulla facilisi. Etiam
- venenatis molestie tellus. Quisque consectetur non risus eu rutrum.{' '}
- </p>
- </>
- )}
- </Modal>
- );
-};
-
-_Default.story = {
- parameters: {
- info: {
- text: `
- Modals communicate information via a secondary window and allow the user to maintain the context of a particular task.
- Use the Modal Wrapper component to encapsulate your Modal within a button.
- `,
- },
- },
-};
-
-export const TitleOnly = () => {
- const { size, ...rest } = titleOnlyProps();
- return (
- <>
- <Modal {...rest} size={size || undefined}></Modal>
- </>
- );
-};
-
-TitleOnly.story = {
- name: 'Title only',
-
- parameters: {
- info: {
- text: `
- In "small" and "xs" modals size, the title is allowed to span multiple lines and be used for the main message.
- It should be less than 3 lines of text. If more room is required then use the standard body copy format.
- `,
- },
- },
-};
-
-export const TrapFocus = () => {
- const { size, ...rest } = props();
- return (
- <>
- <Modal {...rest} hasForm size={size || undefined} selectorPrimaryFocus="#text-input-2">
- <TextInput
- id="text-input-1"
- labelText="Text Input 1"
- placeholder="Enter text..."
- style={{ marginBottom: '1rem' }}
- />
- <TextInput id="text-input-2" labelText="Text Input 2" placeholder="Enter text..." />
- </Modal>
- </>
- );
-};
-
-TrapFocus.story = {
- parameters: {
- info: {
- text: `
- Specify a selector for the primary element to focus when opening a modal.
- `,
- },
- },
-};
diff --git a/packages/styles/src/carbon-stories/ModalWrapper/ModalWrapper-story.js b/packages/styles/src/carbon-stories/ModalWrapper/ModalWrapper-story.js
deleted file mode 100644
index d2f4df7cc8d..00000000000
--- a/packages/styles/src/carbon-stories/ModalWrapper/ModalWrapper-story.js
+++ /dev/null
@@ -1,223 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2020
- *
- * 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 React from 'react';
-import { iconAddSolid, iconSearch } from 'carbon-icons';
-import { AddFilled16, Search16 } from '@carbon/icons-react';
-import { action } from '@storybook/addon-actions';
-
-import { withKnobs, boolean, text, select } from '@storybook/addon-knobs';
-import { settings } from 'carbon-components';
-import {
- ModalWrapper,
- TextInput,
- Select,
- SelectItem,
- RadioButtonGroup,
- RadioButton,
-} from 'carbon-components-react';
-
-const { prefix } = settings;
-
-const icons = {
- None: 'None',
- 'Add with filled circle (AddFilled16 from `@carbon/icons`)': 'AddFilled16',
- 'Search (Search16 from `@carbon/icons`)': 'Search16',
-};
-
-const iconMap = {
- iconAddSolid,
- iconSearch,
- AddFilled16: props => <AddFilled16 className={`${prefix}--btn__icon`} {...props} />,
- Search16: props => <Search16 className={`${prefix}--btn__icon`} {...props} />,
-};
-
-const props = () => {
- const iconToUse = iconMap[select('Icon (icon)', icons, 'none')];
- return {
- className: 'some-class',
- disabled: boolean('Disable the launcher button (disabled)', false),
- passiveModal: boolean('Without footer (passiveModal)', false),
- danger: boolean('Danger mode (danger)', false),
- buttonTriggerText: text('The text in the trigger button (buttonTriggerText)', 'Launch Modal'),
- hasScrollingContent: boolean('Modal contains scrollable content (hasScrollingContent)', true),
- renderTriggerButtonIcon: typeof iconToUse === 'function' && iconToUse,
- triggerButtonIcon: typeof iconToUse !== 'function' && iconToUse,
- modalLabel: text('The modal label (optional) (modalLabel)', 'Label'),
- modalHeading: text('The modal heading (modalHeading)', 'Modal'),
- selectorPrimaryFocus: text(
- 'Primary focus element selector (selectorPrimaryFocus)',
- '[data-modal-primary-focus]'
- ),
- primaryButtonText: text('The text in the primary button (primaryButtonText)', 'Save'),
- secondaryButtonText: text('The text in the secondary button (secondaryButtonText)', 'Cancel'),
- shouldCloseAfterSubmit: boolean('Close after submit (shouldCloseAfterSubmit)', true),
- focusTrap: boolean('Trap focus (focusTrap)', false),
- onBlur: action('onBlur'),
- onClick: action('onClick'),
- onFocus: action('onFocus'),
- onMouseDown: action('onMouseDown'),
- onMouseEnter: action('onMouseEnter'),
- onMouseLeave: action('onMouseLeave'),
- onMouseUp: action('onMouseUp'),
- };
-};
-
-export default {
- title: 'ModalWrapper',
- decorators: [withKnobs],
-};
-
-export const TransactionalPassiveModal = () => (
- <ModalWrapper
- id="transactional-passive-modal"
- handleSubmit={() => {
- action('onSubmit')();
- return true;
- }}
- {...props()}
- >
- <p className={`${prefix}--modal-content__text`}>
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse cursus fermentum risus,
- sit amet fringilla nunc pellentesque quis. Duis quis odio ultrices, cursus lacus ac, posuere
- felis. Donec dignissim libero in augue mattis, a molestie metus vestibulum. Aliquam placerat
- felis ultrices lorem condimentum, nec ullamcorper felis porttitor. Nunc at maximus purus.
- Curabitur sodales eros sit amet dolor bibendum gravida. Sed efficitur, arcu imperdiet
- vestibulum ultrices, risus diam ullamcorper arcu, sit amet gravida metus ligula quis metus.
- </p>
- <p className={`${prefix}--modal-content__text`}>
- Donec id sapien ex. Duis aliquam tortor nec mollis pulvinar. Fusce sit amet libero blandit,
- sollicitudin est in, tempor lectus. Donec convallis condimentum mi eu ultrices. Sed risus
- ipsum, fermentum ut fringilla sed, rutrum eget purus. Morbi molestie dui nisi, consectetur
- posuere ante viverra non. Integer cursus quis risus ut cursus. Aenean ut dictum nibh. Cras at
- leo interdum, ornare elit non, posuere enim. Mauris hendrerit nunc eget malesuada congue. Nam
- velit leo, convallis et lobortis ac, semper ut urna. Etiam nec neque urna. Donec sagittis eros
- urna, at aliquet erat consectetur ac. Proin faucibus sed erat tempus accumsan. Nam pretium
- malesuada commodo. Mauris mollis elementum neque, sed ornare urna vestibulum non. Curabitur
- elementum in ex in commodo. Donec laoreet consequat sapien. Sed eget tortor aliquam, facilisis
- est vitae, commodo magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris a
- lobortis ex. Nulla mollis tincidunt sodales.
- </p>
- {props().hasScrollingContent && (
- <>
- <p>
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id accumsan augue.
- Phasellus consequat augue vitae tellus tincidunt posuere. Curabitur justo urna,
- consectetur vel elit iaculis, ultrices condimentum risus. Nulla facilisi. Etiam venenatis
- molestie tellus. Quisque consectetur non risus eu rutrum.{' '}
- </p>
- <p>
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id accumsan augue.
- Phasellus consequat augue vitae tellus tincidunt posuere. Curabitur justo urna,
- consectetur vel elit iaculis, ultrices condimentum risus. Nulla facilisi. Etiam venenatis
- molestie tellus. Quisque consectetur non risus eu rutrum.{' '}
- </p>
- <p>
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id accumsan augue.
- Phasellus consequat augue vitae tellus tincidunt posuere. Curabitur justo urna,
- consectetur vel elit iaculis, ultrices condimentum risus. Nulla facilisi. Etiam venenatis
- molestie tellus. Quisque consectetur non risus eu rutrum.{' '}
- </p>
- <h3>Lorem ipsum</h3>
- <p>
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id accumsan augue.
- Phasellus consequat augue vitae tellus tincidunt posuere. Curabitur justo urna,
- consectetur vel elit iaculis, ultrices condimentum risus. Nulla facilisi. Etiam venenatis
- molestie tellus. Quisque consectetur non risus eu rutrum.{' '}
- </p>
- <p>
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id accumsan augue.
- Phasellus consequat augue vitae tellus tincidunt posuere. Curabitur justo urna,
- consectetur vel elit iaculis, ultrices condimentum risus. Nulla facilisi. Etiam venenatis
- molestie tellus. Quisque consectetur non risus eu rutrum.{' '}
- </p>
- <p>
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id accumsan augue.
- Phasellus consequat augue vitae tellus tincidunt posuere. Curabitur justo urna,
- consectetur vel elit iaculis, ultrices condimentum risus. Nulla facilisi. Etiam venenatis
- molestie tellus. Quisque consectetur non risus eu rutrum.{' '}
- </p>
- <p>
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id accumsan augue.
- Phasellus consequat augue vitae tellus tincidunt posuere. Curabitur justo urna,
- consectetur vel elit iaculis, ultrices condimentum risus. Nulla facilisi. Etiam venenatis
- molestie tellus. Quisque consectetur non risus eu rutrum.{' '}
- </p>
- </>
- )}
- </ModalWrapper>
-);
-
-TransactionalPassiveModal.story = {
- name: 'transactional/passive modal',
-
- parameters: {
- info: {
- text: `
- Transactional modals are used to validate user decisions or to gain secondary confirmation from the user.
- Passive modal notifications should only appear if there is an action the user needs to address immediately.
- Passive modal notifications are persistent on screen.
- `,
- },
- },
-};
-
-export const InputModal = () => (
- <ModalWrapper
- id="input-modal"
- handleSubmit={() => {
- action('onSubmit')();
- return true;
- }}
- {...props()}
- >
- <TextInput id="test2" placeholder="Hint text here" labelText="Text Input:" />
- <br />
- <Select id="select-1" labelText="Select">
- <SelectItem disabled hidden value="placeholder-item" text="Pick an option" />
- <SelectItem value="option-1" text="Option 1" />
- <SelectItem value="option-2" text="Option 2" />
- <SelectItem value="option-3" text="Option 3" />
- </Select>
- <br />
- <RadioButtonGroup name="radio-button-group" defaultSelected="default-selected">
- <RadioButton
- value="default-selected"
- id="radio-1"
- labelText="Radio Button label 1"
- className="some-class"
- />
- <RadioButton
- value="standard"
- labelText="Radio Button label 2"
- id="radio-2"
- className="some-class"
- />
- <RadioButton
- value="disabled"
- labelText="Radio Button label 3"
- id="radio-3"
- className="some-class"
- disabled
- />
- </RadioButtonGroup>
- </ModalWrapper>
-);
-
-InputModal.story = {
- name: 'input modal',
-
- parameters: {
- info: {
- text: `
- Input modals are used to follow up with previous user input. These modals should include areas
- for input that the user can interact with, such as forms, dropdowns, selectors, and links. The example
- below shows a Modal Wrapper component with various input components.
- `,
- },
- },
-};
diff --git a/packages/styles/src/carbon-stories/MultiSelect/MultiSelect-story.js b/packages/styles/src/carbon-stories/MultiSelect/MultiSelect-story.js
deleted file mode 100644
index 953994b4f02..00000000000
--- a/packages/styles/src/carbon-stories/MultiSelect/MultiSelect-story.js
+++ /dev/null
@@ -1,150 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2022
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-import React from 'react';
-import { action } from '@storybook/addon-actions';
-import { withKnobs, boolean, select, text, object } from '@storybook/addon-knobs';
-// import { withReadme } from 'storybook-readme';
-import readme from './README.md';
-import { MultiSelect } from 'carbon-components-react';
-
-const items = [
- {
- id: 'downshift-1-item-0',
- text: 'Option 1',
- },
- {
- id: 'downshift-1-item-1',
- text: 'Option 2',
- },
- {
- id: 'downshift-1-item-2',
- text: 'Option 3',
- },
- {
- id: 'downshift-1-item-3',
- text: 'Option 4',
- },
- {
- id: 'downshift-1-item-4',
- text: 'An example option that is really long to show what should be done to handle long text',
- },
-];
-
-const defaultLabel = 'MultiSelect Label';
-const defaultPlaceholder = 'Filter';
-
-const types = {
- 'Default (default)': 'default',
- 'Inline (inline)': 'inline',
-};
-
-const props = () => ({
- id: text('MultiSelect ID (id)', 'carbon-multiselect-example'),
- titleText: text('Title (titleText)', 'Multiselect title'),
- helperText: text('Helper text (helperText)', 'This is not helper text'),
- filterable: boolean('Filterable (`<MultiSelect.Filterable>` instead of `<MultiSelect>`)', false),
- disabled: boolean('Disabled (disabled)', false),
- light: boolean('Light variant (light)', false),
- useTitleInItem: boolean('Show tooltip on hover', false),
- type: select('UI type (Only for `<MultiSelect>`) (type)', types, 'default'),
- label: text('Label (label)', defaultLabel),
- invalid: boolean('Show form validation UI (invalid)', false),
- invalidText: text('Form validation UI content (invalidText)', 'Invalid Selection'),
- onChange: action('onChange'),
- listBoxMenuIconTranslationIds: object(
- 'Listbox menu icon translation IDs (for translateWithId callback)',
- {
- 'close.menu': 'Close menu',
- 'open.menu': 'Open menu',
- 'clear.all': 'Clear all',
- 'clear.selection': 'Clear selection',
- }
- ),
- selectionFeedback: select(
- 'Selection feedback',
- ['top', 'fixed', 'top-after-reopen'],
- 'top-after-reopen'
- ),
-});
-
-export default {
- title: 'MultiSelect',
- decorators: [withKnobs],
-};
-
-export const Default = withReadme(readme, () => {
- const {
- filterable,
- listBoxMenuIconTranslationIds,
- selectionFeedback,
- ...multiSelectProps
- } = props();
- const ComponentToUse = !filterable ? MultiSelect : MultiSelect.Filterable;
- const placeholder = !filterable ? undefined : defaultPlaceholder;
- return (
- <div style={{ width: 300 }}>
- <ComponentToUse
- {...multiSelectProps}
- items={items}
- itemToString={item => (item ? item.text : '')}
- placeholder={placeholder}
- translateWithId={id => listBoxMenuIconTranslationIds[id]}
- selectionFeedback={selectionFeedback}
- />
- </div>
- );
-});
-
-Default.story = {
- name: 'default',
-
- parameters: {
- info: {
- text: `
- MultiSelect
- `,
- },
- },
-};
-
-export const WithInitialSelectedItems = withReadme(readme, () => {
- const {
- filterable,
- listBoxMenuIconTranslationIds,
- selectionFeedback,
- ...multiSelectProps
- } = props();
- const ComponentToUse = !filterable ? MultiSelect : MultiSelect.Filterable;
- const placeholder = !filterable ? undefined : defaultPlaceholder;
-
- return (
- <div style={{ width: 300 }}>
- <ComponentToUse
- {...multiSelectProps}
- items={items}
- itemToString={item => (item ? item.text : '')}
- initialSelectedItems={[items[0], items[1]]}
- placeholder={placeholder}
- translateWithId={id => listBoxMenuIconTranslationIds[id]}
- selectionFeedback={selectionFeedback}
- />
- </div>
- );
-});
-
-WithInitialSelectedItems.story = {
- name: 'with initial selected items',
-
- parameters: {
- info: {
- text: `
- Provide a set of items to initially select in the control
- `,
- },
- },
-};
diff --git a/packages/styles/src/carbon-stories/MultiSelect/README.md b/packages/styles/src/carbon-stories/MultiSelect/README.md
deleted file mode 100644
index 9ffd30eb517..00000000000
--- a/packages/styles/src/carbon-stories/MultiSelect/README.md
+++ /dev/null
@@ -1,105 +0,0 @@
-# `MultiSelect`
-
-> A Dropdown Menu from which you can select given items by clicking on a
-> checkbox. Given the right options/properties items can be already selected
-> initially.
-
-## Table of Contents
-
-- [Installation](#installation)
-- [Usage](#usage)
-
-## Installation
-
-This component comes with any installation of the `carbon-components-react`
-package on npm. You can install this package by running the following command in
-your terminal with [npm](https://www.npmjs.com/):
-
-```bash
-npm i carbon-components carbon-components-react carbon-icons --save
-```
-
-If you prefer [Yarn](https://yarnpkg.com/en/), use the following command
-instead:
-
-```bash
-yarn add carbon-components-react carbon-components carbon-icons
-```
-
-## Usage
-
-You can use `MultiSelect` by doing the following in your project:
-
-```js
-import { MultiSelect } from 'carbon-components-react';
-```
-
-You can then create the `MultiSelect` by the following:
-
-```jsx
-<MultiSelect
- useTitleInItem={false}
- label="MultiSelect Label"
- invalid={false}
- invalidText="Invalid Selection"
- onChange={onChange}
- items={[{ id: 'item-1', text: 'Item 1' }, { id: 'item-2', text: 'Item 2' }]}
- itemToString={itemToString}
- initialSelectedItems={[
- { id: 'item-1', text: 'Item 1' },
- { id: 'item-2', text: 'Item 2' },
- ]}
- translateWithId={translateWithId}
-/>
-```
-
-## Use-cases
-
-If the variable array provided to the `items` attribute lacks a `label`
-property, the component will not render. Using the label prop to render items
-would look like the following:
-
-```jsx
-<MultiSelect
- useTitleInItem={false}
- label="MultiSelect Label"
- invalid={false}
- invalidText="Invalid Selection"
- onChange={onChange}
- items={[
- { id: 'item-1', text: 'Item 1', label: 'Item 1' },
- { id: 'item-2', text: 'Item 2', label: 'Item 2' },
- ]}
- itemToString={itemToString}
- initialSelectedItems={[
- { id: 'item-1', text: 'Item 1' },
- { id: 'item-2', text: 'Item 2' },
- ]}
- translateWithId={translateWithId}
-/>
-```
-
-However, you can have items in your array without a `label` field, as long as
-you provide the `itemToString` method that properly maps them.
-
-What does the helper function itemToString do?<br/> The helper function
-`itemToString` allows you to render a given item to a string label. By default,
-it extracts the `label` field from a given item to serve as the item label in
-the list. For instance you can use:
-
-```jsx
-<MultiSelect
- useTitleInItem={false}
- label="MultiSelect Label"
- invalid={false}
- invalidText="Invalid Selection"
- onChange={onChange}
- items={[{ id: 'item-1', text: 'Item 1' }, { id: 'item-2', text: 'Item 2' }]}
- initialSelectedItems={[
- { id: 'item-1', text: 'Item 1' },
- { id: 'item-2', text: 'Item 2' },
- ]}
- translateWithId={translateWithId}
- itemToString={item => (item ? item.text : '')}
-/>
-```
diff --git a/packages/styles/src/carbon-stories/Notification/Notification-story.js b/packages/styles/src/carbon-stories/Notification/Notification-story.js
deleted file mode 100644
index 653d7650f47..00000000000
--- a/packages/styles/src/carbon-stories/Notification/Notification-story.js
+++ /dev/null
@@ -1,64 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2020
- *
- * 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 React from 'react';
-import { action } from '@storybook/addon-actions';
-import { withKnobs, boolean, select, text } from '@storybook/addon-knobs';
-import {
- ToastNotification,
- InlineNotification,
- NotificationActionButton,
-} from 'carbon-components-react';
-
-const kinds = {
- 'Error (error)': 'error',
- 'Info (info)': 'info',
- 'Success (success)': 'success',
- 'Warning (warning)': 'warning',
-};
-const notificationProps = () => ({
- kind: select('The notification kind (kind)', kinds, 'info'),
- lowContrast: boolean('Use low contrast variant (lowContrast)', false),
- role: text('ARIA role (role)', 'alert'),
- title: text('Title (title)', 'Notification title'),
- subtitle: (
- <span>
- Subtitle text goes here. <a href="#example">Example link</a>
- </span>
- ),
- iconDescription: text('Icon description (iconDescription)', 'describes the close button'),
- hideCloseButton: boolean('Hide close button (hideCloseButton)', false),
- onCloseButtonClick: action('onCloseButtonClick'),
-});
-
-export default {
- title: 'Notifications',
- decorators: [withKnobs],
-};
-
-export const Toast = () => (
- <ToastNotification
- {...notificationProps()}
- caption={text('Caption (caption)', 'Time stamp [00:00:00]')}
- style={{ minWidth: '30rem', marginBottom: '.5rem' }}
- />
-);
-
-export const Inline = () => (
- <InlineNotification
- {...notificationProps()}
- actions={
- <NotificationActionButton onClick={action('NotificationActionButton onClick')}>
- {text('Action (NotificationActionButton > children)', 'Action')}
- </NotificationActionButton>
- }
- />
-);
-
-Inline.story = {
- name: 'inline',
-};
diff --git a/packages/styles/src/carbon-stories/NumberInput/NumberInput-story.js b/packages/styles/src/carbon-stories/NumberInput/NumberInput-story.js
deleted file mode 100644
index 6f17d06a247..00000000000
--- a/packages/styles/src/carbon-stories/NumberInput/NumberInput-story.js
+++ /dev/null
@@ -1,63 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2020
- *
- * 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 React from 'react';
-import { action } from '@storybook/addon-actions';
-
-import { withKnobs, boolean, number, text, object } from '@storybook/addon-knobs';
-import { NumberInput, NumberInputSkeleton } from 'carbon-components-react';
-
-const props = () => ({
- className: 'some-class',
- id: 'tj-input',
- label: text('Label (label)', 'Number Input label'),
- hideLabel: boolean('No label (hideLabel)', false),
- min: number('Minimum value (min)', 0),
- max: number('Maximum value (max)', 100),
- value: number('Value (value)', 50),
- step: number('Step of up/down arrow (step)', 10),
- disabled: boolean('Disabled (disabled)', false),
- readOnly: boolean('Read only (readOnly)', false),
- invalid: boolean('Show form validation UI (invalid)', false),
- isMobile: boolean('Mobile variant', false),
- invalidText: text('Form validation UI content (invalidText)', 'Number is not valid'),
- helperText: text('Helper text (helperText)', 'Optional helper text.'),
- light: boolean('Light variant (light)', false),
- onChange: action('onChange'),
- onClick: action('onClick'),
- allowEmpty: boolean('Allow empty value (allowEmpty)', false),
- numberInputArrowTranslationIds: object(
- 'Number input arrow icon translation IDs (for translateWithId callback)',
- {
- 'increment.number': 'Increment number',
- 'decrement.number': 'Decrement number',
- }
- ),
-});
-
-NumberInput.displayName = 'NumberInput';
-
-export default {
- title: 'NumberInput',
- decorators: [withKnobs],
-};
-
-export const Default = () => {
- const { numberInputArrowTranslationIds, ...rest } = props();
- return <NumberInput translateWithId={id => numberInputArrowTranslationIds[id]} {...rest} />;
-};
-
-Default.story = {
- parameters: {
- info: {
- text: `
- Number inputs are similar to text fields, but contain controls used to increase or decrease an incremental value.
- The Number Input component can be passed a starting value, a min, a max, and the step.
- `,
- },
- },
-};
diff --git a/packages/styles/src/carbon-stories/OrderedList/OrderedList-story.js b/packages/styles/src/carbon-stories/OrderedList/OrderedList-story.js
deleted file mode 100644
index a8c5b19add5..00000000000
--- a/packages/styles/src/carbon-stories/OrderedList/OrderedList-story.js
+++ /dev/null
@@ -1,76 +0,0 @@
-/**
- * Copyright IBM Corp. 2020, 2021
- *
- * 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 React from 'react';
-import { OrderedList, ListItem } from 'carbon-components-react';
-
-export default {
- title: 'OrderedList',
-};
-
-export const Default = () => (
- <OrderedList>
- <ListItem>Ordered List level 1</ListItem>
- <ListItem>Ordered List level 1</ListItem>
- <ListItem>Ordered List level 1</ListItem>
- <ListItem>Ordered List level 1</ListItem>
- <ListItem>Ordered List level 1</ListItem>
- <ListItem>Ordered List level 1</ListItem>
- <ListItem>Ordered List level 1</ListItem>
- <ListItem>Ordered List level 1</ListItem>
- <ListItem>Ordered List level 1</ListItem>
- <ListItem>Ordered List level 1</ListItem>
- <ListItem>Ordered List level 1</ListItem>
- <ListItem>Ordered List level 1</ListItem>
- <ListItem>Ordered List level 1</ListItem>
- <ListItem>Ordered List level 1</ListItem>
- <ListItem>Ordered List level 1</ListItem>
- <ListItem>Ordered List level 1</ListItem>
- <ListItem>Ordered List level 1</ListItem>
- <ListItem>Ordered List level 1</ListItem>
- </OrderedList>
-);
-
-Default.story = {
- name: 'default',
-
- parameters: {
- info: {
- text: `Lists consist of related content grouped together and organized vertically. Ordered lists are used to present content in a numbered list.`,
- },
- },
-};
-
-export const Nested = () => (
- <OrderedList>
- <ListItem>
- Ordered List level 1
- <OrderedList nested>
- <ListItem>Ordered List level 2</ListItem>
- <ListItem>
- Ordered List level 2
- <OrderedList nested>
- <ListItem>Ordered List level 2</ListItem>
- <ListItem>Ordered List level 2</ListItem>
- </OrderedList>
- </ListItem>
- </OrderedList>
- </ListItem>
- <ListItem>Ordered List level 1</ListItem>
- <ListItem>Ordered List level 1</ListItem>
- </OrderedList>
-);
-
-Nested.story = {
- name: 'nested',
-
- parameters: {
- info: {
- text: `Lists consist of related content grouped together and organized vertically. Ordered lists are used to present content in a numbered list.`,
- },
- },
-};
diff --git a/packages/styles/src/carbon-stories/OverflowMenu/OverflowMenu-story.js b/packages/styles/src/carbon-stories/OverflowMenu/OverflowMenu-story.js
deleted file mode 100644
index 243776c610e..00000000000
--- a/packages/styles/src/carbon-stories/OverflowMenu/OverflowMenu-story.js
+++ /dev/null
@@ -1,126 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2020
- *
- * 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 React from 'react';
-import { action } from '@storybook/addon-actions';
-import { withKnobs, boolean, select, text } from '@storybook/addon-knobs';
-import { withReadme } from 'storybook-readme';
-import { OverflowMenu, OverflowMenuItem } from 'carbon-components-react';
-import OverflowREADME from './README.md';
-
-const directions = {
- 'Bottom of the trigger button (bottom)': 'bottom',
- 'Top of the trigger button (top)': 'top',
-};
-
-const props = {
- menu: () => ({
- direction: select('Menu direction (direction)', directions, 'bottom'),
- ariaLabel: text('ARIA label (ariaLabel)', 'Menu'),
- iconDescription: text('Icon description (iconDescription)', ''),
- flipped: boolean('Flipped (flipped)', false),
- light: boolean('Light (light)', false),
- onClick: action('onClick'),
- onFocus: action('onFocus'),
- onKeyDown: action('onKeyDown'),
- onClose: action('onClose'),
- onOpen: action('onOpen'),
- }),
- menuItem: () => ({
- className: 'some-class',
- disabled: boolean('Disabled (disabled)', false),
- requireTitle: boolean('Use hover over text for menu item (requireTitle)', false),
- onClick: action('onClick'),
- }),
-};
-
-const OverflowMenuExample = ({ overflowMenuProps, overflowMenuItemProps }) => (
- <>
- <OverflowMenu {...overflowMenuProps}>
- <OverflowMenuItem {...overflowMenuItemProps} itemText="Option 1" primaryFocus />
- <OverflowMenuItem
- {...overflowMenuItemProps}
- itemText="Option 2 is an example of a really long string and how we recommend handling this"
- requireTitle
- />
- <OverflowMenuItem {...overflowMenuItemProps} itemText="Option 3" />
- <OverflowMenuItem {...overflowMenuItemProps} itemText="Option 4" />
- <OverflowMenuItem {...overflowMenuItemProps} itemText="Danger option" hasDivider isDelete />
- </OverflowMenu>
- </>
-);
-
-export default {
- title: 'OverflowMenu',
- decorators: [withKnobs],
-};
-
-export const Basic = withReadme(OverflowREADME, () => (
- <OverflowMenuExample overflowMenuProps={props.menu()} overflowMenuItemProps={props.menuItem()} />
-));
-
-Basic.story = {
- name: 'basic',
-
- parameters: {
- info: {
- text: `
- Overflow Menu is used when additional options are available to the user and there is a space constraint.
- Create Overflow Menu Item components for each option on the menu.
- `,
- },
- },
-};
-
-export const WithLinks = withReadme(OverflowREADME, () => (
- <OverflowMenuExample
- overflowMenuProps={props.menu()}
- overflowMenuItemProps={{
- ...props.menuItem(),
- href: 'https://www.ibm.com',
- }}
- />
-));
-
-WithLinks.story = {
- name: 'with links',
-
- parameters: {
- info: {
- text: `
- Overflow Menu is used when additional options are available to the user and there is a space constraint.
- Create Overflow Menu Item components for each option on the menu.
-
- When given \`href\` props, menu items render as <a> tags to facilitate usability.
- `,
- },
- },
-};
-
-export const CustomTrigger = withReadme(OverflowREADME, () => (
- <OverflowMenuExample
- overflowMenuProps={{
- ...props.menu(),
- ariaLabel: null,
- style: { width: 'auto' },
- renderIcon: () => <div style={{ padding: '0 1rem' }}>Menu</div>,
- }}
- overflowMenuItemProps={props.menuItem()}
- />
-));
-
-CustomTrigger.story = {
- name: 'custom trigger',
-
- parameters: {
- info: {
- text: `
- Sometimes you just want to render something other than an icon
- `,
- },
- },
-};
diff --git a/packages/styles/src/carbon-stories/OverflowMenu/README.md b/packages/styles/src/carbon-stories/OverflowMenu/README.md
deleted file mode 100644
index a1ba58b77d6..00000000000
--- a/packages/styles/src/carbon-stories/OverflowMenu/README.md
+++ /dev/null
@@ -1,68 +0,0 @@
-# `OverflowMenu` component
-
-> Overflow Menu is used when additional options are available to the user and
-> there is a space constraint. Create Overflow Menu Item components for each
-> option on the menu.
-
-## Table of Contents
-
-<!-- To run doctoc, just do `npx doctoc README.md` in this directory! -->
-
-<!-- START doctoc generated TOC please keep comment here to allow auto update -->
-
-<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
-
-- [Installation](#installation)
-- [Usage](#usage)
-
-<!-- END doctoc generated TOC please keep comment here to allow auto update -->
-
-## Installation
-
-This component comes with any installation of the `carbon-components-react`
-package on NPM. You can install this package by running the following in your
-terminal:
-
-```bash
-npm i carbon-components carbon-components-react carbon-icons --save
-# Or, with yarn
-yarn add carbon-components carbon-components-react carbon-icons
-```
-
-## Usage
-
-You can include `OverflowMenu` and `OverflowMenuItem` by doing the following in
-your project:
-
-```js
-import { OverflowMenu, OverflowMenuItem } from 'carbon-components-react';
-```
-
-You can then create the menu by the following:
-
-```js
-<OverflowMenu>
- <OverflowMenuItem itemText="Option 1" primaryFocus />
- <OverflowMenuItem itemText="Option 2" />
- ...
-</OverflowMenu>
-```
-
-There are two important React props:
-
-- `primaryFocus` in `OverflowMenuItem`: This is required for the menu item you
- put keyboard focus on when `OverflowMenu` gets open
-
-Please refer to
-[our Storybook](http://react.carbondesignsystem.com/?selectedKind=OverflowMenu&selectedStory=basic)
-for more details.
-
-## Note about `<OverflowMenu>` children
-
-Make sure the children of `<OverflowMenu>` are React components that accept
-`ref` as their children - Typically `<OverflowMenuItem>`. Otherwise, you'll get
-an error like:
-
-```
-Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?
-```
diff --git a/packages/styles/src/carbon-stories/Pagination/Pagination-story.js b/packages/styles/src/carbon-stories/Pagination/Pagination-story.js
deleted file mode 100644
index 27cd5eb9931..00000000000
--- a/packages/styles/src/carbon-stories/Pagination/Pagination-story.js
+++ /dev/null
@@ -1,62 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2020
- *
- * 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 React from 'react';
-import { action } from '@storybook/addon-actions';
-
-import { withKnobs, array, boolean, number, text } from '@storybook/addon-knobs';
-import { Pagination } from 'carbon-components-react';
-
-const props = () => ({
- disabled: boolean('Disable backward/forward buttons (disabled)', false),
- page: number('The current page (page)', 1),
- totalItems: number('Total number of items (totalItems)', 103),
- pagesUnknown: boolean('Total number of items unknown (pagesUnknown)', false),
- pageInputDisabled: boolean('Disable page input (pageInputDisabled)', false),
- backwardText: text('The description for the backward icon (backwardText)', 'Previous page'),
- forwardText: text('The description for the backward icon (forwardText)', 'Next page'),
- pageSize: number('Number of items per page (pageSize)', 10),
- pageSizes: array('Choices of `pageSize` (pageSizes)', [10, 20, 30, 40, 50]),
- itemsPerPageText: text('Label for `pageSizes` select UI (itemsPerPageText)', 'Items per page:'),
- onChange: action('onChange'),
-});
-
-export default {
- title: 'Pagination',
- decorators: [withKnobs, story => <div style={{ width: '800px' }}>{story()}</div>],
-};
-
-export const _Pagination = () => <Pagination {...props()} />;
-
-_Pagination.story = {
- parameters: {
- info: {
- text: `
- The pagination component is used to switch through multiple pages of items, when only a maxium number of items can be displayed per page. Can be used in combination with other components like DataTable.
- `,
- },
- },
-};
-
-export const MultiplePaginationComponents = () => {
- return (
- <div>
- <Pagination {...props()} />
- <Pagination {...props()} />
- </div>
- );
-};
-
-MultiplePaginationComponents.story = {
- name: '↪︎ multiple Pagination components',
-
- parameters: {
- info: {
- text: `Showcasing unique ids for each pagination component`,
- },
- },
-};
diff --git a/packages/styles/src/carbon-stories/ProgressIndicator/ProgressIndicator-story.js b/packages/styles/src/carbon-stories/ProgressIndicator/ProgressIndicator-story.js
deleted file mode 100644
index 9404371ad3e..00000000000
--- a/packages/styles/src/carbon-stories/ProgressIndicator/ProgressIndicator-story.js
+++ /dev/null
@@ -1,135 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2020
- *
- * 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 React from 'react';
-import { withKnobs, number } from '@storybook/addon-knobs';
-import { action } from '@storybook/addon-actions';
-import {
- ProgressIndicator,
- ProgressStep,
- ProgressIndicatorSkeleton,
- Tooltip,
-} from 'carbon-components-react';
-import { settings } from 'carbon-components';
-
-const { prefix } = settings;
-
-export default {
- title: 'ProgressIndicator',
- decorators: [withKnobs],
-};
-
-export const Default = () => (
- <ProgressIndicator currentIndex={number('Current progress (currentIndex)', 1)}>
- <ProgressStep
- label="First step"
- description="Step 1: Getting started with Carbon Design System"
- secondaryLabel="Optional label"
- />
- <ProgressStep
- label="Second step with tooltip"
- description="Step 2: Getting started with Carbon Design System"
- renderLabel={() => (
- <Tooltip
- direction="bottom"
- showIcon={false}
- triggerClassName={`${prefix}--progress-label`}
- triggerText={'Second step with tooltip'}
- tooltipId="tooltipId-0"
- >
- <p>Overflow tooltip content.</p>
- </Tooltip>
- )}
- />
- <ProgressStep
- label="Third step with tooltip"
- description="Step 3: Getting started with Carbon Design System"
- renderLabel={() => (
- <Tooltip
- direction="bottom"
- showIcon={false}
- triggerClassName={`${prefix}--progress-label`}
- triggerText={'Third step with tooltip'}
- tooltipId="tooltipId-1"
- >
- <p>
- Lorem ipsum dolor, sit amet consectetur adipisicing elit. Animi consequuntur hic ratione
- aliquid cupiditate, nesciunt saepe iste blanditiis cumque maxime tenetur veniam est illo
- deserunt sint quae pariatur. Laboriosam, consequatur.
- </p>
- </Tooltip>
- )}
- />
- <ProgressStep
- label="Fourth step"
- description="Step 4: Getting started with Carbon Design System"
- invalid
- secondaryLabel="Example invalid step"
- />
- <ProgressStep
- label="Fifth step"
- description="Step 5: Getting started with Carbon Design System"
- disabled
- />
- </ProgressIndicator>
-);
-
-Default.story = {
- parameters: {
- info: {
- text: `
- For React usage, ProgressIndicator holds the currentIndex state to indicate which ProgressStep is the current step. The ProgressIndicator component should always be used with ProgressStep components as its children. Changing currentIndex prop will automatically set the ProgressStep components props (complete, incomplete, current).
- For general usage, Progress Indicators display steps in a process. It should indicate when steps have been complete, the active step,
- and the steps to come.
- `,
- },
- },
-};
-
-export const Interactive = () => (
- <ProgressIndicator
- currentIndex={number('Current progress (currentIndex)', 1)}
- onChange={action('onChange')}
- >
- <ProgressStep label="Click me" description="Step 1: Register a onChange event" />
- <ProgressStep
- label="Really long label"
- description="The progress indicator will listen for clicks on the steps"
- />
- <ProgressStep
- label="Tooltip and really long label"
- description="The progress indicator will listen for clicks on the steps"
- renderLabel={() => (
- <Tooltip
- direction="bottom"
- showIcon={false}
- triggerClassName={`${prefix}--progress-label`}
- triggerText="Tooltip and really long label"
- tooltipId="tooltipId-1"
- >
- <p>
- Lorem ipsum dolor, sit amet consectetur adipisicing elit. Animi consequuntur hic ratione
- aliquid cupiditate, nesciunt saepe iste blanditiis cumque maxime tenetur veniam est illo
- deserunt sint quae pariatur. Laboriosam, consequatur.
- </p>
- </Tooltip>
- )}
- />
- </ProgressIndicator>
-);
-
-Interactive.story = {
- name: 'interactive',
-
- parameters: {
- info: {
- text: `
- If you register an onChange handler, the Progress Indicator will become interactive. Your parent component should update the currentIndex prop within the onChange handler.
- `,
- },
- },
-};
diff --git a/packages/styles/src/carbon-stories/RadioButton/RadioButton-story.js b/packages/styles/src/carbon-stories/RadioButton/RadioButton-story.js
deleted file mode 100644
index 16c4712e594..00000000000
--- a/packages/styles/src/carbon-stories/RadioButton/RadioButton-story.js
+++ /dev/null
@@ -1,47 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2020
- *
- * 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 React from 'react';
-import { action } from '@storybook/addon-actions';
-
-import { withKnobs, boolean, select, text } from '@storybook/addon-knobs';
-import { RadioButton, RadioButtonSkeleton } from 'carbon-components-react';
-
-const labelPositions = {
- 'Left (left)': 'left',
- 'Right (right)': 'right',
-};
-
-const radioProps = () => ({
- className: 'some-class',
- name: text('Form item name (name)', 'test'),
- value: text('Value (value)', 'standard'),
- labelText: text('Label text (labelText)', 'Standard Radio Button'),
- labelPosition: select('Label position (labelPosition)', labelPositions, 'right'),
- disabled: boolean('Disabled (disabled)', false),
- onChange: action('onChange'),
-});
-
-export default {
- title: 'RadioButton',
- decorators: [withKnobs],
-};
-
-export const Default = () => <RadioButton id="radio-1" {...radioProps()} />;
-
-Default.story = {
- parameters: {
- info: {
- text: `
- Radio buttons are used when a list of two or more options are mutually exclusive,
- meaning the user must select only one option. The example below shows how the Radio Button component
- can be used as an uncontrolled component that is initially checked by setting the defaultChecked property
- to true. To use the component in a controlled way, set the checked property instead.
- `,
- },
- },
-};
diff --git a/packages/styles/src/carbon-stories/RadioButtonGroup/RadioButtonGroup-story.js b/packages/styles/src/carbon-stories/RadioButtonGroup/RadioButtonGroup-story.js
deleted file mode 100644
index 7edcc49b5f8..00000000000
--- a/packages/styles/src/carbon-stories/RadioButtonGroup/RadioButtonGroup-story.js
+++ /dev/null
@@ -1,81 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2020
- *
- * 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 React from 'react';
-import { action } from '@storybook/addon-actions';
-
-import { withKnobs, boolean, select, text } from '@storybook/addon-knobs';
-import { RadioButtonGroup, RadioButton, FormGroup } from 'carbon-components-react';
-
-const values = {
- standard: 'standard',
- 'default-selected': 'default-selected',
- disabled: 'disabled',
-};
-
-const orientations = {
- 'Horizontal (horizontal)': 'horizontal',
- 'Vertical (vertical)': 'vertical',
-};
-
-const labelPositions = {
- 'Left (left)': 'left',
- 'Right (right)': 'right',
-};
-
-const props = {
- group: () => ({
- name: text('The form control name (name in <RadioButtonGroup>)', 'radio-button-group'),
- valueSelected: select(
- 'Value of the selected button (valueSelected in <RadioButtonGroup>)',
- values,
- 'default-selected'
- ),
- orientation: select('Radio button orientation (orientation)', orientations, 'horizontal'),
- labelPosition: select('Label position (labelPosition)', labelPositions, 'right'),
- onChange: action('onChange'),
- }),
- radio: () => ({
- className: 'some-class',
- disabled: boolean('Disabled (disabled in <RadioButton>)', false),
- labelText: text('Label text (labelText in <RadioButton>)', 'Radio button label'),
- }),
-};
-
-export default {
- title: 'RadioButtonGroup',
- decorators: [withKnobs],
-};
-
-export const Default = () => {
- const radioProps = props.radio();
- return (
- <FormGroup legendText="Radio Button heading">
- <RadioButtonGroup defaultSelected="default-selected" legend="Group Legend" {...props.group()}>
- <RadioButton value="standard" id="radio-1" {...radioProps} />
- <RadioButton value="default-selected" id="radio-2" {...radioProps} />
- <RadioButton value="disabled" id="radio-3" {...radioProps} />
- </RadioButtonGroup>
- </FormGroup>
- );
-};
-
-Default.story = {
- parameters: {
- info: {
- text: `
- The example below shows a Radio Button Group component with a default selected Radio Button.
- Although you can set the checked prop on the Radio Button, when using the Radio Button component
- as a child of the Radio Button Group, either set the defaultSelected or valueSelected which will
- automatically set the selected prop on the corresponding Radio Button component.
-
- Use defaultSelected when you want a radio button to be selected initially, but don't need to set it
- at a later time. If you do need to set it dynamically at a later time, then use the valueSelected property instead.
- `,
- },
- },
-};
diff --git a/packages/styles/src/carbon-stories/Search/Search-story.js b/packages/styles/src/carbon-stories/Search/Search-story.js
deleted file mode 100644
index 7c0f8671eff..00000000000
--- a/packages/styles/src/carbon-stories/Search/Search-story.js
+++ /dev/null
@@ -1,79 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2020
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-/* eslint-disable no-console */
-
-import React from 'react';
-import { action } from '@storybook/addon-actions';
-
-import { withKnobs, boolean, select, text } from '@storybook/addon-knobs';
-import {
- Search,
- SearchSkeleton,
- SearchFilterButton,
- SearchLayoutButton,
-} from 'carbon-components-react';
-
-const sizes = {
- 'Regular size (xl)': 'xl',
- 'Large size (lg)': 'lg',
- 'Small size (sm)': 'sm',
-};
-
-const props = () => ({
- className: 'some-class',
- size: select('Size (size)', sizes, 'xl'),
- light: boolean('Light variant (light)', false),
- name: text('Form item name (name)', ''),
- defaultValue: text('Default value (defaultValue)', ''),
- labelText: text('Label text (labelText)', 'Search'),
- closeButtonLabelText: text(
- 'The label text for the close button (closeButtonLabelText)',
- 'Clear search input'
- ),
- placeHolderText: text('Placeholder text (placeHolderText)', 'Search'),
- onChange: action('onChange'),
-});
-
-export default {
- title: 'Search',
- decorators: [withKnobs],
-};
-
-export const Default = () => <Search {...props()} id="search-1" />;
-
-Default.story = {
- parameters: {
- info: {
- text: `
- Search enables users to specify a word or a phrase to find particular relevant pieces of content
- without the use of navigation. Search can be used as the primary means of discovering content,
- or as a filter to aid the user in finding content.
- `,
- },
- },
-};
-
-export const DeprecatedCustomButtons = () => (
- <div style={{ display: 'flex' }}>
- <Search {...props()} id="search-1" />
- <SearchFilterButton onClick={action('onClick')} />
- <SearchLayoutButton onClick={action('onClick')} />
- </div>
-);
-
-DeprecatedCustomButtons.story = {
- name: '[Deprecated] custom buttons',
-
- parameters: {
- info: {
- text: `
- You can control what set of buttons you want.
- `,
- },
- },
-};
diff --git a/packages/styles/src/carbon-stories/Select/Select-story.js b/packages/styles/src/carbon-stories/Select/Select-story.js
deleted file mode 100644
index 37f0d7bb2c2..00000000000
--- a/packages/styles/src/carbon-stories/Select/Select-story.js
+++ /dev/null
@@ -1,67 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2020
- *
- * 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 React from 'react';
-import { action } from '@storybook/addon-actions';
-
-import { withKnobs, boolean, text } from '@storybook/addon-knobs';
-import { Select, SelectItem, SelectItemGroup, SelectSkeleton } from 'carbon-components-react';
-
-const props = {
- select: () => ({
- className: 'some-class',
- light: boolean('Light variant (light in <Select>)', false),
- inline: boolean('Put control in-line with label (inline in <Select>)', false),
- disabled: boolean('Disabled (disabled in <Select>)', false),
- hideLabel: boolean('No label (hideLabel in <Select>)', false),
- invalid: boolean('Show form validation UI (invalid in <Select>)', false),
- invalidText: text(
- 'Form validation UI content (invalidText in <Select>)',
- 'A valid value is required'
- ),
- helperText: text('Helper text (helperText)', 'Optional helper text.'),
- onChange: action('onChange'),
- }),
- group: () => ({
- disabled: boolean('Disabled (disabled in <SelectItemGroup>)', false),
- }),
-};
-
-export default {
- title: 'Select',
- decorators: [withKnobs],
-};
-
-export const Default = () => {
- const groupProps = props.group();
- return (
- <Select {...props.select()} id="select-1" defaultValue="placeholder-item">
- <SelectItem disabled hidden value="placeholder-item" text="Choose an option" />
- <SelectItemGroup label="Category 1" {...groupProps}>
- <SelectItem value="option-1" text="Option 1" />
- <SelectItem value="option-2" text="Option 2" />
- </SelectItemGroup>
- <SelectItemGroup label="Category 2" {...groupProps}>
- <SelectItem value="option-3" text="Option 3" />
- <SelectItem value="option-4" text="Option 4" />
- </SelectItemGroup>
- </Select>
- );
-};
-
-Default.story = {
- parameters: {
- info: {
- text: `
- Select displays a list below its title when selected. They are used primarily in forms,
- where a user chooses one option from a list. Once the user selects an item, the dropdown will
- disappear and the field will reflect the user's choice. Create Select Item components for each
- option in the list. The example below shows an enabled Select component with three items.
- `,
- },
- },
-};
diff --git a/packages/styles/src/carbon-stories/SkeletonPlaceholder/SkeletonPlaceholder-story.js b/packages/styles/src/carbon-stories/SkeletonPlaceholder/SkeletonPlaceholder-story.js
deleted file mode 100644
index 98fddf7d575..00000000000
--- a/packages/styles/src/carbon-stories/SkeletonPlaceholder/SkeletonPlaceholder-story.js
+++ /dev/null
@@ -1,68 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2020
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-/* eslint-disable no-console */
-
-import React from 'react';
-
-import { withKnobs, select } from '@storybook/addon-knobs';
-import { SkeletonPlaceholder } from 'carbon-components-react';
-
-const classNames = {
- 'my--skeleton__placeholder--small': 'my--skeleton__placeholder--small',
- 'my--skeleton__placeholder--medium': 'my--skeleton__placeholder--medium',
- 'my--skeleton__placeholder--large': 'my--skeleton__placeholder--large',
-};
-
-const props = () => ({
- className: select('Classes with different sizes', classNames),
-});
-
-export default {
- title: 'SkeletonPlaceholder',
- decorators: [withKnobs],
-};
-
-export const Default = () => (
- <div style={{ height: '250px', width: '250px' }}>
- <style
- dangerouslySetInnerHTML={{
- __html: `
- .my--skeleton__placeholder--small {
- height: 100px;
- width: 100px;
- }
-
- .my--skeleton__placeholder--medium {
- height: 150px;
- width: 150px;
- }
-
- .my--skeleton__placeholder--large {
- height: 250px;
- width: 250px;
- }
- `,
- }}
- />
- <SkeletonPlaceholder {...props()} />
- </div>
-);
-
-Default.story = {
- parameters: {
- info: {
- text: `
- Skeleton states are used as a progressive loading state while the user waits for content to load.
-
- By taking a height and/or width property, this component can be used when you know the exact dimensions of the incoming content, such as an image.
-
- However, for performance reasons, it's recommended to create a class in your stylesheet to set the dimensions.
- `,
- },
- },
-};
diff --git a/packages/styles/src/carbon-stories/SkeletonText/SkeletonText-story.js b/packages/styles/src/carbon-stories/SkeletonText/SkeletonText-story.js
deleted file mode 100644
index 4e153b0d162..00000000000
--- a/packages/styles/src/carbon-stories/SkeletonText/SkeletonText-story.js
+++ /dev/null
@@ -1,50 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2020
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-/* eslint-disable no-console */
-
-import React from 'react';
-
-import { withKnobs, boolean, number, select } from '@storybook/addon-knobs';
-import { SkeletonText } from 'carbon-components-react';
-
-const widths = {
- '100%': '100%',
- '250px': '250px',
-};
-
-const props = () => ({
- heading: boolean('Skeleton text at a larger size (heading)'),
- paragraph: boolean('Use multiple lines of text (paragraph)'),
- lineCount: number('The number of lines in a paragraph (lineCount)', 3),
- width: select(
- 'Width (in px or %) of single line of text or max-width of paragraph lines (width)',
- widths,
- '100%'
- ),
-});
-
-export default {
- title: 'SkeletonText',
- decorators: [withKnobs],
-};
-
-export const Default = () => (
- <div style={{ width: '300px' }}>
- <SkeletonText {...props()} />
- </div>
-);
-
-Default.story = {
- parameters: {
- info: {
- text: `
- Skeleton states are used as a progressive loading state while the user waits for content to load.
- `,
- },
- },
-};
diff --git a/packages/styles/src/carbon-stories/Slider/Slider-story.js b/packages/styles/src/carbon-stories/Slider/Slider-story.js
deleted file mode 100644
index 00c605b8e97..00000000000
--- a/packages/styles/src/carbon-stories/Slider/Slider-story.js
+++ /dev/null
@@ -1,51 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2020
- *
- * 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 React from 'react';
-import { action } from '@storybook/addon-actions';
-
-import { withKnobs, boolean, number, text } from '@storybook/addon-knobs';
-import { Slider, SliderSkeleton } from 'carbon-components-react';
-
-const props = () => ({
- name: text('Form item name (name)', ''),
- inputType: text('The form element type (inputType)', 'number'),
- ariaLabelInput: text('The ARIA label for the <input> (ariaLabelInput)', 'Label for slider value'),
- disabled: boolean('Disabled (disabled)', false),
- light: boolean('Light variant (light)', false),
- hideTextInput: boolean('Without text input (hideTextInput)', false),
- // value: !sliderValuePropSync ? 50 : number('The value (value)', 50),
- value: 50,
- min: number('The minimum value (min)', 0),
- max: number('The maximum value (max)', 100),
- step: number('The step (step)', 1),
- stepMuliplier: number('The step factor for Shift+arrow keys (stepMuliplier)', 4),
- labelText: text('Label text (labelText)', 'Slider Label'),
- minLabel: text('Label for minimum value (minLabel)', ''),
- maxLabel: text('Label for maximum value (maxLabel)', ''),
- onChange: action('onChange'),
- onRelease: action('onRelease'),
-});
-
-export default {
- title: 'Slider',
- decorators: [withKnobs],
-};
-
-export const Default = () => <Slider id="slider" {...props()} />;
-
-Default.story = {
- name: 'default',
-
- parameters: {
- info: {
- text: `
- Sliders provide a visual indication of adjustable content, where the user can move the handle along a horizontal track to increase or decrease the value.
- `,
- },
- },
-};
diff --git a/packages/styles/src/carbon-stories/StructuredList/StructuredList-story.js b/packages/styles/src/carbon-stories/StructuredList/StructuredList-story.js
deleted file mode 100644
index 9a680ec429b..00000000000
--- a/packages/styles/src/carbon-stories/StructuredList/StructuredList-story.js
+++ /dev/null
@@ -1,121 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2020
- *
- * 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 React from 'react';
-import { CheckmarkFilled16 } from '@carbon/icons-react';
-import {
- StructuredListWrapper,
- StructuredListHead,
- StructuredListBody,
- StructuredListRow,
- StructuredListInput,
- StructuredListCell,
- StructuredListSkeleton,
-} from 'carbon-components-react';
-import { settings } from 'carbon-components';
-
-const { prefix } = settings;
-
-export default {
- title: 'StructuredList',
-};
-
-export const Simple = () => (
- <StructuredListWrapper>
- <StructuredListHead>
- <StructuredListRow head>
- <StructuredListCell head>ColumnA</StructuredListCell>
- <StructuredListCell head>ColumnB</StructuredListCell>
- <StructuredListCell head>ColumnC</StructuredListCell>
- </StructuredListRow>
- </StructuredListHead>
- <StructuredListBody>
- <StructuredListRow>
- <StructuredListCell noWrap>Row 1</StructuredListCell>
- <StructuredListCell>Row 1</StructuredListCell>
- <StructuredListCell>
- 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.
- </StructuredListCell>
- </StructuredListRow>
- <StructuredListRow>
- <StructuredListCell noWrap>Row 2</StructuredListCell>
- <StructuredListCell>Row 2</StructuredListCell>
- <StructuredListCell>
- 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.
- </StructuredListCell>
- </StructuredListRow>
- </StructuredListBody>
- </StructuredListWrapper>
-);
-
-Simple.story = {
- parameters: {
- info: {
- text: `
- Structured Lists group content that is similar or related, such as terms or definitions.
- `,
- },
- },
-};
-
-export const Selection = () => {
- const structuredListBodyRowGenerator = numRows => {
- return Array.apply(null, Array(numRows)).map((n, i) => (
- <StructuredListRow label key={`row-${i}`} htmlFor={`row-${i}`}>
- <StructuredListCell>Row {i}</StructuredListCell>
- <StructuredListCell>Row {i}</StructuredListCell>
- <StructuredListCell>
- 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.
- </StructuredListCell>
- <StructuredListInput
- id={`row-${i}`}
- value={`row-${i}`}
- title={`row-${i}`}
- name="row-0"
- defaultChecked={!i || null}
- />
- <StructuredListCell>
- <CheckmarkFilled16
- className={`${prefix}--structured-list-svg`}
- aria-label="select an option"
- >
- <title>select an option
-
-
-
- ));
- };
- return (
-
-
-
- ColumnA
- ColumnB
- ColumnC
- {''}
-
-
- {structuredListBodyRowGenerator(4)}
-
- );
-};
-
-Selection.story = {
- parameters: {
- info: {
- text: `
- Structured Lists with selection allow a row of list content to be selected.
- `,
- },
- },
-};
diff --git a/packages/styles/src/carbon-stories/Tabs/Tabs-story.js b/packages/styles/src/carbon-stories/Tabs/Tabs-story.js
deleted file mode 100644
index c029b5d0e49..00000000000
--- a/packages/styles/src/carbon-stories/Tabs/Tabs-story.js
+++ /dev/null
@@ -1,114 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2020
- *
- * 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 React from 'react';
-import { action } from '@storybook/addon-actions';
-import { withKnobs, boolean, number, text } from '@storybook/addon-knobs';
-import { settings } from 'carbon-components';
-import classNames from 'classnames';
-import './Tabs-story.scss';
-import { Tabs, Tab, TabsSkeleton } from 'carbon-components-react';
-
-const { prefix } = settings;
-const props = {
- tabs: () => ({
- className: 'some-class',
- selected: number('The index of the selected tab (selected in )', 1),
- triggerHref: text('The href of trigger button for narrow mode (triggerHref in )', '#'),
- role: text('ARIA role (role in )', 'navigation'),
- iconDescription: text(
- 'The description of the trigger icon for narrow mode (iconDescription in )',
- 'show menu options'
- ),
- // Disabling action logger for `` for now given it seems to be significantly slowing down Storybook
- // onClick: action('onClick'),
- onKeyDown: action('onKeyDown'),
- onSelectionChange: action('onSelectionChange'),
- tabContentClassName: text(
- 'The className for the child `` components',
- 'tab-content'
- ),
- }),
- tab: () => ({
- disabled: boolean('Disabled (disabled in )', false),
- href: text('The href for tab (href in )', '#'),
- role: text('ARIA role (role in )', 'presentation'),
- tabIndex: number('Tab index (tabIndex in )', 0),
- onClick: action('onClick'),
- onKeyDown: action('onKeyDown'),
- }),
-};
-
-const CustomLabel = ({ text }) => <>{text};
-
-const TabContentRenderedOnlyWhenSelected = ({ selected, children, className, ...other }) =>
- !selected ? null : (
-
- {children}
-
- );
-
-export default {
- title: 'Tabs',
- decorators: [withKnobs],
-};
-
-export const Default = () => (
-
-
- Content for first tab goes here.
-
-
- Content for second tab goes here.
-
-
- Content for third tab goes here.
-
- Content for fourth tab goes here.
-
-
-);
-
-Default.story = {
- parameters: {
- info: {
- text: `
- Tabs are used to quickly navigate between views within the same context. Create individual
- Tab components for each item in the Tabs list.
- `,
- },
- },
-};
-
-export const Container = () => (
-
-
- Content for first tab goes here.
-
-
- Content for second tab goes here.
-
-
- Content for third tab goes here.
-
- Content for fourth tab goes here.
-
-
-);
-
-Container.story = {
- parameters: {
- info: {
- text: `
- Tabs are used to quickly navigate between views within the same context. Create individual
- Tab components for each item in the Tabs list.
- `,
- },
- },
-};
diff --git a/packages/styles/src/carbon-stories/Tabs/Tabs-story.scss b/packages/styles/src/carbon-stories/Tabs/Tabs-story.scss
deleted file mode 100644
index 9656e257cd8..00000000000
--- a/packages/styles/src/carbon-stories/Tabs/Tabs-story.scss
+++ /dev/null
@@ -1,20 +0,0 @@
-/**
- * Copyright IBM Corp. 2020, 2021
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-// IMPORTANT: This import path should _not_ be used outside our source tree
-// as `src` directory is _not_ meant to be shipped in our NPM package.
-// Use e.g. `@import 'carbon-components/scss/globals/scss/styles.scss'` instead.
-
-$css--font-face: false;
-$css--body: false;
-$css--reset: false;
-@import 'carbon-components/src/globals/scss/css--helpers'; // SEE THE NOTE ABOVE
-
-.bx--tabs--container ~ div {
- height: 320px;
- background-color: $ui-01;
-}
diff --git a/packages/styles/src/carbon-stories/Tag/Tag-story.js b/packages/styles/src/carbon-stories/Tag/Tag-story.js
deleted file mode 100644
index 3431dcff7c7..00000000000
--- a/packages/styles/src/carbon-stories/Tag/Tag-story.js
+++ /dev/null
@@ -1,74 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2020
- *
- * 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 React from 'react';
-import { withKnobs, select, text, boolean } from '@storybook/addon-knobs';
-import { Tag, TagSkeleton } from 'carbon-components-react';
-import { types as typesList } from 'carbon-components-react/es/components/Tag/Tag';
-import { action } from '@storybook/addon-actions/dist/preview';
-
-const props = {
- regular: () => ({
- type: select(
- 'Tag type (type)',
- typesList.reduce(
- (acc, type) => ({
- ...acc,
- [`${type} (${type})`]: type,
- }),
- {}
- ),
- 'red'
- ),
- disabled: boolean('Disabled (disabled)', false),
- title: 'Clear Selection',
- }),
- filter() {
- return { ...this.regular(), onClick: action('onClick') };
- },
-};
-
-export default {
- title: 'Tag',
- decorators: [withKnobs],
-};
-
-export const Default = () => (
-
- {text('Content (children)', 'This is a tag')}
-
-);
-
-Default.story = {
- parameters: {
- info: {
- text: `
- Tags are used for items that need to be labeled, categorized, or organized using keywords that describe them.
- The example below shows how the Tag component can be used. Each type has a default message describing the type,
- but a custom message can also be applied.
- `,
- },
- },
-};
-
-export const Filter = () => (
-
- {text('Content (children)', 'This is a tag')}
-
-);
-
-Filter.story = {
- parameters: {
- info: {
- text: `
- Tags are used for items that need to be labeled, categorized, or organized using keywords that describe them.
- The example below shows how the Tag component can be used. Each type has a default message describing the type,
- but a custom message can also be applied.
- `,
- },
- },
-};
diff --git a/packages/styles/src/carbon-stories/TextArea/Textarea-story.js b/packages/styles/src/carbon-stories/TextArea/Textarea-story.js
deleted file mode 100644
index 40fb411682a..00000000000
--- a/packages/styles/src/carbon-stories/TextArea/Textarea-story.js
+++ /dev/null
@@ -1,47 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2020
- *
- * 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 React from 'react';
-import { action } from '@storybook/addon-actions';
-
-import { withKnobs, boolean, number, text } from '@storybook/addon-knobs';
-import { TextArea, TextAreaSkeleton } from 'carbon-components-react';
-
-const TextAreaProps = () => ({
- className: 'some-class',
- disabled: boolean('Disabled (disabled)', false),
- light: boolean('Light variant (light)', false),
- hideLabel: boolean('No label (hideLabel)', false),
- labelText: text('Label text (labelText)', 'Text Area label'),
- invalid: boolean('Show form validation UI (invalid)', false),
- invalidText: text('Content of form validation UI (invalidText)', 'A valid value is required'),
- helperText: text('Helper text (helperText)', 'Optional helper text.'),
- placeholder: text('Placeholder text (placeholder)', 'Placeholder text.'),
- id: 'test2',
- cols: number('Columns (columns)', 50),
- rows: number('Rows (rows)', 4),
- onChange: action('onChange'),
- onClick: action('onClick'),
-});
-
-export default {
- title: 'TextArea',
- decorators: [withKnobs],
-};
-
-export const Default = () => ;
-
-Default.story = {
- parameters: {
- info: {
- text: `
- Text areas enable the user to interact with and input data. A text area is used when you
- anticipate the user to input more than 1 sentence.
- `,
- },
- },
-};
diff --git a/packages/styles/src/carbon-stories/TextInput/TextInput-story.js b/packages/styles/src/carbon-stories/TextInput/TextInput-story.js
deleted file mode 100644
index 6cf45ed9db5..00000000000
--- a/packages/styles/src/carbon-stories/TextInput/TextInput-story.js
+++ /dev/null
@@ -1,130 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2020
- *
- * 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 React, { useState } from 'react';
-import { action } from '@storybook/addon-actions';
-import { withKnobs, boolean, select, text } from '@storybook/addon-knobs';
-import { TextInput, TextInputSkeleton } from 'carbon-components-react';
-
-const types = {
- None: '',
- 'Text (text)': 'text',
- 'For email (email)': 'email',
- 'For password (password)': 'password',
-};
-
-function ControlledPasswordInputApp(props) {
- const [type, setType] = useState('password');
- const togglePasswordVisibility = () => {
- setType(type === 'password' ? 'text' : 'password');
- };
- return (
- <>
- setType('text')}>Show password
- setType('password')}>Hide password
-
- );
-}
-
-const props = {
- TextInputProps: () => ({
- className: 'some-class',
- id: 'test2',
- defaultValue: text('Default value (defaultValue)', 'This is not a default value'),
- labelText: text('Label text (labelText)', 'Text Input label'),
- placeholder: text('Placeholder text (placeholder)', 'Placeholder text'),
- light: boolean('Light variant (light)', false),
- disabled: boolean('Disabled (disabled)', false),
- hideLabel: boolean('No label (hideLabel)', false),
- invalid: boolean('Show form validation UI (invalid)', false),
- invalidText: text('Form validation UI content (invalidText)', 'A valid value is required'),
- helperText: text('Helper text (helperText)', 'Optional helper text.'),
- onClick: action('onClick'),
- onChange: action('onChange'),
- }),
- PasswordInputProps: () => ({
- tooltipPosition: select(
- 'Tooltip position (tooltipPosition)',
- ['top', 'right', 'bottom', 'left'],
- 'bottom'
- ),
- tooltipAlignment: select(
- 'Tooltip alignment (tooltipAlignment)',
- ['start', 'center', 'end'],
- 'center'
- ),
- hidePasswordLabel: text(
- '"Hide password" tooltip label for password visibility toggle (hidePasswordLabel)',
- 'Hide password'
- ),
- showPasswordLabel: text(
- '"Show password" tooltip label for password visibility toggle (showPasswordLabel)',
- 'Show password'
- ),
- }),
-};
-
-TextInput.displayName = 'TextInput';
-
-export default {
- title: 'TextInput',
- decorators: [withKnobs],
-};
-
-export const Default = () => (
- )', 'tile-group'),
- valueSelected: select(
- 'Value of the selected item (valueSelected in )',
- radioValues,
- ''
- ),
- onChange: action('onChange'),
- }),
- radio: () => ({
- name: text('Form item name (name in )', 'tiles'),
- onChange: action('onChange'),
- light: boolean('Light variant (light)', false),
- }),
- expandable: () => ({
- tabIndex: number('Tab index (tabIndex)', 0),
- expanded: boolean('Expanded (expanded)', false),
- tileMaxHeight: number('Max height (tileMaxHeight)', 0),
- tileCollapsedIconText: text(
- 'Collapsed icon text (tileCollapsedIconText)',
- 'Interact to Expand tile'
- ),
- tileExpandedIconText: text(
- 'Collapsed icon text (tileExpandedIconText)',
- 'Interact to Collapse tile'
- ),
- handleClick: action('handleClick'),
- light: boolean('Light variant (light)', false),
- }),
-};
-
-export default {
- title: 'Tile',
- decorators: [withKnobs],
-};
-
-export const Default = () => {
- const regularProps = props.regular();
- return Default tile ;
-};
-
-Default.story = {
- parameters: {
- info: {
- text: `
- Default tile without any interactions
- `,
- },
- },
-};
-
-export const Clickable = () => {
- const clickableProps = props.clickable();
- return Clickable Tile ;
-};
-
-Clickable.story = {
- parameters: {
- info: {
- text: `
- Clickable tile
- `,
- },
- },
-};
-
-export const MultiSelect = () => {
- const selectableProps = props.selectable();
- return (
-
-
- Multi-select Tile
-
-
- Multi-select Tile
-
-
- Multi-select Tile
-
-
- );
-};
-
-MultiSelect.story = {
- name: 'Multi-select',
-
- parameters: {
- info: {
- text: `
- Selectable tile
-
- Use this to select multiple tiles.
- `,
- },
- },
-};
-
-export const Selectable = () => {
- const radioProps = props.radio();
- return (
-
-
- Selectable Tile
-
-
- Selectable Tile
-
-
- Selectable Tile
-
-
- );
-};
-
-Selectable.story = {
- parameters: {
- info: {
- text: `
- The example below shows a Tile Group component with a default selected Tile.
- Although you can set the checked prop on the Tile, when using the RadioTile component
- as a child of the Tile Group, either set the defaultSelected or valueSelected which will
- automatically set the selected prop on the corresponding RadioTile component.
-
- Use defaultSelected when you want a tile to be selected initially, but don't need to set it
- at a later time. If you do need to set it dynamically at a later time, then use the valueSelected property instead.
-
- Use this to select one tile at a time.
- `,
- },
- },
-};
-
-export const Expandable = () => (
-
-
- Above the fold content here
-
-
- Below the fold content here
-
-
-);
-
-Expandable.story = {
- parameters: {
- info: {
- text: `
- Expandable tile
- `,
- },
- },
-};
diff --git a/packages/styles/src/carbon-stories/TimePicker/TimePicker-story.js b/packages/styles/src/carbon-stories/TimePicker/TimePicker-story.js
deleted file mode 100644
index ecd67398e89..00000000000
--- a/packages/styles/src/carbon-stories/TimePicker/TimePicker-story.js
+++ /dev/null
@@ -1,75 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2020
- *
- * 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 React from 'react';
-import { action } from '@storybook/addon-actions';
-
-import { withKnobs, boolean, number, text } from '@storybook/addon-knobs';
-import { TimePicker, TimePickerSelect, SelectItem } from 'carbon-components-react';
-
-const props = {
- timepicker: () => ({
- pattern: text(
- 'Regular expression for the value (pattern in )',
- '(1[012]|[1-9]):[0-5][0-9](\\s)?'
- ),
- placeholder: text('Placeholder text (placeholder in )', 'hh:mm'),
- disabled: boolean('Disabled (disabled in )', false),
- light: boolean('Light variant (light in )', false),
- hideLabel: boolean('No label (hideLabel in )', false),
- labelText: text('Label text (labelText in )', 'Select a time'),
- invalid: boolean('Show form validation UI (invalid in )', false),
- invalidText: text(
- 'Form validation UI content (invalidText in )',
- 'A valid value is required'
- ),
- maxLength: number('Maximum length (maxLength in )', 5),
- onClick: action('onClick'),
- onChange: action('onChange'),
- onBlur: action('onBlur'),
- }),
- select: () => ({
- disabled: boolean('Disabled (disabled in )', false),
- hideLabel: boolean('No label (hideLabel in )', true),
- labelText: text('Label text (labelText in )', 'Please select'),
- iconDescription: text(
- 'Trigger icon description (iconDescription in )',
- 'open list of options'
- ),
- }),
-};
-
-export default {
- title: 'TimePicker',
- decorators: [withKnobs],
-};
-
-export const Default = () => {
- const selectProps = props.select();
- return (
-
-
-
-
-
-
- );
-};
-
-Default.story = {
- parameters: {
- info: {
- text: `
- The time picker allow users to select a time.
- `,
- },
- },
-};
diff --git a/packages/styles/src/carbon-stories/Toggle/Toggle-story.js b/packages/styles/src/carbon-stories/Toggle/Toggle-story.js
deleted file mode 100644
index 0043edce858..00000000000
--- a/packages/styles/src/carbon-stories/Toggle/Toggle-story.js
+++ /dev/null
@@ -1,67 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2020
- *
- * 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 React from 'react';
-import { action } from '@storybook/addon-actions';
-import { withKnobs, text, boolean } from '@storybook/addon-knobs';
-import { Toggle, ToggleSkeleton } from 'carbon-components-react';
-
-const a11yProps = () => ({
- labelText: text('Label toggle input control (labelText)', ''),
- ['aria-label']: text('ARIA label of the toggle (aria-label)', ''),
-});
-
-const toggleProps = () => ({
- ...a11yProps(),
- className: 'some-class',
- labelA: text('Label for untoggled state (labelA)', 'Off'),
- labelB: text('Label for toggled state (labelB)', 'On'),
- disabled: boolean('Disabled (disabled)', false),
- onChange: action('onChange'),
- onToggle: action('onToggle'),
-});
-
-export default {
- title: 'Toggle',
- decorators: [withKnobs],
-};
-
-export const Toggled = () => (
- )', 0),
- }),
- withoutIcon: () => ({
- showIcon: false,
- direction: select('Tooltip direction (direction)', directions, 'bottom'),
- triggerText: text('Trigger text (triggerText)', 'Tooltip label'),
- tabIndex: number('Tab index (tabIndex in )', 0),
- }),
- customIcon: () => ({
- showIcon: true,
- direction: select('Tooltip direction (direction)', directions, 'bottom'),
- triggerText: text('Trigger text (triggerText)', 'Tooltip label'),
- tabIndex: number('Tab index (tabIndex in )', 0),
- renderIcon: React.forwardRef((props, ref) => (
-
- )),
- }),
- customIconOnly: () => ({
- showIcon: true,
- direction: select('Tooltip direction (direction)', directions, 'bottom'),
- iconDescription: 'Helpful Information',
- tabIndex: number('Tab index (tabIndex in )', 0),
- renderIcon: OverflowMenuVertical16,
- }),
-};
-
-Tooltip.displayName = 'Tooltip';
-
-function UncontrolledTooltipExample() {
- const [value, setValue] = useState(true);
- return (
- <>
- setValue(false)}>
- Hide
-
- setValue(true)}>
- Show
-
-
- My text wrapped with tooltip
}
- open={value}
- showIcon={false}
- >
- Some text
-
-
-
- );
-}
-
-export default {
- title: 'Tooltip',
- decorators: [withKnobs],
-};
-
-export const DefaultBottom = () => (
-
-
-
- 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.
-
-
-
-
-
-
- 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.
-
-
-
-
-
-
- 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.
-
-
-
-
-
-
- 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.
-
-
-
-
- Definition Tooltip
-
-);
-
-Default.story = {
- name: 'default',
-
- parameters: {
- info: {
- text: `
- Definition tooltip is for regular use case of tooltip, e.g. giving the user more text information about something, like defining a word.
- This works better than the interactive tooltip in regular use cases because the info icon used in interactive tooltip can be repetitive when it’s shown several times on a page.
- Definition tooltip does not use any JavaScript. If there are actions a user can take in the tooltip (e.g. a link or a button), use interactive tooltip.
- `,
- },
- },
-};
diff --git a/packages/styles/src/carbon-stories/TooltipIcon/TooltipIcon-story.js b/packages/styles/src/carbon-stories/TooltipIcon/TooltipIcon-story.js
deleted file mode 100644
index cc16dd69799..00000000000
--- a/packages/styles/src/carbon-stories/TooltipIcon/TooltipIcon-story.js
+++ /dev/null
@@ -1,55 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2020
- *
- * 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 React from 'react';
-import { Filter16 } from '@carbon/icons-react';
-import { withKnobs, select, text } from '@storybook/addon-knobs';
-import { TooltipIcon } from 'carbon-components-react';
-
-const directions = {
- 'Top (top)': 'top',
- 'Right (right)': 'right',
- 'Bottom (bottom)': 'bottom',
- 'Left (left)': 'left',
-};
-
-const alignments = {
- 'Start (start)': 'start',
- 'Center (center)': 'center',
- 'End (end)': 'end',
-};
-
-const props = () => ({
- direction: select('Tooltip direction (direction)', directions, 'bottom'),
- align: select('Tooltip alignment (align)', alignments, 'center'),
- tooltipText: text('Tooltip content (tooltipText)', 'Filter'),
-});
-
-export default {
- title: 'TooltipIcon',
- decorators: [withKnobs],
-};
-
-export const Default = () => (
-
-
-);
-
-Default.story = {
- name: 'default',
-
- parameters: {
- info: {
- text: `
- Icon tooltip is for short single line of text describing an icon.
- Icon tooltip does not use any JavaScript. No label should be added to this variation.
- If there are actions a user can take in the tooltip (e.g. a link or a button), use interactive tooltip.
- `,
- },
- },
-};
diff --git a/packages/styles/src/carbon-stories/UIShell/README.md b/packages/styles/src/carbon-stories/UIShell/README.md
deleted file mode 100644
index aaf27f59d0b..00000000000
--- a/packages/styles/src/carbon-stories/UIShell/README.md
+++ /dev/null
@@ -1,27 +0,0 @@
-# UI Shell
-
-> Components for building a product shell when using the Carbon Design System
-
-## Components
-
-- `Header`: used to render the top bar in your application
- - `HeaderMenuButton`: used to display the trigger for a menu
- - `HeaderName`: used to display the name of the product
- - `HeaderGlobalBar`: used to display global actions
- - `HeaderGlobalAction`: used to display a global action
- - `HeaderMenubar`: used to display nav links
- - `HeaderMenu`: used to display a menu in the nav
- - `HeaderMenuItem`: used to display a menu item, often a link
-- `SideNav`: used to render the container for the side navigation of a page
- - `SideNavHeader`: used to render the top bar in the side navigation
- - `SideNavDetails`: renders the title for the side nav
- - `SideNavSwitcher`: provides an optional tool to handle switching at the
- top-level
- - `SideNavItems`: used for rendering items in the sub nav
- - `SideNavLink`: renders a link in the side nav
- - `SideNavMenu`: renders a collapsible menu in the side nav
- - `SideNavMenuItem`: renders a link in a side nav menu
- - `RightPanel`: used for render the container for header actions on the right
- - `Switcher`: used to render a list of product links inside the right panel
- - `SwitcherItem`: used to render list item, often a link
- - `SwitcherDivider`: used to render a divider for list items
diff --git a/packages/styles/src/carbon-stories/UIShell/UIShell-story.js b/packages/styles/src/carbon-stories/UIShell/UIShell-story.js
deleted file mode 100644
index 178b1414b29..00000000000
--- a/packages/styles/src/carbon-stories/UIShell/UIShell-story.js
+++ /dev/null
@@ -1,690 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2020
- *
- * 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 { Search20, Notification20, AppSwitcher20 } from '@carbon/icons-react';
-
-import { action } from '@storybook/addon-actions';
-
-import React from 'react';
-import { withReadme } from 'storybook-readme';
-import readme from './README.md';
-import {
- HeaderContainer,
- Content,
- Header,
- HeaderMenuButton,
- HeaderName,
- HeaderNavigation,
- HeaderMenu,
- HeaderMenuItem,
- HeaderGlobalBar,
- HeaderGlobalAction,
- HeaderPanel,
- HeaderSideNavItems,
- SkipToContent,
- SideNav,
- // Temporarily comment these out until they are needed again
- // SideNavHeader,
- // SideNavDetails,
- // SideNavSwitcher,
- SideNavItems,
- SideNavLink,
- SideNavMenu,
- SideNavMenuItem,
- Switcher,
- SwitcherItem,
- SwitcherDivider,
-} from 'carbon-components-react';
-
-SideNav.displayName = 'SideNav';
-SideNavMenu.displayName = 'SideNavMenu';
-SideNavMenuItem.displayName = 'SideNavMenuItem';
-
-const Fade16 = () => (
-
-
-);
-
-const StoryContent = () => {
- const content = (
-
-
-
-
- Purpose and function
-
-
- The shell is perhaps the most crucial piece of any UI built with Carbon. It contains the
- shared navigation framework for the entire design system and ties the products in IBM’s
- portfolio together in a cohesive and elegant way. The shell is the home of the topmost
- navigation, where users can quickly and dependably gain their bearings and move between
- pages.
-
-
- Header responsive behavior
-
-
- As a header scales down to fit smaller screen sizes, headers with persistent side nav
- menus should have the side nav collapse into “hamburger” menu. See the example to better
- understand responsive behavior of the header.
-
-
- Secondary navigation
-
-
- The side-nav contains secondary navigation and fits below the header. It can be
- configured to be either fixed-width or flexible, with only one level of nested items
- allowed. Both links and category lists can be used in the side-nav and may be mixed
- together. There are several configurations of the side-nav, but only one configuration
- should be used per product section. If tabs are needed on a page when using a side-nav,
- then the tabs are secondary in hierarchy to the side-nav.
-
-
-
-
- {content}
-
- );
-};
-
-export default {
- title: 'UI Shell',
-};
-
-export const HeaderBase = withReadme(readme, () => (
-
-));
-
-export const HeaderBaseWNavigation = withReadme(readme, () => (
- (
- <>
-
-
- [Platform]
-
-
- Link 1
- Link 2
- Link 3
-
- Sub-link 1
- Sub-link 2
- Sub-link 3
-
-
-
-
-
- Link 1
- Link 2
- Link 3
-
- Sub-link 1
- Sub-link 2
- Sub-link 3
-
-
-
-
-
-
- )}
- />
-));
-
-HeaderBaseWNavigation.story = {
- name: 'Header Base w/ Navigation',
-};
-
-export const HeaderBaseWActions = withReadme(readme, () => (
-
-
- [Platform]
-
-
-
-
-
-
-
-
-
-
-));
-
-HeaderBaseWActions.story = {
- name: 'Header Base w/ Actions',
-};
-
-export const HeaderBaseWNavigationAndActions = withReadme(readme, () => (
- (
- <>
-
-
- [Platform]
-
-
- Link 1
- Link 2
- Link 3
-
- Sub-link 1
- Sub-link 2
- Sub-link 3
-
-
-
-
-
-
-
-
-
-
-
-
-
- Link 1
- Link 2
- Link 3
-
- Sub-link 1
- Sub-link 2
- Sub-link 3
-
-
-
-
-
-
- )}
- />
-));
-
-HeaderBaseWNavigationAndActions.story = {
- name: 'Header Base w/ Navigation and Actions',
-};
-
-export const HeaderBaseWNavigationActionsAndSideNav = withReadme(readme, () => (
- (
- <>
-
-
- [Platform]
-
-
- Link 1
- Link 2
- Link 3
-
- Sub-link 1
- Sub-link 2
- Sub-link 3
-
-
-
-
-
-
-
-
-
-
-
-
-
- Link 1
- Link 2
- Link 3
-
- Sub-link 1
- Sub-link 2
- Sub-link 3
-
-
-
- Link
- Link
- Link
-
-
- Link
- Link
- Link
-
-
- Link
-
- Link
-
- Link
-
-
- Link
-
-
- Link
-
-
-
-
- (
- <>
-
-
- [Platform]
-
-
-
-
- Link
- Link
- Link
-
-
- Link
-
- Link
-
- Link
-
-
- Link
- Link
- Link
-
-
- Link
-
-
- Link
-
-
-
-
-
-
- [Platform]
-
-
-
-
-
-
-
-
-
-
-));
-
-HeaderBaseWActionsAndRightPanel.story = {
- name: 'Header Base w/ Actions and Right Panel',
-};
-
-export const HeaderBaseWActionsAndSwitcher = withReadme(readme, () => (
-
-
- [Platform]
-
-
-
-
-
-
-
-
-
-
-
-
- Link 1
-
-
- Link 2
-
-
- Link 3
-
-
- Link 4
-
-
- Link 5
-
-
- Link 6
-
-
-
-
-));
-
-HeaderBaseWActionsAndSwitcher.story = {
- name: 'Header Base w/ Actions and Switcher',
-};
-
-export const FixedSideNav = withReadme(readme, () => (
- <>
-
-
-
- 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
-
-
-
-
-
- Link
- Link
- Link
-
-
- Link
-
- Link
-
- Link
-
-
- Link
- Link
- Link
-
-
- Link
-
-
- Link
-
-
-
-
-
-
- Link
-
- Link
-
- Link
-
-
- Link
- Link
- Link
-
-
- Link
- Link
- Link
-
-
- Link
-
-
- Link
-
-
-
- (
- <>
-
-
- [Platform]
-
-
- Link 1
- Link 2
- Link 3
-
- Sub-link 1
- Sub-link 2
- Sub-link 3
-
-
-
-
-
-
-
-
-
-
-
-
-
- Link
-
- Link
-
- Link
-
-
- Link
-
- Link
-
- Link
-
-
- Link
-
- Link
-
- Link
-
-
- Link
-
-
- Link
-
-
-
-
-
-
-
- Menu 1
- Menu 2
- Menu 3
-
-
- Large link
-
-
- Menu 1
- Menu 2
- Menu 3
-
-
- Large link w/icon
-
-
-
-
- Unordered List level 1
- Unordered List level 1
- Unordered List level 1
-
-);
-
-Default.story = {
- name: 'default',
-
- parameters: {
- info: {
- text:
- 'Lists consist of related content grouped together and organized ' +
- 'vertically. Unordered lists are used to present content of equal ' +
- 'status or value.',
- },
- },
-};
-
-export const Nested = () => (
-
-
- Unordered List level 1
-
- Unordered List level 2
-
- Unordered List level 2
-
- Unordered List level 2
- Unordered List level 2
-
-
-
-
- Unordered List level 1
- Unordered List level 1
-
-);
-
-Nested.story = {
- name: 'nested',
-
- parameters: {
- info: {
- text:
- 'Lists consist of related content grouped together and organized ' +
- 'vertically. Unordered lists are used to present content of equal ' +
- 'status or value.',
- },
- },
-};
diff --git a/packages/styles/src/carbon-stories/icon-kitchen-sink-story.js b/packages/styles/src/carbon-stories/icon-kitchen-sink-story.js
deleted file mode 100644
index 500e5c19a25..00000000000
--- a/packages/styles/src/carbon-stories/icon-kitchen-sink-story.js
+++ /dev/null
@@ -1,341 +0,0 @@
-/**
- * Copyright IBM Corp. 2020
- *
- * 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 React from 'react';
-import { storiesOf } from '@storybook/react';
-import { action } from '@storybook/addon-actions';
-import { withKnobs, boolean, text } from '@storybook/addon-knobs';
-import { Add16, CheckmarkFilled16, Filter16 } from '@carbon/icons-react';
-import {
- Accordion,
- AccordionItem,
- CodeSnippet,
- ComboBox,
- DatePicker,
- DatePickerInput,
- Dropdown,
- Form,
- FormGroup,
- InlineLoading,
- MultiSelect,
- ToastNotification,
- InlineNotification,
- NotificationActionButton,
- NumberInput,
- Pagination,
- Button,
- Search,
- Select,
- SelectItem,
- StructuredListWrapper,
- StructuredListHead,
- StructuredListBody,
- StructuredListRow,
- StructuredListCell,
- StructuredListInput,
- Tag,
- TextArea,
- TextInput,
- ToggleSmall,
- TooltipIcon,
-} from 'carbon-components-react';
-
-import DataTableWithOverflowMenuStory from './DataTable/stories/with-overflow-menu';
-import FileUploaderFromDropContainerStory from './FileUploader/stories/drop-container';
-
-import './icon-kitchen-sink-story.scss';
-import './Form/form-story.scss';
-
-const dropdownItems = [
- {
- id: 'option-0',
- text: 'Option 1',
- },
- {
- id: 'option-1',
- text: 'Option 2',
- },
- {
- id: 'option-2',
- text: 'Option 3',
- },
-];
-
-const structuredListBodyRowGenerator = numRows => {
- return Array.from({ length: numRows }).map((n, i) => (
-
- Row {i}
- Row {i}
-
- 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.
-
-
-
- select an option
-
-
-
- ));
-};
-
-export default {
- title: 'Component icons kitchen sink',
-};
-
-export const Default = () => (
- <>
- Important note
-
- This story does not represent Carbon's design.
- The component widths or positions are aligned solely for testing icon sizes/positions.
-
-
-
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
- eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
- ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
- aliquip ex ea commodo consequat.
-
-
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
- eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
- ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
- aliquip ex ea commodo consequat.
-
-
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
- eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
- ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
- aliquip ex ea commodo consequat.
-
-
-
-
-
-
- {
- 'node -v Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis, veritatis voluptate id incidunt molestiae officia possimus, quasi itaque alias, architecto hic, dicta fugit? Debitis delectus quidem explicabo vitae fuga laboriosam!'
- }
-
-
-
-
-
- {`@mixin grid-container {
- width: 100%;
- padding-right: padding(mobile);
- padding-left: padding(mobile);
-
- @include breakpoint(bp--xs--major) {
- padding-right: padding(xs);
- padding-left: padding(xs);
- }
-}
-
-$z-indexes: (
- modal : 9000,
- overlay : 8000,
- dropdown : 7000,
- header : 6000,
- footer : 5000,
- hidden : - 1,
- overflowHidden: - 1,
- floating: 10000
-);`}
-
-
-
- (item ? item.text : '')}
- />
-
-
-
-
-
-
-
-
-
-
-
- (item ? item.text : '')}
- />
-
-
-
-
-
-
-
-
- (item ? item.text : '')}
- />
-
-
-
- Action
- }
- />
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- ColumnA
- ColumnB
- ColumnC
- {''}
-
-
-
- {structuredListBodyRowGenerator(4)}
-
-
-
-
-
- Tag text
-
-
-
-
-
-
-
-);
diff --git a/packages/styles/src/carbon-stories/icon-kitchen-sink-story.scss b/packages/styles/src/carbon-stories/icon-kitchen-sink-story.scss
deleted file mode 100644
index ca558d72e74..00000000000
--- a/packages/styles/src/carbon-stories/icon-kitchen-sink-story.scss
+++ /dev/null
@@ -1,55 +0,0 @@
-//
-// Copyright IBM Corp. 2020, 2021
-//
-// 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 'carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/grid/vendor/@carbon/layout/convert';
-
-.dds-story--icon-kitchen-sink__item {
- display: flex;
- flex-direction: column;
- align-items: stretch;
- margin-bottom: carbon--rem(16px);
-
- .bx--snippet--single {
- max-width: none;
- padding-right: 0;
- }
-
- .bx--date-picker--single {
- width: 100%;
- flex-direction: column;
- align-items: flex-end;
-
- .bx--date-picker-container {
- flex: 1;
- }
- }
-
- .bx--file-browse-btn,
- .bx--file__selected-file {
- max-width: none;
- }
-
- .bx--inline-loading {
- justify-content: flex-end;
-
- .bx--inline-loading__animation {
- order: 1;
- }
- }
-
- .bx--inline-notification,
- .bx--toast-notification {
- margin-right: 0;
- max-width: none;
- width: auto;
- }
-}
-
-.dds-story--icon-kitchen-sink__item--tag,
-.dds-story--icon-kitchen-sink__item--tooltip-icon {
- align-items: flex-end;
-}
diff --git a/packages/styles/src/carbon-stories/overview.js b/packages/styles/src/carbon-stories/overview.js
deleted file mode 100644
index 8d461ee8457..00000000000
--- a/packages/styles/src/carbon-stories/overview.js
+++ /dev/null
@@ -1,22 +0,0 @@
-/**
- * Copyright IBM Corp. 2020
- *
- * 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 React from 'react';
-import { storiesOf } from '@storybook/react';
-import { withDocs } from 'storybook-readme';
-import README from '../../scss/themes/expressive/README.md';
-
-storiesOf('Overview', module)
- .addParameters({
- info: {
- disable: true,
- },
- })
- .add(
- 'Get Started',
- withDocs(README, () =>
),
- );
diff --git a/packages/styles/src/carbon-tools/uniqueId.js b/packages/styles/src/carbon-tools/uniqueId.js
deleted file mode 100644
index dbe91237c66..00000000000
--- a/packages/styles/src/carbon-tools/uniqueId.js
+++ /dev/null
@@ -1,13 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2018
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-let lastId = 0;
-
-export default function(prefix = 'id') {
- lastId++;
- return `${prefix}${lastId}`;
-}
diff --git a/packages/styles/src/carbon-tools/withState.js b/packages/styles/src/carbon-tools/withState.js
deleted file mode 100644
index 0c13441daed..00000000000
--- a/packages/styles/src/carbon-tools/withState.js
+++ /dev/null
@@ -1,28 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2018
- *
- * 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 React from 'react';
-import PropTypes from 'prop-types';
-
-export default class WithState extends React.PureComponent {
- static propTypes = {
- initialState: PropTypes.object,
- };
-
- UNSAFE_componentWillMount() {
- this.setState(this.props.initialState);
- }
-
- boundSetState = (...args) => this.setState(...args);
-
- render() {
- return this.props.children({
- state: this.state,
- setState: this.boundSetState,
- });
- }
-}
diff --git a/yarn.lock b/yarn.lock
index 2818a593f85..69c074f01f1 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -125,7 +125,7 @@
semver "^5.4.1"
source-map "^0.5.0"
-"@babel/core@>=7.2.2", "@babel/core@>=7.9.0", "@babel/core@^7.1.0", "@babel/core@^7.1.6", "@babel/core@^7.4.3", "@babel/core@^7.4.5", "@babel/core@^7.7.4", "@babel/core@^7.7.5", "@babel/core@^7.8.0", "@babel/core@^7.9.0":
+"@babel/core@>=7.2.2", "@babel/core@>=7.9.0", "@babel/core@^7.1.0", "@babel/core@^7.1.6", "@babel/core@^7.4.3", "@babel/core@^7.4.5", "@babel/core@^7.7.5", "@babel/core@^7.8.0", "@babel/core@^7.9.0":
version "7.10.2"
resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.10.2.tgz#bd6786046668a925ac2bd2fd95b579b92a23b36a"
integrity sha512-KQmV9yguEjQsXqyOUGKjS4+3K8/DlOCE2pZcq4augdQmtTy5iv5EHtmMSJ7V4c1BIPjuwtZYqYLCq9Ga+hGBRQ==
@@ -522,7 +522,7 @@
"@babel/helper-remap-async-to-generator" "^7.10.1"
"@babel/plugin-syntax-async-generators" "^7.8.0"
-"@babel/plugin-proposal-class-properties@^7.1.0", "@babel/plugin-proposal-class-properties@^7.10.1", "@babel/plugin-proposal-class-properties@^7.4.0", "@babel/plugin-proposal-class-properties@^7.5.0", "@babel/plugin-proposal-class-properties@^7.7.0", "@babel/plugin-proposal-class-properties@^7.7.4", "@babel/plugin-proposal-class-properties@^7.8.0":
+"@babel/plugin-proposal-class-properties@^7.1.0", "@babel/plugin-proposal-class-properties@^7.10.1", "@babel/plugin-proposal-class-properties@^7.4.0", "@babel/plugin-proposal-class-properties@^7.5.0", "@babel/plugin-proposal-class-properties@^7.7.0", "@babel/plugin-proposal-class-properties@^7.8.0":
version "7.10.1"
resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-class-properties/-/plugin-proposal-class-properties-7.10.1.tgz#046bc7f6550bb08d9bd1d4f060f5f5a4f1087e01"
integrity sha512-sqdGWgoXlnOdgMXU+9MbhzwFRgxVLeiGBqTrnuS7LC2IBU31wSsESbTUreT2O418obpfPdGUR2GbEufZF1bpqw==
@@ -665,7 +665,7 @@
dependencies:
"@babel/helper-plugin-utils" "^7.10.1"
-"@babel/plugin-syntax-dynamic-import@^7.2.0", "@babel/plugin-syntax-dynamic-import@^7.7.4", "@babel/plugin-syntax-dynamic-import@^7.8.0":
+"@babel/plugin-syntax-dynamic-import@^7.2.0", "@babel/plugin-syntax-dynamic-import@^7.8.0":
version "7.8.3"
resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-dynamic-import/-/plugin-syntax-dynamic-import-7.8.3.tgz#62bf98b2da3cd21d626154fc96ee5b3cb68eacb3"
integrity sha512-5gdGbFon+PszYzqs83S3E5mpi7/y/8M9eC90MRTZfduQOYW76ig6SOSPNe41IG5LoP3FGBn2N0RjVDSQiS94kQ==
@@ -1036,7 +1036,7 @@
babel-plugin-polyfill-regenerator "^0.3.0"
semver "^6.3.0"
-"@babel/plugin-transform-runtime@^7.5.0", "@babel/plugin-transform-runtime@^7.5.5", "@babel/plugin-transform-runtime@^7.7.4", "@babel/plugin-transform-runtime@^7.8.0":
+"@babel/plugin-transform-runtime@^7.5.0", "@babel/plugin-transform-runtime@^7.5.5", "@babel/plugin-transform-runtime@^7.8.0":
version "7.10.1"
resolved "https://registry.yarnpkg.com/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.10.1.tgz#fd1887f749637fb2ed86dc278e79eb41df37f4b1"
integrity sha512-4w2tcglDVEwXJ5qxsY++DgWQdNJcCCsPxfT34wCUwIf2E7dI7pMpH8JczkMBbgBTNzBX62SZlNJ9H+De6Zebaw==
@@ -1107,7 +1107,7 @@
"@babel/helper-create-regexp-features-plugin" "^7.10.1"
"@babel/helper-plugin-utils" "^7.10.1"
-"@babel/preset-env@^7.1.6", "@babel/preset-env@^7.4.3", "@babel/preset-env@^7.4.5", "@babel/preset-env@^7.5.5", "@babel/preset-env@^7.7.4", "@babel/preset-env@^7.8.0", "@babel/preset-env@^7.9.0":
+"@babel/preset-env@^7.1.6", "@babel/preset-env@^7.4.3", "@babel/preset-env@^7.4.5", "@babel/preset-env@^7.5.5", "@babel/preset-env@^7.8.0", "@babel/preset-env@^7.9.0":
version "7.10.2"
resolved "https://registry.yarnpkg.com/@babel/preset-env/-/preset-env-7.10.2.tgz#715930f2cf8573b0928005ee562bed52fb65fdfb"
integrity sha512-MjqhX0RZaEgK/KueRzh+3yPSk30oqDKJ5HP5tqTSB1e2gzGS3PLy7K0BIpnp78+0anFuSwOeuCf1zZO7RzRvEA==
@@ -1196,7 +1196,7 @@
"@babel/types" "^7.4.4"
esutils "^2.0.2"
-"@babel/preset-react@^7.0.0", "@babel/preset-react@^7.7.4":
+"@babel/preset-react@^7.0.0":
version "7.7.4"
resolved "https://registry.yarnpkg.com/@babel/preset-react/-/preset-react-7.7.4.tgz#3fe2ea698d8fb536d8e7881a592c3c1ee8bf5707"
integrity sha512-j+vZtg0/8pQr1H8wKoaJyGL2IEk3rG/GIvua7Sec7meXVIvGycihlGMx5xcU00kqCJbwzHs18xTu3YfREOqQ+g==
@@ -5905,7 +5905,7 @@ babel-jest@^25.5.1:
graceful-fs "^4.2.4"
slash "^3.0.0"
-babel-loader@^8.0.0, babel-loader@^8.0.4, babel-loader@^8.0.6:
+babel-loader@^8.0.0, babel-loader@^8.0.4:
version "8.1.0"
resolved "https://registry.yarnpkg.com/babel-loader/-/babel-loader-8.1.0.tgz#c611d5112bd5209abe8b9fa84c3e4da25275f1c3"
integrity sha512-7q7nC1tYOrqvUrN3LQK4GwSk/TQorZSOlO9C+RZDZpODgyN4ZlCqE5q9cDsyWOliN+aU9B4JX01xK9eJXowJLw==
@@ -6767,7 +6767,7 @@ browserslist-config-carbon@10.6.1:
resolved "https://registry.yarnpkg.com/browserslist-config-carbon/-/browserslist-config-carbon-10.6.1.tgz#e7964c3611bda48b37d7b7a58e6c1b080574a368"
integrity sha512-HniQrwocICXBu7+BMDS8Hd3iqaM7DQCz/r1PJvBwmCKGx13LTpSUCUSn+JjL3PqBNqZpWsG44Tgb1AVKfl+9LA==
-browserslist-config-carbon@^10.3.0, browserslist-config-carbon@^10.4.0:
+browserslist-config-carbon@^10.3.0:
version "10.4.0"
resolved "https://registry.yarnpkg.com/browserslist-config-carbon/-/browserslist-config-carbon-10.4.0.tgz#876012dd4e196d48c1d7fda18410e3fabfc0dee8"
integrity sha512-upwVB5WAI/pw12E6Qj85kjNB3FeaG0ZubsKbROoHfBar5SvFbtN/BsHR+KYKUEYOXurs4NzyviXB03uNjJeUNg==
@@ -7239,20 +7239,10 @@ caniuse-api@^3.0.0:
lodash.memoize "^4.1.2"
lodash.uniq "^4.5.0"
-caniuse-lite@^1.0.0, caniuse-lite@^1.0.30000984, caniuse-lite@^1.0.30001109, caniuse-lite@^1.0.30001125:
- version "1.0.30001230"
- resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001230.tgz"
- integrity sha512-5yBd5nWCBS+jWKTcHOzXwo5xzcj4ePE/yjtkZyUV1BTUmrBaA9MRGC+e7mxnqXSA90CmCA8L3eKLaSUkt099IQ==
-
-caniuse-lite@^1.0.30001280:
- version "1.0.30001286"
- resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001286.tgz#3e9debad420419618cfdf52dc9b6572b28a8fff6"
- integrity sha512-zaEMRH6xg8ESMi2eQ3R4eZ5qw/hJiVsO/HlLwniIwErij0JDr9P+8V4dtx1l+kLq6j3yy8l8W4fst1lBnat5wQ==
-
-caniuse-lite@^1.0.30001286:
- version "1.0.30001299"
- resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001299.tgz#d753bf6444ed401eb503cbbe17aa3e1451b5a68c"
- integrity sha512-iujN4+x7QzqA2NCSrS5VUy+4gLmRd4xv6vbBBsmfVqTx8bLAD8097euLqQgKxSVLvxjSDcvF1T/i9ocgnUFexw==
+caniuse-lite@^1.0.0, caniuse-lite@^1.0.30000984, caniuse-lite@^1.0.30001109, caniuse-lite@^1.0.30001125, caniuse-lite@^1.0.30001280, caniuse-lite@^1.0.30001286:
+ version "1.0.30001309"
+ resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001309.tgz"
+ integrity sha512-Pl8vfigmBXXq+/yUz1jUwULeq9xhMJznzdc/xwl4WclDAuebcTHVefpz8lE/bMI+UN7TOkSSe7B7RnZd6+dzjA==
capture-exit@^2.0.0:
version "2.0.0"
@@ -12339,7 +12329,7 @@ gulp-sass@^5.0.0:
transfob "^1.0.0"
vinyl-sourcemaps-apply "^0.2.1"
-gulp-sourcemaps@^2.6.0, gulp-sourcemaps@^2.6.5:
+gulp-sourcemaps@^2.6.0:
version "2.6.5"
resolved "https://registry.yarnpkg.com/gulp-sourcemaps/-/gulp-sourcemaps-2.6.5.tgz#a3f002d87346d2c0f3aec36af7eb873f23de8ae6"
integrity sha512-SYLBRzPTew8T5Suh2U8jCSDKY+4NARua4aqjj8HOysBh2tSgT9u4jc1FYirAdPx1akUxxDeK++fqw6Jg0LkQRg==
@@ -20656,7 +20646,7 @@ requestretry@^4.1.0:
lodash "^4.17.15"
when "^3.7.7"
-require-context.macro@^1.0.4, require-context.macro@^1.2.2:
+require-context.macro@^1.0.4:
version "1.2.2"
resolved "https://registry.yarnpkg.com/require-context.macro/-/require-context.macro-1.2.2.tgz#84bc90f6b9c6dec3a840c84cfd6b2dd92884e34d"
integrity sha512-qibgUj+t0YeBAIsQSqgY3iwFrwQoAV7mmZmvdEpGwe1eAS7iunLpINsRYX/lyuHtJDeJdF7U92jXNzbuDeM2RA==