RubyGems - playbook_ui - Versions diffs - 13.33.1.pre.alpha.PLAY14143340 → 13.33.1.pre.alpha.play1407statvaluekitinconsistencies3352 - Mend

playbook_ui 13.33.1.pre.alpha.PLAY14143340 → 13.33.1.pre.alpha.play1407statvaluekitinconsistencies3352

Files changed (427) hide show

data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_state.jsx CHANGED Viewed

@@ -1,5 +1,6 @@
 import React from 'react'
-import { Collapsible, useCollapsible, Button } from 'playbook-ui'
+import PropTypes from 'prop-types';
+import { Collapsible, useCollapsible, Button } from '../..'
 const CollapsibleState = (props) => {
   const [isCollapsed, setIsCollapsed] = useCollapsible(true)
@@ -7,6 +8,7 @@ const CollapsibleState = (props) => {
   return (
   <>
     <Button
+        dark={props.dark}
         onClick={() => setIsCollapsed(!isCollapsed)}
         padding="none"
         variant="link"
@@ -17,6 +19,7 @@ const CollapsibleState = (props) => {
     <Collapsible
         collapsed={isCollapsed}
         icon={["plus", "minus"]}
+        iconColor='white'
         padding="none"
     >
       <Collapsible.Main padding="sm"
@@ -35,6 +38,7 @@ const CollapsibleState = (props) => {
     <Collapsible
         collapsed={isCollapsed}
         icon={["plus", "minus"]}
+        iconColor='white'
         padding="none"
     >
       <Collapsible.Main padding="sm"
@@ -53,6 +57,7 @@ const CollapsibleState = (props) => {
     <Collapsible
         collapsed={isCollapsed}
         icon={["plus", "minus"]}
+        iconColor='white'
         padding="none"
     >
         <Collapsible.Main padding="sm"
@@ -72,4 +77,8 @@ const CollapsibleState = (props) => {
   )
 }
+CollapsibleState.propTypes = {
+  dark: PropTypes.bool,
+}
 export default CollapsibleState

data/app/pb_kits/playbook/pb_contact/_contact.tsx CHANGED Viewed

@@ -8,23 +8,23 @@ import Body from '../pb_body/_body'
 import Caption from '../pb_caption/_caption'
 import Icon from '../pb_icon/_icon'
-const contactTypeMap: { [key: string]: string; } = {
+const contactTypeMap: { [key: string]: string } = {
   'cell': 'mobile',
   'email': 'envelope',
+  'extension': 'phone-plus',
   'home': 'phone',
   'work': 'phone-office',
   'work-cell': 'phone-laptop',
   'wrong-phone': 'phone-slash',
-  'extension': 'phone-plus',
 }
 const formatContact = (contactString: string, contactType: string) => {
-  if (contactType == 'email') return contactString
+  if (contactType === 'email') return contactString
   const cleaned = contactString.replace(/\D/g, '')
   const phoneNumber = cleaned.match(/^(1|)?(\d{3})(\d{3})(\d{4})$/)
-  if(contactType == 'extension') {
+  if (contactType === 'extension') {
     return cleaned.match(/^\d{4}$/)
   }
@@ -40,19 +40,20 @@ const formatContact = (contactString: string, contactType: string) => {
       phoneNumber[4],
     ].join('')
   }
   return null
 }
 type ContactProps = {
-  aria?: { [key: string]: string; },
-  className?: string | string[],
-  contactDetail?: string,
-  contactType?: string,
-  contactValue: string,
-  data?: {[key: string]: string},
-  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
-  id?: string,
+  aria?: { [key: string]: string }
+  className?: string | string[]
+  contactDetail?: string
+  contactType?: string
+  contactValue: string
+  data?: { [key: string]: string }
+  dark?: boolean
+  htmlOptions?: { [key: string]: string | number | boolean | (() => void) }
+  id?: string
 }
 const Contact = (props: ContactProps): React.ReactElement => {
@@ -63,8 +64,10 @@ const Contact = (props: ContactProps): React.ReactElement => {
     contactType,
     contactValue,
     data = {},
+    dark = false,
     htmlOptions = {},
-    id } = props
+    id,
+  } = props
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
   const htmlProps = buildHtmlProps(htmlOptions)
@@ -73,6 +76,7 @@ const Contact = (props: ContactProps): React.ReactElement => {
     globalProps(props),
     className
   )
   return (
     <div
         {...ariaProps}
@@ -83,25 +87,27 @@ const Contact = (props: ContactProps): React.ReactElement => {
     >
       <Body
           className="pb_contact_kit"
-          color="light"
+          color={"light"}
+          dark={dark}
           tag="span"
       >
         <Icon
+            dark={dark}
             fixedWidth
             icon={contactTypeMap[contactType] || 'phone'}
         />
         {` ${formatContact(contactValue, contactType)} `}
-        {
-          contactDetail &&
+        {contactDetail && (
           <Caption
+              dark={dark}
               size="xs"
               tag="span"
               text={contactDetail}
           />
-        }
+        )}
       </Body>
     </div>
   )
 }
-export default Contact
+export default Contact

data/app/pb_kits/playbook/pb_contact/contact.html.erb CHANGED Viewed

@@ -2,18 +2,21 @@
   <%= pb_rails("body", props: {
         tag: "span",
         classname: "pb_contact_kit",
-        color: "light"
+        color: "light",
+        dark: object.dark
       }) do %>
     <%= pb_rails("icon", props: {
           icon: object.contact_icon,
-          fixed_width: true
+          fixed_width: true,
+          dark: object.dark
         }) %>
     <%= object.formatted_contact_value if object.contact_value %>
     <%= pb_rails("caption", props: {
           text: object.contact_detail,
           tag: 'span',
-          size: 'xs'
+          size: 'xs',
+          dark: object.dark
         }) if object.contact_detail %>
   <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_contact/docs/_contact_default.jsx CHANGED Viewed

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Date as FormattedDate, Caption, Title } from 'playbook-ui'
+import { Date as FormattedDate, Caption, Title } from '../../'
 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 'playbook-ui'
+// To avoid this bug, please use name spacing as shown in the code examples. ie `import { Date as AliasedComponentName } from '../../'

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -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 CHANGED Viewed

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

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

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

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

@@ -1,5 +1,5 @@
 import { ensureAccessible, renderKit } from '../utilities/test-utils'
-import { DateTimeStacked } from 'playbook-ui'
+import { DateTimeStacked } from '../'
 /* 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 CHANGED Viewed

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

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

@@ -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 CHANGED Viewed

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

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

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

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

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

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

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

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

@@ -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 %>