playbook_ui 14.9.0.pre.alpha.play17004992 → 14.9.0.pre.rc.0

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_table/styles/_scroll.scss

@@ -1,4 +0,0 @@
-    .table-responsive-scroll {
-        display: block;
-        overflow-x: auto;
-    }

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

@@ -1,18 +0,0 @@
-@import "../../tokens/colors";
-
-[class^="pb_table"] {
-    .sticky {
-        position: sticky !important;
-        left: 0;
-        z-index: 1;
-        background-color: white;
-    }
-
-    .with-border {
-        border-right: 1px solid $border_light !important;
-    }
-
-    .sticky-shadow {
-        box-shadow: 4px 0 10px rgba(60, 106, 172, 0.16) !important;
-    }
-}

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',
-    },
-} 

data/app/pb_kits/playbook/tokens/_height.scss

@@ -1,19 +0,0 @@
-
-$height_auto: auto !default;
-$height_xs: 320px !default;
-$height_sm: 480px !default;
-$height_md: 768px !default;
-$height_lg: 1024px !default;
-$height_xl: 1280px !default;
-$height_2xl: 1440px !default;
-$height_3xl: 1920px !default;
-$heights: (
-  height_auto: $height_auto,
-  height_xs: $height_xs,
-  height_sm: $height_sm,
-  height_md: $height_md,
-  height_lg: $height_lg,
-  height_xl: $height_xl,
-  height_xxl: $height_2xl,
-  height_xxxl: $height_3xl
-);

data/app/pb_kits/playbook/tokens/exports/_height.module.scss

@@ -1,37 +0,0 @@
-@import "../height";
-
-:export {
-  @mixin export_height($height_list) {
-    @each $name, $value in $height_list {
-      .#{$name} {
-        height: $value;
-      }
-    }
-  }
-
-  @include export_height($heights);
-}
-
-:export {
-  @mixin export_max_height($height_list) {
-    @each $name, $value in $height_list {
-      .max_#{$name} {
-        max-height: $value;
-      }
-    }
-  }
-
-  @include export_max_height($heights);
-}
-
-:export {
-  @mixin export_min_height($height_list) {
-    @each $name, $value in $height_list {
-      .min_#{$name} {
-        min-height: $value;
-      }
-    }
-  }
-
-  @include export_min_height($heights);
-}

data/app/pb_kits/playbook/utilities/_height.scss

@@ -1,33 +0,0 @@
-@import "../tokens/exports/height.module";
-
-@mixin export_height($height_list) {
-  @each $name, $value in $height_list {
-    .#{$name} {
-      height: $value;
-    }
-  }
-}
-
-@mixin export_max_height($height_list) {
-  @each $name, $value in $height_list {
-    .max_#{$name} {
-      max-height: $value;
-    }
-  }
-}
-
-@mixin export_min_height($height_list) {
-  @each $name, $value in $height_list {
-    .min_#{$name} {
-      min-height: $value;
-    }
-  }
-}
-
-@include export_height($heights);
-@include export_max_height($heights);
-@include export_min_height($heights);
-
-.height-resize {
-  resize: vertical;
-}

data/app/pb_kits/playbook/utilities/_width.scss

@@ -1,45 +0,0 @@
-@import "../tokens/container";
-
-.width_none {
-  width: none;
-}
-
-.width_0 {
-  width: map-get($containers, 'none');
-}
-
-.width_0_percent {
-  width: map-get($containers, 'none');
-}
-
-.width_xxs {
-  width: $container_xxs;
-}
-
-.width_xs {
-  width: $container_xs;
-}
-
-.width_sm {
-  width: $container_sm;
-}
-
-.width_md {
-  width: $container_md;
-}
-
-.width_lg {
-  width: $container_lg;
-}
-
-.width_xl {
-  width: $container_xl;
-}
-
-.width_xxl {
-  width: $container_xxl;
-}
-
-.width_100_percent {
-  width: $container_100;
-}