playbook_ui_docs 15.0.0.pre.alpha.PLAY2420atfirstcolumnborderfix10658 → 15.0.0.pre.alpha.PLAY2422fixedconftoastaccessibility10327
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
 - data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_headers_vertical_border.html.erb +2 -4
 - data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_headers_vertical_border.jsx +9 -12
 - data/app/pb_kits/playbook/pb_bar_graph/docs/example.yml +1 -0
 - data/app/pb_kits/playbook/pb_card/docs/_card_highlight.html.erb +0 -3
 - data/app/pb_kits/playbook/pb_card/docs/_card_highlight.jsx +0 -8
 - data/app/pb_kits/playbook/pb_form/docs/_form_form_with.html.erb +0 -1
 - data/app/pb_kits/playbook/pb_loading_inline/docs/example.yml +0 -2
 - data/app/pb_kits/playbook/pb_loading_inline/docs/index.js +0 -1
 - data/app/pb_kits/playbook/pb_text_input/docs/example.yml +0 -3
 - data/app/pb_kits/playbook/pb_text_input/docs/index.js +0 -1
 - data/app/pb_kits/playbook/pb_timestamp/docs/_time_stamp_default.md +1 -0
 - data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_align.html.erb +10 -0
 - data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_align.jsx +9 -0
 - data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_default.html.erb +17 -3
 - data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_default.jsx +15 -0
 - data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_elapsed.html.erb +2 -0
 - data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_elapsed.jsx +2 -0
 - data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_timezones.html.erb +14 -0
 - data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_timezones.jsx +14 -0
 - data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_unstyled.html.erb +4 -0
 - data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_unstyled.jsx +4 -0
 - data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated.jsx +1 -0
 - data/app/pb_kits/playbook/pb_timestamp/docs/example.yml +6 -18
 - data/app/pb_kits/playbook/pb_timestamp/docs/index.js +0 -6
 - data/dist/playbook-doc.js +2 -2
 - metadata +3 -83
 - data/app/pb_kits/playbook/pb_loading_inline/docs/_loading_inline_variant.html.erb +0 -5
 - data/app/pb_kits/playbook/pb_loading_inline/docs/_loading_inline_variant.jsx +0 -24
 - data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_colors.html.erb +0 -35
 - data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_colors.jsx +0 -49
 - data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_colors_rails.md +0 -1
 - data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_colors_react.md +0 -2
 - data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_default.html.erb +0 -38
 - data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_default.jsx +0 -51
 - data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_height.html.erb +0 -46
 - data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_height.jsx +0 -62
 - data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_height.md +0 -3
 - data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_horizontal.html.erb +0 -47
 - data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_horizontal.jsx +0 -60
 - data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_legend.html.erb +0 -25
 - data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_legend.jsx +0 -36
 - data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_legend_non_clickable.jsx +0 -44
 - data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_legend_position.html.erb +0 -100
 - data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_legend_position.jsx +0 -126
 - data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_negative_numbers.html.erb +0 -32
 - data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_negative_numbers.jsx +0 -48
 - data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_secondary_y_axis.html.erb +0 -68
 - data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_secondary_y_axis.jsx +0 -81
 - data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_spline.html.erb +0 -31
 - data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_spline.jsx +0 -42
 - data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_spline.md +0 -2
 - data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_stacked.html.erb +0 -35
 - data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_stacked.jsx +0 -51
 - data/app/pb_kits/playbook/pb_pb_bar_graph/docs/example.yml +0 -27
 - data/app/pb_kits/playbook/pb_pb_bar_graph/docs/index.js +0 -11
 - data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_block_content.html.erb +0 -31
 - data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_block_content.jsx +0 -81
 - data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_color_overrides.html.erb +0 -25
 - data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_color_overrides.jsx +0 -40
 - data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_color_overrides.md +0 -5
 - data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_custom_tooltip.html.erb +0 -27
 - data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_custom_tooltip.jsx +0 -39
 - data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_custom_tooltip.md +0 -5
 - data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_data_legend_position.html.erb +0 -93
 - data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_data_legend_position.jsx +0 -131
 - data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_data_legend_position.md +0 -14
 - data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_data_with_labels.html.erb +0 -42
 - data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_data_with_labels.jsx +0 -58
 - data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_data_with_legend.html.erb +0 -24
 - data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_data_with_legend.jsx +0 -38
 - data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_default.html.erb +0 -22
 - data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_default.jsx +0 -33
 - data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_inner_sizes.html.erb +0 -118
 - data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_inner_sizes.jsx +0 -144
 - data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_live_data.jsx +0 -60
 - data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_rounded.html.erb +0 -24
 - data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_rounded.jsx +0 -42
 - data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_with_title.html.erb +0 -38
 - data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_with_title.jsx +0 -52
 - data/app/pb_kits/playbook/pb_pb_circle_chart/docs/example.yml +0 -29
 - data/app/pb_kits/playbook/pb_pb_circle_chart/docs/index.js +0 -11
 - data/app/pb_kits/playbook/pb_text_input/docs/_text_input_autocomplete.html.erb +0 -41
 - data/app/pb_kits/playbook/pb_text_input/docs/_text_input_autocomplete.jsx +0 -80
 - data/app/pb_kits/playbook/pb_text_input/docs/_text_input_autocomplete.md +0 -1
 - data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_align.md +0 -1
 - data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_default.md +0 -1
 - data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_elapsed.md +0 -5
 - data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_show_current_year.html.erb +0 -12
 - data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_show_current_year.jsx +0 -25
 - data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_show_current_year.md +0 -1
 - data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_show_date.html.erb +0 -4
 - data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_show_date.jsx +0 -17
 - data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_show_date.md +0 -1
 - data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_show_time.html.erb +0 -18
 - data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_show_time.jsx +0 -44
 - data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_show_time.md +0 -1
 - data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_timezones.md +0 -1
 - data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated.md +0 -5
 - data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated_show_current_year.html.erb +0 -16
 - data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated_show_current_year.jsx +0 -30
 - data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated_show_current_year.md +0 -1
 - data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated_show_date.html.erb +0 -16
 - data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated_show_date.jsx +0 -30
 - data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated_show_date.md +0 -1
 - data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated_show_time.html.erb +0 -26
 - data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated_show_time.jsx +0 -41
 - data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated_show_time.md +0 -1
 
    
        checksums.yaml
    CHANGED
    
    | 
         @@ -1,7 +1,7 @@ 
     | 
|
| 
       1 
1 
     | 
    
         
             
            ---
         
     | 
| 
       2 
2 
     | 
    
         
             
            SHA256:
         
     | 
| 
       3 
     | 
    
         
            -
              metadata.gz:  
     | 
| 
       4 
     | 
    
         
            -
              data.tar.gz:  
     | 
| 
      
 3 
     | 
    
         
            +
              metadata.gz: c5760224286b5373352c3cda7a4e757d00409a6393a7808ca7d86ffe9ed70662
         
     | 
| 
      
 4 
     | 
    
         
            +
              data.tar.gz: 514bde9290edd56f3a91df821677ecc2a43570927f5d518a6134ef6443f53eba
         
     | 
| 
       5 
5 
     | 
    
         
             
            SHA512:
         
     | 
| 
       6 
     | 
    
         
            -
              metadata.gz:  
     | 
| 
       7 
     | 
    
         
            -
              data.tar.gz:  
     | 
| 
      
 6 
     | 
    
         
            +
              metadata.gz: e195b02b74c1aaa111082aeb185c3c1bf947e84dd889a8294439ceb615525fb100c39806f819147e4ced6052665abf1a34a08be4754a52224bde11feb198eada
         
     | 
| 
      
 7 
     | 
    
         
            +
              data.tar.gz: c3be1da44c3ecb483dd594dbce8faee817970e5f5d703cf7ab3dc18159d1d3dc81260632d174f2dd600dd2a7e80c1a9e8cd731635c5042f3da5f45abe7752e83
         
     | 
| 
         @@ -39,7 +39,5 @@ 
     | 
|
| 
       39 
39 
     | 
    
         
             
                ],
         
     | 
| 
       40 
40 
     | 
    
         
             
              },
         
     | 
| 
       41 
41 
     | 
    
         
             
            ] %>
         
     | 
| 
       42 
     | 
    
         
            -
             
     | 
| 
       43 
     | 
    
         
            -
            <%= pb_rails(" 
     | 
| 
       44 
     | 
    
         
            -
              <%= pb_rails("advanced_table", props: { id: "table_multi_headers_vertical_borders", table_data: @table_data, column_definitions: column_definitions, table_props: { container: false, vertical_border: true } }) %>
         
     | 
| 
       45 
     | 
    
         
            -
            <% end %>
         
     | 
| 
      
 42 
     | 
    
         
            +
             
     | 
| 
      
 43 
     | 
    
         
            +
            <%= pb_rails("advanced_table", props: { id: "table_multi_headers_vertical_borders", table_data: @table_data, column_definitions: column_definitions, table_props: { vertical_border: true } }) %>
         
     | 
    
        data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_headers_vertical_border.jsx
    CHANGED
    
    | 
         @@ -1,5 +1,4 @@ 
     | 
|
| 
       1 
1 
     | 
    
         
             
            import React from "react"
         
     | 
| 
       2 
     | 
    
         
            -
            import Card from "../../pb_card/_card"
         
     | 
| 
       3 
2 
     | 
    
         
             
            import AdvancedTable from '../../pb_advanced_table/_advanced_table'
         
     | 
| 
       4 
3 
     | 
    
         
             
            import MOCK_DATA from "./advanced_table_mock_data.json"
         
     | 
| 
       5 
4 
     | 
    
         | 
| 
         @@ -45,21 +44,19 @@ const AdvancedTableColumnHeadersVerticalBorder = (props) => { 
     | 
|
| 
       45 
44 
     | 
    
         
             
                  ],
         
     | 
| 
       46 
45 
     | 
    
         
             
                },
         
     | 
| 
       47 
46 
     | 
    
         
             
              ];
         
     | 
| 
       48 
     | 
    
         
            -
             
     | 
| 
      
 47 
     | 
    
         
            +
              
         
     | 
| 
       49 
48 
     | 
    
         
             
              const tableProps = {
         
     | 
| 
       50 
     | 
    
         
            -
                 
     | 
| 
      
 49 
     | 
    
         
            +
                verticalBorder: true
         
     | 
| 
       51 
50 
     | 
    
         
             
              }
         
     | 
| 
       52 
     | 
    
         
            -
             
     | 
| 
      
 51 
     | 
    
         
            +
             
     | 
| 
       53 
52 
     | 
    
         
             
              return (
         
     | 
| 
       54 
53 
     | 
    
         
             
                <>
         
     | 
| 
       55 
     | 
    
         
            -
                  < 
     | 
| 
       56 
     | 
    
         
            -
             
     | 
| 
       57 
     | 
    
         
            -
             
     | 
| 
       58 
     | 
    
         
            -
             
     | 
| 
       59 
     | 
    
         
            -
             
     | 
| 
       60 
     | 
    
         
            -
             
     | 
| 
       61 
     | 
    
         
            -
                    />
         
     | 
| 
       62 
     | 
    
         
            -
                  </Card>
         
     | 
| 
      
 54 
     | 
    
         
            +
                  <AdvancedTable
         
     | 
| 
      
 55 
     | 
    
         
            +
                      columnDefinitions={columnDefinitions}
         
     | 
| 
      
 56 
     | 
    
         
            +
                      tableData={MOCK_DATA}
         
     | 
| 
      
 57 
     | 
    
         
            +
                      tableProps={tableProps}
         
     | 
| 
      
 58 
     | 
    
         
            +
                      {...props}
         
     | 
| 
      
 59 
     | 
    
         
            +
                  />
         
     | 
| 
       63 
60 
     | 
    
         
             
                </>
         
     | 
| 
       64 
61 
     | 
    
         
             
              )
         
     | 
| 
       65 
62 
     | 
    
         
             
            }
         
     | 
| 
         @@ -4,6 +4,7 @@ examples: 
     | 
|
| 
       4 
4 
     | 
    
         
             
              - bar_graph_default: Default
         
     | 
| 
       5 
5 
     | 
    
         
             
              - bar_graph_legend: Legend
         
     | 
| 
       6 
6 
     | 
    
         
             
              - bar_graph_legend_position: Legend Position
         
     | 
| 
      
 7 
     | 
    
         
            +
              - bar_graph_legend_non_clickable: Legend Non Clickable
         
     | 
| 
       7 
8 
     | 
    
         
             
              - bar_graph_height: Height
         
     | 
| 
       8 
9 
     | 
    
         
             
              - bar_graph_spline: Spline
         
     | 
| 
       9 
10 
     | 
    
         
             
              - bar_graph_colors: Color Overrides
         
     | 
| 
         @@ -4,9 +4,6 @@ 
     | 
|
| 
       4 
4 
     | 
    
         
             
            <%= pb_rails("card", props: {highlight: {position: "top", color:"warning"}, margin_bottom: "sm"}) do %>
         
     | 
| 
       5 
5 
     | 
    
         
             
              Top Position & Warning Color
         
     | 
| 
       6 
6 
     | 
    
         
             
            <% end %>
         
     | 
| 
       7 
     | 
    
         
            -
            <%= pb_rails("card", props: {highlight: {position: "right_side", color:"product_5_highlight"}, margin_bottom: "sm"}) do %>
         
     | 
| 
       8 
     | 
    
         
            -
              Right Side Position & Product 5 Highlight Color
         
     | 
| 
       9 
     | 
    
         
            -
            <% end %>
         
     | 
| 
       10 
7 
     | 
    
         
             
            <%= pb_rails("card", props: {highlight: {position: "side", color:"category_2"}, margin_bottom: "sm"}) do %>
         
     | 
| 
       11 
8 
     | 
    
         
             
              Side Position & Category 2 Color
         
     | 
| 
       12 
9 
     | 
    
         
             
            <% end %>
         
     | 
| 
         @@ -21,14 +21,6 @@ const CardHighlight = (props) => { 
     | 
|
| 
       21 
21 
     | 
    
         
             
                    {'Top Position & Warning Color'}
         
     | 
| 
       22 
22 
     | 
    
         
             
                  </Card>
         
     | 
| 
       23 
23 
     | 
    
         | 
| 
       24 
     | 
    
         
            -
                  <Card
         
     | 
| 
       25 
     | 
    
         
            -
                      {...props}
         
     | 
| 
       26 
     | 
    
         
            -
                      highlight={{ position: 'right_side', color: 'product_5_highlight' }}
         
     | 
| 
       27 
     | 
    
         
            -
                      marginBottom="sm"
         
     | 
| 
       28 
     | 
    
         
            -
                  >
         
     | 
| 
       29 
     | 
    
         
            -
                    {'Right Side Position & Product 5 Highlight Color'}
         
     | 
| 
       30 
     | 
    
         
            -
                  </Card>
         
     | 
| 
       31 
     | 
    
         
            -
             
     | 
| 
       32 
24 
     | 
    
         
             
                  <Card
         
     | 
| 
       33 
25 
     | 
    
         
             
                      {...props}
         
     | 
| 
       34 
26 
     | 
    
         
             
                      highlight={{ position: 'side', color: 'category_2' }}
         
     | 
| 
         @@ -91,7 +91,6 @@ 
     | 
|
| 
       91 
91 
     | 
    
         
             
            <%= pb_form_with(scope: :example, url: "", method: :get) do |form| %>
         
     | 
| 
       92 
92 
     | 
    
         
             
              <%= form.typeahead :example_typeahead, props: { data: { typeahead_example1: true, user: {} }, label: true, placeholder: "Search for a user" } %>
         
     | 
| 
       93 
93 
     | 
    
         
             
              <%= form.text_field :example_text_field, props: { label: true } %>
         
     | 
| 
       94 
     | 
    
         
            -
              <%= form.text_field :example_text_field_2, props: { label: "Text Field Custom Label" } %>
         
     | 
| 
       95 
94 
     | 
    
         
             
              <%= form.phone_number_field :example_phone_number_field, props: { label: "Example phone field", hidden_inputs: true } %>
         
     | 
| 
       96 
95 
     | 
    
         
             
              <%= form.email_field :example_email_field, props: { label: true } %>
         
     | 
| 
       97 
96 
     | 
    
         
             
              <%= form.number_field :example_number_field, props: { label: true } %>
         
     | 
| 
         @@ -3,11 +3,9 @@ examples: 
     | 
|
| 
       3 
3 
     | 
    
         
             
              rails:
         
     | 
| 
       4 
4 
     | 
    
         
             
              - loading_inline_default: Default
         
     | 
| 
       5 
5 
     | 
    
         
             
              - loading_inline_custom: Custom Text
         
     | 
| 
       6 
     | 
    
         
            -
              - loading_inline_variant: Variant
         
     | 
| 
       7 
6 
     | 
    
         | 
| 
       8 
7 
     | 
    
         | 
| 
       9 
8 
     | 
    
         | 
| 
       10 
9 
     | 
    
         
             
              react:
         
     | 
| 
       11 
10 
     | 
    
         
             
              - loading_inline_default: Default
         
     | 
| 
       12 
11 
     | 
    
         
             
              - loading_inline_custom: Custom Text
         
     | 
| 
       13 
     | 
    
         
            -
              - loading_inline_variant: Variant
         
     | 
| 
         @@ -9,8 +9,6 @@ examples: 
     | 
|
| 
       9 
9 
     | 
    
         
             
              - text_input_no_label: No Label
         
     | 
| 
       10 
10 
     | 
    
         
             
              - text_input_options: Input Options
         
     | 
| 
       11 
11 
     | 
    
         
             
              - text_input_mask: Mask
         
     | 
| 
       12 
     | 
    
         
            -
              - text_input_autocomplete: Autocomplete
         
     | 
| 
       13 
     | 
    
         
            -
              
         
     | 
| 
       14 
12 
     | 
    
         
             
              react:
         
     | 
| 
       15 
13 
     | 
    
         
             
              - text_input_default: Default
         
     | 
| 
       16 
14 
     | 
    
         
             
              - text_input_error: With Error
         
     | 
| 
         @@ -21,7 +19,6 @@ examples: 
     | 
|
| 
       21 
19 
     | 
    
         
             
              - text_input_no_label: No Label
         
     | 
| 
       22 
20 
     | 
    
         
             
              - text_input_mask: Mask
         
     | 
| 
       23 
21 
     | 
    
         
             
              - text_input_sanitize: Sanitized Masked Input
         
     | 
| 
       24 
     | 
    
         
            -
              - text_input_autocomplete: Autocomplete
         
     | 
| 
       25 
22 
     | 
    
         | 
| 
       26 
23 
     | 
    
         | 
| 
       27 
24 
     | 
    
         
             
              swift:
         
     | 
| 
         @@ -7,4 +7,3 @@ export { default as TextInputInline } from './_text_input_inline.jsx' 
     | 
|
| 
       7 
7 
     | 
    
         
             
            export { default as TextInputNoLabel } from './_text_input_no_label.jsx'
         
     | 
| 
       8 
8 
     | 
    
         
             
            export { default as TextInputMask } from './_text_input_mask.jsx'
         
     | 
| 
       9 
9 
     | 
    
         
             
            export { default as TextInputSanitize } from './_text_input_sanitize.jsx'
         
     | 
| 
       10 
     | 
    
         
            -
            export { default as TextInputAutocomplete } from './_text_input_autocomplete.jsx'
         
     | 
| 
         @@ -0,0 +1 @@ 
     | 
|
| 
      
 1 
     | 
    
         
            +
            Use these only to display status updates in areas that has a lot of data.
         
     | 
| 
         @@ -8,6 +8,7 @@ 
     | 
|
| 
       8 
8 
     | 
    
         | 
| 
       9 
9 
     | 
    
         
             
            <%= pb_rails("timestamp", props: {
         
     | 
| 
       10 
10 
     | 
    
         
             
              timestamp: DateTime.now,
         
     | 
| 
      
 11 
     | 
    
         
            +
              show_date: true,
         
     | 
| 
       11 
12 
     | 
    
         
             
              align: "left"
         
     | 
| 
       12 
13 
     | 
    
         
             
            }) %>
         
     | 
| 
       13 
14 
     | 
    
         | 
| 
         @@ -15,6 +16,7 @@ 
     | 
|
| 
       15 
16 
     | 
    
         | 
| 
       16 
17 
     | 
    
         
             
            <%= pb_rails("timestamp", props: {
         
     | 
| 
       17 
18 
     | 
    
         
             
              timestamp: DateTime.now + 4.years,
         
     | 
| 
      
 19 
     | 
    
         
            +
              show_date: true,
         
     | 
| 
       18 
20 
     | 
    
         
             
              align: "left"
         
     | 
| 
       19 
21 
     | 
    
         
             
            }) %>
         
     | 
| 
       20 
22 
     | 
    
         | 
| 
         @@ -22,6 +24,7 @@ 
     | 
|
| 
       22 
24 
     | 
    
         | 
| 
       23 
25 
     | 
    
         
             
            <%= pb_rails("timestamp", props: {
         
     | 
| 
       24 
26 
     | 
    
         
             
              timestamp: DateTime.now - 1.year,
         
     | 
| 
      
 27 
     | 
    
         
            +
              show_date: true,
         
     | 
| 
       25 
28 
     | 
    
         
             
              align: "left"
         
     | 
| 
       26 
29 
     | 
    
         
             
            }) %>
         
     | 
| 
       27 
30 
     | 
    
         | 
| 
         @@ -37,6 +40,7 @@ 
     | 
|
| 
       37 
40 
     | 
    
         | 
| 
       38 
41 
     | 
    
         
             
            <%= pb_rails("timestamp", props: {
         
     | 
| 
       39 
42 
     | 
    
         
             
              timestamp: DateTime.now,
         
     | 
| 
      
 43 
     | 
    
         
            +
              show_date: true,
         
     | 
| 
       40 
44 
     | 
    
         
             
              align: "center"
         
     | 
| 
       41 
45 
     | 
    
         
             
            }) %>
         
     | 
| 
       42 
46 
     | 
    
         | 
| 
         @@ -44,6 +48,7 @@ 
     | 
|
| 
       44 
48 
     | 
    
         | 
| 
       45 
49 
     | 
    
         
             
            <%= pb_rails("timestamp", props: {
         
     | 
| 
       46 
50 
     | 
    
         
             
              timestamp: DateTime.now + 4.years,
         
     | 
| 
      
 51 
     | 
    
         
            +
              show_date: true,
         
     | 
| 
       47 
52 
     | 
    
         
             
              align: "center"
         
     | 
| 
       48 
53 
     | 
    
         
             
            }) %>
         
     | 
| 
       49 
54 
     | 
    
         | 
| 
         @@ -51,6 +56,7 @@ 
     | 
|
| 
       51 
56 
     | 
    
         | 
| 
       52 
57 
     | 
    
         
             
            <%= pb_rails("timestamp", props: {
         
     | 
| 
       53 
58 
     | 
    
         
             
              timestamp: DateTime.now - 1.year,
         
     | 
| 
      
 59 
     | 
    
         
            +
              show_date: true,
         
     | 
| 
       54 
60 
     | 
    
         
             
              align: "center"
         
     | 
| 
       55 
61 
     | 
    
         
             
            }) %>
         
     | 
| 
       56 
62 
     | 
    
         | 
| 
         @@ -58,6 +64,7 @@ 
     | 
|
| 
       58 
64 
     | 
    
         | 
| 
       59 
65 
     | 
    
         
             
            <%= pb_rails("timestamp", props: {
         
     | 
| 
       60 
66 
     | 
    
         
             
              timestamp: DateTime.now,
         
     | 
| 
      
 67 
     | 
    
         
            +
              show_date: false,
         
     | 
| 
       61 
68 
     | 
    
         
             
              align: "right"
         
     | 
| 
       62 
69 
     | 
    
         
             
            }) %>
         
     | 
| 
       63 
70 
     | 
    
         | 
| 
         @@ -65,6 +72,7 @@ 
     | 
|
| 
       65 
72 
     | 
    
         | 
| 
       66 
73 
     | 
    
         
             
            <%= pb_rails("timestamp", props: {
         
     | 
| 
       67 
74 
     | 
    
         
             
              timestamp: DateTime.now,
         
     | 
| 
      
 75 
     | 
    
         
            +
              show_date: true,
         
     | 
| 
       68 
76 
     | 
    
         
             
              align: "right"
         
     | 
| 
       69 
77 
     | 
    
         
             
            }) %>
         
     | 
| 
       70 
78 
     | 
    
         | 
| 
         @@ -72,6 +80,7 @@ 
     | 
|
| 
       72 
80 
     | 
    
         | 
| 
       73 
81 
     | 
    
         
             
            <%= pb_rails("timestamp", props: {
         
     | 
| 
       74 
82 
     | 
    
         
             
              timestamp: DateTime.now + 4.years,
         
     | 
| 
      
 83 
     | 
    
         
            +
              show_date: true,
         
     | 
| 
       75 
84 
     | 
    
         
             
              align: "right"
         
     | 
| 
       76 
85 
     | 
    
         
             
            }) %>
         
     | 
| 
       77 
86 
     | 
    
         | 
| 
         @@ -79,5 +88,6 @@ 
     | 
|
| 
       79 
88 
     | 
    
         | 
| 
       80 
89 
     | 
    
         
             
            <%= pb_rails("timestamp", props: {
         
     | 
| 
       81 
90 
     | 
    
         
             
              timestamp: DateTime.now - 1.year,
         
     | 
| 
      
 91 
     | 
    
         
            +
              show_date: true,
         
     | 
| 
       82 
92 
     | 
    
         
             
              align: "right"
         
     | 
| 
       83 
93 
     | 
    
         
             
            }) %>
         
     | 
| 
         @@ -25,6 +25,7 @@ const TimestampAlign = (props) => { 
     | 
|
| 
       25 
25 
     | 
    
         | 
| 
       26 
26 
     | 
    
         
             
                  <Timestamp
         
     | 
| 
       27 
27 
     | 
    
         
             
                      align="left"
         
     | 
| 
      
 28 
     | 
    
         
            +
                      showDate
         
     | 
| 
       28 
29 
     | 
    
         
             
                      timestamp={todaysDate}
         
     | 
| 
       29 
30 
     | 
    
         
             
                      {...props}
         
     | 
| 
       30 
31 
     | 
    
         
             
                  />
         
     | 
| 
         @@ -33,6 +34,7 @@ const TimestampAlign = (props) => { 
     | 
|
| 
       33 
34 
     | 
    
         | 
| 
       34 
35 
     | 
    
         
             
                  <Timestamp
         
     | 
| 
       35 
36 
     | 
    
         
             
                      align="left"
         
     | 
| 
      
 37 
     | 
    
         
            +
                      showDate
         
     | 
| 
       36 
38 
     | 
    
         
             
                      timestamp={futureDate}
         
     | 
| 
       37 
39 
     | 
    
         
             
                      {...props}
         
     | 
| 
       38 
40 
     | 
    
         
             
                  />
         
     | 
| 
         @@ -41,6 +43,7 @@ const TimestampAlign = (props) => { 
     | 
|
| 
       41 
43 
     | 
    
         | 
| 
       42 
44 
     | 
    
         
             
                  <Timestamp
         
     | 
| 
       43 
45 
     | 
    
         
             
                      align="left"
         
     | 
| 
      
 46 
     | 
    
         
            +
                      showDate
         
     | 
| 
       44 
47 
     | 
    
         
             
                      timestamp={pastDate}
         
     | 
| 
       45 
48 
     | 
    
         
             
                      {...props}
         
     | 
| 
       46 
49 
     | 
    
         
             
                  />
         
     | 
| 
         @@ -59,6 +62,7 @@ const TimestampAlign = (props) => { 
     | 
|
| 
       59 
62 
     | 
    
         | 
| 
       60 
63 
     | 
    
         
             
                  <Timestamp
         
     | 
| 
       61 
64 
     | 
    
         
             
                      align="center"
         
     | 
| 
      
 65 
     | 
    
         
            +
                      showDate
         
     | 
| 
       62 
66 
     | 
    
         
             
                      timestamp={todaysDate}
         
     | 
| 
       63 
67 
     | 
    
         
             
                      {...props}
         
     | 
| 
       64 
68 
     | 
    
         
             
                  />
         
     | 
| 
         @@ -67,6 +71,7 @@ const TimestampAlign = (props) => { 
     | 
|
| 
       67 
71 
     | 
    
         | 
| 
       68 
72 
     | 
    
         
             
                  <Timestamp
         
     | 
| 
       69 
73 
     | 
    
         
             
                      align="center"
         
     | 
| 
      
 74 
     | 
    
         
            +
                      showDate
         
     | 
| 
       70 
75 
     | 
    
         
             
                      timestamp={futureDate}
         
     | 
| 
       71 
76 
     | 
    
         
             
                      {...props}
         
     | 
| 
       72 
77 
     | 
    
         
             
                  />
         
     | 
| 
         @@ -75,6 +80,7 @@ const TimestampAlign = (props) => { 
     | 
|
| 
       75 
80 
     | 
    
         | 
| 
       76 
81 
     | 
    
         
             
                  <Timestamp
         
     | 
| 
       77 
82 
     | 
    
         
             
                      align="center"
         
     | 
| 
      
 83 
     | 
    
         
            +
                      showDate
         
     | 
| 
       78 
84 
     | 
    
         
             
                      timestamp={pastDate}
         
     | 
| 
       79 
85 
     | 
    
         
             
                      {...props}
         
     | 
| 
       80 
86 
     | 
    
         
             
                  />
         
     | 
| 
         @@ -93,6 +99,7 @@ const TimestampAlign = (props) => { 
     | 
|
| 
       93 
99 
     | 
    
         | 
| 
       94 
100 
     | 
    
         
             
                  <Timestamp
         
     | 
| 
       95 
101 
     | 
    
         
             
                      align="right"
         
     | 
| 
      
 102 
     | 
    
         
            +
                      showDate
         
     | 
| 
       96 
103 
     | 
    
         
             
                      timestamp={todaysDate}
         
     | 
| 
       97 
104 
     | 
    
         
             
                      {...props}
         
     | 
| 
       98 
105 
     | 
    
         
             
                  />
         
     | 
| 
         @@ -101,6 +108,7 @@ const TimestampAlign = (props) => { 
     | 
|
| 
       101 
108 
     | 
    
         | 
| 
       102 
109 
     | 
    
         
             
                  <Timestamp
         
     | 
| 
       103 
110 
     | 
    
         
             
                      align="right"
         
     | 
| 
      
 111 
     | 
    
         
            +
                      showDate
         
     | 
| 
       104 
112 
     | 
    
         
             
                      timestamp={futureDate}
         
     | 
| 
       105 
113 
     | 
    
         
             
                      {...props}
         
     | 
| 
       106 
114 
     | 
    
         
             
                  />
         
     | 
| 
         @@ -109,6 +117,7 @@ const TimestampAlign = (props) => { 
     | 
|
| 
       109 
117 
     | 
    
         | 
| 
       110 
118 
     | 
    
         
             
                  <Timestamp
         
     | 
| 
       111 
119 
     | 
    
         
             
                      align="right"
         
     | 
| 
      
 120 
     | 
    
         
            +
                      showDate
         
     | 
| 
       112 
121 
     | 
    
         
             
                      timestamp={pastDate}
         
     | 
| 
       113 
122 
     | 
    
         
             
                      {...props}
         
     | 
| 
       114 
123 
     | 
    
         
             
                  />
         
     | 
| 
         @@ -1,15 +1,29 @@ 
     | 
|
| 
       1 
1 
     | 
    
         
             
            <%= pb_rails("timestamp", props: {
         
     | 
| 
       2 
     | 
    
         
            -
              timestamp: DateTime.now
         
     | 
| 
      
 2 
     | 
    
         
            +
              timestamp: DateTime.now,
         
     | 
| 
      
 3 
     | 
    
         
            +
              show_date: false,
         
     | 
| 
      
 4 
     | 
    
         
            +
              align: "left"
         
     | 
| 
       3 
5 
     | 
    
         
             
            }) %>
         
     | 
| 
       4 
6 
     | 
    
         | 
| 
       5 
7 
     | 
    
         
             
            <br>
         
     | 
| 
       6 
8 
     | 
    
         | 
| 
       7 
9 
     | 
    
         
             
            <%= pb_rails("timestamp", props: {
         
     | 
| 
       8 
     | 
    
         
            -
              timestamp: DateTime.now 
     | 
| 
      
 10 
     | 
    
         
            +
              timestamp: DateTime.now,
         
     | 
| 
      
 11 
     | 
    
         
            +
              show_date: true,
         
     | 
| 
      
 12 
     | 
    
         
            +
              align: "left"
         
     | 
| 
       9 
13 
     | 
    
         
             
            }) %>
         
     | 
| 
       10 
14 
     | 
    
         | 
| 
       11 
15 
     | 
    
         
             
            <br>
         
     | 
| 
       12 
16 
     | 
    
         | 
| 
       13 
17 
     | 
    
         
             
            <%= pb_rails("timestamp", props: {
         
     | 
| 
       14 
     | 
    
         
            -
              timestamp: DateTime.now  
     | 
| 
      
 18 
     | 
    
         
            +
              timestamp: DateTime.now + 4.years,
         
     | 
| 
      
 19 
     | 
    
         
            +
              show_date: true,
         
     | 
| 
      
 20 
     | 
    
         
            +
              align: "left"
         
     | 
| 
      
 21 
     | 
    
         
            +
            }) %>
         
     | 
| 
      
 22 
     | 
    
         
            +
             
     | 
| 
      
 23 
     | 
    
         
            +
            <br>
         
     | 
| 
      
 24 
     | 
    
         
            +
             
     | 
| 
      
 25 
     | 
    
         
            +
            <%= pb_rails("timestamp", props: {
         
     | 
| 
      
 26 
     | 
    
         
            +
              timestamp: DateTime.now - 1.year,
         
     | 
| 
      
 27 
     | 
    
         
            +
              show_date: true,
         
     | 
| 
      
 28 
     | 
    
         
            +
              align: "left"
         
     | 
| 
       15 
29 
     | 
    
         
             
            }) %>
         
     | 
| 
         @@ -15,6 +15,8 @@ const TimestampDefault = (props) => { 
     | 
|
| 
       15 
15 
     | 
    
         
             
              return (
         
     | 
| 
       16 
16 
     | 
    
         
             
                <div>
         
     | 
| 
       17 
17 
     | 
    
         
             
                  <Timestamp
         
     | 
| 
      
 18 
     | 
    
         
            +
                      align="left"
         
     | 
| 
      
 19 
     | 
    
         
            +
                      showDate={false}
         
     | 
| 
       18 
20 
     | 
    
         
             
                      timestamp={todaysDate}
         
     | 
| 
       19 
21 
     | 
    
         
             
                      {...props}
         
     | 
| 
       20 
22 
     | 
    
         
             
                  />
         
     | 
| 
         @@ -22,6 +24,17 @@ const TimestampDefault = (props) => { 
     | 
|
| 
       22 
24 
     | 
    
         
             
                  <br />
         
     | 
| 
       23 
25 
     | 
    
         | 
| 
       24 
26 
     | 
    
         
             
                  <Timestamp
         
     | 
| 
      
 27 
     | 
    
         
            +
                      align="left"
         
     | 
| 
      
 28 
     | 
    
         
            +
                      showDate
         
     | 
| 
      
 29 
     | 
    
         
            +
                      timestamp={todaysDate}
         
     | 
| 
      
 30 
     | 
    
         
            +
                      {...props}
         
     | 
| 
      
 31 
     | 
    
         
            +
                  />
         
     | 
| 
      
 32 
     | 
    
         
            +
             
     | 
| 
      
 33 
     | 
    
         
            +
                  <br />
         
     | 
| 
      
 34 
     | 
    
         
            +
             
     | 
| 
      
 35 
     | 
    
         
            +
                  <Timestamp
         
     | 
| 
      
 36 
     | 
    
         
            +
                      align="left"
         
     | 
| 
      
 37 
     | 
    
         
            +
                      showDate
         
     | 
| 
       25 
38 
     | 
    
         
             
                      timestamp={futureDate}
         
     | 
| 
       26 
39 
     | 
    
         
             
                      {...props}
         
     | 
| 
       27 
40 
     | 
    
         
             
                  />
         
     | 
| 
         @@ -29,6 +42,8 @@ const TimestampDefault = (props) => { 
     | 
|
| 
       29 
42 
     | 
    
         
             
                  <br />
         
     | 
| 
       30 
43 
     | 
    
         | 
| 
       31 
44 
     | 
    
         
             
                  <Timestamp
         
     | 
| 
      
 45 
     | 
    
         
            +
                      align="left"
         
     | 
| 
      
 46 
     | 
    
         
            +
                      showDate
         
     | 
| 
       32 
47 
     | 
    
         
             
                      timestamp={pastDate}
         
     | 
| 
       33 
48 
     | 
    
         
             
                      {...props}
         
     | 
| 
       34 
49 
     | 
    
         
             
                  />
         
     | 
| 
         @@ -10,6 +10,7 @@ 
     | 
|
| 
       10 
10 
     | 
    
         
             
            <%= pb_rails("timestamp", props: {
         
     | 
| 
       11 
11 
     | 
    
         
             
              timestamp: DateTime.now - 3.months,
         
     | 
| 
       12 
12 
     | 
    
         
             
              variant: "elapsed",
         
     | 
| 
      
 13 
     | 
    
         
            +
              show_user: false
         
     | 
| 
       13 
14 
     | 
    
         
             
            }) %>
         
     | 
| 
       14 
15 
     | 
    
         | 
| 
       15 
16 
     | 
    
         
             
            <br>
         
     | 
| 
         @@ -17,5 +18,6 @@ 
     | 
|
| 
       17 
18 
     | 
    
         
             
            <%= pb_rails("timestamp", props: {
         
     | 
| 
       18 
19 
     | 
    
         
             
              timestamp: DateTime.now - 320.days,
         
     | 
| 
       19 
20 
     | 
    
         
             
              variant: "elapsed",
         
     | 
| 
      
 21 
     | 
    
         
            +
              show_user: false,
         
     | 
| 
       20 
22 
     | 
    
         
             
              hide_updated: true
         
     | 
| 
       21 
23 
     | 
    
         
             
            }) %>
         
     | 
| 
         @@ -23,6 +23,7 @@ const TimestampElapsed = (props) => { 
     | 
|
| 
       23 
23 
     | 
    
         
             
                  <br />
         
     | 
| 
       24 
24 
     | 
    
         | 
| 
       25 
25 
     | 
    
         
             
                  <Timestamp
         
     | 
| 
      
 26 
     | 
    
         
            +
                      showUser={false}
         
     | 
| 
       26 
27 
     | 
    
         
             
                      timestamp={customDate}
         
     | 
| 
       27 
28 
     | 
    
         
             
                      variant="elapsed"
         
     | 
| 
       28 
29 
     | 
    
         
             
                      {...props}
         
     | 
| 
         @@ -32,6 +33,7 @@ const TimestampElapsed = (props) => { 
     | 
|
| 
       32 
33 
     | 
    
         | 
| 
       33 
34 
     | 
    
         
             
                  <Timestamp
         
     | 
| 
       34 
35 
     | 
    
         
             
                      hideUpdated
         
     | 
| 
      
 36 
     | 
    
         
            +
                      showUser={false}
         
     | 
| 
       35 
37 
     | 
    
         
             
                      timestamp={customDate}
         
     | 
| 
       36 
38 
     | 
    
         
             
                      variant="elapsed"
         
     | 
| 
       37 
39 
     | 
    
         
             
                      {...props}
         
     | 
| 
         @@ -3,30 +3,37 @@ 
     | 
|
| 
       3 
3 
     | 
    
         
             
              show_date: false,
         
     | 
| 
       4 
4 
     | 
    
         
             
              show_timezone: true,
         
     | 
| 
       5 
5 
     | 
    
         
             
              timezone: "America/New_York",
         
     | 
| 
      
 6 
     | 
    
         
            +
              align: "left"
         
     | 
| 
       6 
7 
     | 
    
         
             
            }) %>
         
     | 
| 
       7 
8 
     | 
    
         | 
| 
       8 
9 
     | 
    
         
             
            <br>
         
     | 
| 
       9 
10 
     | 
    
         | 
| 
       10 
11 
     | 
    
         
             
            <%= pb_rails("timestamp", props: {
         
     | 
| 
       11 
12 
     | 
    
         
             
              timestamp: DateTime.now,
         
     | 
| 
      
 13 
     | 
    
         
            +
              show_date: true,
         
     | 
| 
       12 
14 
     | 
    
         
             
              show_timezone: true,
         
     | 
| 
       13 
15 
     | 
    
         
             
              timezone: "America/New_York",
         
     | 
| 
      
 16 
     | 
    
         
            +
              align: "left"
         
     | 
| 
       14 
17 
     | 
    
         
             
            }) %>
         
     | 
| 
       15 
18 
     | 
    
         | 
| 
       16 
19 
     | 
    
         
             
            <br>
         
     | 
| 
       17 
20 
     | 
    
         | 
| 
       18 
21 
     | 
    
         
             
            <%= pb_rails("timestamp", props: {
         
     | 
| 
       19 
22 
     | 
    
         
             
              timestamp: DateTime.now + 4.years,
         
     | 
| 
      
 23 
     | 
    
         
            +
              show_date: true,
         
     | 
| 
       20 
24 
     | 
    
         
             
              show_timezone: true,
         
     | 
| 
       21 
25 
     | 
    
         
             
              timezone: "America/New_York",
         
     | 
| 
      
 26 
     | 
    
         
            +
              align: "left"
         
     | 
| 
       22 
27 
     | 
    
         
             
            }) %>
         
     | 
| 
       23 
28 
     | 
    
         | 
| 
       24 
29 
     | 
    
         
             
            <br>
         
     | 
| 
       25 
30 
     | 
    
         | 
| 
       26 
31 
     | 
    
         
             
            <%= pb_rails("timestamp", props: {
         
     | 
| 
       27 
32 
     | 
    
         
             
              timestamp: DateTime.now - 1.year,
         
     | 
| 
      
 33 
     | 
    
         
            +
              show_date: true,
         
     | 
| 
       28 
34 
     | 
    
         
             
              show_timezone: true,
         
     | 
| 
       29 
35 
     | 
    
         
             
              timezone: "America/New_York",
         
     | 
| 
      
 36 
     | 
    
         
            +
              align: "left"
         
     | 
| 
       30 
37 
     | 
    
         
             
            }) %>
         
     | 
| 
       31 
38 
     | 
    
         | 
| 
       32 
39 
     | 
    
         
             
            <br>
         
     | 
| 
         @@ -36,30 +43,37 @@ 
     | 
|
| 
       36 
43 
     | 
    
         
             
              show_date: false,
         
     | 
| 
       37 
44 
     | 
    
         
             
              show_timezone: true,
         
     | 
| 
       38 
45 
     | 
    
         
             
              timezone: "Asia/Hong_Kong",
         
     | 
| 
      
 46 
     | 
    
         
            +
              align: "left"
         
     | 
| 
       39 
47 
     | 
    
         
             
            }) %>
         
     | 
| 
       40 
48 
     | 
    
         | 
| 
       41 
49 
     | 
    
         
             
            <br>
         
     | 
| 
       42 
50 
     | 
    
         | 
| 
       43 
51 
     | 
    
         
             
            <%= pb_rails("timestamp", props: {
         
     | 
| 
       44 
52 
     | 
    
         
             
              timestamp: DateTime.now,
         
     | 
| 
      
 53 
     | 
    
         
            +
              show_date: true,
         
     | 
| 
       45 
54 
     | 
    
         
             
              show_timezone: true,
         
     | 
| 
       46 
55 
     | 
    
         
             
              timezone: "Asia/Hong_Kong",
         
     | 
| 
      
 56 
     | 
    
         
            +
              align: "left"
         
     | 
| 
       47 
57 
     | 
    
         
             
            }) %>
         
     | 
| 
       48 
58 
     | 
    
         | 
| 
       49 
59 
     | 
    
         
             
            <br>
         
     | 
| 
       50 
60 
     | 
    
         | 
| 
       51 
61 
     | 
    
         
             
            <%= pb_rails("timestamp", props: {
         
     | 
| 
       52 
62 
     | 
    
         
             
              timestamp: DateTime.now + 4.years,
         
     | 
| 
      
 63 
     | 
    
         
            +
              show_date: true,
         
     | 
| 
       53 
64 
     | 
    
         
             
              show_timezone: true,
         
     | 
| 
       54 
65 
     | 
    
         
             
              timezone: "Asia/Hong_Kong",
         
     | 
| 
      
 66 
     | 
    
         
            +
              align: "left"
         
     | 
| 
       55 
67 
     | 
    
         
             
            }) %>
         
     | 
| 
       56 
68 
     | 
    
         | 
| 
       57 
69 
     | 
    
         
             
            <br>
         
     | 
| 
       58 
70 
     | 
    
         | 
| 
       59 
71 
     | 
    
         
             
            <%= pb_rails("timestamp", props: {
         
     | 
| 
       60 
72 
     | 
    
         
             
              timestamp: DateTime.now - 1.year,
         
     | 
| 
      
 73 
     | 
    
         
            +
              show_date: true,
         
     | 
| 
       61 
74 
     | 
    
         
             
              show_timezone: true,
         
     | 
| 
       62 
75 
     | 
    
         
             
              timezone: "Asia/Hong_Kong",
         
     | 
| 
      
 76 
     | 
    
         
            +
              align: "left"
         
     | 
| 
       63 
77 
     | 
    
         
             
            }) %>
         
     | 
| 
       64 
78 
     | 
    
         | 
| 
       65 
79 
     | 
    
         
             
            <br>
         
     | 
| 
         @@ -15,6 +15,7 @@ const TimestampTimezones = (props) => { 
     | 
|
| 
       15 
15 
     | 
    
         
             
              return (
         
     | 
| 
       16 
16 
     | 
    
         
             
                <div>
         
     | 
| 
       17 
17 
     | 
    
         
             
                  <Timestamp
         
     | 
| 
      
 18 
     | 
    
         
            +
                      align="left"
         
     | 
| 
       18 
19 
     | 
    
         
             
                      showDate={false}
         
     | 
| 
       19 
20 
     | 
    
         
             
                      showTimezone
         
     | 
| 
       20 
21 
     | 
    
         
             
                      timestamp={todaysDate}
         
     | 
| 
         @@ -25,6 +26,8 @@ const TimestampTimezones = (props) => { 
     | 
|
| 
       25 
26 
     | 
    
         
             
                  <br />
         
     | 
| 
       26 
27 
     | 
    
         | 
| 
       27 
28 
     | 
    
         
             
                  <Timestamp
         
     | 
| 
      
 29 
     | 
    
         
            +
                      align="left"
         
     | 
| 
      
 30 
     | 
    
         
            +
                      showDate
         
     | 
| 
       28 
31 
     | 
    
         
             
                      showTimezone
         
     | 
| 
       29 
32 
     | 
    
         
             
                      timestamp={todaysDate}
         
     | 
| 
       30 
33 
     | 
    
         
             
                      timezone="America/New_York"
         
     | 
| 
         @@ -34,6 +37,8 @@ const TimestampTimezones = (props) => { 
     | 
|
| 
       34 
37 
     | 
    
         
             
                  <br />
         
     | 
| 
       35 
38 
     | 
    
         | 
| 
       36 
39 
     | 
    
         
             
                  <Timestamp
         
     | 
| 
      
 40 
     | 
    
         
            +
                      align="left"
         
     | 
| 
      
 41 
     | 
    
         
            +
                      showDate
         
     | 
| 
       37 
42 
     | 
    
         
             
                      showTimezone
         
     | 
| 
       38 
43 
     | 
    
         
             
                      timestamp={futureDate}
         
     | 
| 
       39 
44 
     | 
    
         
             
                      timezone="America/New_York"
         
     | 
| 
         @@ -43,6 +48,8 @@ const TimestampTimezones = (props) => { 
     | 
|
| 
       43 
48 
     | 
    
         
             
                  <br />
         
     | 
| 
       44 
49 
     | 
    
         | 
| 
       45 
50 
     | 
    
         
             
                  <Timestamp
         
     | 
| 
      
 51 
     | 
    
         
            +
                      align="left"
         
     | 
| 
      
 52 
     | 
    
         
            +
                      showDate
         
     | 
| 
       46 
53 
     | 
    
         
             
                      showTimezone
         
     | 
| 
       47 
54 
     | 
    
         
             
                      timestamp={pastDate}
         
     | 
| 
       48 
55 
     | 
    
         
             
                      timezone="America/New_York"
         
     | 
| 
         @@ -52,6 +59,7 @@ const TimestampTimezones = (props) => { 
     | 
|
| 
       52 
59 
     | 
    
         
             
                  <br />
         
     | 
| 
       53 
60 
     | 
    
         | 
| 
       54 
61 
     | 
    
         
             
                  <Timestamp
         
     | 
| 
      
 62 
     | 
    
         
            +
                      align="left"
         
     | 
| 
       55 
63 
     | 
    
         
             
                      showDate={false}
         
     | 
| 
       56 
64 
     | 
    
         
             
                      showTimezone
         
     | 
| 
       57 
65 
     | 
    
         
             
                      timestamp={todaysDate}
         
     | 
| 
         @@ -62,6 +70,8 @@ const TimestampTimezones = (props) => { 
     | 
|
| 
       62 
70 
     | 
    
         
             
                  <br />
         
     | 
| 
       63 
71 
     | 
    
         | 
| 
       64 
72 
     | 
    
         
             
                  <Timestamp
         
     | 
| 
      
 73 
     | 
    
         
            +
                      align="left"
         
     | 
| 
      
 74 
     | 
    
         
            +
                      showDate
         
     | 
| 
       65 
75 
     | 
    
         
             
                      showTimezone
         
     | 
| 
       66 
76 
     | 
    
         
             
                      timestamp={todaysDate}
         
     | 
| 
       67 
77 
     | 
    
         
             
                      timezone="Asia/Hong_Kong"
         
     | 
| 
         @@ -71,6 +81,8 @@ const TimestampTimezones = (props) => { 
     | 
|
| 
       71 
81 
     | 
    
         
             
                  <br />
         
     | 
| 
       72 
82 
     | 
    
         | 
| 
       73 
83 
     | 
    
         
             
                  <Timestamp
         
     | 
| 
      
 84 
     | 
    
         
            +
                      align="left"
         
     | 
| 
      
 85 
     | 
    
         
            +
                      showDate
         
     | 
| 
       74 
86 
     | 
    
         
             
                      showTimezone
         
     | 
| 
       75 
87 
     | 
    
         
             
                      timestamp={futureDate}
         
     | 
| 
       76 
88 
     | 
    
         
             
                      timezone="Asia/Hong_Kong"
         
     | 
| 
         @@ -80,6 +92,8 @@ const TimestampTimezones = (props) => { 
     | 
|
| 
       80 
92 
     | 
    
         
             
                  <br />
         
     | 
| 
       81 
93 
     | 
    
         | 
| 
       82 
94 
     | 
    
         
             
                  <Timestamp
         
     | 
| 
      
 95 
     | 
    
         
            +
                      align="left"
         
     | 
| 
      
 96 
     | 
    
         
            +
                      showDate
         
     | 
| 
       83 
97 
     | 
    
         
             
                      showTimezone
         
     | 
| 
       84 
98 
     | 
    
         
             
                      timestamp={pastDate}
         
     | 
| 
       85 
99 
     | 
    
         
             
                      timezone="Asia/Hong_Kong"
         
     | 
| 
         @@ -2,6 +2,8 @@ 
     | 
|
| 
       2 
2 
     | 
    
         | 
| 
       3 
3 
     | 
    
         
             
            <%= pb_rails("timestamp", props: {
         
     | 
| 
       4 
4 
     | 
    
         
             
              timestamp: DateTime.now,
         
     | 
| 
      
 5 
     | 
    
         
            +
              show_date: true,
         
     | 
| 
      
 6 
     | 
    
         
            +
              align: "left",
         
     | 
| 
       5 
7 
     | 
    
         
             
              unstyled: true,
         
     | 
| 
       6 
8 
     | 
    
         
             
            }) %>
         
     | 
| 
       7 
9 
     | 
    
         | 
| 
         @@ -12,6 +14,8 @@ 
     | 
|
| 
       12 
14 
     | 
    
         
             
            <%= pb_rails("title", props: { size: 1 }) do %>
         
     | 
| 
       13 
15 
     | 
    
         
             
              <%= pb_rails("timestamp", props: {
         
     | 
| 
       14 
16 
     | 
    
         
             
                timestamp: DateTime.now,
         
     | 
| 
      
 17 
     | 
    
         
            +
                show_date: true,
         
     | 
| 
      
 18 
     | 
    
         
            +
                align: "left",
         
     | 
| 
       15 
19 
     | 
    
         
             
                unstyled: true,
         
     | 
| 
       16 
20 
     | 
    
         
             
              }) %>
         
     | 
| 
       17 
21 
     | 
    
         
             
            <% end %>
         
     | 
| 
         @@ -10,6 +10,8 @@ const TimestampUnstyled = (props) => { 
     | 
|
| 
       10 
10 
     | 
    
         
             
                      text="Basic unstyled example"
         
     | 
| 
       11 
11 
     | 
    
         
             
                  />
         
     | 
| 
       12 
12 
     | 
    
         
             
                  <Timestamp
         
     | 
| 
      
 13 
     | 
    
         
            +
                      align="left"
         
     | 
| 
      
 14 
     | 
    
         
            +
                      showDate
         
     | 
| 
       13 
15 
     | 
    
         
             
                      timestamp={new Date()}
         
     | 
| 
       14 
16 
     | 
    
         
             
                      unstyled
         
     | 
| 
       15 
17 
     | 
    
         
             
                      {...props}
         
     | 
| 
         @@ -22,6 +24,8 @@ const TimestampUnstyled = (props) => { 
     | 
|
| 
       22 
24 
     | 
    
         
             
                  />
         
     | 
| 
       23 
25 
     | 
    
         
             
                  <Title size={1}>
         
     | 
| 
       24 
26 
     | 
    
         
             
                    <Timestamp
         
     | 
| 
      
 27 
     | 
    
         
            +
                        align="left"
         
     | 
| 
      
 28 
     | 
    
         
            +
                        showDate
         
     | 
| 
       25 
29 
     | 
    
         
             
                        timestamp={new Date()}
         
     | 
| 
       26 
30 
     | 
    
         
             
                        unstyled
         
     | 
| 
       27 
31 
     | 
    
         
             
                        {...props}
         
     | 
| 
         @@ -2,30 +2,18 @@ examples: 
     | 
|
| 
       2 
2 
     | 
    
         | 
| 
       3 
3 
     | 
    
         
             
              rails:
         
     | 
| 
       4 
4 
     | 
    
         
             
              - timestamp_default: Default
         
     | 
| 
       5 
     | 
    
         
            -
              - timestamp_show_date: Hide Date
         
     | 
| 
       6 
     | 
    
         
            -
              - timestamp_show_time: Hide Time
         
     | 
| 
       7 
     | 
    
         
            -
              - timestamp_show_current_year: Show Current Year
         
     | 
| 
       8 
     | 
    
         
            -
              - timestamp_timezones: Show Timezones
         
     | 
| 
       9 
5 
     | 
    
         
             
              - timestamp_align: Alignments
         
     | 
| 
       10 
     | 
    
         
            -
              -  
     | 
| 
       11 
     | 
    
         
            -
              - timestamp_updated: Last Updated by 
     | 
| 
       12 
     | 
    
         
            -
              -  
     | 
| 
       13 
     | 
    
         
            -
              - timestamp_updated_show_date: Last Updated by (Updated Variant) - Hide Date
         
     | 
| 
       14 
     | 
    
         
            -
              - timestamp_updated_show_time: Last Updated by (Updated Variant) - Hide Time
         
     | 
| 
      
 6 
     | 
    
         
            +
              - timestamp_timezones: Timezones
         
     | 
| 
      
 7 
     | 
    
         
            +
              - timestamp_updated: Last Updated by
         
     | 
| 
      
 8 
     | 
    
         
            +
              - timestamp_elapsed: Time Ago
         
     | 
| 
       15 
9 
     | 
    
         
             
              - timestamp_unstyled: Unstyled
         
     | 
| 
       16 
10 
     | 
    
         | 
| 
       17 
11 
     | 
    
         
             
              react:
         
     | 
| 
       18 
12 
     | 
    
         
             
              - timestamp_default: Default
         
     | 
| 
       19 
     | 
    
         
            -
              - timestamp_show_date: Hide Date
         
     | 
| 
       20 
     | 
    
         
            -
              - timestamp_show_time: Hide Time
         
     | 
| 
       21 
     | 
    
         
            -
              - timestamp_show_current_year: Show Current Year
         
     | 
| 
       22 
     | 
    
         
            -
              - timestamp_timezones: Show Timezones
         
     | 
| 
       23 
13 
     | 
    
         
             
              - timestamp_align: Alignments
         
     | 
| 
       24 
     | 
    
         
            -
              -  
     | 
| 
       25 
     | 
    
         
            -
              - timestamp_updated: Last Updated by 
     | 
| 
       26 
     | 
    
         
            -
              -  
     | 
| 
       27 
     | 
    
         
            -
              - timestamp_updated_show_date: Last Updated by (Updated Variant) - Hide Date
         
     | 
| 
       28 
     | 
    
         
            -
              - timestamp_updated_show_time: Last Updated by (Updated Variant) - Hide Time
         
     | 
| 
      
 14 
     | 
    
         
            +
              - timestamp_timezones: Timezones
         
     | 
| 
      
 15 
     | 
    
         
            +
              - timestamp_updated: Last Updated by
         
     | 
| 
      
 16 
     | 
    
         
            +
              - timestamp_elapsed: Time Ago
         
     | 
| 
       29 
17 
     | 
    
         
             
              - timestamp_unstyled: Unstyled
         
     | 
| 
       30 
18 
     | 
    
         | 
| 
       31 
19 
     | 
    
         
             
              swift:
         
     | 
| 
         @@ -4,9 +4,3 @@ export { default as TimestampTimezones } from './_timestamp_timezones.jsx' 
     | 
|
| 
       4 
4 
     | 
    
         
             
            export { default as TimestampUpdated } from './_timestamp_updated.jsx'
         
     | 
| 
       5 
5 
     | 
    
         
             
            export { default as TimestampElapsed } from './_timestamp_elapsed.jsx'
         
     | 
| 
       6 
6 
     | 
    
         
             
            export { default as TimestampUnstyled } from './_timestamp_unstyled.jsx'
         
     | 
| 
       7 
     | 
    
         
            -
            export { default as TimestampShowDate } from './_timestamp_show_date.jsx'
         
     | 
| 
       8 
     | 
    
         
            -
            export { default as TimestampShowTime } from './_timestamp_show_time.jsx'
         
     | 
| 
       9 
     | 
    
         
            -
            export { default as TimestampShowCurrentYear } from './_timestamp_show_current_year.jsx'
         
     | 
| 
       10 
     | 
    
         
            -
            export { default as TimestampUpdatedShowCurrentYear } from './_timestamp_updated_show_current_year.jsx'
         
     | 
| 
       11 
     | 
    
         
            -
            export { default as TimestampUpdatedShowDate } from './_timestamp_updated_show_date.jsx'
         
     | 
| 
       12 
     | 
    
         
            -
            export { default as TimestampUpdatedShowTime } from './_timestamp_updated_show_time.jsx'
         
     |