playbook_ui 12.8.0 → 12.9.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: e61686e64326d8bafc8d5026acff177fcd2667833ab25ca2f33f86b6841e1d4f
-  data.tar.gz: b729d6e415dd1d43c15c95071d7829c34e83174847bc4e43249f878f3c7528f3
+  metadata.gz: d54aec3679094e4791b7db4d872da00502f1acc507ca01c5a9fef896198ba177
+  data.tar.gz: f53ca38f7afc809696e91d76b9f689cd06d9cde9dffec33b2c190a4b6f4d9e29
 SHA512:
-  metadata.gz: b68af3a28e10aeffe6a12b2840d4081181de02f844e221c49e233f26003680bddb3eca5a99b9419346e67e8f3a63563ed1ddb294db6ac4c0cad65d25888fa082
-  data.tar.gz: 5ec07a544011a23e8987157f8b693d71e64b62ea5a03ec16dc5b4779bab8d66c04c32af75fbba60ed7f0bf8a1a7d54d461971368a779f4b21a531a1dc604cd03
+  metadata.gz: 320612793bc0c3514229b1b91fd4b4d4f00af1e6c7768d2ce39fdfb5068099f15bc2b54eafea487257435fcc9e5f0e2e542ab2c98c0868703d8c6ce6e6635746
+  data.tar.gz: 026d43d85426caad4497c0a44456ed005e8392911f493c6e0677eb0906d7f74e93acdea1a4f3003973ca949194d04a7f9d4f099298a903b6a27c531eaaad5d7b

data/app/pb_kits/playbook/_playbook.scss

@@ -90,6 +90,7 @@
 @import 'pb_title_detail/title_detail';
 @import 'pb_toggle/toggle';
 @import 'pb_tooltip/tooltip';
+@import 'pb_treemap_chart/treemap_chart';
 @import 'pb_typeahead/typeahead';
 @import 'pb_user/user';
 @import 'pb_user_badge/user_badge';

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

@@ -5,6 +5,7 @@ import { ThemeProps } from './themeTypes'
 
 import Highcharts from 'highcharts'
 
+const pbButtonHoverColor = '#004ebb'
 const highchartsDarkTheme: ThemeProps = {
   lang: {
     thousandsSep: ',',
@@ -227,8 +228,29 @@ const highchartsDarkTheme: ThemeProps = {
         },
       ],
       traverseUpButton: {
-        position: { y: -40 },
-      }
+        position: { y: -50 },
+        text: '< Back',
+        theme: {
+          r: 4,
+          states: {
+            hover: {
+              style: {
+                fill: pbButtonHoverColor,
+              },
+            },
+          },
+          style: {
+            fill: colors.royal,
+            color: colors.white,
+            fontSize: `${typography.text_small}`,
+            fontWeight: typography.bold,
+            fontFamily: `${typography.font_family_base}`,
+          },
+          stroke: colors.royal,
+          height: 24,
+          width: 90,
+        },
+      },
     },
   },
   credits: {

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

@@ -5,6 +5,7 @@ import { ThemeProps } from './themeTypes'
 
 import Highcharts from 'highcharts'
 
+const pbButtonHoverColor = '#004ebb'
 const highchartsTheme: ThemeProps = {
   lang: {
     thousandsSep: ',',
@@ -225,8 +226,29 @@ const highchartsTheme: ThemeProps = {
         },
       ],
       traverseUpButton: {
-        position: { y: -40 },
-      }
+        position: { y: -50 },
+        text: '< Back',
+        theme: {
+          r: 4,
+          states: {
+            hover: {
+              style: {
+                fill: pbButtonHoverColor,
+              },
+            },
+          },
+          style: {
+            fill: colors.royal,
+            color: colors.white,
+            fontSize: `${typography.text_small}`,
+            fontWeight: typography.bold,
+            fontFamily: `${typography.font_family_base}`,
+          },
+          stroke: colors.royal,
+          height: 24,
+          width: 90,
+        },
+      },
     },
   },
   credits: {

data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.scss

@@ -47,7 +47,7 @@ $flag-min-resolution: 192dpi;
     background-color: $hover_light;
 
     .iti__country-name, .iti__dial-code {
-      color: $primary
+      color: $primary;
     }
   }
 
@@ -129,6 +129,60 @@ $flag-min-resolution: 192dpi;
   .iti__divider {
     border-bottom: 1px solid $border_light;
   }
+
+  &.dark {
+    .iti--allow-dropdown .iti__flag-container {
+      background-color: rgba($white, 0);
+
+      &:hover {
+        background-color: rgba($white, 0);
+
+        &+ .text_input {
+          background-color: rgba($white, 0.15);
+        }
+
+        .iti__selected-flag {
+          background-color: rgba($white, 0);
+        }
+      }
+    }
+
+    .iti__selected-flag {
+      background-color: rgba($white, 0);
+      color: $white;
+    }
+
+    .iti__country-list {
+      background-color: $bg_dark;
+      border: 1px solid $border_dark;
+
+      .iti__highlight {
+        background-color: $hover_dark;
+
+        .iti__country-name {
+          color: $text_dk_default;
+        }
+  
+        .iti__dial-code {
+          color: $text_lt_lighter;
+        }
+      }
+    }
+
+    .iti__divider {
+      border-bottom: 1px solid $border_dark;
+    }
+
+    .iti__arrow.iti__arrow--up::before {
+      color: $slate;
+    }
+
+    .dropdown_open {
+      .text_input {
+        background-color: rgba($white, 0.025) !important;
+      }
+    }
+  }
   
   @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: $flag-min-resolution) {
     .iti__flag {

data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.tsx

@@ -1,4 +1,3 @@
-/* @flow */
 import React, { useEffect, useRef, useState } from 'react'
 import classnames from 'classnames'
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
@@ -15,19 +14,20 @@ declare global {
 }
 
 type PhoneNumberInputProps = {
-  aria?: { [key: string]: string }
-  className?: string
-  data?: { [key: string]: string }
-  disabled?: boolean
-  id?: string
-  initialCountry?: string
-  isValid?: (valid: boolean) => void
-  label?: string
-  name?: string
-  onChange?: (e: React.FormEvent<HTMLInputElement>) => void
-  onlyCountries: string[]
-  preferredCountries?: string[]
-  value?: string
+  aria?: { [key: string]: string },
+  className?: string,
+  dark?: boolean,
+  data?: { [key: string]: string },
+  disabled?: boolean,
+  id?: string,
+  initialCountry?: string,
+  isValid?: (valid: boolean) => void,
+  label?: string,
+  name?: string,
+  onChange?: (e: React.FormEvent<HTMLInputElement>) => void,
+  onlyCountries: string[],
+  preferredCountries?: string[],
+  value?: string,
 }
 
 enum ValidationError {
@@ -58,6 +58,7 @@ const PhoneNumberInput = (props: PhoneNumberInputProps) => {
   const {
     aria = {},
     className,
+    dark = false,
     data = {},
     disabled = false,
     id = "",
@@ -154,6 +155,7 @@ const PhoneNumberInput = (props: PhoneNumberInputProps) => {
     <div {...ariaProps} {...dataProps} className={classes}>
       <TextInput
         className={dropDownIsOpen ? 'dropdown_open' : ''}
+        dark={dark}
         disabled={disabled}
         error={error}
         id={id}

data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_default.jsx

@@ -1,10 +1,12 @@
 import React from 'react'
 import { PhoneNumberInput } from '../../'
 
-const PhoneNumberInputDefault = () => (
-  <>
-    <PhoneNumberInput id='default' />
-  </>
+const PhoneNumberInputDefault = (props) => (
+    <>
+        <PhoneNumberInput
+            id='default'
+            {...props} />
+    </>
 )
 
 export default PhoneNumberInputDefault

data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_initial_country.jsx

@@ -1,12 +1,14 @@
 import React from 'react'
 import { PhoneNumberInput } from '../../'
 
-const PhoneNumberInitialCountry = () => (
-  <>
-    <PhoneNumberInput id='initial'
-        initialCountry='br'
-    />
-  </>
+const PhoneNumberInitialCountry = (props) => (
+    <>
+        <PhoneNumberInput
+            id='initial'
+            initialCountry='br'
+            {...props}
+        />
+    </>
 )
 
 export default PhoneNumberInitialCountry

data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_only_countries.jsx

@@ -1,11 +1,12 @@
 import React from 'react'
 import { PhoneNumberInput } from '../../'
 
-const PhoneNumberInputOnlyCountries = () => (
+const PhoneNumberInputOnlyCountries = (props) => (
   <>
     <PhoneNumberInput
         id='only'
         onlyCountries={['us', 'br']}
+        {...props} 
     />
   </>
 )

data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_preferred_countries.jsx

@@ -1,11 +1,12 @@
 import React from 'react'
 import { PhoneNumberInput } from '../../'
 
-const PhoneNumberInputPreferredCountries = () => (
+const PhoneNumberInputPreferredCountries = (props) => (
   <>
     <PhoneNumberInput
         id='preferred'
         preferredCountries={['us', 'br', 'ph', 'gb']}
+        {...props} 
     />
   </>
 )

data/app/pb_kits/playbook/pb_phone_number_input/phone_number_input.rb

@@ -27,6 +27,7 @@ module Playbook
       def phone_number_input_options
         {
           id: id,
+          dark: dark,
           disabled: disabled,
           initialCountry: initial_country,
           isValid: is_valid,

data/app/pb_kits/playbook/pb_progress_step/{_progress_step.jsx → _progress_step.tsx}

@@ -1,15 +1,14 @@
-/* @flow */
-
 import React from 'react'
 import classnames from 'classnames'
-import { buildCss } from '../utilities/props'
+import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps'
 
 type ProgressStepProps = {
+  aria?: { [key: string]: string },
   className?: string,
-  data?: string,
+  data?: { [key: string]: string },
   id?: string,
-  children?: array<React.ReactChild>,
+  children?: React.ReactChild[] | React.ReactChild,
   orientation?: "horizontal" | "vertical",
   icon?: boolean,
   showIcon?: boolean,
@@ -17,16 +16,21 @@ type ProgressStepProps = {
   color?: string,
 }
 
-const ProgressStep = (props: ProgressStepProps) => {
+const ProgressStep = (props: ProgressStepProps): React.ReactElement => {
   const {
+    aria = {},
     className,
     children,
     color,
+    data = {},
     orientation = 'horizontal',
     icon = false,
     showIcon = false,
     variant,
   } = props
+
+  const ariaProps = buildAriaProps(aria)
+  const dataProps = buildDataProps(data)
   const iconStyle = icon === true || showIcon === true ? 'icon' : ''
   const progressStepCss = buildCss(
     'pb_progress_step_kit',
@@ -37,7 +41,11 @@ const ProgressStep = (props: ProgressStepProps) => {
   )
 
   return (
-    <ul className={classnames(progressStepCss, globalProps(props), className)}>
+    <ul
+        {...ariaProps}
+        {...dataProps}
+        className={classnames(progressStepCss, globalProps(props), className)}
+    >
       {children}
     </ul>
   )

data/app/pb_kits/playbook/pb_progress_step/{_progress_step_item.jsx → _progress_step_item.tsx}

@@ -1,29 +1,35 @@
-/* @flow */
-
 import React from 'react'
 import classnames from 'classnames'
 
-import { buildCss } from '../utilities/props'
+import { buildCss, buildDataProps } from '../utilities/props'
 
 import Icon from '../pb_icon/_icon'
 
 type ProgressStepItemProps = {
   className?: string,
+  data?: { [key: string]: string },
   status?: "complete" | "active" | "inactive" | "hidden",
-  children?: React.Node,
+  children?: React.ReactNode | React.ReactNode[],
   icon?: string,
 }
 
-const ProgressStepItem = ({
-  className,
-  status = 'inactive',
-  children,
-  icon = 'check',
-}: ProgressStepItemProps) => {
+const ProgressStepItem = (props: ProgressStepItemProps): React.ReactElement => {
+  const {
+    className,
+    data = {},
+    status = 'inactive',
+    children,
+    icon = 'check',
+  } = props
+
   const progressStepItem = buildCss('pb_progress_step_item', status)
+  const dataProps = buildDataProps(data)
 
   return (
-    <li className={classnames(progressStepItem, className)}>
+    <li 
+        {...dataProps}
+        className={classnames(progressStepItem, className)}
+    >
       <div className="box">
         <div className="circle">
           <Icon icon={icon} />
@@ -33,4 +39,5 @@ const ProgressStepItem = ({
     </li>
   )
 }
+
 export default ProgressStepItem

data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_default.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 
-import ProgressStep from '../_progress_step.jsx'
-import ProgressStepItem from '../_progress_step_item.jsx'
+import ProgressStep from '../_progress_step.tsx'
+import ProgressStepItem from '../_progress_step_item.tsx'
 
 const ProgressStepDefault = (props) => (
   <div>

data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_tracker.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
 
-import ProgressStep from '../_progress_step.jsx'
+import ProgressStep from '../_progress_step.tsx'
 import ProgressStepItem from '../_progress_step_item'
 
 import Caption from '../../pb_caption/_caption'

data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_tracker_click_events.jsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react'
 
-import ProgressStep from '../_progress_step.jsx'
+import ProgressStep from '../_progress_step.tsx'
 import ProgressStepItem from '../_progress_step_item'
 
 import Caption from '../../pb_caption/_caption'

data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_vertical.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 
-import ProgressStep from '../_progress_step.jsx'
-import ProgressStepItem from '../_progress_step_item.jsx'
+import ProgressStep from '../_progress_step.tsx'
+import ProgressStepItem from '../_progress_step_item.tsx'
 
 const ProgressStepVertical = (props) => (
   <div>

data/app/pb_kits/playbook/pb_progress_step/progress_step.test.js

@@ -0,0 +1,109 @@
+import React from 'react'
+import { render, screen } from '../utilities/test-utils'
+
+import ProgressStep from './_progress_step.tsx'
+import ProgressStepItem from './_progress_step_item.tsx'
+
+const testId = 'progressStepId'
+const step1Id = 'step1Id'
+const step2Id = 'step2Id'
+const step3Id = 'step3Id'
+
+const ProgressStepTest = () => {
+  return (
+      <>
+        <ProgressStep
+            aria={{ label: testId }}
+            className={'custom-class'}
+            data={{ testid: testId }} 
+        >
+          <ProgressStepItem 
+              data={{ testid: step1Id }} 
+              status="complete"
+          >
+              {'Step 1'}
+          </ProgressStepItem>
+          <ProgressStepItem 
+              data={{ testid: step2Id }} 
+              status="active"
+          >
+              {'Step 2'}
+          </ProgressStepItem>
+          <ProgressStepItem 
+              data={{ testid: step3Id }} 
+              status="inactive"
+          >
+              {'Step 3'}
+          </ProgressStepItem>
+        </ProgressStep>
+      </>
+  )
+}
+
+test('should render custom class and data', () => {
+  render(<ProgressStepTest/>)
+
+  const kit = screen.getByTestId(testId)
+  expect(kit).toHaveClass('custom-class')
+})
+
+test('should render aria-label', () => {
+  render(<ProgressStepTest />)
+
+  const kit = screen.getByTestId(testId)
+  expect(kit).toHaveAttribute('aria-label', testId)
+})
+
+test('should render the horizontal variant', () => {
+  render(<ProgressStepTest />)
+
+  const kit = screen.getByTestId(testId)
+  expect(kit).toHaveClass('pb_progress_step_kit_horizontal')
+})
+
+test('should render the vertical variant', () => {
+  render( 
+        <ProgressStep
+            aria={{ label: testId }}
+            data={{ testid: testId }} 
+            orientation="vertical"
+        >
+          <ProgressStepItem status="complete">{'Step 1'}</ProgressStepItem>
+          <ProgressStepItem status="active">{'Step 2'}</ProgressStepItem>
+          <ProgressStepItem status="inactive">{'Step 3'}</ProgressStepItem>
+        </ProgressStep> 
+        )
+
+  const kit = screen.getByTestId(testId)
+  expect(kit).toHaveClass('pb_progress_step_kit_vertical')
+})
+
+test('should render the tracker variant', () => {
+  render( 
+        <ProgressStep
+            aria={{ label: testId }}
+            data={{ testid: testId }} 
+            variant="tracker"
+        >
+          <ProgressStepItem status="complete">{'Step 1'}</ProgressStepItem>
+          <ProgressStepItem status="active">{'Step 2'}</ProgressStepItem>
+          <ProgressStepItem status="inactive">{'Step 3'}</ProgressStepItem>
+        </ProgressStep> 
+        )
+
+  const kit = screen.getByTestId(testId)
+  expect(kit).toHaveClass('pb_progress_step_kit_horizontal_tracker')
+})
+
+
+test('should render the children elements', () => {
+  render(<ProgressStepTest />)
+
+  const step1Kit = screen.getByTestId(step1Id)
+  const step2Kit = screen.getByTestId(step2Id)
+  const step3Kit = screen.getByTestId(step3Id)
+  
+  expect(step1Kit).toHaveClass('pb_progress_step_item_complete')
+  expect(step2Kit).toHaveClass('pb_progress_step_item_active')
+  expect(step3Kit).toHaveClass('pb_progress_step_item_inactive')
+})

data/app/pb_kits/playbook/pb_treemap_chart/_treemap_chart.scss

@@ -0,0 +1,10 @@
+.pb_treemap_chart {
+  .highcharts-drillup-button {
+    @import 'highcharts/css/highcharts.scss';
+
+    text {
+      transform: translateX(25px);
+      fill: $white;
+    }
+  }
+}

data/app/pb_kits/playbook/pb_typeahead/_typeahead.jsx

@@ -29,6 +29,7 @@ import { noop, buildDataProps } from '../utilities/props'
 
 type TypeaheadProps = {
   async?: boolean,
+  className?: string,
   components?: object,
   createable?: boolean,
   dark?: boolean,
@@ -49,6 +50,7 @@ type TypeaheadProps = {
 
 const Typeahead = ({
   async,
+  className,
   components = {},
   createable,
   error = "",
@@ -111,8 +113,12 @@ const Typeahead = ({
   }
 
   const dataProps = buildDataProps(data)
+  const classes = classnames(
+    'pb_typeahead_kit react-select',
+    globalProps(props),
+    className
+  )
 
-  const classes = `pb_typeahead_kit react-select ${globalProps(props)}`
   const inlineClass = selectProps.inline ? 'inline' : null
 
   return (

data/app/pb_kits/playbook/pb_typeahead/_typeahead.test.jsx

@@ -93,3 +93,18 @@ test('typeahead multi select with badges and small pills', () => {
   expect(badge).toBeInTheDocument()
 })
 
+test('should pass className prop', () => {
+  const className = 'custom-class-name'
+  render(
+    <Typeahead
+        className={className}
+        data={{ testid: 'typeahead-test' }}
+        defaultValue={[options[0]]}
+        label="Colors"
+        options={options}
+    />
+  )
+
+  const kit = screen.getByTestId('typeahead-test')
+  expect(kit).toHaveClass(className)
+})

data/lib/playbook/version.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
 module Playbook
-  PREVIOUS_VERSION = "12.7.1"
-  VERSION = "12.8.0"
+  PREVIOUS_VERSION = "12.8.0"
+  VERSION = "12.9.0"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 12.8.0
+  version: 12.9.0
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2023-03-14 00:00:00.000000000 Z
+date: 2023-03-16 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -1666,9 +1666,9 @@ files:
 - app/pb_kits/playbook/pb_progress_simple/progress_simple.html.erb
 - app/pb_kits/playbook/pb_progress_simple/progress_simple.rb
 - app/pb_kits/playbook/pb_progress_simple/progress_simple.test.js
-- app/pb_kits/playbook/pb_progress_step/_progress_step.jsx
 - app/pb_kits/playbook/pb_progress_step/_progress_step.scss
-- app/pb_kits/playbook/pb_progress_step/_progress_step_item.jsx
+- app/pb_kits/playbook/pb_progress_step/_progress_step.tsx
+- app/pb_kits/playbook/pb_progress_step/_progress_step_item.tsx
 - app/pb_kits/playbook/pb_progress_step/docs/_description.md
 - app/pb_kits/playbook/pb_progress_step/docs/_progress_step_custom_icon.html.erb
 - app/pb_kits/playbook/pb_progress_step/docs/_progress_step_default.html.erb
@@ -1683,6 +1683,7 @@ files:
 - app/pb_kits/playbook/pb_progress_step/docs/index.js
 - app/pb_kits/playbook/pb_progress_step/progress_step.html.erb
 - app/pb_kits/playbook/pb_progress_step/progress_step.rb
+- app/pb_kits/playbook/pb_progress_step/progress_step.test.js
 - app/pb_kits/playbook/pb_progress_step/progress_step_item.html.erb
 - app/pb_kits/playbook/pb_progress_step/progress_step_item.rb
 - app/pb_kits/playbook/pb_radio/_radio.scss
@@ -2186,6 +2187,7 @@ files:
 - app/pb_kits/playbook/pb_tooltip/tooltip.html.erb
 - app/pb_kits/playbook/pb_tooltip/tooltip.rb
 - app/pb_kits/playbook/pb_tooltip/tooltip.test.jsx
+- app/pb_kits/playbook/pb_treemap_chart/_treemap_chart.scss
 - app/pb_kits/playbook/pb_treemap_chart/_treemap_chart.tsx
 - app/pb_kits/playbook/pb_treemap_chart/docs/_description.md
 - app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_colors.html.erb