RubyGems - playbook_ui - Versions diffs - 14.16.0.pre.rc.6 → 14.16.0 - Mend

playbook_ui 14.16.0.pre.rc.6 → 14.16.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (80) hide show

data/app/pb_kits/playbook/pb_user/_user.tsx CHANGED Viewed

@@ -7,6 +7,8 @@ import { GlobalProps, globalProps } from '../utilities/globalProps'
 import Avatar from '../pb_avatar/_avatar'
 import Body from '../pb_body/_body'
 import Title from '../pb_title/_title'
+import Caption from '../pb_caption/_caption'
+import Detail from '../pb_detail/_detail'
 type UserProps = {
   align?: "left" | "center" | "right",
@@ -20,11 +22,13 @@ type UserProps = {
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
   name?: string,
+  nameStyle?: "title" | "body" | "caption" | "detail"
   orientation?: "horizontal" | "vertical",
   size?: "sm" | "md" | "lg",
   subtitle?: string | Array<Node> | Node,
   territory?: string,
   title?: string,
+  titleStyle?: "title" | "body" | "caption" | "detail",
 } & GlobalProps
 const User = (props: UserProps): React.ReactElement => {
@@ -40,11 +44,13 @@ const User = (props: UserProps): React.ReactElement => {
     htmlOptions = {},
     id,
     name,
+    nameStyle = 'title',
     orientation = 'horizontal',
     size = 'sm',
     subtitle,
     territory = '',
     title = '',
+    titleStyle = 'body',
   } = props
   const dataProps: {[key: string]: string} = buildDataProps(data)
@@ -58,6 +64,76 @@ const User = (props: UserProps): React.ReactElement => {
   )
   const avatarPresent = avatar || avatarUrl
+  const titleText = territory === '' ? title : `${territory} • ${title}`
+  const renderNameComponent = () => {
+    switch (nameStyle) {
+      case "title":
+        return (
+          <Title
+              bold={bold}
+              dark={dark}
+              size={size === "lg" ? 3 : 4}
+              text={name}
+          />
+        );
+      case "body":
+        return (
+          <Body
+              dark={dark}
+              text={name}
+          />
+        );
+      case "caption":
+        return (
+          <Caption
+              dark={dark}
+              size={size === "sm" ? "xs" : size}
+              text={name}
+          />
+        );
+      case "detail":
+        return (
+          <Detail
+              dark={dark}
+              text={name}
+          />
+        );
+      default:
+        return null;
+    }
+  };
+  const renderTitleComponent = () => {
+    switch (titleStyle) {
+      case "body":
+        return (
+          <Body
+              color="light"
+              dark={dark}
+              text={titleText}
+              variant={null}
+          />
+        );
+      case "caption":
+        return (
+          <Caption
+              dark={dark}
+              size={size === "sm" ? "xs" : size}
+              text={titleText}
+          />
+        );
+      case "detail":
+        return (
+          <Detail
+              dark={dark}
+              text={titleText}
+          />
+        );
+      default:
+        return null;
+    }
+  };
   return (
     <div
@@ -76,19 +152,8 @@ const User = (props: UserProps): React.ReactElement => {
         />
       }
       <div className="content_wrapper">
-        <Title
-            bold={bold}
-            dark={dark}
-            size={size == 'lg' ? 3 : 4}
-            text={name}
-        />
-        <Body
-            color="light"
-            dark={dark}
-            variant={null}
-        >
-          {territory === '' ? title : `${territory} • ${title}`}
-        </Body>
+        {renderNameComponent()}
+        {renderTitleComponent()}
         { typeof(subtitle) === 'string' &&
           <Body
               color="light"

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

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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/object.test.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { isEmpty, get, isString, uniqueId, omitBy } from './object';
+import { isEmpty, get, isString, uniqueId, omitBy, noop, merge, filter, find, partial } from './object';
 describe('Lodash functions', () => {
   describe('isEmpty', () => {
@@ -96,4 +96,142 @@ describe('Lodash functions', () => {
       expect(objWithSmallValues).toEqual(obj);
     });
   });
+  describe('noop', () => {
+    test('should do nothing and return undefined', () => {
+      expect(noop()).toBeUndefined();
+    });
+  });
+  describe('merge', () => {
+    test('merges two objects correctly', () => {
+      const obj1 = { a: 1, b: { x: 10 } };
+      const obj2 = { b: { y: 20 }, c: 3 };
+      expect(merge(obj1, obj2)).toEqual({ a: 1, b: { x: 10, y: 20 }, c: 3 });
+    });
+    test('when keys repeat use last occurrence value', () => {
+      const obj1 = { a: 1 };
+      const obj2 = { b: 2 };
+      const obj3 = { a: 3, c: 4 };
+      expect(merge(obj1, obj2, obj3)).toEqual({ a: 3, b: 2, c: 4 });
+    });
+    test('ignores non-object arguments', () => {
+      expect(merge(null, { a: 1 })).toEqual({ a: 1 });
+      expect(merge(undefined, { a: 1 })).toEqual({ a: 1 });
+    });
+  });
+  describe('filter', () => {
+    test('filters an array using a function predicate', () => {
+      const arr = [1, 2, 3, 4, 5];
+      const isEven = (n) => n % 2 === 0;
+      expect(filter(arr, isEven)).toEqual([2, 4]);
+    });
+    test('filters an array using a string predicate', () => {
+      const arr = [
+        { active: true, name: 'John' },
+        { active: false, name: 'Jane' },
+        { active: true, name: 'Doe' }
+      ];
+      expect(filter(arr, 'active')).toEqual([
+        { active: true, name: 'John' },
+        { active: true, name: 'Doe' }
+      ]);
+    });
+    test('filters an array using an array predicate', () => {
+      const arr = [
+        { type: 'fruit', name: 'apple' },
+        { type: 'vegetable', name: 'carrot' },
+        { type: 'fruit', name: 'banana' }
+      ];
+      expect(filter(arr, ['type', 'fruit'])).toEqual([
+        { type: 'fruit', name: 'apple' },
+        { type: 'fruit', name: 'banana' }
+      ]);
+    });
+    test('filters an array using an object predicate', () => {
+      const arr = [
+        { type: 'fruit', name: 'apple', color: 'red' },
+        { type: 'fruit', name: 'banana', color: 'yellow' },
+        { type: 'vegetable', name: 'carrot', color: 'orange' }
+      ];
+      expect(filter(arr, { type: 'fruit', color: 'red' })).toEqual([
+        { type: 'fruit', name: 'apple', color: 'red' }
+      ]);
+    });
+  });
+  describe('find', () => {
+    test('finds an element using a function predicate', () => {
+      const arr = [1, 2, 3, 4, 5];
+      const greaterThanThree = (n) => n > 3;
+      expect(find(arr, greaterThanThree)).toBe(4);
+    });
+    test('finds an element using a string predicate', () => {
+      const arr = [
+        { active: false, name: 'John' },
+        { active: true, name: 'Jane' },
+        { active: true, name: 'Doe' }
+      ];
+      expect(find(arr, 'active')).toEqual({ active: true, name: 'Jane' });
+    });
+    test('finds an element using an array predicate', () => {
+      const arr = [
+        { type: 'fruit', name: 'apple' },
+        { type: 'vegetable', name: 'carrot' },
+        { type: 'fruit', name: 'banana' }
+      ];
+      expect(find(arr, ['type', 'vegetable'])).toEqual({ type: 'vegetable', name: 'carrot' });
+    });
+    test('finds an element using an object predicate', () => {
+      const arr = [
+        { type: 'fruit', name: 'apple', color: 'red' },
+        { type: 'fruit', name: 'banana', color: 'yellow' },
+        { type: 'vegetable', name: 'carrot', color: 'orange' }
+      ];
+      expect(find(arr, { name: 'banana', color: 'yellow' })).toEqual({ type: 'fruit', name: 'banana', color: 'yellow' });
+    });
+    test('returns undefined if no element matches', () => {
+      const arr = [{ id: 1 }, { id: 2 }];
+      expect(find(arr, { id: 3 })).toBeUndefined();
+    });
+  });
+  describe('partial', () => {
+    function add(a, b, c) {
+      return a + b + c;
+    }
+    test('partials arguments without placeholders', () => {
+      const add5 = partial(add, 2, 3);
+      expect(add5(4)).toBe(9);
+    });
+    test('partials arguments with placeholders', () => {
+      const addWithPlaceholder = partial(add, partial.placeholder, 3, partial.placeholder);
+      expect(addWithPlaceholder(2, 4)).toBe(9);
+    });
+    test('returns correct result when all arguments are pre-filled', () => {
+      const addAll = partial(add, 1, 2, 3);
+      expect(addAll()).toBe(6);
+    });
+    test('appends extra arguments when provided', () => {
+      function join(...args) {
+        return args.join('_');
+      }
+      const joinPartial = partial(join, 'a');
+      expect(joinPartial('b', 'c')).toBe('a_b_c');
+    });
+  });
 });