playbook_ui 14.15.0.pre.alpha.play1949lodashremoval3of36746 → 14.15.0.pre.alpha.play1952fixhorizontalnavcursorstyle6795

data/app/pb_kits/playbook/pb_user/docs/_user_font_options.html.erb

@@ -0,0 +1,22 @@
+<div class="pb--doc-demo-row">
+  <%= pb_rails("user", props: {
+    align: "left",
+    avatar_url: "https://randomuser.me/api/portraits/women/44.jpg",
+    name: "Anna Black",
+    name_style: "body",
+    orientation: "horizontal",
+    size: "md",
+    territory: "PHL",
+    title: "Remodeling Consultant"
+  }) %>
+  <%= pb_rails("user", props: {
+    align: "left",
+    avatar_url: "https://randomuser.me/api/portraits/women/44.jpg",
+    name: "Anna Black",
+    name_style: "detail",
+    orientation: "horizontal",
+    size: "md",
+    territory: "PHL",
+    title: "Remodeling Consultant"
+  }) %>
+</div>

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

@@ -0,0 +1,40 @@
+import React from 'react'
+import { User } from 'playbook-ui'
+
+const UserFontOptions = (props) => {
+  return (
+    <div>
+      <div className="pb--doc-demo-row">
+        <div>
+          <User
+              align="center"
+              avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
+              name="Anna Black"
+              nameStyle= "body"
+              orientation="horizontal"
+              size= "md"
+              territory= "PHL"
+              title="Remodeling Consultant"
+              {...props}
+          />
+        </div>
+
+        <div>
+          <User
+              align="left"
+              avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
+              name="Anna Black"
+              nameStyle= "detail"
+              orientation="horizontal"
+              size= "md"
+              territory= "PHL"
+              title= "Remodeling Consultant"
+              {...props}
+          />
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default UserFontOptions

data/app/pb_kits/playbook/pb_user/docs/_user_font_options_rails.md

@@ -0,0 +1,5 @@
+Passing a `name_style` prop changes the type kit used for the user name. You can choose between `title`, `body`, `caption`, and `detail`. `title` is the default.
+
+Passing a `title_style` prop changes the type kit used for the user title. You can choose between `body`, `caption`, and `detail`. `body` is the default.
+
+The size of the `caption` is determined by the `size` prop.

data/app/pb_kits/playbook/pb_user/docs/_user_font_options_react.md

@@ -0,0 +1,5 @@
+Passing a `nameStyle` prop changes the type kit used for the user name. You can choose between `title`, `body`, `caption`, and `detail`. `title` is the default.
+
+Passing a `titleStyle` prop changes the type kit used for the user title. You can choose between `body`, `caption`, and `detail`. `body` is the default.
+
+The size of the `caption` is determined by the `size` prop.

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

@@ -9,6 +9,7 @@ examples:
   - user_vertical_size: Vertical Size
   - user_subtitle: Subtitle
   - user_block_content_subtitle_rails: Block Content Subtitle
+  - user_font_options: Font Options
 
   react:
   - user_default: Default
@@ -19,6 +20,7 @@ examples:
   - user_vertical_size: Vertical Size
   - user_subtitle: Subtitle
   - user_block_content_subtitle_react: Block Content Subtitle
+  - user_font_options: Font Options
 
   swift:
   - user_horizontal_swift: Horizontal

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

@@ -6,3 +6,4 @@ export { default as UserSize } from './_user_size.jsx'
 export { default as UserVerticalSize } from './_user_vertical_size.jsx'
 export { default as UserSubtitle } from './_user_subtitle.jsx'
 export { default as UserBlockContentSubtitleReact } from './_user_block_content_subtitle_react.jsx'
+export { default as UserFontOptions } from './_user_font_options.jsx'

data/app/pb_kits/playbook/pb_user/user.html.erb

@@ -12,12 +12,33 @@
     }) %>
   <% end %>
   <%= content_tag(:div, class: "content_wrapper") do %>
-    <%= pb_rails("title", props: { text: object.name, size: object.title_size, dark: object.dark, bold: object.bold }) %>
-    <%= pb_rails("body", props: {
-      text: "#{object.details}",
-      dark: object.dark,
-      color: "light"
-    }) %>
+    <% case object.name_style %>
+      <% when "title" %>
+        <%= pb_rails("title", props: { text: object.name, size: object.name_size, dark: object.dark, bold: object.bold }) %>
+      <% when "body" %>
+        <%= pb_rails("body", props: { text: object.name, dark: object.dark }) %>
+      <% when "caption" %>
+        <%= pb_rails("caption", props: { text: object.name, dark: object.dark, size: object.name_size }) %>
+      <% when "detail" %>
+        <%= pb_rails("detail", props: { text: object.name, dark: object.dark }) %>
+    <% end %>
+    <% case object.title_style %>
+      <% when "body" %>
+        <%= pb_rails("body", props: {
+          text: "#{object.details}",
+          dark: object.dark,
+          color: "light"
+        }) %>
+      <% when "caption" %>
+        <%= pb_rails("caption", props: {
+          text: "#{object.details}",
+          dark: object.dark,
+          color: "light",
+          size: object.title_size
+        }) %>
+      <% when "detail" %>
+        <%= pb_rails("detail", props: { text: "#{object.details}", dark: object.dark }) %>
+    <% end %>
     <% if content %>
       <%= content.presence %>
     <% else %>

data/app/pb_kits/playbook/pb_user/user.rb

@@ -11,6 +11,9 @@ module Playbook
       prop :avatar_url
       prop :bold, type: Playbook::Props::Boolean, default: true
       prop :name
+      prop :name_style, type: Playbook::Props::Enum,
+                        values: %w[title body caption detail],
+                        default: "title"
       prop :orientation, type: Playbook::Props::Enum,
                          values: %w[vertical horizontal],
                          default: "horizontal"
@@ -19,6 +22,9 @@ module Playbook
                   default: "sm"
       prop :subtitle
       prop :title
+      prop :title_style, type: Playbook::Props::Enum,
+                         values: %w[body caption detail],
+                         default: "body"
       prop :territory
 
       def classname
@@ -36,8 +42,18 @@ module Playbook
         end
       end
 
+      def name_size
+        if name_style == "caption"
+          size == "sm" ? "xs" : size
+        else
+          size == "lg" ? 3 : 4
+        end
+      end
+
       def title_size
-        size == "lg" ? 3 : 4
+        if title_style == "caption"
+          size == "sm" ? "xs" : size
+        end
       end
 
       def details

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

@@ -1,5 +1,5 @@
 import React from 'react'
-import { render, screen } from '../utilities/test-utils'
+import { render, screen , cleanup} from '../utilities/test-utils'
 import User from './_user'
 import Caption from "../pb_caption/_caption"
 
@@ -40,3 +40,184 @@ 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/tokens/_colors.scss

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

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

@@ -1,4 +1,4 @@
-import { omit } from './object'
+import { omit } from 'lodash'
 import { camelToSnakeCase } from './text'
 
 import {

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

@@ -1,7 +1,6 @@
 /* 🛠️ 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 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 =>
@@ -25,235 +24,94 @@ export const omitBy = (obj: Record<string, any>, predicate: (value: any, key: st
   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]
+      result[key] = obj[key];
     }
-    return result
+    return result;
   }, {})
 }
 
-export const omit = (
-  obj: Record<string, any>,
-  ...paths: (string | string[])[]
-): Record<string, any> => {
-  if (obj === null || typeof obj !== 'object') return {}
-  const keysToOmit = new Set<string>()
-  paths.forEach(p => {
-    if (Array.isArray(p)) {
-      p.forEach(key => keysToOmit.add(key))
-    } else {
-      keysToOmit.add(p)
-    }
-  })
-  const result: Record<string, any> = {}
-  for (const key in obj) {
-    if (!keysToOmit.has(key)) {
-      result[key] = obj[key]
-    }
-  }
-  return result
-}
-
 export const noop = (): void => {
   // empty
-}
-
-export const cloneDeep = (value: any): any => {
-  if (value === null || typeof value !== 'object') {
-    return value
-  }
-  if (Array.isArray(value)) {
-    return value.map(cloneDeep)
-  }
-  if (value instanceof Date) {
-    return new Date(value.getTime())
-  }
-  if (value instanceof RegExp) {
-    return new RegExp(value.source, value.flags)
-  }
-  const clonedObj: any = {}
-  for (const key in value) {
-    if (Object.prototype.hasOwnProperty.call(value, key)) {
-      clonedObj[key] = cloneDeep(value[key])
-    }
-  }
-  return clonedObj
-}
+};
 
 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)
+    !!obj && typeof obj === 'object' && !Array.isArray(obj);
 
-  const result: Record<string, unknown> = {}
+  const result: Record<string, unknown> = {};
 
   for (const obj of objects) {
-    if (!obj || typeof obj !== 'object') continue
+    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]
+      const oldVal = result[key];
+      const newVal = (obj as Record<string, unknown>)[key];
 
       if (Array.isArray(oldVal) && Array.isArray(newVal)) {
-        result[key] = newVal
+        result[key] = newVal;
       } else if (isPlainObject(oldVal) && isPlainObject(newVal)) {
-        result[key] = merge(oldVal, newVal)
+        result[key] = merge(oldVal, newVal);
       } else if (Array.isArray(oldVal) && isPlainObject(newVal)) {
-        result[key] = oldVal
+        result[key] = oldVal;
       } else if (isPlainObject(oldVal) && Array.isArray(newVal)) {
-        result[key] = oldVal
+        result[key] = oldVal;
       } else {
-        result[key] = newVal
+        result[key] = newVal;
       }
     }
   }
-  return result
+  return result;
 }
 
 const createIteratee = (predicate: any) => {
   if (typeof predicate === 'function') {
-    return predicate
+    return predicate;
   }
   if (typeof predicate === 'string') {
-    return (obj: any) => obj[predicate]
+    return (obj: any) => obj[predicate];
   }
   if (Array.isArray(predicate)) {
-    const [key, value] = predicate
-    return (obj: any) => obj[key] === value
+    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
+          if (obj[key] !== predicate[key]) return false;
         }
       }
-      return true
-    }
+      return true;
+    };
   }
-  return () => false
-}
+  return () => false;
+};
 
 export const filter = <T>(array: T[], predicate: any): T[] => {
-  const iteratee = createIteratee(predicate)
-  return array.filter(iteratee)
-}
+  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)
-}
+  const iteratee = createIteratee(predicate);
+  return array.find(iteratee);
+};
 
-export const partial = <F extends (...args: any[]) => any>(
+export const partial = <F extends (...args: unknown[]) => unknown>(
   fn: F,
-  ...partials: any[]
-): ((...args: any[]) => ReturnType<F>) => {
-  const placeholder = partial.placeholder
-  return (...args: any[]): ReturnType<F> => {
-    let argIndex = 0
+  ...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>
-  }
-}
+    );
+    return fn(...(finalArgs.concat(args.slice(argIndex)) as Parameters<F>)) as ReturnType<F>;
+  };
+};
 
-partial.placeholder = Symbol()
-export const _ = partial.placeholder
-
-export const map = <T, U>(
-  collection: T[] | Record<string, T>,
-  iteratee?: ((value: T, index: number | string, collection: T[] | Record<string, T>) => U) | string
-): U[] => {
-  const fn =
-    typeof iteratee === "function"
-      ? iteratee
-      : typeof iteratee === "string"
-      ? (item: T) => (item as any)[iteratee]
-      : (item: T) => item as unknown as U
-
-  if (Array.isArray(collection)) {
-    return collection.map((value, index) => fn(value, index, collection))
-  }
-  return Object.keys(collection).map(key => fn(collection[key], key, collection))
-}
-
-export const debounce = <F extends (...args: any[]) => any>(
-  func: F,
-  wait = 0,
-  options: { leading?: boolean; maxWait?: number; trailing?: boolean } = {}
-): F & { cancel: () => void; flush: () => any } => {
-  let timerId: ReturnType<typeof setTimeout> | null = null
-  let lastArgs: any
-  let lastThis: any
-  let lastCallTime = 0
-  let lastInvokeTime = 0
-  let result: any
-
-  const leading = !!options.leading
-  const trailing = options.trailing === undefined ? true : !!options.trailing
-  const maxWait = options.maxWait
-
-  const invoke = (time: number) => {
-    result = func.apply(lastThis, lastArgs)
-    lastInvokeTime = time
-    lastArgs = lastThis = null
-    return result
-  }
-
-  const startTimer = (pendingFunc: () => void, delay: number) => setTimeout(pendingFunc, delay)
-
-  const remainingWait = (time: number) => {
-    const timeSinceLastCall = time - lastCallTime
-    const timeSinceLastInvoke = time - lastInvokeTime
-    const timeWaiting = wait - timeSinceLastCall
-    return maxWait !== undefined ? Math.min(timeWaiting, maxWait - timeSinceLastInvoke) : timeWaiting
-  }
-
-  const shouldInvoke = (time: number) => {
-    const timeSinceLastCall = time - lastCallTime
-    const timeSinceLastInvoke = time - lastInvokeTime
-    return lastCallTime === 0 ||
-      timeSinceLastCall >= wait ||
-      timeSinceLastCall < 0 ||
-      (maxWait !== undefined && timeSinceLastInvoke >= maxWait)
-  }
-
-  const debounced = (...args: any[]) => {
-    const time = Date.now()
-    lastArgs = args
-    // 'this' is not lexically captured in arrow functions, so if needed, bind explicitly
-    lastThis = this
-    lastCallTime = time
-
-    if (shouldInvoke(time)) {
-      if (timerId === null) {
-        timerId = startTimer(() => {
-          timerId = null
-          invoke(Date.now())
-        }, remainingWait(time))
-      }
-    }
-    return result
-  }
-
-  debounced.cancel = () => {
-    if (timerId !== null) {
-      clearTimeout(timerId)
-    }
-    timerId = null
-    lastArgs = lastThis = null
-    lastCallTime = 0
-  }
-
-  debounced.flush = () => {
-    if (timerId !== null) {
-      clearTimeout(timerId)
-      timerId = null
-      return invoke(Date.now())
-    }
-    return result
-  }
-
-  return debounced as F & { cancel: () => void; flush: () => any }
-}
+partial.placeholder = Symbol();
+export const _ = partial.placeholder;