RubyGems - playbook_ui - Versions diffs - 14.5.0.pre.alpha.play1586datearea4115 → 14.5.0.pre.alpha.psych4support3941 - Mend

playbook_ui 14.5.0.pre.alpha.play1586datearea4115 → 14.5.0.pre.alpha.psych4support3941

Files changed (61) hide show

data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_children_with_radios.md DELETED Viewed

	@@ -1 +0,0 @@
1	- The MultiLevelSelect subcomponent structure is also available in the 'Single Select' variant. In this variant, the children will be rendered to the right of the Radios and their labels.

data/app/pb_kits/playbook/pb_multi_level_select/multi_level_select_options.tsx DELETED Viewed

@@ -1,149 +0,0 @@
-import React, {useContext} from "react";
-import classnames from "classnames";
-import MultiLevelSelectContext from "./context";
-import { globalProps, GlobalProps } from "../utilities/globalProps";
-import {
-  buildAriaProps,
-  buildCss,
-  buildDataProps,
-  buildHtmlProps,
-} from "../utilities/props";
-import Checkbox from "../pb_checkbox/_checkbox";
-import Radio from "../pb_radio/_radio";
-import CircleIconButton from "../pb_circle_icon_button/_circle_icon_button";
-import Body from "../pb_body/_body";
-type MultiLevelSelectOptionsProps = {
-  aria?: { [key: string]: string },
-  children?: React.ReactNode | ((item: any) => React.ReactNode),
-  className?: string,
-  dark?: boolean,
-  data?: { [key: string]: string },
-  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
-} & GlobalProps;
-const MultiLevelSelectOptions = ({
-  children,
-  items,
-  ...props
-}: MultiLevelSelectOptionsProps) => {
-const {
-  variant,
-  inputName,
-  renderNestedOptions,
-  isTreeRowExpanded,
-  handleToggleClick,
-  handleRadioButtonClick,
-  handledropdownItemClick,
-  filterItem,
-} = useContext(MultiLevelSelectContext)
-const {
-  aria = {},
-  className,
-  data = {},
-  htmlOptions = {},
-} = props;
-const ariaProps = buildAriaProps(aria);
-const dataProps = buildDataProps(data);
-const htmlProps = buildHtmlProps(htmlOptions);
-const classes = classnames(
-  buildCss("pb_multi_level_select_options"),
-  globalProps(props),
-  className
-);
-  return (
-    <ul
-        {...ariaProps}
-        {...dataProps}
-        {...htmlProps}
-        className={classes}
-    >
-      {Array.isArray(items) &&
-        items.map((item: { [key: string]: any }) => {
-          return (
-            <div key={item.id}>
-              <li className={"dropdown_item"}
-                  data-name={item.id}
-              >
-                <div className="dropdown_item_checkbox_row">
-                  {!item.parent_id && !item.children ? null : (
-                    <div
-                        key={
-                          isTreeRowExpanded(item)
-                            ? "chevron-down"
-                            : "chevron-right"
-                        }
-                    >
-                      <CircleIconButton
-                          className={
-                            item.children && item.children.length > 0
-                              ? ""
-                              : "toggle_icon"
-                          }
-                          icon={
-                            isTreeRowExpanded(item)
-                              ? "chevron-down"
-                              : "chevron-right"
-                          }
-                          onClick={(event: React.MouseEvent) =>
-                            handleToggleClick(item.id, event)
-                          }
-                          variant="link"
-                      />
-                    </div>
-                  )}
-                  {variant === "single" ? (
-                    item.hideRadio ? (
-                      <Body>{item.label}</Body>
-                    ) : (
-                      <Radio
-                          checked={item.checked}
-                          id={`${item.id}-${item.label}`}
-                          label={item.label}
-                          name={inputName}
-                          onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
-                            handleRadioButtonClick(e)
-                          }
-                          padding={item.children ? "none" : "xs"}
-                          type="radio"
-                          value={item.label}
-                      />
-                    )
-                  ) : (
-                    <Checkbox id={item.id}
-                        text={item.label}
-                    >
-                        <input
-                            checked={item.checked}
-                            name={item.label}
-                            onChange={(e) => {
-                              handledropdownItemClick(e, !item.checked);
-                            }}
-                            type="checkbox"
-                            value={item.label}
-                        />
-                    </Checkbox>
-                  )}
-                  {/* Render children next to the checkbox */}
-                  {children && (
-                    typeof children === "function" ? children(item) : children
-                  )}
-                </div>
-                {isTreeRowExpanded(item) &&
-                  item.children &&
-                  item.children.length > 0 &&
-                  (variant === "single" || !filterItem) && (
-                    <div>{renderNestedOptions(item.children)}</div>
-                  )}
-              </li>
-            </div>
-          );
-        })}
-    </ul>
-  );
-};
-export default MultiLevelSelectOptions;

data/app/pb_kits/playbook/pb_timeline/_date_area.tsx DELETED Viewed

@@ -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 TimelineDateAreaProps = {
-  date?: Date,
-  children?: React.ReactNode,
-  className?: string,
-  htmlOptions?: { [key: string]: any },
-} & GlobalProps
-const TimelineDateArea: React.FC<TimelineDateAreaProps> = ({
-  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 TimelineDateArea

data/app/pb_kits/playbook/pb_timeline/_detail_area.tsx DELETED Viewed

@@ -1,29 +0,0 @@
-import React from 'react'
-import classnames from 'classnames'
-import { buildHtmlProps } from '../utilities/props'
-import { globalProps, GlobalProps } from "../utilities/globalProps"
-type TimelineDetailAreaProps = {
-  children?: React.ReactNode,
-  className?: string,
-  htmlOptions?: { [key: string]: any },
-} & GlobalProps
-const TimelineDetailArea: React.FC<TimelineDetailAreaProps> = ({
-  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 TimelineDetailArea

data/app/pb_kits/playbook/pb_timeline/_node_area.tsx DELETED Viewed

@@ -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 TimelineNodeAreaProps = {
-  icon?: string,
-  iconColor?: 'default' | 'royal' | 'blue' | 'purple' | 'teal' | 'red' | 'yellow' | 'green',
-  children?: React.ReactNode,
-  className?: string,
-  htmlOptions?: { [key: string]: any },
-} & GlobalProps
-const TimelineNodeArea: React.FC<TimelineNodeAreaProps> = ({
-  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 TimelineNodeArea

data/app/pb_kits/playbook/pb_timeline/date_area.html.erb DELETED Viewed

@@ -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 DELETED Viewed

@@ -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 DELETED Viewed

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

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

@@ -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 DELETED Viewed

@@ -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 DELETED Viewed

@@ -1,72 +0,0 @@
-import React from 'react'
-import Timeline from '../_timeline'
-import TimelineItem from '../_item'
-import TimelineDateArea from '../_date_area'
-import TimelineNodeArea from '../_node_area'
-import TimelineDetailArea from '../_detail_area'
-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}
-    >
-      <TimelineItem lineStyle="solid"
-          {...props}
-      >
-        <TimelineDateArea>
-          <Title size={2}
-              text='Any Kit Here'
-          />
-        </TimelineDateArea>
-        <TimelineNodeArea icon="user"
-            iconColor="royal"
-        />
-        <TimelineDetailArea>
-          <TitleDetail detail="37-27 74th Street"
-              title="Jackson Heights"
-              {...props}
-          />
-        </TimelineDetailArea>
-      </TimelineItem>
-      <TimelineItem lineStyle="dotted"
-          {...props}
-      >
-        <TimelineNodeArea>
-          <Pill text="Any Kit"
-              variant="success"
-          />
-        </TimelineNodeArea>
-        <TimelineDetailArea>
-          <TitleDetail detail="81 Gate St Brooklyn"
-              title="Greenpoint"
-              {...props}
-          />
-        </TimelineDetailArea>
-      </TimelineItem>
-      <TimelineItem lineStyle="solid"
-          {...props}
-      >
-        <TimelineDateArea date={new Date(new Date().setDate(new Date().getDate() + 1))} />
-        <TimelineNodeArea icon="map-marker-alt"
-            iconColor="purple"
-        />
-        <TimelineDetailArea>
-          <TitleDetail detail="72 E St Astoria"
-              title="Society Hill"
-              {...props}
-          />
-        </TimelineDetailArea>
-      </TimelineItem>
-    </Timeline>
-  </div>
-)
-export default TimelineWithChildren

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

@@ -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 DELETED Viewed

@@ -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 DELETED Viewed

@@ -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