RubyGems - playbook_ui - Versions diffs - 4.15.1.alpha1 → 4.18.1 - Mend

playbook_ui 4.15.1.alpha1 → 4.18.1

Files changed (402) hide show

data/app/pb_kits/playbook/pb_selectable_card_icon/_selectable_card_icon.jsx ADDED

@@ -0,0 +1,97 @@
+/* @flow */
+import React from 'react'
+import classnames from 'classnames'
+import { Body, SelectableCard, SelectableIcon } from '../'
+import {
+  buildAriaProps,
+  buildCss,
+  buildDataProps,
+} from '../utilities/props'
+type SelectableCardIconProps = {
+  aria?: Object,
+  checked?: Boolean,
+  checkmark: Boolean,
+  className?: String,
+  dark?: Boolean,
+  data?: Object,
+  disabled?: Boolean,
+  icon?: String,
+  inputId?: String,
+  multi?: Boolean,
+  name?: String,
+  titleText?: String,
+  bodyText?: String,
+  value?: String,
+  onChange?: (e) => void,
+}
+const SelectableCardIcon = ({
+  aria = {},
+  checkmark = false,
+  checked = false,
+  className,
+  dark = false,
+  data = {},
+  disabled = false,
+  icon,
+  inputId,
+  multi = true,
+  name,
+  titleText,
+  bodyText,
+  value,
+  onChange,
+}: SelectableCardIconProps) => {
+  const ariaProps = buildAriaProps(aria)
+  const dataProps = buildDataProps(data)
+  const css = buildCss({
+    'pb_selectable_card_icon_kit': true,
+    'checked': checked,
+    'dark': dark,
+    'disabled': disabled,
+    'enabled': !disabled,
+  })
+  return (
+    <div
+        {...ariaProps}
+        {...dataProps}
+        className={classnames(css, className)}
+    >
+      <SelectableCard
+          checked={checked}
+          dark={dark}
+          disabled={disabled}
+          icon={checkmark}
+          inputId={inputId}
+          multi={multi}
+          name={name}
+          onChange={onChange}
+          value={value}
+      >
+        {
+          <>
+            <SelectableIcon
+                dark={dark}
+                icon={icon}
+                inputs="disabled"
+                size="2x"
+                text={titleText}
+            />
+            <Body
+                color="light"
+                dark={dark}
+                text={bodyText}
+            />
+          </>
+        }
+      </SelectableCard>
+    </div>
+  )
+}
+export default SelectableCardIcon

data/app/pb_kits/playbook/pb_selectable_card_icon/_selectable_card_icon.scss ADDED

@@ -0,0 +1,74 @@
+[class^=pb_selectable_card_icon_kit] {
+	text-align: center;
+	user-select: none;
+	input[type="checkbox"],
+	input[type="radio"] {
+    transition-duration: $transition_short;
+		&:checked ~ label {
+      transition-timing-function: $easeIn;
+			color: $primary;
+				h4 {
+					color: $primary;
+				}
+			}
+    &:not(:checked) ~ label {
+      transition-timing-function: $easeOut;
+        color: $slate;
+      }
+    }
+    &[class*=_disabled] {
+      opacity: $opacity_6;
+      cursor: not-allowed;
+      * {
+          cursor: not-allowed;
+      }
+    }
+  &[class*=_dark] {
+    input[type="checkbox"],
+    input[type="radio"] {
+      transition-duration: $transition_short;
+      &:checked ~ label {
+        transition-timing-function: $easeIn;
+        color: $active_dark;
+        h4 {
+          color: $active_dark !important;
+        }
+      }
+      &:not(:checked) ~ label {
+        transition-timing-function: $easeOut;
+        color: $text_dk_lighter;
+        h4 {
+          color: $text_dk_default !important;
+        }
+      }
+    }
+  }
+  [class^=pb_selectable_icon_kit] {
+    margin-bottom: 0px;
+  }
+  [class^=pb_body_kit_light] {
+    margin-top: $space_xs;
+  }
+  [class^=pb_selectable_card_kit] {
+    margin-bottom: 0px !important;
+  }
+}

data/app/pb_kits/playbook/pb_selectable_card_icon/docs/_selectable_card_icon_checkmark.html.erb ADDED

@@ -0,0 +1,29 @@
+<div class="pb--doc-demo-row">
+  <%= pb_rails("selectable_card_icon", props: {
+    icon: "hat-cowboy",
+    title_text: "Cowboy",
+    body_text: "Howdy partner.",
+    input_id: 4,
+    checked: true,
+    checkmark: true
+  }) %>
+  <%= pb_rails("selectable_card_icon", props: {
+    icon: "hat-wizard",
+    title_text: "Wizard",
+    body_text: "Poof, you're a sandwich.",
+    input_id: 5,
+    checkmark: true
+  }) %>
+  <%= pb_rails("selectable_card_icon", props: {
+    icon: "hat-chef",
+    title_text: "Chef",
+    body_text: "Where is the lamb sauce?",
+    input_id: 6,
+    disabled: true,
+    checkmark: true
+  }) %>
+</div>

data/app/pb_kits/playbook/pb_selectable_card_icon/docs/_selectable_card_icon_checkmark.jsx ADDED

@@ -0,0 +1,41 @@
+import React, { useState } from 'react'
+import { SelectableCardIcon } from '../../'
+const SelectableCardIconCheckmark = () => {
+  const [selected, setSelected] = useState(true)
+  const [unselected, setUnselected] = useState(false)
+  return (
+    <div className="pb--doc-demo-row">
+      <SelectableCardIcon
+          bodyText="Howdy Partner."
+          checked={selected}
+          checkmark
+          icon="hat-cowboy"
+          inputId={4}
+          onChange={() => setSelected(!selected)}
+          titleText="Cowboy"
+      />
+      <SelectableCardIcon
+          bodyText="Poof, you're a sandwich."
+          checked={unselected}
+          checkmark
+          icon="hat-wizard"
+          inputId={5}
+          onChange={() => setUnselected(!unselected)}
+          titleText="Wizard"
+      />
+      <SelectableCardIcon
+          bodyText="Where is the lamb sauce?"
+          checkmark
+          disabled
+          icon="hat-chef"
+          inputId={6}
+          titleText="Chef"
+      />
+    </div>
+  )
+}
+export default SelectableCardIconCheckmark

data/app/pb_kits/playbook/pb_selectable_card_icon/docs/_selectable_card_icon_dark.html.erb ADDED

@@ -0,0 +1,30 @@
+<div class="pb--doc-demo-row">
+  <%= pb_rails("selectable_card_icon", props: {
+    icon: "volume",
+    title_text: "Sound",
+    body_text: "Silent Mode",
+    input_id: 10,
+    checked: true,
+    card_icon: true,
+    dark: true
+  }) %>
+  <%= pb_rails("selectable_card_icon", props: {
+    icon: "location",
+    title_text: "Location",
+    body_text: "Allow ",
+    input_id: 12,
+    dark: true
+  }) %>
+  <%= pb_rails("selectable_card_icon", props: {
+    icon: "wifi",
+    title_text: "WiFi",
+    body_text: "Disabled",
+    input_id: 13,
+    disabled: true,
+    dark: true
+  }) %>
+</div>

data/app/pb_kits/playbook/pb_selectable_card_icon/docs/_selectable_card_icon_dark.jsx ADDED

@@ -0,0 +1,40 @@
+import React, { useState } from 'react'
+import { SelectableCardIcon } from '../../'
+const SelectableCardIconDark = () => {
+  const [selected, setSelected] = useState(true)
+  const [unselected, setUnselected] = useState(false)
+  return (
+    <div className="pb--doc-demo-row">
+      <SelectableCardIcon
+          bodyText="Silent Mode"
+          checked={selected}
+          dark
+          icon="volume"
+          inputId={10}
+          onChange={() => setSelected(!selected)}
+          titleText="Sound"
+      />
+      <SelectableCardIcon
+          bodyText="Allow location data"
+          checked={unselected}
+          dark
+          icon="location"
+          inputId={11}
+          onChange={() => setUnselected(!unselected)}
+          titleText="Location"
+      />
+      <SelectableCardIcon
+          bodyText="Disabled"
+          dark
+          disabled
+          icon="wifi"
+          inputId={12}
+          titleText="WiFi"
+      />
+    </div>
+  )
+}
+export default SelectableCardIconDark

data/app/pb_kits/playbook/pb_selectable_card_icon/docs/_selectable_card_icon_default.html.erb ADDED

@@ -0,0 +1,26 @@
+<div class="pb--doc-demo-row">
+  <%= pb_rails("selectable_card_icon", props: {
+    icon: "chart-line",
+    title_text: "Quarterly Report",
+    body_text: "Export",
+    input_id: 1,
+    checked: true,
+  }) %>
+  <%= pb_rails("selectable_card_icon", props: {
+    icon: "chart-pie",
+    title_text: "Market Share",
+    body_text: "Export",
+    input_id: 2,
+  }) %>
+  <%= pb_rails("selectable_card_icon", props: {
+    icon: "analytics",
+    title_text: "Comprehensive",
+    body_text: "Export",
+    input_id: 3,
+    disabled: true
+  }) %>
+</div>

data/app/pb_kits/playbook/pb_selectable_card_icon/docs/_selectable_card_icon_default.jsx ADDED

@@ -0,0 +1,37 @@
+import React, { useState } from 'react'
+import { SelectableCardIcon } from '../../'
+const SelectableCardIconDefault = () => {
+  const [selected, setSelected] = useState(true)
+  const [unselected, setUnselected] = useState(false)
+  return (
+    <div className="pb--doc-demo-row">
+      <SelectableCardIcon
+          bodyText="Export"
+          checked={selected}
+          icon="chart-line"
+          inputId={1}
+          onChange={() => setSelected(!selected)}
+          titleText="Quarterly Report"
+      />
+      <SelectableCardIcon
+          bodyText="Export"
+          checked={unselected}
+          icon="chart-pie"
+          inputId={2}
+          onChange={() => setUnselected(!unselected)}
+          titleText="Market Share"
+      />
+      <SelectableCardIcon
+          bodyText="Export"
+          disabled
+          icon="analytics"
+          inputId={3}
+          titleText="Comprehensive"
+      />
+    </div>
+  )
+}
+export default SelectableCardIconDefault

data/app/pb_kits/playbook/pb_selectable_card_icon/docs/_selectable_card_icon_single_select.html.erb ADDED

@@ -0,0 +1,27 @@
+<div class="pb--doc-demo-row">
+  <%= pb_rails("selectable_card_icon", props: {
+    icon: "car",
+    title_text: "Car",
+    input_id: 7,
+    name: "select",
+    multi: false,
+  }) %>
+  <%= pb_rails("selectable_card_icon", props: {
+    icon: "bus",
+    title_text: "Bus",
+    input_id: 8,
+    name: "select",
+    multi: false,
+  }) %>
+  <%= pb_rails("selectable_card_icon", props: {
+    icon: "subway",
+    title_text: "Subway",
+    input_id: 9,
+    name: "select",
+    multi: false,
+  }) %>
+</div>

data/app/pb_kits/playbook/pb_selectable_card_icon/docs/_selectable_card_icon_single_select.jsx ADDED

@@ -0,0 +1,40 @@
+import React, { useState } from 'react'
+import { SelectableCardIcon } from '../../'
+const SelectableCardIconSingleSelect = () => {
+  const [selectedFormat, toggleFormat] = useState(null)
+  return (
+    <div className="pb--doc-demo-row">
+      <SelectableCardIcon
+          checked={selectedFormat === 'car'}
+          icon="car"
+          inputId={7}
+          name="select"
+          onChange={() => toggleFormat('car')}
+          titleText="Car"
+          value="car"
+      />
+      <SelectableCardIcon
+          checked={selectedFormat === 'bus'}
+          icon="bus"
+          inputId={8}
+          name="select"
+          onChange={() => toggleFormat('bus')}
+          titleText="Bus"
+          value="bus"
+      />
+      <SelectableCardIcon
+          checked={selectedFormat === 'subway'}
+          icon="subway"
+          inputId={9}
+          name="select"
+          onChange={() => toggleFormat('subway')}
+          titleText="Subway"
+          value="subway"
+      />
+    </div>
+  )
+}
+export default SelectableCardIconSingleSelect