playbook_ui 12.19.0 → 12.20.0.pre.alpha.movemarkdown668

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

@@ -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

@@ -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

@@ -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

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

@@ -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 %>

data/app/pb_kits/playbook/pb_filter/docs/_filter_no_background.jsx

@@ -1,126 +0,0 @@
-import React from 'react'
-import { Button, Filter, Flex, Select, TextInput } from '../../'
-
-const FilterNoBackground = (props) => {
-  const options = [
-    { value: 'USA' },
-    { value: 'Canada' },
-    { value: 'Brazil' },
-    { value: 'Philippines' },
-    { value: 'A galaxy far far away...' },
-  ]
-  return (
-    <>
-      <Filter
-          background={false}
-          filters={{
-          'Full Name': 'John Wick',
-          'City': 'Las Vegas',
-        }}
-          marginBottom="xl"
-          minWidth="360px"
-          results={3}
-          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"
-              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
-          background={false}
-          double
-          filters={{
-          'Full Name': 'John Wick',
-          'City': 'Las Vegas',
-        }}
-          minWidth="360px"
-          results={3}
-          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"
-              name="location"
-              options={options}
-              {...props}
-          />
-          <Flex
-              spacing="between"
-              {...props}
-          >
-            <Button
-                onClick={closePopover}
-                text="Apply"
-                {...props}
-            />
-            <Button
-                text="Clear"
-                variant="secondary"
-                {...props}
-            />
-          </Flex>
-        </form>
-      )}
-      </Filter>
-    </>
-  )
-}
-
-export default FilterNoBackground

data/app/pb_kits/playbook/pb_filter/docs/_filter_no_background.md

@@ -1 +0,0 @@
-To remove the background from a filter, add the prop `background` with a value of `false`.

data/app/pb_kits/playbook/pb_filter/docs/_filter_no_sort.html.erb

@@ -1,31 +0,0 @@
-<%=
-  pb_rails("filter", props: {
-    min_width: "360px",
-    id: "nosort",
-    filters: [
-      { name: "name", value: "John Wick" }
-    ],
-    results: 546,
-    template: "filter_only",
-  }) 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_no_sort.jsx

@@ -1,59 +0,0 @@
-import React from 'react'
-import { Button, Filter, Flex, Select, TextInput } from '../../'
-
-const FilterNoSort = (props) => {
-  const options = [
-    { value: 'USA' },
-    { value: 'Canada' },
-    { value: 'Brazil' },
-    { value: 'Philippines' },
-    { value: 'A galaxy far far away...' },
-  ]
-  return (
-    <Filter
-        filters={{
-          'Full Name': 'John Wick',
-        }}
-        minWidth="360px"
-        results={546}
-        sortValue={[{ name: 'popularity', dir: 'desc' }]}
-        {...props}
-    >
-    {({ closePopover }) => (
-      <form>
-        <TextInput
-            label="Full Name"
-            placeholder="Enter name"
-            {...props}
-        />
-
-        <Select
-            blankSelection="Select One..."
-            label="Territory"
-            name="location"
-            options={options}
-            {...props}
-        />
-        <Flex
-            spacing="between"
-            {...props}
-        >
-          <Button
-              onClick={closePopover}
-              text="Apply"
-              {...props}
-          />
-          <Button
-              text="Clear"
-              variant="secondary"
-              {...props}
-          />
-        </Flex>
-      </form>
-    )}
-    
-    </Filter>
-  )
-}
-
-export default FilterNoSort

data/app/pb_kits/playbook/pb_filter/docs/_filter_no_sort.md

@@ -1 +0,0 @@
-To display results, use templates `single` or `default`. 

data/app/pb_kits/playbook/pb_filter/docs/_filter_only.html.erb

@@ -1,29 +0,0 @@
-<%=
-  pb_rails("filter", props: {
-    min_width: "360px",
-    id: "fo",
-    filters: [
-      { name: "name", value: "John Wick" }
-    ],
-    template:"filter_only",
-  }) 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_only.jsx

@@ -1,56 +0,0 @@
-import React from 'react'
-import { Button, Filter, Flex, Select, TextInput } from '../../'
-
-const FilterOnly = (props) => {
-  const options = [
-    { value: 'USA' },
-    { value: 'Canada' },
-    { value: 'Brazil' },
-    { value: 'Philippines' },
-    { value: 'A galaxy far far away...' },
-  ]
-  return (
-    <Filter
-        filters={{ 'Full Name': 'John Wick' }}
-        minWidth="360px"
-        {...props}
-    >
-    {({ closePopover }) => (
-      <form>
-
-        <TextInput
-            label="Full Name"
-            placeholder="Enter name"
-            {...props}
-        />
-
-        <Select
-            blankSelection="Select One..."
-            label="Territory"
-            name="location"
-            options={options}
-            {...props}
-        />
-        <Flex
-            spacing="between"
-            {...props}
-        >
-          <Button
-              onClick={closePopover}
-              text="Apply"
-              {...props}
-          />
-          <Button
-              text="Clear"
-              variant="secondary"
-              {...props}
-          />
-        </Flex>
-      </form>
-    )}
-
-    </Filter>
-  )
-}
-
-export default FilterOnly

data/app/pb_kits/playbook/pb_filter/docs/_filter_placement.html.erb

@@ -1,30 +0,0 @@
-<%=
-  pb_rails("filter", props: {
-    min_width: "360px",
-    id: "pla",
-    filters: [
-      { name: "name", value: "John Wick" }
-    ],
-    placement: "right",
-    template:"filter_only",
-  }) 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 %>