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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

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