playbook_ui 12.20.0.pre.alpha.movemarkdown668 → 12.20.0.pre.alpha.title2665

data/app/pb_kits/playbook/pb_title/docs/_title_default.html.erb

@@ -0,0 +1,11 @@
+<%= pb_rails("title", props: {
+})  do %>
+    Default Title
+<% end %>
+
+<br/>
+
+<%= pb_rails("title", props: { text: "Title 1", tag: "h1", size: 1 }) %>
+<%= pb_rails("title", props: { text: "Title 2", tag: "h2", size: 2 }) %>
+<%= pb_rails("title", props: { text: "Title 3", tag: "h3", size: 3 }) %>
+<%= pb_rails("title", props: { text: "Title 4", tag: "h4", size: 4 }) %>

data/app/pb_kits/playbook/pb_title/docs/_title_default.jsx

@@ -0,0 +1,41 @@
+import React from 'react'
+
+import Title from '../_title'
+
+const TitleDefault = (props) => {
+  return (
+    <div>
+      <Title
+          text="Default Title"
+          {...props}
+      />
+      <br />
+      <Title
+          size={1}
+          tag="h1"
+          text="Title 1"
+          {...props}
+      />
+      <Title
+          size={2}
+          tag="h2"
+          text="Title 2"
+          {...props}
+      />
+      <Title
+          size={3}
+          tag="h3"
+          text="Title 3"
+          {...props}
+      />
+      <Title
+          size={4}
+          tag="h4"
+          text="Title 4"
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default TitleDefault

data/app/pb_kits/playbook/pb_title/docs/_title_default.md

@@ -0,0 +1,3 @@
+##### Prop
+Title kit will use `h3` tag by default, and `size 3` as well. 
+Size and tag props are not in correlation with each other, meaning any size can be used along with any tag.

data/app/pb_kits/playbook/pb_title/docs/_title_light_weight.html.erb

@@ -0,0 +1 @@
+<%= pb_rails("title", props: { text: "Title 1", tag: "h1", size: 1, bold: false }) %>

data/app/pb_kits/playbook/pb_title/docs/_title_light_weight.jsx

@@ -0,0 +1,19 @@
+import React from 'react'
+
+import Title from '../_title'
+
+const TitleLightWeight = (props) => {
+  return (
+    <div>
+      <Title
+          bold={false}
+          size={1}
+          tag="h1"
+          text="Title 1"
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default TitleLightWeight

data/app/pb_kits/playbook/pb_title/docs/_title_light_weight.md

@@ -0,0 +1,4 @@
+##### Prop
+Title `size 1` & `size 2` will use `font-weight: 700` by default, if you want a lighter font weight, use the `bold` prop set to `false`.
+Title `size 3` uses a light font weight by default and will not accept a bold font weight.
+Title `size 4` uses a heavy font weight by default and will not accept a lighter font weight.

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

@@ -0,0 +1,10 @@
+examples:
+  rails:
+  - title_default: Default UI
+  - title_light_weight: Light Weight UI
+  - title_colors: Colors
+
+  react:
+  - title_default: Default UI
+  - title_light_weight: Light Weight UI
+  - title_colors: Colors

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

@@ -0,0 +1,3 @@
+export { default as TitleDefault } from './_title_default.jsx'
+export { default as TitleLightWeight } from './_title_light_weight.jsx'
+export { default as TitleColors } from './_title_colors.jsx'

data/app/pb_kits/playbook/pb_title_count/docs/_description.md

@@ -0,0 +1 @@
+This kits consists of title kit and body text. It is used to display a title and a count (numbers). It has a base size and a large formation for dashboard use.

data/app/pb_kits/playbook/pb_title_count/docs/_footer.md

@@ -0,0 +1,2 @@
+## Things To Avoid
+Keep the format. Don’t replace the colors for any text in this kit. 

data/app/pb_kits/playbook/pb_title_count/docs/_title_count_align.html.erb

@@ -0,0 +1,20 @@
+<%= pb_rails("title_count", props: {
+  title: "Remodeling Consultants",
+  count: 527
+}) %>
+
+<br>
+
+<%= pb_rails("title_count", props: {
+  title: "Remodeling Consultants",
+  count: 527,
+  align: "center"
+}) %>
+
+<br>
+
+<%= pb_rails("title_count", props: {
+  title: "Remodeling Consultants",
+  count: 527,
+  align: "right"
+}) %>

data/app/pb_kits/playbook/pb_title_count/docs/_title_count_align.jsx

@@ -0,0 +1,35 @@
+import React from 'react'
+
+import TitleCount from '../_title_count'
+
+const TitleCountAlign = (props) => {
+  return (
+    <>
+      <TitleCount
+          count={527}
+          title="Remodeling Consultants"
+          {...props}
+      />
+
+      <br />
+
+      <TitleCount
+          align="center"
+          count={527}
+          title="Remodeling Consultants"
+          {...props}
+      />
+
+      <br />
+
+      <TitleCount
+          align="right"
+          count={527}
+          title="Remodeling Consultants"
+          {...props}
+      />
+    </>
+  )
+}
+
+export default TitleCountAlign

data/app/pb_kits/playbook/pb_title_count/docs/_title_count_default.html.erb

@@ -0,0 +1,20 @@
+<%= pb_rails("title_count", props: {
+  title: "Appointments",
+  count: 35.78
+}) %>
+
+<br>
+
+<%= pb_rails("title_count", props: {
+  title: "Appointments",
+  count: 7399,
+  size: "lg"
+}) %>
+
+<br>
+
+<%= pb_rails("title_count", props: {
+  title: "Appointments",
+  count: -379503.3720,
+  size: "lg"
+}) %>

data/app/pb_kits/playbook/pb_title_count/docs/_title_count_default.jsx

@@ -0,0 +1,35 @@
+import React from 'react'
+
+import TitleCount from '../_title_count'
+
+const TitleCountDefault = (props) => {
+  return (
+    <>
+      <TitleCount
+          count={35.78}
+          title="Appointments"
+          {...props}
+      />
+
+      <br />
+
+      <TitleCount
+          count={7399}
+          size="lg"
+          title="Appointments"
+          {...props}
+      />
+
+      <br />
+
+      <TitleCount
+          count={-379503.372}
+          size="lg"
+          title="Appointments"
+          {...props}
+      />
+    </>
+  )
+}
+
+export default TitleCountDefault

data/app/pb_kits/playbook/pb_title_count/docs/_title_count_default.md

@@ -0,0 +1 @@
+Use this kit as a form of label value only for a numeric value.

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

@@ -0,0 +1,8 @@
+examples:
+  rails:
+    - title_count_default: Default
+    - title_count_align: Align
+
+  react:
+    - title_count_default: Default
+    - title_count_align: Align

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

@@ -0,0 +1,2 @@
+export { default as TitleCountDefault } from './_title_count_default.jsx'
+export { default as TitleCountAlign } from './_title_count_align.jsx'

data/app/pb_kits/playbook/pb_title_detail/docs/_description.md

@@ -0,0 +1 @@
+This kit can be used in many versatile ways. It consist of a title 4 and light body text kit.

data/app/pb_kits/playbook/pb_title_detail/docs/_footer.md

@@ -0,0 +1,2 @@
+## Things To Avoid
+Don’t use as replacement for label_value kit. This kit is to be used for small amount of text in the details. 

data/app/pb_kits/playbook/pb_title_detail/docs/_title_detail_default.html.erb

@@ -0,0 +1,16 @@
+<%= pb_rails("title_detail", props: {
+  title: "Email Notifications",
+  detail: "Commits data and history"
+}) %>
+
+<%= pb_rails("title_detail", props: {
+  title: "Email Notifications",
+  detail: "Commits data and history",
+  align: "center"
+}) %>
+
+<%= pb_rails("title_detail", props: {
+  title: "Email Notifications",
+  detail: "Commits data and history",
+  align: "right"
+}) %>

data/app/pb_kits/playbook/pb_title_detail/docs/_title_detail_default.jsx

@@ -0,0 +1,30 @@
+import React from 'react'
+
+import TitleDetail from '../_title_detail'
+
+const TitleDetailDefault = (props) => (
+  <div>
+    <TitleDetail
+        detail="Commits data and history"
+        title="Email Notifications"
+        {...props}
+    />
+
+    <TitleDetail
+        align="center"
+        detail="Commits data and history"
+        title="Email Notifications"
+        {...props}
+    />
+
+    <TitleDetail
+        align="right"
+        detail="Commits data and history"
+        title="Email Notifications"
+        {...props}
+    />
+
+  </div>
+)
+
+export default TitleDetailDefault

data/app/pb_kits/playbook/pb_title_detail/docs/_title_detail_default.md

@@ -0,0 +1 @@
+Use this kit in tables and cards to display data that doesn’t have a caption assigned.

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

@@ -0,0 +1,7 @@
+examples:
+
+  rails:
+  - title_detail_default: Default
+
+  react:
+  - title_detail_default: Default

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

@@ -0,0 +1 @@
+export { default as TitleDetailDefault } from './_title_detail_default.jsx'

data/app/pb_kits/playbook/pb_toggle/docs/_description.md

@@ -0,0 +1 @@
+Physical switch that allows users to turn things on or off. Used for applying system states, presenting binary options and activating a state.

data/app/pb_kits/playbook/pb_toggle/docs/_footer.md

@@ -0,0 +1,3 @@
+### Things to Avoid
+Avoid using if there is a selection with no action/execution that follows or if actions need to be confirmed before being applied.
+Avoid using for opposing options (ie having an option on each side of toggle and the side that it is flipped to is the option that is selected).

data/app/pb_kits/playbook/pb_toggle/docs/_toggle_custom.html.erb

@@ -0,0 +1,3 @@
+<%= pb_rails("toggle", props: { size: "sm" }) do %>
+  <input class="my_custom_input" type="checkbox" name="custom_checkbox" value="ABC" />
+<% end %>

data/app/pb_kits/playbook/pb_toggle/docs/_toggle_custom.jsx

@@ -0,0 +1,31 @@
+// @flow
+
+import React, { useState } from 'react'
+import { Toggle } from '../..'
+
+const ToggleCustom = () => {
+  const [choice, setChoice] = useState(false)
+
+  const handleOnChange = ({ target }) => {
+    setChoice(target.value = !choice)
+  }
+
+  return (
+    <>
+      <Toggle
+          checked={choice}
+          size="sm"
+      >
+        <input
+            className="my custom checkbox"
+            name="custom checkbox"
+            onChange={handleOnChange}
+            type="checkbox"
+            value="ABC"
+        />
+      </Toggle>
+    </>
+  )
+}
+
+export default ToggleCustom

data/app/pb_kits/playbook/pb_toggle/docs/_toggle_custom_radio.html.erb

@@ -0,0 +1,22 @@
+<%= pb_rails("title", props: { size: 4, text: "Select one option:" }) %>
+
+<br>
+
+<%= pb_rails("caption", props: { text: "Walk" }) %>
+<%= pb_rails("toggle", props: { size: "sm" }) do %>
+  <input type="radio" name="modes of transportation" value="walk">
+<% end %>
+
+<br/>
+
+<%= pb_rails("caption", props: { text: "Bike" }) %>
+<%= pb_rails("toggle", props: { size: "sm" }) do %>
+  <input type="radio" name="modes of transportation" value="bike">
+<% end %>
+
+<br/>
+
+<%= pb_rails("caption", props: { text: "Ride" }) %>
+<%= pb_rails("toggle", props: { size: "sm" }) do %>
+  <input type="radio" name="modes of transportation" value="ride">
+<% end %>

data/app/pb_kits/playbook/pb_toggle/docs/_toggle_custom_radio.jsx

@@ -0,0 +1,72 @@
+// @flow
+
+import React, { useState } from 'react'
+import { Caption, Title, Toggle } from '../..'
+
+const ToggleCustomRadio = () => {
+  const [choice, setChoice] = useState('walk')
+
+  const handleOnChange = ({ target }) => {
+    setChoice(target.value)
+  }
+
+  return (
+    <>
+      <Title
+          size={4}
+          text="Select one option:"
+      />
+
+      <br />
+
+      <Caption
+          text="Walk"
+      />
+      <Toggle
+          checked={choice}
+          size="sm"
+      >
+        <input
+            name="modes of transportation"
+            onChange={handleOnChange}
+            type="radio"
+            value="walk"
+        />
+      </Toggle>
+
+      <br />
+
+      <Caption
+          text="Bike"
+      />
+      <Toggle
+          size="sm"
+      >
+        <input
+            name="modes of transportation"
+            onChange={handleOnChange}
+            type="radio"
+            value="bike"
+        />
+      </Toggle>
+
+      <br />
+
+      <Caption
+          text="Ride"
+      />
+      <Toggle
+          size="sm"
+      >
+        <input
+            name="modes of transportation"
+            onChange={handleOnChange}
+            type="radio"
+            value="ride"
+        />
+      </Toggle>
+    </>
+  )
+}
+
+export default ToggleCustomRadio

data/app/pb_kits/playbook/pb_toggle/docs/_toggle_default.html.erb

@@ -0,0 +1,9 @@
+<%= pb_rails("toggle", props: {
+  checked: true
+}) %>
+
+<br>
+
+<%= pb_rails("toggle", props: {
+  checked: false
+}) %>

data/app/pb_kits/playbook/pb_toggle/docs/_toggle_default.jsx

@@ -0,0 +1,20 @@
+// @flow
+
+import React from 'react'
+import { Toggle } from '../..'
+
+const ToggleDefault = () => {
+  return (
+    <>
+      <Toggle
+          checked
+      />
+
+      <br />
+
+      <Toggle />
+    </>
+  )
+}
+
+export default ToggleDefault

data/app/pb_kits/playbook/pb_toggle/docs/_toggle_name.html.erb

@@ -0,0 +1,21 @@
+<%= pb_rails("title", props: { size: 4, text: "Which of the following vehicles do you own?" }) %>
+
+<br>
+
+<%= pb_rails("caption", props: { text: "Car" }) %>
+<%= pb_rails("toggle", props: {
+  size: "sm",
+  checked: false,
+  name: "vehicle",
+  value: "car"
+}) %>
+
+<br>
+
+<%= pb_rails("caption", props: { text: "Bike" }) %>
+<%= pb_rails("toggle", props: {
+  size: "sm",
+  checked: false,
+  name: "vehicle",
+  value: "bike"
+}) %>

data/app/pb_kits/playbook/pb_toggle/docs/_toggle_name.jsx

@@ -0,0 +1,57 @@
+// @flow
+
+import React, { useState } from 'react'
+import { Caption, Title, Toggle } from '../..'
+
+const ToggleName = () => {
+  const [choice, setChoice] = useState(false)
+
+  const handleOnChange = ({ target }) => {
+    setChoice(target.value = !choice)
+  }
+
+  return (
+    <>
+      <Title
+          size={4}
+          text="Which of the following vehicles do you own?"
+      />
+
+      <br />
+
+      <Caption
+          text="Car"
+      />
+      <Toggle
+          checked={choice}
+          size="sm"
+      >
+        <input
+            name="vehicle"
+            onChange={handleOnChange}
+            type="checkbox"
+            value="car"
+        />
+      </Toggle>
+
+      <br />
+      <Caption
+          text="Bike"
+      />
+      <Toggle
+          checked={choice}
+          size="sm"
+      >
+        <input
+            name="vehicle"
+            onChange={handleOnChange}
+            type="checkbox"
+            value="bike"
+        />
+      </Toggle>
+
+    </>
+  )
+}
+
+export default ToggleName

data/app/pb_kits/playbook/pb_toggle/docs/_toggle_options.html.erb

@@ -0,0 +1,10 @@
+<%= pb_rails("toggle" , props: {
+  text: "Toggle with Options",
+  input_options: {
+    id: "toggle-id",
+    name: "toggle-name",
+    value: "toggle-value",
+    class: "toggle-class",
+    checked: true
+  }
+}) %>

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

@@ -0,0 +1,15 @@
+examples:
+
+  rails:
+  - toggle_default: Default State
+  - toggle_name: Name and Value
+  - toggle_custom: Custom checkbox input
+  - toggle_custom_radio: Custom radio inputs
+  - toggle_options: Toggle w/ Options
+
+  react:
+  - toggle_default: Default State
+  - toggle_name: Name and Value
+  - toggle_custom: Custom checkbox input
+  - toggle_custom_radio: Custom radio inputs
+

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

@@ -0,0 +1,4 @@
+export { default as ToggleDefault } from './_toggle_default'
+export { default as ToggleCustom } from './_toggle_custom'
+export { default as ToggleName } from './_toggle_name'
+export { default as ToggleCustomRadio } from './_toggle_custom_radio'

data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_default.html.erb

@@ -0,0 +1,46 @@
+<%= pb_rails("flex", props: { gap: "md", justify: "center", wrap: true }) do %>
+  <%= pb_rails("flex/flex_item") do %>
+    <span id='regular-tooltip-1'>Hover here (Top)</span>
+
+    <%= pb_rails("tooltip", props: {
+      trigger_element_selector: "#regular-tooltip-1",
+      tooltip_id: "tooltip-1",
+      position: 'top'
+    }) do %>
+        Whoa. I'm a tooltip.
+    <% end %>
+  <% end %>
+
+  <%= pb_rails("flex/flex_item") do %>
+    <span id='regular-tooltip-2'>Hover here (Bottom)</span>
+    <%= pb_rails("tooltip", props: {
+      trigger_element_selector: "#regular-tooltip-2",
+      tooltip_id: "tooltip-2",
+      position: 'bottom'
+    }) do %>
+        Whoa. I'm a tooltip.
+    <% end %>
+  <% end %>
+
+  <%= pb_rails("flex/flex_item") do %>
+    <span id='regular-tooltip-3'>Hover here (Right)</span>
+    <%= pb_rails("tooltip", props: {
+      trigger_element_selector: "#regular-tooltip-3",
+      tooltip_id: "tooltip-3",
+      position: 'right'
+    }) do %>
+        Whoa. I'm a tooltip.
+    <% end %>
+  <% end %>
+
+  <%= pb_rails("flex/flex_item") do %>
+    <span id='regular-tooltip-4'>Hover here (Left)</span>
+    <%= pb_rails("tooltip", props: {
+      trigger_element_selector: "#regular-tooltip-4",
+      tooltip_id: "tooltip-4",
+      position: 'left'
+    }) do %>
+        Whoa. I'm a tooltip.
+    <% end %>
+  <% end %>
+<% end %>