playbook_ui 12.8.0.pre.alpha.PLAY625phonenumberdark301 → 12.8.0.pre.alpha.PLAY645typescriptprogresstep297

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 5be23d462b949707bf418933be152f2c0b8069435d28c33845a57c34e833f777
-  data.tar.gz: 97812bf19deea95afa092ec3ba6c3b4895452328244cbc059eb7d5aeb2477663
+  metadata.gz: 283def9e075a0980a2b2087d7e5e97b8c423077dede9ac0a233c92578235289e
+  data.tar.gz: 1e29b357dfb18242784e2603cda7b99faceb8894c7706fef39229dcb0bd4d701
 SHA512:
-  metadata.gz: b793992b8ebe54ca16ce7c73474777b5c6a45662e62cf15be5fd87bc0b7214f6a1d014cd5997bfb618884639ba15a429635db76e9445a7123c08ed9863a979b8
-  data.tar.gz: b423e63c48e5d2c064463579ecbdeb10b388a04301d7feb831f378a67e87ade84a9b82a1ee848b078000cd9a428a30a77a655ab51f6fb25a763b7dbffbf9d9fe
+  metadata.gz: b631d82e34a76b54112e9e5967d79eff4d1d755122c8d6463118473eb98be618c19d83da7f62d8e6cbfe8b01c8a75d417a89af96ac8836246d8ab29f18961c5d
+  data.tar.gz: dfc3653b07313fdb9304a8ef3b914caded472bfcf5de3347a1d556874056029b88d8fbdb096f75a8ac973a359cfb48fc4b87c6c6c724a05dc533e02b14f00903

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

@@ -4,7 +4,6 @@ $transform-rotate-deg: 135deg;
 $input-max-width: 284px;
 $dropdown-min-width: 340px;
 $flag-min-resolution: 192dpi;
-$bg-dark-country-item: #e2eaf4;
 
 .pb_phone_number_input {
   input::placeholder {
@@ -48,7 +47,7 @@ $bg-dark-country-item: #e2eaf4;
     background-color: $hover_light;
 
     .iti__country-name, .iti__dial-code {
-      color: $primary;
+      color: $primary
     }
   }
 
@@ -130,66 +129,6 @@ $bg-dark-country-item: #e2eaf4;
   .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; //$card_dark
-      border: 1px solid $border_dark;
-
-      .iti__highlight {
-        background-color: $bg-dark-country-item;
-      }
-    }
-
-    .iti__divider {
-      border-bottom: 1px solid $border_dark;
-    }
-
-    .iti__arrow.iti__arrow--up::before {
-      color: $slate;
-    }
-
-    .iti__country.iti__highlight {  
-      .iti__country-name {
-        color: $text_lt_default;
-      }
-
-      .iti__dial-code {
-        color: $text_lt_light;
-      }
-
-      &.iti__active::after {
-        color: $text_lt_default;
-      }
-    }
-
-    .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,3 +1,4 @@
+/* @flow */
 import React, { useEffect, useRef, useState } from 'react'
 import classnames from 'classnames'
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
@@ -14,20 +15,19 @@ declare global {
 }
 
 type PhoneNumberInputProps = {
-  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,
+  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
 }
 
 enum ValidationError {
@@ -58,7 +58,6 @@ const PhoneNumberInput = (props: PhoneNumberInputProps) => {
   const {
     aria = {},
     className,
-    dark = false,
     data = {},
     disabled = false,
     id = "",
@@ -155,7 +154,6 @@ 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,12 +1,10 @@
 import React from 'react'
 import { PhoneNumberInput } from '../../'
 
-const PhoneNumberInputDefault = (props) => (
-    <>
-        <PhoneNumberInput
-            id='default'
-            {...props} />
-    </>
+const PhoneNumberInputDefault = () => (
+  <>
+    <PhoneNumberInput id='default' />
+  </>
 )
 
 export default PhoneNumberInputDefault

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

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

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

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

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

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

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.ReactChild[] | React.ReactChild,
   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/lib/playbook/version.rb

@@ -2,5 +2,5 @@
 
 module Playbook
   PREVIOUS_VERSION = "12.8.0"
-  VERSION = "12.8.0.pre.alpha.PLAY625phonenumberdark301"
+  VERSION = "12.8.0.pre.alpha.PLAY645typescriptprogresstep297"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 12.8.0.pre.alpha.PLAY625phonenumberdark301
+  version: 12.8.0.pre.alpha.PLAY645typescriptprogresstep297
 platform: ruby
 authors:
 - Power UX
@@ -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