playbook_ui_docs 13.18.0.pre.alpha.PLAY12062192 → 13.18.0.pre.alpha.PLAY12062203

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 282babae1b361a1572df69a54ab33c78e1c33b4152bd6feec0f8acec50362ccb
-  data.tar.gz: 467673e3ddeaf1532efe503a3735c5d938a4ad4c2af24134fd583c3110c06466
+  metadata.gz: 6815f1ff6f1e550f6dd10ff48a61ebf4d1a0e0ddcfacb1d5708ab48c17c016a7
+  data.tar.gz: f092b19e75db534e84dc616516ea28bd4e22919daaf6c6d91bdf20d8bdfe7d23
 SHA512:
-  metadata.gz: 5e5c0e6789a69a3c9fcd179b16a7dc28682e47cd89d0b3f4c9d24e605c3c88bd890f2a567176d970168b2f61dfa4fe4d8fa3b22134a0b1e06210bed3a12ea034
-  data.tar.gz: 2ea1b333489f9505d609bdbab52609277a6777c1a2e2e8ecf771ade1aa09555c560ea60b47df3ab5e80bf6c1924dbb3206e61af13cc2b961e5c91fbc55caf073
+  metadata.gz: a89548d368d9ca5abbf5e9c5aaca40a32d6395da3a46b6fe0aa443a024313666efac130cd3cba0184199cb6d878c657886ade1cabe2ea5b1dba8126f65c3ca93
+  data.tar.gz: 4ed7fea4ebcf03eb3f6ba3c2e597c0f4bac5dbb31244796f653e2766742cdf207d632d68f0f76c01ef1160ba678ddb555ebe263a60cd78fdc95353b84f2ca0e5

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

@@ -0,0 +1,42 @@
+<%=
+  pb_rails("filter", props: {
+    max_height: "360px",
+    id: "filter_max_height_rails",
+    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.text_field :example_text_field, props: { label: true } %>
+    <%= form.text_field :example_text_field, props: { label: true } %>
+    <%= form.text_field :example_text_field, props: { label: true } %>
+    <%= form.text_field :example_text_field, props: { label: true } %>
+    <%= 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_height.jsx

@@ -0,0 +1,83 @@
+import React from 'react'
+import { Button, Filter, Flex, Select, TextInput } from '../..'
+
+const FilterMaxHeight = (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',
+        }}
+        maxHeight="360px"
+        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"
+            name="location"
+            options={options}
+        />
+        <TextInput
+            label="First Name"
+            placeholder="Enter name"
+            {...props}
+        />
+        <TextInput
+            label="Middle Name"
+            placeholder="Enter name"
+            {...props}
+        />
+        <TextInput
+            label="Last Name"
+            placeholder="Enter name"
+            {...props}
+        />
+        <TextInput
+            label="Email"
+            placeholder="Enter email"
+            {...props}
+        />
+        <TextInput
+            label="Address"
+            placeholder="Enter address"
+            {...props}
+        />
+        <Flex
+            spacing="between"
+        >
+          <Button
+              onClick={closePopover}
+              text="Apply"
+          />
+          <Button
+              text="Clear"
+              variant="secondary"
+          />
+        </Flex>
+      </form>
+    )}
+    </Filter>
+  )
+}
+
+export default FilterMaxHeight

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

@@ -8,6 +8,7 @@ examples:
   - filter_only: Filter Only
   - sort_only: Sort Only
   - filter_max_width: Max Width for Popover Inside of Filter
+  - filter_max_height: Max Height for Popover Inside of Filter
   - filter_placement: Filter Placement
 
   react:
@@ -18,4 +19,5 @@ examples:
   - filter_only: Filter Only
   - sort_only: Sort Only
   - filter_max_width: Max Width for Popover Inside of Filter
+  - filter_max_height: Max Height for Popover Inside of Filter
   - filter_placement: Filter Placement

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

@@ -5,4 +5,5 @@ export { default as FilterNoBackground } from './_filter_no_background.jsx'
 export { default as FilterOnly } from './_filter_only.jsx'
 export { default as SortOnly } from './_sort_only.jsx'
 export { default as FilterMaxWidth } from './_filter_max_width.jsx'
+export { default as FilterMaxHeight } from './_filter_max_height.jsx'
 export { default as FilterPlacement } from './_filter_placement.jsx'