playbook_ui 12.30.1.pre.alpha.PLAY802responsivetitlekit909 → 12.30.1.pre.alpha.hovertesting914

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

@@ -0,0 +1,47 @@
+@import "../tokens/exports/scale";
+
+@mixin hover-color-classes($colors-list) {
+    @each $name, $color in $colors-list {
+      .bg-hover-#{$name}:hover {
+        background-color: $color !important;
+        transition: background-color $transition-speed ease;
+      }
+    }
+  }
+  
+  @mixin hover-shadow-classes($shadows-list) {
+    @each $name, $shadow in $shadows-list {
+      .hover_#{$name}:hover {
+        box-shadow: $shadow;
+        transition: box-shadow $transition-speed ease;
+      }
+    }
+  }
+  
+  @mixin hover-scale-classes($scales-list) {
+    @each $name, $scale in $scales-list {
+      .hover_#{$name}:hover {
+        transform: $scale;
+        transition: transform $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);

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

@@ -60,6 +60,11 @@ type FlexWrap = {
   flexWrap?: "wrap" | "nowrap" | "wrapReverse"
 }
 
+type Hover = Shadow & {
+  background?: string,
+  scale?: "sm" | "md" | "lg"
+}
+
 type JustifyContent = {
   justifyContent?: Alignment & Space
 }
@@ -125,7 +130,7 @@ export type GlobalProps = AlignContent & AlignItems & AlignSelf &
   BorderRadius & Cursor & Dark & Display & DisplaySizes & Flex & FlexDirection &
   FlexGrow & FlexShrink & FlexWrap & JustifyContent & JustifySelf &
   LineHeight & Margin & MaxWidth & NumberSpacing & Order & Padding &
-  Position & Shadow & ZIndex
+  Position & Shadow & ZIndex & { hover?: string };
 
 const getResponsivePropClasses = (prop: {[key: string]: string}, classPrefix: string) => {
   const keys: string[] = Object.keys(prop)
@@ -137,6 +142,16 @@ const getResponsivePropClasses = (prop: {[key: string]: string}, classPrefix: st
 
 // Prop categories
 const PROP_CATEGORIES: {[key:string]: (props: {[key: string]: any}) => string} = {
+
+  hoverProps: ({ hover }: { hover?: Hover }) => {
+      let css = '';
+      if (!hover) return css;
+      css += hover.shadow ? `hover_shadow_${hover.shadow} ` : '';
+      css += hover.background ? `bg-hover-${hover.background } ` : '';
+      css += hover.scale ? `hover_scale_${hover.scale} ` : '';
+      return css;
+  },
+
   spacingProps: ({
     marginRight,
     marginLeft,
@@ -214,7 +229,11 @@ const PROP_CATEGORIES: {[key:string]: (props: {[key: string]: any}) => string} =
     });
     return css.trim();
   },
-
+  borderRadiusProps: ({ borderRadius }: BorderRadius) => {
+    let css = ''
+    css += borderRadius ? `border_radius_${borderRadius} ` : ''
+    return css
+  },
   darkProps: ({ dark }: Dark) => dark ? 'dark' : '',
   numberSpacingProps: ({ numberSpacing }: NumberSpacing) => {
     let css = ''
@@ -369,6 +388,7 @@ export const globalProps = (props: GlobalProps, defaultProps: DefaultProps = {})
   }).filter((value) => value?.length > 0).join(" ")
 }
 
+
 export const deprecatedProps = (kit: string, props: string[] = []): void => {
   if (process.env.NODE_ENV === 'development') {
     /* eslint no-console: ["error", { allow: ["warn", "error"] }] */