playbook_ui 2.9.9 → 3.0.0

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

@@ -0,0 +1,23 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbForm
+    module FormBuilder
+      extend ActiveSupport::Concern
+
+      included do
+        prepend(TextInputBuilder.new(:email_field))
+        prepend(TextInputBuilder.new(:number_field))
+        prepend(TextInputBuilder.new(:search_field))
+        prepend(TextInputBuilder.new(:telephone_field))
+        prepend(TextInputBuilder.new(:text_field))
+        prepend(TextInputBuilder.new(:password_field))
+        prepend(TextInputBuilder.new(:url_field))
+
+        def actions(&block)
+          ActionArea.new(self).wrapper(&block)
+        end
+      end
+    end
+  end
+end

data/app/pb_kits/playbook/pb_form/form_builder/action_area.rb

@@ -0,0 +1,40 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbForm
+    module FormBuilder
+      class ActionArea
+        def initialize(form_builder)
+          self.form_builder = form_builder
+        end
+
+        def submit(value = nil, props: {})
+          props[:type] ||= "submit"
+          button(value, props: props)
+        end
+
+        def button(value = nil, props:)
+          props[:text] ||= value || form_builder.send(:submit_default_value)
+
+          template.content_tag(:li) do
+            template.pb_rails("button", props: props)
+          end
+        end
+
+        def wrapper
+          template.content_tag(:ol, class: "pb-form-actions") do
+            yield self
+          end
+        end
+
+      private
+
+        attr_accessor :form_builder
+
+        def template
+          form_builder.instance_variable_get("@template")
+        end
+      end
+    end
+  end
+end

data/app/pb_kits/playbook/pb_form/form_builder/form_with_form_builder.rb

@@ -0,0 +1,11 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbForm
+    module FormBuilder
+      class FormWithFormBuilder < ActionView::Helpers::FormBuilder
+        include FormBuilder
+      end
+    end
+  end
+end

data/app/pb_kits/playbook/pb_form/form_builder/simple_form_builder.rb

@@ -0,0 +1,25 @@
+# frozen_string_literal: true
+
+if defined?(SimpleForm)
+  module Playbook
+    module PbForm
+      module FormBuilder
+        class SimpleFormBuilder < SimpleForm::FormBuilder
+          include FormBuilder
+
+          def input(attribute_name, options = {}, &block)
+            super(
+              attribute_name,
+              options.merge(label: false, input_html: {
+                              props: {
+                                label: true,
+                              },
+                            }),
+              &block
+            )
+          end
+        end
+      end
+    end
+  end
+end

data/app/pb_kits/playbook/pb_form/form_builder/text_input_builder.rb

@@ -0,0 +1,22 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbForm
+    module FormBuilder
+      class TextInputBuilder < Module
+        def initialize(method_name)
+          define_method method_name do |name, props: {}, **options, &block|
+            props[:label] = @template.label(@object_name, name) if props[:label] == true
+            options = Hash(options)
+            options[:skip_default_ids] = false unless options.has_key?(:skip_default_ids)
+            input = super(name, **options, &block)
+
+            @template.pb_rails("text_input", props: props) do
+              input
+            end
+          end
+        end
+      end
+    end
+  end
+end

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

@@ -1,19 +1,24 @@
+/* @flow */
+
 import React from 'react';
-import PropTypes from "prop-types";
+import {Icon} from "../";
 
-const propTypes = {
-  className: PropTypes.string,
-  id: PropTypes.string
+const IconCircleProps = {
+  className: String,
+  icon: String,
+  id: String,
+  size: String,
+  variant: String,
 };
 
-class IconCircle extends React.Component {
-  render() {
-    return (
-      <h1>{`Coming Soon...`}</h1>
-    )
-  }
-}
-
-IconCircle.propTypes = propTypes;
+const IconCircle = ({
+  icon,
+  size='md',
+  variant='default'
+}: IconCircleProps) => (
+  <div className={`pb_icon_circle_kit_${size}_${variant}`}>
+    <Icon icon={icon} />
+  </div>
+)
 
-export default IconCircle;
+export default IconCircle

data/app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_color.jsx

@@ -0,0 +1,19 @@
+import React from 'react'
+import classnames from 'classnames'
+import {IconCircle} from '../../'
+
+function IconCircleColor() {
+  return (
+    <div>
+      <IconCircle icon="rocket" size="sm" variant="royal" /><br />
+      <IconCircle icon="rocket" size="sm" variant="blue" /><br />
+      <IconCircle icon="rocket" size="sm" variant="purple" /><br />
+      <IconCircle icon="rocket" size="sm" variant="teal" /><br />
+      <IconCircle icon="rocket" size="sm" variant="red" /><br />
+      <IconCircle icon="rocket" size="sm" variant="yellow" /><br />
+      <IconCircle icon="rocket" size="sm" variant="green" />
+    </div>
+  )
+}
+
+export default IconCircleColor;

data/app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_default.jsx

@@ -1,12 +1,13 @@
-import React from "react"
-import {IconCircle} from "../../"
+import React from 'react'
+import classnames from 'classnames'
+import {IconCircle} from '../../'
 
 function IconCircleDefault() {
   return (
     <div>
-      <IconCircle />
+      <IconCircle icon="rocket" size="md"/>
     </div>
   )
 }
 
-export default IconCircleDefault
+export default IconCircleDefault;

data/app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_size.jsx

@@ -0,0 +1,16 @@
+import React from 'react'
+import classnames from 'classnames'
+import {IconCircle} from '../..'
+
+function IconCircleSize() {
+  return (
+    <div>
+      <IconCircle icon="rocket" size="sm"/><br />
+      <IconCircle icon="rocket" size="md"/><br />
+      <IconCircle icon="rocket" size="lg"/><br />
+      <IconCircle icon="rocket" size="xl"/>
+    </div>
+  )
+}
+
+export default IconCircleSize;

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

@@ -5,6 +5,7 @@ examples:
   - icon_circle_sizes: Size
   - icon_circle_color: Color
 
-
   react:
   - icon_circle_default: Default
+  - icon_circle_size: Size
+  - icon_circle_color: Color

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

@@ -1 +1,3 @@
+export {default as IconCircleColor} from './_icon_circle_color.jsx';
 export {default as IconCircleDefault} from './_icon_circle_default.jsx';
+export {default as IconCircleSize} from './_icon_circle_size.jsx';

data/app/pb_kits/playbook/pb_kit/dateTime.js

@@ -39,6 +39,10 @@ export default class DateTime {
     return this.value.strftime("%e")
   }
 
+  toWeekday() {
+    return this.value.strftime("%a")
+  }
+
   toIso() {
     return this.value.toISOString();
   }

data/app/pb_kits/playbook/pb_layout/_layout.jsx

@@ -1,54 +1,56 @@
-import React, { Component } from "react";
-import PropTypes from "prop-types";
+/* @flow */
 
-const propTypes = {
-  position: PropTypes.oneOf(["left", "right"]),
-  transparent: PropTypes.bool,
-  size: PropTypes.oneOf(["xs", "sm", "md", "base", "lg", "xl"]),
-  collapse: PropTypes.oneOf(["xs", "sm", "md", "lg", "xl"]),
-  full: PropTypes.bool,
-  dark: PropTypes.bool,
-  children: PropTypes.oneOfType([
-      PropTypes.arrayOf(PropTypes.node),
-      PropTypes.node
-  ])
-};
+import React from 'react'
+import classnames from 'classnames'
 
-const defaultProps = {
-  position: "left",
-  transparent: false,
-  size: "base",
-  collapse: "md",
-  full: false,
-  dark: false
-};
+import {
+  buildAriaProps,
+  buildDataProps,
+  buildCss,
+} from '../utilities/props'
 
-class Layout extends Component {
-  render() {
-    const {
-      position,
-      transparent,
-      size,
-      collapse,
-      full,
-      dark,
-      children
-    } = this.props;
-    const dark_class = dark === true ? "_dark" : ""
-    const transparent_class = transparent === true ? "_transparent" : ""
-    const full_class = full === true ? " full" : ""
-    const size_class = "_"+size
-    const position_class = "_"+position
-    const collapse_class = " layout"+position_class+"_collapse_"+collapse
-    return (
-      <div className={`pb_layout${size_class}${position_class}${dark_class}${transparent_class}${full_class}${collapse_class}`}>
-        {children}
-      </div>
-    );
-  }
+type LayoutProps = {
+  aria?: object,
+  children?: Array<React.ReactChild>,
+  collapse?: 'xs' | 'sm' | 'md' | 'lg' | 'xl',
+  dark?: Boolean,
+  data?: object,
+  full?: Boolean,
+  position?: 'left' | 'right',
+  size?: 'xs' | 'sm' | 'md' | 'base' | 'lg' | 'xl',
+  transparent?: Boolean
 }
 
-Layout.propTypes = propTypes;
-Layout.defaultProps = defaultProps;
+const Layout = ({
+  aria = {},
+  children,
+  collapse = 'md',
+  dark = false,
+  data = {},
+  full = false,
+  gradient = false,
+  position = 'left',
+  transparent = false,
+  size = 'base'
+}: LayoutProps) => {
+  const ariaProps = buildAriaProps(aria)
+  const dataProps = buildDataProps(data)
 
-export default Layout;
+  const collapse_class = 'layout'+position_class+'_collapse_'+collapse;
+  const css = buildCss({
+    'pb_layout_kit': true,
+    [size]: true,
+    [position]: true,
+    'dark': dark === true,
+    'transparent': transparent === true,
+    'full': full === true
+  })
+
+  return (
+    <div {...ariaProps} {...dataProps} className={classnames(css, collapse_class)}>
+      {children}
+    </div>
+  )
+}
+
+export default Layout

data/app/pb_kits/playbook/pb_layout/_layout.scss

@@ -3,8 +3,7 @@
 @import "../tokens/screen_sizes";
 @import "./layout_mixin";
 
-.pb_layout {
-
+[class^=pb_layout_kit] {
   $layout_sizes: (
     "xs":   64px,
     "sm":   200px,
@@ -19,16 +18,17 @@
   $colors: (
     "light",
     "dark",
+    "gradient",
     "transparent",
   );
 
   // Sections
-  &_section {
+  &[class*=_section] {
     padding: $space_sm $space_xl;
-    &_border {
+    &[class*=_border] {
       padding: $space_sm $space_xl;
       border-bottom: 1px solid $border_light;
-      &_margin {
+      &[class*=_margin] {
         margin: $space_sm $space_xl;
         border-bottom: 1px solid $border_light;
       }
@@ -37,16 +37,12 @@
 
   // sidebar and Body
   @each $name, $size in $layout_sizes {
-    &_#{$name} {
+    &[class*=_size_#{$name}] {
       @each $position in $positions {
-        &_#{$position} {
+        &[class*=_#{$position}] {
           @each $color in $colors {
-            @if $color == "light" {
+            &[class*=_#{$color}] {
               @include layout_settings($size, $position, $color, "#{&}");
-            } @else {
-              &_#{$color} {
-                @include layout_settings($size, $position, $color, "#{&}");
-              }
             }
           }
         }

data/app/pb_kits/playbook/pb_layout/_layout_mixin.scss

@@ -36,6 +36,9 @@
       @if $color == 'dark' {
         background: $bg_dark;
         border-color: $border_dark;
+      } @else if $color == 'gradient' {
+        border-color: $border_dark;
+        @include gradient;
       } @else if $color == 'transparent' {
         border-color: transparent;
       } @else {
@@ -49,6 +52,9 @@
       @if $color == 'dark' {
         background: $bg_dark;
         border-color: $border_dark;
+      } @else if $color == 'gradient' {
+        border-color: $border_dark;
+        @include gradient;
       } @else if $color == 'transparent' {
         border-color: transparent;
       } @else {

data/app/pb_kits/playbook/pb_layout/docs/_layout_colors.html.erb

@@ -0,0 +1,24 @@
+<%= pb_rails("layout", props: {position: "left", size: "sm", collapse: "md"}) do %>
+  <%= pb_rails("layout/sidebar") do %>
+    <%= pb_rails("body", props: { text: "Light" }) %>
+  <% end %>
+  <%= pb_rails("layout/body") do %> Body <% end %>
+<% end %>
+
+<br/><br/>
+
+<%= pb_rails("layout", props: {position: "left", size: "sm", collapse: "md", variant: "dark"}) do %>
+  <%= pb_rails("layout/sidebar") do %>
+    <%= pb_rails("body", props: { text: "Dark", dark: true }) %>
+  <% end %>
+  <%= pb_rails("layout/body") do %> Body <% end %>
+<% end %>
+
+<br/><br/>
+
+<%= pb_rails("layout", props: {position: "left", size: "sm", collapse: "md", variant: "gradient"}) do %>
+  <%= pb_rails("layout/sidebar") do %>
+    <%= pb_rails("body", props: { text: "Gradient", dark: true }) %>
+  <% end %>
+  <%= pb_rails("layout/body") do %> Body <% end %>
+<% end %>