playbook_ui 14.6.2.pre.alpha.PBNTR667railstypeaheadformintegration4424 → 14.6.2.pre.alpha.PLAY1485selectablecardoverflowoutlinebug4247

data/app/pb_kits/playbook/pb_link/link.rb

@@ -1,44 +0,0 @@
-# frozen_string_literal: true
-
-module Playbook
-  module PbLink
-    class Link < ::Playbook::KitBase
-      prop :color, type: Playbook::Props::Enum,
-                   values: %w[default body muted destructive],
-                   default: "default"
-      prop :disabled, type: Playbook::Props::Boolean,
-                      default: false
-      prop :href
-      prop :icon
-      prop :icon_right
-      prop :tag, type: Playbook::Props::Enum,
-                 values: %w[a h1 h2 h3 h4 h5 h6 p span div],
-                 default: "a"
-      prop :text
-      prop :underline, type: Playbook::Props::Boolean,
-                       default: false
-
-      def classname
-        generate_classname("pb_link_kit", color_class, underline_class, disabled_class)
-      end
-
-      def content
-        text
-      end
-
-    private
-
-      def color_class
-        color == "default" ? nil : color
-      end
-
-      def disabled_class
-        disabled ? "disabled" : nil
-      end
-
-      def underline_class
-        underline ? "underline" : nil
-      end
-    end
-  end
-end

data/app/pb_kits/playbook/pb_link/link.test.jsx

@@ -1,92 +0,0 @@
-import React from 'react'
-import { ensureAccessible, renderKit, render, screen } from '../utilities/test-utils'
-
-import { Link } from 'playbook-ui'
-
-const link = 'https://www.google.com'
-
-const props = {
-  data: { testid: 'default' },
-  href: link,
-}
-
-test('returns namespaced class name', () => {
-  const kit = renderKit(Link , props)
-  expect(kit).toBeInTheDocument()
-  expect(kit).toHaveClass('pb_link_kit')
-  expect(kit).toHaveAttribute('href', link)
-})
-
-it("should be accessible", async () => {
-  ensureAccessible(Link, props)
-})
-
-test('with colors', () => {
-  ['default', 'body', 'muted', 'destructive'].forEach((color) => {
-    const testId = `colors-test-${color}`
-    render(
-      <Link
-          color={color}
-          data={{ testid: testId }}
-          text="Test colors"
-      />
-    )
-
-    const kit = screen.getByTestId(testId)
-    expect(kit).toHaveClass(`pb_link_kit_${color}`)
-  })
-})
-
-test('disable prop', () => {
-  render(
-      <Link
-          data={{ testid: 'disable-test' }}
-          disabled
-      />
-  )
-
-  const kit = screen.getByTestId('disable-test')
-
-  expect(kit).toHaveClass('pb_link_kit_disabled')
-})
-
-test('underline prop', () => {
-  render(
-      <Link
-          data={{ testid: 'underline-test' }}
-          underline
-      />
-  )
-
-  const kit = screen.getByTestId('underline-test')
-
-  expect(kit).toHaveClass('pb_link_kit_underline')
-})
-
-test('adds icon', () => {
-  render(
-      <Link
-          data={{ testid: 'icon-test' }}
-          icon="arrow-up-right-from-square"
-      />
-  )
-
-  const kit = screen.getByTestId('icon-test')
-
-  const icon = kit.querySelector('.pb_icon_kit')
-  expect(icon).toBeInTheDocument();
-})
-
-test('adds icon right', () => {
-  render(
-      <Link
-          data={{ testid: 'icon-right-test' }}
-          iconRight="chevron-right"
-      />
-  )
-
-  const kit = screen.getByTestId('icon-right-test')
-
-  const icon = kit.querySelector('.pb_icon_kit')
-  expect(icon).toBeInTheDocument();
-})

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';