playbook_ui 14.8.0.pre.rc.5 → 14.8.0.pre.rc.7

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 8af7fb78b456740d828272224ea20658cd7b15a6bd564b38ed4b3d46081e7616
-  data.tar.gz: fb77b67764cb414eed88eea74b1af9a811526b9950d86d59fca06ab8e601bb14
+  metadata.gz: b3dbd9296a8be2f574f6e9440274153cc9ace32a999bfa3200748cba88320b46
+  data.tar.gz: 56c5789d71eb070fb99d82af6988bac827be6fbffe3f8c57f2be4d9f6f162231
 SHA512:
-  metadata.gz: f686b855c98185a49feae8305793bb632c5abb7289b6d9b3f63263abe36469c1ce1f2f6a06e749750b42bc33f9361986730983ddcf0bcb675ccbc54c42260ffc
-  data.tar.gz: 28d6880206326fdb1b290ba613317d8c86797053a97694a32ca3d6c60708a0c6d1190d3b96c5051c0ee9aeab3ef2a8e1fe5f44fec39b50a3a6e7a46aef944c37
+  metadata.gz: 589bec2f46576e48bd1a896d14fb883dbbc53ceaa247c9872b844232ace0d469625589d66fb5c880c4e7552c14e7fa6d9db5d161bcbfb2e29b8a7b9391eaf31c
+  data.tar.gz: 338073e12c672f9004ad556052be2c8fb1242ca9a0faad46f3360518691b0958ae5cb156ebe72f18c42b52cf3457d8934a81fa07386df8c348c1b91e2fd42c00

data/app/pb_kits/playbook/pb_date_picker/date_picker_helper.ts

@@ -143,7 +143,7 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
 
     } else if (selectionType === "quickpick") {
       //------- QUICKPICK VARIANT PLUGIN -------------//
-      pluginList.push(quickPickPlugin(thisRangesEndToday, customQuickPickDates))
+      pluginList.push(quickPickPlugin(thisRangesEndToday, customQuickPickDates, defaultDate as string))
     }
 
     // time selection

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_default_date.html.erb

@@ -0,0 +1,42 @@
+<%= pb_rails("date_picker", props: {
+  allow_input: true,
+  default_date: "This month",
+  end_date_id: "quick-pick-end-date",
+  end_date_name: "quick-pick-end-date",
+  mode: "range",
+  picker_id: "quick-pick-default-date",
+  placeholder: "mm/dd/yyyy to mm/dd/yyyy",
+  selection_type: "quickpick",
+  start_date_id: "quick-pick-start-date",
+  start_date_name: "quick-pick-start-date"
+}) %>
+
+<%= pb_rails("date_picker", props: {
+  allow_input: true,
+  custom_quick_pick_dates: {
+    dates: [
+      {
+        label: "Last 15 months",
+        value: {
+          timePeriod: "months",
+          amount: 15,
+        },
+      },
+      {
+        label: "First Week of June 2022",
+        value: ["06/01/2022", "06/07/2022"],
+      },
+    ],
+  },
+  default_date: "First Week of June 2022",
+  end_date_id: "quick-pick-end-date",
+  end_date_name: "quick-pick-end-date",
+  label: "Custom Date Picker",
+  mode: "range",
+  picker_id: "custom-quick-pick-default-date",
+  placeholder: "mm/dd/yyyy to mm/dd/yyyy",
+  selection_type: "quickpick",
+  start_date_id: "quick-pick-start-date",
+  start_date_name: "quick-pick-start-date"
+}) %>
+

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_default_date.jsx

@@ -0,0 +1,44 @@
+import React from "react"
+import DatePicker from "../_date_picker"
+
+const DatePickerQuickPickDefaultDate = (props) => (
+    <>
+        <DatePicker
+            allowInput
+            defaultDate="This month"
+            mode="range"
+            pickerId="quick-pick-default-date"
+            placeholder="mm/dd/yyyy to mm/dd/yyyy"
+            selectionType="quickpick"
+            {...props}
+        />
+
+        <DatePicker
+            allowInput
+            customQuickPickDates={{
+                dates: [
+                    {
+                        label: "Last 15 months",
+                        value: {
+                            timePeriod: "months",
+                            amount: 15,
+                        },
+                    },
+                    {
+                        label: "First Week of June 2022",
+                        value: ["06/01/2022", "06/07/2022"],
+                    },
+                ],
+            }}
+            defaultDate="First Week of June 2022"
+            label="Custom Date Picker"
+            mode="range"
+            pickerId="custom-quick-pick-default-date"
+            placeholder="mm/dd/yyyy to mm/dd/yyyy"
+            selectionType="quickpick"
+            {...props}
+        />
+    </>
+)
+
+export default DatePickerQuickPickDefaultDate

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_default_date.md

@@ -0,0 +1 @@
+To set a default value using Quick Pick, use the `defaultDate` or `default_date` prop. This prop should match one of the labels displayed in the UI of the dropdown menu.

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

@@ -12,6 +12,7 @@ examples:
   - date_picker_quick_pick_range_limit: Range (Quick Pick w/ “This” Range limit)
   - date_picker_quick_pick_custom: Custom Quick Pick Dates
   - date_picker_quick_pick_custom_override: Custom Quick Pick Dates (append to defaults)
+  - date_picker_quick_pick_default_date: Range (Quick Pick w/ Default Date)
   - date_picker_format: Format
   - date_picker_disabled: Disabled Dates
   - date_picker_min_max: Min Max
@@ -42,6 +43,7 @@ examples:
   - date_picker_quick_pick_range_limit: Range (Quick Pick w/ “This” Range limit)
   - date_picker_quick_pick_custom: Custom Quick Pick Dates
   - date_picker_quick_pick_custom_override: Custom Quick Pick Dates (append to defaults)
+  - date_picker_quick_pick_default_date: Range (Quick Pick w/ Default Date)
   - date_picker_format: Format
   - date_picker_disabled: Disabled Dates
   - date_picker_min_max: Min Max

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

@@ -25,3 +25,4 @@ export { default as DatePickerQuickPickRangeLimit } from './_date_picker_quick_p
 export { default as DatePickerOnClose } from './_date_picker_on_close.jsx'
 export { default as DatePickerQuickPickCustom } from './_date_picker_quick_pick_custom'
 export { default as DatePickerQuickPickCustomOverride } from './_date_picker_quick_pick_custom_override'
+export { default as DatePickerQuickPickDefaultDate } from './_date_picker_quick_pick_default_date'

data/app/pb_kits/playbook/pb_date_picker/plugins/quickPick.tsx

@@ -26,7 +26,7 @@ type customQuickPickDatesType = {
 
 let activeLabel = ""
 
-const quickPickPlugin = (thisRangesEndToday: boolean, customQuickPickDates: customQuickPickDatesType | undefined) => {
+const quickPickPlugin = (thisRangesEndToday: boolean, customQuickPickDates: customQuickPickDatesType | undefined, defaultDate: string) => {
   return function (fp: FpTypes & any): any {
     const today = new Date()
     const yesterday = DateTime.getYesterdayDate(new Date())
@@ -185,6 +185,8 @@ const quickPickPlugin = (thisRangesEndToday: boolean, customQuickPickDates: cust
     return {
       // onReady is a hook from flatpickr that runs when calendar is in a ready state
       onReady(selectedDates: Array<Date>) {
+        let defaultDateRange
+
         // loop through the ranges and create an anchor tag for each range and add an event listener to set the date when user clicks on a date range
         for (const [label, range] of Object.entries(pluginData.ranges)) {
           addRangeButton(label).addEventListener('click', function () {
@@ -201,6 +203,14 @@ const quickPickPlugin = (thisRangesEndToday: boolean, customQuickPickDates: cust
               fp.close();
             }
           });
+
+          // check if there is a default date and set the default date range and label for quick pick
+          if (defaultDate) {
+            if (label.toLowerCase() === defaultDate.toLowerCase()) {
+              activeLabel = label
+              defaultDateRange = range
+            }
+          }
         }
         // conditional to check if there is a dropdown to add it to the calendar container and get it the classes it needs
         if (pluginData.rangesNav.children.length > 0) {
@@ -216,6 +226,12 @@ const quickPickPlugin = (thisRangesEndToday: boolean, customQuickPickDates: cust
           // function to give the active button the active class
           selectActiveRangeButton(selectedDates);
         }
+
+        // set the default date range if there is one and select the active button
+        if (defaultDateRange) {
+          fp.setDate(defaultDateRange, false);
+          selectActiveRangeButton(defaultDateRange);
+        }
       },
       onValueUpdate(selectedDates: Array<Date>) {
         selectActiveRangeButton(selectedDates)

data/app/pb_kits/playbook/utilities/_hover.scss

@@ -21,34 +21,47 @@
 }
 
 @mixin hover-color-classes($colors-list) {
-  @each $name, $color in $colors-list {
-    .hover_background_#{"" + $name}:hover,
-    .group_hover:hover .group_hover.hover_background_#{"" + $name} {
-      background-color: $color !important;
-      transition: background-color $transition-speed ease;
-    }
-    .hover_color_#{"" + $name}:hover,
-    .group_hover:hover .group_hover.hover_color_#{"" + $name} {
-      color: $color !important;
-      transition: color $transition-speed ease;
+    @each $name, $color in $colors-list {
+      .hover_background-#{"" + $name}:hover {
+        background-color: $color !important;
+        transition: background-color $transition-speed ease;
+      }
+      .hover_color-#{"" + $name}:hover {
+        color: $color !important;
+        transition: color $transition-speed ease;
+      }
     }
   }
+  
+  @include hover-scale-classes($scales);
+  @include hover-shadow-classes($box_shadows);
+  @include hover-color-classes($product_colors);
+  @include hover-color-classes($status_colors);
+  @include hover-color-classes($data_colors);
+  @include hover-color-classes($shadow_colors);
+  @include hover-color-classes($colors);
+  @include hover-color-classes($interface_colors);
+  @include hover-color-classes($main_colors);
+  @include hover-color-classes($background_colors);
+  @include hover-color-classes($card_colors);
+  @include hover-color-classes($active_colors);
+  @include hover-color-classes($action_colors);
+  @include hover-color-classes($hover_colors);
+  @include hover-color-classes($border_colors);
+  @include hover-color-classes($text_colors);
+  @include hover-color-classes($category_colors);
+
+.hover_visibility {
+  opacity: 0;
+  transition: opacity $transition-speed ease;
+
+  &:hover {
+    opacity: 1;
+  }
 }
 
-@include hover-scale-classes($scales);
-@include hover-shadow-classes($box_shadows);
-@include hover-color-classes($product_colors);
-@include hover-color-classes($status_colors);
-@include hover-color-classes($data_colors);
-@include hover-color-classes($shadow_colors);
-@include hover-color-classes($colors);
-@include hover-color-classes($interface_colors);
-@include hover-color-classes($main_colors);
-@include hover-color-classes($background_colors);
-@include hover-color-classes($card_colors);
-@include hover-color-classes($active_colors);
-@include hover-color-classes($action_colors);
-@include hover-color-classes($hover_colors);
-@include hover-color-classes($border_colors);
-@include hover-color-classes($text_colors);
-@include hover-color-classes($category_colors);
+.group_hover:hover {
+  .group_hover.hover_visibility {
+    opacity: 1;
+  }
+}

data/app/pb_kits/playbook/utilities/globalProps.ts

@@ -63,7 +63,8 @@ type FlexWrap = {
 type Hover = Shadow & {
   background?: string,
   color?: string,
-  scale?: "sm" | "md" | "lg"
+  scale?: "sm" | "md" | "lg",
+  visibility?: boolean,
 }
 
 type GroupHover  = {
@@ -230,9 +231,10 @@ const PROP_CATEGORIES: {[key:string]: (props: {[key: string]: any}) => string} =
       let css = '';
       if (!hover) return css;
       css += hover.shadow ? `hover_shadow_${hover.shadow} ` : '';
-      css += hover.background ? `hover_background_${hover.background } ` : '';
+      css += hover.background ? `hover_background-${hover.background } ` : '';
       css += hover.scale ? `hover_scale_${hover.scale} ` : '';
-      css += hover.color ? `hover_color_${hover.color } ` : '';
+      css += hover.color ? `hover_color-${hover.color } ` : '';
+      css += hover.visibility ? `hover_visibility` : '';
       return css;
   },
 

data/app/pb_kits/playbook/utilities/test/globalProps/hover.test.js

@@ -0,0 +1,79 @@
+import React from 'react';
+import { render, screen } from '../../test-utils';
+import Body from '../../../pb_body/_body';
+
+const testSubject = 'body';
+
+test('Hover Props: returns proper class name', () => {
+  const testIdColor = `${testSubject}-hover-color-red`;
+  render(
+    <Body
+        data={{ testid: testIdColor }}
+        hover={{ color: 'red' }}
+        text="Hi"
+    />
+  );
+
+  let kit = screen.getByTestId(testIdColor);
+  let expectedClassName = `hover_color-red`;
+  expect(kit).toHaveClass(expectedClassName);
+
+  const testIdBackground = `${testSubject}-hover-background-blue`;
+  render(
+    <Body
+        data={{ testid: testIdBackground }}
+        hover={{ background: 'blue' }}
+        text="Hi"
+    />
+  );
+
+  kit = screen.getByTestId(testIdBackground);
+  expectedClassName = `hover_background-blue`;
+  expect(kit).toHaveClass(expectedClassName);
+
+  const testIdShadow = `${testSubject}-hover-shadow-deep`;
+  render(
+    <Body
+        data={{ testid: testIdShadow }}
+        hover={{ shadow: 'deep' }}
+        text="Hi"
+    />
+  );
+
+  kit = screen.getByTestId(testIdShadow);
+  expectedClassName = `hover_shadow_deep`;
+  expect(kit).toHaveClass(expectedClassName);
+
+  const testIdScale = `${testSubject}-hover-scale`;
+  render(
+    <Body
+        data={{ testid: testIdScale }}
+        hover={{ scale: 'xl' }}
+        text="Test"
+    />
+  );
+
+  kit = screen.getByTestId(testIdScale);
+  expectedClassName = `hover_scale_xl`;
+  expect(kit).toHaveClass(expectedClassName);
+
+  const testIdMultiple = `${testSubject}-hover-multiple`;
+  render(
+    <Body
+        data={{ testid: testIdMultiple }}
+        hover={{
+        color: 'green',
+        background: 'error',
+        shadow: 'deeper',
+        scale: 'xl',
+      }}
+        text="Hi"
+    />
+  );
+
+  kit = screen.getByTestId(testIdMultiple);
+  expect(kit).toHaveClass('hover_color-green');
+  expect(kit).toHaveClass('hover_background-error');
+  expect(kit).toHaveClass('hover_shadow_deeper');
+  expect(kit).toHaveClass('hover_scale_xl');
+});