playbook_ui 14.9.0.pre.alpha.PLAY1731inputmasking4927 → 14.9.0.pre.alpha.PLAY16264818

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

@@ -1,120 +0,0 @@
-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

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

data/app/pb_kits/playbook/pb_table/styles/_collapsible.scss

@@ -1,35 +0,0 @@
-@import "../../tokens/colors";
-
-.table_collapsible_side_highlight {
-  border-left: 4px solid $primary;
-  &.dark {
-    border-left: 4px solid $active_dark;
-  }
-}
-
-[class^="pb_table"] {
-  &.table-sm,
-  &.table-md,
-  &.table-lg {
-    &.table-card {
-      tbody,
-      .pb_table_tbody {
-        tr,
-        .pb_table_tr {
-          &.collapsible_table_row {
-            td,
-            .pb_table_td {
-              border-bottom-color: transparent;
-            }
-            &:hover {
-              td,
-              .pb_table_td {
-                border-bottom-color: darken($border_light, 10%);
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-}

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

@@ -1,88 +0,0 @@
-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/inputMask.ts

@@ -1,64 +0,0 @@
-type InputMask = {
-    format: (value: string) => string
-    pattern: string
-    placeholder: string
-}
-
-type InputMaskDictionary = {
-    [key in 'currency' | 'zipCode' | 'postalCode' | 'ssn']: InputMask
-}
-
-const formatCurrency = (value: string): string => {
-    const numericValue = value.replace(/[^0-9]/g, '').slice(0, 15)
-
-    if (!numericValue) return ''
-
-    const dollars = parseFloat((parseInt(numericValue) / 100).toFixed(2))
-    if (dollars === 0) return ''
-
-    return new Intl.NumberFormat('en-US', {
-        style: 'currency',
-        currency: 'USD',
-        maximumFractionDigits: 2,
-    }).format(dollars)
-}
-
-const formatBasicPostal = (value: string): string => {
-    return value.replace(/\D/g, '').slice(0, 5)
-}
-
-const formatExtendedPostal = (value: string): string => {
-    const cleaned = value.replace(/\D/g, '').slice(0, 9)
-    return cleaned.replace(/(\d{5})(?=\d)/, '$1-')
-}
-
-const formatSSN = (value: string): string => {
-    const cleaned = value.replace(/\D/g, '').slice(0, 9)
-    return cleaned
-        .replace(/(\d{5})(?=\d)/, '$1-')
-        .replace(/(\d{3})(?=\d)/, '$1-')
-}
-
-export const INPUTMASKS: InputMaskDictionary = {
-    currency: {
-        format: formatCurrency,
-        // eslint-disable-next-line no-useless-escape
-        pattern: '^\\$\\d{1,3}(?:,\\d{3})*(?:\\.\\d{2})?$',
-        placeholder: '$0.00',
-    },
-    zipCode: {
-        format: formatBasicPostal,
-        pattern: '\\d{5}',
-        placeholder: '12345',
-    },
-    postalCode: {
-        format: formatExtendedPostal,
-        pattern: '\\d{5}-\\d{4}',
-        placeholder: '12345-6789',
-    },
-    ssn: {
-        format: formatSSN,
-        pattern: '\\d{3}-\\d{2}-\\d{4}',
-        placeholder: '123-45-6789',
-    },
-}