playbook_ui 12.23.0 → 12.24.0.pre.alpha.PLAY603datepickerquickpickinputpresetdropdown756

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: f67ec70c0d6e7b36d12c63070302b19e05fb73a0ff350fb0231322450415ed3b
-  data.tar.gz: 437239a1f1bc8fe1b59e9060bd619c7111b3ba70c9a74bcd4bd8535914488439
+  metadata.gz: 545f767b2aa613f9d6490c5bf7bc6d06bb8736a2f06aa1e3a055ad0cb61bd060
+  data.tar.gz: 37ac24266bff35f8d6abf8cbff56e5e0edcc386a1de31f6d28e1633f5a932cf7
 SHA512:
-  metadata.gz: acd3344d113e1132c9ab0f9bb022cdf614ad90f7a71cd1d5b0cadfc8a2eb1e20bab49f34570c7c2574cac06977f542d12013213e1e92288d054d82b379a425c2
-  data.tar.gz: 7b914c68ab0c769a8e75e63600eaf46027ff3afbe8b5ceede26a13f82c2b81ab920b06a12f2d66d7ba426f3194f0f60b206afed133f6817511043ff3016c16e2
+  metadata.gz: 5dbf9d8ef59601a795eda0dc0665a438413454d06fc035b28d01bc78ff2b562b16d96c26615f37f3db5c21bfede6064e93a78cae6ab93ccbc89c2aa4f3b297a0
+  data.tar.gz: c9008cfc3ad1571970c45003a7ca4a4aa71387cd9e3dfdc7bdd03d09d0a4f3d36583f83c2f598597138df99990177dd16b56153a8fc01ffa60af34c3fd5c692e

data/app/pb_kits/playbook/pb_avatar/docs/_avatar_swift.md

@@ -0,0 +1 @@
+![image for avatar](https://images.unsplash.com/photo-1684237276530-a562fa8338b1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=580&q=80)

data/app/pb_kits/playbook/pb_avatar/docs/example.yml

@@ -9,3 +9,5 @@ examples:
     - avatar_monogram: Monogram
     - avatar_no_image: "Bad Image Link"
     - avatar_status: Status
+  swift:
+    - avatar_swift: Default

data/app/pb_kits/playbook/pb_card/_card.tsx

@@ -54,6 +54,7 @@ const Header = (props: CardHeaderProps) => {
   )
 }
 
+
 // Body component
 const Body = (props: CardBodyProps) => {
   const { children, padding = 'md', className } = props

data/app/pb_kits/playbook/pb_date/_date.tsx

@@ -19,6 +19,7 @@ type PbDateProps = {
   showDayOfWeek?: boolean;
   showIcon?: boolean;
   size?: "sm" | "md" | "lg";
+  unstyled?: boolean;
   value: string | Date;
 };
 
@@ -32,6 +33,7 @@ const PbDate = (props: PbDateProps) => {
     showDayOfWeek = false,
     showIcon = false,
     size = "md",
+    unstyled = false,
     value,
   } = props;
 
@@ -52,48 +54,100 @@ const PbDate = (props: PbDateProps) => {
   );
 
   return (
-    <div {...ariaProps} {...dataProps} className={classes} id={id}>
-      {size == "md" || size == "lg" ? (
-        <Title size={4} tag="h4">
-          {showIcon && (
-            <Body className="pb_icon_kit_container" color="light" tag="span">
-              <Icon fixedWidth icon="calendar-alt" />
-            </Body>
-          )}
-
-          {showDayOfWeek && (
-            <>
-              {weekday}
-              <Body color="light" tag="span" text=" • " />
-            </>
-          )}
-
-          <span>
-            {month} {day}
-          </span>
-          {currentYear != year && <span>{`, ${year}`}</span>}
-        </Title>
-      ) : (
-        <>
-          {showIcon && (
-            <Caption className="pb_icon_kit_container" tag="span">
-              <Icon fixedWidth icon="calendar-alt" size="sm" />
-            </Caption>
-          )}
-
-          {showDayOfWeek && (
-            <>
-              <Caption tag="div">{weekday}</Caption>
-              <Caption color="light" tag="div" text=" • " />
-            </>
-          )}
-
-          <Caption tag="span">
-            {month} {day}
-            {currentYear != year && <>{`, ${year}`}</>}
-          </Caption>
-        </>
-      )}
+    <div {...ariaProps}
+        {...dataProps}
+        className={classes}
+        id={id}
+    >
+      {unstyled
+        ? <>
+            {showIcon && (
+              <div>
+                <Icon fixedWidth
+                    icon="calendar-alt"
+                />
+              </div>
+            )}
+
+            {showDayOfWeek && (
+              <>
+                <div>
+                  {weekday}
+                </div>
+
+                <div>{"•"}</div>
+              </>
+            )}
+
+            <span>
+              <span>
+                {month} {day}
+              </span>
+
+              {currentYear != year && <span>{`, ${year}`}</span>}
+            </span>
+          </>
+        : size == "md" || size == "lg"
+          ? (
+            <Title size={4}
+                tag="h4"
+            >
+              {showIcon && (
+                <Body className="pb_icon_kit_container"
+                    color="light"
+                    tag="span"
+                >
+                  <Icon fixedWidth
+                      icon="calendar-alt"
+                  />
+                </Body>
+              )}
+
+              {showDayOfWeek && (
+                <>
+                  {weekday}
+                  <Body color="light"
+                      tag="span"
+                      text=" • "
+                  />
+                </>
+              )}
+
+              <span>
+                {month} {day}
+              </span>
+              {currentYear != year && <span>{`, ${year}`}</span>}
+            </Title>
+            )
+          : (
+              <>
+                {showIcon && (
+                  <Caption className="pb_icon_kit_container"
+                      tag="span"
+                  >
+                    <Icon fixedWidth
+                        icon="calendar-alt"
+                        size="sm"
+                    />
+                  </Caption>
+                )}
+
+                {showDayOfWeek && (
+                  <>
+                    <Caption tag="div">{weekday}</Caption>
+                    <Caption color="light"
+                        tag="div"
+                        text=" • "
+                    />
+                  </>
+                )}
+
+                <Caption tag="span">
+                  {month} {day}
+                  {currentYear != year && <>{`, ${year}`}</>}
+                </Caption>
+              </>
+            )}
     </div>
   );
 };

data/app/pb_kits/playbook/pb_date/date.html.erb

@@ -4,7 +4,28 @@
     class: object.classname,
     aria: object.aria) do %>
 
-  <% if object.size == "md" %>
+  <% if object.unstyled %>
+    <!-- icon -->
+    <% if object.show_icon %>
+      <div><%= pb_rails("icon", props: { icon: "calendar-alt", fixed_width: true }) %></div>
+    <% end %>
+
+    <!-- day_of_week -->
+    <% if object.show_day_of_week %>
+      <div><%= object.day_of_week %></div>
+      <div>•</div>
+    <% end %>
+
+    <!-- month day, year -->
+    <%# if not current year %>
+    <% if object.year.to_s == DateTime.now.year.to_s %>
+      <span><%= "#{object.month} #{object.day}" %></span>
+    <%# if is current year %>
+    <% else %>
+      <span><%= "#{object.month} #{object.day}, #{object.year}" %></span>
+    <% end %>
+
+  <% elsif object.size == "md" || object.size == "lg" %>
     <!-- icon -->
     <% if object.show_icon %>
       <%= pb_rails("body", props: {
@@ -36,7 +57,6 @@
     <% end %>
 
   <% else %>
-
     <!-- icon -->
     <% if object.show_icon %>
       <%= pb_rails("caption", props: {

data/app/pb_kits/playbook/pb_date/date.rb

@@ -15,6 +15,8 @@ module Playbook
                   values: %w[lg md sm xs],
                   default: "md"
       prop :timezone, default: "America/New_York"
+      prop :unstyled, type: Playbook::Props::Boolean,
+                      default: false
 
       def classname
         generate_classname("pb_date_kit", alignment)

data/app/pb_kits/playbook/pb_date/docs/_date_unstyled.html.erb

@@ -0,0 +1,30 @@
+<%= pb_rails("caption", props: { size: "xs", text: "Example with no year" }) %>
+
+<%= pb_rails("date", props: {
+  date: Date.today,
+  unstyled: true
+}) %>
+
+<br />
+
+<%= pb_rails("caption", props: { size: "xs", text: "Example with wrapping typography kit" }) %>
+
+<%= pb_rails("title", props: { size: 1 }) do %>
+  <%= pb_rails("date", props: {
+    date: "2012-08-02T15:49:29Z",
+    unstyled: true
+  }) %>
+<% end %>
+
+<br />
+
+<%= pb_rails("caption", props: { size: "xs", text: "Example with icon + subcaption" }) %>
+
+<%= pb_rails("caption", props: { size: "xs" }) do %>
+  <%= pb_rails("date", props: {
+    date: "2012-08-02T15:49:29Z",
+    show_icon: true,
+    unstyled: true,
+    show_day_of_week: true
+  }) %>
+<% end %>

data/app/pb_kits/playbook/pb_date/docs/_date_unstyled.jsx

@@ -0,0 +1,47 @@
+import React from 'react'
+import { Caption, Date as FormattedDate, Title } from '../../'
+
+const DateUnstyled = (props) => {
+  return (
+    <>
+      <Caption size="xs"
+          text="Basic unstyled example"
+      />
+      <FormattedDate
+          unstyled
+          value={new Date()}
+          {...props}
+      />
+
+      <br />
+
+      <Caption size="xs"
+          text="Example with wrapping typography kit"
+      />
+      <Title size={1}>
+        <FormattedDate
+            unstyled
+            value="1995-12-25"
+            {...props}
+        />
+      </Title>
+
+      <br />
+
+      <Caption size="xs"
+          text="Example with icon + subcaption"
+      />
+      <Caption size="xs">
+        <FormattedDate
+            showDayOfWeek
+            showIcon
+            unstyled
+            value="1995-12-25"
+            {...props}
+        />
+      </Caption>
+    </>
+  )
+}
+
+export default DateUnstyled

data/app/pb_kits/playbook/pb_date/docs/_date_unstyled.md

@@ -0,0 +1 @@
+For alternative typography styles, you can pass a boolean prop called `unstyled` to the `Date` kit and wrap it in any of our typography kits (`Title`, `Body`, `Caption`, etc.). This will allow the `Date` kit to inherit any of our typography styles.

data/app/pb_kits/playbook/pb_date/docs/example.yml

@@ -1,14 +1,14 @@
 examples:
-  
+
   rails:
   - date_default: Default
   - date_variants: Variants
   - date_alignment: Alignment
   - date_timezone: Timezones
-  
-  
+  - date_unstyled: Unstyled
+
   react:
   - date_default: Default
   - date_variants: Variants
   - date_alignment: Alignment
-  
+  - date_unstyled: Unstyled

data/app/pb_kits/playbook/pb_date/docs/index.js

@@ -1,3 +1,4 @@
 export { default as DateDefault } from './_date_default.jsx'
 export { default as DateVariants } from './_date_variants.jsx'
 export { default as DateAlignment } from './_date_alignment.jsx'
+export { default as DateUnstyled } from './_date_unstyled.jsx'

data/app/pb_kits/playbook/pb_date_picker/_date_picker.scss

@@ -6,6 +6,7 @@
 @import "./sass_partials/month_and_year_styles";
 @import "./sass_partials/time_selection_styles";
 @import "./sass_partials/input_styles";
+@import "./sass_partials/quick_pick_styles";
 
 [class^=pb_date_picker_kit] {
   .input_wrapper {
@@ -26,7 +27,32 @@
       @include transition_default;
       border-color: $primary;
     }
+    .add-on-card {
+      border-color: $primary;
+    }
+  }
+
+  @media (hover: hover) {
+    &:hover {
+      .add-on-card {
+        cursor: pointer;
+        background-color: rgba($focus_input_light,$opacity_5);
+      }
+    }
+  }
+  .text_input_wrapper_add_on .add-on-icon {
+    color: $text_lt_light
   }
+
+  .text_input_wrapper_add_on .add-on-right .text_input{
+    cursor: pointer;
+  }
+  
+}
+
+
+.pb_popover_reference_wrapper {
+  display: unset !important
 }
 
 .flatpickr-calendar {

data/app/pb_kits/playbook/pb_date_picker/_date_picker.tsx

@@ -30,7 +30,7 @@ type DatePickerProps = {
   inputAria?: { [key: string]: string },
   inputData?: { [key: string]: string },
   inputOnChange?: (e: React.FormEvent<HTMLInputElement>) => void,
-  inputValue?: any,
+  inputValue?: string,
   label?: string,
   maxDate: string,
   minDate: string,
@@ -39,7 +39,7 @@ type DatePickerProps = {
   placeholder?: string,
   positionElement?: HTMLElement | null,
   scrollContainer?: string,
-  selectionType?: "month" | "week",
+  selectionType?: "month" | "week"| "quickpick",
   showTimezone?: boolean,
   staticPosition: boolean,
   timeFormat?: string,
@@ -96,46 +96,46 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
   const inputAriaProps = buildAriaProps(inputAria)
   const inputDataProps = buildDataProps(inputData)
 
+useEffect(() => {
+  datePickerHelper({
+    allowInput,
+    defaultDate,
+    disableDate,
+    disableRange,
+    disableWeekdays,
+    enableTime,
+    format,
+    hideIcon,
+    inLine,
+    maxDate,
+    minDate,
+    mode,
+    onChange,
+    onClose,
+    pickerId,
+    plugins,
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    position,
+    positionElement,
+    selectionType,
+    showTimezone,
+    staticPosition,
+    yearRange,
+    required: false,
+  }, scrollContainer)
+})
   const filteredProps = {...props}
   delete filteredProps?.position
 
   const classes = classnames(
     buildCss('pb_date_picker_kit'),
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     //@ts-ignore
     globalProps(filteredProps),
     error ? 'error' : null,
     className
   )
-
-  useEffect(() => {
-    datePickerHelper({
-      allowInput,
-      defaultDate,
-      disableDate,
-      disableRange,
-      disableWeekdays,
-      enableTime,
-      format,
-      hideIcon,
-      inLine,
-      maxDate,
-      minDate,
-      mode,
-      onChange,
-      onClose,
-      pickerId,
-      plugins,
-      // @ts-ignore
-      position,
-      positionElement,
-      selectionType,
-      showTimezone,
-      staticPosition,
-      yearRange,
-      required: false,
-    }, scrollContainer)
-  })
-
   const iconWrapperClass = () => {
     let base = 'cal_icon_wrapper'
     if (dark) {
@@ -150,80 +150,84 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
     return base
   }
 
+
   return (
     <div
-      {...ariaProps}
-      {...dataProps}
-      className={classes}
-      id={id}
+        {...ariaProps}
+        {...dataProps}
+        className={classes}
+        id={id}
     >
       <div
-        {...inputAriaProps}
-        {...inputDataProps}
-        className="input_wrapper">
+          {...inputAriaProps}
+          {...inputDataProps}
+          className="input_wrapper"
+      >
 
         <Caption
-          className="pb_date_picker_kit_label"
-          text={hideLabel ? null : label}
+            className="pb_date_picker_kit_label"
+            text={hideLabel ? null : label}
         />
-
-        <div className="date_picker_input_wrapper">
-          <input
-            autoComplete="off"
-            className="date_picker_input"
-            disabled={disableInput}
-            id={pickerId}
-            name={name}
-            onChange={inputOnChange}
-            placeholder={placeholder}
-            value={inputValue}
-          />
-
-          {error && <Body
-            status="negative"
-            text={error}
-            variant={null}
-          />
-          }
-        </div>
-
-        {!hideIcon &&
-          <div
-            className={iconWrapperClass()}
-            id={`cal-icon-${pickerId}`}
-          >
-            <Icon
-              className="cal_icon"
-              icon="calendar-alt"
-            />
-          </div>
-        }
-
-        {hideIcon && inLine ?
-          <div>
-            <div
-              className={iconWrapperClass()}
-              id={`${pickerId}-icon-plus`}
-            >
-              <Icon
-                className="date-picker-plus-icon"
-                icon="plus"
-              />
-            </div>
-            <div
-              className={iconWrapperClass()}
-              id={`${pickerId}-angle-down`}
-            >
-              <Icon
-                className="angle_down_icon"
-                icon="angle-down"
+          <>
+            <div className="date_picker_input_wrapper">
+              <input
+                  autoComplete="off"
+                  className="date_picker_input"
+                  disabled={disableInput}
+                  id={pickerId}
+                  name={name}
+                  onChange={inputOnChange}
+                  placeholder={placeholder}
+                  value={inputValue}
               />
+
+              {error &&
+                  <Body
+                      status="negative"
+                      text={error}
+                      variant={null}
+                  />
+              }
             </div>
-          </div>
-          : null}
+
+            {!hideIcon &&
+              <div
+                  className={iconWrapperClass()}
+                  id={`cal-icon-${pickerId}`}
+              >
+                <Icon
+                    className="cal_icon"
+                    icon="calendar-alt"
+                />
+              </div>
+            }
+
+            {hideIcon && inLine ?
+              <div>
+                <div
+                    className={iconWrapperClass()}
+                    id={`${pickerId}-icon-plus`}
+                >
+                  <Icon
+                      className="date-picker-plus-icon"
+                      icon="plus"
+                  />
+                </div>
+                <div
+                    className={iconWrapperClass()}
+                    id={`${pickerId}-angle-down`}
+                >
+                  <Icon
+                      className="angle_down_icon"
+                      icon="angle-down"
+                  />
+                </div>
+              </div>
+              : null
+            }
+          </>
       </div>
     </div>
   )
 }
-
 export default DatePicker

data/app/pb_kits/playbook/pb_date_picker/date_picker.html.erb

@@ -61,7 +61,8 @@
 
   <%= javascript_tag do %>
     window.addEventListener("DOMContentLoaded", () => {
-        datePickerHelper(<%= object.date_picker_config %>, "<%= object.scroll_container %>")
+      datePickerHelper(<%= object.date_picker_config %>, "<%= object.scroll_container %>")
     })
+
   <% end %>
-<% end %>
+<% end %>

data/app/pb_kits/playbook/pb_date_picker/date_picker.rb

@@ -51,7 +51,7 @@ module Playbook
       prop :position_element, type: Playbook::Props::String
       prop :scroll_container, type: Playbook::Props::String
       prop :selection_type, type: Playbook::Props::Enum,
-                            values: %w[week month none],
+                            values: %w[week month quickpick none],
                             default: "none"
       prop :show_timezone, type: Playbook::Props::Boolean,
                            default: false