diff --git a/src/__deprecated__/components/fieldset/__definition__.js b/src/__deprecated__/components/fieldset/__definition__.js deleted file mode 100644 index 159e561925..0000000000 --- a/src/__deprecated__/components/fieldset/__definition__.js +++ /dev/null @@ -1,76 +0,0 @@ -import Fieldset from '.'; -import OptionsHelper from '../../../utils/helpers/options-helper'; -import Definition from '../../../../demo/utils/definition'; -import textboxDefinition from '../textbox/__definition__'; - -let definition = new Definition('fieldset', Fieldset, { - description: `Edits a set of closely related inputs that are grouped together.`, - designerNotes: ` -* You can nest any Carbon input into this component. -* Useful for presenting a series of inputs that are closely related, within a wider Form or Pod (e.g. an address or contact details). -* Configure Pod and Fieldset components to work together, or choose the pre-configured Show/Edit Pod component. -* The [Show/Edit Pod](/components/show-edit-pod) component automatically presents content as a read-only Pod, until the user clicks an edit icon, which shows the same information in an editable Fieldset. -* But, configuring Pod and Fieldset components manually will give you more customization options, like the following. -* Top-aligned labels (Carbon default) or inline right-aligned labels are usually fastest for users. -* Create a single path to completion with your inputs, and between your inputs and the primary action Button. -* Indicate mandatory, or optional fields, whichever is the minority. Think carefully before collecting optional data - don’t collect information you don’t need! Try suffixing ‘(optional)’ after your field label. -* More guidance is available for each of the individual inputs you might place inside this component. - `, - relatedComponentsNotes: ` -* Filling in a broad series of inputs? [Try Form](/components/form). -* Viewing content that’s grouped together visually? [Try Pod](/components/pod). -* Using Fieldset and Pod components together? [Try Show/Edit Pod](/components/show-edit-pod). -* Creating a new entity that is usually presented in a pod? [Try Create](/components/create). - `, - propTypes: { - legend: "String" - }, - propDescriptions: { - legend: "Adds a legend to the fieldset." - } -}); - -definition.addChildByDefinition(textboxDefinition, { - fieldHelp: null, - labelHelp: null, - labelInline: true, - label: "First Name", - labelAlign: "right", -}); -definition.addChildByDefinition(textboxDefinition, { - fieldHelp: null, - labelHelp: null, - labelInline: true, - label: "Last Name", - labelAlign: "right", -}); -definition.addChildByDefinition(textboxDefinition, { - fieldHelp: null, - labelHelp: null, - labelInline: true, - label: "Address", - labelAlign: "right", -}); -definition.addChildByDefinition(textboxDefinition, { - fieldHelp: null, - labelHelp: null, - labelInline: true, - label: "City", - labelAlign: "right", -}); -definition.addChildByDefinition(textboxDefinition, { - fieldHelp: null, - labelHelp: null, - labelInline: true, - label: "Country", - labelAlign: "right", -}); -definition.addChildByDefinition(textboxDefinition, { - fieldHelp: null, - labelHelp: null, - labelInline: true, - label: "Telephone", - labelAlign: "right", -}); - -export default definition; diff --git a/src/__deprecated__/components/fieldset/__spec__.js b/src/__deprecated__/components/fieldset/__spec__.js deleted file mode 100644 index a151f72d07..0000000000 --- a/src/__deprecated__/components/fieldset/__spec__.js +++ /dev/null @@ -1,51 +0,0 @@ -import React from 'react'; -import TestUtils from 'react-dom/test-utils'; -import Fieldset from './fieldset'; -import Textbox from '../textbox'; -import { shallow } from 'enzyme'; -import { elementsTagTest, rootTagTest } from '../../../utils/helpers/tags/tags-specs'; - -describe('Fieldset', () => { - let instance; - - beforeEach(() => { - instance = TestUtils.renderIntoDocument(
); - }); - - it('renders its children', () => { - let child = TestUtils.findRenderedComponentWithType(instance, Textbox); - expect(child).toBeDefined(); - }); - - it('applies any props to the fieldset', () => { - instance = TestUtils.renderIntoDocument(
); - let child = TestUtils.findRenderedDOMComponentWithTag(instance, 'fieldset'); - expect(child.id).toEqual('foo'); - }); - - describe('if a legend is supplied', () => { - it('renders its legend', () => { - instance = TestUtils.renderIntoDocument(
); - let child = TestUtils.findRenderedDOMComponentWithTag(instance, 'legend'); - expect(child).toBeDefined(); - }); - }); - - describe("tags", () => { - describe("on component", () => { - let wrapper = shallow(
); - - it('include correct component, element and role data tags', () => { - rootTagTest(wrapper, 'fieldset', 'bar', 'baz'); - }); - }); - - describe("on internal elements", () => { - let wrapper = shallow(
); - - elementsTagTest(wrapper, [ - 'legend' - ]); - }); - }); -}); diff --git a/src/__deprecated__/components/fieldset/docgenInfo.json b/src/__deprecated__/components/fieldset/docgenInfo.json deleted file mode 100644 index 3d32c620d1..0000000000 --- a/src/__deprecated__/components/fieldset/docgenInfo.json +++ /dev/null @@ -1,41 +0,0 @@ -{ - "src/components/fieldset/fieldset.js": [ - { - "description": "", - "displayName": "Fieldset", - "methods": [ - { - "name": "legend", - "docblock": "Returns the legend if on is defined.\n\n@method legend\n@return {Object} JSX", - "modifiers": [ - "get" - ], - "params": [], - "returns": { - "description": "JSX", - "type": { - "name": "Object" - } - }, - "description": "Returns the legend if on is defined." - } - ], - "props": { - "children": { - "type": { - "name": "node" - }, - "required": false, - "description": "Children elements" - }, - "legend": { - "type": { - "name": "string" - }, - "required": false, - "description": "A label for the fieldset." - } - } - } - ] -} \ No newline at end of file diff --git a/src/__deprecated__/components/fieldset/documentation/notes.md b/src/__deprecated__/components/fieldset/documentation/notes.md deleted file mode 100644 index 4082fc129a..0000000000 --- a/src/__deprecated__/components/fieldset/documentation/notes.md +++ /dev/null @@ -1,16 +0,0 @@ -# Designer Notes -- You can nest any Carbon input into this component. -- Useful for presenting a series of inputs that are closely related, within a wider Form or Pod (e.g. an address or contact details). -- Configure Pod and Fieldset components to work together, or choose the pre-configured Show/Edit Pod component. - -The Show/Edit Pod component automatically presents content as a read-only Pod, until the user clicks an edit icon, which shows the same information in an editable Fieldset. -- But, configuring Pod and Fieldset components manually will give you more customization options, like the following. -- Top-aligned labels (Carbon default) or inline right-aligned labels are usually fastest for users. -- Create a single path to completion with your inputs, and between your inputs and the primary action Button. -- Indicate mandatory, or optional fields, whichever is the minority. Think carefully before collecting optional data - don’t collect information you don’t need! Try suffixing ‘(optional)’ after your field label. -- More guidance is available for each of the individual inputs you might place inside this component. - -# Related Components -- Filling in a broad series of inputs? [Try Form](/components/form "Form"). -- Viewing content that’s grouped together visually? [Try Pod](/components/pod "Pod"). -- Using Fieldset and Pod components together? [Try Show/Edit Pod](/components/show-edit-pod "Show/Edit Pod"). -- Creating a new entity that is usually presented in a pod? [Try Create](/components/create, "Create"). diff --git a/src/__deprecated__/components/fieldset/fieldset.js b/src/__deprecated__/components/fieldset/fieldset.js deleted file mode 100644 index d29d53b60b..0000000000 --- a/src/__deprecated__/components/fieldset/fieldset.js +++ /dev/null @@ -1,59 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import classNames from 'classnames'; -import { validProps } from '../../../utils/ether'; -import tagComponent from '../../../utils/helpers/tags'; -import './fieldset.scss'; - -class Fieldset extends React.Component { - static propTypes = { - /** - * Children elements - */ - children: PropTypes.node, - - /** - * A label for the fieldset. - */ - legend: PropTypes.string - }; - - - /** - * Returns the legend if on is defined. - * - * @method legend - * @return {Object} JSX - */ - get legend() { - if (!this.props.legend) { return null; } - - return ( - - { this.props.legend } - - ); - } - - /** - * @method render - */ - render() { - const { - className, labelAlign, childOfForm, ...props - } = validProps(this); - const classes = classNames('carbon-fieldset', className); - - return ( -
- { this.legend } - { this.props.children } -
- ); - } -} - -export default Fieldset; diff --git a/src/__deprecated__/components/fieldset/fieldset.scss b/src/__deprecated__/components/fieldset/fieldset.scss deleted file mode 100644 index 7651b7529b..0000000000 --- a/src/__deprecated__/components/fieldset/fieldset.scss +++ /dev/null @@ -1,63 +0,0 @@ -@import "./../../../style-config/input-field"; - -.carbon-fieldset { - border: none; - margin: 0; - padding: 0; - - [data-component='icon'].carbon-input-icon, - .common-input__icon { - z-index: 2; - [data-element='error'] { - top: 5px; - } - } - - .common-input__input--error { - position: relative; - z-index: 1; - } - - .common-input__icon--warning { - right: 5px; - top: 6px; - z-index: 2; - } - - .common-input__input:focus, - .common-input__input:hover { - position: relative; - z-index: 2; - } - - .common-input + .common-input { - margin-top: -1px; - - .common-input__input { - border-radius: 0; - } - } - - .common-input:first-child { - .common-input__input { - border-bottom-left-radius: 0; - border-bottom-right-radius: 0; - } - } - - .common-input:last-child { - .common-input__input { - border-radius: 0 0 $input-border-radius $input-border-radius; - } - } - - .common-input--readonly { - .common-input__input { - border: $input-common-border; - } - - .common-input__input:hover { - border: $input-common-border; - } - } -} diff --git a/src/__deprecated__/components/fieldset/fieldset.stories.js b/src/__deprecated__/components/fieldset/fieldset.stories.js deleted file mode 100644 index 406cf13fa8..0000000000 --- a/src/__deprecated__/components/fieldset/fieldset.stories.js +++ /dev/null @@ -1,67 +0,0 @@ -import React from 'react'; -import { storiesOf } from '@storybook/react'; -import { text } from '@storybook/addon-knobs'; -import { classicThemeSelector } from '../../../../.storybook/theme-selectors'; -import notes from './documentation/notes.md'; -import Fieldset from './fieldset'; -import Textbox from '../textbox'; -import getDocGenInfo from '../../../utils/helpers/docgen-info'; - -Fieldset.__docgenInfo = getDocGenInfo( - require('./docgenInfo.json'), - /fieldset(?!spec)/ -); - -storiesOf('__deprecated__/Fieldset', module) - .addParameters({ - info: { - propTablesExclude: [Textbox] - }, - chromatic: { - disable: true - } - }) - .add('classic', () => { - const legend = text('legend', ''); - - return ( -
- - - - - - -
- ); - }, { - notes: { markdown: notes }, - knobs: { escapeHTML: false }, - themeSelector: classicThemeSelector - }); diff --git a/src/__deprecated__/components/fieldset/package.json b/src/__deprecated__/components/fieldset/package.json deleted file mode 100644 index 504ac51385..0000000000 --- a/src/__deprecated__/components/fieldset/package.json +++ /dev/null @@ -1,4 +0,0 @@ -{ - "main": "./fieldset.js", - "name": "Fieldset" -}