playbook_ui_docs 12.24.0.pre.alpha.PLAY603datepickerquickpickinputpresetdropdown752 → 12.24.0.pre.alpha.PLAY603datepickerquickpickinputpresetdropdown756

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 239200074c880075f36efbe3ee4e6de50e18377f641d648decd3b85e2e2d86c4
-  data.tar.gz: da190086fcee20b9d5bb85cac469837cb1fc288b0b1dda8ee429fe2321578f6a
+  metadata.gz: d6225c80e9ea2e1261123264578e16b2447f1be58186099f52c6a45a656d55c4
+  data.tar.gz: a4703e71bbac0e4689611a54777cceddefd5737297d267572062ce60ea498384
 SHA512:
-  metadata.gz: fc3b741590f2263823a9708010d007348fb44dcaa2770d230f070103e30e09f0e188ecde5940957b751b784562aa31f996d1dcbaa597b0d73720a5d0690308b4
-  data.tar.gz: a7503dd23ce5daad30da4d8397102d892eaba9ba5b98ff6db13576757bc98e1e5bb2a057a0636096e5aabf2e9fbe5fbdef5e58250469760d9f7186ccb18358f1
+  metadata.gz: eae58736f2a0c22060768c6144d9615376e7f6f8a319c2bc4d371ed5109ccc2d5babba4bb5b4fa1a5feb7285ec758ef99d69b19a689baa112de7d5a3329f95a4
+  data.tar.gz: 3d8d644d3e1abbd3e518a6ad0eab22c81e3907d32eaa2db8241752d4b911d548b45acf556f325bbe33f467ccefd07d21035fbbd05f41c098c87da42cac2081d2

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_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'