diff --git a/packages/terra-switch/CHANGELOG.md b/packages/terra-switch/CHANGELOG.md index bde6fa927ab..6b9b8bfe610 100644 --- a/packages/terra-switch/CHANGELOG.md +++ b/packages/terra-switch/CHANGELOG.md @@ -1,6 +1,8 @@ # Changelog ## Unreleased +* Added + * Added `isBlock` prop to render the switch as block element when specified. ## 1.2.0 - (August 4, 2020) diff --git a/packages/terra-switch/src/Switch.jsx b/packages/terra-switch/src/Switch.jsx index 5a730e3cbb0..e0bd358c484 100644 --- a/packages/terra-switch/src/Switch.jsx +++ b/packages/terra-switch/src/Switch.jsx @@ -28,6 +28,10 @@ const propTypes = { * The label text of the Switch component. */ labelText: PropTypes.string.isRequired, + /** + * Whether or not to render the switch as block element when specified. + */ + isBlock: PropTypes.bool, /** * Callback function when switch value changes from ON / OFF. * Returns Parameters: 1. switch value 2. event. @@ -38,6 +42,7 @@ const propTypes = { const defaultProps = { isChecked: false, isDisabled: false, + isBlock: false, onChange: undefined, }; @@ -45,6 +50,7 @@ const Switch = (props) => { const { isChecked, isDisabled, + isBlock, onChange, labelText, ...customProps @@ -86,10 +92,16 @@ const Switch = (props) => { { 'is-enabled': !isDisabled }, { 'is-disabled': isDisabled }, { 'is-selected': isChecked }, + { 'is-block': isBlock }, theme.className, ), customProps.className); + const labelContainerClassNames = cx([ + 'label-container', + { 'is-block': isBlock }, + ]); + let switchAttrs; if (!isDisabled) { switchAttrs = { @@ -116,7 +128,7 @@ const Switch = (props) => { data-terra-switch-show-focus-styles ref={sliderButton} > -
+
{labelText}
{statusLabelText}
diff --git a/packages/terra-switch/src/Switch.module.scss b/packages/terra-switch/src/Switch.module.scss index a6c224467bd..d2b310907db 100644 --- a/packages/terra-switch/src/Switch.module.scss +++ b/packages/terra-switch/src/Switch.module.scss @@ -9,11 +9,19 @@ display: inline-flex; flex-direction: row; outline: 0; + + &.is-block { + width: 100%; + } } .label-container { flex: 0 1 auto; margin-right: var(--terra-switch-label-margin-right, 1.42857rem); + + &.is-block { + flex: 1 1 auto; + } } .label-text { diff --git a/packages/terra-switch/src/terra-dev-site/doc/example/BlockSwitch.jsx b/packages/terra-switch/src/terra-dev-site/doc/example/BlockSwitch.jsx new file mode 100644 index 00000000000..49ffbcd412f --- /dev/null +++ b/packages/terra-switch/src/terra-dev-site/doc/example/BlockSwitch.jsx @@ -0,0 +1,16 @@ +import React, { useState } from 'react'; +import Switch from 'terra-switch'; + +const BlockSwitch = () => { + const [value, setValue] = useState(true); + return ( + + ); +}; + +export default BlockSwitch; diff --git a/packages/terra-switch/src/terra-dev-site/doc/switch/Switch.1.doc.mdx b/packages/terra-switch/src/terra-dev-site/doc/switch/Switch.1.doc.mdx index ad9de04d483..7808c62f234 100644 --- a/packages/terra-switch/src/terra-dev-site/doc/switch/Switch.1.doc.mdx +++ b/packages/terra-switch/src/terra-dev-site/doc/switch/Switch.1.doc.mdx @@ -3,6 +3,7 @@ import { Badge } from 'terra-switch/package.json?dev-site-package'; import DefaultSwitch from '../example/DefaultSwitch?dev-site-example'; import SwitchWithOnChange from '../example/SwitchWithOnChange?dev-site-example'; import DisabledSwitch from '../example/DisabledSwitch?dev-site-example'; +import BlockSwitch from '../example/BlockSwitch?dev-site-example'; import SwitchPropsTable from 'terra-switch/src/Switch?dev-site-props-table'; @@ -60,6 +61,7 @@ import Switch from 'terra-switch'; + ## Switch Props diff --git a/packages/terra-switch/src/terra-dev-site/test/switch/BlockSwitch.test.jsx b/packages/terra-switch/src/terra-dev-site/test/switch/BlockSwitch.test.jsx new file mode 100644 index 00000000000..3bc75b448b1 --- /dev/null +++ b/packages/terra-switch/src/terra-dev-site/test/switch/BlockSwitch.test.jsx @@ -0,0 +1,17 @@ +import React, { useState } from 'react'; +import Switch from '../../../Switch'; + +const BlockSwitch = () => { + const [value, setValue] = useState(false); + return ( + + ); +}; + +export default BlockSwitch; diff --git a/packages/terra-switch/tests/jest/__snapshots__/switch.test.jsx.snap b/packages/terra-switch/tests/jest/__snapshots__/switch.test.jsx.snap index 5280faf1624..7bbc0e688db 100644 --- a/packages/terra-switch/tests/jest/__snapshots__/switch.test.jsx.snap +++ b/packages/terra-switch/tests/jest/__snapshots__/switch.test.jsx.snap @@ -133,3 +133,72 @@ exports[`Switch should render as disabled when set 1`] = `
`; + +exports[`Switch should render block switch element when isBlock is specified 1`] = ` +
+
+
+ default +
+
+ +
+
+
+
+
+
+`; diff --git a/packages/terra-switch/tests/jest/switch.test.jsx b/packages/terra-switch/tests/jest/switch.test.jsx index 5d4b1a0366c..eb3bf697c37 100644 --- a/packages/terra-switch/tests/jest/switch.test.jsx +++ b/packages/terra-switch/tests/jest/switch.test.jsx @@ -29,4 +29,10 @@ describe('Switch', () => { const wrapper = shallowWithIntl(defaultRender); expect(wrapper.prop('className')).toContain('switch'); }); + + it('should render block switch element when isBlock is specified', () => { + const wrapper = shallowWithIntl(); + expect(wrapper.prop('className')).toContain('is-block'); + expect(wrapper).toMatchSnapshot(); + }); }); diff --git a/packages/terra-switch/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_large/switch-spec/Block_Switch[default].png b/packages/terra-switch/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_large/switch-spec/Block_Switch[default].png new file mode 100644 index 00000000000..09ea3d93be9 Binary files /dev/null and b/packages/terra-switch/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_large/switch-spec/Block_Switch[default].png differ diff --git a/packages/terra-switch/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_medium/switch-spec/Block_Switch[default].png b/packages/terra-switch/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_medium/switch-spec/Block_Switch[default].png new file mode 100644 index 00000000000..090202291f8 Binary files /dev/null and b/packages/terra-switch/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_medium/switch-spec/Block_Switch[default].png differ diff --git a/packages/terra-switch/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_tiny/switch-spec/Block_Switch[default].png b/packages/terra-switch/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_tiny/switch-spec/Block_Switch[default].png new file mode 100644 index 00000000000..d25ebac5824 Binary files /dev/null and b/packages/terra-switch/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_tiny/switch-spec/Block_Switch[default].png differ diff --git a/packages/terra-switch/tests/wdio/__snapshots__/reference/en/chrome_large/switch-spec/Block_Switch[default].png b/packages/terra-switch/tests/wdio/__snapshots__/reference/en/chrome_large/switch-spec/Block_Switch[default].png new file mode 100644 index 00000000000..a7be85c49af Binary files /dev/null and b/packages/terra-switch/tests/wdio/__snapshots__/reference/en/chrome_large/switch-spec/Block_Switch[default].png differ diff --git a/packages/terra-switch/tests/wdio/__snapshots__/reference/en/chrome_medium/switch-spec/Block_Switch[default].png b/packages/terra-switch/tests/wdio/__snapshots__/reference/en/chrome_medium/switch-spec/Block_Switch[default].png new file mode 100644 index 00000000000..ccc30894f3d Binary files /dev/null and b/packages/terra-switch/tests/wdio/__snapshots__/reference/en/chrome_medium/switch-spec/Block_Switch[default].png differ diff --git a/packages/terra-switch/tests/wdio/__snapshots__/reference/en/chrome_tiny/switch-spec/Block_Switch[default].png b/packages/terra-switch/tests/wdio/__snapshots__/reference/en/chrome_tiny/switch-spec/Block_Switch[default].png new file mode 100644 index 00000000000..8d107d8aa23 Binary files /dev/null and b/packages/terra-switch/tests/wdio/__snapshots__/reference/en/chrome_tiny/switch-spec/Block_Switch[default].png differ diff --git a/packages/terra-switch/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_large/switch-spec/Block_Switch[default].png b/packages/terra-switch/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_large/switch-spec/Block_Switch[default].png new file mode 100644 index 00000000000..8629838f007 Binary files /dev/null and b/packages/terra-switch/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_large/switch-spec/Block_Switch[default].png differ diff --git a/packages/terra-switch/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_medium/switch-spec/Block_Switch[default].png b/packages/terra-switch/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_medium/switch-spec/Block_Switch[default].png new file mode 100644 index 00000000000..4c52c61a54f Binary files /dev/null and b/packages/terra-switch/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_medium/switch-spec/Block_Switch[default].png differ diff --git a/packages/terra-switch/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_tiny/switch-spec/Block_Switch[default].png b/packages/terra-switch/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_tiny/switch-spec/Block_Switch[default].png new file mode 100644 index 00000000000..cc0b3487247 Binary files /dev/null and b/packages/terra-switch/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_tiny/switch-spec/Block_Switch[default].png differ diff --git a/packages/terra-switch/tests/wdio/switch-spec.js b/packages/terra-switch/tests/wdio/switch-spec.js index e1ff2155ddb..efab41c58a1 100644 --- a/packages/terra-switch/tests/wdio/switch-spec.js +++ b/packages/terra-switch/tests/wdio/switch-spec.js @@ -44,4 +44,11 @@ Terra.describeViewports('Switch', ['tiny', 'medium', 'large'], () => { Terra.validates.element(); }); }); + + describe('Block Switch', () => { + it('renders switch as block element', () => { + browser.url('/#/raw/tests/terra-switch/switch/block-switch'); + Terra.validates.element(); + }); + }); });