playbook_ui 14.15.0.pre.alpha.play1949lodashremoval3of36758 → 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.test.js

@@ -1,4 +1,4 @@
-import { isEmpty, get, isString, uniqueId, omitBy, noop, merge, filter, find, partial, map, cloneDeep, omit, debounce } from './object';
+import { isEmpty, get, isString, uniqueId, omitBy, noop, merge, filter, find, partial } from './object';
 
 describe('Lodash functions', () => {
   describe('isEmpty', () => {
@@ -234,152 +234,4 @@ describe('Lodash functions', () => {
       expect(joinPartial('b', 'c')).toBe('a_b_c');
     });
   });
-
-  describe('map', () => {
-    test('maps over an array with a function iteratee', () => {
-      const arr = [1, 2, 3];
-      const result = map(arr, (num) => num * 2);
-      expect(result).toEqual([2, 4, 6]);
-    });
-
-    test('maps over an array with a string iteratee', () => {
-      const arr = [{ value: 1 }, { value: 2 }, { value: 3 }];
-      const result = map(arr, 'value');
-      expect(result).toEqual([1, 2, 3]);
-    });
-
-    test('maps over an object with a function iteratee', () => {
-      const obj = { a: 1, b: 2, c: 3 };
-      const result = map(obj, (val, key) => key + val);
-      expect(result.sort()).toEqual(['a1', 'b2', 'c3'].sort());
-    });
-
-    test('maps over an object with a string iteratee', () => {
-      const obj = {
-        one: { num: 1 },
-        two: { num: 2 },
-        three: { num: 3 },
-      };
-      const result = map(obj, 'num');
-      expect(result.sort()).toEqual([1, 2, 3].sort());
-    });
-
-    test('returns original values if no iteratee provided', () => {
-      const arr = [1, 2, 3];
-      const result = map(arr);
-      expect(result).toEqual([1, 2, 3]);
-    });
-  });
-
-  describe('cloneDeep', () => {
-    test('clones primitive values', () => {
-      expect(cloneDeep(42)).toBe(42);
-      expect(cloneDeep('test')).toBe('test');
-      expect(cloneDeep(null)).toBe(null);
-    });
-
-    test('clones arrays deeply', () => {
-      const arr = [1, [2, 3]];
-      const cloned = cloneDeep(arr);
-      expect(cloned).toEqual(arr);
-      cloned[1][0] = 99;
-      expect(arr[1][0]).toBe(2);
-    });
-
-    test('clones objects deeply', () => {
-      const obj = { a: { b: 2 } };
-      const cloned = cloneDeep(obj);
-      expect(cloned).toEqual(obj);
-      cloned.a.b = 99;
-      expect(obj.a.b).toBe(2);
-    });
-
-    test('clones Date objects', () => {
-      const date = new Date();
-      const cloned = cloneDeep(date);
-      expect(cloned).not.toBe(date);
-      expect(cloned.getTime()).toBe(date.getTime());
-    });
-
-    test('clones RegExp objects', () => {
-      const regex = /test/gi;
-      const cloned = cloneDeep(regex);
-      expect(cloned).not.toBe(regex);
-      expect(cloned.source).toBe(regex.source);
-      expect(cloned.flags).toBe(regex.flags);
-    });
-  });
-
-  describe('omit', () => {
-    test('omits specified keys from object', () => {
-      const obj = { a: 1, b: 2, c: 3 };
-      expect(omit(obj, 'a', 'c')).toEqual({ b: 2 });
-    });
-
-    test('supports array of keys to omit', () => {
-      const obj = { a: 1, b: 2, c: 3 };
-      expect(omit(obj, ['b'])).toEqual({ a: 1, c: 3 });
-    });
-
-    test('returns empty object for null or non-object input', () => {
-      expect(omit(null, 'a')).toEqual({});
-      expect(omit("string", 'a')).toEqual({});
-    });
-
-    test('returns original object if no keys match', () => {
-      const obj = { a: 1, b: 2 };
-      expect(omit(obj, 'c')).toEqual({ a: 1, b: 2 });
-    });
-  });
-
-  describe('debounce', () => {
-    beforeEach(() => {
-      jest.useFakeTimers();
-    });
-
-    afterEach(() => {
-      jest.useRealTimers();
-    });
-
-    test('delays execution until wait time has passed', () => {
-      const func = jest.fn();
-      const debounced = debounce(func, 1000);
-      debounced();
-      expect(func).not.toHaveBeenCalled();
-      jest.advanceTimersByTime(500);
-      expect(func).not.toHaveBeenCalled();
-      jest.advanceTimersByTime(500);
-      expect(func).toHaveBeenCalledTimes(1);
-    });
-
-    test('calls function only once when called repeatedly', () => {
-      const func = jest.fn();
-      const debounced = debounce(func, 1000);
-      debounced();
-      debounced();
-      debounced();
-      jest.advanceTimersByTime(1000);
-      expect(func).toHaveBeenCalledTimes(1);
-    });
-
-    test('immediate option calls function on first call', () => {
-      const func = jest.fn();
-      const debounced = debounce(func, 1000, true);
-      debounced();
-      expect(func).toHaveBeenCalledTimes(1);
-      debounced();
-      debounced();
-      jest.advanceTimersByTime(1000);
-      expect(func).toHaveBeenCalledTimes(1);
-    });
-
-    test('subsequent call after wait period works with immediate option', () => {
-      const func = jest.fn();
-      const debounced = debounce(func, 1000, true);
-      debounced();
-      jest.advanceTimersByTime(1100);
-      debounced();
-      expect(func).toHaveBeenCalledTimes(2);
-    });
-  });
 });