playbook_ui 2.9.9 → 3.0.0

data/app/pb_kits/playbook/pb_textarea/docs/_textarea_custom.html.erb

@@ -0,0 +1,3 @@
+<%= pb_rails("textarea", props: { label: "Label"}) do %>
+  <textarea class="my_custom_class" name="custom_textarea" rows=4></textarea>
+<% end %>

data/app/pb_kits/playbook/pb_textarea/docs/_textarea_custom.jsx

@@ -0,0 +1,16 @@
+import React from "react"
+import {Textarea} from "../../"
+
+function TextareaCustom() {
+  return (
+    <div>
+      <Textarea label="Label">
+          <textarea class="my_custom_class" name="custom_textarea" rows={4}>
+            {`Content goes here.`} 
+          </textarea>
+      </Textarea>
+    </div>
+  )
+}
+
+export default TextareaCustom

data/app/pb_kits/playbook/pb_textarea/docs/_textarea_dark.html.erb

@@ -0,0 +1,9 @@
+<%= pb_rails("textarea", props: { label: "Label", rows: 4, dark: true }) %>
+
+<br/>
+
+<%= pb_rails("textarea", props: { label: "Label", placeholder: "Placeholder text", dark: true }) %>
+
+<br/>
+
+<%= pb_rails("textarea", props: { label: "Label", name: "comment", value: "Default value text", dark: true }) %>

data/app/pb_kits/playbook/pb_textarea/docs/_textarea_dark.jsx

@@ -0,0 +1,21 @@
+import React from "react"
+import {Textarea} from "../../"
+
+function TextareaDark() {
+  return (
+    <div>
+      <Textarea label="Label"rows={4} dark/>
+
+      <br/>
+
+      <Textarea label="Label" placeholder="Placeholder text" dark/>
+
+      <br/>
+
+      <Textarea label="Label" name="comment" placeholder="Placeholder text" value="Default value text" dark/>
+      
+    </div>
+  )
+}
+
+export default TextareaDark

data/app/pb_kits/playbook/pb_textarea/docs/_textarea_default.html.erb

@@ -0,0 +1,9 @@
+<%= pb_rails("textarea", props: { label: "Label", rows: 4}) %>
+
+<br/>
+
+<%= pb_rails("textarea", props: { label: "Label", placeholder: "Placeholder text" }) %>
+
+<br/>
+
+<%= pb_rails("textarea", props: { label: "Label", name: "comment", value: "Default value text" }) %>

data/app/pb_kits/playbook/pb_textarea/docs/_textarea_default.jsx

@@ -0,0 +1,21 @@
+import React from "react"
+import {Textarea} from "../../"
+
+function TextareaDefault() {
+  return (
+    <div>
+      <Textarea label="Label"rows={4}/>
+
+      <br/>
+
+      <Textarea label="Label" placeholder="Placeholder text"/>
+
+      <br/>
+
+      <Textarea label="Label" name="comment" placeholder="Placeholder text" value="Default value text"/>
+      
+    </div>
+  )
+}
+
+export default TextareaDefault

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

@@ -0,0 +1,15 @@
+examples:
+  
+  rails:
+  - textarea_default: Default
+  - textarea_custom: Custom Textarea Input
+  - textarea_dark: Dark
+
+  
+  
+  react:
+  - textarea_default: Default
+  - textarea_custom: Custom Textarea Input
+  - textarea_dark: Dark
+
+  

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

@@ -0,0 +1,3 @@
+export {default as TextareaDefault} from './_textarea_default.jsx';
+export {default as TextareaCustom} from './_textarea_custom.jsx';
+export {default as TextareaDark} from './_textarea_dark.jsx';

data/app/pb_kits/playbook/pb_textarea/textarea.rb

@@ -0,0 +1,30 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbTextarea
+    class Textarea
+      include Playbook::Props
+
+      partial "pb_textarea/textarea"
+
+      prop :object
+      prop :method
+      prop :label
+      prop :placeholder
+      prop :value
+      prop :name
+      prop :dark, type: Playbook::Props::Boolean,
+                  default: false
+      prop :rows, type: Playbook::Props::Number,
+            default: 4
+
+      def classname
+        generate_classname("pb_textarea_kit", dark_class)
+      end
+
+      def dark_class
+        dark ? "dark" : nil
+      end
+    end
+  end
+end

data/app/pb_kits/playbook/pb_title/_title_mixin.scss

@@ -5,13 +5,15 @@
 @mixin pb_title(
     $fontSize: $heading_1,
     $fontWeight: $lighter,
-    $lineHeight: $lh_tighter){
+    $lineHeight: $lh_tighter
+){
   font-size: $fontSize;
   letter-spacing: $lspace_tight;
   font-weight: $fontWeight;
   color: $text_lt_default;
   margin: 0;
   line-height: $lineHeight;
+  font-family: $font_family_base;
 }
 
 @mixin pb_title_1 {

data/app/pb_kits/playbook/pb_user/_user.html.erb

@@ -11,8 +11,10 @@
   <% end %>
   <%= content_tag(:div,
       class: "content_wrapper") do %>
-    <%= pb_rails("title", props: { text: object.name, size: object.title_size }) %>
+    <%= pb_rails("title", props: { text: object.name, size: object.title_size, dark: object.dark }) %>
     <%= pb_rails("body", props: {
+      text: object.name,
+      dark: object.dark,
       text: object.title,
       color: "light"
     }) %>

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

@@ -1,21 +1,81 @@
+/* @flow */
+
 import React from 'react';
-import PropTypes from "prop-types";
-
-const propTypes = {
-  className: PropTypes.string,
-  id: PropTypes.string
-};
-
-class User extends React.Component {
-  render() {
-    return (
-      <div className="pb_user">
-        <span>USER CONTENT</span>
-      </div>
-    )
-  }
+import classnames from 'classnames';
+
+import {
+  Title,
+  Body,
+  Avatar
+} from '../'
+
+type UserProps = {
+  className?: String,
+  id?: String,
+  name: String,
+  territory?: String,
+  title?: String,
+  size?: 'sm' | 'md' | 'lg',
+  align?: 'left' | 'center' | 'right',
+  orientation?: 'horiztonal' | 'vertical',
+  avatar?: Boolean,
+  avatarUrl?: String,
+}
+
+const userSizes = {
+  sm: 4,
+  md: 4,
+  lg: 3,
+}
+
+const avatarSizes = {
+  sm: 'sm',
+  md: 'md',
+  lg: 'xl',
 }
 
-User.propTypes = propTypes;
+const User = (props: UserProps) => {
+  const {
+    name='Anna Black',
+    territory='',
+    title='',
+    align='left',
+    orientation='horizontal',
+    size='sm',
+    avatar=false,
+    avatarUrl,
+  } = props 
+
+  const print_avatar = (avatar, avatarUrl) => {
+    if (avatar == true | avatarUrl != null ) {
+      return (
+        <Avatar name={name} size={avatarSizes[size]} image_url={avatarUrl}/>
+      )
+    }
+  }
+
+  const print_details = (territory="") => {
+    if (territory !== "") {
+      return (
+        <Body color='light'>{`${territory} • ${title}`}</Body>
+      )
+    }
+    else {
+      return (
+        <Body color='light'>{`${title}`}</Body>
+      )
+    }
+  }
+
+  return (
+    <div className={`pb_user_kit_${align}_${orientation}_${size}`}>
+      {print_avatar(avatar, avatarUrl)}
+      <div className="content_wrapper">
+        <Title size={userSizes[size]} text={`${name}`}/>
+        {print_details(territory)}
+      </div>
+    </div> 
+  )
+}
 
 export default User;

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

@@ -3,7 +3,48 @@ import {User} from "../../"
 
 function UserDefault() {
   return (
-    <h1>{`Coming Soon...`}</h1>
+    <div class="pb--doc-demo-row">
+
+      <div>
+        <User
+          name='Anna Black'
+          title='Remodeling Consultant'
+          orientation="vertical"
+          align="center"
+          size='lg'
+          avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
+        />
+      </div>
+
+      <div>
+        <User
+          name='Anna Black'
+          title='Remodeling Consultant'
+          orientation="horizontal"
+          align="left"
+          avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
+        />
+      </div>
+
+      <div>
+        <User
+          name='Anna Black'
+          orientation="horizontal"
+          align="left"
+          avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
+        />
+
+        <br/>
+
+        <User
+          name='Anna Black'
+          orientation="horizontal"
+          align="left"
+          avatar={true}
+        />
+      </div>
+
+    </div>
   )
 }
 

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

@@ -0,0 +1,31 @@
+import React from "react"
+import {User} from "../../"
+
+function UserDefault() {
+  return (
+    <div class="pb--doc-demo-row">
+      <User
+          name='Anna Black'
+          title='Remodeling Consultant'
+          size='sm'
+          avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
+      />
+
+      <User
+          name='Anna Black'
+          title='Remodeling Consultant'
+          size='md'
+          avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
+      />
+
+      <User
+          name='Anna Black'
+          title='Remodeling Consultant'
+          size='lg'
+          avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
+      />
+    </div> 
+  )
+}
+
+export default UserDefault;

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

@@ -0,0 +1,24 @@
+import React from "react"
+import {User} from "../../"
+
+function UserTextOnly() {
+  return (
+    <div class="pb--doc-demo-row">
+      <User
+          name='Anna Black'
+          title='Remodeling Consultant'
+          orientation='horizontal'
+          align='center'
+          size='lg'
+      />
+      <User
+          name='Anna Black'
+          title='Remodeling Consultant'
+          orientation='horizontal'
+          align='left'
+      />
+    </div> 
+  )
+}
+
+export default UserTextOnly;

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

@@ -0,0 +1,37 @@
+import React from "react"
+import {User} from "../../"
+
+function UserVerticalSize() {
+  return (
+    <div>
+      <User
+          name='Anna Black'
+          title='Remodeling Consultant'
+          orientation='vertical'
+          align='center'
+          size='sm'
+          avatarUrl='https://randomuser.me/api/portraits/women/44.jpg'
+      />
+      <br/><br/>
+      <User
+          name='Anna Black'
+          title='Remodeling Consultant'
+          orientation='vertical'
+          align='center'
+          size='md'
+          avatarUrl='https://randomuser.me/api/portraits/women/44.jpg'
+      />
+      <br/><br/>
+      <User
+          name='Anna Black'
+          title='Remodeling Consultant'
+          orientation='vertical'
+          align='center'
+          size='lg'
+          avatarUrl='https://randomuser.me/api/portraits/women/44.jpg'
+      />
+    </div> 
+  )
+}
+
+export default UserVerticalSize;

data/app/pb_kits/playbook/pb_user/docs/_user_with_territory.html.erb

@@ -0,0 +1,40 @@
+<div class="pb--doc-demo-row">
+  <div>
+    <%= pb_rails("user", props: {
+      name: "Anna Black",
+      territory: "PHL",
+      title: "Remodeling Consultant",
+      orientation: "vertical",
+      align: "center",
+      size: "lg",
+      avatar_url: "https://randomuser.me/api/portraits/women/44.jpg"
+      }) %>
+  </div>
+  <div>
+    <%= pb_rails("user", props: {
+      name: "Anna Black",
+      territory: "PHL",
+      title: "Remodeling Consultant",
+      orientation: "horizontal",
+      align: "left",
+      avatar_url: "https://randomuser.me/api/portraits/women/44.jpg"
+      }) %>
+  </div>
+  <div>
+  <%= pb_rails("user", props: {
+      name: "Anna Black",
+      territory: "PHL",
+      title: "Remodeling Consultant",
+      orientation: "horizontal",
+      align: "center",
+      size: "sm"}) %>
+      <br>
+    <%= pb_rails("user", props: {
+      name: "Anna Black",
+      territory: "PHL",
+      title: "Remodeling Consultant",
+      orientation: "horizontal",
+      align: "center",
+      size: "lg"}) %>
+  </div>
+</div>