RubyGems - playbook_ui - Versions diffs - 14.16.0.pre.alpha.play1964tablekitheadertextstylefix7091 → 14.16.0.pre.rc.0 - Mend

playbook_ui 14.16.0.pre.alpha.play1964tablekitheadertextstylefix7091 → 14.16.0.pre.rc.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 (562) hide show

data/app/pb_kits/playbook/pb_typeahead/index.ts CHANGED Viewed

@@ -1,5 +1,5 @@
 import PbEnhancedElement from '../pb_enhanced_element'
-import { debounce } from '../utilities/object'
+import { debounce } from 'lodash'
 export default class PbTypeahead extends PbEnhancedElement {
   _searchInput: HTMLInputElement
@@ -284,4 +284,4 @@ export default class PbTypeahead extends PbEnhancedElement {
     if (visible) visibilityProperty = '1'
     this.resultsLoadingIndicator.style.opacity = visibilityProperty
   }
-}
+}

data/app/pb_kits/playbook/pb_typeahead/typeahead.html.erb CHANGED Viewed

@@ -1,8 +1,11 @@
 <% if object.is_react? %>
   <%= react_component('Typeahead', object.typeahead_react_options) %>
 <% else %>
-  <%= pb_content_tag(:div,
-                     class: object.classname + object.inline_class) do %>
+  <%= content_tag(:div,
+                id: object.id,
+                data: object.data,
+                class: object.classname + object.inline_class,
+                **combined_html_options) do %>
     <div class="pb_typeahead_wrapper">
       <div class="pb_typeahead_loading_indicator" data-pb-typeahead-kit-loading-indicator>
         <%= pb_rails("icon", props: {

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

@@ -52,8 +52,6 @@ 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"
@@ -102,7 +100,6 @@ 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 CHANGED Viewed

@@ -7,8 +7,6 @@ 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",
@@ -22,13 +20,11 @@ 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 => {
@@ -44,13 +40,11 @@ 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)
@@ -64,76 +58,6 @@ 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
@@ -152,8 +76,19 @@ const User = (props: UserProps): React.ReactElement => {
         />
       }
       <div className="content_wrapper">
-        {renderNameComponent()}
-        {renderTitleComponent()}
+        <Title
+            bold={bold}
+            dark={dark}
+            size={size == 'lg' ? 3 : 4}
+            text={name}
+        />
+        <Body
+            color="light"
+            dark={dark}
+            variant={null}
+        >
+          {territory === '' ? title : `${territory} • ${title}`}
+        </Body>
         { typeof(subtitle) === 'string' &&
           <Body
               color="light"

data/app/pb_kits/playbook/pb_user/docs/_user_block_content_subtitle_react.jsx CHANGED Viewed

@@ -1,10 +1,5 @@
 import React from "react"
-import Caption from '../../pb_caption/_caption'
-import Contact from '../../pb_contact/_contact'
-import Flex from '../../pb_flex/_flex'
-import Icon from '../../pb_icon/_icon'
-import User from '../../pb_user/_user'
+import { Caption, Contact, Flex, Icon, User } from "playbook-ui"
 const MentorSubtitle = (
   <Flex>

data/app/pb_kits/playbook/pb_user/docs/_user_default.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React from 'react'
-import User from '../../pb_user/_user'
+import { User } from 'playbook-ui'
 const UserDefault = (props) => {
   return (

data/app/pb_kits/playbook/pb_user/docs/_user_light_weight.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React from 'react'
-import User from '../../pb_user/_user'
+import { User } from 'playbook-ui'
 const UserLightWeight = (props) => {
   return (

data/app/pb_kits/playbook/pb_user/docs/_user_size.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React from 'react'
-import User from '../../pb_user/_user'
+import { User } from 'playbook-ui'
 const UserDefault = (props) => {
   return (

data/app/pb_kits/playbook/pb_user/docs/_user_subtitle.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React from "react"
-import User from '../../pb_user/_user'
+import { User } from "playbook-ui"
 const UserSubtitle = (props) => {
   return (

data/app/pb_kits/playbook/pb_user/docs/_user_text_only.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React from 'react'
-import User from '../../pb_user/_user'
+import { User } from 'playbook-ui'
 const UserTextOnly = (props) => {
   return (

data/app/pb_kits/playbook/pb_user/docs/_user_vertical_size.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React from 'react'
-import User from '../../pb_user/_user'
+import { User } from 'playbook-ui'
 const UserVerticalSize = (props) => {
   return (

data/app/pb_kits/playbook/pb_user/docs/_user_with_territory.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React from 'react'
-import User from '../../pb_user/_user'
+import { User } from 'playbook-ui'
 const UserWithTerritory = (props) => {
   return (

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

@@ -9,7 +9,6 @@ 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
@@ -20,7 +19,6 @@ 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,4 +6,3 @@ 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

@@ -1,4 +1,9 @@
-<%= pb_content_tag do %>
+<%= content_tag(:div,
+    aria: object.aria,
+    class: object.classname,
+    data: object.data,
+    id: object.id,
+    **combined_html_options) do %>
   <% if object.avatar_url.present? || object.avatar %>
     <%= pb_rails("avatar", props: {
       name: object.name,
@@ -7,33 +12,12 @@
     }) %>
   <% end %>
   <%= content_tag(:div, class: "content_wrapper") do %>
-    <% 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 %>
+    <%= 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"
+    }) %>
     <% if content %>
       <%= content.presence %>
     <% else %>

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

@@ -11,9 +11,6 @@ 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"
@@ -22,9 +19,6 @@ 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
@@ -42,18 +36,8 @@ 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
-        if title_style == "caption"
-          size == "sm" ? "xs" : size
-        end
+        size == "lg" ? 3 : 4
       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 , 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_user_badge/user_badge.html.erb CHANGED Viewed

@@ -1,3 +1,8 @@
-<%= pb_content_tag do %>
+<%= content_tag(:div,
+    aria: object.aria,
+    class: object.classname,
+    data: object.data,
+    id: object.id,
+    **combined_html_options) do %>
   <%= content_tag(:div, object.display_badge, class: "pb_user_badge_wrapper") %>
 <% end %>

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

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

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

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

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

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

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

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

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

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