playbook_ui 12.30.1.pre.alpha.play846responsivespacingglobalpropsneedsdefault924 → 12.31.0.pre.alpha.customiconsfa928

data/app/pb_kits/playbook/pb_title/title.test.js

@@ -4,39 +4,52 @@ import { render, screen } from '../utilities/test-utils'
 import Title from './_title'
 
 test('returns namespaced class name', () => {
-  render(
-    <Title
-        data={{ testid: 'primary-test' }}
-        text="Test colors"
-    />
-  )
-
-  const kit = screen.getByTestId('primary-test')
-  expect(kit).toHaveClass('pb_title_kit_size_3')
+    render(
+        <Title
+            data={{ testid: 'primary-test' }}
+            text="Test colors"
+        />
+    )
+
+    const kit = screen.getByTestId('primary-test')
+    expect(kit).toHaveClass('pb_title_kit_size_3')
 })
 
 test('with thin font weight', () => {
-  render(
-    <Title
-        bold={false}
-        data={{ testid: 'primary-test' }}
-        text="Test thin font weight"
-    />
-  )
-
-  const kit = screen.getByTestId('primary-test')
-  expect(kit).toHaveClass('pb_title_kit_size_3_thin')
+    render(
+        <Title
+            bold={false}
+            data={{ testid: 'primary-test' }}
+            text="Test thin font weight"
+        />
+    )
+
+    const kit = screen.getByTestId('primary-test')
+    expect(kit).toHaveClass('pb_title_kit_size_3_thin')
 })
 
 test('with colors', () => {
-  render(
-    <Title
-        color="success"
-        data={{ testid: 'primary-test' }}
-        text="Test colors"
-    />
-  )
-
-  const kit = screen.getByTestId('primary-test')
-  expect(kit).toHaveClass('pb_title_kit_size_3_success')
+    render(
+        <Title
+            color="success"
+            data={{ testid: 'primary-test' }}
+            text="Test colors"
+        />
+    )
+
+    const kit = screen.getByTestId('primary-test')
+    expect(kit).toHaveClass('pb_title_kit_size_3_success')
+})
+
+test('with responsive title', () => {
+    render(
+        <Title
+            data={{ testid: 'primary-test' }}
+            size={{ xs: "3", sm: "2", md: "1" }}
+            text="Responsive Title"
+        />
+    )
+
+    const kit = screen.getByTestId('primary-test')
+    expect(kit).toHaveClass('pb_title_kit pb_title_kit_xs_3 pb_title_kit_sm_2 pb_title_kit_md_1')
 })

data/app/pb_kits/playbook/tokens/_scale.scss

@@ -0,0 +1,9 @@
+
+$scale_sm: scale(1.05);
+$scale_md: scale(1.1);
+$scale_lg: scale(1.15);
+$scales: (
+  scale_sm: $scale_sm,
+  scale_md: $scale_md,
+  scale_lg: $scale_lg,
+);

data/app/pb_kits/playbook/tokens/exports/_scale.scss

@@ -0,0 +1,13 @@
+@import "../scale";
+
+:export {
+  @mixin export-hover-scale-classes($scales-list) {
+    @each $name, $scale in $scales-list {
+      .hover_#{$name}:hover {
+        transform: $scale;
+      }
+    }
+  }
+  
+  @include export-hover-scale-classes($scales);
+}

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

@@ -0,0 +1,31 @@
+@import "../tokens/exports/border_radius";
+
+$transition-speed: 0.2s;
+
+.border_radius {
+  @mixin border-example {
+    transition: background-color $transition-speed ease, height $transition-speed ease;
+  }
+
+  &_rounded {
+    border-radius: $border_radius_rounded;
+  }
+  &_xl {
+    border-radius: $border_radius_xl;
+  }
+  &_lg {
+    border-radius: $border_radius_lg;
+  }
+  &_md {
+    border-radius: $border_radius_md;
+  }
+  &_sm {
+    border-radius: $border_radius_sm;
+  }
+  &_xs {
+    border-radius: $border_radius_xs;
+  }
+  &_none {
+    border-radius: $border_radius_none;
+  }
+}

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

@@ -1,5 +1,7 @@
 // Color Helper Utilities
 
+$transition-speed: 0.2s;
+
 @function shade($color, $percentage) {
   @return mix($charcoal, $color, $percentage);
 }
@@ -27,6 +29,7 @@
   }
 }
 
+
 @mixin text-color($colors-list) {
   @each $name, $color in $colors-list {
     .#{$name} {

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"] }] */