playbook_ui 12.31.0.pre.alpha.datepickerdisableddatefix931 → 12.31.0.pre.alpha.hoverrails948

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 654d556d34f5a4d85545aff221a0ad40d54b0f09c6f5a26d74dbd99b346ce57d
-  data.tar.gz: 3ae3d76e2d79224c105d7b8c53c7f7c9033cda03505d55cc4222262926e9a580
+  metadata.gz: 254f8095f89f90a26b48bf1de3f6ebe8457f324bfaf89d2c0a44921b3dae9b0f
+  data.tar.gz: b1980a1c1d435f4b34c7e4ba81ae9eecdb2b7afea98b71e00f3cace1e2d0375d
 SHA512:
-  metadata.gz: 1e0ed9fa251b5130bcdfc146ea0e1144b2273424c5f8171fc12b573ada98fbf2ca743d7467602d6d904b65c16fb8976ed51133461bb6497cff4dc038823100b4
-  data.tar.gz: a8dcf56f0adeed47b1e403318feec0a711f9d45dbc6617e26bdb19533fe055552a61bfeb05663141b49d28810f12f3e62397f8177ffa07e6510533a5972f1b5b
+  metadata.gz: ef083fc09e3d71541460a673a3aa189d079cb856e617e1d8d2d38240e1dcfa9155f85563eb0fb26f778497211671ff439ea1f9132233a8487b28cd0cd0d75d73
+  data.tar.gz: ea8fde568dad79fd58c452af6850c7fed616b8fe339a71ccbe60cd2e0aee0ecd225e347469242a73878dde5a327120f2080bbc670394934b9078aa3f30f5c392

data/app/pb_kits/playbook/pb_button/docs/_button_hover.html.erb

@@ -0,0 +1,3 @@
+<%= pb_rails("button", props: { hover: { shadow: "deep"}, text: "Shadow Deep", margin_right: "lg" }) %>
+<%= pb_rails("button", props: { hover: { shadow: "deeper"}, text: "Shadow Deeper", margin_right: "lg" }) %>
+<%= pb_rails("button", props: { hover: { shadow: "deepest"}, text: "Shadow Deepest", margin_right: "lg" }) %>

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

@@ -1,15 +1,15 @@
 examples:
   rails:
   - button_default: Button Variants
-  - button_full_width: Button Full Width
-  - button_link: Button Links
-  - button_loading: Button Loading
-  - button_block_content: Button Block Content
-  - button_icon_options: Button Icon Options
-  - button_accessibility: Button Accessibility Options
-  - button_options: Button Additional Options
-  - button_size: Button Size
-  - button_form: Button Form Attribute
+  # - button_full_width: Button Full Width
+  # - button_link: Button Links
+  # - button_loading: Button Loading
+  # - button_block_content: Button Block Content
+  # - button_icon_options: Button Icon Options
+  # - button_accessibility: Button Accessibility Options
+  # - button_options: Button Additional Options
+  # - button_size: Button Size
+  # - button_form: Button Form Attribute
   react:
   - button_default: Button Variants
   - button_full_width: Button Full Width

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

@@ -71,42 +71,13 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
     }
   }
   const disabledParser = () => {
-    const disabledArray=[]
-     
-    disableDate && disableDate.length > 0 && disabledArray.push(...disableDate)
-    disableRange && disableRange.length > 0 && disabledArray.push(...disableRange)
-    disableWeekdays && disableWeekdays.length > 0 && disabledArray.push(...disabledWeekDays())
-
-    return disabledArray
-  }
-
-  const disabledWeekDays = () => {
-    return (
-      [
-        (date:any) => {
-          const weekdayObj: {
-            [day: string]: number
-          } = {
-            Sunday: 0,
-            Monday: 1,
-            Tuesday: 2,
-            Wednesday: 3,
-            Thursday: 4,
-            Friday: 5,
-            Saturday: 6,
-          }
-          return (
-            date.getDay() === weekdayObj[disableWeekdays[0]] ||
-            date.getDay() === weekdayObj[disableWeekdays[1]] ||
-            date.getDay() === weekdayObj[disableWeekdays[2]] ||
-            date.getDay() === weekdayObj[disableWeekdays[3]] ||
-            date.getDay() === weekdayObj[disableWeekdays[4]] ||
-            date.getDay() === weekdayObj[disableWeekdays[5]] ||
-            date.getDay() === weekdayObj[disableWeekdays[6]]
-          )
-        },
-      ]
-    )
+    if (disableDate && disableDate.length > 0) {
+      return disableDate
+    } else if (disableRange && disableRange.length > 0) {
+      return disableRange
+    } else {
+      return []
+    }
   }
   const calendarResizer = () => {
     const cal = document.querySelector(`#cal-${pickerId}.open`) as HTMLElement
@@ -156,7 +127,30 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
     disableMobile: true,
     dateFormat: getDateFormat(),
     defaultDate: defaultDateGetter(),
-    disable: disabledParser(),
+    disable: disableWeekdays && disableWeekdays.length > 0 ? [
+      (date) => {
+        const weekdayObj: {
+          [day: string]: number
+        } = {
+          Sunday: 0,
+          Monday: 1,
+          Tuesday: 2,
+          Wednesday: 3,
+          Thursday: 4,
+          Friday: 5,
+          Saturday: 6,
+        }
+        return (
+          date.getDay() === weekdayObj[disableWeekdays[0]] ||
+          date.getDay() === weekdayObj[disableWeekdays[1]] ||
+          date.getDay() === weekdayObj[disableWeekdays[2]] ||
+          date.getDay() === weekdayObj[disableWeekdays[3]] ||
+          date.getDay() === weekdayObj[disableWeekdays[4]] ||
+          date.getDay() === weekdayObj[disableWeekdays[5]] ||
+          date.getDay() === weekdayObj[disableWeekdays[6]]
+        )
+      },
+    ] : disabledParser(),
     enableTime,
     locale: {
       rangeSeparator: ' to '

data/app/pb_kits/playbook/pb_message/docs/_message_hover.html.erb

@@ -0,0 +1,25 @@
+<%= pb_rails("message", props: {
+  avatar_name: "Mike Bishop",
+  avatar_status: "online",
+  avatar_url: "https://randomuser.me/api/portraits/men/50.jpg",
+  border_radius: "rounded",
+  hover: { background: "success_subtle" },
+  label: "Anna Black",
+  message: "How can we assist you today?",
+  padding: "xs",
+}) %>
+
+<br><br>
+
+<%= pb_rails("message", props: {
+  align_timestamp: "left",
+  avatar_name: "Lucille Sanchez",
+  avatar_url: "https://randomuser.me/api/portraits/women/50.jpg",
+  border_radius: "rounded",
+  hover: { shadow: "deepest" },
+  label: "Becca Jacobs",
+  message: "Application for Kate Smith is waiting for your approval",
+  padding: "xs",
+}) %>
+
+<br><br>

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

@@ -3,6 +3,7 @@ examples:
   rails:
   - message_default: Default
   - message_timestamp: With Timestamp Hover
+  - message_hover: Hover
 
 
   react:

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

@@ -2,7 +2,7 @@
 
 @mixin hover-color-classes($colors-list) {
     @each $name, $color in $colors-list {
-      .bg-hover-#{$name}:hover {
+      .hover_background_#{$name}:hover {
         background-color: $color !important;
         transition: background-color $transition-speed ease;
       }

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

@@ -147,7 +147,7 @@ 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 ? `bg-hover-${hover.background } ` : '';
+      css += hover.background ? `hover_background_${hover.background } ` : '';
       css += hover.scale ? `hover_scale_${hover.scale} ` : '';
       return css;
   },