playbook_ui 7.5.1 → 7.6.2.pre.alpha1

data/app/pb_kits/playbook/pb_selectable_list/_selectable_list.html.erb

@@ -0,0 +1,11 @@
+<%= content_tag(:div,
+    aria: object.aria,
+    class: object.classname,
+    data: object.data,
+    id: object.id) do %>
+      <%= pb_rails("list") do %>
+        <% object.items.each do |item| %>
+          <%= pb_rails("selectable_list/selectable_list_item", props: item.merge(variant: object.variant) )%>
+        <% end %>
+      <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_selectable_list/_selectable_list.jsx

@@ -0,0 +1,47 @@
+/* @flow */
+import React from 'react'
+import classnames from 'classnames'
+import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
+import { globalProps } from '../utilities/globalProps.js'
+import { List } from  '..'
+import SelectableListItem from './_item.jsx'
+
+type SelectableListProps = {
+  aria?: object,
+  children?: Node,
+  className?: string,
+  data?: object,
+  id?: string,
+  variant?: 'checkbox' | 'radio',
+}
+
+const SelectableList = (props: SelectableListProps) => {
+  const {
+    aria = {},
+    children,
+    className,
+    data = {},
+    id,
+  } = props
+
+  const ariaProps = buildAriaProps(aria)
+  const classes = classnames(buildCss('pb_selectable_list_kit'), globalProps(props), className)
+  const dataProps = buildDataProps(data)
+
+  return (
+    <div
+        {...ariaProps}
+        {...dataProps}
+        className={classes}
+        id={id}
+    >
+      <List {...props}>
+        {children}
+      </List>
+    </div>
+  )
+}
+
+SelectableList.Item = SelectableListItem
+
+export default SelectableList

data/app/pb_kits/playbook/pb_selectable_list/_selectable_list.scss

@@ -0,0 +1,17 @@
+@import "../tokens/colors";
+@import "../tokens/spacing";
+
+[class^=pb_selectable_list]{
+  margin-bottom: 0px;
+  [class^=pb_item_kit] {
+    &:hover {
+      background-color: $bg_light;
+    }
+  }
+  [class^=pb_radio_kit] {
+    margin-left: $space_xs;
+  }
+  [class^=pb_checkbox_kit] {
+    margin-left: $space_xs;
+  }
+}

data/app/pb_kits/playbook/pb_selectable_list/_selectable_list_item.html.erb

@@ -0,0 +1,18 @@
+<%= content_tag(:li,
+    aria: object.aria,
+    class: object.classname,
+    data: object.data,
+    id: object.id) do %>
+    <% puts object.variant %>
+  <% if object.variant == "radio"%>
+    <%= pb_rails("radio", props: { text: object.text, checked: object.checked, input_options: object.input_options } ) %>
+    <% if object.children.present? %>
+      <%= capture(&object.children) %>
+    <% end %>
+  <% else %>
+    <%= pb_rails("checkbox", props: { text: object.text, checked: object.checked, input_options: object.input_options } ) %>
+    <% if object.children.present? %>
+      <%= capture(&object.children) %>
+    <% end %>
+  <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_selectable_list/docs/_selectable_list_checkbox.html.erb

@@ -0,0 +1,27 @@
+<%= pb_rails("selectable_list",
+        props: {
+          variant: "checkbox",
+          items: [
+            { text: "Mild",
+              input_options: {
+                value: "1",
+                name: "checkbox-name-1",
+              }
+            },
+            { text: "Medium",
+              checked: true,
+              input_options: {
+                value: "2",
+                name: "checkbox-name-2",
+              }
+            },
+            { text: "Hot",
+              input_options: {
+                value: "3",
+                name: "checkbox-name-3",
+              }
+            }
+          ]
+        }
+    )
+%>

data/app/pb_kits/playbook/pb_selectable_list/docs/_selectable_list_checkbox.jsx

@@ -0,0 +1,29 @@
+import React from 'react'
+import { SelectableList } from '../..'
+
+const SelectableListDefault = () => {
+  return (
+    <div>
+      <SelectableList variant="checkbox">
+        <SelectableList.Item
+            label="Mild"
+            name="checkbox-name-1"
+            value="1"
+        />
+        <SelectableList.Item
+            checked
+            label="Medium"
+            name="checkbox-name-2"
+            value="2"
+        />
+        <SelectableList.Item
+            label="Hot"
+            name="checkbox-name-3"
+            value="3"
+        />
+      </SelectableList>
+    </div>
+  )
+}
+
+export default SelectableListDefault

data/app/pb_kits/playbook/pb_selectable_list/docs/_selectable_list_radio.html.erb

@@ -0,0 +1,27 @@
+<%= pb_rails("selectable_list",
+        props: {
+          variant: "radio",
+          items: [
+            { text: "Small",
+              input_options: {
+                value: "1",
+                name: "radio-name",
+              }
+            },
+            { text: "Medium",
+              checked: true,
+              input_options: {
+                value: "2",
+                name: "radio-name",
+              }
+            },
+            { text: "Large",
+              input_options: {
+                value: "3",
+                name: "radio-name",
+              }
+            }
+          ]
+        }
+    )
+%>

data/app/pb_kits/playbook/pb_selectable_list/docs/_selectable_list_radio.jsx

@@ -0,0 +1,29 @@
+import React from 'react'
+import { SelectableList } from '../..'
+
+const SelectableListDefault = () => {
+  return (
+    <div>
+      <SelectableList variant="radio">
+        <SelectableList.Item
+            label="Small"
+            name="radio"
+            value="1"
+        />
+        <SelectableList.Item
+            defaultChecked
+            label="Medium"
+            name="radio"
+            value="2"
+        />
+        <SelectableList.Item
+            label="Large"
+            name="radio"
+            value="3"
+        />
+      </SelectableList>
+    </div>
+  )
+}
+
+export default SelectableListDefault

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

@@ -0,0 +1,12 @@
+examples:
+
+  rails:
+  - selectable_list_checkbox: Default
+  - selectable_list_radio: Radio variant
+
+
+  react:
+  - selectable_list_checkbox: Default
+  - selectable_list_radio: Radio variant
+
+

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

@@ -0,0 +1,2 @@
+export { default as SelectableListCheckbox } from './_selectable_list_checkbox.jsx'
+export { default as SelectableListRadio } from './_selectable_list_radio.jsx'

data/app/pb_kits/playbook/pb_selectable_list/selectable_list.rb

@@ -0,0 +1,24 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbSelectableList
+    class SelectableList
+      include Playbook::Props
+
+      partial "pb_selectable_list/selectable_list"
+
+      prop :variant, type: Playbook::Props::Enum,
+                     values: %w[radio checkbox],
+                     default: "checkbox"
+
+      prop :text, type: Playbook::Props::String
+
+      prop :items, type: Playbook::Props::Array,
+                   default: []
+
+      def classname
+        generate_classname("pb_selectable_list_kit")
+      end
+    end
+  end
+end

data/app/pb_kits/playbook/pb_selectable_list/selectable_list_item.rb

@@ -0,0 +1,28 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbSelectableList
+    class SelectableListItem
+      include Playbook::Props
+
+      prop :tabindex
+
+      prop :checked, type: Playbook::Props::Boolean,
+                     default: false
+      prop :name, type: Playbook::Props::String
+      prop :text, type: Playbook::Props::String
+      prop :value, type: Playbook::Props::String
+      prop :variant, type: Playbook::Props::Enum,
+                     values: %w[radio checkbox],
+                     default: "radio"
+      prop :input_options, type: Playbook::Props::Hash,
+                           default: {}
+
+      partial "pb_selectable_list/selectable_list_item"
+
+      def classname
+        generate_classname("pb_selectable_list_item_kit")
+      end
+    end
+  end
+end

data/lib/playbook/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module Playbook
-  VERSION = "7.5.1"
+  VERSION = "7.6.2.pre.alpha1"
 end

metadata

@@ -1,15 +1,15 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 7.5.1
+  version: 7.6.2.pre.alpha1
 platform: ruby
 authors:
 - Power UX
 - Power Devs
-autorequire: 
+autorequire:
 bindir: bin
 cert_chain: []
-date: 2020-11-05 00:00:00.000000000 Z
+date: 2020-11-10 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -405,6 +405,7 @@ files:
 - app/assets/images/pb-logo.svg
 - app/assets/images/pb-white-logo.svg
 - app/assets/images/pb.logo.svg
+- app/assets/images/sample_screenshot.svg
 - app/controllers/playbook/application_controller.rb
 - app/helpers/playbook/application_helper.rb
 - app/helpers/playbook/layout_helper.rb
@@ -939,6 +940,26 @@ files:
 - app/pb_kits/playbook/pb_form/form_builder/simple_form_builder.rb
 - app/pb_kits/playbook/pb_form/form_builder/typeahead_field.rb
 - app/pb_kits/playbook/pb_form/pb_form_validation.js
+- app/pb_kits/playbook/pb_form_group/_form_group.html.erb
+- app/pb_kits/playbook/pb_form_group/_form_group.jsx
+- app/pb_kits/playbook/pb_form_group/_form_group.scss
+- app/pb_kits/playbook/pb_form_group/docs/_form_group_button.html.erb
+- app/pb_kits/playbook/pb_form_group/docs/_form_group_button.jsx
+- app/pb_kits/playbook/pb_form_group/docs/_form_group_date_picker.html.erb
+- app/pb_kits/playbook/pb_form_group/docs/_form_group_date_picker.jsx
+- app/pb_kits/playbook/pb_form_group/docs/_form_group_default.html.erb
+- app/pb_kits/playbook/pb_form_group/docs/_form_group_default.jsx
+- app/pb_kits/playbook/pb_form_group/docs/_form_group_select.html.erb
+- app/pb_kits/playbook/pb_form_group/docs/_form_group_select.jsx
+- app/pb_kits/playbook/pb_form_group/docs/_form_group_selectable_card.html.erb
+- app/pb_kits/playbook/pb_form_group/docs/_form_group_selectable_card.jsx
+- app/pb_kits/playbook/pb_form_group/docs/_form_group_selectable_card_icon.html.erb
+- app/pb_kits/playbook/pb_form_group/docs/_form_group_selectable_card_icon.jsx
+- app/pb_kits/playbook/pb_form_group/docs/_form_group_typeahead.html.erb
+- app/pb_kits/playbook/pb_form_group/docs/_form_group_typeahead.jsx
+- app/pb_kits/playbook/pb_form_group/docs/example.yml
+- app/pb_kits/playbook/pb_form_group/docs/index.js
+- app/pb_kits/playbook/pb_form_group/form_group.rb
 - app/pb_kits/playbook/pb_form_pill/_form_pill.html.erb
 - app/pb_kits/playbook/pb_form_pill/_form_pill.jsx
 - app/pb_kits/playbook/pb_form_pill/_form_pill.scss
@@ -1079,6 +1100,8 @@ files:
 - app/pb_kits/playbook/pb_image/docs/_default_image.html.erb
 - app/pb_kits/playbook/pb_image/docs/_default_image.jsx
 - app/pb_kits/playbook/pb_image/docs/_description.md
+- app/pb_kits/playbook/pb_image/docs/_rounded_image.html.erb
+- app/pb_kits/playbook/pb_image/docs/_rounded_image.jsx
 - app/pb_kits/playbook/pb_image/docs/example.yml
 - app/pb_kits/playbook/pb_image/docs/index.js
 - app/pb_kits/playbook/pb_image/image.rb
@@ -1472,6 +1495,9 @@ files:
 - app/pb_kits/playbook/pb_selectable_card/docs/_selectable_card_default.html.erb
 - app/pb_kits/playbook/pb_selectable_card/docs/_selectable_card_default.jsx
 - app/pb_kits/playbook/pb_selectable_card/docs/_selectable_card_default.md
+- app/pb_kits/playbook/pb_selectable_card/docs/_selectable_card_image.html.erb
+- app/pb_kits/playbook/pb_selectable_card/docs/_selectable_card_image.jsx
+- app/pb_kits/playbook/pb_selectable_card/docs/_selectable_card_image.md
 - app/pb_kits/playbook/pb_selectable_card/docs/_selectable_card_options.html.erb
 - app/pb_kits/playbook/pb_selectable_card/docs/_selectable_card_single_select.html.erb
 - app/pb_kits/playbook/pb_selectable_card/docs/_selectable_card_single_select.jsx
@@ -1503,6 +1529,19 @@ files:
 - app/pb_kits/playbook/pb_selectable_icon/docs/example.yml
 - app/pb_kits/playbook/pb_selectable_icon/docs/index.js
 - app/pb_kits/playbook/pb_selectable_icon/selectable_icon.rb
+- app/pb_kits/playbook/pb_selectable_list/_item.jsx
+- app/pb_kits/playbook/pb_selectable_list/_selectable_list.html.erb
+- app/pb_kits/playbook/pb_selectable_list/_selectable_list.jsx
+- app/pb_kits/playbook/pb_selectable_list/_selectable_list.scss
+- app/pb_kits/playbook/pb_selectable_list/_selectable_list_item.html.erb
+- app/pb_kits/playbook/pb_selectable_list/docs/_selectable_list_checkbox.html.erb
+- app/pb_kits/playbook/pb_selectable_list/docs/_selectable_list_checkbox.jsx
+- app/pb_kits/playbook/pb_selectable_list/docs/_selectable_list_radio.html.erb
+- app/pb_kits/playbook/pb_selectable_list/docs/_selectable_list_radio.jsx
+- app/pb_kits/playbook/pb_selectable_list/docs/example.yml
+- app/pb_kits/playbook/pb_selectable_list/docs/index.js
+- app/pb_kits/playbook/pb_selectable_list/selectable_list.rb
+- app/pb_kits/playbook/pb_selectable_list/selectable_list_item.rb
 - app/pb_kits/playbook/pb_source/_source.html.erb
 - app/pb_kits/playbook/pb_source/_source.jsx
 - app/pb_kits/playbook/pb_source/_source.scss
@@ -1911,7 +1950,7 @@ homepage: http://playbook.powerapp.cloud
 licenses:
 - MIT
 metadata: {}
-post_install_message: 
+post_install_message:
 rdoc_options: []
 require_paths:
 - lib
@@ -1922,13 +1961,12 @@ required_ruby_version: !ruby/object:Gem::Requirement
       version: '0'
 required_rubygems_version: !ruby/object:Gem::Requirement
   requirements:
-  - - ">="
+  - - ">"
     - !ruby/object:Gem::Version
-      version: '0'
+      version: 1.3.1
 requirements: []
-rubyforge_project: 
-rubygems_version: 2.7.3
-signing_key: 
+rubygems_version: 3.1.4
+signing_key:
 specification_version: 4
 summary: Playbook Design System
 test_files: []