playbook_ui 14.6.0.pre.alpha.play1586datearea4218 → 14.6.0.pre.rc.0

data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_size.html.erb

@@ -1,336 +0,0 @@
-<%= pb_rails("title", props: {size: 4, text: "S", padding_top: "sm"}) %>
-
-<%= pb_rails("flex") do %>
-  <%= pb_rails("flex/flex_item", props: { padding_right: "md" }) do %>
-
-    <%= pb_rails("multiple_users_stacked", props: {
-      variant: "bubble",
-      size: "sm",
-      users: [
-        {
-          name: "Patrick Welch",
-          image_url: "https://randomuser.me/api/portraits/men/9.jpg",
-        }
-      ]
-    }) %>
-
-  <% end %>
-  <%= pb_rails("flex/flex_item", props: { padding_right: "md" }) do %>
-    <%= pb_rails("multiple_users_stacked", props: {
-      size: "sm",
-      variant: "bubble",
-      users: [
-        {
-          name: "Patrick Welch",
-          image_url: "https://randomuser.me/api/portraits/men/9.jpg",
-        },
-        {
-          name: "Lucille Sanchez",
-          image_url: "https://randomuser.me/api/portraits/women/6.jpg",
-        }
-      ]
-    }) %>
-  <% end %>
-  <%= pb_rails("flex/flex_item", props: { padding_right: "md" }) do %>
-    <%= pb_rails("multiple_users_stacked", props: {
-        size: "sm",
-        variant: "bubble",
-        users: [
-          {
-            name: "Patrick Welch",
-            image_url: "https://randomuser.me/api/portraits/men/9.jpg",
-          },
-          {
-            name: "Lucille Sanchez",
-            image_url: "https://randomuser.me/api/portraits/women/6.jpg",
-          },
-          {
-            name: "Beverly Reyes",
-            image_url: "https://randomuser.me/api/portraits/women/74.jpg",
-          },
-        ]
-      }) %>
-  <% end %>
-  <%= pb_rails("flex/flex_item", props: { padding_right: "md" }) do %>
-    <%= pb_rails("multiple_users_stacked", props: { 
-      size: "sm",
-      variant: "bubble",
-      users: [
-        {
-          name: "Patrick Welch",
-          image_url: "https://randomuser.me/api/portraits/men/9.jpg",
-        },
-        {
-          name: "Lucille Sanchez",
-          image_url: "https://randomuser.me/api/portraits/women/6.jpg",
-        },
-        {
-          name: "Beverly Reyes",
-          image_url: "https://randomuser.me/api/portraits/women/74.jpg",
-        },
-        {
-          name: "Keith Craig",
-          image_url: "https://randomuser.me/api/portraits/men/40.jpg",
-        },
-        {
-          name: "Alicia Cooper",
-          image_url: "https://randomuser.me/api/portraits/women/46.jpg",
-        }
-      ]
-    }) %>
-  <% end %>
-<% end %>
-
-
-
-<%= pb_rails("title", props: {size: 4, text: "M", padding_top: "sm"}) %>
-
-<%= pb_rails("flex") do %>
-  <%= pb_rails("flex/flex_item", props: { padding_right: "md" }) do %>
-
-    <%= pb_rails("multiple_users_stacked", props: {
-      size: "md",
-      variant: "bubble",
-      users: [
-        {
-          name: "Patrick Welch",
-          image_url: "https://randomuser.me/api/portraits/men/9.jpg",
-        }
-      ]
-    }) %>
-
-  <% end %>
-  <%= pb_rails("flex/flex_item", props: { padding_right: "md" }) do %>
-    <%= pb_rails("multiple_users_stacked", props: {
-      size: "md",
-      variant: "bubble",
-      users: [
-        {
-          name: "Patrick Welch",
-          image_url: "https://randomuser.me/api/portraits/men/9.jpg",
-        },
-        {
-          name: "Lucille Sanchez",
-          image_url: "https://randomuser.me/api/portraits/women/6.jpg",
-        }
-      ]
-    }) %>
-    <% end %>
-  <%= pb_rails("flex/flex_item", props: { padding_right: "md" }) do %>
-      <%= pb_rails("multiple_users_stacked", props: {
-        size: "md",
-        variant: "bubble",
-        users: [
-          {
-            name: "Patrick Welch",
-            image_url: "https://randomuser.me/api/portraits/men/9.jpg",
-          },
-          {
-            name: "Lucille Sanchez",
-            image_url: "https://randomuser.me/api/portraits/women/6.jpg",
-          },
-          {
-            name: "Beverly Reyes",
-            image_url: "https://randomuser.me/api/portraits/women/74.jpg",
-          },
-        ]
-      }) %>
-  <% end %>
-  <%= pb_rails("flex/flex_item", props: { padding_right: "md" }) do %>
-    <%= pb_rails("multiple_users_stacked", props: {
-      size: "md",
-      variant: "bubble",
-      users: [
-        {
-          name: "Patrick Welch",
-          image_url: "https://randomuser.me/api/portraits/men/9.jpg",
-        },
-        {
-          name: "Lucille Sanchez",
-          image_url: "https://randomuser.me/api/portraits/women/6.jpg",
-        },
-        {
-          name: "Beverly Reyes",
-          image_url: "https://randomuser.me/api/portraits/women/74.jpg",
-        },
-        {
-          name: "Keith Craig",
-          image_url: "https://randomuser.me/api/portraits/men/40.jpg",
-        },
-        {
-          name: "Alicia Cooper",
-          image_url: "https://randomuser.me/api/portraits/women/46.jpg",
-        }
-      ]
-    }) %>
-  <% end %>
-<% end %>
-
-
-
-<%= pb_rails("title", props: {size: 4, text: "L", padding_top: "sm"}) %>
-
-<%= pb_rails("flex") do %>
-  <%= pb_rails("flex/flex_item", props: { padding_right: "md" }) do %>
-
-    <%= pb_rails("multiple_users_stacked", props: {
-      size: "lg",
-      variant: "bubble",
-      users: [
-        {
-          name: "Patrick Welch",
-          image_url: "https://randomuser.me/api/portraits/men/9.jpg",
-        }
-      ]
-    }) %>
-
-  <% end %>
-  <%= pb_rails("flex/flex_item", props: { padding_right: "md" }) do %>
-    <%= pb_rails("multiple_users_stacked", props: {
-      size: "lg",
-      variant: "bubble",
-      users: [
-        {
-          name: "Patrick Welch",
-          image_url: "https://randomuser.me/api/portraits/men/9.jpg",
-        },
-        {
-          name: "Lucille Sanchez",
-          image_url: "https://randomuser.me/api/portraits/women/6.jpg",
-        }
-      ]
-    }) %>
-  <% end %>
-  <%= pb_rails("flex/flex_item", props: { padding_right: "md" }) do %>
-      <%= pb_rails("multiple_users_stacked", props: {
-        size: "lg",
-        variant: "bubble",
-        users: [
-          {
-            name: "Patrick Welch",
-            image_url: "https://randomuser.me/api/portraits/men/9.jpg",
-          },
-          {
-            name: "Lucille Sanchez",
-            image_url: "https://randomuser.me/api/portraits/women/6.jpg",
-          },
-          {
-            name: "Beverly Reyes",
-            image_url: "https://randomuser.me/api/portraits/women/74.jpg",
-          },
-        ]
-      }) %>
-  <% end %>
-  <%= pb_rails("flex/flex_item", props: { padding_right: "md" }) do %>
-    <%= pb_rails("multiple_users_stacked", props: {
-      size: "lg",
-      variant: "bubble",
-      users: [
-        {
-          name: "Patrick Welch",
-          image_url: "https://randomuser.me/api/portraits/men/9.jpg",
-        },
-        {
-          name: "Lucille Sanchez",
-          image_url: "https://randomuser.me/api/portraits/women/6.jpg",
-        },
-        {
-          name: "Beverly Reyes",
-          image_url: "https://randomuser.me/api/portraits/women/74.jpg",
-        },
-        {
-          name: "Keith Craig",
-          image_url: "https://randomuser.me/api/portraits/men/40.jpg",
-        },
-        {
-          name: "Alicia Cooper",
-          image_url: "https://randomuser.me/api/portraits/women/46.jpg",
-        }
-      ]
-    }) %>
-  <% end %>
-<% end %>
-
-
-<%= pb_rails("title", props: {size: 4, text: "XL", padding_top: "sm"}) %>
-
-<%= pb_rails("flex") do %>
-  <%= pb_rails("flex/flex_item", props: { padding_right: "md" }) do %>
-
-    <%= pb_rails("multiple_users_stacked", props: {
-      size: "xl",
-      variant: "bubble",
-      users: [
-        {
-          name: "Patrick Welch",
-          image_url: "https://randomuser.me/api/portraits/men/9.jpg",
-        }
-      ]
-    }) %>
-
-  <% end %>
-  <%= pb_rails("flex/flex_item", props: { padding_right: "md" }) do %>
-    <%= pb_rails("multiple_users_stacked", props: {
-      size: "xl",
-      variant: "bubble",
-      users: [
-        {
-          name: "Patrick Welch",
-          image_url: "https://randomuser.me/api/portraits/men/9.jpg",
-        },
-        {
-          name: "Lucille Sanchez",
-          image_url: "https://randomuser.me/api/portraits/women/6.jpg",
-        }
-      ]
-    }) %>
-  <% end %>
-  <%= pb_rails("flex/flex_item", props: { padding_right: "md" }) do %>
-      <%= pb_rails("multiple_users_stacked", props: {
-        size: "xl",
-        variant: "bubble",
-        users: [
-          {
-            name: "Patrick Welch",
-            image_url: "https://randomuser.me/api/portraits/men/9.jpg",
-          },
-          {
-            name: "Lucille Sanchez",
-            image_url: "https://randomuser.me/api/portraits/women/6.jpg",
-          },
-          {
-            name: "Beverly Reyes",
-            image_url: "https://randomuser.me/api/portraits/women/74.jpg",
-          },
-        ]
-      }) %>
-  <% end %>
-  <%= pb_rails("flex/flex_item", props: { padding_right: "md" }) do %>
-    <%= pb_rails("multiple_users_stacked", props: {
-      size: "xl",
-      variant: "bubble",
-      users: [
-        {
-          name: "Patrick Welch",
-          image_url: "https://randomuser.me/api/portraits/men/9.jpg",
-        },
-        {
-          name: "Lucille Sanchez",
-          image_url: "https://randomuser.me/api/portraits/women/6.jpg",
-        },
-        {
-          name: "Beverly Reyes",
-          image_url: "https://randomuser.me/api/portraits/women/74.jpg",
-        },
-        {
-          name: "Keith Craig",
-          image_url: "https://randomuser.me/api/portraits/men/40.jpg",
-        },
-        {
-          name: "Alicia Cooper",
-          image_url: "https://randomuser.me/api/portraits/women/46.jpg",
-        }
-      ]
-    }) %>
-  <% end %>
-<% end %>

data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_size.jsx

@@ -1,97 +0,0 @@
-import React from 'react'
-import Flex from '../../pb_flex/_flex'
-import Title from '../../pb_title/_title'
-import MultipleUsersStacked from '../_multiple_users_stacked'
-
-const MultipleUsersStackedSize = (props) => {
-  const sizes = [
-    { label: 'S', size: 'sm' },
-    { label: 'M', size: 'md' },
-    { label: 'L', size: 'lg' },
-    { label: 'XL', size: 'xl' },
-  ]
-
-  const usersList = [
-    [
-      {
-        name: 'Patrick Welch',
-        imageUrl: 'https://randomuser.me/api/portraits/men/9.jpg',
-      },
-    ],
-    [
-      {
-        name: 'Patrick Welch',
-        imageUrl: 'https://randomuser.me/api/portraits/men/9.jpg',
-      },
-      {
-        name: 'Lucille Sanchez',
-        imageUrl: 'https://randomuser.me/api/portraits/women/6.jpg',
-      },
-    ],
-    [
-      {
-        name: 'Patrick Welch',
-        imageUrl: 'https://randomuser.me/api/portraits/men/9.jpg',
-      },
-      {
-        name: 'Lucille Sanchez',
-        imageUrl: 'https://randomuser.me/api/portraits/women/6.jpg',
-      },
-      {
-        name: 'Beverly Reyes',
-        imageUrl: 'https://randomuser.me/api/portraits/women/74.jpg',
-      },
-    ],
-    [
-      {
-        name: 'Patrick Welch',
-        imageUrl: 'https://randomuser.me/api/portraits/men/9.jpg',
-      },
-      {
-        name: 'Lucille Sanchez',
-        imageUrl: 'https://randomuser.me/api/portraits/women/6.jpg',
-      },
-      {
-        name: 'Beverly Reyes',
-        imageUrl: 'https://randomuser.me/api/portraits/women/74.jpg',
-      },
-      {
-        name: 'Keith Craig',
-        imageUrl: 'https://randomuser.me/api/portraits/men/40.jpg',
-      },
-      {
-        name: 'Alicia Cooper',
-        imageUrl: 'https://randomuser.me/api/portraits/women/46.jpg',
-      },
-    ],
-  ]
-
-  return (
-    <>
-      {sizes.map(({ label, size }) => (
-        <Flex key={size}
-            orientation="column"
-        >
-          <Title paddingTop='sm' >{label}</Title>
-          <Flex>
-            {usersList.map((users, index) => (
-              <Flex key={index}
-                  paddingRight='sm'
-              >
-                <MultipleUsersStacked
-                    size={size}
-                    users={users}
-                    variant="bubble"
-                    {...props}
-                />
-              </Flex>
-            ))}
-          </Flex>
-          <br />
-        </Flex>
-      ))}
-    </>
-  )
-}
-
-export default MultipleUsersStackedSize

data/app/pb_kits/playbook/pb_timeline/date_area.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/date_area.rb

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

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

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

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

@@ -1,11 +0,0 @@
-# frozen_string_literal: true
-
-module Playbook
-  module PbTimeline
-    class DetailArea < 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.date_area do %>
-        <%= pb_rails("timeline/date_area") do %>
-          <%= pb_rails("title", props: { text: "Any Kit Here", size: 2 }) %>
-        <% end %>
-      <% end %>
-    
-      <% item.node_area do %>
-        <%= pb_rails("timeline/node_area", props: { icon: 'check', icon_color: 'teal' }) %>
-      <% end %>
-    
-      <% item.detail_area 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.node_area do %>
-        <%= pb_rails("timeline/node_area") do %>
-          <%= pb_rails("pill", props: { text: "Any Kit" , variant: "success" }) %>
-        <% end %>
-      <% end %>
-    
-      <% item.detail_area 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.Label>
-          <Pill text="Any Kit"
-              variant="success"
-          />
-        </Timeline.Label>
-        <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,4 +0,0 @@
-You can use whatever kit you want for the date area of the timeline item, the node area, and the content area at the bottom or left.
-
-Checkout the code in this example to see the children kits in action.
-

data/app/pb_kits/playbook/pb_timeline/node_area.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/node_area.rb

@@ -1,16 +0,0 @@
-# frozen_string_literal: true
-
-module Playbook
-  module PbTimeline
-    class NodeArea < 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