RubyGems - playbook_ui - Versions diffs - 12.18.0.pre.alpha.play786multilevelselectimprovements627 → 12.19.0.pre.alpha.movemarkdown637 - Mend

playbook_ui 12.18.0.pre.alpha.play786multilevelselectimprovements627 → 12.19.0.pre.alpha.movemarkdown637

Files changed (1472) hide show

data/app/pb_kits/playbook/pb_file_upload/docs/_file_upload_custom_message.jsx DELETED Viewed

@@ -1,40 +0,0 @@
-/* @flow */
-import React, { useState } from 'react'
-import {
-  FileUpload,
-  List,
-  ListItem,
-} from '../..'
-const AcceptedFilesList = ({ files }: FileList) => (
-  <List>
-    {files.map((file) => (
-      <ListItem key={file.name}>{file.name}</ListItem>
-    ))}
-  </List>
-)
-const FileUploadCustomMessage = (props) => {
-  const [filesToUpload, setFilesToUpload] = useState([])
-  const handleOnFilesAccepted = (files) => {
-    setFilesToUpload([...filesToUpload, ...files])
-  }
-  return (
-    <div>
-      <AcceptedFilesList
-          files={filesToUpload}
-          {...props}
-      />
-      <FileUpload
-          customMessage="Playbook is awesome!"
-          onFilesAccepted={handleOnFilesAccepted}
-          {...props}
-      />
-    </div>
-  )
-}
-export default FileUploadCustomMessage

data/app/pb_kits/playbook/pb_file_upload/docs/_file_upload_default.jsx DELETED Viewed

@@ -1,39 +0,0 @@
-/* @flow */
-import React, { useState } from 'react'
-import {
-  FileUpload,
-  List,
-  ListItem,
-} from '../..'
-const AcceptedFilesList = ({ files }: FileList) => (
-  <List>
-    {files.map((file) => (
-      <ListItem key={file.name}>{file.name}</ListItem>
-    ))}
-  </List>
-)
-const FileUploadDefault = (props) => {
-  const [filesToUpload, setFilesToUpload] = useState([])
-  const handleOnFilesAccepted = (files) => {
-    setFilesToUpload([...filesToUpload, ...files])
-  }
-  return (
-    <div>
-      <AcceptedFilesList
-          files={filesToUpload}
-          {...props}
-      />
-      <FileUpload
-          onFilesAccepted={handleOnFilesAccepted}
-          {...props}
-      />
-    </div>
-  )
-}
-export default FileUploadDefault

data/app/pb_kits/playbook/pb_file_upload/docs/_file_upload_max_size.jsx DELETED Viewed

@@ -1,71 +0,0 @@
-/* @flow */
-/* eslint-disable react/no-multi-comp */
-import React, { useState } from 'react'
-import {
-  Body,
-  FileUpload,
-  List,
-  ListItem,
-} from '../..'
-const AcceptedFilesList = ({ files }: FileList) => (
-  <List>
-    {files.map((file) => (
-      <ListItem key={file.name}>{file.name}</ListItem>
-    ))}
-  </List>
-)
-const RejectedFilesList = ({ files }: FileList) => (
-  <List>
-    {files.map((file) => (
-      <ListItem key={file.name}><Body color="error">{`${file.name} (file too large)`}</Body></ListItem>
-    ))}
-  </List>
-)
-const FileUploadMaxSize = (props) => {
-  const [filesToUpload, setFilesToUpload] = useState([])
-  const [filesRejected, setFilesRejected] = useState([])
-  const [error, setError] = useState()
-  const handleOnFilesAccepted = (files) => {
-    if (files.length) setError()
-    setFilesToUpload([...filesToUpload, ...files])
-  }
-  const handleOnFilesRejected = (error, files) => {
-    setError(error)
-    setFilesRejected([...filesRejected, ...files])
-  }
-  return (
-    <div>
-      <AcceptedFilesList
-          files={filesToUpload}
-          {...props}
-      />
-      <RejectedFilesList
-          files={filesRejected}
-          {...props}
-      />
-      <FileUpload
-          acceptedFilesDescription="Choose a file or drag it here. 1 MB size limit."
-          maxSize={1000000}
-          onFilesAccepted={handleOnFilesAccepted}
-          onFilesRejected={handleOnFilesRejected}
-          {...props}
-      />
-      { error && (
-        <Body
-            color="error"
-            marginY="md"
-        >
-          {error}
-        </Body>
-      )}
-    </div>
-  )
-}
-export default FileUploadMaxSize

data/app/pb_kits/playbook/pb_file_upload/docs/example.yml DELETED Viewed

@@ -1,10 +0,0 @@
-examples:
-  rails:
-  react:
-  - file_upload_default: Default List of files to upload
-  - file_upload_accept: Accept only certain types of files
-  - file_upload_custom_message: Add a custom message
-  - file_upload_custom_description: Add your one accepted files description
-  - file_upload_max_size: Set a file size limit

data/app/pb_kits/playbook/pb_file_upload/docs/index.js DELETED Viewed

@@ -1,5 +0,0 @@
-export { default as FileUploadDefault } from './_file_upload_default.jsx'
-export { default as FileUploadAccept } from './_file_upload_accept.jsx'
-export { default as FileUploadCustomMessage } from './_file_upload_custom_message.jsx'
-export { default as FileUploadCustomDescription } from './_file_upload_custom_description.jsx'
-export { default as FileUploadMaxSize } from './_file_upload_max_size.jsx'

data/app/pb_kits/playbook/pb_filter/docs/_description.md DELETED Viewed

@@ -1,7 +0,0 @@
-This kit can be implemented in a variety of ways.
-To see examples of how to implement this kit in production visit the **/dev_docs/search** page in production.
-**Note**
-All React examples are wrapped in a <code>{closePopover}</code> method to ensure the popover closes on click of "Apply".
-The `min_width` prop for the popover inside of filter is used in all the examples and is set to 360px. That is the `min_width` prop we recommend using as it is the same pixel value as our `max_width` `sm` global prop.

data/app/pb_kits/playbook/pb_filter/docs/_filter_default.html.erb DELETED Viewed

@@ -1,71 +0,0 @@
-<%=
-  pb_rails("filter", props: {
-    min_width: "360px",
-    id: "1",
-    margin_bottom: "xl",
-    filters: [
-      { name: "name", value: "John Wick" },
-      { name: "city", value: "San Francisco"}
-    ],
-    sort_menu: [
-      { item: "Popularity", link: "?q[sorts]=managers_popularity+asc", active: true, direction: "desc" },
-      { item: "Mananger's Title", link: "?q[sorts]=managers_title+asc", active: false },
-      { item: "Manager's Name", link: "?q[sorts]=managers_name+asc", active: false },
-    ],
-    template: "default",
-    results: 1,
-  }) do
-%>
-  <%
-    example_collection = [
-      OpenStruct.new(name: "USA", value: 1),
-      OpenStruct.new(name: "Canada", value: 2),
-      OpenStruct.new(name: "Brazil", value: 3),
-      OpenStruct.new(name: "Philippines", value: 4),
-      OpenStruct.new(name: "A galaxy far far away...", value: 5)
-    ]
-  %>
-  <%= pb_rails("form", props: { form_system_options: { scope: :example, method: :get } }) do |form| %>
-    <%= form.text_field :example_text_field, props: { label: true } %>
-    <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true } %>
-    <%= form.actions do |action| %>
-      <%= action.submit props: { text: "Apply", data: { disable_with: "<i class='far fa-spinner fa-spin mr-3'></i>Searching...".html_safe },}%>
-      <%= action.button props: { type: "reset", text: "Clear", variant: "secondary" } %>
-    <% end %>
-  <% end %>
-<% end %>
-<%=
-  pb_rails("filter", props: {
-    min_width: "360px",
-    id: "def2",
-    sort_menu: [
-      { item: "Popularity", link: "?q[sorts]=managers_popularity+asc", active: true, direction: "desc" },
-      { item: "Mananger's Title", link: "?q[sorts]=managers_title+asc", active: false },
-      { item: "Manager's Name", link: "?q[sorts]=managers_name+asc", active: false },
-    ],
-    template: "default",
-    results: 0,
-  }) do
-%>
-  <%
-    example_collection = [
-      OpenStruct.new(name: "USA", value: 1),
-      OpenStruct.new(name: "Canada", value: 2),
-      OpenStruct.new(name: "Brazil", value: 3),
-      OpenStruct.new(name: "Philippines", value: 4),
-      OpenStruct.new(name: "A galaxy far far away...", value: 5)
-    ]
-  %>
-  <%= pb_rails("form", props: { form_system_options: { scope: :example, method: :get } }) do |form| %>
-    <%= form.text_field :example_text_field, props: { label: true } %>
-    <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true } %>
-    <%= form.actions do |action| %>
-      <%= action.submit props: { text: "Apply", data: { disable_with: "<i class='far fa-spinner fa-spin mr-3'></i>Searching...".html_safe },}%>
-      <%= action.button props: { type: "reset", text: "Clear", variant: "secondary" } %>
-    <% end %>
-  <% end %>
-<% end %>

data/app/pb_kits/playbook/pb_filter/docs/_filter_default.jsx DELETED Viewed

@@ -1,130 +0,0 @@
-import React from 'react'
-import { Button, Filter, Flex, Select, TextInput } from '../../'
-const SortingChangeCallback = (sortOptions) => {
-  alert(JSON.stringify(sortOptions[0]))
-}
-const FilterDefault = (props) => {
-  const options = [
-    { value: 'USA' },
-    { value: 'Canada' },
-    { value: 'Brazil' },
-    { value: 'Philippines' },
-    { value: 'A galaxy far far away, like really far away...' },
-  ]
-  return (
-    <>
-      <Filter
-          double
-          filters={{
-            'Full Name': 'John Wick',
-            'City': 'San Francisco',
-          }}
-          marginBottom="xl"
-          minWidth="375px"
-          onSortChange={SortingChangeCallback}
-          results={1}
-          sortOptions={{
-            popularity: 'Popularity',
-            // eslint-disable-next-line
-            manager_title: 'Manager\'s Title',
-            // eslint-disable-next-line
-            manager_name: 'Manager\'s Name',
-          }}
-          sortValue={[{ name: 'popularity', dir: 'desc' }]}
-          {...props}
-      >
-      {({ closePopover }) => (
-        <form>
-          <TextInput
-              label="Full Name"
-              placeholder="Enter name"
-              {...props}
-          />
-          <Select
-              blankSelection="Select One..."
-              label="Territory"
-              maxWidth="sm"
-              name="location"
-              options={options}
-              {...props}
-          />
-          <Flex
-              spacing="between"
-              {...props}
-          >
-            <Button
-                onClick={closePopover}
-                text="Apply"
-                {...props}
-            />
-            <Button
-                text="Clear"
-                variant="secondary"
-                {...props}
-            />
-          </Flex>
-        </form>
-      )}
-      </Filter>
-      <Filter
-          double
-          minWidth="375px"
-          onSortChange={SortingChangeCallback}
-          results={1}
-          sortOptions={{
-            popularity: 'Popularity',
-            // eslint-disable-next-line
-            manager_title: 'Manager\'s Title',
-            // eslint-disable-next-line
-            manager_name: 'Manager\'s Name',
-          }}
-          sortValue={[{ name: 'popularity', dir: 'desc' }]}
-          {...props}
-      >
-      {({ closePopover }) => (
-        <form>
-          <TextInput
-              label="Example Text Field"
-              placeholder="Enter Text"
-              {...props}
-          />
-          <Select
-              blankSelection="Select One..."
-              label="Example Collection Select"
-              name="Collection Select"
-              options={options}
-              {...props}
-          />
-          <Flex
-              spacing="between"
-              {...props}
-          >
-            <Button
-                onClick={closePopover}
-                text="Apply"
-                {...props}
-            />
-            <Button
-                text="Clear"
-                variant="secondary"
-                {...props}
-            />
-          </Flex>
-        </form>
-      )}
-      </Filter>
-    </>
-  )
-}
-export default FilterDefault

data/app/pb_kits/playbook/pb_filter/docs/_filter_max_width.html.erb DELETED Viewed

@@ -1,37 +0,0 @@
-<%=
-  pb_rails("filter", props: {
-    min_width: "360px",
-    id: "25",
-    position: "top",
-    filters: [
-      { name: "name", value: "John Wick" },
-      { name: "city", value: "San Francisco"}
-    ],
-    sort_menu: [
-      { item: "Popularity", link: "?q[sorts]=managers_popularity+asc", active: true, direction: "desc" },
-      { item: "Mananger's Title", link: "?q[sorts]=managers_title+asc", active: false },
-      { item: "Manager's Name", link: "?q[sorts]=managers_name+asc", active: false },
-    ],
-    template: "default",
-    results: 1,
-  }) do
-%>
-  <%
-   example_collection = [
-      OpenStruct.new(name: "USA", value: 1),
-      OpenStruct.new(name: "Canada", value: 2),
-      OpenStruct.new(name: "Brazil", value: 3),
-      OpenStruct.new(name: "Philippines", value: 4),
-      OpenStruct.new(name: "A galaxy far far away, like really far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far away...", value: 5)
-    ]
-  %>
-  <%= pb_rails("form", props: { form_system_options: { scope: :example, method: :get } }) do |form| %>
-    <%= form.text_field :example_text_field, props: { label: true } %>
-    <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: {max_width: "sm", label: true } %>
-    <%= form.actions do |action| %>
-      <%= action.submit props: { text: "Apply", data: { disable_with: "<i class='far fa-spinner fa-spin mr-3'></i>Searching...".html_safe },}%>
-      <%= action.button props: { type: "reset", text: "Clear", variant: "secondary" } %>
-    <% end %>
-  <% end %>
-<% end %>

data/app/pb_kits/playbook/pb_filter/docs/_filter_max_width.jsx DELETED Viewed

@@ -1,69 +0,0 @@
-import React from 'react'
-import { Button, Filter, Flex, Select } from '../../'
-const FilterMaxWidth = (props) => {
-  const options = [
-    { value: 'USA' },
-    { value: 'Canada' },
-    { value: 'Brazil' },
-    { value: 'Philippines' },
-    { value: 'A galaxy far far away, like really far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far away...' },
-  ]
-  return (
-    <Filter
-        {...props}
-        double
-        filters={{
-          'Full Name': 'John Wick',
-          'City': 'San Francisco',
-        }}
-        minWidth="360px"
-        results={1}
-        sortOptions={{
-          popularity: 'Popularity',
-          // eslint-disable-next-line
-          manager_title: 'Manager\'s Title',
-          // eslint-disable-next-line
-          manager_name: 'Manager\'s Name',
-        }}
-        sortValue={[{ name: 'popularity', dir: 'desc' }]}
-    >
-    {({ closePopover }) => (
-      <form>
-      <Select
-          blankSelection="Select One..."
-          label="Territory"
-          maxWidth="sm"
-          name="location"
-          options={options}
-      />
-        <Button
-            text="Apply"
-        />
-        <Select
-            blankSelection="Select One..."
-            label="Territory"
-            name="location"
-            options={options}
-        />
-        <Flex
-            spacing="between"
-        >
-          <Button
-              onClick={closePopover}
-              text="Apply"
-          />
-          <Button
-              text="Clear"
-              variant="secondary"
-          />
-        </Flex>
-      </form>
-    )}
-    </Filter>
-  )
-}
-export default FilterMaxWidth

data/app/pb_kits/playbook/pb_filter/docs/_filter_max_width.md DELETED Viewed

	@@ -1 +0,0 @@
1	- Filter can leverage the max-width property. Learn more in our <a href="https://playbook.powerapp.cloud/visual_guidelines" target="_blank">visual guidelines.</a>

data/app/pb_kits/playbook/pb_filter/docs/_filter_no_background.html.erb DELETED Viewed

@@ -1,76 +0,0 @@
-<%=
-  pb_rails("filter", props: {
-    min_width: "360px",
-    id: "3",
-    margin_bottom: "xl",
-    background: false,
-    filters: [
-      { name: "name", value: "John Wick" },
-      { name: "city", value: "Las Vegas"}
-    ],
-    sort_menu: [
-      { item: "Popularity", link: "?q[sorts]=managers_popularity+asc", active: true, direction: "desc" },
-      { item: "Mananger's Title", link: "?q[sorts]=managers_title+asc", active: false },
-      { item: "Manager's Name", link: "?q[sorts]=managers_name+asc", active: false },
-    ],
-    results: 3,
-    template: "single"
-  }) do
-%>
-  <%
-     example_collection = [
-      OpenStruct.new(name: "USA", value: 1),
-      OpenStruct.new(name: "Canada", value: 2),
-      OpenStruct.new(name: "Brazil", value: 3),
-      OpenStruct.new(name: "Philippines", value: 4),
-      OpenStruct.new(name: "A galaxy far far away...", value: 5)
-    ]
-  %>
-  <%= pb_rails("form", props: { form_system_options: { scope: :example, method: :get } }) do |form| %>
-    <%= form.text_field :example_text_field, props: { label: true } %>
-    <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true } %>
-    <%= form.actions do |action| %>
-      <%= action.submit props: { text: "Apply", data: { disable_with: "<i class='far fa-spinner fa-spin mr-3'></i>Searching...".html_safe },}%>
-      <%= action.button props: { type: "reset", text: "Clear", variant: "secondary" } %>
-    <% end %>
-  <% end %>
-<% end %>
-<%=
-  pb_rails("filter", props: {
-    min_width: "360px",
-    id: "4",
-    background: false,
-    filters: [
-      { name: "name", value: "John Wick" },
-      { name: "city", value: "Las Vegas"}
-    ],
-    sort_menu: [
-      { item: "Popularity", link: "?q[sorts]=managers_popularity+asc", active: true, direction: "desc" },
-      { item: "Mananger's Title", link: "?q[sorts]=managers_title+asc", active: false },
-      { item: "Manager's Name", link: "?q[sorts]=managers_name+asc", active: false },
-    ],
-    results: 3,
-  }) do
-%>
-  <%
-    example_collection = [
-      OpenStruct.new(name: "USA", value: 1),
-      OpenStruct.new(name: "Canada", value: 2),
-      OpenStruct.new(name: "Brazil", value: 3),
-      OpenStruct.new(name: "Philippines", value: 4),
-      OpenStruct.new(name: "A galaxy far far away...", value: 5)
-    ]
-  %>
-  <%= pb_rails("form", props: { form_system_options: { scope: :example, method: :get } }) do |form| %>
-    <%= form.text_field :example_text_field, props: { label: true } %>
-    <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true } %>
-    <%= form.actions do |action| %>
-      <%= action.submit props: { text: "Apply", data: { disable_with: "<i class='far fa-spinner fa-spin mr-3'></i>Searching...".html_safe },}%>
-      <%= action.button props: { type: "reset", text: "Clear", variant: "secondary" } %>
-    <% end %>
-  <% end %>
-<% end %>