RubyGems - playbook_ui - Versions diffs - 14.13.0 → 14.14.0.pre.alpha.pbntr500currencykithandlingofnullvalues6311 - Mend

playbook_ui 14.13.0 → 14.14.0.pre.alpha.pbntr500currencykithandlingofnullvalues6311

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 (138) hide show

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/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_with_table.html.erb CHANGED Viewed

@@ -43,9 +43,9 @@
       <% end %>
     <% end %>
-    <%= pb_rails("draggable/draggable_container", props: {tag:"tbody"}) do %>
+    <%= pb_rails("table/table_body", props: {draggable_container: true}) do %>
       <% initial_items.each do |item| %>
-        <%= pb_rails("draggable/draggable_item", props:{drag_id: item[:id], tag:"tr"}) do %>
+        <%= 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 %>

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

@@ -1 +1,4 @@
-The draggable kit can also be used in conjunction with the table kit to create draggable table rows. To do this, make use of the `tag` prop on the draggable_container to set it to 'tbody' and the same prop on the draggable_item to set that to 'tr'. This will create the functionality seen here.
+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.

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

@@ -4,7 +4,9 @@ examples:
   - draggable_with_list: Draggable with List Kit
   - draggable_with_selectable_list: Draggable with SelectableList Kit
   - draggable_with_cards: Draggable with Cards
+  - draggable_with_table_react: Draggable with Table
   - draggable_multiple_containers: Dragging Across Multiple Containers
   rails:
   - draggable_default_rails: Default
   - draggable_with_list_rails: Draggable with List Kit

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

@@ -2,4 +2,5 @@ export { default as DraggableDefault } from './_draggable_default.jsx'
 export { default as DraggableWithCards } from './_draggable_with_cards.jsx'
 export { default as DraggableWithList } from './_draggable_with_list.jsx'
 export { default as DraggableWithSelectableList } from './_draggable_with_selectable_list.jsx'
-export { default as DraggableMultipleContainers } from './_draggable_multiple_containers.jsx'
+export { default as DraggableMultipleContainers } from './_draggable_multiple_containers.jsx'
+export { default as DraggableWithTableReact } from './_draggable_with_table_react.jsx'

data/app/pb_kits/playbook/pb_draggable/subcomponents/DraggableContainer.tsx CHANGED Viewed

@@ -17,10 +17,11 @@ type DraggableContainerProps = {
   data?: { [key: string]: string };
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string;
+  tag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'div' | 'tr' | 'th' | 'td' | 'thead' | 'col' | 'tbody',
 };
 const DraggableContainer = (props: DraggableContainerProps) => {
-  const { aria = {}, children, className, container, data = {}, htmlOptions = {}, id } = props;
+  const { aria = {}, children, className, container, data = {}, htmlOptions = {}, id, tag="div" } = props;
   const { handleDragOver, handleDrop, activeContainer } = DraggableContext();
@@ -28,6 +29,8 @@ const DraggableContainer = (props: DraggableContainerProps) => {
   const dataProps = buildDataProps(data);
   const htmlProps = buildHtmlProps(htmlOptions);
+  const Tag: React.ReactElement | any = `${tag}`;
   const classes = classnames(
     buildCss("pb_draggable_container"),
     `${activeContainer === container ? "active" : ""}`,
@@ -36,18 +39,18 @@ const DraggableContainer = (props: DraggableContainerProps) => {
   );
   return (
-    <div
+    <Tag
         {...ariaProps}
         {...dataProps}
         {...htmlProps}
         className={classes}
         id={id}
         key={container}
-        onDragOver={(e) => handleDragOver(e, container)}
+        onDragOver={(e: Event) => handleDragOver(e, container)}
         onDrop={() => handleDrop(container)}
     >
       {children}
-    </div>
+    </Tag>
   );
 };

data/app/pb_kits/playbook/pb_draggable/subcomponents/DraggableItem.tsx CHANGED Viewed

@@ -18,10 +18,11 @@ type DraggableItemProps = {
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string;
   dragId?: string;
+  tag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'div' | 'tr' | 'th' | 'td' | 'thead' | 'col' | 'tbody',
 };
 const DraggableItem = (props: DraggableItemProps) => {
-  const { aria = {}, children, className, container, data = {}, htmlOptions = {},  id, dragId } = props;
+  const { aria = {}, children, className, container, data = {}, htmlOptions = {},  id, dragId, tag="div" } = props;
   const { isDragging, handleDragStart, handleDragEnter, handleDragEnd } =
     DraggableContext();
@@ -30,6 +31,8 @@ const DraggableItem = (props: DraggableItemProps) => {
   const dataProps = buildDataProps(data);
   const htmlProps = buildHtmlProps(htmlOptions);
+  const Tag: React.ReactElement | any = `${tag}`;
   const classes = classnames(
     buildCss("pb_draggable_item"),
     `${isDragging === dragId ? "is_dragging" : ""}`,
@@ -38,7 +41,7 @@ const DraggableItem = (props: DraggableItemProps) => {
   );
   return (
-    <div
+    <Tag
         {...ariaProps}
         {...dataProps}
         {...htmlProps}
@@ -51,7 +54,7 @@ const DraggableItem = (props: DraggableItemProps) => {
         onDragStart={() => handleDragStart(dragId, container)}
     >
       {children}
-    </div>
+    </Tag>
   );
 };

data/app/pb_kits/playbook/pb_form/docs/_form_form_with.html.erb CHANGED Viewed

@@ -46,6 +46,7 @@
   %>
   <%= form.date_picker :example_date_picker_1, props: { label: true } %>
   <%= form.star_rating_field :example_star_rating, props: { variant: "interactive", label: true } %>
+  <%= form.time_zone_select_field :example_time_zone_select, ActiveSupport::TimeZone.us_zones, { default: "Eastern Time (US & Canada)" }, props: { label: true } %>
   <%= form.actions do |action| %>
     <%= action.submit %>

data/app/pb_kits/playbook/pb_form/docs/_form_form_with_validate.html.erb CHANGED Viewed

@@ -37,6 +37,7 @@
   <%= form.check_box :example_checkbox, props: { text: "Example Checkbox", label: true, required: true } %>
   <%= form.date_picker :example_date_picker_2, props: { label: true, required: true } %>
   <%= form.star_rating_field :example_star_rating_validation, props: { variant: "interactive", label: true, required: true } %>
+  <%= form.time_zone_select_field :example_time_zone_select, ActiveSupport::TimeZone.us_zones, { default: "Eastern Time (US & Canada)" }, props: { label: true, blank_selection: "Select a Time Zone...", required: true } %>
   <%= form.actions do |action| %>
     <%= action.submit %>

data/app/pb_kits/playbook/pb_icon_button/_icon_button.tsx ADDED Viewed

@@ -0,0 +1,71 @@
+import React from 'react'
+import classnames from 'classnames'
+import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
+import { globalProps } from '../utilities/globalProps'
+import Button from '../pb_button/_button'
+import Icon from '../pb_icon/_icon'
+import { IconSizes } from "../pb_icon/_icon"
+type IconButtonProps = {
+  aria?: { [key: string]: string },
+  className?: string,
+  data?: { [key: string]: string },
+  htmlType?: 'submit' | 'reset' | 'button' | undefined,
+  icon?: string,
+  id?: string,
+  link?: string,
+  newWindow?: boolean,
+  size?: IconSizes,
+  target?: string,
+  variant?: 'default' | 'link',
+}
+const IconButton = (props: IconButtonProps) => {
+  const {
+    aria = {},
+    className,
+    data = {},
+    htmlType = 'button',
+    icon = 'bars',
+    id,
+    link,
+    newWindow = false,
+    size = "2x",
+    target,
+    variant = "default",
+  } = props
+  const ariaProps = buildAriaProps(aria)
+  const dataProps = buildDataProps(data)
+  const classes = classnames(buildCss('pb_icon_button_kit', variant), globalProps(props), className)
+  return (
+    <div
+        {...ariaProps}
+        {...dataProps}
+        className={classes}
+        id={id}
+    >
+      <Button
+          borderRadius="lg"
+          htmlType={htmlType}
+          link={link}
+          newWindow={newWindow}
+          target={target}
+      >
+        <Icon
+            className="icon_button_icon"
+            fixedWidth
+            icon={icon}
+            paddingX="xxs"
+            paddingY="xs"
+            size={size}
+        />
+      </Button>
+    </div>
+  )
+}
+export default IconButton

data/app/pb_kits/playbook/pb_icon_button/docs/_icon_button_default.html.erb CHANGED Viewed

@@ -1,3 +1,2 @@
 <%= pb_rails("icon_button") %>
-</br>
-<%= pb_rails("icon_button", props: {variant: "link"}) %>
+<%= pb_rails("icon_button", props: {variant: "link", margin_top: "md" }) %>

data/app/pb_kits/playbook/pb_icon_button/docs/_icon_button_default.jsx ADDED Viewed

@@ -0,0 +1,17 @@
+import React from 'react'
+import { IconButton } from 'playbook-ui'
+const IconButtonDefault = (props) => (
+  <div>
+    <IconButton
+        {...props}
+    />
+    <IconButton
+        {...props}
+        marginTop="md"
+        variant="link"
+    />
+  </div>
+)
+export default IconButtonDefault

data/app/pb_kits/playbook/pb_icon_button/docs/_icon_button_sizes.html.erb ADDED Viewed

@@ -0,0 +1,27 @@
+<%= pb_rails("flex", props: { align: "center"}) do %>
+  <%= pb_rails("icon_button", props: {size: "lg"}) %> <span>Large</span>
+<% end %>
+<%= pb_rails("flex", props: { align: "center" }) do %>
+  <%= pb_rails("icon_button", props: {size: "sm"}) %> <span>Small</span>
+<% end %>
+<%= pb_rails("flex", props: { align: "center" }) do %>
+  <%= pb_rails("icon_button", props: {size: "xs"}) %> <span>XSmall</span>
+<% end %>
+<%= pb_rails("flex", props: { align: "center", margin_top: "md" }) do %>
+  <%= pb_rails("icon_button", props: {size: "1x"}) %> <span>1x</span>
+<% end %>
+<%= pb_rails("flex", props: { align: "center" }) do %>
+  <%= pb_rails("icon_button", props: {size: "2x"}) %> <span>2x</span>
+<% end %>
+<%= pb_rails("flex", props: { align: "center" }) do %>
+  <%= pb_rails("icon_button", props: {size: "3x"}) %> <span>3x</span>
+<% end %>
+<%= pb_rails("flex", props: { align: "center" }) do %>
+  <%= pb_rails("icon_button", props: {size: "4x"}) %> <span>4x</span>
+<% end %>