playbook_ui 12.37.0.pre.alpha.PLAYaddingdatapropselectkit1071 → 12.37.0.pre.alpha.svgiconmethods1064

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 1c4ed389de4d3d4fb6707f7b6d320cb5fab04f242dd3a85dd13d36fd27bed1bb
-  data.tar.gz: 730de6094c4243b515b6c07950896fff797c699b65214d691ba5cfe116137e59
+  metadata.gz: 14c36bf2dc83555d191d529d857f9be98bed92ff0165962b37676c269dee8c44
+  data.tar.gz: 36997b2084a332b87ef58515b6a3263e633c2e9f873bb754ad71282a2babef31
 SHA512:
-  metadata.gz: 999f9f2a0a7b74a1db4a819b61dceef4a283fb3c2965185475cca1c73c0fdc071013bde30b9dd0b6df7a1cee7824b1085a822969ada3d299a8a130b8317d545c
-  data.tar.gz: 318dbf4af0bea085d7ca027bb6c5da323d73655f33d2704f3479c92a5694a61723bfabc57262bb68b4fb4ae0975a5d492ceee6d63c9f9151862dd1ab2e0c7de4
+  metadata.gz: 96695e4ab6365e311252d3b7b02971bbcb418b1bae241f7d23cdeef069d469ccf01db4739ae41c8f1b3db91b939d1851f0be4301e789988add39902acc538c64
+  data.tar.gz: 1b88816484853815d500c9629c80e36970d7c238be5b017d88ed2f761e81525b4073e0c55135dfbfeacc385fc653fdb593eb7f9ff70ad17d44edfc09a1be1ff2

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

@@ -1,9 +1,9 @@
 import React from "react";
 import classnames from "classnames";
 
+import DateTime from "../pb_kit/dateTime";
 import { buildAriaProps, buildCss, buildDataProps } from "../utilities/props";
 import { globalProps } from "../utilities/globalProps";
-import DateTime from '../pb_kit/dateTime';
 
 import Body from "../pb_body/_body";
 import Caption from "../pb_caption/_caption";
@@ -20,7 +20,7 @@ type PbDateProps = {
   showIcon?: boolean;
   size?: "sm" | "md" | "lg";
   unstyled?: boolean;
-  value: Date;
+  value: string | Date;
 };
 
 const PbDate = (props: PbDateProps) => {
@@ -37,11 +37,12 @@ const PbDate = (props: PbDateProps) => {
     value,
   } = props;
 
-  const weekday = DateTime.toWeekday(value);
-  const month = DateTime.toMonth(value);
-  const day = DateTime.toDay(value);
-  const year = DateTime.toYear(value);
-  const currentYear = new Date().getFullYear();
+  const dateTimestamp = new DateTime({ value: value });
+  const weekday = dateTimestamp.toWeekday();
+  const month = dateTimestamp.toMonth();
+  const day = dateTimestamp.toDay();
+  const year = dateTimestamp.toYear();
+  const currentYear = new Date().getFullYear().toString();
 
   const ariaProps = buildAriaProps(aria);
   const dataProps = buildDataProps(data);

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

@@ -7,7 +7,7 @@ const DateAlignment = (props) => {
       <FormattedDate
           dayOfWeek
           icon
-          value={new Date('25 Dec 1995')}
+          value="1995-12-25"
           {...props}
       />
 
@@ -17,7 +17,7 @@ const DateAlignment = (props) => {
           alignment="center"
           dayOfWeek
           icon
-          value={new Date('25 Dec 2020')}
+          value="2020-12-25"
           {...props}
       />
 

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

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Date as FormattedDate, Caption, Title } from '../../'
+import { Date as FormattedDate } from '../../'
 
 const DateDefault = (props) => {
   return (
@@ -12,20 +12,9 @@ const DateDefault = (props) => {
 
       <br />
 
-      <div style={{display: "flex", columnGap: 4}}>
-        <FormattedDate
-            size="sm"
-            value={"2012-08-03"}
-            {...props}
-        />
-        <Caption>{"(Hyphenated Date)"}</Caption>
-      </div>
-
-      <br />
-
       <FormattedDate
           size="sm"
-          value={new Date('03 Aug 2012')}
+          value="2012-08-03"
           {...props}
       />
 
@@ -34,7 +23,7 @@ const DateDefault = (props) => {
       <FormattedDate
           showDayOfWeek
           size="sm"
-          value={new Date('03 Dec 2017')}
+          value="2017-12-03"
           {...props}
       />
 
@@ -48,21 +37,8 @@ const DateDefault = (props) => {
 
       <br />
 
-      <div style={{display: "flex", columnGap: 4}}>
-        <FormattedDate
-            value={"2012-08-03"}
-            {...props}
-        />
-        <Title
-            size={4}
-            text={"(Hyphenated Date)"}
-        />
-      </div>
-
-      <br />
-
       <FormattedDate
-          value={new Date('03 Aug 2012')}
+          value="2012-08-03"
           {...props}
       />
 
@@ -70,7 +46,7 @@ const DateDefault = (props) => {
 
       <FormattedDate
           showDayOfWeek
-          value={new Date('03 Dec 2017')}
+          value="2017-12-03"
           {...props}
       />
     </>

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

@@ -21,7 +21,7 @@ const DateUnstyled = (props) => {
       <Title size={1}>
         <FormattedDate
             unstyled
-            value={new Date('25 Dec 1995')}
+            value="1995-12-25"
             {...props}
         />
       </Title>
@@ -36,7 +36,7 @@ const DateUnstyled = (props) => {
             showDayOfWeek
             showIcon
             unstyled
-            value={new Date('25 Dec 1995')}
+            value="1995-12-25"
             {...props}
         />
       </Caption>

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

@@ -7,7 +7,7 @@ const DateVariants = (props) => {
       <FormattedDate
           showIcon
           size="sm"
-          value={new Date('25 Dec 1995')}
+          value="1995-12-25"
           {...props}
       />
 
@@ -15,7 +15,7 @@ const DateVariants = (props) => {
       <br />
 
       <FormattedDate
-          value={new Date('25 Dec 1995')}
+          value="1995-12-25"
           {...props}
       />
 
@@ -24,7 +24,7 @@ const DateVariants = (props) => {
 
       <FormattedDate
           showIcon
-          value={new Date('25 Dec 1995')}
+          value="1995-12-25"
           {...props}
       />
 
@@ -33,7 +33,7 @@ const DateVariants = (props) => {
 
       <FormattedDate
           showDayOfWeek
-          value={new Date('25 Dec 1995')}
+          value="1995-12-25"
           {...props}
       />
 
@@ -43,7 +43,7 @@ const DateVariants = (props) => {
       <FormattedDate
           showDayOfWeek
           showIcon
-          value={new Date('25 Dec 1995')}
+          value="1995-12-25"
           {...props}
       />
     </div>

data/app/pb_kits/playbook/pb_date_range_inline/_date_range_inline.tsx

@@ -3,7 +3,7 @@ import classnames from "classnames";
 
 import { globalProps } from "../utilities/globalProps";
 import { buildCss, buildDataProps } from "../utilities/props";
-import DateTime from '../pb_kit/dateTime';
+import DateTime from "../pb_kit/dateTime";
 
 import Body from "../pb_body/_body";
 import Caption from "../pb_caption/_caption";
@@ -21,16 +21,18 @@ type DateRangeInlineProps = {
   endDate?: Date;
 };
 
-const dateTimestamp = (dateValue: Date, includeYear: boolean) => {
+const dateTimestamp = (dateValue: Date | string, includeYear: boolean) => {
+  const date = new DateTime({ value: dateValue });
   if (includeYear) {
-    return `${DateTime.toMonth(dateValue)} ${DateTime.toDay(dateValue)}, ${DateTime.toYear(dateValue)}`;
+    return `${date.toMonth()} ${date.toDay()}, ${date.toYear()}`;
   } else {
-    return `${DateTime.toMonth(dateValue)} ${DateTime.toDay(dateValue)}`;
+    return `${date.toMonth()} ${date.toDay()}`;
   }
 };
 
-const dateTimeIso = (dateValue: Date) => {
-  return DateTime.toIso(dateValue);
+const dateTimeIso = (dateValue: Date | string) => {
+  const date = new DateTime({ value: dateValue });
+  return date.toIso();
 };
 
 const DateRangeInline = (props: DateRangeInlineProps) => {
@@ -50,17 +52,14 @@ const DateRangeInline = (props: DateRangeInlineProps) => {
       <>
         {icon && (
           <>
-            <Body color="light"
-                key={Math.random()}
-                tag="span"
-            >
+            <Body color="light" key={Math.random()} tag="span">
               <Icon
-                  className="pb_date_range_inline_icon"
-                  dark={dark}
-                  fixedWidth
-                  icon="calendar-alt"
-                  size={size}
-                  tag="span"
+                className="pb_date_range_inline_icon"
+                dark={dark}
+                fixedWidth
+                icon="calendar-alt"
+                size={size}
+                tag="span"
               />
             </Body>
           </>
@@ -79,7 +78,7 @@ const DateRangeInline = (props: DateRangeInlineProps) => {
 
   const dateRangeClasses = buildCss("pb_date_range_inline_kit", align);
   const dataProps = buildDataProps(data)
-  const renderTime = (date: Date) => {
+  const renderTime = (date: Date | string) => {
     return (
       <time dateTime={dateTimeIso(date)}>
         {dateInCurrentYear() ? (
@@ -93,30 +92,24 @@ const DateRangeInline = (props: DateRangeInlineProps) => {
 
   return (
     <div
-        {...dataProps}
-        className={classnames(dateRangeClasses, globalProps(props), className)}
+    {...dataProps}
+      className={classnames(dateRangeClasses, globalProps(props), className)}
     >
       <div className="pb_date_range_inline_wrapper">
         {size == "xs" && (
           <>
             {iconContent()}
-            <Caption dark={dark}
-                tag="span"
-            >
+            <Caption dark={dark} tag="span">
               {renderTime(startDate)}
             </Caption>
-            <Caption dark={dark}
-                tag="span"
-            >
+            <Caption dark={dark} tag="span">
               <Icon
-                  className="pb_date_range_inline_arrow"
-                  fixedWidth
-                  icon="long-arrow-right"
+                className="pb_date_range_inline_arrow"
+                fixedWidth
+                icon="long-arrow-right"
               />
             </Caption>
-            <Caption dark={dark}
-                tag="span"
-            >
+            <Caption dark={dark} tag="span">
               {renderTime(endDate)}
             </Caption>
           </>
@@ -125,25 +118,18 @@ const DateRangeInline = (props: DateRangeInlineProps) => {
         {size == "sm" && (
           <>
             {iconContent()}
-            <Body dark={dark}
-                tag="span"
-            >
+            <Body dark={dark} tag="span">
               {renderTime(startDate)}
             </Body>
-            <Body color="light"
-                dark={dark}
-                tag="span"
-            >
+            <Body color="light" dark={dark} tag="span">
               <Icon
-                  className="pb_date_range_inline_arrow"
-                  dark={dark}
-                  fixedWidth
-                  icon="long-arrow-right"
+                className="pb_date_range_inline_arrow"
+                dark={dark}
+                fixedWidth
+                icon="long-arrow-right"
               />
             </Body>
-            <Body dark={dark}
-                tag="span"
-            >
+            <Body dark={dark} tag="span">
               {renderTime(endDate)}
             </Body>
           </>

data/app/pb_kits/playbook/pb_date_range_stacked/_date_range_stacked.tsx

@@ -14,9 +14,9 @@ type DateRangeStackedProps = {
   className?: string | string[],
   data?: string,
   dark?: boolean,
-  endDate: Date,
+  endDate: string,
   id?: string,
-  startDate: Date,
+  startDate: string,
 }
 
 const DateRangeStacked = (props: DateRangeStackedProps) => {
@@ -29,9 +29,7 @@ const DateRangeStacked = (props: DateRangeStackedProps) => {
   const dataProps = buildDataProps(data)
 
   return (
-    <div {...dataProps}
-        className={css}
-    >
+    <div {...dataProps} className={css}>
       <Flex vertical="center">
         <FlexItem>
           <DateYearStacked

data/app/pb_kits/playbook/pb_date_stacked/_date_stacked.tsx

@@ -1,9 +1,9 @@
 import React from "react";
 
 import classnames from "classnames";
+import DateTime from "../pb_kit/dateTime";
 import { buildCss, buildDataProps } from "../utilities/props";
 import { globalProps } from "../utilities/globalProps";
-import DateTime from '../pb_kit/dateTime';
 
 import Caption from "../pb_caption/_caption";
 import Title from "../pb_title/_title";
@@ -14,7 +14,7 @@ type DateStackedProps = {
   className?: string | string[];
   dark?: boolean;
   data?: string;
-  date: Date;
+  date: string | Date;
   size?: "sm" | "md";
   id?: string;
   reverse?: boolean;
@@ -45,42 +45,39 @@ const DateStacked = (props: DateStackedProps) => {
     className
   );
 
-  const currentYear = new Date().getFullYear()
-  const inputYear = DateTime.toYear(date);
+  const currentYear = new Date().getFullYear().toString();
+  const dateTimestamp = new DateTime({ value: date });
+  const inputYear = dateTimestamp.toYear().toString();
   const dataProps = buildDataProps(data)
 
   return (
     <>
       {bold == false ? (
-        <div {...dataProps}
-            className={classes}
-        >
+        <div {...dataProps} className={classes}>
           <div className="pb_date_stacked_day_month">
-            <Caption text={DateTime.toMonth(date).toUpperCase()} />
+            <Caption text={dateTimestamp.toMonth().toUpperCase()} />
             <Title
-                dark={dark}
-                size={sizes[size]}
-                text={DateTime.toDay(date).toString()}
+              dark={dark}
+              size={sizes[size]}
+              text={dateTimestamp.toDay()}
             />
           </div>
           {currentYear != inputYear && <Caption size="xs">{inputYear}</Caption>}
         </div>
       ) : (
-          <div {...dataProps}
-              className={classes}
-          >
+          <div {...dataProps} className={classes}>
             <div className="pb_date_stacked_day_month">
-              <Title
-                  bold
-                  dark={dark}
-                  size="4"
-                  text={DateTime.toMonth(date)}
+              <Title 
+                bold 
+                dark={dark} 
+                size="4" 
+                text={dateTimestamp.toMonth()} 
               />
-              <Title
-                  bold
-                  dark={dark}
-                  size="4"
-                  text={DateTime.toDay(date).toString()}
+              <Title 
+                bold 
+                dark={dark} 
+                size="4" 
+                text={dateTimestamp.toDay()} 
               />
               {currentYear != inputYear && <Title size="4">{inputYear}</Title>}
             </div>

data/app/pb_kits/playbook/pb_date_time/_date_time.tsx

@@ -13,7 +13,7 @@ type DateTimeProps = {
   aria?: { [key: string]: string; },
   className?: string,
   data?: { [key: string]: string; },
-  datetime: Date,
+  datetime: string,
   id?: string,
   size?: "sm" | "md",
   showDayOfWeek: boolean,

data/app/pb_kits/playbook/pb_date_time/dateTime.test.js

@@ -89,7 +89,7 @@ describe('DateTime Kit', () => {
     const kit = screen.getByTestId(testId)
     const text = kit.querySelector('.pb_time_kit_md.ml_sm')
 
-    expect(text.textContent).toEqual('2:00p GMT+9')
+    expect(text.textContent).toEqual('2:00p JST')
   })
   test('renders DatePicker size', () => {
     render(

data/app/pb_kits/playbook/pb_date_time_stacked/_date_time_stacked.tsx

@@ -12,8 +12,8 @@ import DateStacked from '../pb_date_stacked/_date_stacked'
 
 type DateTimeStackedProps = {
   id?: string,
-  date: Date,
-  datetime: Date,
+  date: string,
+  datetime: string,
   dark: boolean,
   timeZone?: string,
 }

data/app/pb_kits/playbook/pb_date_time_stacked/date_time_stacked.test.js

@@ -34,7 +34,7 @@ test('renders time in default timezone', () => {
 test('renders time in timezone', () => {
   props.timeZone = 'Asia/Tokyo'
   const kit = renderKit(DateTimeStacked, props)
-  expect(kit).toHaveTextContent(`${monthDayYear}2:00aGMT+9`)
+  expect(kit).toHaveTextContent(`${monthDayYear}2:00aJST`)
 })
 
 test('renders time in timezone', () => {

data/app/pb_kits/playbook/pb_date_year_stacked/_date_year_stacked.tsx

@@ -1,9 +1,9 @@
 import React from 'react'
 import classnames from 'classnames'
 
+import DateTime from '../pb_kit/dateTime'
 import { buildCss, buildDataProps } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps'
-import DateTime from '../pb_kit/dateTime';
 
 import Body from '../pb_body/_body'
 import Title from '../pb_title/_title'
@@ -13,12 +13,13 @@ type DateYearStackedProps = {
   className?: string | string[],
   dark?: boolean,
   data?: string,
-  date: Date,
+  date: string,
   id?: string,
 }
 
 const DateYearStacked = (props: DateYearStackedProps) => {
   const { align = 'left', className, dark = false, date, data={} } = props
+  const dateTimestamp = new DateTime({ value: date })
   const css = classnames(
     buildCss('pb_date_year_stacked', align),
     globalProps(props),
@@ -28,14 +29,15 @@ const DateYearStacked = (props: DateYearStackedProps) => {
 
   return (
     <div {...dataProps}
-        className={css}
-    >
+    className={css}>
       <Title
           dark={dark}
           size={4}
-          text={`${DateTime.toDay(date)} ${DateTime.toMonth(date).toUpperCase()}`}
+          text={`${dateTimestamp.toDay()} ${dateTimestamp
+          .toMonth()
+          .toUpperCase()}`}
       />
-      <Body color="light">{DateTime.toYear(date)}</Body>
+      <Body color="light">{dateTimestamp.toYear()}</Body>
     </div>
   )
 }

data/app/pb_kits/playbook/pb_icon/docs/_icon_animate.html.erb

@@ -1,3 +1,4 @@
 <p><%= pb_rails("icon", props: { icon: "spinner", spin: true, fixed_width: true, size: "2x" }) %> <span>Spin</span></p>
 <br/>
 <p><%= pb_rails("icon", props: { icon: "spinner", pulse: true, fixed_width: true, size: "2x" }) %> <span>Pulse</span></p>
+

data/app/pb_kits/playbook/pb_icon/docs/_icon_custom.html.erb

@@ -14,3 +14,5 @@
     parent element's css color properties."
   } ) %>
 </div>
+
+

data/app/pb_kits/playbook/pb_icon/docs/_icon_svg.html.erb

@@ -0,0 +1,5 @@
+<%= pb_rails("icon", props: { size: "5x", custom_icon: "copilot", padding_left: "xl" } ) %>
+<%= pb_rails("icon", props: { size: "5x", custom_icon: "squirrel", padding_left: "xl" } ) %>
+
+
+

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

@@ -1,14 +1,15 @@
 examples:
   rails:
-  - icon_default: Icon Default
-  - icon_rotate: Icon Rotate
-  - icon_flip: Icon Flip
-  - icon_animate: Icon Animation
-  - icon_pull: Icon Pull
-  - icon_border: Icon Border
-  - icon_sizes: Icon Sizes
-  - icon_custom: Icon Custom
-  - icon_fa_kit: Icon with FontAwesome Kit
+  # - icon_default: Icon Default
+  # - icon_rotate: Icon Rotate
+  # - icon_flip: Icon Flip
+  # - icon_animate: Icon Animation
+  # - icon_pull: Icon Pull
+  # - icon_border: Icon Border
+  # - icon_sizes: Icon Sizes
+  # - icon_custom: Icon Custom
+  # - icon_fa_kit: Icon with FontAwesome Kit
+  - icon_svg: Icon SVG
 
   react:
   - icon_default: Icon Default

data/app/pb_kits/playbook/pb_icon/icon.html.erb

@@ -1,15 +1,15 @@
 <% if object.custom_icon %>
-  <%= object.render_svg(object.custom_icon) %>
+  <%= object.embedded_svg(object.custom_icon) %>
 <% elsif object.valid_emoji(object.icon) %>
   <span class="pb_icon_kit_emoji"><%= object.icon.html_safe %></span>
 <% else %>
   <%= content_tag(:i, nil,
       id: object.id,
       data: object.data,
-      class: object.classname
+      class: object.classname,
   ) %>
   <%= content_tag(:span, nil,
       aria: { label: "#{object.icon} icon" }.merge(object.aria),
       hidden: true
   ) %>
-<% end %>
+<% end %>

data/app/pb_kits/playbook/pb_icon/icon.rb

@@ -90,6 +90,25 @@ module Playbook
         end
       end
 
+      def embedded_svg(icon_name)
+        svg_path = Rails.application.config.respond_to?(:icon_path) ? Rails.application.config.icon_path : "app/assets/images"
+        file_path = File.read(Rails.root.join(svg_path, "#{icon_name}.svg"))
+
+        doc = Nokogiri::HTML::DocumentFragment.parse file_path
+        svg = doc.at_css "svg"
+
+        doc.to_html.html_safe
+
+        size_factor = size.to_i
+        if size_factor > 1
+          pixel_size = size_factor * 16
+          svg["width"] = pixel_size.to_s
+          svg["height"] = pixel_size.to_s
+        end
+
+        raw doc
+      end
+
     private
 
       def border_class