RubyGems - playbook_ui - Versions diffs - 12.1.0 → 12.2.0 - Mend

playbook_ui 12.1.0 → 12.2.0

Files changed (24) hide show

checksums.yaml CHANGED Viewed

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 637dc98a1badc91927d22a80c40b7dab9ff223d0beef1585f2d588f34aea833d
-  data.tar.gz: 1d95711beb58f0c37cf3dafc98f6c8c38cbd59e6a390290f2574fa612fbcc14e
+  metadata.gz: 74b102cf8c343860ef1b90352dabf96dfa1fee84c9e4912a287e6fe6a32dcabe
+  data.tar.gz: d25cb119dd297fe0512df07650aa237cf5be8eb80f2e79d32480da547c599b2c
 SHA512:
-  metadata.gz: 449796d0443af564166cd7fea3d5b3ec3354553c7263aaf00def68b6bbd809aac65b3dc680034faa04564f79d692c3c11618f78a88fe07fa6dbe79c6c56822a3
-  data.tar.gz: 17c5ef327dec5cd35db9d780af9bc4af5b7a7eb6ec8f474ecce9a726e2b8c89f8bf379c4b07e32b9a776abcf630529faf7fb6d37d558cdde5dadf5c75309adbc
+  metadata.gz: a58a8f1cce99f05841d01f1a3fc64dcfb40121ffea77b1bead4c1cb6b83c2f6edd89a61a62df302452ea0defac80c070484d26fa05024ed36a35139152c56c84
+  data.tar.gz: 17e5d846daf75ea0ba6bb333e2a464910dd18435ed7414c69a60dd07ff9845a9404a1d3b2dd9aa1c46ba49a8d67d9295813272b9b0cb789bbc8cae4cef65c6f1

data/app/pb_kits/playbook/pb_bar_graph/_bar_graph.tsx CHANGED Viewed

@@ -13,7 +13,7 @@ import classnames from "classnames";
 type BarGraphProps = {
   align?: "left" | "right" | "center";
   axisTitle: string;
-  dark?: Boolean;
+  dark?: boolean;
   xAxisCategories: [];
   yAxisMin: number;
   yAxisMax: number;
@@ -62,7 +62,7 @@ const BarGraph = ({
   x = 0,
   y = 0,
   ...props
-}: BarGraphProps) => {
+}: BarGraphProps): React.ReactElement => {
   const ariaProps = buildAriaProps(aria);
   const dataProps = buildDataProps(data);
   const setupTheme = () => {
@@ -130,14 +130,14 @@ const BarGraph = ({
   return (
     <HighchartsReact
-      containerProps={{
-        className: classnames(globalProps(props), className),
-        id: id,
-        ...ariaProps,
-        ...dataProps,
-      }}
-      highcharts={Highcharts}
-      options={options}
+        containerProps={{
+          className: classnames(globalProps(props), className),
+          id: id,
+          ...ariaProps,
+          ...dataProps,
+        }}
+        highcharts={Highcharts}
+        options={options}
     />
   );
 };

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

@@ -136,6 +136,8 @@ const highchartsDarkTheme: ThemeProps = {
   plotOptions: {
     series: {
+      borderColor: colors.bg_dark_card,
+      borderWidth: 2,
       type: 'area',
       nullColor: colors.text_dk_lighter,
       fillColor: {

data/app/pb_kits/playbook/pb_stat_change/_stat_change.tsx ADDED Viewed

@@ -0,0 +1,66 @@
+import React from 'react'
+import classnames from 'classnames'
+import { buildCss } from '../utilities/props'
+import { globalProps } from '../utilities/globalProps'
+import Body from '../pb_body/_body'
+import Icon from '../pb_icon/_icon'
+const statusMap: {neutral: 'neutral', decrease: 'negative' ,increase: 'positive'} = {
+  increase: 'positive',
+  decrease: 'negative',
+  neutral: 'neutral',
+}
+const iconMap = {
+  increase: 'arrow-up',
+  decrease: 'arrow-down',
+}
+type StatChangeProps = {
+  change?: 'increase' | 'decrease' | 'neutral',
+  className?: string,
+  icon?: string,
+  id?: string,
+  value?: string | number,
+}
+const StatChange = (props: StatChangeProps): React.ReactElement => {
+  const { change = 'neutral', className, icon, id, value } = props
+  const status = statusMap[change as keyof typeof statusMap]
+  let returnedIcon = iconMap[change as keyof typeof iconMap]
+  if (icon) {
+    returnedIcon = icon
+  }
+  return (
+    <>
+      {value &&
+        <div
+            className={classnames(
+              buildCss('pb_stat_change_kit', status),
+              globalProps(props),
+              className
+              )}
+            id={id}
+        >
+          <Body status={status}>
+            {returnedIcon &&
+              <>
+                <Icon
+                    fixed_width
+                    icon={returnedIcon}
+                />
+                {' '}
+              </>
+            }
+            {`${value}%`}
+          </Body>
+        </div>
+      }
+    </>
+  )
+}
+export default StatChange

data/app/pb_kits/playbook/pb_stat_change/stat_change.test.js ADDED Viewed

@@ -0,0 +1,41 @@
+import React from 'react'
+import { render, screen } from '../utilities/test-utils'
+import StatChange from './_stat_change'
+test('it renders each status', () => {
+    render(
+      <StatChange
+          change="increase"
+          value="28.4"
+      />
+    )
+    const kit = screen.getByText('28.4%')
+    expect(kit).toHaveClass(`pb_body_kit_positive`)
+})
+test('it renders preset icon', () => {
+    render(
+      <StatChange
+          change="increase"
+          value="28.4"
+      />
+    )
+    const kit = screen.getByLabelText('arrow-up icon')
+    expect(kit).toBeTruthy
+})
+test('it renders custom icon', () => {
+    render(
+      <StatChange
+          icon="chart-line-down"
+          value={6.1}
+      />
+    )
+    const kit = screen.getByLabelText('chart-line-down icon')
+    expect(kit).toBeTruthy
+})

data/app/pb_kits/playbook/pb_stat_value/{_stat_value.jsx → _stat_value.tsx} RENAMED Viewed

@@ -1,5 +1,3 @@
-/* @flow */
 import React from 'react'
 import classnames from 'classnames'
@@ -10,10 +8,10 @@ type StatValueProps = {
   className?: string,
   id?: string,
   unit?: string,
-  value: string | number
+  value: string | number,
 }
-const StatValue = (props: StatValueProps) => {
+const StatValue = (props: StatValueProps): React.ReactElement => {
   const {
     className,
     id,
@@ -21,7 +19,7 @@ const StatValue = (props: StatValueProps) => {
     value = 0,
   } = props
-  const displayValue = function(value) {
+  const displayValue = function(value: string | number) {
     if (value || value === 0) {
       return (
         <Title
@@ -33,7 +31,7 @@ const StatValue = (props: StatValueProps) => {
     }
   }
-  const displayUnit = function(unit) {
+  const displayUnit = function(unit: string) {
     if (unit) {
       return (
         <Title

data/app/pb_kits/playbook/pb_stat_value/docs/_stat_value_unit.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React from 'react'
-import StatValue from '../_stat_value.jsx'
+import StatValue from '../_stat_value'
 const StatValueUnit = (props) => {
   return (

data/app/pb_kits/playbook/pb_stat_value/stat_value.test.js ADDED Viewed

@@ -0,0 +1,27 @@
+import React from 'react'
+import { render, screen } from '../utilities/test-utils'
+import StatValue from './_stat_value'
+test('it renders the component with the value', () => {
+  render(
+    <StatValue
+        value={1048}
+    />
+  )
+  const kit = screen.getByText('1048')
+  expect(kit).toBeTruthy()
+})
+test('it renders the component with the unit', () => {
+  render(
+    <StatValue
+        unit="appt"
+        value="5,294"
+    />
+  )
+  const kit = screen.getByText('appt')
+  expect(kit).toBeTruthy()
+})

data/app/pb_kits/playbook/pb_time_stacked/{_time_stacked.jsx → _time_stacked.tsx} RENAMED Viewed

@@ -1,5 +1,3 @@
-/* @flow */
 import React from 'react'
 import classnames from 'classnames'
@@ -12,16 +10,16 @@ import Caption from '../pb_caption/_caption'
 type TimeStackedProps = {
   align?: 'left' | 'center' | 'right',
-  className?: string | array<string>,
+  className?: string | string[],
   dark?: boolean,
-  data?: object,
+  data?: { [key: string]: string },
   date?: string,
   id?: string,
   time: number | Date,
   timeZone?: string,
 }
-const TimeStackedDefault = (props: TimeStackedProps) => {
+const TimeStackedDefault = (props: TimeStackedProps): React.ReactElement => {
   if (props.date) deprecatedProps('Time Stacked', ['date']) //date prop is deprecated, use time instead
   const {

data/app/pb_kits/playbook/pb_time_stacked/docs/_time_stacked_default.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React from 'react'
-import TimeStacked from '../_time_stacked.jsx'
+import TimeStacked from '../_time_stacked'
 const TimeStackedDefault = (props) => {
   return (

data/app/pb_kits/playbook/pb_time_stacked/docs/index.js CHANGED Viewed

	@@ -1 +1 @@
1	- export { default as TimeStackedDefault } from './_time_stacked_default~~.jsx~~'
1	+ export { default as TimeStackedDefault } from './_time_stacked_default'

data/app/pb_kits/playbook/pb_timestamp/{_timestamp.jsx → _timestamp.tsx} RENAMED Viewed

@@ -1,5 +1,3 @@
-/* @flow */
 import React from 'react'
 import classnames from 'classnames'
@@ -11,8 +9,8 @@ import Caption from '../pb_caption/_caption'
 type TimestampProps = {
   align?: "left" | "center" | "right",
-  aria?: object,
-  className?: string | array<string>,
+  aria?: { [key: string]: string },
+  className?: string | string[],
   dark?: boolean,
   data?: string,
   text: string,
@@ -26,7 +24,7 @@ type TimestampProps = {
   variant?: "default" | "elapsed" | "updated"
 }
-const Timestamp = (props: TimestampProps) => {
+const Timestamp = (props: TimestampProps): React.ReactElement => {
   const {
     align = 'left',
     aria = {},
@@ -90,9 +88,9 @@ const Timestamp = (props: TimestampProps) => {
   const captionText = () => {
     switch (variant) {
     case 'updated':
-      return formatUpdatedString(userDisplay, dateTimestamp)
+      return formatUpdatedString()
     case 'elapsed':
-      return formatElapsedString(userDisplay, timeDisplay, updatedText)
+      return formatElapsedString()
     default:
       return showDate ? timestamp ? fullDateDisplay() : text : fullTimeDisplay()
     }

data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_align.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React from 'react'
-import Timestamp from '../_timestamp.jsx'
+import Timestamp from '../_timestamp'
 const todaysDate = new Date()
 const futureYear = new Date().getFullYear() + 4

data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_default.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React from 'react'
-import Timestamp from '../_timestamp.jsx'
+import Timestamp from '../_timestamp'
 const todaysDate = new Date()
 const futureYear = new Date().getFullYear() + 4

data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_elapsed.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React from 'react'
-import Timestamp from '../_timestamp.jsx'
+import Timestamp from '../_timestamp'
 const todaysDate = new Date()
 const year = new Date().getFullYear()

data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_timezones.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React from 'react'
-import Timestamp from '../_timestamp.jsx'
+import Timestamp from '../_timestamp'
 const todaysDate = new Date()
 const futureYear = new Date().getFullYear() + 4

data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React from 'react'
-import Timestamp from '../_timestamp.jsx'
+import Timestamp from '../_timestamp'
 const todaysDate = new Date()

data/app/pb_kits/playbook/pb_tooltip/_tooltip.tsx CHANGED Viewed

@@ -17,6 +17,7 @@ import Flex from "../pb_flex/_flex"
 type TooltipProps = {
   aria?: { [key: string]: string },
+  className?: string | string[],
   data?: { [key: string]: string },
   text: string,
   icon?: string,
@@ -26,9 +27,10 @@ type TooltipProps = {
   zIndex?: Pick<GlobalProps, "ZIndex">,
 } & GlobalProps
-const Tooltip = (props: TooltipProps) => {
+const Tooltip = (props: TooltipProps): React.ReactElement => {
   const {
     aria = {},
+    className,
     children,
     data = {},
     icon = null,
@@ -42,7 +44,10 @@ const Tooltip = (props: TooltipProps) => {
   const dataProps: { [key: string]: any } = buildDataProps(data)
   const ariaProps: { [key: string]: any } = buildAriaProps(aria)
-  const css = classnames(globalProps({...rest}))
+  const css = classnames(
+    globalProps({...rest}),
+    className
+  )
   const [open, setOpen] = useState(false)
   const arrowRef = useRef(null)
   const {
@@ -92,44 +97,47 @@ const Tooltip = (props: TooltipProps) => {
   return (
     <>
       <div
-        ref={reference}
-        className={`pb_tooltip_kit ${css}`}
-        style={{ display: "inline-flex" }}
-        role="tooltip_trigger"
-        {...ariaProps}
-        {...dataProps}
+          className={`pb_tooltip_kit ${css}`}
+          ref={reference}
+          role="tooltip_trigger"
+          style={{ display: "inline-flex" }}
+          {...ariaProps}
+          {...dataProps}
       >
         {children}
       </div>
       {open && (
         <div
-          {...getFloatingProps({
-            role: "tooltip",
-            ref: floating,
-            className: `tooltip_tooltip ${placement} visible`,
-            style: {
-              position: strategy,
-              top: y ?? 0,
-              left: x ?? 0,
-              zIndex: zIndex ?? 0,
-            },
-          })}
+            {...getFloatingProps({
+              role: "tooltip",
+              ref: floating,
+              className: `tooltip_tooltip ${placement} visible`,
+              style: {
+                position: strategy,
+                top: y ?? 0,
+                left: x ?? 0,
+                zIndex: zIndex ?? 0,
+              },
+            })}
         >
-          <Flex gap="xs" align="center">
+          <Flex
+              align="center"
+              gap="xs"
+          >
             {icon && (
             <i className={`pb_icon_kit far fa-${icon} fa-fw`} />
             )}
             {text}
           </Flex>
           <div
-            ref={arrowRef}
-            className="arrow_bg"
-            style={{
-              position: strategy,
-              left: arrowX != null ? `${arrowX}px` : "",
-              top: arrowY != null ? `${arrowY}px` : "",
-              [staticSide]: "-5px",
-            }}
+              className="arrow_bg"
+              ref={arrowRef}
+              style={{
+                position: strategy,
+                left: arrowX != null ? `${arrowX}px` : "",
+                top: arrowY != null ? `${arrowY}px` : "",
+                [staticSide]: "-5px",
+              }}
           />
         </div>
       )}

data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_default_react.jsx CHANGED Viewed

@@ -14,6 +14,7 @@ const TooltipDefaultReact = (props) => {
    >
     <FlexItem>
       <Tooltip
+          className={"customClassNameHere"}
           placement='top'
           text="Whoa. I'm a Tooltip"
           zIndex={10}

data/app/pb_kits/playbook/pb_tooltip/tooltip.test.jsx CHANGED Viewed

@@ -51,3 +51,17 @@ test("closes on mouseleave", async () => {
     cleanup();
   })
 });
+test("closes on mouseleave", async () => {
+  render(
+    <Tooltip
+        className={"Hello World"}
+        data={{ testid: "className-test" }}
+    />
+  );
+  const kit = screen.getByTestId("className-test");
+  expect(kit).toHaveClass("Hello World");
+  cleanup();
+});

data/app/pb_kits/playbook/tokens/_colors.scss CHANGED Viewed

@@ -59,9 +59,11 @@ $main_colors: (
 Background colors ------------------*/
 $bg_light:            $silver !default;
 $bg_dark:             #0a0527 !default;
+$bg_dark_card:        #231E3D;
 $background_colors: (
   bg_light:           $bg_light,
-  bg_dark:            $bg_dark
+  bg_dark:            $bg_dark,
+  bg_dark_card:       $bg_dark_card
 );
 /* Card colors ------------------*/

data/lib/playbook/version.rb CHANGED Viewed

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 module Playbook
-  PREVIOUS_VERSION = "12.0.0"
-  VERSION = "12.1.0"
+  PREVIOUS_VERSION = "12.1.0"
+  VERSION = "12.2.0"
 end

metadata CHANGED Viewed

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 12.1.0
+  version: 12.2.0
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2023-02-02 00:00:00.000000000 Z
+date: 2023-02-07 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -1812,8 +1812,8 @@ files:
 - app/pb_kits/playbook/pb_star_rating/docs/index.js
 - app/pb_kits/playbook/pb_star_rating/star_rating.html.erb
 - app/pb_kits/playbook/pb_star_rating/star_rating.rb
-- app/pb_kits/playbook/pb_stat_change/_stat_change.jsx
 - app/pb_kits/playbook/pb_stat_change/_stat_change.scss
+- app/pb_kits/playbook/pb_stat_change/_stat_change.tsx
 - app/pb_kits/playbook/pb_stat_change/docs/_description.md
 - app/pb_kits/playbook/pb_stat_change/docs/_stat_change_default.html.erb
 - app/pb_kits/playbook/pb_stat_change/docs/_stat_change_default.jsx
@@ -1826,8 +1826,9 @@ files:
 - app/pb_kits/playbook/pb_stat_change/docs/index.js
 - app/pb_kits/playbook/pb_stat_change/stat_change.html.erb
 - app/pb_kits/playbook/pb_stat_change/stat_change.rb
-- app/pb_kits/playbook/pb_stat_value/_stat_value.jsx
+- app/pb_kits/playbook/pb_stat_change/stat_change.test.js
 - app/pb_kits/playbook/pb_stat_value/_stat_value.scss
+- app/pb_kits/playbook/pb_stat_value/_stat_value.tsx
 - app/pb_kits/playbook/pb_stat_value/docs/_description.md
 - app/pb_kits/playbook/pb_stat_value/docs/_footer.md
 - app/pb_kits/playbook/pb_stat_value/docs/_stat_value_default.html.erb
@@ -1841,6 +1842,7 @@ files:
 - app/pb_kits/playbook/pb_stat_value/docs/index.js
 - app/pb_kits/playbook/pb_stat_value/stat_value.html.erb
 - app/pb_kits/playbook/pb_stat_value/stat_value.rb
+- app/pb_kits/playbook/pb_stat_value/stat_value.test.js
 - app/pb_kits/playbook/pb_table/_table.jsx
 - app/pb_kits/playbook/pb_table/_table.scss
 - app/pb_kits/playbook/pb_table/_table_row.jsx
@@ -1998,8 +2000,8 @@ files:
 - app/pb_kits/playbook/pb_time_range_inline/docs/index.js
 - app/pb_kits/playbook/pb_time_range_inline/time_range_inline.html.erb
 - app/pb_kits/playbook/pb_time_range_inline/time_range_inline.rb
-- app/pb_kits/playbook/pb_time_stacked/_time_stacked.jsx
 - app/pb_kits/playbook/pb_time_stacked/_time_stacked.scss
+- app/pb_kits/playbook/pb_time_stacked/_time_stacked.tsx
 - app/pb_kits/playbook/pb_time_stacked/docs/_time_stacked_default.html.erb
 - app/pb_kits/playbook/pb_time_stacked/docs/_time_stacked_default.jsx
 - app/pb_kits/playbook/pb_time_stacked/docs/example.yml
@@ -2025,8 +2027,8 @@ files:
 - app/pb_kits/playbook/pb_timeline/timeline.html.erb
 - app/pb_kits/playbook/pb_timeline/timeline.rb
 - app/pb_kits/playbook/pb_timestamp/_timestamp-mixins.scss
-- app/pb_kits/playbook/pb_timestamp/_timestamp.jsx
 - app/pb_kits/playbook/pb_timestamp/_timestamp.scss
+- app/pb_kits/playbook/pb_timestamp/_timestamp.tsx
 - app/pb_kits/playbook/pb_timestamp/docs/_description.md
 - app/pb_kits/playbook/pb_timestamp/docs/_footer.md
 - app/pb_kits/playbook/pb_timestamp/docs/_time_stamp_default.md

data/app/pb_kits/playbook/pb_stat_change/_stat_change.jsx DELETED Viewed

@@ -1,63 +0,0 @@
-/* @flow */
-import React from 'react'
-import classnames from 'classnames'
-import { buildCss } from '../utilities/props'
-import { globalProps } from '../utilities/globalProps'
-import Body from '../pb_body/_body'
-import Icon from '../pb_icon/_icon'
-const statusMap = {
-  increase: 'positive',
-  decrease: 'negative',
-}
-const iconMap = {
-  increase: 'arrow-up',
-  decrease: 'arrow-down',
-}
-type StatChangeProps = {
-  change?: "increase" | "decrease" | "neutral",
-  className?: string,
-  icon?: string,
-  id?: string,
-  value?: string | number,
-}
-const StatChange = (props: StatChangeProps) => {
-  const { change = 'neutral', className, icon, id, value } = props
-  const status = statusMap[change] || 'neutral'
-  let returnedIcon = iconMap[change]
-  if (icon) {
-    returnedIcon = icon
-  }
-  return (
-    <If condition={value}>
-      <div
-          className={classnames(
-          buildCss('pb_stat_change_kit', status),
-          globalProps(props),
-          className
-        )}
-          id={id}
-      >
-        <Body status={status}>
-          <If condition={returnedIcon}>
-            <Icon
-                fixed_width
-                icon={returnedIcon}
-            />
-            {' '}
-          </If>
-          {`${value}%`}
-        </Body>
-      </div>
-    </If>
-  )
-}
-export default StatChange