playbook_ui 6.1.0 → 7.0.0.pre.alpha1

data/app/pb_kits/playbook/pb_legend/_legend.html.erb

@@ -1,11 +1 @@
-<%= content_tag(:div, object.text,
-    aria: object.aria,
-    id: object.id,
-    data: object.data,
-    class: object.classname) do %>
-  <%= pb_rails("body", props: {color: object.body_color}) do %>
-    <span class="pb_legend_indicator_circle"></span>
-    <%= pb_rails("title", props: { dark: object.dark, text: object.prefix_text, tag: "span", size: 4 }) %>
-    <%= object.text %>
-  <% end %>
-<% end %>
+<%= react_component('Legend', object.chart_options) %>

data/app/pb_kits/playbook/pb_legend/_legend.jsx

@@ -9,7 +9,7 @@ import { Body, Title } from '../'
 
 type LegendProps = {
   aria?: object,
-  className?: String,
+  className?: string,
   color?: | "data_1"
     | "data_2"
     | "data_3"
@@ -17,11 +17,11 @@ type LegendProps = {
     | "data_5"
     | "data_6"
     | "data_7",
-  dark?: Boolean,
+  dark?: boolean,
   data?: object,
-  id?: String,
-  prefixText?: String,
-  text: String,
+  id?: string,
+  prefixText?: string,
+  text: string,
 }
 
 const Legend = (props: LegendProps) => {

data/app/pb_kits/playbook/pb_legend/legend.rb

@@ -25,6 +25,13 @@ module Playbook
       def classname
         generate_classname("pb_legend_kit", color, dark ? "dark" : "light")
       end
+
+      def chart_options
+        {
+          color: color,
+          text: text,
+        }
+      end
     end
   end
 end

data/app/pb_kits/playbook/pb_line_graph/_line_graph.html.erb

@@ -1,13 +1 @@
-<%= content_tag(:div, "",
-    aria: object.aria,
-    id: object.id,
-    data: object.data,
-    class: object.classname
-    ) %>
-<% content_for :pb_js do %>
-  <%= javascript_tag do %>
-    window.addEventListener('DOMContentLoaded', function() {
-      new pbChart('.selector', <%= object.chart_options %>)
-    })
-  <% end %>
-<% end %>
+<%= react_component('LineGraph', object.chart_options) %>

data/app/pb_kits/playbook/pb_line_graph/_line_graph.jsx

@@ -6,24 +6,24 @@ import { globalProps } from '../utilities/globalProps.js'
 import { pbChart } from '../'
 
 type LineGraphProps = {
-  axisTitle?: String,
-  xAxisCategories: Array,
-  yAxisMin: Number,
-  yAxisMax: Number,
-  className?: String,
-  chartData: Array<{
-      name: String,
-      data: Array<Number>,
+  axisTitle?: string,
+  xAxisCategories: array,
+  yAxisMin: number,
+  yAxisMax: number,
+  className?: string,
+  chartData: array<{
+      name: string,
+      data: array<number>,
   }>,
-  gradient?: Boolean,
-  id: String,
-  pointStart: Number,
-  subTitle?: String,
-  title: String,
-  type?: String,
-  legend?: Boolean,
-  toggleLegendClick?: Boolean,
-  height?: String,
+  gradient?: boolean,
+  id: string,
+  pointStart: number,
+  subTitle?: string,
+  title: string,
+  type?: string,
+  legend?: boolean,
+  toggleLegendClick?: boolean,
+  height?: string,
 }
 
 export default class LineGraph extends React.Component<LineGraphProps> {

data/app/pb_kits/playbook/pb_line_graph/line_graph.rb

@@ -44,7 +44,7 @@ module Playbook
           legend: legend,
           toggleLegendClick: toggle_legend_click,
           height: height,
-        }.to_json.html_safe
+        }
       end
 
       def classname

data/app/pb_kits/playbook/pb_list/_list.jsx

@@ -7,18 +7,18 @@ import { globalProps } from '../utilities/globalProps.js'
 
 type ListProps = {
   aria?: object,
-  borderless: Boolean,
-  className?: String,
-  children: Array<Node> | Node,
-  dark: Boolean,
+  borderless: boolean,
+  className?: string,
+  children: array<Node> | Node,
+  dark: boolean,
   data?: object,
-  id?: String,
+  id?: string,
   layout: "" | "left" | "right",
-  ordered: Boolean,
-  role?: String,
-  tabIndex?: String,
-  size?: String,
-  xpadding: Boolean,
+  ordered: boolean,
+  role?: string,
+  tabIndex?: string,
+  size?: string,
+  xpadding: boolean,
 }
 
 const List = (props: ListProps) => {

data/app/pb_kits/playbook/pb_list/_list_item.jsx

@@ -7,11 +7,11 @@ import { globalProps } from '../utilities/globalProps.js'
 
 type ListItemProps = {
   aria?: object,
-  children: Array<Node> | Node,
-  className?: String,
+  children: array<Node> | Node,
+  className?: string,
   data?: object,
-  id?: String,
-  tabIndex?: String,
+  id?: string,
+  tabIndex?: string,
 }
 
 const ListItem = (props: ListItemProps) => {

data/app/pb_kits/playbook/pb_loading_inline/_loading_inline.jsx

@@ -8,10 +8,10 @@ import { globalProps } from '../utilities/globalProps.js'
 
 type LoadingInlineProps = {
   align?: "left" | "center" | "right",
-  className?: String,
-  dark?: Boolean,
-  data?: String,
-  id?: String,
+  className?: string,
+  dark?: boolean,
+  data?: string,
+  id?: string,
 }
 
 const LoadingInline = (props: LoadingInlineProps) => {

data/app/pb_kits/playbook/pb_logistic/_logistic.jsx

@@ -16,14 +16,14 @@ const dateString = (value: DateTime) => {
 
 type LogisticProps = {
   aria?: object,
-  className?: String,
-  dark?: Boolean,
+  className?: string,
+  dark?: boolean,
   data?: object,
-  date: String,
-  id?: String,
-  link?: String,
-  projectName?: String,
-  projectNumber?: Number,
+  date: string,
+  id?: string,
+  link?: string,
+  projectName?: string,
+  projectNumber?: number,
 }
 
 const Logistic = (props: LogisticProps) => {

data/app/pb_kits/playbook/pb_message/_message.jsx

@@ -8,15 +8,15 @@ import { globalProps } from '../utilities/globalProps.js'
 
 type MessageProps = {
   aria: object,
-  avatarName?: String,
-  avatarStatus?: String,
-  avatarUrl?: String,
-  className?: String,
+  avatarName?: string,
+  avatarStatus?: string,
+  avatarUrl?: string,
+  className?: string,
   data?: object,
-  id?: String,
-  label?: String,
-  message: String,
-  timestamp?: String,
+  id?: string,
+  label?: string,
+  message: string,
+  timestamp?: string,
 }
 
 const Message = (props: MessageProps) => {

data/app/pb_kits/playbook/pb_multiple_users/_multiple_users.jsx

@@ -7,11 +7,11 @@ import { Avatar } from '../'
 import { globalProps } from '../utilities/globalProps.js'
 
 type MultipleUsersProps = {
-  className?: String,
-  id?: String,
-  maxDisplayedUsers?: Number,
-  reverse?: Boolean,
-  users: Array<Object>,
+  className?: string,
+  id?: string,
+  maxDisplayedUsers?: number,
+  reverse?: boolean,
+  users: array<object>,
 }
 
 const MultipleUsers = (props: MultipleUsersProps) => {

data/app/pb_kits/playbook/pb_multiple_users_stacked/_multiple_users_stacked.jsx

@@ -9,11 +9,11 @@ import { Avatar, Badge } from '../'
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
 
 type MultipleUsersStackedProps = {
-  className?: String,
-  id?: String,
+  className?: string,
+  id?: string,
   data?: object,
   aria?: object,
-  users: Array<Object>,
+  users: array<object>,
 }
 
 const MultipleUsersStacked = (props: MultipleUsersStackedProps) => {

data/app/pb_kits/playbook/pb_nav/_item.jsx

@@ -4,11 +4,11 @@ import React from 'react'
 import { Icon } from '../'
 
 type NavItemProps = {
-  text: String,
-  link: String,
-  iconLeft: String,
-  iconRight: String,
-  active?: Boolean,
+  text: string,
+  link: string,
+  iconLeft: string,
+  iconRight: string,
+  active?: boolean,
   children: React.Node,
   onClick?: EventHandler,
 }

data/app/pb_kits/playbook/pb_nav/_nav.jsx

@@ -7,12 +7,12 @@ import { buildCss } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps.js'
 
 type NavProps = {
-  title: String,
+  title: string,
   orientation?: "vertical" | "horizontal",
-  link: String,
+  link: string,
   children?: React.Node,
-  className?: String | Array<String>,
-  highlight?: Boolean,
+  className?: string | array<string>,
+  highlight?: boolean,
   variant?: "normal" | "subtle",
   onClick?: EventHandler,
 }

data/app/pb_kits/playbook/pb_online_status/_online_status.jsx

@@ -7,9 +7,9 @@ import { globalProps } from '../utilities/globalProps.js'
 import { buildDataProps } from '../utilities/props'
 
 type OnlineStatusProps = {
-  className?: String,
+  className?: string,
   data?: object,
-  id?: String,
+  id?: string,
   status?: "online" | "offline" | "away",
 }
 

data/app/pb_kits/playbook/pb_person/_person.jsx

@@ -14,11 +14,11 @@ import { Body, Title } from '../'
 
 type PersonProps = {
   aria?: object,
-  className?: String | Array<String>,
+  className?: string | array<string>,
   data?: object,
-  firstName: String,
-  id?: String,
-  lastName: String,
+  firstName: string,
+  id?: string,
+  lastName: string,
 }
 
 const Person = (props: PersonProps) => {

data/app/pb_kits/playbook/pb_person_contact/_person_contact.jsx

@@ -14,20 +14,20 @@ import { globalProps } from '../utilities/globalProps.js'
 import { Caption, Contact, Person } from '../'
 
 type ContactItem = {
-  contactType: String,
-  contactValue: String,
-  contactDetail: String,
+  contactType: string,
+  contactValue: string,
+  contactDetail: string,
 }
 
 type PersonContactProps = {
   aria?: object,
-  className?: String | Array<String>,
-  dark?: Boolean,
+  className?: string | array<string>,
+  dark?: boolean,
   data?: object,
-  firstName: String,
-  id?: String,
-  lastName: String,
-  contacts?: Array<ContactItem>,
+  firstName: string,
+  id?: string,
+  lastName: string,
+  contacts?: array<ContactItem>,
 }
 
 const PersonContact = (props: PersonContactProps) => {
@@ -73,22 +73,23 @@ const PersonContact = (props: PersonContactProps) => {
             contactDetail={contactObject.contactDetail}
             contactType={contactObject.contactType}
             contactValue={contactObject.contactValue}
-            key={index}
+            key={`valid-contact-${index}`}
         />
-            ))}
+      ))}
       {wrongContacts().map((contactObject, index) => (
-        <>
+        <div key={`wrong-contact-caption-wrapper-${index}`}>
           <Caption
               className="wrong_numbers"
+              key={`wrong-contact-caption-${index}`}
               text="wrong number"
           />
           <Contact
               contactType={contactObject.contactType}
               contactValue={contactObject.contactValue}
-              key={index}
+              key={`wrong-contact-${index}`}
           />
-        </>
-          ))}
+        </div>
+      ))}
     </div>
   )
 }

data/app/pb_kits/playbook/pb_person_contact/docs/_person_contact_with_wrong_numbers.jsx

@@ -5,6 +5,7 @@ const PersonContactWithWrongNumbers = () => {
   return (
     <>
       <PersonContact
+          key="person-contact-1"
           contacts={[
             {
               contactType: 'email',

data/app/pb_kits/playbook/pb_pill/_pill.jsx

@@ -7,9 +7,9 @@ import Title from '../pb_title/_title.jsx'
 import { globalProps } from '../utilities/globalProps.js'
 
 type PillProps = {
-  className?: String,
-  id?: String,
-  text: String,
+  className?: string,
+  id?: string,
+  text: string,
   variant?: "success" | "warning" | "error" | "info" | "neutral",
 }
 

data/app/pb_kits/playbook/pb_popover/_popover.jsx

@@ -16,12 +16,12 @@ import classnames from 'classnames'
 import { globalProps } from '../utilities/globalProps.js'
 
 type PbPopoverProps = {
-  className?: String,
+  className?: string,
   closeOnClick?: "outside" | "inside",
-  offset?: Boolean,
+  offset?: boolean,
   reference: PopperReference,
-  show?: Boolean,
-  shouldClosePopover?: () => Boolean,
+  show?: boolean,
+  shouldClosePopover?: () => boolean,
 } & PopperProps
 
 // Prop enabled default modifiers here

data/app/pb_kits/playbook/pb_progress_pills/_progress_pills.jsx

@@ -13,15 +13,15 @@ import {
 import { globalProps } from '../utilities/globalProps.js'
 
 type ProgressPillsProps = {
-  active?: Number,
+  active?: number,
   aria?: object,
-  className?: String,
+  className?: string,
   data?: object,
-  id?: String,
-  steps?: Number,
-  title?: String,
-  value?: String,
-  dark?: Boolean,
+  id?: string,
+  steps?: number,
+  title?: string,
+  value?: string,
+  dark?: boolean,
 }
 
 const showSteps = (steps, active, dark) => {