playbook_ui 12.19.0.pre.alpha.PLAY699zindexresponsive650 → 12.19.0.pre.alpha.movemarkdown637

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

@@ -1,115 +0,0 @@
-<% 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>" %>
-
-<% 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>" %>
-
-<%= pb_rails("select", props: {
-  id: "rails-select-dropdown",
-  label: "",
-  name: "",
-  blank_selection: "Select a template",
-  options: [
-    {
-      value: release,
-      value_text: "Playbook Release",
-    },
-    {
-      value: changelog,
-      value_text: "Changelog",
-    },
-  ]
-}) %>
-
-
-
-
-
-<%= pb_rails("rich_text_editor", props: {classname: 'template-test', id: "template", template: '' }) %>
-
-
-<script>
-  const updateContent = (template) => {
-    const trix   = document.querySelector('.template-test trix-editor');
-    const editor = trix.editor;
-    console.log(editor)
-    editor.loadHTML("")
-    editor.setSelectedRange([0, 0])
-    editor.insertHTML(template)
-  }
-
-  window.addEventListener('DOMContentLoaded', () => {
-    const editor = document.querySelector("#rails-select-dropdown")
-    editor.addEventListener('change', function() {
-        console.log('You selected: ', this.value);
-        const template = this.value
-        updateContent(template);
-    });
-  });
-</script>

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

@@ -1,41 +0,0 @@
-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

@@ -1,4 +0,0 @@
-<%= 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

@@ -1,14 +0,0 @@
-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

@@ -1,24 +0,0 @@
-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

@@ -1,10 +0,0 @@
-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

@@ -1,75 +0,0 @@
-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

@@ -1 +0,0 @@
-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

@@ -1,2 +0,0 @@
-### 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

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

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

@@ -1,14 +0,0 @@
-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

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

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

@@ -1,13 +0,0 @@
-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

@@ -1,13 +0,0 @@
-<%= 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

@@ -1,35 +0,0 @@
-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

@@ -1,12 +0,0 @@
-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

@@ -1,3 +0,0 @@
-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

@@ -1 +0,0 @@
-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

@@ -1,2 +0,0 @@
-### 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

@@ -1,19 +0,0 @@
-<%= 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

@@ -1,26 +0,0 @@
-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

@@ -1,8 +0,0 @@
-<%= 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

@@ -1,27 +0,0 @@
-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

@@ -1,23 +0,0 @@
-<%= 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

@@ -1,33 +0,0 @@
-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

@@ -1,19 +0,0 @@
-<%= 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

@@ -1,26 +0,0 @@
-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

@@ -1,33 +0,0 @@
-<%= 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",
-    },
-  ]
-}) %>