playbook_ui 14.15.0.pre.alpha.play1952fixhorizontalnavcursorstyle6795 → 14.15.0.pre.rc.0

data/app/pb_kits/playbook/pb_user/user.test.js

@@ -1,5 +1,5 @@
 import React from 'react'
-import { render, screen , cleanup} from '../utilities/test-utils'
+import { render, screen } from '../utilities/test-utils'
 import User from './_user'
 import Caption from "../pb_caption/_caption"
 
@@ -40,184 +40,3 @@ test('bold prop applies correct styling when false', () => {
 
   expect(titleElement).toHaveClass('pb_title_kit_size_4_thin')
 })
-
-test('align prop adds desired class', () => {
-  [
-    "left",
-    "center",
-    "right"
-  ].forEach((alignProp) => {
-    render(
-      <User
-          align={alignProp}
-          data={{ testid: 'test-user-kit' }}
-          name="Anna Black"
-      />
-    )
-    const kit = screen.getByTestId('test-user-kit')
-    expect(kit.className).toContain(`pb_user_kit_${alignProp}`)
-
-    cleanup()
-  })
-})
-
-test('avatar prop adds default avatar img', () => {
-  render(
-    <User
-        avatar
-        data={{ testid: 'test-user-kit' }}
-    />
-  )
-
-  const container = screen.getByTestId('test-user-kit')
-  const avatarWrapper = container.querySelector('.avatar_wrapper')
-
-  expect(avatarWrapper).toBeInTheDocument()
-  expect(avatarWrapper).toHaveClass('avatar_wrapper')
-})
-
-test('avatarUrl prop adds avatar img', () => {
-  const avatarUrl = 'https://example.com/avatar.jpg'
-  render(
-    <User
-        avatarUrl={avatarUrl}
-        data={{ testid: 'test-user-kit' }}
-    />
-  )
-
-  const container = screen.getByTestId('test-user-kit')
-  const avatarImg = container.querySelector('img')
-
-  expect(avatarImg).toBeInTheDocument()
-  expect(avatarImg).toHaveAttribute('src', avatarUrl)
-})
-
-test('name prop adds name text', () => {
-  const name = 'Anna Black'
-  render(
-    <User
-        data={{ testid: 'test-name' }}
-        name={name}
-    />
-  )
-
-  const titleElement = screen.getByText(name)
-  expect(titleElement).toBeInTheDocument()
-})
-
-test('nameStyle prop changes the typography kit', () => {
-  const name = 'Anna Black'
-  const kitTypes = ['body', 'caption', 'detail']
-
-  kitTypes.forEach((typeKit) => {
-    render(
-      <User
-          data={{ testid: 'test-user-kit' }}
-          name={name}
-          nameStyle={typeKit}
-      />
-    )
-
-    const container = screen.getByTestId('test-user-kit')
-    const subcomponent = container.querySelector(`[class*="pb_${typeKit}_kit"]`)
-
-    expect(subcomponent).toBeInTheDocument()
-    expect(subcomponent).toHaveTextContent(name)
-
-    cleanup()
-  })
-})
-
-test('orientation prop adds desired class', () => {
-  [
-    "horizontal",
-    "vertical"
-  ].forEach((orientation) => {
-    render(
-      <User
-          data={{ testid: 'test-user-kit' }}
-          name="Anna Black"
-          orientation={orientation}
-      />
-    )
-
-    const container = screen.getByTestId('test-user-kit')
-    expect(container.className).toContain(orientation)
-
-    cleanup()
-  })
-})
-
-test('size prop adds desired class', () => {
-  [
-    "sm",
-    "md",
-    "lg"
-  ].forEach((size) => {
-    render(
-      <User
-          data={{ testid: 'test-user-kit' }}
-          name="Anna Black"
-          size={size}
-      />
-    )
-
-    const container = screen.getByTestId('test-user-kit')
-    expect(container.className).toContain(size)
-
-    cleanup()
-  })
-})
-
-test('title prop adds title text', () => {
-  const title = 'Remodeling Consultant'
-  render(
-    <User
-        data={{ testid: 'test-title' }}
-        name="Anna Black"
-        title={title}
-    />
-  )
-
-  const titleElement = screen.getByText(title)
-  expect(titleElement).toBeInTheDocument()
-})
-
-test('titleStyle prop changes the typography kit', () => {
-  const title = 'Remodeling Consultant'
-  const kitTypes = ['caption', 'detail']
-
-  kitTypes.forEach((typeKit) => {
-    render(
-      <User
-          data={{ testid: 'test-user-kit' }}
-          name="Anna Black"
-          title={title}
-          titleStyle={typeKit}
-      />
-    )
-
-    const container = screen.getByTestId('test-user-kit')
-    const subcomponent = container.querySelector(`[class*="pb_${typeKit}_kit"]`)
-
-    expect(subcomponent).toBeInTheDocument()
-    expect(subcomponent).toHaveTextContent(title)
-
-    cleanup()
-  })
-})
-
-test('territory prop adds territory text', () => {
-  const territory = 'PHI'
-  render(
-    <User
-        data={{ testid: 'test-territory' }}
-        name="Anna Black"
-        territory={territory}
-        title="Remodeling Consultant"
-    />
-  )
-
-  const titleElement = screen.getByText(`${territory} • Remodeling Consultant`)
-  expect(titleElement).toBeInTheDocument()
-})

data/app/pb_kits/playbook/pb_walkthrough/docs/_walkthrough_continuous.jsx

@@ -1,6 +1,5 @@
 import React, { useState } from 'react'
-import Button from '../../pb_button/_button'
-import Walkthrough from '../../pb_walkthrough/_walkthrough'
+import { Button, Walkthrough } from 'playbook-ui'
 
 const WalkthroughContinuous = (props) => {
   const [state, setState] = useState({

data/app/pb_kits/playbook/pb_walkthrough/docs/_walkthrough_default.jsx

@@ -1,6 +1,5 @@
 import React, { useState } from 'react'
-import Button from '../../pb_button/_button'
-import Walkthrough from '../../pb_walkthrough/_walkthrough'
+import { Button, Walkthrough } from 'playbook-ui'
 
 const WalkthroughDefault = (props) => {
   const [state, setState] = useState({

data/app/pb_kits/playbook/pb_walkthrough/docs/_walkthrough_multi_beacon.jsx

@@ -1,6 +1,5 @@
 import React, { useState } from 'react'
-import Button from '../../pb_button/_button'
-import Walkthrough from '../../pb_walkthrough/_walkthrough'
+import { Button, Walkthrough } from 'playbook-ui'
 
 const WalkthroughMultiBeacon = (props) => {
   const [stateA, setStateA] = useState({

data/app/pb_kits/playbook/pb_walkthrough/docs/_walkthrough_no_beacon.jsx

@@ -1,6 +1,5 @@
 import React, { useState } from 'react'
-import Button from '../../pb_button/_button'
-import Walkthrough from '../../pb_walkthrough/_walkthrough'
+import { Button, Walkthrough } from 'playbook-ui'
 
 const WalkthroughNoBeacon = (props) => {
   const [state, setState] = useState({

data/app/pb_kits/playbook/pb_walkthrough/docs/_walkthrough_no_overlay.jsx

@@ -1,6 +1,5 @@
 import React, { useState } from 'react'
-import Button from '../../pb_button/_button'
-import Walkthrough from '../../pb_walkthrough/_walkthrough'
+import { Button, Walkthrough } from 'playbook-ui'
 
 const WalkthroughNoOverlay = (props) => {
   const [noOverlay, setNoOverlayState] = useState({

data/app/pb_kits/playbook/pb_walkthrough/docs/_walkthrough_styled.jsx

@@ -1,6 +1,5 @@
 import React, { useState } from 'react'
-import Button from '../../pb_button/_button'
-import Walkthrough from '../../pb_walkthrough/_walkthrough'
+import { Button, Walkthrough } from 'playbook-ui'
 
 const WalkthroughStyled = (props) => {
   const [state, setState] = useState({

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

@@ -41,7 +41,8 @@ $interface_colors: (
   silver:             $silver,
   slate:              $slate,
   charcoal:           $charcoal,
-  black:              $black
+  black:              $black,
+
 );
 
 /* Main colors ------------------------*/
@@ -204,6 +205,8 @@ $status_colors: (
   primary_secondary:    $primary_secondary
 );
 
+
+
 $status_color_text: (
   success:            $success,
   success_sm:         $text_lt_success_sm,

data/app/pb_kits/playbook/tokens/_display.scss

@@ -4,12 +4,10 @@ $display_inline_block: inline-block !default;
 $display_flex: flex !default;
 $display_none: none !default;
 $display_inline_flex: inline-flex !default;
-$display_grid: grid !default;
 $displays: (
   display_none:   $display_none,
   display_flex: $display_flex,
   display_inline: $display_inline,
   display_inline_block: $display_inline_block,
-  display_block: $display_block,
-  display_grid: $display_grid
+  display_block: $display_block
 );

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

@@ -24,18 +24,13 @@
     display: none;
 }
 
-.display_grid {
-    display: grid;
-}
-
 $display_values: (
     none: $display_none,
     flex: $display_flex,
     inline: $display_inline,
     inline_block: $display_inline_block,
     inline_flex: $display_inline_flex,
-    block: $display_block,
-    grid: $display_grid
+    block: $display_block
 );
 
 // using a grid here

data/app/pb_kits/playbook/utilities/object.ts

@@ -1,117 +1,3 @@
 /* 🛠️ Any commonly used lodash functions can be added here. 🤙 */
 
-export const isEmpty = (obj: any) => [Object, Array].includes((obj || {}).constructor) && !Object.entries((obj || {})).length;
-
-export const get = <T, R = any>(obj: T, path: string, defaultValue?: R): R | any => {
-  const travel = (regexp: RegExp): any =>
-    String.prototype.split
-      .call(path, regexp)
-      .filter(Boolean)
-      .reduce((res: any, key: string) => (res !== null && res !== undefined ? res[key] : res), obj)
-  const result = travel(/[,[\]]+?/) || travel(/[,[\].]+?/)
-  return result === undefined || result === obj ? defaultValue : result
-}
-
-export const isString = (str: unknown): str is string =>
-  str != null && typeof (str as any).valueOf() === "string"
-
-export const uniqueId: (prefix?: string) => string = (() => {
-  let counter = 0
-  return (prefix = '') => `${prefix}${++counter}`
-})()
-
-export const omitBy = (obj: Record<string, any>, predicate: (value: any, key: string) => boolean) => {
-  if (obj === null || typeof obj !== 'object') return {}
-  return Object.keys(obj).reduce((result: Record<string, any>, key: string) => {
-    if (!predicate(obj[key], key)) {
-      result[key] = obj[key];
-    }
-    return result;
-  }, {})
-}
-
-export const noop = (): void => {
-  // empty
-};
-
-export function merge(
-  ...objects: Array<Record<string, unknown> | null | undefined>
-): Record<string, unknown> {
-  const isPlainObject = (obj: unknown): obj is Record<string, unknown> =>
-    !!obj && typeof obj === 'object' && !Array.isArray(obj);
-
-  const result: Record<string, unknown> = {};
-
-  for (const obj of objects) {
-    if (!obj || typeof obj !== 'object') continue;
-
-    for (const key of Object.keys(obj)) {
-      const oldVal = result[key];
-      const newVal = (obj as Record<string, unknown>)[key];
-
-      if (Array.isArray(oldVal) && Array.isArray(newVal)) {
-        result[key] = newVal;
-      } else if (isPlainObject(oldVal) && isPlainObject(newVal)) {
-        result[key] = merge(oldVal, newVal);
-      } else if (Array.isArray(oldVal) && isPlainObject(newVal)) {
-        result[key] = oldVal;
-      } else if (isPlainObject(oldVal) && Array.isArray(newVal)) {
-        result[key] = oldVal;
-      } else {
-        result[key] = newVal;
-      }
-    }
-  }
-  return result;
-}
-
-const createIteratee = (predicate: any) => {
-  if (typeof predicate === 'function') {
-    return predicate;
-  }
-  if (typeof predicate === 'string') {
-    return (obj: any) => obj[predicate];
-  }
-  if (Array.isArray(predicate)) {
-    const [key, value] = predicate;
-    return (obj: any) => obj[key] === value;
-  }
-  if (typeof predicate === 'object' && predicate !== null) {
-    return (obj: any) => {
-      for (const key in predicate) {
-        if (Object.prototype.hasOwnProperty.call(predicate, key)) {
-          if (obj[key] !== predicate[key]) return false;
-        }
-      }
-      return true;
-    };
-  }
-  return () => false;
-};
-
-export const filter = <T>(array: T[], predicate: any): T[] => {
-  const iteratee = createIteratee(predicate);
-  return array.filter(iteratee);
-};
-
-export const find = <T>(array: T[], predicate: any): T | undefined => {
-  const iteratee = createIteratee(predicate);
-  return array.find(iteratee);
-};
-
-export const partial = <F extends (...args: unknown[]) => unknown>(
-  fn: F,
-  ...partials: unknown[]
-): ((...args: unknown[]) => ReturnType<F>) => {
-  const placeholder = partial.placeholder;
-  return (...args: unknown[]): ReturnType<F> => {
-    let argIndex = 0;
-    const finalArgs = partials.map(arg =>
-      arg === placeholder ? args[argIndex++] : arg
-    );
-    return fn(...(finalArgs.concat(args.slice(argIndex)) as Parameters<F>)) as ReturnType<F>;
-  };
-};
-
-partial.placeholder = Symbol();
-export const _ = partial.placeholder;
+export const isEmpty = (obj: Record<string, unknown>): boolean => Object.keys(obj).length < 1

data/app/pb_kits/playbook/utilities/test/globalProps/display.test.js

@@ -9,7 +9,7 @@ const testSubject = 'body'
 
 // %w[block inline_block inline flex inline_flex none]
 test('Global Props: returns proper class name', () => {
-  const propValues = ["block", "inline", "inline_block", "flex", "inline_flex", "none", "grid" ]
+  const propValues = ["block", "inline", "inline_block", "flex", "inline_flex", "none"]
   for(let x = 0, y = propValues.length; x < y; ++x) {
     const testId = `${testSubject}-${propValues[x]}`
     render(

data/app/pb_kits/playbook/utilities/text.ts

@@ -1,4 +1,4 @@
-import { filter } from './object'
+import { filter } from 'lodash'
 
 const isEmpty = (value: string | unknown): boolean => !value || value == ''