playbook_ui 12.30.1.pre.alpha.play846responsivespacingglobalpropsneedsdefault924 → 12.31.0

data/app/pb_kits/playbook/pb_section_separator/section_separator.rb

@@ -12,9 +12,12 @@ module Playbook
                          default: "horizontal"
       prop :dark, type: Playbook::Props::Boolean,
                   default: false
+      prop :line_style, type: Playbook::Props::Enum,
+                        values: %w[dashed solid],
+                        default: "solid"
 
       def classname
-        generate_classname("pb_section_separator_kit", variant, orientation)
+        generate_classname("pb_section_separator_kit", variant, orientation, line_style == "dashed" ? "dashed" : nil)
       end
 
     private

data/app/pb_kits/playbook/pb_title/_title.scss

@@ -1,5 +1,6 @@
 @import "../tokens/titles";
 @import "../tokens/colors";
+@import "../tokens/screen_sizes";
 @import './title_mixin';
 
 [class^=pb_title_kit]{
@@ -33,4 +34,21 @@
   &[class*=_thin] {
     @include pb_title_thin;
   }
+
+  @each $size, $size_value in $breakpoints_grid {
+    @each $title_size_value in [1, 2, 3, 4] {
+        $min_size: map-get($size_value, "min");
+        $max_size: map-get($size_value, "max");
+        &[class*=_#{$size}_#{$title_size_value}] {
+          @include break_on($min_size, $max_size) {
+            @if $title_size_value == 1 { @include pb_title_1; }
+            @else if $title_size_value == 2 { @include pb_title_2; }
+            @else if $title_size_value == 3 { @include pb_title_3; }
+            @else if $title_size_value == 4 { @include pb_title_4; }
+            @include title_colors;
+            @if $title_size_value != 4 { @include pb_title_bold; }
+          }
+        }
+    }
+  }
 }

data/app/pb_kits/playbook/pb_title/_title.tsx

@@ -3,6 +3,9 @@ import classnames from 'classnames'
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
 import { deprecatedProps, GlobalProps, globalProps } from '../utilities/globalProps'
 
+type SizeType = 1 | 2 | 3 | 4 | "1" | "2" | "3" | "4"
+type SizeResponsiveType = {[key: string]: SizeType}
+
 type TitleProps = {
   aria?: {[key: string]: string},
   bold?: boolean,
@@ -11,7 +14,7 @@ type TitleProps = {
   color?: "default" | "light" | "lighter" | "success" | "error" | "link",
   data?: {[key: string]: string},
   id?: string,
-  size?: 1 | 2| 3| 4 | "1" | "2" | "3" | "4",
+  size?: SizeType | SizeResponsiveType,
   tag?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "div" | "span",
   text?: string,
   variant?: null | "link",
@@ -36,9 +39,24 @@ const Title = (props: TitleProps): React.ReactElement => {
   const ariaProps: {[key: string]: string | number} = buildAriaProps(aria)
   const dataProps: {[key: string]: string | number} = buildDataProps(data)
   const getBold = bold ? '' : 'thin'
+  const isSizeNumberOrString = typeof size === "number" || typeof size === "string"
+
+  const buildResponsiveSizeCss = () => {
+    let css = ''
+    
+    if (!isSizeNumberOrString) {
+      Object.entries(size).forEach((sizeObj) => {
+        css += `pb_title_kit_${sizeObj[0]}_${sizeObj[1]} `
+      })
+    }
+
+    return css.trim()
+  }
+
   const classes = classnames(
-    buildCss('pb_title_kit', `size_${size}`, variant, color, getBold),
+    buildCss('pb_title_kit', isSizeNumberOrString ? `size_${size}` : "", variant, color, getBold),
     globalProps(props),
+    buildResponsiveSizeCss(),
     className
   )
   const Tag: React.ReactElement | any = `${tag}`

data/app/pb_kits/playbook/pb_title/docs/_title_responsive.html.erb

@@ -0,0 +1 @@
+<%= pb_rails("title", props: { text: "Responsive Title", tag: "h1", size: {xs: 3, sm: 2, md: 1} }) %>

data/app/pb_kits/playbook/pb_title/docs/_title_responsive.jsx

@@ -0,0 +1,16 @@
+import React from 'react'
+import Title from '../_title'
+
+const TitleResponsive = (props) => {
+  return (
+    <>
+      <Title
+          size={{xs: "3", sm: "2", md: "1"}}
+          text="Responsive Title"
+          {...props}
+      />
+    </>
+  )
+}
+
+export default TitleResponsive

data/app/pb_kits/playbook/pb_title/docs/_title_responsive.md

@@ -0,0 +1 @@
+The `size` prop supports responsive sizes. To use them, pass an object to the size prop containing your size values relative to responsive break points (show code below). To test this here, resize your browser window to responsively change this Title's size.

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

@@ -3,8 +3,10 @@ examples:
   - title_default: Default UI
   - title_light_weight: Light Weight UI
   - title_colors: Colors
+  - title_responsive: Responsive
 
   react:
   - title_default: Default UI
   - title_light_weight: Light Weight UI
   - title_colors: Colors
+  - title_responsive: Responsive

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

@@ -1,3 +1,4 @@
 export { default as TitleDefault } from './_title_default.jsx'
 export { default as TitleLightWeight } from './_title_light_weight.jsx'
 export { default as TitleColors } from './_title_colors.jsx'
+export { default as TitleResponsive } from './_title_responsive.jsx'

data/app/pb_kits/playbook/pb_title/title.rb

@@ -6,9 +6,7 @@ module Playbook
       prop :color, type: Playbook::Props::Enum,
                    values: [nil, "default", "light", "lighter", "success", "error", "link"],
                    default: nil
-      prop :size, type: Playbook::Props::Enum,
-                  values: [1, 2, 3, 4],
-                  default: 3
+      prop :size, default: 3
       prop :tag, type: Playbook::Props::Enum,
                  values: %w[h1 h2 h3 h4 h5 h6 p div span],
                  default: "h3"
@@ -20,12 +18,31 @@ module Playbook
       prop :bold, type: Playbook::Props::Boolean, default: true
 
       def classname
-        generate_classname("pb_title_kit", size, variant, color, is_bold)
+        if is_size_responsive
+          generate_classname("pb_title_kit", variant, color, is_bold) + generate_responsive_size_classname
+        else
+          generate_classname("pb_title_kit", size, variant, color, is_bold)
+        end
       end
 
       def is_bold
         bold ? nil : "thin"
       end
+
+      def is_size_responsive
+        try(:size).is_a?(::Hash)
+      end
+
+      def generate_responsive_size_classname
+        css = ""
+        if is_size_responsive
+          size.each do |key, value|
+            css += " pb_title_kit_#{key}_#{value}"
+          end
+        end
+
+        css unless css.blank?
+      end
     end
   end
 end

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