playbook_ui 3.0.1 → 3.1.0

data/app/pb_kits/playbook/pb_nav/docs/_block_no_title_nav.jsx

@@ -0,0 +1,15 @@
+import React from 'react'
+import {Nav} from '../../'
+import NavItem from '../_item.jsx'
+
+function BlockNoTitleNav() {
+  return (
+    <Nav link='#' orientation='vertical'>
+        <NavItem link='#' active={true}>{`Active Nav Item using text prop`}</NavItem>
+        <NavItem link='#'>{`Nav Item using text prop`}</NavItem>
+        <NavItem link='#'>{`Nav Item using text prop`}</NavItem>
+    </Nav>
+  )
+}
+
+export default BlockNoTitleNav;

data/app/pb_kits/playbook/pb_nav/docs/_default_nav.jsx

@@ -1,10 +1,14 @@
-import React from "react"
-import {Nav} from "../../"
-import NavItem from "../_item.jsx"
+import React from 'react'
+import {Nav} from '../../'
+import NavItem from '../_item.jsx'
 
 function DefaultNav() {
   return (
-    <h1>{`Coming Soon...`}</h1>
+    <Nav title='Title example' link='#' orientation='vertical'>
+        <NavItem text='Active Nav Item using text prop' link='#' active={true}/>
+        <NavItem text='Nav Item using text prop' link='#' />
+        <NavItem text='Nav Item using text prop' link='#' />
+    </Nav>
   )
 }
 

data/app/pb_kits/playbook/pb_nav/docs/_horizontal_nav.jsx

@@ -0,0 +1,15 @@
+import React from 'react'
+import {Nav} from '../../'
+import NavItem from '../_item.jsx'
+
+function HorizontalNav() {
+  return (
+    <Nav title='Title example' link='#' orientation='horizontal'>
+        <NavItem text='Active Nav Item using text prop' link='#' active={true}/>
+        <NavItem text='Nav Item using text prop' link='#' />
+        <NavItem text='Nav Item using text prop' link='#' />
+    </Nav>
+  )
+}
+
+export default HorizontalNav;

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

@@ -3,6 +3,10 @@ examples:
   - default_nav: Default
   - horizontal_nav: Horizontal Nav
   - block_nav: Block
-  - block_no_title: Without Title
+  - block_no_title_nav: Without Title
   react:
   - default_nav: Default
+  - horizontal_nav: Horizontal Nav
+  - block_nav: Block Nav
+  - block_no_title_nav: Without Title
+  

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

@@ -1 +1,4 @@
 export {default as DefaultNav} from './_default_nav.jsx';
+export {default as HorizontalNav} from './_horizontal_nav.jsx';
+export {default as BlockNav} from './_block_nav.jsx';
+export {default as BlockNoTitleNav} from './_block_no_title_nav.jsx';

data/app/pb_kits/playbook/pb_person_contact/_person_contact.html.erb

@@ -1,25 +1,26 @@
 <%= content_tag(:div,
-    id: object.id,
-    data: object.data,
-    class: object.classname) do %>
-    <%= pb_rails("person", props: {
-        first_name: object.first_name,
-        last_name: object.last_name,
+  id: object.id,
+  data: object.data,
+  class: object.classname) do %>
+  <%= pb_rails("person", props: {
+      first_name: object.first_name,
+      last_name: object.last_name,
+  }) %>
+  <% object.valid_contacts.each do |contact| %>
+    <%= pb_rails("contact", props: {
+        contact_type: contact[:contact_type],
+        contact_value: contact[:contact_value],
+        contact_detail: contact[:contact_detail],
     }) %>
-    <% object.contacts.each do |contact| %>
+  <% end %>
+  <% if object.wrong_contacts.present? %>
+    <%= pb_rails("caption", props: { classname: "wrong_numbers", text: "wrong number" }) %>
+
+    <% object.wrong_contacts.each do |wrong_number| %>
       <%= pb_rails("contact", props: {
-          contact_type: contact[:contact_type],
-          contact_value: contact[:contact_value],
-          contact_detail: contact[:contact_detail],
+        contact_type: wrong_number[:contact_type],
+        contact_value: wrong_number[:contact_value],
       }) %>
     <% end %>
-    <% unless object.wrong_contacts.empty? %>
-      <%= pb_rails("caption", props: { text: "wrong number" })%>
-    <% end %>
-      <% object.wrong_contacts.each do |wrong_number| %>
-        <%= pb_rails("contact", props: {
-            contact_type: wrong_number[:contact_type],
-            contact_value: wrong_number[:contact_value],
-        }) %>
-      <% end %>
+  <% end %>
 <% end %>

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

@@ -9,3 +9,7 @@
   flex-direction: column;
   margin-bottom: $space_xs;
 }
+
+.wrong_numbers {
+  padding-top: $space_xs
+}

data/app/pb_kits/playbook/pb_person_contact/docs/_person_contact_with_wrong_numbers.html.erb

@@ -0,0 +1,21 @@
+<%= pb_rails("person_contact", props: {
+  first_name: "Pauline",
+  last_name: "Smith",
+  contacts: [
+    {
+      contact_type: "email",
+      contact_value: "email@example.com",
+    },
+    {
+      contact_value: 5555555555
+    },
+    {
+      contact_type: "wrong-phone",
+      contact_value: "3245627482",
+    },
+    {
+      contact_type: "phone",
+      contact_value: "3048615385",
+    },
+  ]
+}) %>

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

@@ -4,8 +4,7 @@ examples:
   - person_contact_default: Default
   - person_contact_multiple: Multiple People
   - person_contact_with_detail: With Detail
-
-
+  - person_contact_with_wrong_numbers: With Wrong Numbers
 
   react:
   - person_contact_default: Default

data/app/pb_kits/playbook/pb_person_contact/person_contact.rb

@@ -12,11 +12,11 @@ module Playbook
       prop :last_name
 
       def wrong_contacts
-        contacts.select { |contact| contact[:contact_type] == "wrong number" }
+        contacts.select { |contact| contact[:contact_type] == "wrong-phone" }
       end
 
       def valid_contacts
-        contacts.reject { |contact| contact[:contact_type] == "wrong number" }
+        contacts.reject { |contact| contact[:contact_type] == "wrong-phone" }
       end
 
       def classname

data/app/pb_kits/playbook/pb_selectable_card/docs/_selectable_card_dark.html.erb

@@ -33,9 +33,9 @@
   <% end %>
 
   <%= pb_rails("selectable_card", props: {
-    input_id: "unselected_dark",
-    name: "unselected_dark",
-    value: "unselected_dark",
+    input_id: "disabled_dark",
+    name: "disabled_dark",
+    value: "disabled_dark",
     disabled: true,
     dark: true
   }) do %>

data/app/pb_kits/playbook/pb_selectable_card/docs/_selectable_card_dark.jsx

@@ -52,9 +52,9 @@ class SelectableCardDark extends React.Component {
 
         <SelectableCard
             dark
-            inputId="unselected_dark"
-            name="unselected_dark"
-            value="unselected_dark"
+            inputId="disabled_dark"
+            name="disabled_dark"
+            value="disabled_dark"
             disabled={true}
             onChange={this.handleSelect}>
           {'Unselected'}

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

@@ -1,12 +1,12 @@
 <%= content_tag(:div,
     class: object.classname) do %>
   <% if object.label.present? %>
-    <%= pb_rails("caption", props: {text: object.label}) %>
+    <%= pb_rails("caption", props: { text: object.label, dark: object.dark, classname: "pb_text_input_kit_label" }) %>
   <% end %>
   <%= content_tag(:div,
       class: "text_input_wrapper") do %>
     <% if object.children.present? %>
-      <% instance_exec &object.children %>
+      <% capture(&object.children) %>
     <% else %>
       <%= tag(:input,
           id: object.id,

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

@@ -7,6 +7,7 @@ import {Caption} from '../'
 
 const propTypes = {
   className: PropTypes.string,
+  dark: PropTypes.bool,
   name: PropTypes.string,
   label: PropTypes.string,
   onChange: PropTypes.func,
@@ -27,6 +28,7 @@ class TextInput extends React.Component {
   render() {
     const {
       className,
+      dark,
       name,
       label,
       onChange = () => {},
@@ -36,13 +38,13 @@ class TextInput extends React.Component {
     } = this.props
 
     const css = classnames([
-      `pb_text_input_kit`,
+      `pb_text_input_kit${dark === true ? '_dark' : ''}`,
       className,
     ])
 
     return (
       <div className={css}>
-        <Caption text={label} />
+        <Caption text={label} dark={dark} />
         <div className='text_input_wrapper'>
           <input className='text_input'
               name={name}

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

@@ -1,57 +1,47 @@
-@import "../tokens/border_radius";
-@import "../tokens/colors";
-@import "../tokens/spacing";
-@import "../tokens/typography";
+@import "../pb_textarea/textarea_mixin";
+@import "../pb_body/body_mixins";
 
-.pb_text_input_kit {
-  margin: 8px;
+[class^=pb_text_input_kit] {
+  .pb_text_input_kit_label {
+    margin-bottom: $space_xs;
+    display: block;
+  }
 
   .text_input_wrapper {
-    margin-bottom: 1rem;
+    margin-bottom: $space_sm;
+    display: block;
+
+    input::placeholder {
+      @include pb_body_light;
+    }
 
     > input:first-child {
-      border: 1px solid $border-light;
-      border-radius: $border-rad-light;
-      display: block;
-      width: 100%;
-      color: $text_lt_default;
-      background: $white;
+      @include pb_textarea_light;
+      overflow: hidden;
       padding: $space_xs $space_sm;
-      transition: 0.2s all;
-      outline: none;
-      font-size: $font_small;
-      margin: 0.1rem 0 0;
-
-      &:focus {
-        border-color: $primary-action;
-      }
-
-      &::-webkit-input-placeholder {
-        color: $text_lt_lighter;
-        opacity: 1;
-      }
+    }
 
-      &:-ms-input-placeholder {
-        color: $text_lt_lighter;
-        opacity: 1;
-      }
+    input:focus {
+      @include pb_textarea_focus;
+    }
+  }
 
-      &::-ms-input-placeholder {
-        color: $text_lt_lighter;
-        opacity: 1;
-      }
+  &[class*=_dark] {
+    .text_input_wrapper {
+      margin-bottom: 1rem;
 
-      &::placeholder {
-        color: $text_lt_lighter;
-        opacity: 1;
+      input::placeholder {
+        @include pb_body_light_dark;
       }
 
-      &:-ms-input-placeholder {
-        color: $text_lt_lighter;
+      > input:first-child {
+        @include pb_textarea_dark;
+        overflow: hidden;
+        padding: $space_xs $space_sm;
       }
 
-      &::-ms-input-placeholder {
-        color: $text_lt_lighter;
+      input:focus {
+        @include pb_textarea_focus_dark;
       }
     }
   }

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

@@ -0,0 +1,5 @@
+<%= pb_rails("text_input", props: { label: "First Name", placeholder: "Enter first name", value: "Timothy Wenhold", dark: true }) %>
+<%= pb_rails("text_input", props: { label: "Last Name", placeholder: "Enter last name", dark: true }) %>
+<%= pb_rails("text_input", props: { label: "Phone Number", type: "phone", placeholder: "Enter phone number", dark: true }) %>
+<%= pb_rails("text_input", props: { label: "Email Address", type: "email", placeholder: "Enter email address", dark: true }) %>
+<%= pb_rails("text_input", props: { label: "Zip Code", type: "number", placeholder: "Enter zip code", dark: true }) %>

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

@@ -0,0 +1,78 @@
+import React from "react"
+import {
+  Caption,
+  TextInput,
+  Title,
+} from "../../"
+
+class TextInputDark extends React.Component {
+    state = {
+      firstName: ""
+    }
+
+    render() {
+        const handleOnChange = ({target}) => this.setState({firstName: target.value})
+
+        const {
+          firstName,
+        } = this.state
+
+        return (
+            <div>
+                <TextInput
+                    label="First Name" 
+                    placeholder="Enter first name" 
+                    value="Timothy Wenhold" 
+                    dark
+                />
+                <TextInput
+                    label="Last Name" 
+                    placeholder="Enter last name" 
+                    dark  
+                />
+                <TextInput
+                    label="Phone Number"
+                    placeholder="Enter phone number"
+                    type="phone"
+                    dark
+                />
+                <TextInput
+                    label="Email Address"
+                    placeholder="Enter email address"
+                    type="email"
+                    dark
+                />
+                <TextInput
+                    label="Zip Code"
+                    placeholder="Enter zip code"
+                    type="number"
+                    dark
+                />
+
+                <br/>
+                <br/>
+
+                <Title dark>{`Event Handler Props`}</Title>
+
+                <br/>
+                <Caption>{`onChange`}</Caption>
+
+                <br/>
+
+                <TextInput
+                    label="First Name"
+                    onChange={handleOnChange}
+                    placeholder="Enter first name"
+                    value={firstName}
+                    dark
+                />
+
+                <If condition={firstName !== ""}>
+                {`First name is: ${firstName}`}
+                </If>
+            </div>
+        )
+    }
+}
+  
+export default TextInputDark

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

@@ -1,5 +1,8 @@
 examples:
   rails:
   - text_input_default: Default
+  - text_input_dark: Dark
   react:
   - text_input_default: Default
+  - text_input_dark: Dark
+

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

@@ -1 +1,2 @@
 export {default as TextInputDefault} from './_text_input_default.jsx';
+export {default as TextInputDark} from './_text_input_dark.jsx';

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

@@ -7,6 +7,8 @@ module Playbook
 
       partial "pb_text_input/text_input"
 
+      prop :dark, type: Playbook::Props::Boolean,
+                  default: false
       prop :label
       prop :name
       prop :placeholder
@@ -14,7 +16,13 @@ module Playbook
       prop :type, default: "text"
 
       def classname
-        generate_classname("pb_text_input_kit")
+        generate_classname("pb_text_input_kit", dark_class)
+      end
+
+      private
+
+      def dark_class
+        dark ? "dark" : nil
       end
     end
   end