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

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_templates.jsx

@@ -0,0 +1,41 @@
+import React, { useState } from 'react'
+import { RichTextEditor, Select } from '../../'
+import { changelog, release } from './templates.js'
+
+const RichTextEditorTemplates = (props) => {
+  const [editorContent, setEditorContent] = useState('')
+
+  const handleChange = (event) => {
+    setEditorContent(event.target.value)
+  }
+
+  const options = [
+    {
+      value: release,
+      text: 'Playbook Release',
+    },
+    {
+      value: changelog,
+      text: 'Changelog',
+    },
+  ]
+
+  return (
+    <div>
+      <Select
+          blankSelection="Select a template..."
+          label="Template"
+          onChange={handleChange}
+          options={options}
+          {...props}
+      />
+      <RichTextEditor
+          id="template"
+          template={editorContent}
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default RichTextEditorTemplates

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_toolbar_bottom.html.erb

@@ -0,0 +1,4 @@
+<%= pb_rails("rich_text_editor", props: {
+  id: "toolbar-bottom",
+  toolbar_bottom: true
+}) %>

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_toolbar_bottom.jsx

@@ -0,0 +1,14 @@
+import React from 'react'
+import { RichTextEditor } from '../../'
+
+const RichTextEditorToolbarBottom = (props) => (
+  <div>
+    <RichTextEditor
+        id="bottom-toolbar"
+        toolbarBottom
+        {...props}
+    />
+  </div>
+)
+
+export default RichTextEditorToolbarBottom

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

@@ -0,0 +1,24 @@
+examples:
+
+  rails:
+  - rich_text_editor_default: Default
+  - rich_text_editor_simple: Simple
+  - rich_text_editor_attributes: Attributes
+  - rich_text_editor_focus: Focus
+  - rich_text_editor_sticky: Sticky
+  - rich_text_editor_templates: Templates
+  - rich_text_editor_toolbar_bottom: Toolbar Bottom
+  - rich_text_editor_inline: Inline
+  - rich_text_editor_preview: Preview
+
+  react:
+  - rich_text_editor_default: Default
+  - rich_text_editor_advanced_default: Advanced Default
+  - rich_text_editor_simple: Simple
+  - rich_text_editor_attributes: Attributes
+  - rich_text_editor_focus: Focus
+  - rich_text_editor_sticky: Sticky
+  - rich_text_editor_templates: Templates
+  - rich_text_editor_toolbar_bottom: Toolbar Bottom
+  - rich_text_editor_inline: Inline
+  - rich_text_editor_preview: Preview

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

@@ -0,0 +1,10 @@
+export { default as RichTextEditorDefault } from './_rich_text_editor_default.jsx'
+export { default as RichTextEditorSimple } from './_rich_text_editor_simple.jsx'
+export { default as RichTextEditorAttributes } from './_rich_text_editor_attributes.jsx'
+export { default as RichTextEditorFocus } from './_rich_text_editor_focus.jsx'
+export { default as RichTextEditorSticky } from './_rich_text_editor_sticky.jsx'
+export { default as RichTextEditorTemplates } from './_rich_text_editor_templates.jsx'
+export { default as RichTextEditorToolbarBottom } from './_rich_text_editor_toolbar_bottom.jsx'
+export { default as RichTextEditorInline } from './_rich_text_editor_inline.jsx'
+export { default as RichTextEditorPreview } from './_rich_text_editor_preview.jsx'
+export { default as RichTextEditorAdvancedDefault } from './_rich_text_editor_advanced_default.jsx'

data/app/pb_kits/playbook/pb_rich_text_editor/docs/templates.js

@@ -0,0 +1,75 @@
+export const release = `
+  <div>
+    <div>
+      <strong>Story Background</strong>
+    </div>
+    <div>
+      Follow the{" "}
+      <a href='https://github.com/powerhome/playbook/wiki/Release-Team-Guide'>
+        release process
+      </a>{" "}
+      to create a new version, create a gem, and package. Create a Ninja testing
+      plan, then update Nitro with the new version.
+    </div>
+    <div>
+      <br />
+    </div>
+    <div>
+      <strong>Timeline / Due Date</strong>
+    </div>
+    <div>
+      <em>Release End of business Thursday</em>
+    </div>
+    <div>
+      <em>Testing on Nitro End of business Friday</em>
+    </div>
+    <div>
+      <br />
+    </div>
+    <div>
+      <strong>Definition of done</strong>
+    </div>
+    <ol>
+      <li>Merge all PR’s</li>
+      <li>Update the final CHANGELOG</li>
+      <li>Version up and generate NPM, and RubyGem</li>
+      <li>Create next version branch and milestone</li>
+      <li>Update default branch and branch protection rules&nbsp;</li>
+      <li>Notify Everyone of new version</li>
+      <li>
+        Generate testing plan and pages to test for Ninjas (update runway
+        ticket)
+      </li>
+      <li>Update version on Nitro and get on Demo</li>
+      <li>Send Ninjas demo and runway ticket for testing</li>
+      <li>Ninja Approved + PR Approved</li>
+    </ol>
+    <div>
+      <br />
+    </div>
+    <div>
+      <strong>Stakeholders / Sign-off</strong>
+    </div>
+    <ul>
+      <li>Code Owners</li>
+    </ul>
+    <div>
+      <br />
+      <strong>Cadence</strong>
+      <br />
+      Jason, Jon, Stephen, Jasper, Brendan, Cole
+    </div>
+  </div>
+`
+
+export const changelog = `
+  <div>
+    <strong>Changelog:<br></strong>
+    [INSERT LINK]<br><br>
+    You can test the normal spots of Playbook rails and react on
+    dev docs plus the following:
+  </div>
+  <div>
+    <br>
+  </div>
+`

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

@@ -0,0 +1 @@
+Section separator is a divider line that compartmentalizes content, typically used on cards or white backgrounds. This should only be used on light backgrounds (with our variable `$bg_light`).

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

@@ -0,0 +1,2 @@
+### Things to Avoid
+Do not use section separators to handle list; instead, use <a href="https://playbook.powerapp.cloud/kits/list">List Kit</a>. 

data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_line.html.erb

@@ -0,0 +1 @@
+<%= pb_rails("section_separator") %>

data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_line.jsx

@@ -0,0 +1,14 @@
+import React from 'react'
+import { SectionSeparator } from '../../'
+
+const SectionSeparatorLine = (props) => {
+  return (
+    <div>
+      <SectionSeparator
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default SectionSeparatorLine

data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_text.html.erb

@@ -0,0 +1 @@
+<%= pb_rails("section_separator", props: { text: "Title Separator" }) %>

data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_text.jsx

@@ -0,0 +1,13 @@
+import React from 'react'
+import { SectionSeparator } from '../../'
+
+const SectionSeparatorText = (props) => {
+  return (
+    <SectionSeparator
+        {...props}
+        text="Title Separator"
+    />
+  )
+}
+
+export default SectionSeparatorText

data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_vertical.html.erb

@@ -0,0 +1,13 @@
+<%= pb_rails("flex", props: {classname: "flex-container", vertical: "stretch"}) do %>
+    <%= pb_rails("body", props: {classname: "flex-item"}) do %>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
+    <% end %>
+    <%= pb_rails("section_separator", props: { orientation: "vertical" }) %>
+    <%= pb_rails("body", props: {classname: "flex-item"}) do %>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
+    <% end %>
+    <%= pb_rails("section_separator", props: { orientation: "vertical" }) %>
+    <%= pb_rails("body", props: {classname: "flex-item"}) do %>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
+    <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_vertical.jsx

@@ -0,0 +1,35 @@
+import React from 'react'
+
+import SectionSeparator from '../_section_separator'
+
+import Flex from '../../pb_flex/_flex'
+import FlexItem from '../../pb_flex/_flex_item'
+
+const SectionSeparatorVertical = (props) => {
+  return (
+    <Flex
+        inline="flex-container"
+        vertical="stretch"
+    >
+      <FlexItem>
+        {'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua'}
+      </FlexItem>
+      <SectionSeparator
+          {...props}
+          orientation="vertical"
+      />
+      <FlexItem>
+        {'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua'}
+      </FlexItem>
+      <SectionSeparator
+          {...props}
+          orientation="vertical"
+      />
+      <FlexItem>
+        {'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua'}
+      </FlexItem>
+    </Flex>
+  )
+}
+
+export default SectionSeparatorVertical

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

@@ -0,0 +1,12 @@
+examples:
+
+  rails:
+  - section_separator_text: Text Separator
+  - section_separator_line: Line Separator
+  - section_separator_vertical: Vertical
+
+
+  react:
+  - section_separator_text: Text Separator
+  - section_separator_line: Line Separator
+  - section_separator_vertical: Vertical

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

@@ -0,0 +1,3 @@
+export { default as SectionSeparatorLine } from './_section_separator_line.jsx'
+export { default as SectionSeparatorText } from './_section_separator_text.jsx'
+export { default as SectionSeparatorVertical } from './_section_separator_vertical.jsx'

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

@@ -0,0 +1 @@
+Select displays multiple options for a user to pick from in a dropdown menu. User selects one option.

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

@@ -0,0 +1,2 @@
+### Things to Avoid
+Try to avoid using select when there are limited options to choose from (ie either or questions, yes/no questions, etc).

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,26 @@
+import React from 'react'
+
+import Select from '../_select'
+
+const SelectBlank = (props) => {
+  const options = [
+    { value: 'USA' },
+    { value: 'Canada' },
+    { value: 'Brazil' },
+    { value: 'Philippines' },
+  ]
+
+  return (
+    <div>
+      <Select
+          blankSelection="Select One..."
+          label="Where do you live"
+          name="location"
+          options={options}
+          {...props}
+      />
+    </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,27 @@
+import React from 'react'
+
+import Select from '../_select'
+
+const SelectCustomSelect = (props) => {
+  return (
+    <div>
+      <Select
+          label="Favorite Holiday"
+          {...props}
+      >
+        <select
+            id="holiday"
+            name="holiday"
+            {...props}
+        >
+          <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_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,33 @@
+import React from 'react'
+
+import Select from '../_select'
+
+const SelectDefault = (props) => {
+  const options = [
+    {
+      value: '1',
+      text: 'Burgers',
+    },
+    {
+      value: '2',
+      text: 'Pizza',
+    },
+    {
+      value: '3',
+      text: 'Tacos',
+    },
+  ]
+
+  return (
+    <div>
+      <Select
+          label="Favorite Food"
+          name="food"
+          options={options}
+          {...props}
+      />
+    </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,26 @@
+import React from 'react'
+
+import Select from '../_select'
+
+const SelectDisabled = (props) => {
+  const options = [
+    { value: 'Apple Pie' },
+    { value: 'Cookies' },
+    { value: 'Ice Cream' },
+    { value: 'Brownies' },
+  ]
+
+  return (
+    <div>
+      <Select
+          disabled
+          label="Favorite Dessert"
+          name="dessert"
+          options={options}
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default SelectDisabled

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,48 @@
+import React from 'react'
+
+import Select from '../_select'
+
+const SelectDisabledOptions = (props) => {
+  const options = [
+    {
+      value: '1',
+      disabled: true,
+      text: 'Espresso',
+    },
+    {
+      value: '2',
+      text: 'Americano',
+    },
+    {
+      value: '3',
+      disabled: true,
+      text: 'Cappuccino',
+    },
+    {
+      value: '4',
+      text: 'Mocha',
+    },
+    {
+      value: '5',
+      text: 'Flat White',
+    },
+    {
+      value: '6',
+      text: 'Latte',
+    },
+  ]
+
+  return (
+    <div>
+      <Select
+          label="Favorite Coffee"
+          name="coffee"
+          options={options}
+          value="2"
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default SelectDisabledOptions

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

@@ -0,0 +1,24 @@
+<%= pb_rails("select", props: {
+  error: "Please make a valid selection",
+  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_error.jsx

@@ -0,0 +1,39 @@
+import React from 'react'
+import { Body, Select } from '../..'
+
+const SelectError = (props) => {
+  const options = [
+    {
+      value: '1',
+      text: 'Burgers',
+    },
+    {
+      value: '2',
+      text: 'Pizza',
+    },
+    {
+      value: '3',
+      text: 'Tacos',
+    },
+  ]
+
+  return (
+    <div>
+      <Select
+          error="Please make a valid selection"
+          label="Favorite Food"
+          name="food"
+          options={options}
+          value="2"
+          {...props}
+      />
+      <Body
+          error="Please make a valid selection"
+          status="negative"
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default SelectError

data/app/pb_kits/playbook/pb_select/docs/_select_error.md

@@ -0,0 +1 @@
+Select w/ Error shows that the radio option must be selected or is invalid (ie when used in a form it signals a user to fix an error).

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

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