playbook_ui 14.7.0 → 14.8.0.pre.alpha.PLAY1598floatinguiupgrade4563

data/app/pb_kits/playbook/pb_timeline/_timeline.scss

@@ -8,6 +8,12 @@ $icon_margin: $space_xs/2;
 $icon_height: 28px;
 $height_from_top: $icon_height/2 - $connector_width/2;
 
+// Add gap variables
+$gap_xs: $height_from_top + $space_xs;
+$gap_sm: $height_from_top + $space_sm;
+$gap_md: $height_from_top + $space_md;
+$gap_lg: $height_from_top + $space_lg;
+
 @mixin pb_timeline_line_solid($width, $height, $margin) {
     width: $width;
     height: $height;
@@ -156,7 +162,7 @@ $height_from_top: $icon_height/2 - $connector_width/2;
                         }
                     }
                 }
-            } 
+            }
         }
     }
     &[class*=_vertical] {
@@ -266,5 +272,41 @@ $height_from_top: $icon_height/2 - $connector_width/2;
                 }
             }
         }
+        &[class*=_gap_xs] {
+            [class*=pb_timeline_item_kit] {
+                [class=pb_timeline_item_step] {
+                    [class=pb_timeline_item_connector] {
+                        height: $gap_xs !important;
+                    }
+                }
+            }
+        }
+        &[class*=_gap_sm] {
+            [class*=pb_timeline_item_kit] {
+                [class=pb_timeline_item_step] {
+                    [class=pb_timeline_item_connector] {
+                        height: $gap_sm !important;
+                    }
+                }
+            }
+        }
+        &[class*=_gap_md] {
+            [class*=pb_timeline_item_kit] {
+                [class=pb_timeline_item_step] {
+                    [class=pb_timeline_item_connector] {
+                        height: $gap_md !important;
+                    }
+                }
+            }
+        }
+        &[class*=_gap_lg] {
+            [class*=pb_timeline_item_kit] {
+                [class=pb_timeline_item_step] {
+                    [class=pb_timeline_item_connector] {
+                        height: $gap_lg !important;
+                    }
+                }
+            }
+        }
     }
 }

data/app/pb_kits/playbook/pb_timeline/_timeline.tsx

@@ -20,6 +20,7 @@ type TimelineProps = {
   id?: string,
   orientation?: string,
   showDate?: boolean,
+  gap?: 'xs' | 'sm' | 'md' | 'lg' | 'none',
 } & GlobalProps
 
 const Timeline = ({
@@ -31,13 +32,16 @@ const Timeline = ({
   id,
   orientation = 'horizontal',
   showDate = false,
+  gap = 'none',
   ...props
 }: TimelineProps): React.ReactElement => {
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
   const htmlProps = buildHtmlProps(htmlOptions)
   const dateStyle = showDate === true ? '_with_date' : ''
-  const timelineCss = buildCss('pb_timeline_kit', `_${orientation}`, dateStyle)
+  const gapStyle = gap === 'none' ? '' : `gap_${gap}`
+  const timelineCss = buildCss('pb_timeline_kit', `${orientation}`, dateStyle, gapStyle)
+
   return (
     <div
         {...ariaProps}
@@ -56,4 +60,4 @@ Timeline.Step = TimelineStep
 Timeline.Label = TimelineLabel
 Timeline.Detail = TimelineDetail
 
-export default Timeline
+export default Timeline

data/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_gap.html.erb

@@ -0,0 +1,94 @@
+<%= pb_rails("flex", props: { justify: "evenly" }) do %>
+    <%= pb_rails("flex/flex_item") do %>
+        <%= pb_rails("timeline", props: {orientation: "vertical", gap: "xs"}) do %>
+            <%= pb_rails("timeline/item", props: {icon: "user", icon_color: "royal"}) do %>
+                <%= pb_rails("body", props: {
+                    text: "Conversation started",
+                    color: "light"
+                }) %>
+            <% end %>
+            <%= pb_rails("timeline/item", props: {icon: "check", icon_color: "teal", line_style: "dotted"}) do %>
+                <%= pb_rails("body", props: {
+                    text: "Trip #12422",
+                    color: "light"
+                }) %>
+            <% end %>
+            <%= pb_rails("timeline/item", props: {icon: "credit-card", icon_color: "red"}) do %>
+                <%= pb_rails("body", props: {
+                    text: "Refund issue #12422",
+                    color: "light"
+                }) %>
+            <% end %>
+        <% end %>
+    <% end %>
+
+    <%= pb_rails("flex/flex_item") do %>
+        <%= pb_rails("timeline", props: {orientation: "vertical", gap: "sm"}) do %>
+            <%= pb_rails("timeline/item", props: {icon: "user", icon_color: "royal"}) do %>
+                <%= pb_rails("body", props: {
+                    text: "Conversation started",
+                    color: "light"
+                }) %>
+            <% end %>
+            <%= pb_rails("timeline/item", props: {icon: "check", icon_color: "teal", line_style: "dotted"}) do %>
+                <%= pb_rails("body", props: {
+                    text: "Trip #12422",
+                    color: "light"
+                }) %>
+            <% end %>
+            <%= pb_rails("timeline/item", props: {icon: "credit-card", icon_color: "red"}) do %>
+                <%= pb_rails("body", props: {
+                    text: "Refund issue #12422",
+                    color: "light"
+                }) %>
+            <% end %>
+        <% end %>
+    <% end %>
+
+    <%= pb_rails("flex/flex_item") do %>
+        <%= pb_rails("timeline", props: {orientation: "vertical", gap: "md"}) do %>
+            <%= pb_rails("timeline/item", props: {icon: "user", icon_color: "royal"}) do %>
+                <%= pb_rails("body", props: {
+                    text: "Conversation started",
+                    color: "light"
+                }) %>
+            <% end %>
+            <%= pb_rails("timeline/item", props: {icon: "check", icon_color: "teal", line_style: "dotted"}) do %>
+                <%= pb_rails("body", props: {
+                    text: "Trip #12422",
+                    color: "light"
+                }) %>
+            <% end %>
+            <%= pb_rails("timeline/item", props: {icon: "credit-card", icon_color: "red"}) do %>
+                <%= pb_rails("body", props: {
+                    text: "Refund issue #12422",
+                    color: "light"
+                }) %>
+            <% end %>
+        <% end %>
+    <% end %>
+
+    <%= pb_rails("flex/flex_item") do %>
+        <%= pb_rails("timeline", props: {orientation: "vertical", gap: "lg"}) do %>
+            <%= pb_rails("timeline/item", props: {icon: "user", icon_color: "royal"}) do %>
+                <%= pb_rails("body", props: {
+                    text: "Conversation started",
+                    color: "light"
+                }) %>
+            <% end %>
+            <%= pb_rails("timeline/item", props: {icon: "check", icon_color: "teal", line_style: "dotted"}) do %>
+                <%= pb_rails("body", props: {
+                    text: "Trip #12422",
+                    color: "light"
+                }) %>
+            <% end %>
+            <%= pb_rails("timeline/item", props: {icon: "credit-card", icon_color: "red"}) do %>
+                <%= pb_rails("body", props: {
+                    text: "Refund issue #12422",
+                    color: "light"
+                }) %>
+            <% end %>
+        <% end %>
+    <% end %>
+<% end %>
+

data/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_gap.jsx

@@ -0,0 +1,180 @@
+import React from 'react'
+
+import Timeline from '../_timeline'
+import Flex from "../../pb_flex/_flex"
+import FlexItem from "../../pb_flex/_flex_item"
+import Body from '../../pb_body/_body'
+
+const TimelineWithGap = (props) => (
+  <div>
+    <Flex justify="evenly">
+    <FlexItem>
+        <Timeline
+            gap="xs"
+            orientation="vertical"
+        >
+          <Timeline.Item
+              icon="user"
+              iconColor="royal"
+              {...props}
+          >
+            <Body
+                color="light"
+                text="Conversation started"
+                {...props}
+            />
+          </Timeline.Item>
+          <Timeline.Item
+              icon="check"
+              iconColor="teal"
+              lineStyle="dotted"
+              {...props}
+          >
+            <Body
+                color="light"
+                text="Trip #12422"
+                {...props}
+            />
+          </Timeline.Item>
+          <Timeline.Item
+              icon="credit-card"
+              iconColor="red"
+              {...props}
+          >
+            <Body
+                color="light"
+                text="Refund issue #12422"
+                {...props}
+            />
+          </Timeline.Item>
+        </Timeline>
+      </FlexItem>
+      <FlexItem>
+        <Timeline
+            gap="sm"
+            orientation="vertical"
+        >
+          <Timeline.Item
+              icon="user"
+              iconColor="royal"
+              {...props}
+          >
+            <Body
+                color="light"
+                text="Conversation started"
+                {...props}
+            />
+          </Timeline.Item>
+          <Timeline.Item
+              icon="check"
+              iconColor="teal"
+              lineStyle="dotted"
+              {...props}
+          >
+            <Body
+                color="light"
+                text="Trip #12422"
+                {...props}
+            />
+          </Timeline.Item>
+          <Timeline.Item
+              icon="credit-card"
+              iconColor="red"
+              {...props}
+          >
+            <Body
+                color="light"
+                text="Refund issue #12422"
+                {...props}
+            />
+          </Timeline.Item>
+        </Timeline>
+      </FlexItem>
+      <FlexItem>
+        <Timeline
+            gap="md"
+            orientation="vertical"
+        >
+          <Timeline.Item
+              icon="user"
+              iconColor="royal"
+              {...props}
+          >
+            <Body
+                color="light"
+                text="Conversation started"
+                {...props}
+            />
+          </Timeline.Item>
+          <Timeline.Item
+              icon="check"
+              iconColor="teal"
+              lineStyle="dotted"
+              {...props}
+          >
+            <Body
+                color="light"
+                text="Trip #12422"
+                {...props}
+            />
+          </Timeline.Item>
+          <Timeline.Item
+              icon="credit-card"
+              iconColor="red"
+              lineStyle="dotted"
+              {...props}
+          >
+            <Body
+                color="light"
+                text="Refund issue #12422"
+                {...props}
+            />
+          </Timeline.Item>
+        </Timeline>
+      </FlexItem>
+      <FlexItem>
+        <Timeline
+            gap="lg"
+            orientation="vertical"
+        >
+          <Timeline.Item
+              icon="user"
+              iconColor="royal"
+              {...props}
+          >
+            <Body
+                color="light"
+                text="Conversation started"
+                {...props}
+            />
+          </Timeline.Item>
+          <Timeline.Item
+              icon="check"
+              iconColor="teal"
+              lineStyle="dotted"
+              {...props}
+          >
+            <Body
+                color="light"
+                text="Trip #12422"
+                {...props}
+            />
+          </Timeline.Item>
+          <Timeline.Item
+              icon="credit-card"
+              iconColor="red"
+              {...props}
+          >
+            <Body
+                color="light"
+                text="Refund issue #12422"
+                {...props}
+            />
+          </Timeline.Item>
+        </Timeline>
+      </FlexItem>
+    </Flex>
+  </div>
+)
+
+export default TimelineWithGap

data/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_gap.md

@@ -0,0 +1 @@
+Use the optional `gap` prop to render the timeline kit with adjusted spacing between nodes. The `gap` prop will only work when utilized with a vertical timeline. Horizontal timelines will show no difference in spacing.

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

@@ -1,14 +1,16 @@
 examples:
-  
+
   rails:
   - timeline_default: Default
   - timeline_vertical: Vertical
   - timeline_with_date: With Date
   - timeline_with_children: With Children
-  
-  
+  - timeline_with_gap: With Gap
+
+
   react:
   - timeline_default: Default
   - timeline_vertical: Vertical
   - timeline_with_date: With Date
   - timeline_with_children: With Children
+  - timeline_with_gap: With Gap

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

@@ -2,3 +2,5 @@ export { default as TimelineDefault } from './_timeline_default.jsx'
 export { default as TimelineVertical } from './_timeline_vertical.jsx'
 export { default as TimelineWithDate } from './_timeline_with_date.jsx'
 export { default as TimelineWithChildren } from './_timeline_with_children.jsx'
+export { default as TimelineWithGap } from './_timeline_with_gap.jsx'
+

data/app/pb_kits/playbook/pb_timeline/timeline.rb

@@ -8,9 +8,15 @@ module Playbook
                          default: "horizontal"
       prop :show_date, type: Playbook::Props::Boolean,
                        default: false
+      prop :gap, type: Playbook::Props::Enum,
+                 values: %w[xs sm md lg none],
+                 default: "none"
 
       def classname
-        generate_classname("pb_timeline_kit", orientation, date_class)
+        generate_classname("pb_timeline_kit",
+                           orientation,
+                           date_class,
+                           gap_class)
       end
 
     private
@@ -18,6 +24,10 @@ module Playbook
       def date_class
         show_date ? "with_date" : nil
       end
+
+      def gap_class
+        gap == "none" ? nil : "gap_#{gap}"
+      end
     end
   end
 end

data/app/pb_kits/playbook/pb_timeline/timeline.test.js

@@ -147,26 +147,26 @@ test('should pass id prop', () => {
 test('should have horizontal orientation by default', () => {
     render(<TimelineDefault />)
     const kit = screen.getByTestId(testId)
-    expect(kit).toHaveClass('pb_timeline_kit__horizontal')
+    expect(kit).toHaveClass('pb_timeline_kit_horizontal')
 })
 
 test('should pass vertical orientation', () => {
     const props = { orientation: 'vertical' }
     render(<TimelineDefault {...props} />)
     const kit = screen.getByTestId(testId)
-    expect(kit).toHaveClass('pb_timeline_kit__vertical')
+    expect(kit).toHaveClass('pb_timeline_kit_vertical')
 })
 
 test('should pass showDate prop', () => {
     const props = { showDate: true }
     render(<TimelineDefault {...props} />)
     const kit = screen.getByTestId(testId)
-    expect(kit).toHaveClass('pb_timeline_kit__horizontal__with_date')
+    expect(kit).toHaveClass('pb_timeline_kit_horizontal__with_date')
 })
 
 test('should pass showDate prop with Children', () => {
     const props = { showDate: true }
     render(<TimelineWithChildren {...props} />)
     const kit = screen.getByTestId(testId)
-    expect(kit).toHaveClass('pb_timeline_kit__horizontal__with_date')
+    expect(kit).toHaveClass('pb_timeline_kit_horizontal__with_date')
 })

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

@@ -21,34 +21,47 @@
 }
 
 @mixin hover-color-classes($colors-list) {
-  @each $name, $color in $colors-list {
-    .hover_background_#{"" + $name}:hover,
-    .group_hover:hover .group_hover.hover_background_#{"" + $name} {
-      background-color: $color !important;
-      transition: background-color $transition-speed ease;
-    }
-    .hover_color_#{"" + $name}:hover,
-    .group_hover:hover .group_hover.hover_color_#{"" + $name} {
-      color: $color !important;
-      transition: color $transition-speed ease;
+    @each $name, $color in $colors-list {
+      .hover_background-#{"" + $name}:hover {
+        background-color: $color !important;
+        transition: background-color $transition-speed ease;
+      }
+      .hover_color-#{"" + $name}:hover {
+        color: $color !important;
+        transition: color $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);
+
+.hover_visibility {
+  opacity: 0;
+  transition: opacity $transition-speed ease;
+
+  &:hover {
+    opacity: 1;
+  }
 }
 
-@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);
+.group_hover:hover {
+  .group_hover.hover_visibility {
+    opacity: 1;
+  }
+}

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

@@ -63,7 +63,8 @@ type FlexWrap = {
 type Hover = Shadow & {
   background?: string,
   color?: string,
-  scale?: "sm" | "md" | "lg"
+  scale?: "sm" | "md" | "lg",
+  visibility?: boolean,
 }
 
 type GroupHover  = {
@@ -230,9 +231,10 @@ 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 ? `hover_background_${hover.background } ` : '';
+      css += hover.background ? `hover_background-${hover.background } ` : '';
       css += hover.scale ? `hover_scale_${hover.scale} ` : '';
-      css += hover.color ? `hover_color_${hover.color } ` : '';
+      css += hover.color ? `hover_color-${hover.color } ` : '';
+      css += hover.visibility ? `hover_visibility` : '';
       return css;
   },
 

data/app/pb_kits/playbook/utilities/test/globalProps/hover.test.js

@@ -0,0 +1,79 @@
+import React from 'react';
+import { render, screen } from '../../test-utils';
+import Body from '../../../pb_body/_body';
+
+const testSubject = 'body';
+
+test('Hover Props: returns proper class name', () => {
+  const testIdColor = `${testSubject}-hover-color-red`;
+  render(
+    <Body
+        data={{ testid: testIdColor }}
+        hover={{ color: 'red' }}
+        text="Hi"
+    />
+  );
+
+  let kit = screen.getByTestId(testIdColor);
+  let expectedClassName = `hover_color-red`;
+  expect(kit).toHaveClass(expectedClassName);
+
+  const testIdBackground = `${testSubject}-hover-background-blue`;
+  render(
+    <Body
+        data={{ testid: testIdBackground }}
+        hover={{ background: 'blue' }}
+        text="Hi"
+    />
+  );
+
+  kit = screen.getByTestId(testIdBackground);
+  expectedClassName = `hover_background-blue`;
+  expect(kit).toHaveClass(expectedClassName);
+
+  const testIdShadow = `${testSubject}-hover-shadow-deep`;
+  render(
+    <Body
+        data={{ testid: testIdShadow }}
+        hover={{ shadow: 'deep' }}
+        text="Hi"
+    />
+  );
+
+  kit = screen.getByTestId(testIdShadow);
+  expectedClassName = `hover_shadow_deep`;
+  expect(kit).toHaveClass(expectedClassName);
+
+  const testIdScale = `${testSubject}-hover-scale`;
+  render(
+    <Body
+        data={{ testid: testIdScale }}
+        hover={{ scale: 'xl' }}
+        text="Test"
+    />
+  );
+
+  kit = screen.getByTestId(testIdScale);
+  expectedClassName = `hover_scale_xl`;
+  expect(kit).toHaveClass(expectedClassName);
+
+  const testIdMultiple = `${testSubject}-hover-multiple`;
+  render(
+    <Body
+        data={{ testid: testIdMultiple }}
+        hover={{
+        color: 'green',
+        background: 'error',
+        shadow: 'deeper',
+        scale: 'xl',
+      }}
+        text="Hi"
+    />
+  );
+
+  kit = screen.getByTestId(testIdMultiple);
+  expect(kit).toHaveClass('hover_color-green');
+  expect(kit).toHaveClass('hover_background-error');
+  expect(kit).toHaveClass('hover_shadow_deeper');
+  expect(kit).toHaveClass('hover_scale_xl');
+});