playbook_ui_docs 14.9.0.pre.alpha.play1703errorstatealignment4889 → 14.9.0.pre.alpha.play1703errorstatealignment4991

data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_table.jsx

@@ -0,0 +1,120 @@
+import React from 'react'
+import {Pill, Background, Table, Icon} from "playbook-ui"
+
+const TableWithCollapsibleWithNestedTable = (props) => {
+
+  const Content = () => {
+    return (
+        <Table 
+            borderRadius="none"
+            container={false} 
+            size="sm"
+            {...props}
+        >
+          <Table.Head>
+            <Background
+                tag="tr" 
+                {...props}
+            >
+              <Table.Header>{"Alt Header"}</Table.Header>
+              <Table.Header>{"Alt Header"}</Table.Header>
+              <Table.Header>{"Alt Header"}</Table.Header>
+              <Table.Header>{"Alt Header"}</Table.Header>
+            </Background>
+          </Table.Head>
+          <Table.Body>
+            <Table.Row>
+              <Table.Cell>{"Expanded"}</Table.Cell>
+              <Table.Cell>{"Expanded"}</Table.Cell>
+              <Table.Cell>{"Expanded"}</Table.Cell>
+              <Table.Cell>
+                  <Pill text="Pill" 
+                      variant="primary"
+                      {...props}
+                  />
+              </Table.Cell>
+            </Table.Row>
+            <Table.Row>
+              <Table.Cell>{"Expanded"}</Table.Cell>
+              <Table.Cell>{"Expanded"}</Table.Cell>
+              <Table.Cell>{"Expanded"}</Table.Cell>
+              <Table.Cell>
+                  <Pill text="Pill" 
+                      variant="primary"
+                      {...props}
+                  />
+              </Table.Cell>
+            </Table.Row>
+            <Table.Row>
+              <Table.Cell>{"Expanded"}</Table.Cell>
+              <Table.Cell>{"Expanded"}</Table.Cell>
+              <Table.Cell>{"Expanded"}</Table.Cell>
+              <Table.Cell>
+                  <Pill text="Pill" 
+                      variant="primary"
+                      {...props}
+                  />
+              </Table.Cell>
+            </Table.Row>
+          </Table.Body>
+        </Table>
+    );
+  };
+
+    return (
+    <Table
+        size="sm"
+        {...props}
+    >
+      <Table.Head>
+        <Table.Row>
+          <Table.Header>{'Column 1'}</Table.Header>
+          <Table.Header>{'Column 2'}</Table.Header>
+          <Table.Header>{'Column 3'}</Table.Header>
+          <Table.Header>{'Column 4'}</Table.Header>
+          <Table.Header>{'Column 5'}</Table.Header>
+          <Table.Header>{''}</Table.Header>
+        </Table.Row>
+
+      </Table.Head>
+      <Table.Body>
+        <Table.Row collapsible 
+            collapsibleContent={<Content/>}
+            collapsibleSideHighlight={false}
+        >
+          <Table.Cell>{'Value 1'}</Table.Cell>
+          <Table.Cell>{'Value 2'}</Table.Cell>
+          <Table.Cell>{'Value 3'}</Table.Cell>
+          <Table.Cell>{'Value 4'}</Table.Cell>
+          <Table.Cell>{'Value 5'}</Table.Cell>
+          <Table.Cell textAlign="right">{ 
+            <Icon
+                color="primary"
+                fixedWidth
+                icon="chevron-down"
+            />}
+          </Table.Cell>
+
+        </Table.Row>
+        <Table.Row>
+          <Table.Cell>{'Value 1'}</Table.Cell>
+          <Table.Cell>{'Value 2'}</Table.Cell>
+          <Table.Cell>{'Value 3'}</Table.Cell>
+          <Table.Cell>{'Value 4'}</Table.Cell>
+          <Table.Cell>{'Value 5'}</Table.Cell>
+          <Table.Cell>{''}</Table.Cell>
+        </Table.Row>
+        <Table.Row>
+          <Table.Cell>{'Value 1'}</Table.Cell>
+          <Table.Cell>{'Value 2'}</Table.Cell>
+          <Table.Cell>{'Value 3'}</Table.Cell>
+          <Table.Cell>{'Value 4'}</Table.Cell>
+          <Table.Cell>{'Value 5'}</Table.Cell>
+          <Table.Cell>{''}</Table.Cell>
+        </Table.Row>
+      </Table.Body>
+    </Table>
+  )
+}
+
+export default TableWithCollapsibleWithNestedTable

data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_table.md

@@ -0,0 +1 @@
+The `collapsibleContent` can also be used to display nested Tables within each Row. 

data/app/pb_kits/playbook/pb_table/docs/example.yml

@@ -55,3 +55,8 @@ examples:
     - table_with_subcomponents: Table with Sub Components (Table Elements)
     - table_with_subcomponents_as_divs: Table with Sub Components (Divs)
     - table_outer_padding: Outer Padding
+    - table_with_collapsible: Table with Collapsible
+    - table_with_collapsible_with_custom_click: Table with Collapsible with Custom Click
+    - table_with_collapsible_with_custom_content: Table with Collapsible with Custom Content
+    - table_with_collapsible_with_nested_rows: Table with Collapsible with Nested Rows
+    - table_with_collapsible_with_nested_table: Table with Collapsible with Nested Table

data/app/pb_kits/playbook/pb_table/docs/index.js

@@ -26,3 +26,8 @@ export { default as TableWithSubcomponents } from './_table_with_subcomponents.j
 export { default as TableWithSubcomponentsAsDivs } from './_table_with_subcomponents_as_divs.jsx'
 export { default as TableOuterPadding } from './_table_outer_padding.jsx'
 export { default as TableStickyLeftColumns } from './_table_sticky_left_columns.jsx'
+export { default as TableWithCollapsible } from './_table_with_collapsible.jsx'
+export { default as TableWithCollapsibleWithCustomContent } from './_table_with_collapsible_with_custom_content.jsx'
+export { default as TableWithCollapsibleWithNestedTable } from './_table_with_collapsible_with_nested_table.jsx'
+export { default as TableWithCollapsibleWithNestedRows } from './_table_with_collapsible_with_nested_rows.jsx'
+export { default as TableWithCollapsibleWithCustomClick } from './_table_with_collapsible_with_custom_click.jsx'

data/app/pb_kits/playbook/pb_text_input/docs/_text_input_mask.jsx

@@ -0,0 +1,88 @@
+import React, { useState } from 'react'
+
+import Caption from '../../pb_caption/_caption'
+import TextInput from '../../pb_text_input/_text_input'
+import Title from '../../pb_title/_title'
+
+const TextInputMask = (props) => {
+  const [ssn, setSSN] = useState('')
+  const handleOnChangeSSN = ({ target }) => {
+    setSSN(target.value)
+  }
+  const ref = React.createRef()
+
+  const [formFields, setFormFields] = useState({
+    currency: '',
+    zipCode: '',
+    postalCode: '',
+    ssn: '',
+  })
+
+  const handleOnChangeFormField =  ({ target }) => {
+    const { name, value } = target
+    setFormFields({ ...formFields, [name]: value })
+  }
+
+  return (
+    <div>
+      <TextInput
+          label="Currency"
+          mask="currency"
+          name="currency"
+          onChange={handleOnChangeFormField}
+          value={formFields.currency}
+          {...props}
+      />
+      <TextInput
+          label="Zip Code"
+          mask="zipCode"
+          name="zipCode"
+          onChange={handleOnChangeFormField}
+          value={formFields.zipCode}
+          {...props}
+      />
+      <TextInput
+          label="Postal Code"
+          mask="postalCode"
+          name="postalCode"
+          onChange={handleOnChangeFormField}
+          value={formFields.postalCode}
+          {...props}
+      />
+      <TextInput
+          label="SSN"
+          mask="ssn"
+          name="ssn"
+          onChange={handleOnChangeFormField}
+          value={formFields.ssn}
+          {...props}
+      />
+
+      <br />
+      <br />
+
+      <Title>{'Event Handler Props'}</Title>
+
+      <br />
+      <Caption>{'onChange'}</Caption>
+
+      <br />
+
+      <TextInput
+          label="SSN"
+          mask="ssn"
+          onChange={handleOnChangeSSN}
+          placeholder="Enter SSN"
+          ref={ref}
+          value={ssn}
+          {...props}
+      />
+
+      {ssn !== '' && (
+        <React.Fragment>{`SSN is: ${ssn}`}</React.Fragment>
+      )}
+    </div>
+  )
+}
+
+export default TextInputMask

data/app/pb_kits/playbook/pb_text_input/docs/example.yml

@@ -16,6 +16,7 @@ examples:
   - text_input_add_on: Add On
   - text_input_inline: Inline
   - text_input_no_label: No Label
+  - text_input_mask: Mask
 
   swift:
     - text_input_default_swift: Default

data/app/pb_kits/playbook/pb_text_input/docs/index.js

@@ -5,3 +5,4 @@ export { default as TextInputDisabled } from './_text_input_disabled.jsx'
 export { default as TextInputAddOn } from './_text_input_add_on.jsx'
 export { default as TextInputInline } from './_text_input_inline.jsx'
 export { default as TextInputNoLabel } from './_text_input_no_label.jsx'
+export { default as TextInputMask } from './_text_input_mask.jsx'