playbook_ui 2.9.9 → 3.0.0

data/app/pb_kits/playbook/pb_stat_value/_stat_value.html.erb

@@ -6,7 +6,7 @@
     <%= pb_rails "title", props: {
       classname: "pb_stat_value_kit",
       size: 1,
-      text: object.value } %>
+      text: object.formatted_value } %>
       &nbsp;
       <%= pb_rails "title", props: {
       classname: "pb_stat_value_kit",

data/app/pb_kits/playbook/pb_stat_value/stat_value.rb

@@ -4,12 +4,17 @@ module Playbook
   module PbStatValue
     class StatValue
       include Playbook::Props
+      include ActionView::Helpers::NumberHelper
 
       partial "pb_stat_value/stat_value"
 
       prop :unit
       prop :value, type: Playbook::Props::Number
 
+      def formatted_value
+        number_with_delimiter(value, delimiter: ",")
+      end
+
       def classname
         generate_classname("pb_stat_value_kit")
       end

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

@@ -1,17 +1,21 @@
 <%= content_tag(:div,
-    class: "pb_text_input_kit") do %>
+    class: object.classname) do %>
   <% if object.label.present? %>
     <%= pb_rails("caption", props: {text: object.label}) %>
   <% end %>
   <%= content_tag(:div,
       class: "text_input_wrapper") do %>
-    <%= tag(:input,
-        id: object.id,
-        data: object.data,
-        class: object.classname,
-        name: object.name,
-        placeholder: object.placeholder,
-        type: object.type,
-        value: object.value) %>
+    <% if object.children.present? %>
+      <% instance_exec &object.children %>
+    <% else %>
+      <%= tag(:input,
+          id: object.id,
+          class: object.classname,
+          data: object.data,
+          name: object.name,
+          placeholder: object.placeholder,
+          type: object.type,
+          value: object.value) %>
+    <% end %>
   <% end %>
 <% end %>

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

@@ -1,12 +1,15 @@
+/* @flow */
+
 import React from 'react'
-import PropTypes from "prop-types"
+import PropTypes from 'prop-types'
 import classnames from 'classnames'
-import {Caption} from "../"
+import {Caption} from '../'
 
 const propTypes = {
   className: PropTypes.string,
   name: PropTypes.string,
   label: PropTypes.string,
+  onChange: PropTypes.func,
   placeholder: PropTypes.string,
   type: PropTypes.string,
   value: PropTypes.oneOfType([
@@ -16,7 +19,8 @@ const propTypes = {
 }
 
 const defaultProps = {
-  type: "text"
+  onChange: () => {},
+  type: 'text'
 }
 
 class TextInput extends React.Component {
@@ -25,6 +29,7 @@ class TextInput extends React.Component {
       className,
       name,
       label,
+      onChange = () => {},
       placeholder,
       type,
       value
@@ -36,11 +41,12 @@ class TextInput extends React.Component {
     ])
 
     return (
-      <div className="pb_text_input_kit">
+      <div className={css}>
         <Caption text={label} />
-        <div className="text_input_wrapper">
-          <input className={css}
+        <div className='text_input_wrapper'>
+          <input className='text_input'
               name={name}
+              onChange={onChange}
               placeholder={placeholder}
               type={type}
               value={value}

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

@@ -8,51 +8,51 @@
 
   .text_input_wrapper {
     margin-bottom: 1rem;
-  }
-
-  .pb_text_input_kit {
-    border: 1px solid $border-light;
-    border-radius: $border-rad-light;
-    display: block;
-    width: 100%;
-    color: $text_lt_default;
-    background: $white;
-    padding: $space_xs $space_sm;
-    transition: 0.2s all;
-    outline: none;
-    font-size: $font_small;
-    margin: .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;
-    }
-
-    &::-ms-input-placeholder {
-      color: $text_lt_lighter;
-      opacity: 1;
-    }
-
-    &::placeholder {
-      color: $text_lt_lighter;
-      opacity: 1;
-    }
-
-    &:-ms-input-placeholder {
-      color: $text_lt_lighter;
-    }
 
-    &::-ms-input-placeholder {
-      color: $text_lt_lighter;
+    > input:first-child {
+      border: 1px solid $border-light;
+      border-radius: $border-rad-light;
+      display: block;
+      width: 100%;
+      color: $text_lt_default;
+      background: $white;
+      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;
+      }
+
+      &::-ms-input-placeholder {
+        color: $text_lt_lighter;
+        opacity: 1;
+      }
+
+      &::placeholder {
+        color: $text_lt_lighter;
+        opacity: 1;
+      }
+
+      &:-ms-input-placeholder {
+        color: $text_lt_lighter;
+      }
+
+      &::-ms-input-placeholder {
+        color: $text_lt_lighter;
+      }
     }
   }
 }

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

@@ -1,16 +1,72 @@
 import React from "react"
-import {TextInput} from "../../"
-
-function TextInputDefault() {
-  return (
-    <div>
-      <TextInput label="First Name" placeholder="Enter first name" value="Timothy Wenhold" />
-      <TextInput label="Last Name" placeholder="Enter last name" />
-      <TextInput label="Phone Number" type="phone" placeholder="Enter phone number" />
-      <TextInput label="Email Address" type="email" placeholder="Enter email address" />
-      <TextInput label="Zip Code" type="number" placeholder="Enter zip code" />
-    </div>
-  )
+import {
+  Caption,
+  TextInput,
+  Title,
+} from "../../"
+
+class TextInputDefault 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"
+        />
+        <TextInput
+            label="Last Name"
+            placeholder="Enter last name"
+        />
+        <TextInput
+            label="Phone Number"
+            placeholder="Enter phone number"
+            type="phone"
+        />
+        <TextInput
+            label="Email Address"
+            placeholder="Enter email address"
+            type="email"
+        />
+        <TextInput
+            label="Zip Code"
+            placeholder="Enter zip code"
+            type="number"
+        />
+
+        <br/>
+        <br/>
+
+        <Title>{`Event Handler Props`}</Title>
+
+        <br/>
+        <Caption>{`onChange`}</Caption>
+
+        <br/>
+
+        <TextInput
+            label="First Name"
+            onChange={handleOnChange}
+            placeholder="Enter first name"
+            value={firstName}
+        />
+
+        <If condition={firstName !== ""}>
+          {`First name is: ${firstName}`}
+        </If>
+      </div>
+    )
+  }
 }
 
 export default TextInputDefault

data/app/pb_kits/playbook/pb_textarea/_textarea.html.erb

@@ -0,0 +1,20 @@
+<%= content_tag(:div,
+    id: object.id,
+    data: object.data,
+    class: object.classname) do %>
+  <% if object.label.present? %>
+    <%= pb_rails("caption", props: {text: object.label, dark: object.dark, classname: "pb_textarea_kit_label"}) %>
+  <% end %>
+  <% if object.children %>
+    <%= capture(&object.children) %>
+  <% else %>
+    <%= text_area(
+        :object,
+        :method,
+        :class => "#{object.classname}",
+        :name => object.name,
+        :placeholder => object.placeholder,
+        :rows => object.rows,
+        :value => object.value )%>
+  <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_textarea/_textarea.jsx

@@ -0,0 +1,54 @@
+import React from 'react'
+import classnames from 'classnames'
+import { Caption } from "../"
+
+type TextareaProps = {
+  className?: String,
+  children?: Array<React.ReactChild>,
+  data?: String,
+  id?: String,
+  object?: String,
+  method?: String,
+  label?: String,
+  placeholder?: String,
+  value?: String,
+  name?: String,
+  rows?: Number,
+  dark?: Boolean,
+}
+
+const textareaCSS =({
+    dark=false,
+}: TextareaProps) => {
+  const themeStyle = dark === true ? '_dark' : ''
+  return 'pb_textarea_kit' + themeStyle
+}
+
+const Textarea = ( props: TextareaProps) => {
+
+  const {
+    className,
+    children,
+    label,
+    placeholder,
+    value,
+    dark=false,
+    rows=4,
+    name,
+  } = props
+
+  const textarea_input = `${textareaCSS(props)}`
+  
+  return (
+    <div className={classnames(textareaCSS(props), className)}>
+      <Caption text={label} dark={dark}/>
+      <If condition={children}>
+        {children}
+      <Else/>
+        <textarea className={textarea_input} name={name} placeholder={placeholder} rows={rows} value={value} />
+      </If>
+    </div>
+  )
+}
+
+export default Textarea

data/app/pb_kits/playbook/pb_textarea/_textarea.scss

@@ -0,0 +1,31 @@
+@import "../pb_body/body_mixins";
+@import "./textarea_mixin";
+
+[class^=pb_textarea_kit] {
+  margin-bottom: $space_sm;
+  .pb_textarea_kit_label {
+    margin-bottom: $space_xs;
+    display: block;
+  }
+  textarea::placeholder {
+    @include pb_body_light;
+  }
+  > textarea {
+    @include pb_textarea_light;
+  }
+  textarea:focus {
+    @include pb_textarea_focus_light;
+  }
+
+  &[class*=_dark] {
+    textarea::placeholder {
+      @include pb_body_light_dark;
+    }
+    > textarea {
+      @include pb_textarea_dark;
+    }
+    textarea:focus {
+      @include pb_textarea_focus_dark;
+    }
+  }
+}

data/app/pb_kits/playbook/pb_textarea/_textarea_mixin.scss

@@ -0,0 +1,51 @@
+@import "../tokens/colors";
+@import "../tokens/border_radius";
+@import "../tokens/spacing";
+@import "../tokens/animation-curves";
+@import "../pb_title/title_mixin";
+
+@mixin pb_textarea($border_color, $background_color, $text_color) {
+  @include pb_title_4;
+  border: 1px solid $border_color;
+  border-radius: $border_rad_heavier;
+  display: block;
+  width: 100%;
+  color: $text_color;
+  background-color: $background_color;
+  padding: ($space_xs + 4) $space_sm;
+  transition: $easeIn;
+  outline: none;
+  overflow: auto;
+  overflow-wrap: break-word;
+  resize: none;
+  transition-property: border-color, box-shadow, color, background-color;
+  transition-duration: .24s;
+  transition-timing-function: $bezier;
+  &:disabled, &:disabled:hover, &:disabled:focus, &:disabled:active {
+    background-color: shade($background_color, 5%);
+    box-shadow: none;
+    opacity: 0.5;
+  }
+}
+
+@mixin pb_textarea_focus($focus_color: $focus_input_light) {
+  background-color: $focus_color;
+}
+
+// Textarea ======================
+@mixin pb_textarea_light {
+  @include pb_textarea($border_light, $white, $text_lt_default);
+}
+
+@mixin pb_textarea_dark {
+  @include pb_textarea($border_dark, $bg_dark, $text_dk_default);
+}
+
+// Hovers ======================
+@mixin pb_textarea_focus_light {
+  @include pb_textarea_focus($focus_input_light);
+}
+
+@mixin pb_textarea_focus_dark {
+  @include pb_textarea_focus($focus_input_dark);
+}