playbook_ui 7.3.0 → 7.4.0.pre.alpha6

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

@@ -19,7 +19,6 @@ type RadioProps = {
   label: String,
   name: String,
   value: String,
-  text: String,
   onChange: (Boolean)=>void,
 }
 
@@ -33,7 +32,6 @@ const Radio = ({
   id,
   label,
   name = 'radio_name',
-  text = 'Radio Text',
   value = 'radio_text',
   onChange = () => {},
   ...props
@@ -57,7 +55,6 @@ const Radio = ({
             id={id}
             name={name}
             onChange={onChange}
-            text={text}
             type="radio"
             value={value}
         />

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

@@ -0,0 +1,90 @@
+/* @flow */
+import React, { Node } from 'react'
+import classnames from 'classnames'
+import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
+import { globalProps } from '../utilities/globalProps.js'
+import { Checkbox, ListItem, Radio } from '..'
+
+type SelectableListItemProps = {
+  aria?: object,
+  children: array<Node> | Node,
+  checked?: boolean,
+  className?: string,
+  data?: object,
+  defaultChecked?: boolean,
+  id?: string,
+  label?: string,
+  text?: string,
+  name?: string,
+  value?: string,
+  variant?: string,
+  onChange: (boolean)=>void,
+}
+
+const SelectableListItem = ({
+  aria = {},
+  checked = false,
+  children,
+  className,
+  data = {},
+  defaultChecked,
+  id,
+  label,
+  text = '',
+  name = '',
+  value = '',
+  variant = 'checkbox',
+  onChange = () => {},
+  ...props
+}: SelectableListItemProps) => {
+  const ariaProps = buildAriaProps(aria)
+  const dataProps = buildDataProps(data)
+  const classes = classnames(
+    buildCss('pb_selectable_list_item_kit'),
+    globalProps(props),
+    className
+  )
+
+  return (
+    <ListItem {...props}>
+      <div
+          {...ariaProps}
+          {...dataProps}
+          className={classes}
+      >
+        <Choose>
+          <When condition={variant == 'checkbox'}>
+            <Checkbox
+                checked={checked}
+                id={id}
+                name={name}
+                onChange={onChange}
+                // eslint suppressor, text is needed to display on screen
+                text={label || (text && false)}
+                type="checkbox"
+                value={value}
+                {...props}
+            />
+            {children}
+          </When>
+          <When condition={variant == 'radio'}>
+            <Radio
+                defaultChecked={defaultChecked}
+                id={id}
+                label={label}
+                name={name}
+                onChange={onChange}
+                type="radio"
+                value={value}
+                {...props}
+            />
+            {children}
+          </When>
+          <Otherwise>{children}</Otherwise>
+        </Choose>
+      </div>
+    </ListItem>
+  )
+}
+
+export default SelectableListItem

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/_description.md

@@ -0,0 +1,3 @@
+Selectable List Kit can take variants checkbox and radio. Regardless of which variant type, each selectable list item needs a `value`, `name`, and `id` (these props are `<input>` attributes).
+
+The Selectable List Item`id` prop will provide the `for` attribute to `<label>` in the kit, so no additional attributes are needed for the association between `<label>` and `<input>`.

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

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

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

@@ -0,0 +1,32 @@
+import React from 'react'
+import { SelectableList } from '../..'
+
+const SelectableListDefault = () => {
+  return (
+    <div>
+      <SelectableList variant="checkbox">
+        <SelectableList.Item
+            id="checkbox-id-1"
+            label="Mild"
+            name="checkbox-name-1"
+            value="1"
+        />
+        <SelectableList.Item
+            checked
+            id="checkbox-id-2"
+            label="Medium"
+            name="checkbox-name-2"
+            value="2"
+        />
+        <SelectableList.Item
+            id="checkbox-id-3"
+            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,30 @@
+<%= pb_rails("selectable_list",
+        props: {
+          variant: "radio",
+          items: [
+            { text: "Small",
+              input_options: {
+                value: "1",
+                name: "radio-name",
+                id: "radio-id-1",
+              }
+            },
+            { text: "Medium",
+              checked: true,
+              input_options: {
+                value: "2",
+                name: "radio-name",
+                id: "radio-id-2",
+              }
+            },
+            { text: "Large",
+              input_options: {
+                value: "3",
+                name: "radio-name",
+                id: "radio-id-3",
+              }
+            }
+          ]
+        }
+    )
+%>

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

@@ -0,0 +1,32 @@
+import React from 'react'
+import { SelectableList } from '../..'
+
+const SelectableListDefault = () => {
+  return (
+    <div>
+      <SelectableList variant="radio">
+        <SelectableList.Item
+            id="radio-id-1"
+            label="Small"
+            name="radio"
+            value="1"
+        />
+        <SelectableList.Item
+            defaultChecked
+            id="radio-id-2"
+            label="Medium"
+            name="radio"
+            value="2"
+        />
+        <SelectableList.Item
+            id="radio-id-3"
+            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/app/pb_kits/playbook/pb_tooltip/_tooltip.scss

@@ -1,8 +1,6 @@
 @import "../tokens/positioning";
 @import "../tokens/colors";
 
-$tooltip_shadow: rgba(60, 106, 172, 0.18);
-
 @keyframes fadeIn {
   from {
     opacity: 0;
@@ -35,8 +33,19 @@ $tooltip_shadow: rgba(60, 106, 172, 0.18);
     &.flipped {
       margin-top: 15px;
       .arrow {
+        top: -35%;
         border-color: transparent transparent $white transparent;
-        transform: rotate(180deg);
+      }
+    }
+
+    &.react {
+      .arrow {
+        top: 78%;
+      }
+      &.flipped {
+        .arrow {
+          top: -8%;
+        }
       }
     }
 
@@ -57,7 +66,7 @@ $tooltip_shadow: rgba(60, 106, 172, 0.18);
       z-index: $z_9;
       margin-bottom: $space_sm;
       background-color: $white;
-      padding: $space_xs $space_sm;
+      padding: $space_xs $space_sm $space_xs $space_sm;
       box-shadow: $shadow_deeper;
       border-radius: $border_rad_light;
 
@@ -73,6 +82,10 @@ $tooltip_shadow: rgba(60, 106, 172, 0.18);
     .tooltip_tooltip{
       color: $white;
       background-color: rgba($black, $opacity_9);
+
+
+      &.show {
+      }
       .arrow {
         border-color: $black transparent transparent transparent;
         opacity: $opacity_9;
@@ -87,46 +100,6 @@ $tooltip_shadow: rgba(60, 106, 172, 0.18);
   }
 }
 
-// Right
-[class^="pb_tooltip_kit"] .tooltip_tooltip {
-
-  &[x-placement="right"] {
-    box-shadow: -8px 0 28px 0 $tooltip_shadow;
-    margin: 0 0 0 $space_sm;
-    .arrow {
-      left: -#{$space_xs};
-      margin-bottom: 0;
-      transform: rotate(90deg);
-    }
-    &.flipped .arrow {
-        transform: rotate(270deg);
-    }
-  }
-
-  &[x-placement="bottom"] {
-    box-shadow: 0 -12px 28px 0 $tooltip_shadow;
-    margin: $space_sm 0 0 0;
-    .arrow {
-      top: -18px;
-      margin-bottom: 0;
-      transform: rotate(180deg);
-    }
-    &.flipped .arrow {
-      transform: rotate(0deg);
-    }
-  }
-
-  &[x-placement="left"] {
-    box-shadow: 8px 0 28px 0 $tooltip_shadow;
-    margin: 0 $space_sm 0 0;
-    .arrow {
-      margin-bottom: 0;
-      right: -18px;
-      left: auto;
-      transform: rotate(270deg);
-    }
-    &.flipped .arrow {
-      transform: rotate(90deg);
-    }
-  }
+.tooltip_tooltip.top {
+  padding: ($space_xs - 3px) 0;
 }