playbook_ui 15.5.0.pre.rc.2 → 15.5.0.pre.rc.4

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

@@ -0,0 +1,29 @@
+import React from 'react'
+
+import ProgressStep from '../_progress_step.tsx'
+import ProgressStepItem from '../_progress_step_item.tsx'
+import Caption from '../../pb_caption/_caption'
+
+const ProgressStepColor = (props) => (
+  <div>
+    <br />
+    <ProgressStep 
+        color="info"
+        icon 
+        variant="tracker" 
+        {...props}
+    >
+      <ProgressStepItem status="complete">
+        <Caption>{'Ordered'}</Caption>
+      </ProgressStepItem>
+      <ProgressStepItem status="active">
+        <Caption>{'Shipped'}</Caption>
+      </ProgressStepItem>
+      <ProgressStepItem status="inactive">
+        <Caption>{'Delivered'}</Caption>
+      </ProgressStepItem>
+    </ProgressStep>
+  </div>
+)
+
+export default ProgressStepColor

data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_color.md

@@ -0,0 +1,3 @@
+The `color` prop can also be used to set color for the tracker variant. Options for color are `primary` and `info` with default being set to `primary`.
+
+**NOTE**: The `color` prop is only available with the `tracker` variant.

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

@@ -0,0 +1,31 @@
+import React from 'react'
+
+import ProgressStep from '../_progress_step.tsx'
+import ProgressStepItem from '../_progress_step_item.tsx'
+import Caption from '../../pb_caption/_caption'
+
+const ProgressStepCustomIcon = (props) => (
+  <div>
+    <br />
+    <ProgressStep 
+        icon 
+        variant="tracker" 
+        {...props}
+    >
+      <ProgressStepItem status="complete">
+        <Caption>{'Ordered'}</Caption>
+      </ProgressStepItem>
+      <ProgressStepItem 
+          icon="exclamation-triangle"
+          status="active" 
+      >
+        <Caption>{'Shipped'}</Caption>
+      </ProgressStepItem>
+      <ProgressStepItem status="inactive">
+        <Caption>{'Delivered'}</Caption>
+      </ProgressStepItem>
+    </ProgressStep>
+  </div>
+)
+
+export default ProgressStepCustomIcon

data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_custom_icon.md

@@ -0,0 +1 @@
+Custom icons can also be set for individual steps. Simply use the `icon` prop for the relevant `ProgressStepItem`/`progress_step_item` as shown here. 

data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_default.html.erb

@@ -39,7 +39,10 @@
   <%= pb_rails("progress_step/progress_step_item", props: {status: "complete"}) do %>
   step 2
   <% end %>
-  <%= pb_rails("progress_step/progress_step_item", props: {status: "complete"}) do %>
+  <%= pb_rails("progress_step/progress_step_item", props: {status: "active"}) do %>
   step 3
+  <% end %>
+    <%= pb_rails("progress_step/progress_step_item", props: {status: "inactive"}) do %>
+  step 4
   <% end %>
 <% end %>

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

@@ -6,7 +6,6 @@ import ProgressStepItem from '../_progress_step_item.tsx'
 const ProgressStepDefault = (props) => (
   <div>
     <ProgressStep
-        icon
         {...props}
     >
       <ProgressStepItem status="complete" />
@@ -19,12 +18,24 @@ const ProgressStepDefault = (props) => (
 
     <ProgressStep {...props}>
       <ProgressStepItem status="complete">{'Step 1'}</ProgressStepItem>
-      <ProgressStepItem status="active">{'Step 2'}</ProgressStepItem>
-      <ProgressStepItem status="inactive">{'Step 3'}</ProgressStepItem>
+      <ProgressStepItem status="complete">{'Step 2'}</ProgressStepItem>
+      <ProgressStepItem status="active">{'Step 3'}</ProgressStepItem>
+      <ProgressStepItem status="inactive">{'Step 4'}</ProgressStepItem>
+      <ProgressStepItem status="inactive">{'Step 5'}</ProgressStepItem>
     </ProgressStep>
 
     <br />
     <br />
+
+    <ProgressStep 
+        icon
+        {...props}
+    >
+      <ProgressStepItem status="complete">{'Step 1'}</ProgressStepItem>
+      <ProgressStepItem status="complete">{'Step 2'}</ProgressStepItem>
+      <ProgressStepItem status="active">{'Step 3'}</ProgressStepItem>
+      <ProgressStepItem status="inactive">{'Step 4'}</ProgressStepItem>
+    </ProgressStep>
   </div>
 )
 

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

@@ -0,0 +1,3 @@
+The default Progress Step kit sets orientation to horizontal and can be used with completed, active, and inactive steps as shown here.
+
+`icon` is a boolean prop that can also be set to true to render icons within the steps indicator. `icon` is false by default.

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

@@ -0,0 +1,3 @@
+The `variant` prop can be set to `tracker` to achieve this UI. Tracker is only available with the horizontal orientation and it is also recommended that you set the `icon` prop to true for this variant. 
+
+This variant takes children just like the default progress step, however, it is best to use the caption kit for children in this variant.

data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_vertical.html.erb

@@ -25,13 +25,7 @@
     Child
   <% end %>
   <%= pb_rails("progress_step/progress_step_item", props: {status: "active"}) do %>
-    <%= pb_rails("card", props: {highlight: {position: "side", color:"windows"}}) do %>
-  Card content
-<% end %>
-<br>
-<%= pb_rails("card", props: {highlight: {position: "side", color:"windows"}}) do %>
-  Card content
-<% end %>
+    Child
   <% end %>
   <%= pb_rails("progress_step/progress_step_item", props: {status: "inactive"}) do %>
     Child

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

@@ -0,0 +1 @@
+`orientation` can also be set to `vertical` as shown here. By default, this is set to `horizontal`.

data/app/pb_kits/playbook/pb_progress_step/docs/example.yml

@@ -3,6 +3,7 @@ examples:
   - progress_step_default: Default
   - progress_step_vertical: Vertical
   - progress_step_tracker: Tracker
+  - progress_step_color: Color
   - progress_step_custom_icon: Custom Icon
   - progress_step_tooltip: Tooltip
 
@@ -10,4 +11,6 @@ examples:
   - progress_step_default: Default
   - progress_step_vertical: Vertical
   - progress_step_tracker: Tracker
+  - progress_step_color: Color
+  - progress_step_custom_icon: Custom Icon
   - progress_step_tracker_click_events: Using State

data/app/pb_kits/playbook/pb_progress_step/docs/index.js

@@ -2,3 +2,5 @@ export { default as ProgressStepDefault } from './_progress_step_default.jsx'
 export { default as ProgressStepVertical } from './_progress_step_vertical.jsx'
 export { default as ProgressStepTracker } from './_progress_step_tracker.jsx'
 export { default as ProgressStepTrackerClickEvents } from './_progress_step_tracker_click_events.jsx'
+export { default as ProgressStepColor } from './_progress_step_color.jsx'
+export { default as ProgressStepCustomIcon } from './_progress_step_custom_icon.jsx'

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

@@ -107,3 +107,44 @@ test('should render the children elements', () => {
   expect(step2Kit).toHaveClass('pb_progress_step_item_active')
   expect(step3Kit).toHaveClass('pb_progress_step_item_inactive')
 })
+
+test('should render info color', () => {
+render( 
+        <ProgressStep
+            aria={{ label: testId }}
+            color="info"
+            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_info')
+})
+
+test('should render custom icon', () => {
+render( 
+        <ProgressStep
+            aria={{ label: testId }}
+            data={{ testid: testId }} 
+            variant="tracker"
+        >
+          <ProgressStepItem icon="exclamation-triangle" 
+              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')
+  const icon = kit.getAttribute('aria-label', "exclamation-triangle-icon")
+  expect(icon).toBeDefined()
+})

data/app/pb_kits/playbook/pb_radio/docs/_radio_react_hook.jsx

@@ -1,6 +1,8 @@
 import React from "react"
 import { useForm } from "react-hook-form"
-import { Radio, Flex, Body } from "playbook-ui"
+import Radio from "../_radio"
+import Body from "../../pb_body/_body"
+import Flex from "../../pb_flex/_flex"
 
 const RadioReactHook = () => {
   const { register, watch } = useForm({

data/app/pb_kits/playbook/pb_select/docs/_select_react_hook.jsx

@@ -1,6 +1,8 @@
 import React, { useState } from "react"
 import { useForm } from "react-hook-form"
-import { Button, Body, Select } from "playbook-ui"
+import Select from "../_select"
+import Body from "../../pb_body/_body"
+import Button from "../../pb_button/_button"
 
 const SelectReactHook = (props) => {
   const { register, handleSubmit, formState: { errors } } = useForm({

data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_sizing.jsx

@@ -1,5 +1,8 @@
 import React from 'react'
-import { Button, Tooltip, Flex, FlexItem } from 'playbook-ui';
+import Tooltip from '../_tooltip'
+import Button from '../../pb_button/_button'
+import Flex from '../../pb_flex/_flex'
+import FlexItem from '../../pb_flex/_flex_item'
 
 const TooltipSizing = (props) => {
 

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

@@ -161,6 +161,10 @@
   .typeahead-plus-icon {
     color: $text_lt_lighter;
   }
+  .pb_badge_kit_primary {
+    margin-bottom: 2px;
+    margin-top: 2px;
+  }
   .pb_badge_kit_primary span {
     line-height: 16.5px;
     letter-spacing: normal;

data/app/pb_kits/playbook/pb_typeahead/components/MultiValue.tsx

@@ -62,6 +62,7 @@ const MultiValue = (props: Props) => {
             className={pillClassName}
             closeProps={removeProps}
             htmlOptions={{onKeyDown:handleKeyDown}}
+            marginRight="xs"
             removeIcon
             tabIndex={0}
             text={label}

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_react_hook.jsx

@@ -1,6 +1,7 @@
 import React from 'react'
 
-import { Typeahead, Title } from 'playbook-ui'
+import Typeahead from '../_typeahead'
+import Title from '../../pb_title/_title'
 import { useForm } from 'react-hook-form'
 
 const languages = [

data/app/pb_kits/playbook/pb_user/docs/_user_font_options.jsx

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

data/app/pb_kits/playbook/utilities/_truncate.scss

@@ -11,6 +11,8 @@ $truncate-styles: (
   display: -webkit-box;
   -webkit-line-clamp: $number;
   -webkit-box-orient: vertical;
+  overflow-wrap: anywhere;
+  word-break: break-all;
 }
 
 @each $class, $number in $truncate-styles {