playbook_ui 4.15.1.alpha1 → 4.16.0

data/app/pb_kits/playbook/pb_star_rating/docs/_star_rating_default.jsx

@@ -0,0 +1,28 @@
+import React from 'react'
+import { StarRating } from '../../'
+
+const StarRatingDefault = () => (
+  <>
+    <StarRating />
+
+    <br />
+
+    <StarRating
+        rating={3}
+    />
+
+    <br />
+
+    <StarRating
+        rating={1.5}
+    />
+
+    <br />
+
+    <StarRating
+        rating={5}
+    />
+  </>
+)
+
+export default StarRatingDefault

data/app/pb_kits/playbook/pb_star_rating/docs/_star_rating_hide.jsx

@@ -0,0 +1,13 @@
+import React from 'react'
+import { StarRating } from '../../'
+
+const StarRatingHide = () => (
+
+  <StarRating
+      hideRating
+      rating={3.5}
+  />
+
+)
+
+export default StarRatingHide

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

@@ -4,5 +4,6 @@ examples:
   - star_rating_default: Default
   - star_rating_hide: Hide Rating Value
 
-
   react:
+  - star_rating_default: Default
+  - star_rating_hide: Hide Rating Value

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

@@ -0,0 +1,3 @@
+export { default as StarRatingDefault } from './_star_rating_default.jsx'
+
+export { default as StarRatingHide } from './_star_rating_hide.jsx'

data/app/pb_kits/playbook/pb_star_rating/star_rating.rb

@@ -9,11 +9,12 @@ module Playbook
 
       prop :hide_rating, type: Playbook::Props::Boolean,
                          default: false
+
       prop :rating, type: Playbook::Props::Numeric,
                     default: 0
 
       def star_count
-        [*1..rating.to_f]
+        rating.floor
       end
 
       def star_full

data/app/pb_kits/playbook/pb_stat_change/docs/_stat_change_default.html.erb

@@ -14,5 +14,5 @@
 
 <%= pb_rails("stat_change", props: {
   change: "neutral",
-  value: 98
+  value: 102
 }) %>

data/app/pb_kits/playbook/pb_stat_change/docs/_stat_change_default.jsx

@@ -20,7 +20,7 @@ const StatChangeDefault = () => {
 
       <StatChange
           change="neutral"
-          value={98}
+          value={102}
       />
     </div>
   )

data/app/pb_kits/playbook/pb_stat_change/stat_change.rb

@@ -10,7 +10,7 @@ module Playbook
       prop :change, type: Playbook::Props::Enum,
                     values: %w[neutral increase decrease],
                     default: "neutral"
-      prop :value, type: Playbook::Props::Percentage
+      prop :value, type: Playbook::Props::Numeric
 
       def status
         case change

data/app/pb_kits/playbook/pb_text_input/_text_input.html.erb

@@ -1,5 +1,7 @@
 <%= content_tag(:div,
-    class: object.classname) do %>
+    aria: object.aria,
+    class: object.classname,
+    data: object.data) do %>
   <% if object.label.present? %>
     <%= pb_rails("caption", props: { text: object.label, dark: object.dark, classname: "pb_text_input_kit_label" }) %>
   <% end %>
@@ -12,9 +14,9 @@
       <% end %>
     <% else %>
       <%= tag(:input,
+          class: "text_input",
+          data: object.validation_data,
           id: object.id,
-          class: object.classname,
-          data: object.data,
           name: object.name,
           pattern: object.validation_pattern,
           placeholder: object.placeholder,

data/app/pb_kits/playbook/pb_text_input/_text_input.jsx

@@ -6,10 +6,18 @@ import {
   Caption,
 } from '../'
 
+import {
+  buildAriaProps,
+  buildDataProps,
+} from '../utilities/props'
+
 type TextInputProps = {
+  aria?: object,
   className: String,
   dark: boolean,
+  data?: object,
   error?: String,
+  id?: String,
   name: String,
   label: String,
   onChange: (String) => void,
@@ -20,9 +28,12 @@ type TextInputProps = {
 }
 
 const TextInput = ({
+  aria = {},
   className,
   dark = false,
+  data = {},
   error,
+  id,
   name,
   label,
   onChange = () => {},
@@ -32,6 +43,8 @@ const TextInput = ({
   children = null,
   ...props
 }: TextInputProps) => {
+  const ariaProps = buildAriaProps(aria)
+  const dataProps = buildDataProps(data)
   const css = classnames([
     `pb_text_input_kit${dark === true ? '_dark' : ''}`,
     className,
@@ -39,7 +52,11 @@ const TextInput = ({
   ])
 
   return (
-    <div className={css}>
+    <div
+        {...ariaProps}
+        {...dataProps}
+        className={css}
+    >
       <Caption
           className="pb_text_input_kit_label"
           dark={dark}
@@ -52,6 +69,7 @@ const TextInput = ({
           <input
               {...props}
               className="text_input"
+              id={id}
               name={name}
               onChange={onChange}
               placeholder={placeholder}

data/app/pb_kits/playbook/pb_text_input/docs/_text_input_default.html.erb

@@ -1,5 +1,31 @@
-<%= pb_rails("text_input", props: { label: "First Name", placeholder: "Enter first name", value: "Timothy Wenhold" }) %>
-<%= pb_rails("text_input", props: { label: "Last Name", placeholder: "Enter last name" }) %>
-<%= pb_rails("text_input", props: { label: "Phone Number", type: "phone", placeholder: "Enter phone number" }) %>
-<%= pb_rails("text_input", props: { label: "Email Address", type: "email", placeholder: "Enter email address" }) %>
-<%= pb_rails("text_input", props: { label: "Zip Code", type: "number", placeholder: "Enter zip code" }) %>
+<%= pb_rails("text_input", props: {
+  label: "First Name",
+  placeholder: "Enter first name",
+  value: "Timothy Wenhold",
+  data: { say: "hi", yell: "go" },
+  aria: { something: "hello"},
+  id: "unique_id"
+}) %>
+
+<%= pb_rails("text_input", props: {
+  label: "Last Name",
+  placeholder: "Enter last name"
+}) %>
+
+<%= pb_rails("text_input", props: {
+    label: "Phone Number",
+    type: "phone",
+    placeholder: "Enter phone number"
+}) %>
+
+<%= pb_rails("text_input", props: {
+    label: "Email Address",
+    type: "email",
+    placeholder: "Enter email address"
+}) %>
+
+<%= pb_rails("text_input", props: {
+    label: "Zip Code",
+    type: "number",
+    placeholder: "Enter zip code"
+}) %>

data/app/pb_kits/playbook/pb_text_input/docs/_text_input_default.jsx

@@ -20,6 +20,9 @@ class TextInputDefault extends React.Component {
     return (
       <div>
         <TextInput
+            aria={{ something: 'hello' }}
+            data={{ say: 'hi', yell: 'go' }}
+            id="unique-id"
             label="First Name"
             placeholder="Enter first name"
             value="Timothy Wenhold"

data/app/pb_kits/playbook/pb_text_input/text_input.rb

@@ -34,7 +34,7 @@ module Playbook
         validation[:pattern] || nil
       end
 
-      def data
+      def validation_data
         fields = {}
         fields[:message] = validation_message unless validation_message.blank?
         fields

data/app/pb_kits/playbook/pb_timestamp/_timestamp.jsx

@@ -1,21 +1,46 @@
+/* @flow */
+
 import React from 'react'
-import PropTypes from 'prop-types'
+import classnames from 'classnames'
 
-const propTypes = {
-  className: PropTypes.string,
-  id: PropTypes.string,
-}
+import {
+  Caption,
+} from '../'
+
+import {
+  buildCss,
+  buildDataProps,
+} from '../utilities/props'
 
-class Timestamp extends React.Component {
-  render() {
-    return (
-      <div className="pb_timestamp">
-        <span>{'TIMESTAMP CONTENT'}</span>
-      </div>
-    )
-  }
+type TimestampProps = {
+  id?: String,
+  data?: object,
+  className?: String,
+  text?: String,
 }
 
-Timestamp.propTypes = propTypes
+const Timestamp = ({
+  id,
+  className,
+  data = {},
+  text,
+}: TimestampProps) => {
+  const dataProps = buildDataProps(data)
+  const pbCss = buildCss('pb_timestamp_kit')
+
+  return (
+    <div
+        {...dataProps}
+        className={classnames(className, pbCss)}
+        id={id}
+    >
+      <Caption
+          size="xs"
+          tag="span"
+          text={text}
+      />
+    </div>
+  )
+}
 
 export default Timestamp

data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_default.jsx

@@ -0,0 +1,8 @@
+import React from 'react'
+import { Timestamp } from '../../'
+
+const TimestampDefault = () => (
+  <Timestamp text="20 seconds ago" />
+)
+
+export default TimestampDefault

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

@@ -1,7 +1,7 @@
 examples:
-  
+
   rails:
   - timestamp_default: Default
-  
-  
+
   react:
+  - timestamp_default: Default

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

@@ -0,0 +1 @@
+export { default as TimestampDefault } from './_timestamp_default.jsx'

data/app/pb_kits/playbook/pb_title_detail/_title_detail.jsx

@@ -1,21 +1,54 @@
+/* @flow */
+
 import React from 'react'
-import PropTypes from 'prop-types'
+import classnames from 'classnames'
 
-const propTypes = {
-  className: PropTypes.string,
-  id: PropTypes.string,
-}
+import {
+  Body,
+  Title,
+} from '../'
+
+import {
+  buildCss,
+  buildDataProps,
+} from '../utilities/props'
 
-class TitleDetail extends React.Component {
-  render() {
-    return (
-      <div className="pb_title_detail">
-        <span>{'TITLE DETAIL CONTENT'}</span>
-      </div>
-    )
-  }
+type TitleDetailProps = {
+  align?: 'left' | 'center' | 'right',
+  className?: String,
+  data?: object,
+  detail: String,
+  id?: String,
+  title: String,
 }
 
-TitleDetail.propTypes = propTypes
+const TitleDetail = ({
+  align = 'left',
+  className,
+  data = {},
+  detail,
+  id,
+  title,
+}: TitleDetailProps) => {
+  const dataProps = buildDataProps(data)
+  const pbCss = buildCss('pb_title_detail_kit', align)
+
+  return (
+    <div
+        {...dataProps}
+        className={classnames(className, pbCss)}
+        id={id}
+    >
+      <Title
+          size={4}
+          text={title}
+      />
+      <Body
+          color="light"
+          text={detail}
+      />
+    </div>
+  )
+}
 
 export default TitleDetail

data/app/pb_kits/playbook/pb_title_detail/docs/_title_detail_default.jsx

@@ -0,0 +1,26 @@
+import React from 'react'
+import { TitleDetail } from '../../'
+
+const TitleDetailDefault = () => (
+  <div>
+    <TitleDetail
+        detail="Commits data and history"
+        title="Email Notifications"
+    />
+
+    <TitleDetail
+        align="center"
+        detail="Commits data and history"
+        title="Email Notifications"
+    />
+
+    <TitleDetail
+        align="right"
+        detail="Commits data and history"
+        title="Email Notifications"
+    />
+
+  </div>
+)
+
+export default TitleDetailDefault

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

@@ -1,7 +1,7 @@
 examples:
-  
+
   rails:
   - title_detail_default: Default
-  
-  
+
   react:
+  - title_detail_default: Default

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

@@ -0,0 +1 @@
+export { default as TitleDetailDefault } from './_title_detail_default.jsx'

data/app/pb_kits/playbook/pb_tooltip/_tooltip.html.erb

@@ -0,0 +1,10 @@
+<%= content_tag(:div,
+  id: object.id,
+  data: object.data,
+  class: object.classname) do %>
+    <div class="tooltip_tooltip" id="<%= object.tooltip_id %>" role="tooltip">
+      <%= capture(&object.children) %>
+      <div class="arrow" id="<%= object.tooltip_id %>-arrow"></div>
+    </div>
+
+<% end %>