playbook_ui 14.6.2.pre.alpha.PLAY1607dependencydisplayymlupdate4271 → 14.6.2.pre.alpha.PLAY1613darkdatetimecolors4432

data/app/pb_kits/playbook/pb_timeline/subcomponents/Label.tsx

@@ -0,0 +1,38 @@
+import React from 'react'
+import classnames from 'classnames'
+import { buildHtmlProps } from '../../utilities/props'
+import { globalProps, GlobalProps } from "../../utilities/globalProps"
+import DateStacked from '../../pb_date_stacked/_date_stacked'
+
+type TimelineLabelProps = {
+  date?: Date,
+  children?: React.ReactNode,
+  className?: string,
+  htmlOptions?: { [key: string]: any },
+} & GlobalProps
+
+const TimelineLabel: React.FC<TimelineLabelProps> = ({
+  date,
+  children,
+  className,
+  htmlOptions = {},
+  ...props
+}) => {
+  const htmlProps = buildHtmlProps(htmlOptions)
+  return (
+    <div
+        {...htmlProps}
+        className={classnames('pb_timeline_item_left_block', globalProps(props), className)}
+    >
+      {children}
+      {date && (
+        <DateStacked align="center"
+            date={date}
+            size="sm"
+        />
+      )}
+    </div>
+  )
+}
+
+export default TimelineLabel

data/app/pb_kits/playbook/pb_timeline/subcomponents/Step.tsx

@@ -0,0 +1,42 @@
+import React from 'react'
+import classnames from 'classnames'
+import { buildHtmlProps } from '../../utilities/props'
+import { globalProps, GlobalProps } from "../../utilities/globalProps"
+import IconCircle from '../../pb_icon_circle/_icon_circle'
+
+type TimelineStepProps = {
+  icon?: string,
+  iconColor?: 'default' | 'royal' | 'blue' | 'purple' | 'teal' | 'red' | 'yellow' | 'green',
+  children?: React.ReactNode,
+  className?: string,
+  htmlOptions?: { [key: string]: any },
+} & GlobalProps
+
+const TimelineStep: React.FC<TimelineStepProps> = ({
+  icon = 'user',
+  iconColor = 'default',
+  children,
+  className,
+  htmlOptions = {},
+  ...props
+}) => {
+  const htmlProps = buildHtmlProps(htmlOptions)
+  return (
+    <div
+        {...htmlProps}
+        className={classnames('pb_timeline_item_step', globalProps(props), className)}
+    >
+      {children ? (
+        children
+      ) : (
+        <IconCircle icon={icon}
+            size="xs"
+            variant={iconColor}
+        />
+      )}
+      <div className="pb_timeline_item_connector" />
+    </div>
+  )
+}
+
+export default TimelineStep

data/app/pb_kits/playbook/pb_timeline/subcomponents/index.tsx

@@ -0,0 +1,3 @@
+export { default as TimelineLabel } from './Label';
+export { default as TimelineDetail } from './Detail';
+export { default as TimelineStep } from './Step';

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

@@ -2,6 +2,10 @@ import React from 'react'
 import { render, screen } from '../utilities/test-utils'
 
 import Timeline from './_timeline'
+import TimelineItem from './_item'
+import TimelineLabel from './subcomponents/Label'
+import TimelineStep from './subcomponents/Step'
+import TimelineDetail from './subcomponents/Detail'
 import TitleDetail from '../pb_title_detail/_title_detail'
 
 const testId = 'timeline'
@@ -43,18 +47,91 @@ const TimelineDefault = (props) => (
     </>
 )
 
+const TimelineWithChildren = (props) => (
+  <>
+    <Timeline
+        className={className}
+        data={{ testid: testId }}
+        orientation="horizontal"
+        showDate
+        {...props}
+    >
+      <TimelineItem lineStyle="solid"
+          {...props}
+      >
+        <TimelineLabel date={new Date()} />
+        <TimelineStep icon="user"
+            iconColor="royal"
+        />
+        <TimelineDetail>
+          <TitleDetail
+              detail="37-27 74th Street"
+              title="Jackson Heights"
+              {...props}
+          />
+        </TimelineDetail>
+      </TimelineItem>
+
+      <TimelineItem lineStyle="dotted"
+          {...props}
+      >
+        <TimelineStep icon="check"
+            iconColor="teal"
+        />
+        <TimelineDetail>
+          <TitleDetail
+              detail="81 Gate St Brooklyn"
+              title="Greenpoint"
+              {...props}
+          />
+        </TimelineDetail>
+      </TimelineItem>
+
+      <TimelineItem lineStyle="solid"
+          {...props}
+      >
+        <TimelineLabel
+            date={new Date(new Date().setDate(new Date().getDate() + 1))}
+        />
+        <TimelineStep icon="map-marker-alt"
+            iconColor="purple"
+        />
+        <TimelineDetail>
+          <TitleDetail
+              detail="72 E St Astoria"
+              title="Society Hill"
+              {...props}
+          />
+        </TimelineDetail>
+      </TimelineItem>
+    </Timeline>
+  </>
+)
+
 test('should pass data prop', () => {
     render(<TimelineDefault />)
     const kit = screen.getByTestId(testId)
     expect(kit).toBeInTheDocument()
 })
 
+test('should pass data prop using children', () => {
+    render(<TimelineWithChildren />)
+    const kit = screen.getByTestId(testId)
+    expect(kit).toBeInTheDocument()
+})
+
 test('should pass className prop', () => {
     render(<TimelineDefault />)
     const kit = screen.getByTestId(testId)
     expect(kit).toHaveClass(className)
 })
 
+test('should pass className prop with children', () => {
+    render(<TimelineWithChildren />)
+    const kit = screen.getByTestId(testId)
+    expect(kit).toHaveClass(className)
+})
+
 test('should pass aria prop', () => {
     render(<TimelineDefault />)
     const kit = screen.getByTestId(testId)
@@ -86,3 +163,10 @@ test('should pass showDate prop', () => {
     const kit = screen.getByTestId(testId)
     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')
+})

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

@@ -1,3 +1,5 @@
+@import "../tokens/colors";
+
 $font_family_base: "Power Centra", "Helvetica Neue", Helvetica, Arial, sans_serif !default;
 
 /* CLEAN UP AND REMOVE */
@@ -51,3 +53,36 @@ $boldest:       700 !default;
 $bolder:        700 !default;
 $light:         300 !default;
 $lighter:       300 !default;
+
+/* Link Colors */
+$pb_link_colors: (
+  default:        $primary_action,
+  body:           $text_lt_default,
+  muted:          $text_lt_light,
+  destructive:    $error,
+);
+
+$pb_link_hover_colors: (
+  default:        $text_lt_default,
+  body:           $primary_action,
+  muted:          $text_lt_default,
+  destructive:    $text_lt_default,
+);
+
+$pb_dark_link_colors: (
+  default:        $active_dark,
+  body:           $text_dk_default,
+  muted:          $text_dk_light,
+  destructive:    $error_dark,
+);
+
+$pb_dark_link_hover_colors: (
+  default:        $text_dk_default,
+  body:           $active_dark,
+  muted:          $text_dk_default,
+  destructive:    $text_dk_default,
+);
+
+@mixin pb_link($color: $primary_action) {
+  color: $color;
+}

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

@@ -1,51 +1,54 @@
 @import "../tokens/exports/scale.module";
 
-@mixin hover-color-classes($colors-list) {
-    @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;
-      }
+@mixin hover-scale-classes($scales-list) {
+  @each $name, $scale in $scales-list {
+    .hover_#{"" + $name}:hover,
+    .group_hover:hover .group_hover.hover_#{"" + $name} {
+      transform: $scale;
+      transition: transform $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-shadow-classes($shadows-list) {
+  @each $name, $shadow in $shadows-list {
+    .hover_#{"" + $name}:hover,
+    .group_hover:hover .group_hover.hover_#{"" + $name} {
+      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;
-      }
+}
+
+@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;
     }
   }
-  
-  
-  @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);
+}
+
+@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/globalPropNames.mjs

@@ -1,9 +1,13 @@
 export default [
+  "minHeight",
+  "maxHeight",
+  "height",
   "left",
   "bottom",
   "right",
   "top",
   "hover",
+  "groupHover",
   "zIndex",
   "verticalAlign",
   "truncate",

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

@@ -66,6 +66,10 @@ type Hover = Shadow & {
   scale?: "sm" | "md" | "lg"
 }
 
+type GroupHover  = {
+  groupHover?: boolean,
+}
+
 type JustifyContent = {
   justifyContent?: Alignment & Space
 }
@@ -170,12 +174,24 @@ type ZIndex = {
   zIndex?: ZIndexType,
 } | ZIndexResponsiveType
 
+type Height = {
+  height?: string 
+}
+
+type MaxHeight = {
+  maxHeight?: string
+}
+
+type MinHeight = {
+  minHeight?: string
+}
+
 // keep this as the last type definition
 export type GlobalProps = AlignContent & AlignItems & AlignSelf &
   BorderRadius & Cursor & Dark & Display & DisplaySizes & Flex & FlexDirection &
   FlexGrow & FlexShrink & FlexWrap & JustifyContent & JustifySelf &
   LineHeight & Margin & MinWidth & MaxWidth & NumberSpacing & Order & Overflow & Padding &
-  Position & Shadow & TextAlign & Truncate & VerticalAlign & ZIndex & { hover?: string } & Top & Right & Bottom & Left;
+  Position & Shadow & TextAlign & Truncate & VerticalAlign & ZIndex & { hover?: string } & Top & Right & Bottom & Left & Height & MaxHeight & MinHeight;
 
 const getResponsivePropClasses = (prop: {[key: string]: string}, classPrefix: string) => {
   const keys: string[] = Object.keys(prop)
@@ -209,6 +225,7 @@ const filterClassName = (value: string): string => {
 // Prop categories
 const PROP_CATEGORIES: {[key:string]: (props: {[key: string]: any}) => string} = {
 
+  groupHoverProps: ({ groupHover }: GroupHover ) => groupHover ? 'group_hover ' : '',
   hoverProps: ({ hover }: { hover?: Hover }) => {
       let css = '';
       if (!hover) return css;
@@ -498,7 +515,22 @@ const PROP_CATEGORIES: {[key:string]: (props: {[key: string]: any}) => string} =
     } else {
       return verticalAlign ? `vertical_align_${verticalAlign} ` : ''
     }
-  }
+  },
+
+}
+
+const PROP_INLINE_CATEGORIES: {[key:string]: (props: {[key: string]: any}) => {[key: string]: any}} = {
+  heightProps: ({ height }: Height) => {
+    return height ? { height } : {}; 
+  },
+
+  maxHeightProps: ({ maxHeight }: MaxHeight) => {
+    return maxHeight ? { maxHeight } : {};
+  },
+
+  minHeightProps: ({ minHeight }: MinHeight) => {
+    return minHeight ? { minHeight } : {}; 
+  },
 }
 
 type DefaultProps = {[key: string]: string} | Record<string, unknown>
@@ -510,6 +542,16 @@ export const globalProps = (props: GlobalProps, defaultProps: DefaultProps = {})
   }).filter((value) => value?.length > 0).join(" ")
 }
 
+// New function for inline styles
+export const globalInlineProps = (props: GlobalProps): React.CSSProperties => {
+  const styles = Object.keys(PROP_INLINE_CATEGORIES).reduce((acc, key) => {
+    const result = PROP_INLINE_CATEGORIES[key](props);
+    return { ...acc, ...(typeof result === 'object' ? result : {}) }; // Ensure result is an object before spreading
+  }, {});
+
+  return styles; // Return the styles object directly
+}
+
 
 export const deprecatedProps = (): void => {
   // if (process.env.NODE_ENV === 'development') {