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

data/app/pb_kits/playbook/pb_skeleton_loading/skeleton_loading.test.jsx

@@ -1,81 +0,0 @@
-import React from 'react'
-import { render, screen } from '@testing-library/react'
-import { ensureAccessible } from '../utilities/test-utils'
-import { SkeletonLoading } from 'playbook-ui'
-
-/* See these resources for more testing info:
-  - https://github.com/testing-library/jest-dom#usage for useage and examples
-  - https://jestjs.io/docs/en/using-matchers
-*/
-
-describe('SkeletonLoading', () => {
-  const defaultProps = {
-    data: { testid: 'skeleton-loading' }
-  }
-
-  it('should be accessible', async () => {
-    ensureAccessible(SkeletonLoading, defaultProps)
-  })
-
-  it('renders with default props', () => {
-    const { container } = render(<SkeletonLoading {...defaultProps} />)
-    const skeleton = screen.getByTestId('skeleton-loading')
-    
-    expect(skeleton).toBeInTheDocument()
-    expect(skeleton).toHaveClass('pb_skeleton_loading')
-    expect(container.querySelectorAll('div[class*="border_radius_"]')).toHaveLength(1)
-  })
-
-  it('renders multiple skeleton items based on stack prop', () => {
-    const props = {
-      ...defaultProps,
-      stack: 3
-    }
-    const { container } = render(<SkeletonLoading {...props} />)
-    
-    expect(container.querySelectorAll('div[class*="border_radius_"]')).toHaveLength(3)
-  })
-
-  it('applies custom styles correctly', () => {
-    const props = {
-      ...defaultProps,
-      height: '24px',
-      width: '50%',
-      borderRadius: 'lg',
-      color: 'light',
-      dark: true
-    }
-    const { container } = render(<SkeletonLoading {...props} />)
-    const skeletonItem = container.querySelector('div[class*="border_radius_"]')
-
-    expect(skeletonItem).toHaveClass('border_radius_lg')
-    expect(skeletonItem).toHaveClass('dark')
-  })
-
-  it('applies gap class to items after first one', () => {
-    const props = {
-      ...defaultProps,
-      stack: 3,
-      gap: 'md'
-    }
-    const { container } = render(<SkeletonLoading {...props} />)
-    const skeletonItems = container.querySelectorAll('div[class*="border_radius_"]')
-    
-    expect(skeletonItems[0]).not.toHaveClass('gap_md')
-    expect(skeletonItems[1]).toHaveClass('gap_md')
-    expect(skeletonItems[2]).toHaveClass('gap_md')
-  })
-
-  it('handles no gap properly', () => {
-    const props = {
-      ...defaultProps,
-      stack: 2,
-      gap: 'none'
-    }
-    const { container } = render(<SkeletonLoading {...props} />)
-    const skeletonItems = container.querySelectorAll('div[class*="border_radius_"]')
-    
-    expect(skeletonItems[0]).not.toHaveClass('gap_none')
-    expect(skeletonItems[1]).not.toHaveClass('gap_none')
-  })
-})

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

@@ -1,3 +0,0 @@
-<%= pb_content_tag do %>
-  <%= content.presence %>
-<% end %>

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

@@ -1,11 +0,0 @@
-# frozen_string_literal: true
-
-module Playbook
-  module PbTimeline
-    class Detail < Playbook::KitBase
-      def classname
-        generate_classname("pb_timeline_item_right_block")
-      end
-    end
-  end
-end

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

@@ -1,43 +0,0 @@
-<%= pb_rails("timeline", props: {orientation: "horizontal", show_date: true}) do %>
-    <%= pb_rails("timeline/item", props: { line_style: "solid"}) do |item| %>
-
-      <% item.label do %>
-        <%= pb_rails("timeline/label") do %>
-          <%= pb_rails("title", props: { text: "Any Kit Here", size: 2 }) %>
-        <% end %>
-      <% end %>
-    
-      <% item.step do %>
-        <%= pb_rails("timeline/step", props: { icon: 'check', icon_color: 'teal' }) %>
-      <% end %>
-    
-      <% item.detail do %>
-        <%= pb_rails("title_detail", props: {
-          title: "Jackson Heights",
-          detail: "37-27 74th Street"
-        }) %>
-      <% end %>
-    <% end %>
-    <%= pb_rails("timeline/item", props: { line_style: "dotted"}) do |item| %>
-
-      <% item.step do %>
-        <%= pb_rails("timeline/step") do %>
-          <%= pb_rails("pill", props: { text: "Any Kit" , variant: "success" }) %>
-        <% end %>
-      <% end %>
-    
-      <% item.detail do %>
-        <%= pb_rails("title_detail", props: {
-          title: "Greenpoint",
-          detail: "81 Gate St Brooklyn"
-        }) %>
-      <% end %>
-    <% end %>
-
-    <%= pb_rails("timeline/item", props: {icon: "map-marker-alt", icon_color: "purple", date: Date.today+1 }) do |item| %>
-      <%= pb_rails("title_detail", props: {
-          title: "Society Hill",
-          detail: "72 E St Astoria"
-      }) %>
-    <% end %>
-<% end %>

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

@@ -1,68 +0,0 @@
-import React from 'react'
-
-import Timeline from '../_timeline'
-import Title from '../../pb_title/_title'
-import Pill from '../../pb_pill/_pill'
-
-import TitleDetail from '../../pb_title_detail/_title_detail'
-
-const TimelineWithChildren = (props) => (
-  <div>
-    <Timeline orientation="horizontal"
-        showDate
-        {...props}
-    >
-      <Timeline.Item lineStyle="solid"
-          {...props}
-      >
-        <Timeline.Label>
-          <Title size={2}
-              text='Any Kit Here'
-          />
-        </Timeline.Label>
-        <Timeline.Step icon="user"
-            iconColor="royal"
-        />
-        <Timeline.Detail>
-          <TitleDetail detail="37-27 74th Street"
-              title="Jackson Heights"
-              {...props}
-          />
-        </Timeline.Detail>
-      </Timeline.Item>
-
-      <Timeline.Item lineStyle="dotted"
-          {...props}
-      >
-        <Timeline.Step>
-          <Pill text="Any Kit"
-              variant="success"
-          />
-        </Timeline.Step>
-        <Timeline.Detail>
-          <TitleDetail detail="81 Gate St Brooklyn"
-              title="Greenpoint"
-              {...props}
-          />
-        </Timeline.Detail>
-      </Timeline.Item>
-
-      <Timeline.Item lineStyle="solid"
-          {...props}
-      >
-        <Timeline.Label date={new Date(new Date().setDate(new Date().getDate() + 1))} />
-        <Timeline.Step icon="map-marker-alt"
-            iconColor="purple"
-        />
-        <Timeline.Detail>
-          <TitleDetail detail="72 E St Astoria"
-              title="Society Hill"
-              {...props}
-          />
-        </Timeline.Detail>
-      </Timeline.Item>
-    </Timeline>
-  </div>
-)
-
-export default TimelineWithChildren

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

@@ -1,2 +0,0 @@
-Any kit can be used inside of our compound components of label, step, or detail. Expand the code snippet below to see how to use these children elements.
-

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

@@ -1,12 +0,0 @@
-<%= pb_content_tag do %>
-  <% if object.date.present? %>
-    <%= pb_rails("date_stacked", props: {
-        date: object.date,
-        size: "sm",
-        align: "center"
-    }) %>
-  <% else %>
-    <%= content.presence %>
-  <% end %>
-<% end %>
-

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

@@ -1,13 +0,0 @@
-# frozen_string_literal: true
-
-module Playbook
-  module PbTimeline
-    class Label < Playbook::KitBase
-      prop :date
-
-      def classname
-        generate_classname("pb_timeline_item_left_block")
-      end
-    end
-  end
-end

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

@@ -1,14 +0,0 @@
-<%= pb_content_tag do %>
-  <% if object.icon.present? %>
-    <%= pb_rails("icon_circle", props: {
-      icon: object.icon,
-      variant: object.icon_color,
-      size: "xs"
-    }) %>
-  <% else %>
-    <%= content.presence %>
-  <% end %>
-  <div class="pb_timeline_item_connector"></div>
-<% end %>
-
-

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

@@ -1,16 +0,0 @@
-# frozen_string_literal: true
-
-module Playbook
-  module PbTimeline
-    class Step < Playbook::KitBase
-      prop :icon, type: Playbook::Props::String
-      prop :icon_color, type: Playbook::Props::Enum,
-                        values: %w[default royal blue purple teal red yellow green],
-                        default: "default"
-
-      def classname
-        generate_classname("pb_timeline_item_step")
-      end
-    end
-  end
-end

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

@@ -1,29 +0,0 @@
-import React from 'react'
-import classnames from 'classnames'
-import { buildHtmlProps } from '../../utilities/props'
-import { globalProps, GlobalProps } from "../../utilities/globalProps"
-
-type TimelineDetailProps = {
-  children?: React.ReactNode,
-  className?: string,
-  htmlOptions?: { [key: string]: any },
-} & GlobalProps
-
-const TimelineDetail: React.FC<TimelineDetailProps> = ({
-  children,
-  className,
-  htmlOptions = {},
-  ...props
-}) => {
-  const htmlProps = buildHtmlProps(htmlOptions)
-  return (
-    <div
-        {...htmlProps}
-        className={classnames('pb_timeline_item_right_block', globalProps(props), className)}
-    >
-      {children}
-    </div>
-  )
-}
-
-export default TimelineDetail

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

@@ -1,38 +0,0 @@
-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

@@ -1,42 +0,0 @@
-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

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