playbook_ui 13.7.0.pre.alpha.play978makehighchartsadevdependencypoc1223 → 13.8.0.pre.alpha.PLAY962SingleSelect1246

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 3af73a271b14120c123a4d4e31f6b89a82d00a40bdff0e18a614f98713f513da
-  data.tar.gz: 5ae66cfb76da4695f1c782453139f09730b2f5cfb8a8f8713fa0c3b81aa2ce8a
+  metadata.gz: 91dabc0c37f4b0d7c83e0c9728a4db6d2eb34fe92c387934cab037fd18025e2a
+  data.tar.gz: ab8ea303f33c2cc6e47d9af314ccf15e41fad54fdfa1e743a00cd1ec5b3e41f5
 SHA512:
-  metadata.gz: ee3cbba5e1bd7ec6d247d90775f5c231f2523e6ad7b685be4fcca0413b802df399e1dacabf4953cc4b5e505e3a82e7bdf98ce8a0f3e4f23a4d6c8c1e222f2c70
-  data.tar.gz: 22cd11e1fc810be00b8bce763c90fa22502475b9ed0ed120b53e0b15c6862ce71cc77b79042490950a87c567d95864d559cc16be5995adf89dca617206e66555
+  metadata.gz: dd3547fb3e5ec0242dd18e1ad45c4bbf075adc932f33befa20f5cb6874b63bd90df323661d58330a55ea0f6e4d03460c9d8ac888c5e887cb28cef8c66f208289
+  data.tar.gz: 44206940d57a0f6dd4d875dac195ade688a6aaff286ae489f9e6ee70987355410a8d397d66f3d06237adb5b49df2e9965a72f63c2245ab78c5b94692e8703f81

data/app/pb_kits/playbook/pb_currency/_currency.scss

@@ -1,4 +1,3 @@
-
 [class^=pb_currency_kit] {
   &[class*=_center]  {
     & > [class^=pb_caption],
@@ -21,30 +20,43 @@
       justify-content: flex-end;
     }
   }
+
   [class^=pb_currency_wrapper] {
     display: flex;
     align-items: baseline;
 
-    &[class*=_deemphasized] [class^=pb_body_kit][class*=_light] {
-      color: $text_lt_default;
-    }
+    &[class*=_deemphasized] {
+      [class^=pb_body_kit], [class^=pb_body_kit] {
+        &:not([class*=dark]) {
+          color: $text_lt_default;
+        }
+      }
 
-    &[class*=_deemphasized] [class^=pb_title_kit][class*=_4] {
-      font-weight: $regular;
-    }
+      [class^=pb_body_kit][class*=_light] {
+        font-weight: $regular;
+      }
 
-    &[class*=_light] [class^=pb_body_kit][class*=_light] {
-      color: $text_lt_light;
+      [class^=pb_title_kit] {
+        font-weight: $lighter;
+      }
     }
 
-    &[class*=_light] [class^=pb_title_kit][class*=_4] {
-      color: $text_lt_light;
-      font-weight: $regular;
+    &[class*=_light] {
+      [class^=pb_body_kit], [class^=pb_title_kit] {
+        color: $text_lt_light;
+        font-weight: $regular;
+      }
+
+      [class^=pb_title_kit].dark {
+        color: $text_dk_light;
+      }
     }
 
-    &[class*=_bold] [class^=pb_body_kit][class*=_light] {
-      color: $text_lt_default;
-      font-weight: $bolder;
+    &[class*=_bold] {
+      [class^=pb_body_kit], [class^=_light]{
+        color: $text_lt_default;
+        font-weight: $bolder;
+      }
     }
 
     & > [class*=dollar_sign] {
@@ -57,6 +69,14 @@
     }
   }
 
+  &[class*=_sm] {
+    [class^=pb_currency_wrapper][class*=_deemphasized] {
+      [class^=pb_title_kit] {
+        font-weight: $regular;
+      }
+    }
+  }
+
   &[class*=_lg] [class^=pb_currency_wrapper] [class*=pb_currency_value] {
     line-height: .9;
     padding-left: $space_xs - 7px;

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

@@ -24,6 +24,7 @@ type CurrencyProps = {
   symbol?: string,
   variant?: 'default' | 'light' | 'bold',
   unit?: string,
+  unstyled?: boolean,
 }
 
 const sizes: {lg: 1, md: 3, sm: 4} = {
@@ -49,17 +50,16 @@ const Currency = (props: CurrencyProps) => {
     symbol = '$',
     variant = 'default',
     dark = false,
+    unstyled = false,
   } = props
 
   const emphasizedClass = emphasized ? '' : '_deemphasized'
 
   let variantClass
-  if (size === 'sm') {
-    if (variant === 'light') {
-      variantClass = '_light'
-    } else if (variant === 'bold') {
-      variantClass = '_bold'
-    }
+  if (variant === 'light') {
+    variantClass = '_light'
+  } else if (variant === 'bold') {
+    variantClass = '_bold'
   }
 
   const [whole, decimal = '00'] = amount.split('.')
@@ -99,44 +99,46 @@ const Currency = (props: CurrencyProps) => {
         className={classes}
         id={id}
     >
-      <Caption>{label}</Caption>
+      <Caption dark={dark}>{label}</Caption>
 
       <div className={`pb_currency_wrapper${variantClass || emphasizedClass}`}>
-        <Body
-            className="dollar_sign"
-            color="light"
-            dark={dark}
-        >
-          {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>
+        {unstyled ? (
+          <>
+            <div>{symbol}</div>
+            <div>{getAmount}</div>
+            <div>
+              {getAbbreviation}
+              {unit ? unit : getDecimalValue}
+            </div>
+          </>
+        ) : (
+          <>
+            <Body
+                className="dollar_sign"
+                color="light"
+                dark={dark}
+            >
+              {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

@@ -3,13 +3,19 @@
     id: object.id,
     data: object.data,
     class: object.classname) do %>
-  <%= pb_rails("caption", props: { text: object.label }) %>
+  <%= pb_rails("caption", props: object.caption_props) %>
 
   <div class=<%= "pb_currency_wrapper#{object.variant_class || object.emphasized_class}" %>>
-    <%= pb_rails("body", props: object.currency_wrapper_props) do %>
-      <%= object.symbol %>
+    <% if object.unstyled %>
+      <div><%= object.symbol %></div>
+      <div><%= object.title_props[:text] %></div>
+      <div><%= object.body_props[:text] %></div>
+    <% else %>
+      <%= pb_rails("body", props: object.currency_wrapper_props) do %>
+        <%= 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) %>
   </div>
 <% end %>

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

@@ -40,6 +40,9 @@ module Playbook
                       values: %w[default matching],
                       default: "default"
 
+      prop :unstyled, type: Playbook::Props::Boolean,
+                      default: false
+
       def classname
         generate_classname("pb_currency_kit", align, size, dark_class)
       end
@@ -52,6 +55,13 @@ module Playbook
         }
       end
 
+      def caption_props
+        {
+          text: label,
+          dark: dark,
+        }
+      end
+
       def title_props
         {
           size: size_value,
@@ -75,8 +85,6 @@ module Playbook
       end
 
       def variant_class
-        return unless size == "sm"
-
         case variant
         when "light"
           "_light"

data/app/pb_kits/playbook/pb_currency/docs/_currency_unstyled.html.erb

@@ -0,0 +1,14 @@
+<%= pb_rails("currency", props: {
+  amount: "2,000.50",
+  label: "Basic unstyled example",
+  margin_bottom: "md",
+  unstyled: true
+}) %>
+
+<%= pb_rails("title", props: { size: 1 }) do %>
+  <%= pb_rails("currency", props: {
+    amount: "2,000.50",
+    label: "Example with wrapping typography kit",
+    unstyled: true
+  }) %>
+<% end %>

data/app/pb_kits/playbook/pb_currency/docs/_currency_unstyled.jsx

@@ -0,0 +1,30 @@
+import React from 'react'
+import { Currency, Title } from '../..'
+
+const CurrencyUnstyled = (props) => {
+  return (
+    <>
+      <Currency
+          amount="2,000.50"
+          label="Basic unstyled example"
+          marginBottom="md"
+          unstyled
+          {...props}
+      />
+
+      <Title
+          size={1}
+          {...props}
+      >
+        <Currency
+            amount="2,000.50"
+            label="Example with wrapping typography kit"
+            unstyled
+            {...props}
+        />
+      </Title>
+    </>
+  )
+}
+
+export default CurrencyUnstyled

data/app/pb_kits/playbook/pb_currency/docs/_currency_unstyled.md

@@ -0,0 +1 @@
+For alternative typography styles, you can pass a boolean prop called `unstyled` to the `Currency` kit and wrap it in any of our typography kits (`Title`, `Body`, `Caption`, etc.). This will allow the `Currency` kit to inherit any of our typography styles.

data/app/pb_kits/playbook/pb_currency/docs/_currency_variants.html.erb

@@ -13,12 +13,13 @@
   size: "sm",
   symbol: "€",
   variant: "light",
+  emphasized: false,
 }) %>
 
 <%= pb_rails("currency", props: {
   amount: "45",
   label: "Bold",
-  size: "lg",
+  size: "sm",
   unit: "/mo",
   variant: "bold",
 }) %>

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

@@ -7,6 +7,7 @@ examples:
   - currency_no_symbol: No Symbol
   - currency_abbreviated: Abbreviate Larger Amounts
   - currency_matching_decimals: Matching Decimals
+  - currency_unstyled: Unstyled
 
   react:
   - currency_variants: Variants
@@ -15,3 +16,4 @@ examples:
   - currency_no_symbol: No Symbol
   - currency_abbreviated: Abbreviate Larger Amounts
   - currency_matching_decimals: Matching Decimals
+  - currency_unstyled: Unstyled

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

@@ -4,3 +4,4 @@ export { default as CurrencyAlignment } from './_currency_alignment.jsx'
 export { default as CurrencyNoSymbol } from './_currency_no_symbol.jsx'
 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'

data/app/pb_kits/playbook/pb_multi_level_select/_helper_functions.tsx

@@ -1,22 +1,9 @@
-//function to retrieve all ancestors of unchecked item and set checked to false
-export const getAncestorsOfUnchecked = (
-  data: { [key: string]: any }[],
-  item: { [key: string]: any }
-) => {
-  if (item.parent_id) {
-    const ancestor = filterFormattedDataById(data, item.parent_id);
-    ancestor[0].checked = false;
-    ancestor[0].parent_id && getAncestorsOfUnchecked(data, ancestor[0]);
-  }
-  return data;
-};
-
-//function is going over formattedData and returning all objects that match the
-//id of the clicked item from the dropdown
+// Function is going over formattedData and returning all objects that match the
+// ID of the clicked item from the dropdown
 export const filterFormattedDataById = (
   formattedData: { [key: string]: any }[],
   id: string
-) => {
+): { [key: string]: any }[] => {
   const matched: { [key: string]: any }[] = [];
   const recursiveSearch = (data: { [key: string]: any }[], term: string) => {
     for (const item of data) {
@@ -38,7 +25,7 @@ export const filterFormattedDataById = (
 export const findByFilter = (
   formattedData: { [key: string]: any }[],
   searchTerm: string
-) => {
+): { [key: string]: any }[] => {
   const matchedItems: { [key: string]: any }[] = [];
   const recursiveSearch = (data: { [key: string]: any }[], term: string) => {
     for (const item of data) {
@@ -56,7 +43,20 @@ export const findByFilter = (
   return matchedItems;
 };
 
-//function to get all items with checked = true
+// Function to retrieve all ancestors of unchecked item and set checked to false
+export const getAncestorsOfUnchecked = (
+  data: { [key: string]: any }[],
+  item: { [key: string]: any }
+): { [key: string]: any }[] => {
+  if (item.parent_id) {
+    const ancestor = filterFormattedDataById(data, item.parent_id);
+    ancestor[0].checked = false;
+    ancestor[0].parent_id && getAncestorsOfUnchecked(data, ancestor[0]);
+  }
+  return data;
+};
+
+// Function to get all items with checked = true
 export const getCheckedItems = (
   data: { [key: string]: any }[]
 ): { [key: string]: any }[] => {
@@ -76,7 +76,9 @@ export const getCheckedItems = (
   return checkedItems;
 };
 
-export const getDefaultCheckedItems = (treeData: { [key: string]: any }[]) => {
+export const getDefaultCheckedItems = (
+  treeData: { [key: string]: any }[]
+): { [key: string]: any }[] => {
   const checkedDefault: { [key: string]: any }[] = [];
 
   const traverseTree = (items: { [key: string]: any }[]) => {
@@ -118,7 +120,7 @@ export const getDefaultCheckedItems = (treeData: { [key: string]: any }[]) => {
 export const recursiveCheckParent = (
   item: { [key: string]: any },
   data: any
-) => {
+): any => {
   if (item.parent_id !== null) {
     const parent = filterFormattedDataById(data, item.parent_id);
     const allChildrenChecked = parent[0].children.every(
@@ -135,8 +137,11 @@ export const recursiveCheckParent = (
   return data;
 };
 
-export const getExpandedItems = (treeData: { [key: string]: string }[], selectedIds: string[]) => {
-  let expandedItems: any[] = [];
+export const getExpandedItems = (
+  treeData: { [key: string]: string }[],
+  selectedIds: string[]
+): any[] => {
+  const expandedItems: any[] = [];
 
   const traverse = (items: string | any[], ancestors: any[] = []) => {
     for (let i = 0; i < items.length; i++) {

data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.scss

@@ -30,10 +30,11 @@
       align-items: center;
       justify-content: space-between;
       .input_inner_container {
-        max-width: 90%;
+        width: 100%;
       }
 
       input {
+        width: 100%;
         border: none;
         font-family: $font_family_base;
         font-size: $font_base;