playbook_ui 2.9.9 → 3.0.0

data/app/pb_kits/playbook/pb_circle_icon_button/circle_icon_button.rb

@@ -0,0 +1,22 @@
+module Playbook
+  module PbCircleIconButton
+    class CircleIconButton
+      include Playbook::Props
+
+      partial "pb_circle_icon_button/circle_icon_button"
+
+      prop :variant, type: Playbook::Props::Enum,
+                     values: %w[primary secondary link],
+                     default: "primary"
+      prop :disabled, type: Playbook::Props::Boolean,
+                     default: false
+      prop :icon, required: true
+      prop :dark, type: Playbook::Props::Boolean,
+                     default: false
+
+      def classname
+        generate_classname("pb_circle_icon_button_kit")
+      end
+    end
+  end
+end

data/app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_dark.html.erb

@@ -0,0 +1,29 @@
+<%= pb_rails("circle_icon_button", props: {
+  variant: "primary",
+  icon: "plus",
+  dark: true
+}) %>
+
+<br/>
+
+<%= pb_rails("circle_icon_button", props: {
+  variant: "secondary",
+  icon: "pen",
+  dark: true
+}) %>
+
+<br/>
+
+<%= pb_rails("circle_icon_button", props: {
+  disabled: true,
+  icon: "times",
+  dark: true
+}) %>
+
+<br/>
+
+<%= pb_rails("circle_icon_button", props: {
+  variant: "link",
+  icon: "user",
+  dark: true
+}) %>

data/app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_dark.jsx

@@ -0,0 +1,38 @@
+import React from "react";
+import { CircleIconButton } from "../../";
+
+const CircleIconButtonDark = () => (
+  <div>
+    <CircleIconButton
+      variant="primary"
+      icon="plus"
+      dark
+    />
+
+    <br/>
+
+    <CircleIconButton
+      variant="secondary"
+      icon="pen"
+      dark
+    />
+
+    <br/>
+
+    <CircleIconButton
+      disabled={true}
+      icon="times"
+      dark
+    />
+
+    <br/>
+
+    <CircleIconButton
+      variant="link"
+      icon="user"
+      dark
+    />
+  </div>
+);
+
+export default CircleIconButtonDark;

data/app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_default.html.erb

@@ -0,0 +1,25 @@
+<%= pb_rails("circle_icon_button", props: {
+  variant: "primary",
+  icon: "plus"
+}) %>
+
+<br/>
+
+<%= pb_rails("circle_icon_button", props: {
+  variant: "secondary",
+  icon: "pen"
+}) %>
+
+<br/>
+
+<%= pb_rails("circle_icon_button", props: {
+  disabled: true,
+  icon: "times"
+}) %>
+
+<br/>
+
+<%= pb_rails("circle_icon_button", props: {
+  variant: "link",
+  icon: "user"
+}) %>

data/app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_default.jsx

@@ -0,0 +1,34 @@
+import React from "react";
+import { CircleIconButton } from "../../";
+
+const CircleIconButtonDefault = () => (
+  <div>
+    <CircleIconButton
+      variant="primary"
+      icon="plus"
+    />
+
+    <br/>
+
+    <CircleIconButton
+      variant="secondary"
+      icon="pen"
+    />
+
+    <br/>
+
+    <CircleIconButton
+      disabled={true}
+      icon="times"
+    />
+
+    <br/>
+
+    <CircleIconButton
+      variant="link"
+      icon="user"
+    />
+  </div>
+);
+
+export default CircleIconButtonDefault;

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

@@ -0,0 +1,9 @@
+examples:
+  
+  rails:
+  - circle_icon_button_default: Default
+  - circle_icon_button_dark: Dark
+  
+  react:
+  - circle_icon_button_default: Default
+  - circle_icon_button_dark: Dark

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

@@ -0,0 +1,2 @@
+export {default as CircleIconButtonDefault} from './_circle_icon_button_default.jsx';
+export {default as CircleIconButtonDark} from './_circle_icon_button_dark.jsx';

data/app/pb_kits/playbook/pb_dashboard_value/_dashboard_value.html.erb

@@ -7,7 +7,7 @@
   <% end %>
 
   <% if object.stat_value.present? %>
-    <%= pb_rails("stat_value", props: object.stat_value) %>
+    <%= pb_rails("stat_value", props: object.formatted_stat_value) %>
   <% end %>
 
   <% if object.stat_change.present? %>

data/app/pb_kits/playbook/pb_dashboard_value/dashboard_value.rb

@@ -16,6 +16,10 @@ module Playbook
       prop :stat_value, type: Playbook::Props::Hash,
                         default: {}
 
+      def formatted_stat_value
+        { **stat_value, value: stat_value[:value].to_i }
+      end
+
       def classname
         generate_classname("pb_dashboard_value_kit", align)
       end

data/app/pb_kits/playbook/pb_date/_date.jsx

@@ -1,21 +1,55 @@
+/* @flow */
+
 import React from 'react';
-import PropTypes from "prop-types";
-
-const propTypes = {
-  className: PropTypes.string,
-  id: PropTypes.string
-};
-
-class Date extends React.Component {
-  render() {
-    return (
-      <div className="pb_date">
-        <span>DATE CONTENT</span>
-      </div>
-    )
-  }
+import DateTime from '../pb_kit/dateTime.js'
+import moment from 'moment'
+import {Icon} from '../'
+
+type DateProps = {
+  size?: 'xs' | 'sm' | 'lg',
+  value?: String,
+}
+
+
+const defaultDateString = value => {
+  const weekday = value.toWeekday().toUpperCase()
+  const month = value.toMonth().toUpperCase()
+  const day = value.toDay()
+
+  return `${weekday} · ${month} ${day}`
+}
+
+const largeDateString = value => {
+  const month = value.toMonth().toUpperCase()
+  const day = value.toDay()
+
+  return `${month} ${day}`
 }
 
-Date.propTypes = propTypes;
 
-export default Date;
+const ExtraSmallDate = ({ value }) => (
+  <h3 className='pb_title_kit_4'>{defaultDateString(value)}</h3>
+)
+
+const SmallDate = ({ value }) => (
+  <h3 className='pb_title_kit_4'><Icon icon="calendar" fixedWidth="true" />{defaultDateString(value)}</h3>
+)
+
+const LargeDate = ({ value }) => (
+  <h3 className='pb_title_kit_3'>{largeDateString(value)}</h3>
+)
+
+
+export default function Date(props: DateProps) {
+  const {
+    size,
+    value,
+  } = props
+
+  const dateTimeValue = new DateTime({ value: value });
+
+  if (size == 'xs') return <ExtraSmallDate value={dateTimeValue} />
+  if (size == 'lg') return <LargeDate value={dateTimeValue} />
+
+  return <SmallDate value={dateTimeValue} />
+}

data/app/pb_kits/playbook/pb_date/docs/_date_default.jsx

@@ -1,10 +1,18 @@
 import React from "react"
-import Date from "../../"
+import {Date} from "../../"
 
 function DateDefault() {
   return (
     <div>
-      <h1>{`Coming Soon...`}</h1>
+      <Date size='lg' value='1995-12-25' />
+
+      <br/>
+
+      <Date value='17 Mar 69' />
+
+      <br/>
+
+      <Date size='xs' value='2020-04-20T04:20:00.000Z' />
     </div>
   )
 }

data/app/pb_kits/playbook/pb_form/_form.scss

@@ -0,0 +1,11 @@
+.pb-form {
+  .pb-form-actions {
+    list-style: none;
+    margin: 8px;
+    padding: 0;
+
+    > li {
+      display: inline-flex;
+    }
+  }
+}

data/app/pb_kits/playbook/pb_form/_form_form_with.html.erb

@@ -0,0 +1,3 @@
+<%= form_with object.merged_form_system_options do |form| %>
+  <% instance_exec form, &object.children %>
+<% end %>

data/app/pb_kits/playbook/pb_form/_form_simple_form.html.erb

@@ -0,0 +1,3 @@
+<%= simple_form_for *object.merged_form_system_options do |form| %>
+  <% instance_exec form, &object.children %>
+<% end %>

data/app/pb_kits/playbook/pb_form/docs/_form_form_with.html.erb

@@ -0,0 +1,14 @@
+<%= pb_rails("form", props: { form_system_options: { scope: :example, method: :get } }) do |form| %>
+  <%= form.text_field :example_text_field, props: { label: true } %>
+  <%= form.telephone_field :example_phone_field, props: { label: true } %>
+  <%= form.email_field :example_email_field, props: { label: true } %>
+  <%= form.number_field :example_number_field, props: { label: true } %>
+  <%= form.search_field :example_search_field, props: { label: true } %>
+  <%= form.password_field :example_password_field, props: { label: true } %>
+  <%= form.url_field :example_url_field, props: { label: true } %>
+
+  <%= form.actions do |action| %>
+    <%= action.submit %>
+    <%= action.button props: { type: "reset", text: "Cancel", variant: "secondary" } %>
+  <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_form/docs/_form_simple_form.html.erb

@@ -0,0 +1,36 @@
+<%
+  require "simple_form" unless defined?(SimpleForm)
+  require "active_model/railtie" unless defined?(ActiveModel)
+
+  example_form_model = Class.new do
+    include ::ActiveModel::Model
+    attr_accessor :example_text_field,
+                  :example_phone_field,
+                  :example_email_field,
+                  :example_number_field,
+                  :example_search_field,
+                  :example_password_field,
+                  :example_url_field
+
+
+   def self.model_name
+     ActiveModel::Name.new(self, nil, "ExampleFormModel")
+   end
+  end
+%>
+
+
+<%= pb_rails("form", props: { form_system: "simple_form", form_system_options: [example_form_model.new, url: "", method: :get] }) do |form| %>
+  <%= form.input :example_text_field, as: :string %>
+  <%= form.input :example_phone_field, as: :tel %>
+  <%= form.input :example_email_field, as: :email %>
+  <%= form.input :example_number_field, as: :integer %>
+  <%= form.input :example_search_field, as: :search %>
+  <%= form.input :example_password_field, as: :password %>
+  <%= form.input :example_url_field, as: :url %>
+
+  <%= form.actions do |action| %>
+    <%= action.submit %>
+    <%= action.button props: { type: "reset", text: "Cancel", variant: "secondary" } %>
+  <% end %>
+<% end %>

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

@@ -0,0 +1,5 @@
+examples:
+
+  rails:
+  - form_form_with: Default (Form With)
+  - form_simple_form: Default (Simple Form)

data/app/pb_kits/playbook/pb_form/form.rb

@@ -0,0 +1,28 @@
+# frozen_string_literal: true
+
+# require_dependency "app/pb_kits/playbook/pb_form/form_builder"
+
+module Playbook
+  module PbForm
+    class Form
+      include Playbook::Props
+
+      clear_props
+      prop :form_system, type: Playbook::Props::Enum,
+                         values: %w[form_with simple_form],
+                         default: "form_with"
+      prop :form_system_options, type: Playbook::Props::Base
+      prop :children, type: Playbook::Props::Proc
+
+      delegate :to_partial_path, to: :specific_form
+      delegate :merged_form_system_options, to: :specific_form
+      delegate :form_builder, to: :specific_form
+
+    private
+
+      def specific_form
+        @specific_form ||= "#{self.class}::#{form_system.classify}Form".constantize.new(self)
+      end
+    end
+  end
+end

data/app/pb_kits/playbook/pb_form/form/form_with_form.rb

@@ -0,0 +1,38 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbForm
+    class Form
+      class FormWithForm
+        def initialize(form)
+          self.form = form
+        end
+
+        def to_partial_path
+          "pb_form/form_form_with"
+        end
+
+        def merged_form_system_options
+          Hash(form_system_options).merge(
+            class: merged_class,
+            builder: form_builder
+          )
+        end
+
+      private
+
+        attr_accessor :form
+
+        delegate_missing_to :form
+
+        def merged_class
+          "pb-form #{Hash(form_system_options)[:class]}".strip
+        end
+
+        def form_builder
+          FormBuilder::FormWithFormBuilder
+        end
+      end
+    end
+  end
+end

data/app/pb_kits/playbook/pb_form/form/simple_form_form.rb

@@ -0,0 +1,45 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbForm
+    class Form
+      class SimpleFormForm
+        def initialize(form)
+          self.form = form
+        end
+
+        def to_partial_path
+          "pb_form/form_simple_form"
+        end
+
+        def merged_form_system_options
+          [
+            Array(form_system_options)[0],
+            Hash(Array(form_system_options)[1]).merge(
+              html: merged_html,
+              builder: form_builder
+            ),
+          ]
+        end
+
+      private
+
+        attr_accessor :form
+
+        delegate_missing_to :form
+
+        def merged_html
+          html_options = Hash(Array(form_system_options)[1])[:html] || {}
+          html_class = html_options[:class]
+          html_options[:class] = "pb-form #{html_class}".strip
+
+          html_options
+        end
+
+        def form_builder
+          FormBuilder::SimpleFormBuilder
+        end
+      end
+    end
+  end
+end