Added isBlock prop to Switch. (#3122)

* Added isBlock prop to Switch

* revereted form_factors added for testing

* linter error

* updated doc comments

* grammar corrections

Co-authored-by: Saket Bajaj <42207428+saket2403@users.noreply.github.com>

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)
 

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,13 +42,15 @@ const propTypes = {
 const defaultProps = {
   isChecked: false,
   isDisabled: false,
+  isBlock: false,
   onChange: undefined,
 };
 
 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}
     >
-      <div aria-hidden className={cx('label-container')}>
+      <div aria-hidden className={labelContainerClassNames}>
         <div className={cx('label-text')}>{labelText}</div>
         <div className={cx('status-label-text')}>{statusLabelText}</div>
       </div>

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 {

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 (
+    <Switch
+      isChecked={value}
+      labelText="Block Switch with Long Label Text"
+      isBlock
+      onChange={setValue}
+    />
+  );
+};
+
+export default BlockSwitch;

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';
 <DefaultSwitch />
 <SwitchWithOnChange />
 <DisabledSwitch />
+<BlockSwitch />
 
 ## Switch Props
 <SwitchPropsTable />

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 (
+    <Switch
+      id="blockSwitch"
+      isChecked={value}
+      labelText="Label"
+      isBlock
+      onChange={setValue}
+    />
+  );
+};
+
+export default BlockSwitch;

packages/terra-switch/tests/jest/__snapshots__/switch.test.jsx.snap

@@ -133,3 +133,72 @@ exports[`Switch should render as disabled when set 1`] = `
   </div>
 </div>
 `;
+
+exports[`Switch should render block switch element when isBlock is specified 1`] = `
+<div
+  aria-checked={false}
+  aria-label="default"
+  className="switch is-enabled is-block"
+  data-terra-switch-show-focus-styles={true}
+  intl={
+    Object {
+      "defaultFormats": Object {},
+      "defaultLocale": "en",
+      "formatDate": [Function],
+      "formatHTMLMessage": [Function],
+      "formatMessage": [Function],
+      "formatNumber": [Function],
+      "formatPlural": [Function],
+      "formatRelative": [Function],
+      "formatTime": [Function],
+      "formats": Object {},
+      "formatters": Object {
+        "getDateTimeFormat": [Function],
+        "getMessageFormat": [Function],
+        "getNumberFormat": [Function],
+        "getPluralFormat": [Function],
+        "getRelativeFormat": [Function],
+      },
+      "locale": "en",
+      "messages": null,
+      "now": [Function],
+      "onError": [Function],
+      "textComponent": "span",
+      "timeZone": null,
+    }
+  }
+  onBlur={[Function]}
+  onClick={[Function]}
+  onKeyDown={[Function]}
+  onMouseDown={[Function]}
+  role="switch"
+  tabIndex="0"
+>
+  <div
+    aria-hidden={true}
+    className="label-container is-block"
+  >
+    <div
+      className="label-text"
+    >
+      default
+    </div>
+    <div
+      className="status-label-text"
+    >
+      <FormattedMessage
+        id="Terra.switch.switchstatuslabel.off"
+        values={Object {}}
+      />
+    </div>
+  </div>
+  <div
+    aria-hidden={true}
+    className="tray"
+  >
+    <div
+      className="slider"
+    />
+  </div>
+</div>
+`;

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(<Switch labelText="default" isBlock />);
+    expect(wrapper.prop('className')).toContain('is-block');
+    expect(wrapper).toMatchSnapshot();
+  });
 });

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