diff --git a/app/pb_kits/playbook/pb_date/_date.html.erb b/app/pb_kits/playbook/pb_date/_date.html.erb
index 3d1bef7725..4686ff07fa 100644
--- a/app/pb_kits/playbook/pb_date/_date.html.erb
+++ b/app/pb_kits/playbook/pb_date/_date.html.erb
@@ -4,34 +4,67 @@
class: object.classname,
aria: object.aria) do %>
-
- <% if object.show_icon %>
- <%= pb_rails("body", props: {
- color: "light",
- tag: "div",
- }) do %>
- <%= pb_rails("icon", props: { icon: "calendar-alt", fixed_width: true }) %>
+ <% if object.size == "md" %>
+
+ <% if object.show_icon %>
+ <%= pb_rails("body", props: {
+ color: "light",
+ tag: "div",
+ }) do %>
+ <%= pb_rails("icon", props: { icon: "calendar-alt", fixed_width: true }) %>
+ <% end %>
<% end %>
- <% end %>
-
- <% if object.show_day_of_week %>
- <%= pb_rails("title", props: { tag: "div", text: object.day_of_week, size: 4 }) %>
- <%= pb_rails("body", props: {
- text: "•",
- color: "light",
- tag: "div",
- }) %>
- <% end %>
+
+ <% if object.show_day_of_week %>
+ <%= pb_rails("title", props: { tag: "div", text: object.day_of_week, size: 4 }) %>
+ <%= pb_rails("body", props: {
+ text: "•",
+ color: "light",
+ tag: "div",
+ }) %>
+ <% end %>
-
+
+
+ <%# if not current year %>
+ <% if object.year.to_s == DateTime.now.year.to_s %>
+ <%= pb_rails("title", props: { tag: "div", text: "#{object.month} #{object.day}", size: 4 }) %>
+ <%# if is current year %>
+ <% else %>
+ <%= pb_rails("title", props: { tag: "div", text: "#{object.month} #{object.day}, #{object.year}", size: 4 }) %>
+ <% end %>
- <%# if not current year %>
- <% if object.year.to_s == DateTime.now.year.to_s %>
- <%= pb_rails("title", props: { tag: "div", text: "#{object.month} #{object.day}", size: 4 }) %>
- <%# if is current year %>
<% else %>
- <%= pb_rails("title", props: { tag: "div", text: "#{object.month} #{object.day}, #{object.year}", size: 4 }) %>
- <% end %>
+
+ <% if object.show_icon %>
+ <%= pb_rails("body", props: {
+ color: "light",
+ tag: "div",
+ }) do %>
+ <%= pb_rails("icon", props: { icon: "calendar-alt", fixed_width: true }) %>
+ <% end %>
+ <% end %>
+
+
+ <% if object.show_day_of_week %>
+ <%= pb_rails("caption", props: { tag: "div", text: object.day_of_week }) %>
+ <%= pb_rails("caption", props: {
+ text: "•",
+ color: "light",
+ tag: "div",
+ }) %>
+ <% end %>
+
+
+
+ <%# if not current year %>
+ <% if object.year.to_s == DateTime.now.year.to_s %>
+ <%= pb_rails("caption", props: { tag: "span", text: "#{object.month} #{object.day}" }) %>
+ <%# if is current year %>
+ <% else %>
+ <%= pb_rails("caption", props: { tag: "span", text: "#{object.month} #{object.day}, #{object.year}" }) %>
+ <% end %>
+ <% end %>
<% end %>
diff --git a/app/pb_kits/playbook/pb_date/_date.jsx b/app/pb_kits/playbook/pb_date/_date.jsx
index 255579e603..b9f3928ebe 100644
--- a/app/pb_kits/playbook/pb_date/_date.jsx
+++ b/app/pb_kits/playbook/pb_date/_date.jsx
@@ -2,7 +2,7 @@
import React from 'react'
import DateTime from '../pb_kit/dateTime.js'
-import { Body, Icon, Title } from '../'
+import { Body, Caption, Icon, Title } from '../'
import classnames from 'classnames'
import { globalProps } from '../utilities/globalProps.js'
import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
@@ -15,6 +15,7 @@ type PbDateProps = {
id?: string,
showDayOfWeek?: boolean,
showIcon?: boolean,
+ size?: string,
value: string | date,
}
@@ -27,6 +28,7 @@ const PbDate = (props: PbDateProps) => {
id,
showDayOfWeek = false,
showIcon = false,
+ size = 'md',
value,
} = props
@@ -53,41 +55,77 @@ const PbDate = (props: PbDateProps) => {
className={classes}
id={id}
>
-
-
-
-
+
+
+
+
+
+
+
+
+ {weekday}
+
-
-
-
- {weekday}
-
-
-
- {month}
- {' '}
- {day}
-
-
+
- {`, ${year}`}
+ {month}
+ {' '}
+ {day}
-
-
+
+
+ {`, ${year}`}
+
+
+
+
+ <>
+
+
+
+
+
+
+
+ {weekday}
+
+
+
+
+ {month}
+ {' '}
+ {day}
+
+ {`, ${year}`}
+
+
+ >
+
)
}
diff --git a/app/pb_kits/playbook/pb_date/date.rb b/app/pb_kits/playbook/pb_date/date.rb
index 561b35ede1..e3a7f538e5 100644
--- a/app/pb_kits/playbook/pb_date/date.rb
+++ b/app/pb_kits/playbook/pb_date/date.rb
@@ -19,8 +19,8 @@ class Date
default: false
# Size to be deprecated.
prop :size, type: Playbook::Props::Enum,
- values: %w[lg sm xs],
- default: "sm"
+ values: %w[lg md sm xs],
+ default: "md"
prop :timezone, default: "America/New_York"
def classname
diff --git a/app/pb_kits/playbook/pb_date/docs/_date_alignment.jsx b/app/pb_kits/playbook/pb_date/docs/_date_alignment.jsx
index 862bc573b4..c1ceef856d 100644
--- a/app/pb_kits/playbook/pb_date/docs/_date_alignment.jsx
+++ b/app/pb_kits/playbook/pb_date/docs/_date_alignment.jsx
@@ -1,13 +1,14 @@
import React from 'react'
import { Date as FormattedDate } from '../..'
-const DateAlignment = () => {
+const DateAlignment = (props) => {
return (
@@ -17,6 +18,7 @@ const DateAlignment = () => {
dayOfWeek
icon
value="2020-12-25"
+ {...props}
/>
@@ -24,6 +26,7 @@ const DateAlignment = () => {
)
diff --git a/app/pb_kits/playbook/pb_date/docs/_date_default.html.erb b/app/pb_kits/playbook/pb_date/docs/_date_default.html.erb
index 0299dc5185..bc9cbcfe9c 100644
--- a/app/pb_kits/playbook/pb_date/docs/_date_default.html.erb
+++ b/app/pb_kits/playbook/pb_date/docs/_date_default.html.erb
@@ -1,3 +1,26 @@
+<%= pb_rails("date", props: {
+ date: Date.today,
+ size: "sm"
+}) %>
+
+
+
+<%= pb_rails("date", props: {
+ date: "2012-08-02T15:49:29Z",
+ size: "sm"
+}) %>
+
+
+
+<%= pb_rails("date", props: {
+ date: "2017-12-02T15:49:29Z",
+ show_day_of_week: true,
+ size: "sm"
+}) %>
+
+
+
+
<%= pb_rails("date", props: {
date: Date.today,
}) %>
diff --git a/app/pb_kits/playbook/pb_date/docs/_date_default.jsx b/app/pb_kits/playbook/pb_date/docs/_date_default.jsx
index 48b23bb057..d2000445ef 100644
--- a/app/pb_kits/playbook/pb_date/docs/_date_default.jsx
+++ b/app/pb_kits/playbook/pb_date/docs/_date_default.jsx
@@ -1,26 +1,55 @@
import React from 'react'
import { Date as FormattedDate } from '../../'
-const DateDefault = () => {
+const DateDefault = (props) => {
return (
-
+ <>
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+ >
)
}
diff --git a/app/pb_kits/playbook/pb_date/docs/_date_variants.html.erb b/app/pb_kits/playbook/pb_date/docs/_date_variants.html.erb
index 1712128d18..87fb052e90 100644
--- a/app/pb_kits/playbook/pb_date/docs/_date_variants.html.erb
+++ b/app/pb_kits/playbook/pb_date/docs/_date_variants.html.erb
@@ -3,21 +3,21 @@
date: DateTime.now,
}) %>
-
+
<%= pb_rails("date", props: {
date: DateTime.now,
show_icon: true
}) %>
-
+
<%= pb_rails("date", props: {
date: DateTime.now,
show_day_of_week: true
}) %>
-
+
<%= pb_rails("date", props: {
date: DateTime.now,
diff --git a/app/pb_kits/playbook/pb_date/docs/_date_variants.jsx b/app/pb_kits/playbook/pb_date/docs/_date_variants.jsx
index ebc6b21426..ed7ec08aa1 100644
--- a/app/pb_kits/playbook/pb_date/docs/_date_variants.jsx
+++ b/app/pb_kits/playbook/pb_date/docs/_date_variants.jsx
@@ -1,11 +1,12 @@
import React from 'react'
import { Date as FormattedDate } from '../..'
-const DateVariants = () => {
+const DateVariants = (props) => {
return (
@@ -14,6 +15,7 @@ const DateVariants = () => {
@@ -22,6 +24,7 @@ const DateVariants = () => {
@@ -31,6 +34,7 @@ const DateVariants = () => {
showDayOfWeek
showIcon
value="1995-12-25"
+ {...props}
/>
)
diff --git a/app/pb_kits/playbook/pb_date/docs/example.yml b/app/pb_kits/playbook/pb_date/docs/example.yml
index ce88fabf3a..4b744dd986 100644
--- a/app/pb_kits/playbook/pb_date/docs/example.yml
+++ b/app/pb_kits/playbook/pb_date/docs/example.yml
@@ -5,12 +5,10 @@ examples:
- date_variants: Variants
- date_alignment: Alignment
- date_timezone: Timezones
- - date_dark: Dark
react:
- date_default: Default
- date_variants: Variants
- date_alignment: Alignment
- - date_dark: Dark
diff --git a/app/pb_kits/playbook/pb_date/docs/index.js b/app/pb_kits/playbook/pb_date/docs/index.js
index 7566a5cf71..0c8f17cc9d 100644
--- a/app/pb_kits/playbook/pb_date/docs/index.js
+++ b/app/pb_kits/playbook/pb_date/docs/index.js
@@ -1,4 +1,3 @@
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 DateDark } from './_date_dark.jsx'