playbook_ui 3.2.0 → 3.3.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: '091fb82d4b72e38e904355eedf2f54d2f61a9dab454b1f8351fb8a393f7c0e34'
-  data.tar.gz: 1bf6b5a09020e9af107074ca3cdfef7f9703e7775e02b9299f98a0482a5d62b2
+  metadata.gz: '0624588df3f0146bc99a772eea3c4c8efc06b3a5299aea28ec1cdf3ad4320071'
+  data.tar.gz: 76e97087be0d0b643a645e48d0ba6c020f5dbfb3c153ca7ff8f5004c45372e7e
 SHA512:
-  metadata.gz: e895bb02b0fb481de91c732593fe5d76e3fa9d05cca4a323a3c91a87599a8ad9ac1111602caa3bd87eae1220ebdb1af874179281ced73daaa525254c7f222a98
-  data.tar.gz: 05f3ede8352b44a1abd8804a550e7372b87f29a8363e28f25481bc9ff329dde2d56737ce05042b5c36ade529967da431bd8e30054460e19313e2add378252183
+  metadata.gz: 343f4902e4562ca958b73ac21a3c2b8fb5549a9133d6d9ae134b0ad0194eb2f1be9df329563454af7be4dd792a35d956a30cb9a19d441bc6bbfb449ac2f2451a
+  data.tar.gz: bbd5040560708a09b452103e13ddbbaa9ca6d4e669f06d3fdb129978034bdb5c68ce605c6d9897c3ba07311ca4957ec0d55315bfb78ff0042d610be57ebe2548

data/app/pb_kits/playbook/_playbook.scss

@@ -40,6 +40,7 @@
 @import 'pb_pill/pill';
 @import 'pb_progress_pills/progress_pills';
 @import 'pb_progress_simple/progress_simple';
+@import 'pb_radio/radio';
 @import 'pb_section_separator/section_separator';
 @import 'pb_select/select';
 @import 'pb_selectable_card/selectable_card';

data/app/pb_kits/playbook/index.js

@@ -41,6 +41,7 @@ export PersonContact from './pb_person_contact/_person_contact.jsx'
 export Pill from './pb_pill/_pill.jsx'
 export ProgressPills from './pb_progress_pills/_progress_pills.jsx'
 export ProgressSimple from './pb_progress_simple/_progress_simple.jsx'
+export Radio from './pb_radio/_radio.jsx'
 export SectionSeparator from './pb_section_separator/_section_separator.jsx'
 export Select from './pb_select/_select.jsx'
 export SelectableCard from './pb_selectable_card/_selectable_card.jsx'

data/app/pb_kits/playbook/kits/pb_radio.js

@@ -0,0 +1,4 @@
+import Radio from '../pb_radio/_radio.jsx'
+
+import WebpackerReact from 'webpacker-react'
+WebpackerReact.setup({ Radio })

data/app/pb_kits/playbook/packs/examples.js

@@ -52,6 +52,7 @@ import * as PersonContact from 'pb_person_contact/docs'
 import * as Pill from 'pb_pill/docs'
 import * as ProgressPills from 'pb_progress_pills/docs'
 import * as ProgressSimple from 'pb_progress_simple/docs'
+import * as Radio from 'pb_radio/docs'
 import * as SectionSeparator from 'pb_section_separator/docs'
 import * as Select from 'pb_select/docs'
 import * as SelectableCard from 'pb_selectable_card/docs'
@@ -111,6 +112,7 @@ WebpackerReact.setup(PersonContact)
 WebpackerReact.setup(Pill)
 WebpackerReact.setup(ProgressPills)
 WebpackerReact.setup(ProgressSimple)
+WebpackerReact.setup(Radio)
 WebpackerReact.setup(SectionSeparator)
 WebpackerReact.setup(Select)
 WebpackerReact.setup(SelectableCard)

data/app/pb_kits/playbook/packs/kits.js

@@ -37,6 +37,7 @@ import '../kits/pb_person_contact.js'
 import '../kits/pb_pill.js'
 import '../kits/pb_progress_pills.js'
 import '../kits/pb_progress_simple.js'
+import '../kits/pb_radio.js'
 import '../kits/pb_section_separator.js'
 import '../kits/pb_select.js'
 import '../kits/pb_selectable_card.js'

data/app/pb_kits/playbook/pb_caption/_caption.jsx

@@ -23,9 +23,9 @@ const Caption = ({
 }: CaptionProps) => {
   const Tag = `${tag}`
 
-  const css = classnames(className, buildCss('pb_caption_kit', size, {
+  const css = classnames(buildCss('pb_caption_kit', size, {
     'dark': dark,
-  }))
+  }), className)
 
   return (
     <Tag className={css}>

data/app/pb_kits/playbook/pb_card/_card.jsx

@@ -3,11 +3,13 @@
 import React from 'react'
 import classnames from 'classnames'
 
+import { buildCss } from '../utilities/props'
+
 type CardPropTypes = {
   children: Array<React.ReactNode> | React.ReactNode,
   className?: String,
   highlight?: {
-    position?: String,
+    position?: 'side' | 'top',
     color?: String
   },
   padding?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl',
@@ -15,35 +17,26 @@ type CardPropTypes = {
   shadow?: 'none' | 'shallow' | 'default' | 'deep' | 'deeper' | 'deepest',
 }
 
-const cardCSS = ({
+const Card = ({
+  children,
+  className,
   highlight = {},
+  padding = 'md',
   selected = false,
   shadow = 'none',
 }: CardPropTypes) => {
-  let css = 'pb_card_kit'
-  css += highlight.position ? `_highlight_${highlight.position}` : ''
-  css += highlight.color ? `_highlight_${highlight.color}` : ''
-  css += selected ? '_selected' : '_deselected'
-  css += `_shadow_${shadow}`
-  return css
-}
-
-const bodyCSS = ({ padding = 'md' }: CardPropTypes) => {
-  let css = 'pb_card_body_kit'
-  css += `_${padding}`
-  return css
-}
-
-const Card = (props: CardPropTypes) => {
-  const {
-    children,
-    className,
-  } = props
+  const bodyCSS = buildCss('pb_card_body_kit', padding)
+  const cardCss = buildCss('pb_card_kit', `shadow_${shadow}`, {
+    selected,
+    deselected: !selected,
+    [`highlight_${highlight.position}`]: highlight.position,
+    [`highlight_${highlight.color}`]: highlight.color,
+  })
 
   return (
-    <div className={classnames(cardCSS(props), className)}>
-      <div className={bodyCSS(props)}>
-        { children }
+    <div className={classnames(cardCss, className)}>
+      <div className={bodyCSS}>
+        {children}
       </div>
     </div>
   )

data/app/pb_kits/playbook/pb_card/_card.scss

@@ -80,7 +80,7 @@ $pb_card_highlight_size: 4px;
     overflow: hidden;
   }
 
-  &[class*=_highlight_side] {
+  &[class*=_highlight_top] {
     @each $color_name, $color_value in $pb_card_highlight_colors {
       &[class*=_highlight_#{$color_name}]::before {
         @include pb_card_highlight(100%, $pb_card_highlight_size, $color_value);
@@ -88,7 +88,7 @@ $pb_card_highlight_size: 4px;
     }
   }
 
-  &[class*=_highlight_top] {
+  &[class*=_highlight_side] {
     @each $color_name, $color_value in $pb_card_highlight_colors {
       &[class*=_highlight_#{$color_name}]::before {
         @include pb_card_highlight($pb_card_highlight_size, 100%, $color_value);

data/app/pb_kits/playbook/pb_checkbox/_checkbox.html.erb

@@ -1,11 +1,15 @@
 <%= content_tag(:label, id: object.id,
                         data: object.data,
-                        class: object.classname) do %>
-  <input type="checkbox" value="<%=object.value%>" name="<%=object.name%>" <%= object.checked_html %>>
-  <span class="pb_checkbox_checkmark">
-    <%= pb_rails("icon", props: { icon: "check", id: "check_icon", classname: "check_icon", fixed_width: true}) %>
-  </span>
-  <span class="pb_checkbox_label">
-    <%= pb_rails("body", props: { text: object.text, dark: object.dark }) %>
-  </span>
+                        class: object.classname) do %>  
+  <% if object.children %>
+    <%= capture(&object.children) %>
+   <% else %>             
+    <%= object.input %>
+  <% end %>
+    <span class="pb_checkbox_checkmark">
+      <%= pb_rails("icon", props: { icon: "check", id: "check_icon", classname: "check_icon", fixed_width: true}) %>
+    </span>
+    <span class="pb_checkbox_label">
+      <%= pb_rails("body", props: { text: object.text, dark: object.dark }) %>
+    </span>
 <% end %>

data/app/pb_kits/playbook/pb_checkbox/_checkbox.jsx

@@ -10,7 +10,8 @@ type CheckboxProps = {
   name: String,
   text: String,
   value: String,
-
+  children: Node,
+  onChange: (Boolean) => void,
 }
 
 const Checkbox = ({
@@ -19,6 +20,8 @@ const Checkbox = ({
   name = '',
   text = '',
   value = '',
+  children = null,
+  onChange = () => {},
 
 }: CheckboxProps) => {
   const bodyClassName = {
@@ -33,13 +36,18 @@ const Checkbox = ({
         (dark === true ? '_dark' : '')
       }
     >
-      {' '}
-      <input
-          defaultChecked={checked}
-          name={name}
-          type="checkbox"
-          value={value}
-      />
+      <If condition={children}>
+        {children}
+        <Else />
+        <input
+            defaultChecked={checked}
+            name={name}
+            onChange={onChange}
+            type="checkbox"
+            value={value}
+        />
+      </If>
+
       <span className="pb_checkbox_checkmark">
         <Icon
             className="check_icon"

data/app/pb_kits/playbook/pb_checkbox/checkbox.rb

@@ -4,6 +4,10 @@ module Playbook
   module PbCheckbox
     class Checkbox
       include Playbook::Props
+      include ActionView::Helpers::FormTagHelper
+      include ActionView::Context
+
+
 
       partial "pb_checkbox/checkbox"
 
@@ -21,6 +25,10 @@ module Playbook
         generate_classname("pb_checkbox_kit", dark_class, checked_class)
       end
 
+      def input
+        check_box_tag(name, value, checked)
+      end
+
     private
 
       def checked_class

data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_custom.html.erb

@@ -0,0 +1,3 @@
+<%= pb_rails("checkbox", props: {text: "Custom Checkbox"}) do%>
+    <input type="checkbox" name="custom-name" value="custom-value"/>
+<% end %>

data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_custom.jsx

@@ -0,0 +1,18 @@
+import React from 'react'
+import { Checkbox } from '../../'
+
+const CheckboxCustom = () => {
+  return (
+    <div>
+      <Checkbox text="Custom Checkbox">
+        <input
+            name="custom-name"
+            type="checkbox"
+            value="custom-value"
+        />
+      </Checkbox>
+    </div>
+  )
+}
+
+export default CheckboxCustom

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

@@ -3,7 +3,9 @@ examples:
     - checkbox_default: Default
     - checkbox_checked: Load as checked
     - checkbox_dark: Dark
+    - checkbox_custom: Custom Checkbox
 
   react:
   - checkbox_default: Default
   - checkbox_dark: Dark
+  - checkbox_custom: Custom Checkbox

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

@@ -1,2 +1,3 @@
 export { default as CheckboxDefault } from './_checkbox_default.jsx'
 export { default as CheckboxDark } from './_checkbox_dark.jsx'
+export { default as CheckboxCustom } from './_checkbox_custom.jsx'

data/app/pb_kits/playbook/pb_icon_circle/_icon_circle.jsx

@@ -1,24 +1,32 @@
 /* @flow */
 
 import React from 'react'
+
+import classnames from 'classnames'
+
 import { Icon } from '../'
+import { buildCss } from '../utilities/props'
 
-const IconCircleProps = {
-  className: String,
-  icon: String,
-  id: String,
-  size: String,
-  variant: String,
+type IconCircleProps = {
+  className?: string,
+  icon: string,
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl',
+  variant?: 'default' | 'royal' | 'blue' | 'purple' | 'teal' | 'red' | 'yellow' | 'green',
 }
 
 const IconCircle = ({
+  className,
   icon,
   size = 'md',
   variant = 'default',
-}: IconCircleProps) => (
-  <div className={`pb_icon_circle_kit_${size}_${variant}`}>
-    <Icon icon={icon} />
-  </div>
-)
+}: IconCircleProps) => {
+  const css = buildCss('pb_icon_circle_kit', size, variant)
+
+  return (
+    <div className={classnames(className, css)}>
+      <Icon icon={icon} />
+    </div>
+  )
+}
 
 export default IconCircle

data/app/pb_kits/playbook/pb_radio/_radio.html.erb

@@ -0,0 +1,16 @@
+<%= content_tag(:label,
+    id: object.id,
+    data: object.data,
+    value: object.value,
+    checked: object.checked,
+    class: object.classname) do %>
+
+    <% if object.children %>
+      <%= capture(&object.children) %>
+    <% else %>
+      <%= radio_button_tag object.name, object.value, object.selected %>
+    <% end %>
+
+    <span class="pb_radio_button"></span>
+    <%= pb_rails("body", props: { text: object.text, dark: object.dark}) %>
+<% end %>

data/app/pb_kits/playbook/pb_radio/_radio.jsx

@@ -0,0 +1,63 @@
+/* @flow */
+/*eslint-disable react/no-multi-comp, flowtype/space-before-type-colon */
+
+import React from 'react'
+import Body from '../pb_body/_body.jsx'
+
+type RadioProps = {
+  className?: String,
+  data?: String,
+  id?: String,
+  label: String,
+  name: String,
+  value: String,
+  checked?: Boolean,
+  dark?: Boolean,
+  text: String,
+  children?: Node,
+  onChange: (Boolean)=>void,
+}
+
+const Radio = (props: RadioProps) => {
+  const {
+    checked = false,
+    children,
+    className,
+    dark = false,
+    data,
+    id,
+    label,
+    name,
+    value,
+    text,
+    onChange = () => {},
+  } = props
+
+  return (
+    <label
+        className={'pb_radio_kit' + (dark === true ? '_dark ' : ' ') + className}
+        htmlFor={id}
+    >
+      <If condition={children}>
+        {children}
+        <Else />
+        <input
+            data={data}
+            defaultChecked={checked}
+            name={name}
+            onChange={onChange}
+            text={text}
+            type="radio"
+            value={value}
+        />
+      </If>
+      <span className="pb_radio_button" />
+      <Body
+          dark={dark}
+          text={label}
+      />
+    </label>
+  )
+}
+
+export default Radio

data/app/pb_kits/playbook/pb_radio/_radio.scss

@@ -0,0 +1,40 @@
+@import "../tokens/colors";
+@import "../tokens/spacing";
+@import "../pb_body/body";
+@import "../tokens/transition";
+
+[class^=pb_radio_kit] {
+  display: inline-flex;
+
+  .pb_radio_button {
+    width: 22px;
+    height: 22px;
+    border-radius: 1000px;
+    border: 2px solid $border_light;
+    margin-right: $space_xs;
+    transition-property: border-color, border;
+    transition-duration: $transition_short;
+    transition-timing-function: $easeIn;
+  }
+
+  &:hover .pb_radio_button {
+    border-color: $primary_action;
+  }
+
+  input {
+    position: relative;
+    display: none;
+    &:checked ~ .pb_radio_button {
+      border: 6px solid $primary;
+    }
+  }
+  &[class*=_dark] {
+      input:checked ~ .pb_radio_button {
+        border: 6px solid $primary;
+      }
+
+      &:hover .pb_radio_button {
+        border-color: $primary_action;
+      }
+    }
+}

data/app/pb_kits/playbook/pb_radio/docs/_radio_custom.html.erb

@@ -0,0 +1,27 @@
+<%= pb_rails("radio", props: {
+  text: "Power",
+  name: "group 1",
+  value: "Power"
+}) do %>
+  <input type="radio" text="power" name="group 1" value="power">
+<% end %>
+
+<br>
+
+<%= pb_rails("radio", props: {
+  text: "Nitro",
+  name: "group 1",
+  value: "Power"
+}) do %>
+  <input type="radio" text="nitro" name="group 1" value="nitro">
+<% end %>
+
+<br>
+
+<%= pb_rails("radio", props: {
+  text: "Google",
+  name: "group 1",
+  value: "Google"
+}) do %>
+  <input type="radio" text="google" name="group 1" value="google">
+<% end %>

data/app/pb_kits/playbook/pb_radio/docs/_radio_custom.jsx

@@ -0,0 +1,43 @@
+import React from 'react'
+import { Radio } from '../../'
+
+const RadioCustom = () => {
+  return (
+    <div>
+      <Radio
+          className="my_custom_class"
+          label="Custom Power"
+      >
+        <input
+            defaultChecked
+            name="custom"
+            type="radio"
+            value="power"
+        />
+      </Radio>
+      <br />
+      <Radio
+          className="my_custom_class"
+          label="Custom Nitro"
+      >
+        <input
+            name="custom"
+            type="radio"
+            value="nitro"
+        />
+      </Radio>
+      <br />
+      <Radio
+          className="my_custom_class"
+          label="Custom Google"
+      >
+        <input
+            name="custom"
+            type="radio"
+            value="google"
+        />
+      </Radio>
+    </div>
+  )
+}
+export default RadioCustom

data/app/pb_kits/playbook/pb_radio/docs/_radio_dark.html.erb

@@ -0,0 +1,25 @@
+<%= pb_rails("radio", props: {
+  text: "Power",
+  name: "group 2",
+  value: 'Power',
+  dark: true
+}) %>
+
+<br>
+
+<%= pb_rails("radio", props: {
+  text: "Nitro",
+  name: "group 2",
+  value: "Nitro",
+  checked: true,
+  dark: true
+}) %>
+
+<br>
+
+<%= pb_rails("radio", props: {
+  text: "Google",
+  name: "group 2",
+  value: "Google",
+  dark: true
+}) %>

data/app/pb_kits/playbook/pb_radio/docs/_radio_dark.jsx

@@ -0,0 +1,30 @@
+import React from 'react'
+import { Radio } from '../../'
+
+const RadioDark = () => {
+  return (
+    <div>
+      <Radio
+          dark
+          label="Power"
+          name="Group1"
+          value="Power"
+      />
+      <br />
+      <Radio
+          dark
+          label="Nitro"
+          name="Group1"
+          value="Nitro"
+      />
+      <br />
+      <Radio
+          dark
+          label="Google"
+          name="Group1"
+          value="Google"
+      />
+    </div>
+  )
+}
+export default RadioDark

data/app/pb_kits/playbook/pb_radio/docs/_radio_default.html.erb

@@ -0,0 +1,22 @@
+<%= pb_rails("radio", props: {
+  text: "Power",
+  name: "group 1",
+  value: "Power"
+}) %>
+
+<br>
+
+<%= pb_rails("radio", props: {
+  text: "Nitro",
+  name: "group 1",
+  value: "Nitro",
+  checked: true
+}) %>
+
+<br>
+
+<%= pb_rails("radio", props: {
+  text: "Google",
+  name: "group 1",
+  value: "Google"
+}) %>

data/app/pb_kits/playbook/pb_radio/docs/_radio_default.jsx

@@ -0,0 +1,27 @@
+import React from 'react'
+import { Radio } from '../../'
+
+const RadioDefault = () => {
+  return (
+    <div>
+      <Radio
+          label="Power"
+          name="Group2"
+          value="Power"
+      />
+      <br />
+      <Radio
+          label="Nitro"
+          name="Group2"
+          value="Nitro"
+      />
+      <br />
+      <Radio
+          label="Google"
+          name="Group2"
+          value="Google"
+      />
+    </div>
+  )
+}
+export default RadioDefault

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

@@ -0,0 +1,14 @@
+examples:
+
+  rails:
+  - radio_default: Default
+  - radio_dark: Dark
+  - radio_custom: Custom
+
+
+
+
+  react:
+  - radio_default: Default
+  - radio_dark: Dark
+  - radio_custom: Custom

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

@@ -0,0 +1,3 @@
+export { default as RadioDefault } from './_radio_default.jsx'
+export { default as RadioDark } from './_radio_dark.jsx'
+export { default as RadioCustom } from './_radio_custom.jsx'

data/app/pb_kits/playbook/pb_radio/radio.rb

@@ -0,0 +1,46 @@
+# frozen_string_literal: true
+
+require "action_view"
+
+module Playbook
+  module PbRadio
+    class Radio
+      include ActionView::Helpers::FormTagHelper
+      include ActionView::Context
+      include Playbook::Props
+
+      partial "pb_radio/radio"
+
+      prop :checked, type: Playbook::Props::Boolean,
+                     default: false
+      prop :dark, type: Playbook::Props::Boolean,
+                      default: false
+      prop :name, type: Playbook::Props::String,
+                      default: "radio_name"
+      prop :text, type: Playbook::Props::String,
+                      default: "Radio Text"
+      prop :value, type: Playbook::Props::String,
+                      default: "radio_text"
+      prop :object
+      def classname
+        generate_classname("pb_radio_kit", dark_class)
+      end
+
+      def input
+        check_box_tag(name, value, checked)
+      end
+
+      def selected
+        if checked == true
+          "checked"
+        end
+      end
+
+    private
+
+      def dark_class
+        dark ? "dark" : nil
+      end
+    end
+  end
+end

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

@@ -1,5 +1,4 @@
 /* @flow */
-
 import React from 'react'
 import classnames from 'classnames'
 import { Caption } from '../'
@@ -13,6 +12,7 @@ type TextInputProps = {
   placeholder: string,
   type: string,
   value: string | number,
+  children: Node,
 }
 
 const TextInput = ({
@@ -24,6 +24,7 @@ const TextInput = ({
   placeholder,
   type = 'text',
   value,
+  children = null,
 }: TextInputProps) => {
   const css = classnames([
     `pb_text_input_kit${dark === true ? '_dark' : ''}`,
@@ -33,18 +34,23 @@ const TextInput = ({
   return (
     <div className={css}>
       <Caption
+          className="pb_text_input_kit_label"
           dark={dark}
           text={label}
       />
       <div className="text_input_wrapper">
-        <input
-            className="text_input"
-            name={name}
-            onChange={onChange}
-            placeholder={placeholder}
-            type={type}
-            value={value}
-        />
+        <If condition={children}>
+          {children}
+          <Else />
+          <input
+              className="text_input"
+              name={name}
+              onChange={onChange}
+              placeholder={placeholder}
+              type={type}
+              value={value}
+          />
+        </If>
       </div>
     </div>
   )

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

@@ -0,0 +1,3 @@
+<%= pb_rails("text_input", props: {label: "Custom Input"}) do %>
+    <input placeholder="Custom placeholder" name="custom-name"></input>
+<% end %>

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

@@ -0,0 +1,20 @@
+import React from 'react'
+import { TextInput } from '../../'
+
+const TextInputCustom = () => {
+  return (
+    <div>
+      <TextInput
+          label="Custom Label"
+      >
+        <input
+            name="custom-name"
+            placeholder="custom-placeholder"
+            type="text"
+        />
+      </TextInput>
+    </div>
+  )
+}
+
+export default TextInputCustom

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

@@ -2,4 +2,4 @@
 <%= 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: "Zip Code", type: "number", placeholder: "Enter zip code" }) %>

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

@@ -2,7 +2,9 @@ examples:
   rails:
   - text_input_default: Default
   - text_input_dark: Dark
+  - text_input_custom: Custom
   react:
   - text_input_default: Default
   - text_input_dark: Dark
+  - text_input_custom: Custom
 

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

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

data/lib/playbook/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module Playbook
-  VERSION = "3.2.0"
+  VERSION = "3.3.0"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 3.2.0
+  version: 3.3.0
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2019-12-19 00:00:00.000000000 Z
+date: 2020-01-02 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -40,7 +40,7 @@ dependencies:
         version: 5.1.6
     - - "<"
       - !ruby/object:Gem::Version
-        version: '6.0'
+        version: '7.0'
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
@@ -50,7 +50,7 @@ dependencies:
         version: 5.1.6
     - - "<"
       - !ruby/object:Gem::Version
-        version: '6.0'
+        version: '7.0'
 - !ruby/object:Gem::Dependency
   name: activesupport
   requirement: !ruby/object:Gem::Requirement
@@ -439,6 +439,7 @@ files:
 - app/pb_kits/playbook/kits/pb_pill.js
 - app/pb_kits/playbook/kits/pb_progress_pills.js
 - app/pb_kits/playbook/kits/pb_progress_simple.js
+- app/pb_kits/playbook/kits/pb_radio.js
 - app/pb_kits/playbook/kits/pb_section_separator.js
 - app/pb_kits/playbook/kits/pb_select.js
 - app/pb_kits/playbook/kits/pb_selectable_card.js
@@ -579,6 +580,8 @@ files:
 - app/pb_kits/playbook/pb_checkbox/_checkbox.scss
 - app/pb_kits/playbook/pb_checkbox/checkbox.rb
 - app/pb_kits/playbook/pb_checkbox/docs/_checkbox_checked.html.erb
+- app/pb_kits/playbook/pb_checkbox/docs/_checkbox_custom.html.erb
+- app/pb_kits/playbook/pb_checkbox/docs/_checkbox_custom.jsx
 - app/pb_kits/playbook/pb_checkbox/docs/_checkbox_dark.html.erb
 - app/pb_kits/playbook/pb_checkbox/docs/_checkbox_dark.jsx
 - app/pb_kits/playbook/pb_checkbox/docs/_checkbox_default.html.erb
@@ -966,6 +969,18 @@ files:
 - app/pb_kits/playbook/pb_progress_simple/docs/example.yml
 - app/pb_kits/playbook/pb_progress_simple/docs/index.js
 - app/pb_kits/playbook/pb_progress_simple/progress_simple.rb
+- app/pb_kits/playbook/pb_radio/_radio.html.erb
+- app/pb_kits/playbook/pb_radio/_radio.jsx
+- app/pb_kits/playbook/pb_radio/_radio.scss
+- app/pb_kits/playbook/pb_radio/docs/_radio_custom.html.erb
+- app/pb_kits/playbook/pb_radio/docs/_radio_custom.jsx
+- app/pb_kits/playbook/pb_radio/docs/_radio_dark.html.erb
+- app/pb_kits/playbook/pb_radio/docs/_radio_dark.jsx
+- app/pb_kits/playbook/pb_radio/docs/_radio_default.html.erb
+- app/pb_kits/playbook/pb_radio/docs/_radio_default.jsx
+- app/pb_kits/playbook/pb_radio/docs/example.yml
+- app/pb_kits/playbook/pb_radio/docs/index.js
+- app/pb_kits/playbook/pb_radio/radio.rb
 - app/pb_kits/playbook/pb_section_separator/_section_separator.html.erb
 - app/pb_kits/playbook/pb_section_separator/_section_separator.jsx
 - app/pb_kits/playbook/pb_section_separator/_section_separator.scss
@@ -999,7 +1014,6 @@ files:
 - app/pb_kits/playbook/pb_select/docs/_select_value_text_same.jsx
 - app/pb_kits/playbook/pb_select/docs/example.yml
 - app/pb_kits/playbook/pb_select/docs/index.js
-- app/pb_kits/playbook/pb_select/docs/nitro_theme.gemspec
 - app/pb_kits/playbook/pb_select/select.rb
 - app/pb_kits/playbook/pb_selectable_card/_selectable_card.html.erb
 - app/pb_kits/playbook/pb_selectable_card/_selectable_card.jsx
@@ -1094,6 +1108,8 @@ files:
 - app/pb_kits/playbook/pb_text_input/_text_input.html.erb
 - app/pb_kits/playbook/pb_text_input/_text_input.jsx
 - app/pb_kits/playbook/pb_text_input/_text_input.scss
+- app/pb_kits/playbook/pb_text_input/docs/_text_input_custom.html.erb
+- app/pb_kits/playbook/pb_text_input/docs/_text_input_custom.jsx
 - app/pb_kits/playbook/pb_text_input/docs/_text_input_dark.html.erb
 - app/pb_kits/playbook/pb_text_input/docs/_text_input_dark.jsx
 - app/pb_kits/playbook/pb_text_input/docs/_text_input_default.html.erb

data/app/pb_kits/playbook/pb_select/docs/nitro_theme.gemspec

@@ -1,41 +0,0 @@
-$LOAD_PATH.push File.expand_path("lib", __dir__)
-
-Gem::Specification.new do |s|
-  s.name        = "nitro_theme"
-  s.version     = "0.0.1"
-  s.authors     = ["Nitro Developers"]
-  s.email       = ["dev@powerhrg.com"]
-  s.homepage    = "http://nitro.powerhrg.com"
-  s.summary     = "Nitro's visual theme"
-  s.description = "Nitro's visual theme, including page layout, styling and navigation"
-
-  s.files = Dir["{app,config,db,lib}/**/*"] + ["Rakefile", "README.md"]
-
-  s.add_dependency "bootstrap-sass", "3.3.5.1"
-  s.add_dependency "coffee-rails", "4.2.2"
-  s.add_dependency "jquery-rails", "4.3.1"
-  s.add_dependency "lodash-rails", "3.10.1"
-  s.add_dependency "naughty"
-  s.add_dependency "nitro_auth"
-  s.add_dependency "nitro_react"
-  s.add_dependency "nitro_sg", "3.0.2"
-  s.add_dependency "playbook_ui", "2.9.1"
-  s.add_dependency "rails", "5.1.6.2"
-  # should sassc version change, adjust umbrella Gemfile & Dockerfile accordingly
-  s.add_dependency "sassc", "1.11.4"
-  s.add_dependency "sassc-rails", "1.3.0"
-  s.add_dependency "simple_form", "4.0.1"
-  s.add_dependency "sprockets-rails", "2.3.3"
-  s.add_dependency "turbolinks", "~> 5"
-  s.add_dependency "will_paginate", "3.1.6"
-  s.add_dependency "will_paginate-bootstrap", "1.0.1"
-
-  s.add_development_dependency "nitro_linting"
-  s.add_development_dependency "pry-byebug", "3.5.0"
-  s.add_development_dependency "rainbow", "2.2.2"
-  s.add_development_dependency "rspec-rails"
-  s.add_development_dependency "simplecov", "0.15.1"
-  s.add_development_dependency "test-unit", "3.1.5"
-  s.add_development_dependency "timecop"
-  s.add_development_dependency "yard", "0.9.20"
-end