playbook_ui 2.9.9 → 3.0.0

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

@@ -1 +1,3 @@
-export {default as SectionSeparatorDefault} from './_section_separator_default.jsx';
+export {default as SectionSeparatorLine} from './_section_separator_line.jsx'
+export {default as SectionSeparatorText} from './_section_separator_text.jsx'
+export {default as SectionSeparatorTextBackground} from './_section_separator_text_background.jsx'

data/app/pb_kits/playbook/pb_section_separator/section_separator.rb

@@ -8,9 +8,12 @@ module Playbook
       partial "pb_section_separator/section_separator"
 
       prop :text
+      prop :variant, type: Playbook::Props::Enum,
+                 values: %w[card background],
+                 default: "card"
 
       def classname
-        generate_classname("pb_section_separator_kit")
+        generate_classname("pb_section_separator_kit",variant)
       end
     end
   end

data/app/pb_kits/playbook/pb_select/_select.html.erb

@@ -0,0 +1,33 @@
+<%= content_tag(:div,
+  id: object.id,
+  data: object.data,
+  aria: object.aria,
+  class: object.classname) do %>
+  <% if object.label %>
+    <label class="pb_select_kit_label" for="<%= object.name %>">
+      <%= pb_rails("caption", props: { text: object.label, dark: object.dark, }) %>
+    </label>
+  <% end %>
+  <label class="pb_select_kit_wrapper" for="<%= object.name %>">
+    <% if object.children %>
+      <%= capture(&object.children) %>
+    <% else %>
+      <%= select_tag(
+        object.name,
+        options_for_select(
+          object.options_to_array,
+          selected: object.selected,
+          disabled: object.disabled_options,
+        ),
+        prompt: object.blank_selection,
+        disabled: object.disabled,
+        required: object.required,
+        multiple: object.multiple,
+        onchange: object.onchange,
+        include_blank: object.include_blank,
+      )
+      %>
+    <% end %>
+    <%= pb_rails("icon", props: { icon: "angle-down", fixed_width: true, classname: "pb_select_kit_caret"}) %>
+  </label>
+<% end %>

data/app/pb_kits/playbook/pb_select/_select.jsx

@@ -0,0 +1,110 @@
+/* @flow */
+/*eslint-disable react/no-multi-comp, flowtype/space-before-type-colon */
+
+import React from 'react'
+import classnames from 'classnames'
+
+import {
+  Caption,
+  Icon,
+} from "../"
+
+import {
+  buildAriaProps,
+  buildDataProps,
+  buildCss,
+} from '../utilities/props'
+
+type SelectProps = {
+  className?: String,
+  aria?: object,
+  data?: object,
+  onChange: PropTypes.func,
+  children?: Array<React.ReactChild>,
+  options: Array<Object>,
+  id?: String,
+  label?: String,
+  value?: String,
+  name?: String,
+  dark?: Boolean,
+  includeBlank?: String,
+  blankSelection?: String,
+  required?: Boolean,
+  disabled?: Boolean,
+  multiple?: Boolean,
+}
+
+
+const optionsArray = ({options=[]}: SelectProps) => {
+  return options.map((optionObject, index) => {
+    return (
+      <option
+        value={optionObject.value}
+        selected={optionObject.selected}
+        disabled={optionObject.disabled}
+      >{optionObject.valueText || optionObject.value}</option>
+    );
+  })
+}
+
+const Select = ( props: SelectProps) => {
+
+  const {
+    className,
+    children,
+    label,
+    value,
+    dark=false,
+    name,
+    id,
+    options,
+    includeBlank,
+    blankSelection,
+    required=false,
+    disabled=false,
+    multiple=false,
+    onChange=() => {},
+    aria = {},
+    data = {},
+  } = props
+
+  const css = buildCss({
+    'pb_select': true,
+    'dark': dark === true,
+  })
+  const ariaProps = buildAriaProps(aria)
+  const dataProps = buildDataProps(data)
+  const optionsList = optionsArray({options})
+
+  return (
+    <div {...ariaProps} {...dataProps} className={css}>
+      <If condition={label}>
+        <label className='pb_select_kit_label' htmlFor={name}>
+          <Caption text={label} dark={dark}/>
+        </label>
+      </If>
+      <label className='pb_select_kit_wrapper' htmlFor={name}>
+        <If condition={children}>
+          {children}
+        <Else/>
+          <select
+            name={name}
+            id={name}
+            disabled={disabled}
+            required={required}
+            multiple={multiple}
+            onChange={onChange}>
+            <If condition={blankSelection}>
+              <option value="">{blankSelection}</option>
+            </If>
+            {optionsList}
+          </select>
+        </If>
+        <Icon icon="angle-down" className='pb_select_kit_caret' fixedWidth />
+      </label>
+    </div>
+  )
+}
+
+
+export default Select

data/app/pb_kits/playbook/pb_select/_select.scss

@@ -0,0 +1,50 @@
+@import "../pb_body/body_mixins";
+@import "../pb_textarea/textarea_mixin";
+@import "../tokens/colors";
+
+[class^=pb_select] {
+  margin-bottom: $space_sm;
+  select {
+    @include pb_textarea_light;
+    appearance: none;
+    cursor: pointer;
+    box-shadow: inset 0 -11px 20px rgba($primary, 0.05);
+    padding-right: $space_lg;
+    &:hover, &:active, &:focus {
+      background-color: $focus_input_light;
+    }
+    &:disabled ~ .pb_select_kit_caret {
+      opacity: 0.5;
+    }
+  }
+  .pb_select_kit_label {
+    margin-bottom: $space_xs;
+    display: block;
+  }
+  .pb_select_kit_wrapper {
+    position: relative;
+    display: block;
+  }
+  .pb_select_kit_caret {
+    position: absolute;
+    right: $space_sm;
+    top: 50%;
+    display: block;
+    color: $text_lt_default;
+    font-size: ($font_large + 3);
+    transform: translateY(-50%);
+  }
+  &[class*=_dark] {
+    select {
+      @include pb_textarea_dark;
+      background: $focus_input_dark;
+      box-shadow: inset 0 -11px 20px rgba($white, 0.05);
+      &:hover, &:active, &:focus {
+        background-color: tint($focus_input_dark, 5%);
+      }
+    }
+    .pb_select_kit_caret {
+      color: $white;
+    }
+  }
+}

data/app/pb_kits/playbook/pb_select/docs/_select_blank.html.erb

@@ -0,0 +1,19 @@
+<%= pb_rails("select", props: {
+  label: "Where do you live",
+  name: "location",
+  blank_selection: "Select One...",
+  options: [
+    {
+      value: "USA",
+    },
+    {
+      value: "Canada",
+    },
+    {
+      value: "Brazil",
+    },
+    {
+      value: "Philippines",
+    },
+  ]
+}) %>

data/app/pb_kits/playbook/pb_select/docs/_select_blank.jsx

@@ -0,0 +1,30 @@
+import React from 'react'
+import {Select} from '../../'
+
+function SelectBlank() {
+  return (
+    <div>
+      <Select
+        label='Where do you live'
+        name='location'
+        blankSelection='Select One...'
+        options={[
+          {
+            value: 'USA',
+          },
+          {
+            value: 'Canada',
+          },
+          {
+            value: 'Brazil',
+          },
+          {
+            value: 'Philippines',
+          },
+        ]}
+      />
+    </div>
+  )
+}
+
+export default SelectBlank

data/app/pb_kits/playbook/pb_select/docs/_select_custom_select.html.erb

@@ -0,0 +1,8 @@
+<%= pb_rails("select", props: { label: "Favorite Holiday" }) do %>
+  <select name="holiday" id="holiday">
+    <option value="1">Christmas</option>
+    <option value="2">Thanksgiving</option>
+    <option value="3">Halloween</option>
+    <option value="4">Fourth of July</option>
+  </select>
+<% end %>

data/app/pb_kits/playbook/pb_select/docs/_select_custom_select.jsx

@@ -0,0 +1,19 @@
+import React from 'react'
+import {Select} from '../../'
+
+function SelectCustomSelect() {
+  return (
+    <div>
+      <Select label='Favorite Holiday'>
+        <select name="holiday" id="holiday">
+          <option value="1">Christmas</option>
+          <option value="2">Thanksgiving</option>
+          <option value="3">Halloween</option>
+          <option value="4">Fourth of July</option>
+        </select>
+      </Select>
+    </div>
+  )
+}
+
+export default SelectCustomSelect

data/app/pb_kits/playbook/pb_select/docs/_select_dark.html.erb

@@ -0,0 +1,24 @@
+<%= pb_rails("select", props: {
+  label: "Favorite Food",
+  name: "food",
+  dark: true,
+  options: [
+    {
+      value: "1",
+      value_text: "Burgers",
+    },
+    {
+      value: "2",
+      selected: true,
+      value_text: "Pizza",
+    },
+    {
+      value: "3",
+      value_text: "Tacos",
+    },
+    {
+      value: "4",
+      value_text: "BBQ",
+    },
+  ]
+}) %>

data/app/pb_kits/playbook/pb_select/docs/_select_dark.jsx

@@ -0,0 +1,31 @@
+import React from 'react'
+import {Select} from '../../'
+
+function SelectDark() {
+  return (
+    <div>
+      <Select
+        label='Favorite Food'
+        name='food'
+        dark
+        options={[
+          {
+            value: '1',
+            valueText: 'Burgers',
+          },
+          {
+            value: '2',
+            selected: true,
+            valueText: 'Pizza',
+          },
+          {
+            value: '3',
+            valueText: 'Tacos',
+          },
+        ]}
+      />
+    </div>
+  )
+}
+
+export default SelectDark

data/app/pb_kits/playbook/pb_select/docs/_select_default.html.erb

@@ -0,0 +1,23 @@
+<%= pb_rails("select", props: {
+  label: "Favorite Food",
+  name: "food",
+  options: [
+    {
+      value: "1",
+      value_text: "Burgers",
+    },
+    {
+      value: "2",
+      selected: true,
+      value_text: "Pizza",
+    },
+    {
+      value: "3",
+      value_text: "Tacos",
+    },
+    {
+      value: "4",
+      value_text: "BBQ",
+    },
+  ]
+}) %>

data/app/pb_kits/playbook/pb_select/docs/_select_default.jsx

@@ -0,0 +1,30 @@
+import React from 'react'
+import {Select} from '../../'
+
+function SelectDefault() {
+  return (
+    <div>
+      <Select
+        label='Favorite Food'
+        name='food'
+        options={[
+          {
+            value: '1',
+            valueText: 'Burgers',
+          },
+          {
+            value: '2',
+            selected: true,
+            valueText: 'Pizza',
+          },
+          {
+            value: '3',
+            valueText: 'Tacos',
+          },
+        ]}
+      />
+    </div>
+  )
+}
+
+export default SelectDefault

data/app/pb_kits/playbook/pb_select/docs/_select_disabled.html.erb

@@ -0,0 +1,19 @@
+<%= pb_rails("select", props: {
+  label: "Favorite Dessert",
+  disabled: true,
+  name: "dessert",
+  options: [
+    {
+      value: "Apple Pie",
+    },
+    {
+      value: "Cookies",
+    },
+    {
+      value: "Ice Cream",
+    },
+    {
+      value: "Brownies",
+    },
+  ]
+}) %>

data/app/pb_kits/playbook/pb_select/docs/_select_disabled.jsx

@@ -0,0 +1,30 @@
+import React from 'react'
+import {Select} from '../../'
+
+function SelectDisabled() {
+  return (
+    <div>
+      <Select
+        label='Favorite Dessert'
+        disabled
+        name='dessert'
+        options={[
+          {
+            value: 'Apple Pie',
+          },
+          {
+            value: 'Cookies',
+          },
+          {
+            value: 'Ice Cream',
+          },
+          {
+            value: 'Brownies',
+          },
+        ]}
+      />
+    </div>
+  )
+}
+
+export default SelectDisabled