RubyGems - playbook_ui - Versions diffs - 14.13.0.pre.rc.10 → 14.14.0.pre.alpha.PBNTR888selectvaliditymessage6348 - Mend

playbook_ui 14.13.0.pre.rc.10 → 14.14.0.pre.alpha.PBNTR888selectvaliditymessage6348

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (168) hide show

data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_react_hook.jsx ADDED Viewed

@@ -0,0 +1,69 @@
+import React, { useState } from "react"
+import { useForm } from "react-hook-form"
+import { Button, Checkbox, Flex, Body } from "playbook-ui"
+const CheckboxReactHook = () => {
+  const { register, handleSubmit } = useForm({
+    defaultValues: {
+      Small: false,
+      Medium: false,
+      Large: false,
+    },
+  })
+  const [submittedData, setSubmittedData] = useState({
+    Small: false,
+    Medium: false,
+    Large: false,
+  })
+  const onSubmit = (data) => {
+    setSubmittedData(data)
+  }
+  return (
+    <Flex orientation="row">
+      <Flex align="start"
+          orientation="column"
+          paddingRight="lg"
+      >
+        <form onSubmit={handleSubmit(onSubmit)}>
+          <Checkbox padding="xs"
+              text="Small"
+              {...register("Small")}
+          />
+          <br />
+          <Checkbox padding="xs"
+              text="Medium"
+              {...register("Medium")}
+          />
+          <br />
+          <Checkbox padding="xs"
+              text="Large"
+              {...register("Large")}
+          />
+          <br />
+          <Button htmlType="submit"
+              marginTop="sm"
+              text="submit"
+          />
+        </form>
+      </Flex>
+      <Flex align="start"
+          orientation="column"
+      >
+        <Body padding="xs"
+            text={`Small: ${submittedData.Small ? "true" : "false"}`}
+        />
+        <Body padding="xs"
+            text={`Medium: ${submittedData.Medium ? "true" : "false"}`}
+        />
+        <Body padding="xs"
+            text={`Large: ${submittedData.Large ? "true" : "false"}`}
+        />
+      </Flex>
+    </Flex>
+  )
+}
+export default CheckboxReactHook

data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_react_hook.md ADDED Viewed

	@@ -0,0 +1 @@
1	+ You can pass react hook props to the checkbox kit.

data/app/pb_kits/playbook/pb_checkbox/docs/example.yml CHANGED Viewed

@@ -11,6 +11,7 @@ examples:
   react:
   - checkbox_default: Default
   - checkbox_checked: Load as checked
+  - checkbox_react_hook: React Hook Form
   - checkbox_custom: Custom Checkbox
   - checkbox_error: Default w/ Error
   - checkbox_indeterminate: Indeterminate Checkbox
@@ -21,4 +22,4 @@ examples:
     - checkbox_error_swift: Default w/ Error
     - checkbox_indeterminate_swift: Indeterminate Checkbox
     - checkbox_props_swift: ""

data/app/pb_kits/playbook/pb_checkbox/docs/index.js CHANGED Viewed

@@ -1,5 +1,6 @@
 export { default as CheckboxDefault } from './_checkbox_default.jsx'
 export { default as CheckboxCustom } from './_checkbox_custom.jsx'
+export { default as CheckboxReactHook } from './_checkbox_react_hook.jsx'
 export { default as CheckboxError } from './_checkbox_error.jsx'
 export { default as CheckboxChecked } from './_checkbox_checked.jsx'
 export { default as CheckboxIndeterminate } from './_checkbox_indeterminate.jsx'

data/app/pb_kits/playbook/pb_currency/_currency.tsx CHANGED Viewed

@@ -21,6 +21,7 @@ type CurrencyProps = {
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
   label?: string,
+  nullDisplay?: string,
   size?: 'sm' | 'md' | 'lg',
   symbol?: string,
   variant?: 'default' | 'light' | 'bold',
@@ -49,6 +50,7 @@ const Currency = (props: CurrencyProps): React.ReactElement => {
     unit,
     className,
     label = '',
+    nullDisplay = '',
     size = 'sm',
     symbol = '$',
     variant = 'default',
@@ -118,44 +120,57 @@ const Currency = (props: CurrencyProps): React.ReactElement => {
         id={id}
     >
       <Caption dark={dark}>{label}</Caption>
       <div className={`pb_currency_wrapper${variantClass || emphasizedClass}`}>
         {unstyled ? (
-          <>
-            <div>{handleNegative}{symbol}</div>
-            <div>{getAmount}</div>
-            <div>
-              {getAbbreviation}
-              {unit ? unit : getDecimalValue}
-            </div>
-          </>
+          nullDisplay && !amount ? (
+            <div>{nullDisplay}</div>
+          ) : (
+            <>
+              <div>{handleNegative}{symbol}</div>
+              <div>{getAmount}</div>
+              <div>
+                {getAbbreviation}
+                {unit ? unit : getDecimalValue}
+              </div>
+            </>
+          )
         ) : (
-          <>
-            <Body
-                className="dollar_sign"
-                color="light"
-                dark={dark}
-            >
-              {handleNegative}{symbol}
-            </Body>
+          nullDisplay && !amount ? (
             <Title
                 className="pb_currency_value"
                 dark={dark}
                 size={sizes[size]}
-            >
-              {getAmount}
-            </Title>
-            <Body
-                className="unit"
-                color="light"
-                dark={dark}
-            >
-              {getAbbreviation}
-              {unit ? unit : getDecimalValue}
-            </Body>
-          </>
+          >
+            {nullDisplay}
+          </Title>
+          ) : (
+            <>
+              <Body
+                  className="dollar_sign"
+                  color="light"
+                  dark={dark}
+              >
+                {handleNegative}{symbol}
+              </Body>
+              <Title
+                  className="pb_currency_value"
+                  dark={dark}
+                  size={sizes[size]}
+              >
+                {getAmount}
+              </Title>
+              <Body
+                  className="unit"
+                  color="light"
+                  dark={dark}
+              >
+                {getAbbreviation}
+                {unit ? unit : getDecimalValue}
+              </Body>
+            </>
+          )
         )}
       </div>
     </div>

data/app/pb_kits/playbook/pb_currency/currency.html.erb CHANGED Viewed

@@ -1,17 +1,24 @@
 <%= pb_content_tag do %>
   <%= pb_rails("caption", props: object.caption_props) %>
   <div class=<%= "pb_currency_wrapper#{object.variant_class || object.emphasized_class}" %>>
     <% if object.unstyled %>
-      <div><%= object.negative_sign %><%= object.symbol %></div>
-      <div><%= object.title_props[:text] %></div>
-      <div><%= object.body_props[:text] %></div>
+      <% if object.null_display && object.amount.blank? %>
+        <div><%= object.null_display %></div>
+      <% else %>
+        <div><%= object.negative_sign %><%= object.symbol %></div>
+        <div><%= object.title_props[:text] %></div>
+        <div><%= object.body_props[:text] %></div>
+      <% end %>
     <% else %>
-      <%= pb_rails("body", props: object.currency_wrapper_props) do %>
-        <%= object.negative_sign %><%= object.symbol %>
+     <% if object.null_display && object.amount.blank? %>
+        <%= pb_rails("title", props: object.title_props) %>
+      <% else %>
+        <%= pb_rails("body", props: object.currency_wrapper_props) do %>
+          <%= object.negative_sign %><%= object.symbol %>
+        <% end %>
+          <%= pb_rails("title", props: object.title_props) %>
+          <%= pb_rails("body", props: object.body_props) %>
       <% end %>
-      <%= pb_rails("title", props: object.title_props) %>
-      <%= pb_rails("body", props: object.body_props) %>
     <% end %>
   </div>
 <% end %>

data/app/pb_kits/playbook/pb_currency/currency.rb CHANGED Viewed

@@ -46,6 +46,9 @@ module Playbook
       prop :comma_separator, type: Playbook::Props::Boolean,
                              default: false
+      prop :null_display, type: Playbook::Props::String,
+                          required: false
       def classname
         generate_classname("pb_currency_kit", align, size, dark_class)
       end
@@ -65,10 +68,20 @@ module Playbook
         }
       end
+      def title_text
+        if null_display
+          null_display
+        elsif swap_negative
+          absolute_amount(abbr_or_format_amount)
+        else
+          abbr_or_format_amount
+        end
+      end
       def title_props
         {
           size: size_value,
-          text: swap_negative ? absolute_amount(abbr_or_format_amount) : abbr_or_format_amount,
+          text: title_text,
           classname: "pb_currency_value",
           dark: dark,
         }
@@ -145,8 +158,10 @@ module Playbook
           1
         when "md"
           3
-        else
+        when "sm"
           4
+        else
+          3
         end
       end

data/app/pb_kits/playbook/pb_currency/docs/_currency_null_display.html.erb ADDED Viewed

@@ -0,0 +1,22 @@
+<%= pb_rails("currency", props: {
+    amount: "",
+    label: "Nil",
+    margin_bottom: "md",
+    null_display: "--",
+    size: "sm"
+}) %>
+<%= pb_rails("currency", props: {
+    amount: "",
+    label: "Nil",
+    margin_bottom: "md",
+    null_display: "$0.00",
+    size: "sm"
+}) %>
+<%= pb_rails("currency", props: {
+    amount: "",
+    label: "Nil",
+    null_display: " ",
+    size: "sm"
+}) %>

data/app/pb_kits/playbook/pb_currency/docs/_currency_null_display.jsx ADDED Viewed

@@ -0,0 +1,34 @@
+import React from 'react'
+import { Currency } from 'playbook-ui'
+const CurrencyNullDisplay = (props) => {
+  return (
+    <>
+      <Currency
+          amount=""
+          label="Null"
+          marginBottom="md"
+          nullDisplay="--"
+          {...props}
+      />
+      <Currency
+          amount=""
+          label="Null"
+          marginBottom="md"
+          nullDisplay="$0.00"
+          {...props}
+      />
+      <Currency
+          amount=""
+          label="Null"
+          marginBottom="md"
+          nullDisplay=" "
+          {...props}
+      />
+    </>
+  )
+}
+export default CurrencyNullDisplay

data/app/pb_kits/playbook/pb_currency/docs/_currency_null_display_rails.md ADDED Viewed

	@@ -0,0 +1 @@
1	+ To customize how the `amount` field appears when it is empty, use the `null_display` prop and set it to the desired value you want to display.

data/app/pb_kits/playbook/pb_currency/docs/_currency_null_display_react.md ADDED Viewed

	@@ -0,0 +1 @@
1	+ To customize how the `amount` field appears when it is empty, use the `nullDisplay` prop and set it to the desired value you want to display.

data/app/pb_kits/playbook/pb_currency/docs/example.yml CHANGED Viewed

@@ -10,6 +10,7 @@ examples:
   - currency_unstyled: Unstyled
   - currency_comma_separator: Comma Separator
   - currency_negative: Negative
+  - currency_null_display: Null Display
   react:
   - currency_variants: Variants
@@ -21,6 +22,7 @@ examples:
   - currency_unstyled: Unstyled
   - currency_comma_separator: Comma Separator
   - currency_negative: Negative
+  - currency_null_display: Null Display
   swift:
   - currency_size_swift: Size

data/app/pb_kits/playbook/pb_currency/docs/index.js CHANGED Viewed

@@ -6,4 +6,5 @@ export { default as CurrencyAbbreviated } from './_currency_abbreviated.jsx'
 export { default as CurrencyMatchingDecimals } from './_currency_matching_decimals.jsx'
 export { default as CurrencyUnstyled } from './_currency_unstyled.jsx'
 export { default as CurrencyCommaSeparator } from './_currency_comma_separator.jsx'
-export { default as CurrencyNegative } from './_currency_negative.jsx'
+export { default as CurrencyNegative } from './_currency_negative.jsx'
+export { default as CurrencyNullDisplay } from './_currency_null_display.jsx'

data/app/pb_kits/playbook/pb_date_picker/_date_picker.tsx CHANGED Viewed

@@ -29,6 +29,7 @@ type DatePickerProps = {
   hideLabel?: boolean,
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
+  initializeOnce?: boolean,
   inLine?: boolean,
   inputAria?: { [key: string]: string },
   inputData?: { [key: string]: string },
@@ -73,6 +74,7 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
     hideLabel = false,
     htmlOptions = {},
     id,
+    initializeOnce = false,
     inLine = false,
     inputAria = {},
     inputData = {},
@@ -134,7 +136,7 @@ useEffect(() => {
     yearRange,
     required: false,
   }, scrollContainer)
-})
+}, initializeOnce ? [] : undefined)
   const filteredProps = {...props}
   if (filteredProps.marginBottom === undefined) {
     filteredProps.marginBottom = "sm"

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers_rails.html.erb ADDED Viewed

@@ -0,0 +1,99 @@
+<% containers = [
+  "To Do",
+  "In Progress",
+  "Done"
+] %>
+<% items_data = [
+  {
+    id: "11",
+    container: "To Do",
+    title: "Task 1",
+    description: "Bug fixes",
+    assignee_name: "Terry Miles",
+    assignee_img: "https://randomuser.me/api/portraits/men/44.jpg",
+  },
+  {
+    id: "12",
+    container: "To Do",
+    title: "Task 2",
+    description: "Documentation",
+    assignee_name: "Sophia Miles",
+    assignee_img: "https://randomuser.me/api/portraits/women/8.jpg",
+  },
+  {
+    id: "13",
+    container: "In Progress",
+    title: "Task 3",
+    description: "Add a variant",
+    assignee_name: "Alice Jones",
+    assignee_img: "https://randomuser.me/api/portraits/women/10.jpg",
+  },
+  {
+    id: "14",
+    container: "To Do",
+    title: "Task 4",
+    description: "Add jest tests",
+    assignee_name: "Mike James",
+    assignee_img: "https://randomuser.me/api/portraits/men/8.jpg",
+  },
+  {
+    id: "15",
+    container: "Done",
+    title: "Task 5",
+    description: "Alpha testing",
+    assignee_name: "James Guy",
+    assignee_img: "https://randomuser.me/api/portraits/men/18.jpg",
+  },
+  {
+    id: "16",
+    container: "In Progress",
+    title: "Task 6",
+    description: "Release",
+    assignee_name: "Sally Jones",
+    assignee_img: "https://randomuser.me/api/portraits/women/28.jpg",
+  },
+] %>
+<%= pb_rails("draggable", props: { initial_items: items_data }) do %>
+  <%= pb_rails("flex", props: { justify_content: "center" }) do %>
+    <% containers.each do |container| %>
+      <%= pb_rails("draggable/draggable_container", props: {
+          container: container,
+          width: "xs",
+          padding: "sm",
+          data: { container: container }
+      }) do %>
+        <%= pb_rails("caption", props: { text_align: "center" }) do %><%= container %><% end %>
+        <%= pb_rails("flex", props: {align_items: "stretch", orientation: "column"}) do %>
+          <% items_data.select { |item| item[:container] == container }.each do |item| %>
+            <%= pb_rails("draggable/draggable_item", props: {
+                container: container,
+                drag_id: item[:id]
+            }) do %>
+              <%= pb_rails("card", props: { margin_bottom: "sm", padding: "sm"}) do %>
+                <%= pb_rails("flex", props: { justify: "between" }) do %>
+                  <%= pb_rails("flex/flex_item") do %>
+                    <%= pb_rails("flex") do %>
+                      <%= pb_rails("avatar", props: {
+                          image_url: item[:assignee_img],
+                          name: item[:assignee_name],
+                          size: "xxs"
+                      }) %>
+                      <%= pb_rails("title", props: {
+                          padding_left: "xs",
+                          size: 4,
+                          text: item[:title]
+                      }) %>
+                    <% end %>
+                  <% end %>
+                <% end %>
+                <%= pb_rails("body", props: { padding_top: "xs", text: item[:description] }) %>
+              <% end %>
+            <% end %>
+          <% end %>
+        <% end %>
+      <% end %>
+    <% end %>
+  <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers_rails.md ADDED Viewed

	@@ -0,0 +1 @@
1	+ The Draggable kit can also be used to achieve more complex, multiple container functionality as shown here. This complex usage requires the full subcomponent structure.

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_table.html.erb ADDED Viewed

@@ -0,0 +1,61 @@
+<% initial_items = [
+  {
+    id: "1",
+    title: "Task 1",
+    assignee_name: "Terry Miles",
+    assignee_img: "https://randomuser.me/api/portraits/men/44.jpg",
+  },
+  {
+    id: "2",
+    title: "Task 2",
+    assignee_name: "Sophia Miles",
+    assignee_img: "https://randomuser.me/api/portraits/women/8.jpg",
+  },
+  {
+    id: "3",
+    title: "Task 3",
+    assignee_name: "Alice Jones",
+    assignee_img: "https://randomuser.me/api/portraits/women/10.jpg",
+  },
+  {
+    id: "4",
+    title: "Task 4",
+    assignee_name: "Mike James",
+    assignee_img: "https://randomuser.me/api/portraits/men/8.jpg",
+  },
+  {
+    id: "5",
+    title: "Task 5",
+    assignee_name: "James Guy",
+    assignee_img: "https://randomuser.me/api/portraits/men/18.jpg",
+  }
+] %>
+<%= pb_rails("draggable", props: {initial_items: initial_items}) do %>
+  <%= pb_rails("table", props: { size: "sm", responsive:"none" }) do %>
+    <%= pb_rails("table/table_head") do %>
+      <%= pb_rails("table/table_row") do %>
+        <%= pb_rails("table/table_header", props: { text: "id"}) %>
+        <%= pb_rails("table/table_header", props: { text: "name"}) %>
+        <%= pb_rails("table/table_header", props: { text: "task number"}) %>
+      <% end %>
+    <% end %>
+    <%= pb_rails("table/table_body", props: {draggable_container: true}) do %>
+      <% initial_items.each do |item| %>
+        <%= pb_rails("table/table_row", props:{drag_id: item[:id], draggable_item: true}) do %>
+          <%= pb_rails("table/table_cell", props: { text: item[:id]}) %>
+          <%= pb_rails("table/table_cell") do %>
+            <%= pb_rails("flex", props:{align:"center"}) do %>
+              <%= pb_rails("avatar", props: {size: "xs", image_url: item[:assignee_img]}) %>
+              <%= pb_rails("body", props: {text: item[:assignee_name], padding_left:"sm"}) %>
+            <% end %>
+          <% end %>
+          <%= pb_rails("table/table_cell", props: { text: item[:title]}) %>
+        <% end %>
+      <% end %>
+    <% end %>
+  <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_table.md ADDED Viewed

@@ -0,0 +1,4 @@
+The draggable kit can also be used in conjunction with the table kit to create draggable table rows. To do this:
+- use the `draggable_container` prop on the table/table_body to designate it as the Draggable Container
+- use the `draggable_item` prop on the table/table_row to designate it as the Draggable Item. Make sure to also pass id to the `drag_id` prop here.

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_table_react.jsx ADDED Viewed

@@ -0,0 +1,90 @@
+import React, { useState } from "react";
+import { Flex, Table, Body, Avatar, DraggableProvider } from "playbook-ui";
+// Initial items to be dragged
+const data = [
+    {
+        id: "1",
+        task: "Task 1",
+        assignee_name: "Terry Miles",
+        assignee_img: "https://randomuser.me/api/portraits/men/44.jpg",
+      },
+      {
+        id: "2",
+        task: "Task 2",
+        assignee_name: "Sophia Miles",
+        assignee_img: "https://randomuser.me/api/portraits/women/8.jpg",
+      },
+      {
+        id: "3",
+        task: "Task 3",
+        assignee_name: "Alice Jones",
+        assignee_img: "https://randomuser.me/api/portraits/women/10.jpg",
+      },
+      {
+        id: "4",
+        task: "Task 4",
+        assignee_name: "Mike James",
+        assignee_img: "https://randomuser.me/api/portraits/men/8.jpg",
+      },
+      {
+        id: "5",
+        task: "Task 5",
+        assignee_name: "James Guy",
+        assignee_img: "https://randomuser.me/api/portraits/men/18.jpg",
+      }
+];
+const DraggableWithTableReact = (props) => {
+  const [initialState, setInitialState] = useState(data);
+  return (
+    <>
+    <DraggableProvider initialItems={data}
+        onReorder={(items) => setInitialState(items)}
+    >
+        <Table
+            responsive="none"
+            size="sm"
+            {...props}
+        >
+          <Table.Head>
+            <Table.Row>
+              <Table.Header>{"id"}</Table.Header>
+              <Table.Header>{"name"}</Table.Header>
+              <Table.Header>{"task number"}</Table.Header>
+            </Table.Row>
+          </Table.Head>
+          <Table.Body draggableContainer>
+            {initialState.map(({ id, task, assignee_name, assignee_img }) => (
+              <Table.Row
+                  dragId={id}
+                  draggableItem
+                  key={id}
+              >
+                <Table.Cell>{id}</Table.Cell>
+                <Table.Cell>
+                  <Flex align="center">
+                    <Avatar
+                        imageUrl={assignee_img}
+                        size="xs"
+                    />
+                    <Body
+                        paddingLeft="xxs"
+                        text={assignee_name}
+                        {...props}
+                    />
+                  </Flex>
+                </Table.Cell>
+                <Table.Cell>{task}</Table.Cell>
+              </Table.Row>
+            ))}
+          </Table.Body>
+        </Table>
+    </DraggableProvider>
+    </>
+  );
+};
+export default DraggableWithTableReact;

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_table_react.md ADDED Viewed

@@ -0,0 +1,5 @@
+The draggable kit can also be used in conjunction with the table kit to create draggable table rows. To do this:
+- Wrap the Table with the `DraggableProvider` and manage state as shown.
+- use the `draggableContainer` prop on the Table.Body to designate it as the Draggable Container
+- use the `draggableItem` prop on the Table.Row to designate it as the Draggable Item. Make sure to also pass id to the `dragId` prop here.