playbook_ui 12.31.0.pre.alpha.datepickerdisableddatefix931 → 12.31.0.pre.alpha.hoverrails951

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 654d556d34f5a4d85545aff221a0ad40d54b0f09c6f5a26d74dbd99b346ce57d
-  data.tar.gz: 3ae3d76e2d79224c105d7b8c53c7f7c9033cda03505d55cc4222262926e9a580
+  metadata.gz: 3126e0971e1092c47d8dfa988f36a2dca2ac152bd0ef7f5437d44ef25696931e
+  data.tar.gz: e25f1f5019db99a6b314df9c6eda14cdd4a63ac544b160c0d8d044418b25c6ff
 SHA512:
-  metadata.gz: 1e0ed9fa251b5130bcdfc146ea0e1144b2273424c5f8171fc12b573ada98fbf2ca743d7467602d6d904b65c16fb8976ed51133461bb6497cff4dc038823100b4
-  data.tar.gz: a8dcf56f0adeed47b1e403318feec0a711f9d45dbc6617e26bdb19533fe055552a61bfeb05663141b49d28810f12f3e62397f8177ffa07e6510533a5972f1b5b
+  metadata.gz: 8a3838e0866216c40824eb2fa6e314a4e80c5b3c189b1e15402f7e326dcfb5246580504684a09691e9ebdbdb7d91aaca1fe5824f6c69b95cd85d5e1241b2f10b
+  data.tar.gz: d69a65e9e3b64dcef3a777a63d20e2bded1768d791dd1b48117d026a7f1b7ce59d4ead07c4ce523644847bc39957f207fad0eb2470d5c13e10c34d01ad18323a

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

@@ -10,6 +10,7 @@ examples:
   - 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_card/_card_mixin.scss

@@ -53,7 +53,7 @@ $pb_card_header_colors: map-merge(map-merge($product_colors, $additional_colors)
   };
 
   @each $name, $shadow in $box_shadows {
-    &[class*=_#{$name}] {
+    &[class^=_#{$name}] {
       box-shadow: $shadow;
     }
   }

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;
   },