playbook_ui 7.3.0.pre.alpha12 → 7.3.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (80) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/_playbook.scss +3 -1
  3. data/app/pb_kits/playbook/data/menu.yml +2 -2
  4. data/app/pb_kits/playbook/index.js +2 -1
  5. data/app/pb_kits/playbook/pb_background/_background.html.erb +14 -0
  6. data/app/pb_kits/playbook/pb_background/_background.jsx +63 -0
  7. data/app/pb_kits/playbook/pb_background/_background.scss +35 -0
  8. data/app/pb_kits/playbook/pb_background/background.rb +35 -0
  9. data/app/pb_kits/playbook/pb_background/docs/_background_dark.html.erb +3 -0
  10. data/app/pb_kits/playbook/pb_background/docs/_background_dark.jsx +13 -0
  11. data/app/pb_kits/playbook/pb_background/docs/_background_gradient.html.erb +3 -0
  12. data/app/pb_kits/playbook/pb_background/docs/_background_gradient.jsx +13 -0
  13. data/app/pb_kits/playbook/pb_background/docs/_background_image.html.erb +13 -0
  14. data/app/pb_kits/playbook/pb_background/docs/_background_image.jsx +30 -0
  15. data/app/pb_kits/playbook/pb_background/docs/_background_light.html.erb +3 -0
  16. data/app/pb_kits/playbook/pb_background/docs/_background_light.jsx +13 -0
  17. data/app/pb_kits/playbook/pb_background/docs/_background_white.html.erb +3 -0
  18. data/app/pb_kits/playbook/pb_background/docs/_background_white.jsx +14 -0
  19. data/app/pb_kits/playbook/pb_background/docs/_description.md +1 -0
  20. data/app/pb_kits/playbook/pb_background/docs/example.yml +15 -0
  21. data/app/pb_kits/playbook/pb_background/docs/index.js +6 -0
  22. data/app/pb_kits/playbook/pb_date/_date.html.erb +64 -8
  23. data/app/pb_kits/playbook/pb_date/_date.jsx +115 -66
  24. data/app/pb_kits/playbook/pb_date/_date.scss +30 -0
  25. data/app/pb_kits/playbook/pb_date/date.rb +20 -9
  26. data/app/pb_kits/playbook/pb_date/docs/_date_alignment.html.erb +24 -0
  27. data/app/pb_kits/playbook/pb_date/docs/_date_alignment.jsx +35 -0
  28. data/app/pb_kits/playbook/pb_date/docs/_date_default.html.erb +21 -6
  29. data/app/pb_kits/playbook/pb_date/docs/_date_default.jsx +43 -12
  30. data/app/pb_kits/playbook/pb_date/docs/_date_variants.html.erb +27 -0
  31. data/app/pb_kits/playbook/pb_date/docs/_date_variants.jsx +43 -0
  32. data/app/pb_kits/playbook/pb_date/docs/example.yml +4 -0
  33. data/app/pb_kits/playbook/pb_date/docs/index.js +2 -0
  34. data/app/pb_kits/playbook/pb_date_picker/_date_picker.html.erb +19 -14
  35. data/app/pb_kits/playbook/pb_date_time/_date_time.html.erb +31 -0
  36. data/app/pb_kits/playbook/pb_date_time/_date_time.jsx +73 -0
  37. data/app/pb_kits/playbook/pb_date_time/_date_time.scss +26 -0
  38. data/app/pb_kits/playbook/pb_date_time/date_time.rb +29 -0
  39. data/app/pb_kits/playbook/pb_date_time/docs/_date_time_align.html.erb +17 -0
  40. data/app/pb_kits/playbook/pb_date_time/docs/_date_time_align.jsx +35 -0
  41. data/app/pb_kits/playbook/pb_date_time/docs/_date_time_default.html.erb +20 -0
  42. data/app/pb_kits/playbook/pb_date_time/docs/_date_time_default.jsx +38 -0
  43. data/app/pb_kits/playbook/pb_date_time/docs/_date_time_size.html.erb +26 -0
  44. data/app/pb_kits/playbook/pb_date_time/docs/_date_time_size.jsx +75 -0
  45. data/app/pb_kits/playbook/pb_date_time/docs/_description.md +1 -0
  46. data/app/pb_kits/playbook/pb_date_time/docs/example.yml +11 -0
  47. data/app/pb_kits/playbook/pb_date_time/docs/index.js +3 -0
  48. data/app/pb_kits/playbook/pb_flex/_flex.jsx +1 -1
  49. data/app/pb_kits/playbook/pb_flex/_flex.scss +4 -0
  50. data/app/pb_kits/playbook/pb_flex/flex.rb +1 -1
  51. data/app/pb_kits/playbook/pb_form/docs/_form_form_with.html.erb +52 -1
  52. data/app/pb_kits/playbook/pb_form/docs/_form_form_with_validate.html.erb +1 -1
  53. data/app/pb_kits/playbook/pb_form/docs/_form_simple_form.html.erb +1 -1
  54. data/app/pb_kits/playbook/pb_form/docs/_form_simple_form_validate.html.erb +1 -1
  55. data/app/pb_kits/playbook/pb_form/form_builder/date_picker_field.rb +19 -1
  56. data/app/pb_kits/playbook/pb_home_address_street/home_address_street.rb +1 -1
  57. data/app/pb_kits/playbook/pb_progress_step/progress_step.rb +2 -2
  58. data/app/pb_kits/playbook/pb_tooltip/_tooltip.scss +46 -19
  59. data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_default.html.erb +46 -10
  60. data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_white.html.erb +4 -4
  61. data/app/pb_kits/playbook/pb_tooltip/tooltip.rb +3 -2
  62. data/app/pb_kits/playbook/vendor.js +0 -3
  63. data/lib/playbook/version.rb +2 -1
  64. metadata +39 -20
  65. data/app/pb_kits/playbook/pb_collapsible/_collapsible.html.erb +0 -9
  66. data/app/pb_kits/playbook/pb_collapsible/_collapsible.jsx +0 -134
  67. data/app/pb_kits/playbook/pb_collapsible/_collapsible.scss +0 -17
  68. data/app/pb_kits/playbook/pb_collapsible/child_kits/_collapsible_content.html.erb +0 -7
  69. data/app/pb_kits/playbook/pb_collapsible/child_kits/_collapsible_main.html.erb +0 -16
  70. data/app/pb_kits/playbook/pb_collapsible/collapsible.rb +0 -15
  71. data/app/pb_kits/playbook/pb_collapsible/collapsible_content.rb +0 -21
  72. data/app/pb_kits/playbook/pb_collapsible/collapsible_main.rb +0 -24
  73. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_dark.html.erb +0 -10
  74. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_dark.jsx +0 -17
  75. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_default.html.erb +0 -10
  76. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_default.jsx +0 -17
  77. data/app/pb_kits/playbook/pb_collapsible/docs/example.yml +0 -9
  78. data/app/pb_kits/playbook/pb_collapsible/docs/index.js +0 -2
  79. data/app/pb_kits/playbook/pb_collapsible/index.js +0 -82
  80. data/app/pb_kits/playbook/pb_collapsible/useToggler.js +0 -10
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: d1ae42d076ae177de10c6ae634260583ce2c56034d5562ef212bf3400cdec1f3
4
- data.tar.gz: b86670d2e736072dc5cfa9dfe9134535eb06c257e68c26eba05c42b7fbbb4ad4
3
+ metadata.gz: c9b11071227a394af722c14bca8f59f2abc059a816353af4ffa8b5a7694a5eaf
4
+ data.tar.gz: b5eab2ae50132399b89d2a55f6b958148c4e6fbacbe9dbabc9f2ae3311052fc4
5
5
  SHA512:
6
- metadata.gz: b25282fe2aa8b8c1dd5d3b1dddc01bfb34d7e79bf726a95c4fe2b2ce20c76c3a57d72ba5ef1e4275069f0b6942a77f9a2807cdb4c3f754f1d81c491c00efeba5
7
- data.tar.gz: 7caf7691c67d48d5a9b343d0f79cfdcef59095774ec9aa0e7d2e95449f4c231f34a658967c89d52cf2ab61cfeebba3cf48849bdc6a2ed3e71a4ed14c6cb58c3d
6
+ metadata.gz: 9824c9204448f3108c5fdd315aad2572768122ec6f3d3643bb7428d98a5fda418bb6dcd9b1b1853e674e3975323894de257c381293122382022aca10a7a4e150
7
+ data.tar.gz: '09955236a98e1b3da1beb51c977f49c94dd99cf6fa74784d8d3d2f7dc670941c5a8a09a5e10ce9a9a889f3702fe1d30bdd1b78985d037e29edce9b466155b93b'
@@ -1,4 +1,5 @@
1
1
  @import "tokens/fonts";
2
+ @import "pb_background/background";
2
3
  @import "pb_body/body";
3
4
  @import "pb_button/button";
4
5
  @import 'pb_button_toolbar/button_toolbar';
@@ -12,12 +13,12 @@
12
13
  @import 'pb_checkbox/checkbox';
13
14
  @import 'pb_circle_chart/circle_chart';
14
15
  @import 'pb_circle_icon_button/circle_icon_button';
15
- @import 'pb_collapsible/collapsible';
16
16
  @import 'pb_contact/contact';
17
17
  @import 'pb_currency/currency';
18
18
  @import 'pb_dashboard_value/dashboard_value';
19
19
  @import 'pb_date/date';
20
20
  @import 'pb_date_picker/date_picker';
21
+ @import 'pb_date_time/date_time';
21
22
  @import 'pb_date_range_inline/date_range_inline';
22
23
  @import 'pb_date_range_stacked/date_range_stacked';
23
24
  @import 'pb_date_stacked/date_stacked';
@@ -84,3 +85,4 @@
84
85
  @import 'pb_time_stacked/time_stacked';
85
86
  @import 'pb_weekday_stacked/weekday_stacked';
86
87
  @import './utilities/spacing';
88
+
@@ -7,13 +7,13 @@ samples:
7
7
  kits:
8
8
  - avatar
9
9
  - avatar_action_button
10
+ - background
10
11
  - buttons:
11
12
  - button
12
13
  - button_toolbar
13
14
  - circle_icon_button
14
15
  - card
15
16
  - checkbox
16
- - collapsible
17
17
  - charts_and_graphs:
18
18
  - bar_graph
19
19
  - circle_chart
@@ -21,7 +21,6 @@ kits:
21
21
  - gauge
22
22
  - legend
23
23
  - line_graph
24
-
25
24
  - filter
26
25
  - fixed_confirmation_toast
27
26
  - flex
@@ -79,6 +78,7 @@ kits:
79
78
  - date_range_inline
80
79
  - date_range_stacked
81
80
  - date_stacked
81
+ - date_time
82
82
  - date_time_stacked
83
83
  - date_year_stacked
84
84
  - home_address_street
@@ -5,6 +5,7 @@ import 'lazysizes'
5
5
  // React Component JSX Imports from the React Kits
6
6
  export Avatar from './pb_avatar/_avatar.jsx'
7
7
  export AvatarActionButton from './pb_avatar_action_button/_avatar_action_button.jsx'
8
+ export Background from 'pb_background/_background.jsx'
8
9
  export Badge from './pb_badge/_badge.jsx'
9
10
  export BarGraph from './pb_bar_graph/_bar_graph.jsx'
10
11
  export Body from './pb_body/_body.jsx'
@@ -15,7 +16,6 @@ export Card from './pb_card/_card.jsx'
15
16
  export Checkbox from './pb_checkbox/_checkbox.jsx'
16
17
  export CircleChart from './pb_circle_chart/_circle_chart.jsx'
17
18
  export CircleIconButton from './pb_circle_icon_button/_circle_icon_button.jsx'
18
- export Collapsible from './pb_collapsible/_collapsible.jsx'
19
19
  export Contact from './pb_contact/_contact.jsx'
20
20
  export Currency from './pb_currency/_currency.jsx'
21
21
  export DashboardValue from './pb_dashboard_value/_dashboard_value.jsx'
@@ -24,6 +24,7 @@ export DatePicker from './pb_date_picker/_date_picker.jsx'
24
24
  export DateRangeInline from './pb_date_range_inline/_date_range_inline.jsx'
25
25
  export DateRangeStacked from './pb_date_range_stacked/_date_range_stacked.jsx'
26
26
  export DateStacked from './pb_date_stacked/_date_stacked.jsx'
27
+ export DateTime from './pb_date_time/_date_time.jsx'
27
28
  export DateTimeStacked from './pb_date_time_stacked/_date_time_stacked.jsx'
28
29
  export DateYearStacked from './pb_date_year_stacked/_date_year_stacked.jsx'
29
30
  export DistributionBar from './pb_distribution_bar/_distribution_bar.jsx'
@@ -0,0 +1,14 @@
1
+ <%= content_tag(object.tag,
2
+ aria: object.aria,
3
+ data: object.data,
4
+ id: object.id) do %>
5
+ <% if object.image_url.present? %>
6
+ <div class="<%= object.classname %>" style="background-image: url(<%= object.image_url %>);">
7
+ <%= capture(&object.children) %>
8
+ </div>
9
+ <% else %>
10
+ <div class="<%= object.classname %>">
11
+ <%= capture(&object.children) %>
12
+ </div>
13
+ <% end %>
14
+ <% end %>
@@ -0,0 +1,63 @@
1
+ /* @flow */
2
+
3
+ import React from 'react'
4
+ import classnames from 'classnames'
5
+ import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
6
+ import { globalProps } from '../utilities/globalProps.js'
7
+
8
+ type BackgroundProps = {
9
+ aria?: object,
10
+ backgroundColor?: 'gradient' | 'dark' | 'light' | 'white',
11
+ children?: array<React.ReactNode> | React.ReactNode,
12
+ className?: string,
13
+ data?: object,
14
+ id?: string,
15
+ imageUrl?: string,
16
+ padding?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl',
17
+ tag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'div',
18
+ }
19
+
20
+ const Background = (props: BackgroundProps) => {
21
+ const {
22
+ aria = {},
23
+ backgroundColor = 'light',
24
+ children,
25
+ className,
26
+ data = {},
27
+ id,
28
+ imageUrl = '',
29
+ tag = 'div',
30
+ } = props
31
+
32
+ const ariaProps = buildAriaProps(aria)
33
+ const dataProps = buildDataProps(data)
34
+ const classes = classnames(buildCss('pb_background_kit'), globalProps(props), `pb_background_color_${backgroundColor}`, className)
35
+ const Tag = `${tag}`
36
+ const backgroundStyle = {
37
+ backgroundImage: `url(${imageUrl})`,
38
+ backgroundSize: 'cover',
39
+ }
40
+
41
+ return (
42
+ <Tag
43
+ {...ariaProps}
44
+ {...dataProps}
45
+ id={id}
46
+ >
47
+ <If condition={imageUrl}>
48
+ <div
49
+ className={classes + 'lazyload blur_up'}
50
+ style={backgroundStyle}
51
+ >
52
+ { children }
53
+ </div>
54
+ <Else />
55
+ <div className={classes}>
56
+ { children }
57
+ </div>
58
+ </If>
59
+ </Tag>
60
+ )
61
+ }
62
+
63
+ export default Background
@@ -0,0 +1,35 @@
1
+ @import "../tokens/colors";
2
+
3
+ $background_colors: (
4
+ "gradient": linear-gradient(135deg, $gradient_start 0%, $gradient_end 100%),
5
+ "dark": $bg_dark,
6
+ "light": $bg_light,
7
+ "white": $white,
8
+ );
9
+
10
+
11
+ [class^=pb_background_kit] {
12
+ max-width: 100%;
13
+ max-height: 100%;
14
+ background-size: cover;
15
+
16
+ @each $name, $color in $background_colors {
17
+ &.pb_background_color_#{$name} {
18
+ background: $color;
19
+ }
20
+ };
21
+
22
+ .blur_up {
23
+ -webkit-filter: blur(6px);
24
+ filter: blur(6px);
25
+ transition: filter 550ms, -webkit-filter 550ms;
26
+ }
27
+
28
+ .blur_up.lazyloaded {
29
+ -webkit-filter: blur(0);
30
+ filter: blur(0);
31
+ }
32
+
33
+
34
+
35
+ }
@@ -0,0 +1,35 @@
1
+ # frozen_string_literal: true
2
+
3
+ module Playbook
4
+ module PbBackground
5
+ class Background
6
+ include Playbook::Props
7
+
8
+ partial "pb_background/background"
9
+
10
+ prop :background_color, type: Playbook::Props::Enum,
11
+ values: %w[gradient dark light white],
12
+ default: "light"
13
+ prop :image_url
14
+
15
+ prop :tag, type: Playbook::Props::Enum,
16
+ values: %w[h1 h2 h3 h4 h5 h6 p div span],
17
+ default: "div"
18
+
19
+
20
+ def classname
21
+ generate_classname("pb_background_kit", image_classname, background_color_classname, separator: " ")
22
+ end
23
+
24
+ private
25
+
26
+ def image_classname
27
+ image_url.present? ? "lazyload blur_up" : ""
28
+ end
29
+
30
+ def background_color_classname
31
+ !image_url.present? ? "pb_background_color_#{background_color}" : ""
32
+ end
33
+ end
34
+ end
35
+ end
@@ -0,0 +1,3 @@
1
+ <%= pb_rails("background", props: { background_color: "dark", padding: "xl" }) do %>
2
+
3
+ <% end %>
@@ -0,0 +1,13 @@
1
+ import React from 'react'
2
+ import { Background } from '../..'
3
+
4
+ const BackgroundDark = () => (
5
+ <div>
6
+ <Background
7
+ backgroundColor="dark"
8
+ padding="xl"
9
+ />
10
+ </div>
11
+ )
12
+
13
+ export default BackgroundDark
@@ -0,0 +1,3 @@
1
+ <%= pb_rails("background", props: { background_color: "gradient", padding: "xl" }) do %>
2
+
3
+ <% end %>
@@ -0,0 +1,13 @@
1
+ import React from 'react'
2
+ import { Background } from '../..'
3
+
4
+ const BackgroundGradient = () => (
5
+ <div>
6
+ <Background
7
+ backgroundColor="gradient"
8
+ padding="xl"
9
+ />
10
+ </div>
11
+ )
12
+
13
+ export default BackgroundGradient
@@ -0,0 +1,13 @@
1
+ <%= pb_rails("background", props: { image_url: "https://images.unsplash.com/photo-1528459801416-a9e53bbf4e17?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=80", padding: "lg" }) do %>
2
+ <%= pb_rails("flex", props: { horizontal: "center", orientation: "column" }) do %>
3
+ <%= pb_rails("flex/flex_item") do %>
4
+ <%= pb_rails("title", props: { dark: true, size: 1, text: "Background Kit Image" })%>
5
+ <% end %>
6
+ <%= pb_rails("flex/flex_item", props: { padding: "lg" }) do %>
7
+ <%= pb_rails("card", props: { shadow: "deepest" }) do %>
8
+ We cannot seek achievement for ourselves and forget about progress and prosperity for our community... Our ambitions must be broad enough to include the aspirations and needs of others, for their sakes and for our own.
9
+ -Cesar Chavez
10
+ <% end %>
11
+ <% end %>
12
+ <% end %>
13
+ <% end %>
@@ -0,0 +1,30 @@
1
+ import React from 'react'
2
+ import { Background } from '../..'
3
+ import { Card, Flex, FlexItem, Title } from '../..'
4
+
5
+ const BackgroundImage = () => (
6
+ <div>
7
+ <Background imageUrl="https://images.unsplash.com/photo-1528459801416-a9e53bbf4e17?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=80">
8
+ <Flex
9
+ orientation="column"
10
+ vertical="center"
11
+ >
12
+ <FlexItem>
13
+ <Title
14
+ dark
15
+ padding="lg"
16
+ size={1}
17
+ text="Background Kit Image"
18
+ />
19
+ </FlexItem>
20
+ <FlexItem padding="lg">
21
+ <Card shadow="deepest">
22
+ {'We cannot seek achievement for ourselves and forget about progress and prosperity for our community... Our ambitions must be broad enough to include the aspirations and needs of others, for their sakes and for our own. - Cesar Chavez'}
23
+ </Card>
24
+ </FlexItem>
25
+ </Flex>
26
+ </Background>
27
+ </div>
28
+ )
29
+
30
+ export default BackgroundImage
@@ -0,0 +1,3 @@
1
+ <%= pb_rails("background", props: { background_color: "light", padding: "xl" }) do %>
2
+
3
+ <% end %>
@@ -0,0 +1,13 @@
1
+ import React from 'react'
2
+ import { Background } from '../..'
3
+
4
+ const BackgroundLight = () => (
5
+ <div>
6
+ <Background
7
+ backgroundColor="light"
8
+ padding="xl"
9
+ />
10
+ </div>
11
+ )
12
+
13
+ export default BackgroundLight
@@ -0,0 +1,3 @@
1
+ <%= pb_rails("background", props: { background_color: "white", padding: "xl" }) do %>
2
+
3
+ <% end %>
@@ -0,0 +1,14 @@
1
+ import React from 'react'
2
+ import { Background } from '../..'
3
+
4
+ const BackgroundWhite = () => (
5
+ <div>
6
+ <Background
7
+ backgroundColor="white"
8
+ className="blah"
9
+ />
10
+ </div>
11
+
12
+ )
13
+
14
+ export default BackgroundWhite
@@ -0,0 +1 @@
1
+ The background kit is used for adding a background to a page or to any container. Instead of adding a custom class to give something a background, you can now wrap the elements in the background kit and use the `background_color` prop to assign its color. The colors that you can choose from for the `background_color` prop are: gradient, dark, light, and white.
@@ -0,0 +1,15 @@
1
+ examples:
2
+
3
+ rails:
4
+ - background_light: Light
5
+ - background_white: White
6
+ - background_dark: Dark
7
+ - background_gradient: Gradient
8
+ - background_image: Image
9
+
10
+ react:
11
+ - background_light: Light
12
+ - background_white: White
13
+ - background_dark: Dark
14
+ - background_gradient: Gradient
15
+ - background_image: Image
@@ -0,0 +1,6 @@
1
+ export { default as BackgroundLight } from './_background_light.jsx'
2
+ export { default as BackgroundWhite } from './_background_white.jsx'
3
+ export { default as BackgroundDark } from './_background_dark.jsx'
4
+ export { default as BackgroundGradient } from './_background_gradient.jsx'
5
+ export { default as BackgroundImage } from './_background_image.jsx'
6
+
@@ -1,14 +1,70 @@
1
1
  <%= content_tag(:div,
2
2
  id: object.id,
3
3
  data: object.data,
4
- class: object.classname) do %>
5
- <% if object.size == "lg" %>
6
- <%= pb_rails("title", props: { text: object.lg_date, size: 3 }) %>
7
- <% elsif object.size == "sm" %>
8
- <%= pb_rails("icon", props: { icon: "calendar", fixed_width: true }) %>
9
- <%= pb_rails("title", props: { tag: "span", text: object.sm_date, size: 4 }) %>
4
+ class: object.classname,
5
+ aria: object.aria) do %>
6
+
7
+ <% if object.size == "md" %>
8
+ <!-- icon -->
9
+ <% if object.show_icon %>
10
+ <%= pb_rails("body", props: {
11
+ color: "light",
12
+ tag: "div",
13
+ }) do %>
14
+ <%= pb_rails("icon", props: { icon: "calendar-alt", fixed_width: true }) %>
15
+ <% end %>
16
+ <% end %>
17
+
18
+ <!-- day_of_week -->
19
+ <% if object.show_day_of_week %>
20
+ <%= pb_rails("title", props: { tag: "div", text: object.day_of_week, size: 4 }) %>
21
+ <%= pb_rails("body", props: {
22
+ text: "•",
23
+ color: "light",
24
+ tag: "div",
25
+ }) %>
26
+ <% end %>
27
+
28
+ <!-- month day, year -->
29
+
30
+ <%# if not current year %>
31
+ <% if object.year.to_s == DateTime.now.year.to_s %>
32
+ <%= pb_rails("title", props: { tag: "div", text: "#{object.month} #{object.day}", size: 4 }) %>
33
+ <%# if is current year %>
10
34
  <% else %>
11
- <%= pb_rails("title", props: { text: object.xs_date, size: 4 }) %>
35
+ <%= pb_rails("title", props: { tag: "div", text: "#{object.month} #{object.day}, #{object.year}", size: 4 }) %>
36
+ <% end %>
37
+
38
+ <% else %>
39
+
40
+ <!-- icon -->
41
+ <% if object.show_icon %>
42
+ <%= pb_rails("body", props: {
43
+ color: "light",
44
+ tag: "div",
45
+ }) do %>
46
+ <%= pb_rails("icon", props: { icon: "calendar-alt", fixed_width: true }) %>
47
+ <% end %>
48
+ <% end %>
49
+
50
+ <!-- day_of_week -->
51
+ <% if object.show_day_of_week %>
52
+ <%= pb_rails("caption", props: { tag: "div", text: object.day_of_week }) %>
53
+ <%= pb_rails("caption", props: {
54
+ text: "•",
55
+ color: "light",
56
+ tag: "div",
57
+ }) %>
58
+ <% end %>
59
+
60
+ <!-- month day, year -->
61
+
62
+ <%# if not current year %>
63
+ <% if object.year.to_s == DateTime.now.year.to_s %>
64
+ <%= pb_rails("caption", props: { tag: "span", text: "#{object.month} #{object.day}" }) %>
65
+ <%# if is current year %>
66
+ <% else %>
67
+ <%= pb_rails("caption", props: { tag: "span", text: "#{object.month} #{object.day}, #{object.year}" }) %>
68
+ <% end %>
12
69
  <% end %>
13
70
  <% end %>
14
-