playbook_ui 13.33.1 → 13.34.0.pre.alpha.PLAY14143357

data/app/pb_kits/playbook/pb_contact/docs/_contact_with_detail.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Contact } from '../../'
+import { Contact } from 'playbook-ui'
 
 const ContactDefault = (props) => {
   return (

data/app/pb_kits/playbook/pb_currency/docs/_currency_unstyled.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Currency, Title } from '../..'
+import { Currency, Title } from 'playbook-ui'
 
 const CurrencyUnstyled = (props) => {
   return (

data/app/pb_kits/playbook/pb_dashboard/commonSettings.js

@@ -1,5 +1,5 @@
-import colors from '../tokens/exports/_colors.scss'
-import typography from '../tokens/exports/_typography.scss'
+import colors from '../tokens/exports/_colors.module.scss'
+import typography from '../tokens/exports/_typography.module.scss'
 
 const dataColors = [
   colors.data_1,

data/app/pb_kits/playbook/pb_dashboard/pbChartsColorsHelper.ts

@@ -1,4 +1,4 @@
-import colors from "../tokens/exports/_colors.scss";
+import colors from "../tokens/exports/_colors.module.scss";
 
 
 // Map Data Color String Props to our SCSS Variables

data/app/pb_kits/playbook/pb_dashboard/pbChartsDarkTheme.ts

@@ -1,5 +1,5 @@
-import colors from '../tokens/exports/_colors.scss'
-import typography from '../tokens/exports/_typography.scss'
+import colors from '../tokens/exports/_colors.module.scss'
+import typography from '../tokens/exports/_typography.module.scss'
 
 import { ThemeProps } from './themeTypes'
 

data/app/pb_kits/playbook/pb_dashboard/pbChartsLightTheme.ts

@@ -1,5 +1,5 @@
-import colors from '../tokens/exports/_colors.scss'
-import typography from '../tokens/exports/_typography.scss'
+import colors from '../tokens/exports/_colors.module.scss'
+import typography from '../tokens/exports/_typography.module.scss'
 
 import { ThemeProps } from './themeTypes'
 

data/app/pb_kits/playbook/pb_dashboard_value/dashboardValueSettings.ts

@@ -1,5 +1,5 @@
-import colors from '../tokens/exports/_colors.scss'
-import typography from '../tokens/exports/_typography.scss'
+import colors from '../tokens/exports/_colors.module.scss'
+import typography from '../tokens/exports/_typography.module.scss'
 
 const pbIndicator = {
   title: {

data/app/pb_kits/playbook/pb_date/docs/_date_alignment.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Date as FormattedDate } from '../..'
+import { Date as FormattedDate } from 'playbook-ui'
 
 const DateAlignment = (props) => {
   return (

data/app/pb_kits/playbook/pb_date/docs/_date_default.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Date as FormattedDate, Caption, Title } from '../../'
+import { Date as FormattedDate, Caption, Title } from 'playbook-ui'
 
 const DateDefault = (props) => {
   return (
@@ -80,4 +80,4 @@ const DateDefault = (props) => {
 export default DateDefault
 
 // *Development Note* -  We are reviewing this kit for a potential name change due to naming collisions when `new Date()` is used.
-// To avoid this bug, please use name spacing as shown in the code examples. ie `import { Date as AliasedComponentName } from '../../'
+// To avoid this bug, please use name spacing as shown in the code examples. ie `import { Date as AliasedComponentName } from 'playbook-ui'

data/app/pb_kits/playbook/pb_date/docs/_date_unstyled.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Caption, Date as FormattedDate, Title } from '../../'
+import { Caption, Date as FormattedDate, Title } from 'playbook-ui'
 
 const DateUnstyled = (props) => {
   return (

data/app/pb_kits/playbook/pb_date/docs/_date_variants.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Date as FormattedDate } from '../..'
+import { Date as FormattedDate } from 'playbook-ui'
 
 const DateVariants = (props) => {
   return (

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_on_change.jsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import { DatePicker, LabelValue } from '../..'
+import { DatePicker, LabelValue } from 'playbook-ui'
 
 const DatePickerOnChange = (props) => {
   const today = new Date()

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_on_close.jsx

@@ -1,6 +1,6 @@
 /* eslint-disable react/no-multi-comp */
 import React, { useState } from 'react'
-import { DatePicker,LabelValue } from '../..'
+import { DatePicker,LabelValue } from 'playbook-ui'
 
 
 const DatePickerOnClose = (props) => {

data/app/pb_kits/playbook/pb_date_picker/sass_partials/_input_styles.scss

@@ -41,7 +41,7 @@
   &.error {
     .date_picker_input_wrapper {
       [class*=pb_body_kit] {
-        margin-top: $space_xs / 2;
+        margin-top: calc($space_xs / 2);
       }
 
       input,

data/app/pb_kits/playbook/pb_date_picker/sass_partials/_overrides.scss

@@ -1,15 +1,13 @@
 @media (min-width: 500px) {
   .flatpickr-calendar {
     padding: $space_xs;
-    // width: 323.88px;
   }
   .dayContainer {
     width: 315.88px
   }
   .flatpickr-months {
-    margin-left: $space_xs / 4;
-    margin-top: $space_xs / 3;
-    // width: 323.88px;
+    margin-left: calc($space_xs / 4);
+    margin-top: calc($space_xs / 3);
   }
 }
 @media (max-width: 499px) {

data/app/pb_kits/playbook/pb_date_range_inline/_date_range_inline.scss

@@ -21,14 +21,14 @@
     display: flex;
     align-items: center;
     [class*=pb_date_range_inline_arrow] {
-      margin-left: $space_xs/2;
-      margin-right: $space_xs/2;
+      margin-left: calc($space_xs/2);
+      margin-right: calc($space_xs/2);
     }
     [class*=pb_date_range_inline_timezone] {
-      margin-left: $space_xs/2;
+      margin-left: calc($space_xs/2);
     }
     [class*=pb_date_range_inline_icon] {
-      margin-right: $space_xs/2;
+      margin-right: calc($space_xs/2);
     }
   }
 }

data/app/pb_kits/playbook/pb_date_range_inline/_date_range_inline.tsx

@@ -10,16 +10,16 @@ import Caption from "../pb_caption/_caption";
 import Icon from "../pb_icon/_icon";
 
 type DateRangeInlineProps = {
-  className?: string;
-  id?: string;
-  data?: string;
   align?: "left" | "center" | "vertical";
-  size?: "sm" | "xs";
+  className?: string;
   dark?: boolean;
-  htmlOptions?: {[key: string]: string | number | boolean | (() => any)};
+  data?: string;
+  endDate?: Date;
+  htmlOptions?: { [key: string]: string | number | boolean | (() => any) };
   icon?: boolean;
+  id?: string;
+  size?: "sm" | "xs";
   startDate?: Date;
-  endDate?: Date;
 };
 
 const dateTimestamp = (dateValue: Date, includeYear: boolean) => {
@@ -36,59 +36,36 @@ const dateTimeIso = (dateValue: Date) => {
 
 const DateRangeInline = (props: DateRangeInlineProps): React.ReactElement => {
   const {
-    icon = false,
-    dark = false,
-    size = "sm",
     align = "left",
+    className,
+    dark = false,
     data = {},
+    endDate,
     htmlOptions = {},
+    icon = false,
+    size = "sm",
     startDate,
-    endDate,
-    className,
   } = props;
 
-  const iconContent = () => {
-    return (
-      <>
-        {icon && (
-          <>
-            <Body color="light"
-                key={Math.random()}
-                tag="span"
-            >
-              <Icon
-                  className="pb_date_range_inline_icon"
-                  dark={dark}
-                  fixedWidth
-                  icon="calendar-alt"
-                  size={size}
-                  tag="span"
-              />
-            </Body>
-          </>
-        )}
-      </>
-    );
-  };
-
   const dateInCurrentYear = () => {
     const currentDate = new Date();
     return (
-      startDate.getFullYear() == endDate.getFullYear() &&
-      startDate.getFullYear() == currentDate.getFullYear()
+      startDate?.getFullYear() === endDate?.getFullYear() &&
+      startDate?.getFullYear() === currentDate.getFullYear()
     );
   };
 
   const dateRangeClasses = buildCss("pb_date_range_inline_kit", align);
-  const dataProps = buildDataProps(data)
-  const htmlProps = buildHtmlProps(htmlOptions)
+  const dataProps = buildDataProps(data);
+  const htmlProps = buildHtmlProps(htmlOptions);
+  
   const renderTime = (date: Date) => {
     return (
       <time dateTime={dateTimeIso(date)}>
         {dateInCurrentYear() ? (
-          <>{` ${dateTimestamp(date, false)} `}</>
+          ` ${dateTimestamp(date, false)} `
         ) : (
-          <>{` ${dateTimestamp(date, true)} `}</>
+          ` ${dateTimestamp(date, true)} `
         )}
       </time>
     );
@@ -101,53 +78,83 @@ const DateRangeInline = (props: DateRangeInlineProps): React.ReactElement => {
         className={classnames(dateRangeClasses, globalProps(props), className)}
     >
       <div className="pb_date_range_inline_wrapper">
-        {size == "xs" && (
+        {size === "xs" && (
           <>
-            {iconContent()}
-            <Caption dark={dark}
-                tag="span"
-            >
+            {icon && (
+              <Caption 
+                  dark={dark} 
+                  tag="span">
+                <Icon
+                    className="pb_date_range_inline_icon"
+                    dark={dark}
+                    fixedWidth
+                    icon="calendar-alt"
+                    size={size}
+                    tag="span"
+                />
+              </Caption>
+            )}
+            <Caption 
+                dark={dark} 
+                tag="span">
               {renderTime(startDate)}
             </Caption>
-            <Caption dark={dark}
-                tag="span"
-            >
+            <Caption 
+                dark={dark} 
+                tag="span">
               <Icon
                   className="pb_date_range_inline_arrow"
+                  dark={dark}
                   fixedWidth
                   icon="long-arrow-right"
+                  tag="span"
               />
             </Caption>
-            <Caption dark={dark}
-                tag="span"
-            >
+            <Caption 
+                dark={dark} 
+                tag="span">
               {renderTime(endDate)}
             </Caption>
           </>
         )}
 
-        {size == "sm" && (
+        {size === "sm" && (
           <>
-            {iconContent()}
-            <Body dark={dark}
-                tag="span"
-            >
+            {icon && (
+              <Body 
+                  color={"light"} 
+                  dark={dark}
+                  tag="span">
+                <Icon
+                    className="pb_date_range_inline_icon"
+                    dark={dark}
+                    fixedWidth
+                    icon="calendar-alt"
+                    size={size}
+                    tag="span"
+                />
+              </Body>
+            )}
+            <Body 
+                dark={dark} 
+                tag="span">
               {renderTime(startDate)}
             </Body>
-            <Body color="light"
-                dark={dark}
-                tag="span"
-            >
+            <Body 
+                color={"light"} 
+                dark={dark} 
+                tag="span">
               <Icon
                   className="pb_date_range_inline_arrow"
                   dark={dark}
                   fixedWidth
                   icon="long-arrow-right"
+                  tag="span"
               />
             </Body>
-            <Body dark={dark}
-                tag="span"
-            >
+            <Body 
+                dark={dark} 
+                tag="span">
               {renderTime(endDate)}
             </Body>
           </>

data/app/pb_kits/playbook/pb_date_range_stacked/docs/_date_range_stacked_default.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { DateRangeStacked } from '../../'
+import { DateRangeStacked } from 'playbook-ui'
 
 const DateRangeStackedDefault = (props) => (
   <div>

data/app/pb_kits/playbook/pb_date_time_stacked/_date_time_stacked.scss

@@ -1,11 +1,11 @@
 [class^=pb_date_time_stacked] {
 
   [class^=padding_month] {
-    padding-bottom: ($space_xs + 2) !important;
+    padding-bottom: calc($space_xs + 2px) !important;
     }
 
   [class^=padding_day] {
-    padding-bottom: ($space_xs + 2) !important;
+    padding-bottom: calc($space_xs + 2px) !important;
   }
 
   &[class*=_dark] {
@@ -19,7 +19,7 @@
 
 }
 .date-time-padding {
-  padding-right: ($space_xs / 2);
-  padding-left: ($space_xs / 2);
+  padding-right: calc($space_xs / 2);
+  padding-left: calc($space_xs / 2);
 }
 

data/app/pb_kits/playbook/pb_date_time_stacked/date_time_stacked.test.js

@@ -1,5 +1,5 @@
 import { ensureAccessible, renderKit } from '../utilities/test-utils'
-import { DateTimeStacked } from '../'
+import { DateTimeStacked } from 'playbook-ui'
 
 /* eslint-disable jsx-control-statements/jsx-jcs-no-undef */
 const currentDate = new Date()

data/app/pb_kits/playbook/pb_date_year_stacked/docs/_date_year_stacked_default.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { DateYearStacked } from '../../'
+import { DateYearStacked } from 'playbook-ui'
 
 const DateYearStackedDefault = (props) => {
   return (

data/app/pb_kits/playbook/pb_detail/detail.html.erb

@@ -1,8 +1,3 @@
-<%= content_tag(object.tag,
-    aria: object.aria,
-    class: object.classname,
-    data: object.data,
-    id: object.id,
-    **combined_html_options) do %>
+<%= pb_content_tag(object.tag) do %>
   <%= object.content %>
 <% end %>

data/app/pb_kits/playbook/pb_detail/docs/_detail_bold.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Detail } from '../..'
+import { Detail } from 'playbook-ui'
 
 const DetailBold = (props) => (
   <div>

data/app/pb_kits/playbook/pb_detail/docs/_detail_colors.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Detail } from '../..'
+import { Detail } from 'playbook-ui'
 
 const DetailColors = (props) => (
   <div>

data/app/pb_kits/playbook/pb_detail/docs/_detail_default.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Detail } from '../..'
+import { Detail } from 'playbook-ui'
 
 const DetailDefault = (props) => (
   <div>

data/app/pb_kits/playbook/pb_detail/docs/_detail_styled.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Detail } from '../..'
+import { Detail } from 'playbook-ui'
 
 const DetailStyled = (props) => (
   <>

data/app/pb_kits/playbook/pb_dialog/dialog.html.erb

@@ -1,10 +1,5 @@
 <div class="pb_dialog_wrapper_rails <%= object.full_height_style %>" data-overlay-click= <%= object.overlay_close %> >
-    <%= content_tag(:dialog,
-        aria: object.aria,
-        data: object.data,
-        id: object.id,
-        class: object.classname,
-        **combined_html_options) do %>
+    <%= pb_content_tag(:dialog) do %>
             <% if object.status === "" && object.title %>
                 <%= pb_rails("dialog/dialog_header", props: { title: object.title, id: object.id }) %>
             <% end %>

data/app/pb_kits/playbook/pb_dialog/dialog.test.jsx

@@ -1,6 +1,6 @@
 import React, {useState} from 'react'
 import { render, cleanup, waitFor, fireEvent } from "../utilities/test-utils";
-import { Dialog, Button } from '../'
+import { Dialog, Button } from 'playbook-ui'
 
 const text="Hello Body Text, Nice to meet ya."
 const title="Header Title is the Title Prop"

data/app/pb_kits/playbook/pb_dialog/dialog_body.html.erb

@@ -1,8 +1,3 @@
-<%= content_tag(:div,
-    id: object.id,
-    data: object.data,
-    class: object.classname,
-    aria: object.aria,
-    **combined_html_options) do %>
+<%= pb_content_tag do %>
         <%= content.presence || object.text %>
 <% end %>

data/app/pb_kits/playbook/pb_dialog/dialog_footer.html.erb

@@ -1,8 +1,5 @@
-<%= content_tag(:div,
-    id: object.id,
-    data: object.data,
-    aria: object.aria,
-    **combined_html_options) do %>
+<%= pb_content_tag(:div, class: "") do %>
+  <%  'excluded classname?'  %>
     <% if object.confirm_button && object.cancel_button %>
         <div class="dialog-pseudo-footer"></div>
         <%= pb_rails("flex", props: { classname:object.classname, spacing:"between", padding_x:"sm", padding:"sm", padding_bottom:"sm" }) do %>

data/app/pb_kits/playbook/pb_dialog/dialog_header.html.erb

@@ -1,9 +1,4 @@
-<%= content_tag(:div,
-    id: object.id,
-    data: object.data,
-    class: object.sticky_header,
-    aria: object.aria,
-    **combined_html_options) do %>
+<%= pb_content_tag(:div, class: object.sticky_header) do %>
         <%= pb_rails("flex", props: {classname:object.classname, spacing:"between", padding:"sm", align:"center"}) do %>
             <%= content.presence || object.title %>
 

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_compound_components.jsx

@@ -6,7 +6,7 @@ import {
   Dialog,
   RichTextEditor,
   Typeahead,
-} from '../../'
+} from 'playbook-ui'
 
 const DialogCompound = () => {
   const [isOpen, setIsOpen] = useState(false)

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_default.jsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import { Button, Dialog } from '../../'
+import { Button, Dialog } from 'playbook-ui'
 
 const DialogDefault = () => {
   const [isOpen, setIsOpen] = useState(false)

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_full_height.jsx

@@ -7,7 +7,7 @@ import {
   Flex,
   RichTextEditor,
   Typeahead,
-} from "../..";
+} from "playbook-ui";
 
 const useDialog = (visible = false) => {
   const [opened, setOpened] = useState(visible);

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_full_height_placement.jsx

@@ -7,7 +7,7 @@ import {
   Flex,
   RichTextEditor,
   Typeahead,
-} from "../..";
+} from "playbook-ui";
 
 const useDialog = (visible = false) => {
   const [opened, setOpened] = useState(visible);

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_scrollable.jsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import { Button, Dialog } from '../../'
+import { Button, Dialog } from 'playbook-ui'
 
 const DialogScrollable = () => {
 

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_separators.jsx

@@ -1,7 +1,5 @@
-/* @flow */
-
 import React, { useState } from 'react'
-import { Button, Dialog, Flex } from '../../'
+import { Button, Dialog, Flex } from 'playbook-ui'
 
 const useDialog = (visible = false) => {
   const [opened, setOpened] = useState(visible)

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_should_close_on_overlay.jsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import { Button, Dialog } from '../../'
+import { Button, Dialog } from 'playbook-ui'
 
 const DialogShouldCloseOnOverlay = () => {
   const [isOpen, setIsOpen] = useState(false)

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_sizes.jsx

@@ -1,7 +1,6 @@
-/* @flow */
 
 import React, { useState } from 'react'
-import { Button, Dialog, Flex } from '../../'
+import { Button, Dialog, Flex } from 'playbook-ui'
 
 const useDialog = (visible = false) => {
   const [opened, setOpened] = useState(visible)

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_stacked_alert.jsx

@@ -1,6 +1,6 @@
 /* eslint-disable react/jsx-handler-names */
 import React, { useState } from "react"
-import { Button, Dialog, Flex} from "../.."
+import { Button, Dialog, Flex} from "playbook-ui"
 
 const useDialog = (visible = false) => {
   const [opened, setOpened] = useState(visible)