playbook_ui 14.6.2.pre.alpha.PLAY1613darkdatetimecolors4432 → 14.6.2.pre.alpha.PLAY15814348

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

@@ -1,15 +1,12 @@
 import React from 'react'
 import classnames from 'classnames'
+
 import { buildCss, buildHtmlProps } from '../utilities/props'
-import { globalProps, GlobalProps } from "../utilities/globalProps"
+import { globalProps, GlobalProps } from "../utilities/globalProps";
 
 import DateStacked from '../pb_date_stacked/_date_stacked'
 import IconCircle from '../pb_icon_circle/_icon_circle'
 
-import TimelineLabel from './subcomponents/Label'
-import TimelineStep from './subcomponents/Step'
-import TimelineDetail from './subcomponents/Detail'
-
 type ItemProps = {
   className?: string,
   children?: React.ReactNode[] | React.ReactNode,
@@ -20,13 +17,6 @@ type ItemProps = {
   lineStyle?: 'solid' | 'dotted',
 } & GlobalProps
 
-function isElementOfType<P>(
-  element: React.ReactNode,
-  component: React.ComponentType<P>
-): element is React.ReactElement<P> {
-  return React.isValidElement<P>(element) && element.type === component
-}
-
 const TimelineItem = ({
   className,
   children,
@@ -41,57 +31,31 @@ const TimelineItem = ({
 
   const htmlProps = buildHtmlProps(htmlOptions)
 
-  const childrenArray = React.Children.toArray(children)
-
-  const labelChild = childrenArray.find(
-    (child): child is React.ReactElement => isElementOfType(child, TimelineLabel)
-  )
-
-  const stepChild = childrenArray.find(
-    (child): child is React.ReactElement => isElementOfType(child, TimelineStep)
-  )
-
-  const detailChild = childrenArray.find(
-    (child): child is React.ReactElement => isElementOfType(child, TimelineDetail)
-  )
-
-  const otherChildren = childrenArray.filter(
-    (child) =>
-      !isElementOfType(child, TimelineLabel) &&
-      !isElementOfType(child, TimelineStep) &&
-      !isElementOfType(child, TimelineDetail)
-  )
-
   return (
-    <div
+    <div 
         {...htmlProps}
         className={classnames(timelineItemCss, globalProps(props), className)}
     >
-        {labelChild || (
-          <div className="pb_timeline_item_left_block">
-            {date && (
-              <DateStacked
-                  align="center"
-                  date={date}
-                  size="sm"
-              />
-            )}
-          </div>
-        )}
-        {stepChild || (
-          <div className="pb_timeline_item_step">
-            <IconCircle icon={icon}
-                size="xs"
-                variant={iconColor}
-            />
-            <div className="pb_timeline_item_connector" />
-          </div>
-        )}
-        {detailChild || (
-          <div className="pb_timeline_item_right_block">
-           { otherChildren }
-          </div>
-        )}
+      <div className="pb_timeline_item_left_block">
+        {date &&
+          <DateStacked
+              align="center"
+              date={date}
+              size="sm"
+          />
+        }
+      </div>
+      <div className="pb_timeline_item_step">
+        <IconCircle
+            icon={icon}
+            size="xs"
+            variant={iconColor}
+        />
+        <div className="pb_timeline_item_connector" />
+      </div>
+      <div className="pb_timeline_item_right_block">
+        {children}
+      </div>
     </div>
   )
 }

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

@@ -5,11 +5,6 @@ import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../uti
 import { GlobalProps, globalProps } from '../utilities/globalProps'
 
 import TimelineItem from './_item'
-import {
-  TimelineStep,
-  TimelineLabel,
-  TimelineDetail,
-} from './subcomponents'
 
 type TimelineProps = {
   aria?: { [key: string]: string },
@@ -52,8 +47,5 @@ const Timeline = ({
 }
 
 Timeline.Item = TimelineItem
-Timeline.Step = TimelineStep
-Timeline.Label = TimelineLabel
-Timeline.Detail = TimelineDetail
 
 export default Timeline

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

@@ -4,11 +4,10 @@ examples:
   - timeline_default: Default
   - timeline_vertical: Vertical
   - timeline_with_date: With Date
-  - timeline_with_children: With Children
   
   
   react:
   - timeline_default: Default
   - timeline_vertical: Vertical
   - timeline_with_date: With Date
-  - timeline_with_children: With Children
+  

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

@@ -1,4 +1,3 @@
 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'

data/app/pb_kits/playbook/pb_timeline/item.html.erb

@@ -1,21 +1,25 @@
 <%= pb_content_tag do %>
-  <% if label %>
-    <%= label %>
-  <% else %>
-    <%= pb_rails("timeline/label", props: { date: date }) %>
-  <% end %>
 
-  <% if step %>
-    <%= step %>
-  <% else %>
-    <%= pb_rails("timeline/step", props: { icon: icon, icon_color: icon_color }) %>
-  <% end %>
-
-  <% if detail%>
-    <%= detail%>
-  <% else %>
-    <%= pb_rails("timeline/detail") do %>
-      <%= content %>
+  <div class="pb_timeline_item_left_block">
+    <% if object.date.present? %>
+      <%= pb_rails("date_stacked", props: {
+        date: object.date,
+        size: "sm",
+        align: "center"
+      }) %>
     <% end %>
-  <% end %>
+  </div>
+
+  <div class="pb_timeline_item_step">
+    <%= pb_rails("icon_circle", props: {
+      icon: object.icon,
+      variant: object.icon_color,
+      size: "xs"
+    }) %>
+    <div class="pb_timeline_item_connector"></div>
+  </div>
+
+  <div class="pb_timeline_item_right_block">
+    <%= content.presence %>
+  </div>
 <% end %>

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

@@ -13,10 +13,6 @@ module Playbook
                         values: %w[solid dotted],
                         default: "solid"
 
-      renders_one :label
-      renders_one :step
-      renders_one :detail
-
       def classname
         generate_classname("pb_timeline_item_kit", line_style)
       end

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

@@ -2,10 +2,6 @@ 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'
@@ -47,91 +43,18 @@ 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)
@@ -163,10 +86,3 @@ 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/utilities/_hover.scss

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

@@ -7,7 +7,6 @@ export default [
   "right",
   "top",
   "hover",
-  "groupHover",
   "zIndex",
   "verticalAlign",
   "truncate",

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

@@ -66,10 +66,6 @@ type Hover = Shadow & {
   scale?: "sm" | "md" | "lg"
 }
 
-type GroupHover  = {
-  groupHover?: boolean,
-}
-
 type JustifyContent = {
   justifyContent?: Alignment & Space
 }
@@ -225,7 +221,6 @@ 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;