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`] = `
+
+`;
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();
+ });
+ });
});