playbook_ui_docs 12.23.0.pre.alpha.movemarkdown712 → 12.24.0.pre.alpha.PLAY603datepickerquickpickinputpresetdropdown756

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 85b3d880199e67cf9d3fd6f8b75da123950389bd19a539609b26dc44b13bc0cb
-  data.tar.gz: 89e2c81b82579ab2eb8eae3b57eec420c72096a3ec5b8afb8cfe1c29f3325658
+  metadata.gz: d6225c80e9ea2e1261123264578e16b2447f1be58186099f52c6a45a656d55c4
+  data.tar.gz: a4703e71bbac0e4689611a54777cceddefd5737297d267572062ce60ea498384
 SHA512:
-  metadata.gz: 0c663b58511f351872d1cfa3ec981d4d34698a8b2cbac61a11a27f36b31ab06ff79339b621fd4f0f467c8a17dc937a57487ca14a043c3ba419d7fe73ffc6c019
-  data.tar.gz: 2b2734ad221ed0cf0696bdc47ddaa2ad378430fa7e426b13f657b343a9828518b379b01a7f6c319d9e5816619f958c721685b4cb31ecb6a1b089665287251d29
+  metadata.gz: eae58736f2a0c22060768c6144d9615376e7f6f8a319c2bc4d371ed5109ccc2d5babba4bb5b4fa1a5feb7285ec758ef99d69b19a689baa112de7d5a3329f95a4
+  data.tar.gz: 3d8d644d3e1abbd3e518a6ad0eab22c81e3907d32eaa2db8241752d4b911d548b45acf556f325bbe33f467ccefd07d21035fbbd05f41c098c87da42cac2081d2

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_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/docs/_date_picker_quick_pick.html.erb

@@ -0,0 +1,8 @@
+<%= pb_rails("date_picker", props: {
+  allow_input: true,
+  mode: "range",
+  picker_id: "date-picker-quick-pick",
+  placeholder: "mm/dd/yyyy → mm/dd/yyyy",
+  selection_type: "quickpick"
+}) %>
+

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick.jsx

@@ -0,0 +1,18 @@
+import React from 'react'
+
+import DatePicker from '../_date_picker'
+
+const DatePickerQuickPick = (props) => (
+  <div>
+    <DatePicker
+        allowInput
+        mode="range"
+        pickerId="date-picker-quick-pick"
+        placeholder="mm/dd/yyyy → mm/dd/yyyy"
+        selectionType="quickpick"
+        {...props}
+    />
+  </div>
+)
+
+export default DatePickerQuickPick

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

@@ -8,6 +8,7 @@ examples:
   - date_picker_input: Input Field
   - date_picker_label: Label
   - date_picker_range: Range
+  - date_picker_quick_pick: Range (Quick Pick)
   - date_picker_format: Format
   - date_picker_disabled: Disabled Dates
   - date_picker_min_max: Min Max
@@ -33,6 +34,7 @@ examples:
   - date_picker_on_change: onChange
   - date_picker_on_close: onClose
   - date_picker_range: Range
+  - date_picker_quick_pick: Range (Quick Pick)
   - date_picker_format: Format
   - date_picker_disabled: Disabled Dates
   - date_picker_min_max: Min Max

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

@@ -19,4 +19,5 @@ export { default as DatePickerWeek } from './_date_picker_week.jsx'
 export { default as DatePickerPositions } from './_date_picker_positions.jsx'
 export { default as DatePickerPositionsElement } from './_date_picker_positions_element.jsx'
 export { default as DatePickerAllowInput } from './_date_picker_allow_input'
-export { default as DatePickerOnClose } from './_date_picker_on_close.jsx'
+export { default as DatePickerQuickPick } from './_date_picker_quick_pick'
+export { default as DatePickerOnClose } from './_date_picker_on_close.jsx'

data/app/pb_kits/playbook/pb_time/docs/_time_unstyled.html.erb

@@ -0,0 +1,37 @@
+<%= pb_rails("caption", props: { size: "xs", text: "Example with no year" }) %>
+
+<%= pb_rails("time", props: {
+  show_icon: true,
+  show_timezone: true,
+  time: DateTime.now,
+  timezone: "America/New_York",
+  unstyled: true
+}) %>
+
+<br />
+
+<%= pb_rails("caption", props: { size: "xs", text: "Example with wrapping typography kit" }) %>
+
+<%= pb_rails("title", props: { size: 1 }) do %>
+  <%= pb_rails("time", props: {
+    show_icon: true,
+    show_timezone: true,
+    time: DateTime.now,
+    timezone: "America/New_York",
+    unstyled: true
+  }) %>
+<% end %>
+
+<br />
+
+<%= pb_rails("caption", props: { size: "xs", text: "Example with icon + subcaption" }) %>
+
+<%= pb_rails("caption", props: { size: "xs" }) do %>
+  <%= pb_rails("time", props: {
+    show_icon: true,
+    show_timezone: true,
+    time: DateTime.now,
+    timezone: "America/New_York",
+    unstyled: true
+  }) %>
+<% end %>

data/app/pb_kits/playbook/pb_time/docs/_time_unstyled.jsx

@@ -0,0 +1,58 @@
+import React from 'react'
+import Time from '../_time'
+import Caption from '../../pb_caption/_caption'
+import Title from '../../pb_title/_title'
+
+const TimeUnstyled = (props) => {
+  return (
+    <>
+      <Caption size="xs"
+          text="Basic unstyled example"
+      />
+      <Time
+          date={new Date()}
+          showIcon
+          showTimezone
+          timeZone="America/New_York"
+          unstyled
+          {...props}
+      />
+
+      <br />
+
+      <Caption size="xs"
+          text="Example with wrapping typography kit"
+      />
+      <Title size={1}>
+        <Time
+            date={new Date()}
+            showIcon
+            showTimezone
+            timeZone="America/New_York"
+            unstyled
+            {...props}
+        />
+      </Title>
+
+      <br />
+
+      <Caption size="xs"
+          text="Example with icon + subcaption"
+      />
+      <Caption size="xs">
+        <Time
+            date={new Date()}
+            showIcon
+            showTimezone
+            timeZone="America/New_York"
+            unstyled
+            {...props}
+        />
+      </Caption>
+
+      <br />
+    </>
+  )
+}
+
+export default TimeUnstyled

data/app/pb_kits/playbook/pb_time/docs/_time_unstyled.md

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

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

@@ -6,6 +6,7 @@ examples:
   - time_timestamp: Timestamp Values
   - time_timezone: Handling Timezones
   - time_align: Alignment
+  - time_unstyled: Unstyled
 
   react:
   - time_default: Default
@@ -13,3 +14,4 @@ examples:
   - time_timestamp: Timestamp Values
   - time_timezone: Handling Timezones
   - time_align: Alignment
+  - time_unstyled: Unstyled

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

@@ -3,3 +3,4 @@ export { default as TimeSizes } from './_time_sizes.jsx'
 export { default as TimeTimestamp } from './_time_timestamp.jsx'
 export { default as TimeAlign } from './_time_align.jsx'
 export { default as TimeTimezone } from './_time_timezone.jsx'
+export { default as TimeUnstyled } from './_time_unstyled.jsx'

data/app/pb_kits/playbook/pb_title/docs/_title_light_weight.html.erb

@@ -1 +1,2 @@
 <%= pb_rails("title", props: { text: "Title 1", tag: "h1", size: 1, bold: false }) %>
+<%= pb_rails("title", props: { text: "Title 2", tag: "h2", size: 2, bold: false }) %>

data/app/pb_kits/playbook/pb_title/docs/_title_light_weight.jsx

@@ -1,15 +1,20 @@
-import React from 'react'
+import React from "react"
 
-import Title from '../_title'
+import Title from "../_title"
 
 const TitleLightWeight = (props) => {
   return (
     <div>
-      <Title
-          bold={false}
+      <Title bold={false}
           size={1}
-          tag="h1"
-          text="Title 1"
+          tag='h1'
+          text='Title 1'
+          {...props}
+      />
+      <Title bold={false}
+          size={2}
+          tag='h2'
+          text='Title 2'
           {...props}
       />
     </div>

data/app/pb_kits/playbook/pb_title/docs/_title_light_weight.md

@@ -1,4 +1,4 @@
 ##### Prop
-Title `size 1` will use `font-weight: 700` by default, if you want a lighter font weight, use the `bold` prop set to `false`.
-Title `size 2` & `size 3` uses a light font weight by default and will not accept a bold font weight.
+Title `size 1` & `size 2` will use `font-weight: 700` by default, if you want a lighter font weight, use the `bold` prop set to `false`.
+Title `size 3` uses a light font weight by default and will not accept a bold font weight.
 Title `size 4` uses a heavy font weight by default and will not accept a lighter font weight.