RubyGems - playbook_ui - Versions diffs - 2.9.9 → 3.0.0 - Mend

playbook_ui 2.9.9 → 3.0.0

Files changed (155) hide show

data/app/pb_kits/playbook/pb_selectable_card/docs/_selectable_card_block.html.erb ADDED Viewed

@@ -0,0 +1,25 @@
+<div class="pb--doc-demo-row">
+  <%= pb_rails("selectable_card", props: {
+    input_id: "block",
+    name: "block",
+    value: "block",
+    checked: true
+  }) do %>
+    <%= pb_rails("title", props: { text: "Block", size: 4 }) %>
+    <%= pb_rails("body", props: { tag: "span"}) do %>
+      This uses block
+    <% end %>
+  <% end %>
+  <br><br>
+  <%= pb_rails("selectable_card", props: {
+    input_id: "tag",
+    name: "tag",
+    value: "tag",
+    text: "This passes in text",
+    checked: false
+  }) %>
+</div>

data/app/pb_kits/playbook/pb_selectable_card/docs/_selectable_card_block.jsx ADDED Viewed

@@ -0,0 +1,48 @@
+import React from "react"
+import {
+  Body,
+  SelectableCard,
+  Title
+} from "../../"
+class SelectableCardBlock extends React.Component {
+  state = {
+    block: true,
+    tag: false
+  }
+  handleSelect = event => {
+    this.setState({
+      [event.target.id]: event.target.checked
+    })
+  }
+  render() {
+    return (
+      <div class="pb--doc-demo-row">
+        <SelectableCard
+            inputId="block"
+            name="block"
+            value="block"
+            checked={this.state.block}
+            onChange={this.handleSelect}>
+          <Title text="Block" size={4} />
+          <Body tag="span">This uses block</Body>
+        </SelectableCard>
+        <SelectableCard
+            inputId="tag"
+            name="tag"
+            value="tag"
+            checked={this.state.tag}
+            onChange={this.handleSelect}
+            text="This passes text through the tag">
+        </SelectableCard>
+      </div>
+    )
+  }
+}
+export default SelectableCardBlock;

data/app/pb_kits/playbook/pb_selectable_card/docs/_selectable_card_dark.html.erb ADDED Viewed

@@ -0,0 +1,45 @@
+<div class="pb--doc-demo-row">
+  <%= pb_rails("selectable_card", props: {
+    input_id: "selected_with_icon_dark",
+    name: "selected_with_icon_dark",
+    value: "selected_with_icon_dark",
+    checked: true,
+    icon: true,
+    dark: true
+  }) do %>
+    Selected, with icon
+  <% end %>
+  <%= pb_rails("selectable_card", props: {
+    input_id: "selected_without_icon_dark",
+    name: "selected_without_icon_dark",
+    value: "selected_without_icon_dark",
+    checked: true,
+    icon: false,
+    dark: true
+  }) do %>
+    Selected, without icon
+  <% end %>
+  <%= pb_rails("selectable_card", props: {
+    input_id: "unselected_dark",
+    name: "unselected_dark",
+    value: "unselected_dark",
+    checked: false,
+    dark: true
+  }) do %>
+    Unselected
+  <% end %>
+  <%= pb_rails("selectable_card", props: {
+    input_id: "unselected_dark",
+    name: "unselected_dark",
+    value: "unselected_dark",
+    disabled: true,
+    dark: true
+  }) do %>
+    Disabled
+  <% end %>
+</div>

data/app/pb_kits/playbook/pb_selectable_card/docs/_selectable_card_dark.jsx ADDED Viewed

@@ -0,0 +1,68 @@
+import React from "react"
+import SelectableCard from "../_selectable_card.jsx"
+class SelectableCardDark extends React.Component {
+  state = {
+    selected_with_icon_dark: true,
+    selected_without_icon_dark: true,
+    unselected_dark: false
+  }
+  handleSelect = event => {
+    this.setState({
+      [event.target.id]: event.target.checked
+    })
+  }
+  render() {
+    return (
+      <div class="pb--doc-demo-row">
+        <SelectableCard
+            dark
+            inputId="selected_with_icon_dark"
+            name="selected_with_icon_dark"
+            value="selected_with_icon_dark"
+            icon={true}
+            checked={this.state.selected_with_icon_dark}
+            onChange={this.handleSelect}>
+          {'Selected, with icon'}
+        </SelectableCard>
+        <SelectableCard
+            dark
+            inputId="selected_without_icon_dark"
+            name="selected_without_icon_dark"
+            value="selected_without_icon_dark"
+            icon={false}
+            checked={this.state.selected_without_icon_dark}
+            onChange={this.handleSelect}>
+          {'Selected, without icon'}
+        </SelectableCard>
+        <SelectableCard
+            dark
+            inputId="unselected_dark"
+            name="unselected_dark"
+            value="unselected_dark"
+            checked={this.state.unselected_dark}
+            onChange={this.handleSelect}>
+          {'Unselected'}
+        </SelectableCard>
+        <SelectableCard
+            dark
+            inputId="unselected_dark"
+            name="unselected_dark"
+            value="unselected_dark"
+            disabled={true}
+            onChange={this.handleSelect}>
+          {'Unselected'}
+        </SelectableCard>
+      </div>
+    )
+  }
+}
+export default SelectableCardDark;

data/app/pb_kits/playbook/pb_selectable_card/docs/_selectable_card_default.html.erb ADDED Viewed

@@ -0,0 +1,39 @@
+<div class="pb--doc-demo-row">
+  <%= pb_rails("selectable_card", props: {
+    input_id: "selected_with_icon",
+    name: "selected_with_icon",
+    value: "selected_with_icon",
+    checked: true,
+    icon: true
+  }) do %>
+    Selected, with icon
+  <% end %>
+  <%= pb_rails("selectable_card", props: {
+    input_id: "selected_without_icon",
+    name: "selected_without_icon",
+    value: "selected_without_icon",
+    checked: true,
+  }) do %>
+    Selected, without icon
+  <% end %>
+  <%= pb_rails("selectable_card", props: {
+    input_id: "unselected",
+    name: "unselected",
+    value: "unselected",
+  }) do %>
+    Unselected
+  <% end %>
+  <%= pb_rails("selectable_card", props: {
+    input_id: "disabled",
+    name: "disabled",
+    value: "disabled",
+    disabled: true
+  }) do %>
+    Disabled
+  <% end %>
+</div>

data/app/pb_kits/playbook/pb_selectable_card/docs/_selectable_card_default.jsx ADDED Viewed

@@ -0,0 +1,67 @@
+import React from "react"
+import SelectableCard from "../_selectable_card.jsx"
+import Icon from "../../pb_icon/_icon.jsx"
+class SelectableCardDefault extends React.Component {
+  state = {
+    selected_with_icon: true,
+    selected_without_icon: true,
+    unselected: false
+  }
+  handleSelect = event => {
+    this.setState({
+      [event.target.id]: event.target.checked
+    })
+  }
+  render() {
+    return (
+      <div class="pb--doc-demo-row">
+        <SelectableCard
+            inputId="selected_with_icon"
+            name="selected_with_icon"
+            value="selected_with_icon"
+            icon={true}
+            checked={this.state.selected_with_icon}
+            onChange={this.handleSelect}>
+          {`Selected, with icon`}
+        </SelectableCard>
+        <SelectableCard
+            inputId="selected_without_icon"
+            name="selected_without_icon"
+            value="selected_without_icon"
+            icon={false}
+            checked={this.state.selected_without_icon}
+            onChange={this.handleSelect}>
+          {`Selected, without icon`}
+        </SelectableCard>
+        <SelectableCard
+            inputId="unselected"
+            name="unselected"
+            value="unselected"
+            checked={this.state.unselected}
+            onChange={this.handleSelect}>
+          {`Unselected`}
+        </SelectableCard>
+        <SelectableCard
+            inputId="disabled"
+            name="disabled"
+            value="disabled"
+            disabled={true}
+            checked={this.state.disabled}
+            onChange={this.handleSelect}>
+          {`Disabled`}
+        </SelectableCard>
+      </div>
+    )
+  }
+}
+export default SelectableCardDefault;

data/app/pb_kits/playbook/pb_selectable_card/docs/_selectable_card_single_select.html.erb ADDED Viewed

@@ -0,0 +1,30 @@
+<div class="pb--doc-demo-row">
+  <%= pb_rails("selectable_card", props: {
+    input_id: "male",
+    name: "gender",
+    value: "male",
+    multi: false
+  }) do %>
+    Male
+  <% end %>
+  <%= pb_rails("selectable_card", props: {
+    input_id: "female",
+    name: "gender",
+    value: "female",
+    multi: false
+  }) do %>
+    Female
+  <% end %>
+  <%= pb_rails("selectable_card", props: {
+    input_id: "other",
+    name: "gender",
+    value: "other",
+    multi: false
+  }) do %>
+    Other
+  <% end %>
+</div>

data/app/pb_kits/playbook/pb_selectable_card/docs/_selectable_card_single_select.jsx ADDED Viewed

@@ -0,0 +1,54 @@
+import React from "react";
+import SelectableCard from "../_selectable_card.jsx";
+class SelectableCardSingleSelect extends React.Component {
+  state = {
+    selected: null
+  }
+  handleSelect = event => {
+    this.setState({
+      selected: event.target.value
+    })
+  }
+  render() {
+    return (
+      <div class="pb--doc-demo-row">
+        <SelectableCard
+            inputId="male1"
+            name="gender"
+            value="male"
+            multi={false}
+            checked={this.state.selected === 'male'}
+            onChange={this.handleSelect.bind(this)}>
+          {`Male`}
+        </SelectableCard>
+        <SelectableCard
+            inputId="female1"
+            name="gender"
+            value="female"
+            multi={false}
+            checked={this.state.selected === 'female'}
+            onChange={this.handleSelect.bind(this)}>
+          {`Female`}
+        </SelectableCard>
+        <SelectableCard
+            inputId="other1"
+            name="gender"
+            value="other"
+            multi={false}
+            checked={this.state.selected === 'other'}
+            onChange={this.handleSelect.bind(this)}>
+          {`Other`}
+        </SelectableCard>
+      </div>
+    );
+  }
+}
+export default SelectableCardSingleSelect;

data/app/pb_kits/playbook/pb_selectable_card/docs/example.yml ADDED Viewed

@@ -0,0 +1,13 @@
+examples:
+  rails:
+  - selectable_card_default: Default
+  - selectable_card_single_select: Single Select
+  - selectable_card_block: Block
+  - selectable_card_dark: Dark
+  react:
+  - selectable_card_default: Default
+  - selectable_card_single_select: Single Select
+  - selectable_card_block: Block
+  - selectable_card_dark: Dark

data/app/pb_kits/playbook/pb_selectable_card/docs/index.js ADDED Viewed

@@ -0,0 +1,4 @@
+export {default as SelectableCardDefault} from './_selectable_card_default.jsx';
+export {default as SelectableCardSingleSelect} from './_selectable_card_single_select.jsx';
+export {default as SelectableCardDark} from './_selectable_card_dark.jsx';
+export {default as SelectableCardBlock} from './_selectable_card_block.jsx';

data/app/pb_kits/playbook/pb_selectable_card/selectable_card.rb ADDED Viewed

@@ -0,0 +1,51 @@
+# frozen_string_literal: true
+module Playbook
+  module PbSelectableCard
+    class SelectableCard
+      include Playbook::Props
+      partial "pb_selectable_card/selectable_card"
+      prop :checked, type: Playbook::Props::Boolean,
+                  default: false
+      prop :dark, type: Playbook::Props::Boolean,
+                  default: false
+      prop :disabled, type: Playbook::Props::Boolean,
+                  default: false
+      prop :icon, type: Playbook::Props::Boolean,
+                  default: false
+      prop :multi, type: Playbook::Props::Boolean,
+                  default: true
+      prop :input_id, type: Playbook::Props::String
+      prop :name
+      prop :text
+      prop :value
+      def classname
+        generate_classname("pb_selectable_card_kit", checked_class, dark_class, enable_disabled_class)
+      end
+      def input_id_present
+        input_id.present? ? input_id : name
+      end
+    private
+      def checked_class
+        checked ? "checked" : nil
+      end
+      def dark_class
+        dark ? "dark" : nil
+      end
+      def enable_disabled_class
+        disabled ? "disabled" : "enabled"
+      end
+    end
+  end
+end