playbook_ui 14.16.0.pre.rc.5 → 14.16.0

data/app/pb_kits/playbook/pb_treemap_chart/_treemap_chart.tsx

@@ -10,7 +10,7 @@ import { highchartsTheme } from "../pb_dashboard/pbChartsLightTheme";
 import { highchartsDarkTheme } from "../pb_dashboard/pbChartsDarkTheme";
 import mapColors from "../pb_dashboard/pbChartsColorsHelper";
 import treemap from 'highcharts/modules/treemap'
-import { merge } from 'lodash'
+import { merge } from '../utilities/object'
 
 type TreemapChartProps = {
   chartData: {

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

@@ -126,6 +126,9 @@
         color: $text_lt_default;
       }
       &__control {
+        &--is-disabled {
+          background-color: shade($white, 5%);
+        }
         &--is-focused {
           @include pb_textarea_focus;
           @include transition_default;
@@ -252,6 +255,7 @@
           color: $text_dk_default;
         }
         &__control {
+        
           &--is-focused {
             @include pb_textarea_focus;
             @include transition_default;

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

@@ -38,6 +38,7 @@ type TypeaheadProps = {
   createable?: boolean,
   dark?: boolean,
   data?: { [key: string]: string },
+  disabled?: boolean,
   error?: string,
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
@@ -79,6 +80,7 @@ const Typeahead = forwardRef<HTMLInputElement, TypeaheadProps>(({
   createable,
   error = "",
   data = {},
+  disabled = false,
   getOptionLabel,
   getOptionValue,
   htmlOptions = {},
@@ -205,6 +207,7 @@ const Typeahead = forwardRef<HTMLInputElement, TypeaheadProps>(({
       <Tag
           classNamePrefix="typeahead-kit-select"
           error={error}
+          isDisabled={disabled}
           onChange={handleOnChange}
           {...selectProps}
       />

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_disabled.html.erb

@@ -0,0 +1,19 @@
+<%
+  options = [
+    { label: 'Orange', value: '#FFA500' },
+    { label: 'Red', value: '#FF0000' },
+    { label: 'Green', value: '#00FF00' },
+    { label: 'Blue', value: '#0000FF' },
+  ]
+%>
+
+<%= pb_rails("typeahead", props: {
+    id: "typeahead-disabled",
+    disabled: true,
+    placeholder: "All Colors",
+    options: options,
+    label: "Colors",
+    name: :foo,
+    is_multi: false
+  })
+%>

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

@@ -0,0 +1,23 @@
+import React from 'react'
+
+import Typeahead from '../_typeahead'
+
+const options = [
+  { label: 'Orange', value: '#FFA500' },
+  { label: 'Red', value: '#FF0000' },
+  { label: 'Green', value: '#00FF00' },
+  { label: 'Blue', value: '#0000FF' },
+]
+
+const TypeaheadDisabled = (props) => {
+  return (
+    <Typeahead
+        disabled
+        label="Colors"
+        options={options}
+        {...props}
+    />
+  )
+}
+
+export default TypeaheadDisabled

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

@@ -14,6 +14,7 @@ examples:
     - typeahead_truncated_text: Truncated Text
     - typeahead_dynamic_options: Dynamic Options
     - typeahead_dynamic_options_pure_rails: Dynamic Options (Pure Rails)
+    - typeahead_disabled: Disabled
 
   react:
     - typeahead_default: Default
@@ -32,3 +33,4 @@ examples:
     - typeahead_margin_bottom: Margin Bottom
     - typeahead_with_pills_color: With Pills (Custom Color)
     - typeahead_truncated_text: Truncated Text
+    - typeahead_disabled: Disabled

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

@@ -14,3 +14,4 @@ export { default as TypeaheadMarginBottom } from './_typeahead_margin_bottom.jsx
 export { default as TypeaheadWithPillsColor } from './_typeahead_with_pills_color.jsx'
 export { default as TypeaheadTruncatedText } from './_typeahead_truncated_text.jsx'
 export { default as TypeaheadReactHook } from './_typeahead_react_hook.jsx'
+export { default as TypeaheadDisabled } from './_typeahead_disabled.jsx'

data/app/pb_kits/playbook/pb_typeahead/typeahead.rb

@@ -52,6 +52,8 @@ module Playbook
                                 default: {}
       prop :search_context_selector, type: Playbook::Props::String,
                                      default: nil
+      prop :disabled, type: Playbook::Props::Boolean,
+                      default: false
 
       def classname
         default_margin_bottom = margin_bottom.present? ? "" : " mb_sm"
@@ -100,6 +102,7 @@ module Playbook
           searchContextSelector: search_context_selector,
           optionsByContext: options_by_context,
           clearOnContextChange: clear_on_context_change,
+          disabled: disabled,
         }
 
         base_options[:getOptionLabel] = get_option_label if get_option_label.present?

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

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

@@ -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,