playbook_ui 2.9.9 → 3.0.0

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

@@ -0,0 +1,33 @@
+<%= pb_rails("select", props: {
+  label: "Favorite Coffee",
+  name: "coffee",
+  options: [
+    {
+      value: "1",
+      disabled: true,
+      value_text: "Espresso",
+    },
+    {
+      value: "2",
+      selected: true,
+      value_text: "Americano",
+    },
+    {
+      value: "3",
+      disabled: true,
+      value_text: "Cappuccino",
+    },
+    {
+      value: "4",
+      value_text: "Mocha",
+    },
+    {
+      value: "5",
+      value_text: "Flat White",
+    },
+    {
+      value: "6",
+      value_text: "Latte",
+    },
+  ]
+}) %>

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

@@ -0,0 +1,44 @@
+import React from 'react'
+import {Select} from '../../'
+
+function SelectDisabledOptions() {
+  return (
+    <div>
+      <Select
+        label='Favorite Coffee'
+        name='coffee'
+        options={[
+          {
+            value: '1',
+            disabled: true,
+            valueText: 'Espresso',
+          },
+          {
+            value: '2',
+            selected: true,
+            valueText: 'Americano',
+          },
+          {
+            value: '3',
+            disabled: true,
+            valueText: 'Cappuccino',
+          },
+          {
+            value: '4',
+            valueText: 'Mocha',
+          },
+          {
+            value: '5',
+            valueText: 'Flat White',
+          },
+          {
+            value: '6',
+            valueText: 'Latte',
+          },
+        ]}
+      />
+    </div>
+  )
+}
+
+export default SelectDisabledOptions

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

@@ -0,0 +1,17 @@
+<%= pb_rails("select", props: {
+  label: "Which shoe do you tie first?",
+  required: true,
+  name: "shoe",
+  blank_selection: "Select One...",
+  options: [
+    {
+      value: "Left",
+    },
+    {
+      value: "Right",
+    },
+    {
+      value: "I go without laces",
+    },
+  ]
+}) %>

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

@@ -0,0 +1,28 @@
+import React from 'react'
+import {Select} from '../../'
+
+function SelectRequired() {
+  return (
+    <div>
+      <Select
+        label='Which shoe do you tie first?'
+        required
+        name='shoe'
+        blankSelection='Select One...'
+        options={[
+          {
+            value: 'Left',
+          },
+          {
+            value: 'Right',
+          },
+          {
+            value: 'I go without laces',
+          },
+        ]}
+      />
+    </div>
+  )
+}
+
+export default SelectRequired

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

@@ -0,0 +1,18 @@
+<%= pb_rails("select", props: {
+  label: "Favorite Sport",
+  name: "sports",
+  options: [
+    {
+      value: "Football",
+    },
+    {
+      value: "Baseball",
+    },
+    {
+      value: "Basketball",
+    },
+    {
+      value: "Hockey",
+    },
+  ]
+}) %>

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

@@ -0,0 +1,29 @@
+import React from 'react'
+import {Select} from '../../'
+
+function SelectValueTextSame() {
+  return (
+    <div>
+      <Select
+        label='Favorite Sport'
+        name='sports'
+        options={[
+          {
+            value: 'Football',
+          },
+          {
+            value: 'Baseball',
+          },
+          {
+            value: 'Basketball',
+          },
+          {
+            value: 'Hockey',
+          },
+        ]}
+      />
+    </div>
+  )
+}
+
+export default SelectValueTextSame

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

@@ -0,0 +1,22 @@
+examples:
+
+  rails:
+  - select_default: Default
+  - select_blank: Blank Selection Text
+  - select_disabled_options: Disabled Options
+  - select_disabled: Disabled Select Field
+  - select_required: Required Select Field
+  - select_value_text_same: Equal option value and value text
+  - select_custom_select: Custom Select
+  - select_dark: Dark Select
+
+
+  react:
+  - select_default: Default
+  - select_blank: Blank Selection Text
+  - select_disabled_options: Disabled Options
+  - select_disabled: Disabled Select Field
+  - select_required: Required Select Field
+  - select_value_text_same: Equal option value and value text
+  - select_custom_select: Custom Select
+  - select_dark: Dark Select

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

@@ -0,0 +1,8 @@
+export {default as SelectDefault} from './_select_default.jsx';
+export {default as SelectDark} from './_select_dark.jsx';
+export {default as SelectBlank} from './_select_blank.jsx';
+export {default as SelectDisabledOptions} from './_select_disabled_options.jsx';
+export {default as SelectDisabled} from './_select_disabled.jsx';
+export {default as SelectRequired} from './_select_required.jsx';
+export {default as SelectCustomSelect} from './_select_custom_select.jsx';
+export {default as SelectValueTextSame} from './_select_value_text_same.jsx';

data/app/pb_kits/playbook/pb_select/docs/nitro_theme.gemspec

@@ -0,0 +1,41 @@
+$LOAD_PATH.push File.expand_path("lib", __dir__)
+
+Gem::Specification.new do |s|
+  s.name        = "nitro_theme"
+  s.version     = "0.0.1"
+  s.authors     = ["Nitro Developers"]
+  s.email       = ["dev@powerhrg.com"]
+  s.homepage    = "http://nitro.powerhrg.com"
+  s.summary     = "Nitro's visual theme"
+  s.description = "Nitro's visual theme, including page layout, styling and navigation"
+
+  s.files = Dir["{app,config,db,lib}/**/*"] + ["Rakefile", "README.md"]
+
+  s.add_dependency "bootstrap-sass", "3.3.5.1"
+  s.add_dependency "coffee-rails", "4.2.2"
+  s.add_dependency "jquery-rails", "4.3.1"
+  s.add_dependency "lodash-rails", "3.10.1"
+  s.add_dependency "naughty"
+  s.add_dependency "nitro_auth"
+  s.add_dependency "nitro_react"
+  s.add_dependency "nitro_sg", "3.0.2"
+  s.add_dependency "playbook_ui", "2.9.1"
+  s.add_dependency "rails", "5.1.6.2"
+  # should sassc version change, adjust umbrella Gemfile & Dockerfile accordingly
+  s.add_dependency "sassc", "1.11.4"
+  s.add_dependency "sassc-rails", "1.3.0"
+  s.add_dependency "simple_form", "4.0.1"
+  s.add_dependency "sprockets-rails", "2.3.3"
+  s.add_dependency "turbolinks", "~> 5"
+  s.add_dependency "will_paginate", "3.1.6"
+  s.add_dependency "will_paginate-bootstrap", "1.0.1"
+
+  s.add_development_dependency "nitro_linting"
+  s.add_development_dependency "pry-byebug", "3.5.0"
+  s.add_development_dependency "rainbow", "2.2.2"
+  s.add_development_dependency "rspec-rails"
+  s.add_development_dependency "simplecov", "0.15.1"
+  s.add_development_dependency "test-unit", "3.1.5"
+  s.add_development_dependency "timecop"
+  s.add_development_dependency "yard", "0.9.20"
+end

data/app/pb_kits/playbook/pb_select/select.rb

@@ -0,0 +1,60 @@
+# frozen_string_literal: true
+
+require "action_view"
+
+module Playbook
+  module PbSelect
+    class Select
+      include ActionView::Helpers::FormTagHelper
+      include ActionView::Context
+      include Playbook::Props
+
+      partial "pb_select/select"
+
+      prop :label
+      prop :required, type: Playbook::Props::Boolean, default: false
+      prop :disabled, type: Playbook::Props::Boolean, default: false
+      prop :multiple, type: Playbook::Props::Boolean, default: false
+      prop :name
+      prop :onchange
+      prop :include_blank
+      prop :blank_selection
+      prop :options, type: Playbook::Props::HashArray, required: false, default: []
+      prop :dark, type: Playbook::Props::Boolean, default: false
+
+      def classname
+        generate_classname("pb_select", dark_class)
+      end
+
+      def options_to_array
+        options.map { |option| [option[:value_text] || option[:value], option[:value]] }
+      end
+
+
+      def selected
+        selections = options.map { |option| option[:value] if option[:selected] == true }.compact
+        if selections.empty?
+          nil
+        else
+          selections
+        end
+      end
+
+      def disabled_options
+        disabled_options = options.map { |option| option[:value] if option[:disabled] == true }.compact
+        if disabled_options.empty?
+          nil
+        else
+          disabled_options
+        end
+      end
+
+      private
+
+        def dark_class
+          dark ? "dark" : nil
+        end
+
+    end
+  end
+end

data/app/pb_kits/playbook/pb_selectable_card/_selectable_card.html.erb

@@ -0,0 +1,25 @@
+<%= content_tag(:div,
+  id: object.id,
+  data: object.data,
+  class: object.classname) do %>
+
+  <% if object.multi %>
+    <%= check_box_tag object.name, object.value, object.checked, id: object.input_id_present, disabled: object.disabled %>
+  <% else %>
+    <%= radio_button_tag object.name, object.value, object.checked, id: object.input_id_present, disabled: object.disabled %>
+  <% end %>
+
+  <label for="<%= object.input_id_present %>">
+    <% if object.children.nil? %>
+      <%= pb_rails("body", props: { text: object.text }) %>
+    <% else %>
+      <%= capture(&object.children) %>
+    <% end %>
+    <% if object.icon %>
+      <div class="pb_selectable_card_circle">
+        <%= pb_rails("icon", props: { icon: "check", fixed_width: true}) %>
+      </div>
+    <% end %>
+  </label>
+
+<% end %>

data/app/pb_kits/playbook/pb_selectable_card/_selectable_card.jsx

@@ -0,0 +1,97 @@
+import React from 'react'
+import classnames from 'classnames'
+import { Icon } from '../'
+
+import type {
+  InputCallback
+} from "../types"
+
+import {
+  buildAriaProps,
+  buildDataProps,
+  buildCss,
+  noop,
+} from '../utilities/props'
+
+type Props = {
+  aria: Object,
+  checked: Boolean,
+  children?: Array<React.ReactChild>,
+  className?: String,
+  dark?: Boolean,
+  data: Object,
+  disabled?: Boolean,
+  icon?: Boolean,
+  id?: String,
+  inputId?: String,
+  multi?: Boolean,
+  name?: String,
+  onChange: InputCallback,
+  text?: String,
+  value?: String
+};
+
+const SelectableCard = ({
+  aria = {},
+  checked = false,
+  children,
+  className,
+  dark = false,
+  data = {},
+  disabled = false,
+  icon = false,
+  id = null,
+  inputId = null,
+  multi = true,
+  name,
+  onChange = noop,
+  text,
+  value,
+  ...props
+}: Props) => {
+  const ariaProps = buildAriaProps(aria)
+  const dataProps = buildDataProps(data)
+  
+  const css = buildCss({
+    'pb_selectable_card_kit': true,
+    'checked': checked,
+    'dark': dark,
+    'disabled': disabled,
+    'enabled': !disabled,
+  })
+
+  const displayIcon = () => {
+    if(icon === true) {
+      return (
+        <div className="pb_selectable_card_circle">
+          <Icon icon="check" fixedWidth/>
+        </div>
+      )
+    }
+  }
+
+  const inputType = multi === false ? "radio" : "checkbox"
+
+  const inputIdPresent = inputId !== null ? inputId : name
+
+
+  return (
+    <div {...ariaProps} {...dataProps} className={classnames(css, className)}>
+      <input
+          {...props}
+          name={name}
+          value={value}
+          id={inputIdPresent}
+          type={inputType}
+          checked={checked}
+          disabled={disabled}
+          onChange={onChange}
+      />
+      <label htmlFor={inputIdPresent}>
+        { text || children }
+        {displayIcon()}
+      </label>
+    </div>
+  );
+};
+export default SelectableCard;

data/app/pb_kits/playbook/pb_selectable_card/_selectable_card.scss

@@ -0,0 +1,87 @@
+@import "../tokens/animation-curves";
+@import "../tokens/colors";
+@import "../tokens/opacity";
+@import "../tokens/shadows";
+@import "../tokens/spacing";
+@import "../tokens/transition";
+@import "../tokens/typography";
+@import "../pb_card/card";
+
+$pb_selectable_card_indicator_size: 22px;
+$pb_selectable_card_border: 2px;
+
+[class^=pb_selectable_card_kit] {
+  display: block;
+
+  label {
+    @include pb_card;
+    padding: $space_sm + 1;
+    cursor: pointer;
+
+    &:hover {
+      box-shadow: $shadow-default;
+      border-color: $slate;
+    }
+
+    .pb_selectable_card_circle {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      height: $pb_selectable_card_indicator_size;
+      width: $pb_selectable_card_indicator_size;
+      border-radius: ($pb_selectable_card_indicator_size/2) + ($pb_selectable_card_border/2);
+      border-width: $pb_selectable_card_border;
+      border-style: solid;
+      border-color: $white;
+      background: $primary_action;
+      color: $white;
+      font-size: $font_smaller;
+      text-align: center;
+      position: absolute;
+      top: -($pb_selectable_card_indicator_size/2);
+      right: -($pb_selectable_card_indicator_size/2);
+      opacity: 0;
+      transition-property: opacity;
+      transition-duration: $transition_short;
+      transition-timing-function: $easeIn;
+    }
+  }
+
+  input[type="checkbox"],
+  input[type="radio"] {
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    display: none;
+
+    &:checked ~ label {
+      position: relative;
+      @include pb_card_selected;
+      padding: $space_sm;
+
+      .pb_selectable_card_circle {
+        opacity: $opacity_10;
+      }
+    }
+  }
+
+  &[class*=_dark] {
+    label {
+      @include pb_card_dark;
+      background: transparent;
+
+      .pb_selectable_card_circle {
+        border-color: $bg_dark;
+        background: $primary-action;
+      }
+    }
+
+    input[type="checkbox"],
+    input[type="radio"] {
+      &:checked ~ label {
+        @include pb_card_selected_dark;
+        background: transparent;
+      }
+    }
+  }
+}