playbook_ui 15.0.0.pre.alpha.PLAY2420atfirstcolumnborderfix10590 → 15.0.0.pre.alpha.PLAY2420atfirstcolumnborderfix10657
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/Components/RegularTableView.tsx +12 -11
- data/app/pb_kits/playbook/pb_advanced_table/Components/VirtualizedTableView.tsx +7 -7
- data/app/pb_kits/playbook/pb_advanced_table/Utilities/RowUtils.ts +7 -2
- data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss +1 -2
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_headers_vertical_border.jsx +1 -2
- data/app/pb_kits/playbook/pb_timestamp/_timestamp.tsx +24 -8
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_align.html.erb +0 -10
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_align.jsx +0 -9
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_align.md +1 -0
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_default.html.erb +3 -17
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_default.jsx +0 -15
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_default.md +1 -0
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_elapsed.html.erb +0 -2
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_elapsed.jsx +0 -2
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_elapsed.md +5 -0
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_show_current_year.html.erb +12 -0
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_show_current_year.jsx +25 -0
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_show_current_year.md +1 -0
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_show_date.html.erb +4 -0
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_show_date.jsx +17 -0
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_show_date.md +1 -0
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_show_time.html.erb +18 -0
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_show_time.jsx +44 -0
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_show_time.md +1 -0
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_timezones.html.erb +0 -14
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_timezones.jsx +0 -14
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_timezones.md +1 -0
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_unstyled.html.erb +0 -4
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_unstyled.jsx +0 -4
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated.jsx +0 -1
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated.md +5 -0
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated_show_current_year.html.erb +16 -0
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated_show_current_year.jsx +30 -0
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated_show_current_year.md +1 -0
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated_show_date.html.erb +16 -0
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated_show_date.jsx +30 -0
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated_show_date.md +1 -0
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated_show_time.html.erb +26 -0
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated_show_time.jsx +41 -0
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated_show_time.md +1 -0
- data/app/pb_kits/playbook/pb_timestamp/docs/example.yml +18 -6
- data/app/pb_kits/playbook/pb_timestamp/docs/index.js +6 -0
- data/app/pb_kits/playbook/pb_timestamp/timestamp.rb +29 -7
- data/app/pb_kits/playbook/pb_timestamp/timestamp.test.js +69 -4
- data/dist/chunks/{_weekday_stacked-YwRTPuBs.js → _weekday_stacked-DlGphUxE.js} +2 -2
- data/dist/chunks/vendor.js +1 -1
- data/dist/playbook-doc.js +2 -2
- data/dist/playbook.css +1 -1
- data/lib/playbook/version.rb +1 -1
- metadata +26 -4
- data/app/pb_kits/playbook/pb_timestamp/docs/_time_stamp_default.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: f5719acd12964a607bbb98336ec979257870f9e753630feb40ded245c9006983
         | 
| 4 | 
            +
              data.tar.gz: c9ff2ab20c10699bfd895246a48681497e24d64e4fb728785433217dcd9a81db
         | 
| 5 5 | 
             
            SHA512:
         | 
| 6 | 
            -
              metadata.gz:  | 
| 7 | 
            -
              data.tar.gz:  | 
| 6 | 
            +
              metadata.gz: 117a625ca76c71574df9f53fb392b60ec26652e65a889ecdf18d6a5f6f228fef5e1540c5973eb2975a46e0c69f353772d3d1bd1928c04445eca2c62aa653dae5
         | 
| 7 | 
            +
              data.tar.gz: 2530fa7b4f5c0da36660ed9aac44f5171571681a4ba31eb7c67412d07e1d4071bb3a75f465e85e058c5d413136103762340a639b2a3ff77242cd767831e094ae
         | 
| @@ -5,6 +5,7 @@ import { flexRender, Row, Cell } from "@tanstack/react-table" | |
| 5 5 | 
             
            import { GenericObject } from "../../types"
         | 
| 6 6 | 
             
            import { isChrome } from "../Utilities/BrowserCheck"
         | 
| 7 7 | 
             
            import { findColumnDefByAccessor } from "../Utilities/ColumnStylingHelper"
         | 
| 8 | 
            +
            import { getRowColorClass, shouldShowLoadingIndicator } from "../Utilities/RowUtils"
         | 
| 8 9 |  | 
| 9 10 | 
             
            import LoadingInline from "../../pb_loading_inline/_loading_inline"
         | 
| 10 11 | 
             
            import Checkbox from "../../pb_checkbox/_checkbox"
         | 
| @@ -60,7 +61,7 @@ const TableCellRenderer = ({ | |
| 60 61 | 
             
                    const cellAlignment = colDef?.columnStyling?.cellAlignment ?? "right"
         | 
| 61 62 | 
             
                    const paddingValue = colDef?.columnStyling?.cellPadding ?? customRowStyle?.cellPadding
         | 
| 62 63 | 
             
                    const paddingClass = paddingValue ? `p_${paddingValue}` : undefined
         | 
| 63 | 
            -
             | 
| 64 | 
            +
             | 
| 64 65 | 
             
                    return (
         | 
| 65 66 | 
             
                      <td
         | 
| 66 67 | 
             
                          align={cellAlignment}
         | 
| @@ -132,6 +133,7 @@ export const RegularTableView = ({ | |
| 132 133 |  | 
| 133 134 | 
             
              const columnPinning = table.getState().columnPinning || { left: [] };
         | 
| 134 135 | 
             
              const columnDefinitions = table.options.meta?.columnDefinitions || [];
         | 
| 136 | 
            +
             | 
| 135 137 | 
             
              // Row pinning
         | 
| 136 138 | 
             
              function PinnedRow({ row }: { row: Row<any> }) {
         | 
| 137 139 | 
             
                const customRowStyle = rowStyling?.length > 0 && rowStyling?.find((s: GenericObject) => s?.rowId === row.id);
         | 
| @@ -144,7 +146,7 @@ export const RegularTableView = ({ | |
| 144 146 | 
             
                        backgroundColor: customRowStyle?.backgroundColor ? customRowStyle?.backgroundColor : 'white',
         | 
| 145 147 | 
             
                        color: customRowStyle?.fontColor,
         | 
| 146 148 | 
             
                        position: 'sticky',
         | 
| 147 | 
            -
                        top: | 
| 149 | 
            +
                        top:
         | 
| 148 150 | 
             
                          row.getIsPinned() === 'top'
         | 
| 149 151 | 
             
                              ? `${row.getPinnedIndex() * rowHeight + headerHeight}px`
         | 
| 150 152 | 
             
                              : undefined,
         | 
| @@ -169,21 +171,20 @@ export const RegularTableView = ({ | |
| 169 171 | 
             
              return (
         | 
| 170 172 | 
             
                <>
         | 
| 171 173 | 
             
                  {pinnedRows && table.getTopRows().map((row: Row<GenericObject>) => (
         | 
| 172 | 
            -
                    <PinnedRow key={row.id} | 
| 173 | 
            -
                        row={row} | 
| 174 | 
            +
                    <PinnedRow key={row.id}
         | 
| 175 | 
            +
                        row={row}
         | 
| 174 176 | 
             
                    />
         | 
| 175 177 | 
             
                  ))}
         | 
| 176 178 | 
             
                  {totalRows.map((row: Row<GenericObject>, rowIndex: number) => {
         | 
| 177 | 
            -
                    const isExpandable = row.getIsExpanded();
         | 
| 178 179 | 
             
                    const isFirstChildofSubrow = row.depth > 0 && row.index === 0;
         | 
| 179 | 
            -
                    const rowHasNoChildren = row.original?.children && !row.original.children.length ? true : false;
         | 
| 180 180 | 
             
                    const numberOfColumns = table.getAllFlatColumns().length;
         | 
| 181 | 
            -
                    const isDataLoading = isExpandable && (inlineRowLoading && rowHasNoChildren) && (row.depth < columnDefinitions[0]?.cellAccessors?.length);
         | 
| 182 | 
            -
                    const rowBackground = isExpandable && ((!inlineRowLoading && row.getCanExpand()) || (inlineRowLoading && rowHasNoChildren));
         | 
| 183 | 
            -
                    const rowColor = row.getIsSelected() ? "bg-row-selection" : rowBackground ? "bg-silver" : "bg-white";
         | 
| 184 181 | 
             
                    const isFirstRegularRow = rowIndex === 0 && !row.getIsPinned();
         | 
| 185 182 | 
             
                    const customRowStyle = rowStyling?.length > 0 && rowStyling?.find((s: GenericObject) => s?.rowId === row.id);
         | 
| 186 183 |  | 
| 184 | 
            +
                    // Use functions from RowUtils for consistent cell coloring
         | 
| 185 | 
            +
                    const rowColor = getRowColorClass(row, inlineRowLoading || false);
         | 
| 186 | 
            +
                    const isDataLoading = shouldShowLoadingIndicator(row, inlineRowLoading || false, columnDefinitions[0]?.cellAccessors?.length || 0);
         | 
| 187 | 
            +
             | 
| 187 188 | 
             
                    return (
         | 
| 188 189 | 
             
                      <React.Fragment key={`${row.index}-${row.id}-${row.depth}-row`}>
         | 
| 189 190 | 
             
                        {isFirstChildofSubrow && subRowHeaders && (
         | 
| @@ -228,7 +229,7 @@ export const RegularTableView = ({ | |
| 228 229 |  | 
| 229 230 | 
             
                        {/* Display LoadingInline if Row Data is querying and there are no children already */}
         | 
| 230 231 | 
             
                        {isDataLoading && (
         | 
| 231 | 
            -
                          <tr key={`${row.id}-row`}>
         | 
| 232 | 
            +
                          <tr key={`${row.id}-loading-row`}>
         | 
| 232 233 | 
             
                            <td colSpan={numberOfColumns}
         | 
| 233 234 | 
             
                                style={{ paddingLeft: `${row.depth === 0 ? 0.5 : (row.depth * 2)}em` }}
         | 
| 234 235 | 
             
                            >
         | 
| @@ -243,4 +244,4 @@ export const RegularTableView = ({ | |
| 243 244 | 
             
              );
         | 
| 244 245 | 
             
            }
         | 
| 245 246 |  | 
| 246 | 
            -
            export default RegularTableView;
         | 
| 247 | 
            +
            export default RegularTableView;
         | 
| @@ -7,6 +7,7 @@ import { GenericObject } from "../../types" | |
| 7 7 |  | 
| 8 8 | 
             
            import { isChrome } from "../Utilities/BrowserCheck"
         | 
| 9 9 | 
             
            import { getVirtualizedRowStyle } from "../Utilities/TableContainerStyles"
         | 
| 10 | 
            +
            import { getRowColorClass } from "../Utilities/RowUtils"
         | 
| 10 11 |  | 
| 11 12 | 
             
            import LoadingInline from "../../pb_loading_inline/_loading_inline"
         | 
| 12 13 | 
             
            import Checkbox from "../../pb_checkbox/_checkbox"
         | 
| @@ -45,10 +46,10 @@ export const VirtualizedTableView = ({ | |
| 45 46 |  | 
| 46 47 | 
             
              const columnPinning = table.getState().columnPinning || { left: [] };
         | 
| 47 48 | 
             
              const sortingState = JSON.stringify(table.getState().sorting || []);
         | 
| 48 | 
            -
             | 
| 49 | 
            +
             | 
| 49 50 | 
             
              // Store column widths extracted from header
         | 
| 50 51 | 
             
              const [columnWidths, setColumnWidths] = useState<{[key: string]: string}>({});
         | 
| 51 | 
            -
             | 
| 52 | 
            +
             | 
| 52 53 | 
             
              // Function to get header cell widths
         | 
| 53 54 | 
             
              const getHeaderCellWidths = () => {
         | 
| 54 55 | 
             
                const widths: {[key: string]: string} = {};
         | 
| @@ -136,7 +137,7 @@ export const VirtualizedTableView = ({ | |
| 136 137 | 
             
                  </tr>
         | 
| 137 138 | 
             
                );
         | 
| 138 139 | 
             
              }
         | 
| 139 | 
            -
             | 
| 140 | 
            +
             | 
| 140 141 | 
             
              // Establish # of Parent Rows (so that Footer count does not include every single row)
         | 
| 141 142 | 
             
              const topLevelRowCount = table.getRowModel().flatRows.filter((row: Row<GenericObject>) => row.depth === 0).length;
         | 
| 142 143 |  | 
| @@ -172,10 +173,9 @@ export const VirtualizedTableView = ({ | |
| 172 173 |  | 
| 173 174 | 
             
                    if (item.type === 'row') {
         | 
| 174 175 | 
             
                      const row = item.row;
         | 
| 175 | 
            -
             | 
| 176 | 
            -
                       | 
| 177 | 
            -
                      const  | 
| 178 | 
            -
                      const rowColor = row.getIsSelected() ? "bg-row-selection" : rowBackground ? "bg-silver" : "bg-white";
         | 
| 176 | 
            +
             | 
| 177 | 
            +
                      // Use the utility function to get consistent row color
         | 
| 178 | 
            +
                      const rowColor = getRowColorClass(row, inlineRowLoading || false);
         | 
| 179 179 |  | 
| 180 180 | 
             
                      return (
         | 
| 181 181 | 
             
                        <tr
         | 
| @@ -10,9 +10,14 @@ export const getRowColorClass = ( | |
| 10 10 | 
             
            ): string => {
         | 
| 11 11 | 
             
              const isExpandable = row.getIsExpanded();
         | 
| 12 12 | 
             
              const rowHasNoChildren = row.original?.children && !row.original.children.length ? true : false;
         | 
| 13 | 
            -
              const rowBackground = isExpandable && ((!inlineRowLoading && row.getCanExpand()) || (inlineRowLoading && rowHasNoChildren));
         | 
| 14 13 |  | 
| 15 | 
            -
               | 
| 14 | 
            +
              // Check if row can expand or is currently expanded
         | 
| 15 | 
            +
              const shouldShowExpandedBackground = isExpandable && (
         | 
| 16 | 
            +
                (!inlineRowLoading && row.getCanExpand()) ||
         | 
| 17 | 
            +
                (inlineRowLoading && (rowHasNoChildren || row.getCanExpand()))
         | 
| 18 | 
            +
              );
         | 
| 19 | 
            +
             | 
| 20 | 
            +
              return row.getIsSelected() ? "bg-row-selection" : shouldShowExpandedBackground ? "bg-silver" : "bg-white";
         | 
| 16 21 | 
             
            }
         | 
| 17 22 |  | 
| 18 23 | 
             
            /**
         | 
| @@ -1022,11 +1022,10 @@ | |
| 1022 1022 | 
             
              }
         | 
| 1023 1023 |  | 
| 1024 1024 | 
             
              // Without vertical border, remove all last-cell borders
         | 
| 1025 | 
            +
              // Specifically for header to prevent thicker borders in firefox.
         | 
| 1025 1026 | 
             
              .pb_table:not(.vertical-border) {
         | 
| 1026 | 
            -
                .pb_advanced_table_body .last-cell,
         | 
| 1027 1027 | 
             
                .pb_advanced_table_header .last-header-cell {
         | 
| 1028 1028 | 
             
                  box-shadow: none !important;
         | 
| 1029 | 
            -
                  border-right: none !important;
         | 
| 1030 1029 | 
             
                }
         | 
| 1031 1030 | 
             
              }
         | 
| 1032 1031 |  | 
    
        data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_headers_vertical_border.jsx
    CHANGED
    
    | @@ -47,7 +47,7 @@ const AdvancedTableColumnHeadersVerticalBorder = (props) => { | |
| 47 47 | 
             
              ];
         | 
| 48 48 |  | 
| 49 49 | 
             
              const tableProps = {
         | 
| 50 | 
            -
                 | 
| 50 | 
            +
                sticky: true,
         | 
| 51 51 | 
             
              }
         | 
| 52 52 | 
             
            // Adjusted for testing purposes. Will revert prior to commit.
         | 
| 53 53 | 
             
              return (
         | 
| @@ -55,7 +55,6 @@ const AdvancedTableColumnHeadersVerticalBorder = (props) => { | |
| 55 55 | 
             
                  <Card>
         | 
| 56 56 | 
             
                    <AdvancedTable
         | 
| 57 57 | 
             
                        columnDefinitions={columnDefinitions}
         | 
| 58 | 
            -
                        columnGroupBorderColor="text_lt_default"
         | 
| 59 58 | 
             
                        tableData={MOCK_DATA}
         | 
| 60 59 | 
             
                        tableProps={tableProps}
         | 
| 61 60 | 
             
                        {...props}
         | 
| @@ -18,9 +18,11 @@ type TimestampProps = { | |
| 18 18 | 
             
              timezone: string,
         | 
| 19 19 | 
             
              htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
         | 
| 20 20 | 
             
              id?: string,
         | 
| 21 | 
            +
              showCurrentYear?: boolean,
         | 
| 21 22 | 
             
              showDate?: boolean,
         | 
| 22 23 | 
             
              showUser?: boolean,
         | 
| 23 24 | 
             
              hideUpdated?: boolean,
         | 
| 25 | 
            +
              showTime?: boolean,
         | 
| 24 26 | 
             
              showTimezone?: boolean,
         | 
| 25 27 | 
             
              unstyled?: boolean,
         | 
| 26 28 | 
             
              variant?: "default" | "elapsed" | "updated"
         | 
| @@ -37,9 +39,11 @@ const Timestamp = (props: TimestampProps): React.ReactElement => { | |
| 37 39 | 
             
                text,
         | 
| 38 40 | 
             
                timezone,
         | 
| 39 41 | 
             
                timestamp,
         | 
| 42 | 
            +
                showCurrentYear = false,
         | 
| 40 43 | 
             
                showDate = true,
         | 
| 41 44 | 
             
                showUser = false,
         | 
| 42 45 | 
             
                hideUpdated = false,
         | 
| 46 | 
            +
                showTime = true,
         | 
| 43 47 | 
             
                showTimezone = false,
         | 
| 44 48 | 
             
                unstyled = false,
         | 
| 45 49 | 
             
                variant = 'default',
         | 
| @@ -55,7 +59,6 @@ const Timestamp = (props: TimestampProps): React.ReactElement => { | |
| 55 59 | 
             
              )
         | 
| 56 60 |  | 
| 57 61 | 
             
              const currentYear = new Date().getFullYear().toString()
         | 
| 58 | 
            -
              const dateDisplay = `${DateTime.toMonth(timestamp, timezone)} ${DateTime.toDay(timestamp, timezone)}`
         | 
| 59 62 | 
             
              const shouldShowUser = showUser == true && text.length > 0
         | 
| 60 63 | 
             
              const shouldShowTimezone = showTimezone == true && timezone.length > 0
         | 
| 61 64 | 
             
              const updatedText = hideUpdated ? "" : "Last updated"
         | 
| @@ -70,16 +73,26 @@ const Timestamp = (props: TimestampProps): React.ReactElement => { | |
| 70 73 | 
             
                return timeDisplay
         | 
| 71 74 | 
             
              }
         | 
| 72 75 |  | 
| 76 | 
            +
              const baseDateDisplay = () => {
         | 
| 77 | 
            +
              let display = `${DateTime.toMonth(timestamp, timezone)} ${DateTime.toDay(timestamp, timezone)}`
         | 
| 78 | 
            +
              if (DateTime.toYear(timestamp, timezone).toString() !== currentYear || showCurrentYear) {
         | 
| 79 | 
            +
                display = `${display}, ${DateTime.toYear(timestamp, timezone)}`
         | 
| 80 | 
            +
              }
         | 
| 81 | 
            +
              return display
         | 
| 82 | 
            +
            }
         | 
| 83 | 
            +
             | 
| 73 84 | 
             
              const fullDateDisplay = () => {
         | 
| 74 | 
            -
                 | 
| 75 | 
            -
                 | 
| 76 | 
            -
                  fullDisplay = `${fullDisplay}, ${DateTime.toYear(timestamp, timezone)}`
         | 
| 77 | 
            -
                }
         | 
| 78 | 
            -
                return `${fullDisplay} ${' \u00b7 '} ${fullTimeDisplay()}`
         | 
| 85 | 
            +
                const fullDisplay = baseDateDisplay()
         | 
| 86 | 
            +
                return showTime ? `${fullDisplay} ${' \u00b7 '} ${fullTimeDisplay()}` : fullDisplay
         | 
| 79 87 | 
             
              }
         | 
| 80 88 |  | 
| 81 89 | 
             
              const formatUpdatedString = () => {
         | 
| 82 | 
            -
                 | 
| 90 | 
            +
                const finalUpdatedString = []
         | 
| 91 | 
            +
                if (shouldShowUser) finalUpdatedString.push(`by ${text}`)
         | 
| 92 | 
            +
                if (showDate && !showTime) finalUpdatedString.push(`on ${baseDateDisplay()}`)
         | 
| 93 | 
            +
                if (showDate && showTime) finalUpdatedString.push(`on ${baseDateDisplay()} at ${timeDisplay}`)
         | 
| 94 | 
            +
                if (showTime && !showDate) finalUpdatedString.push(`at ${timeDisplay}`)
         | 
| 95 | 
            +
                return `Last updated ${finalUpdatedString.join(' ')}`
         | 
| 83 96 | 
             
              }
         | 
| 84 97 |  | 
| 85 98 | 
             
              const formatElapsedString = () => {
         | 
| @@ -93,7 +106,10 @@ const Timestamp = (props: TimestampProps): React.ReactElement => { | |
| 93 106 | 
             
                case 'elapsed':
         | 
| 94 107 | 
             
                  return formatElapsedString()
         | 
| 95 108 | 
             
                default:
         | 
| 96 | 
            -
                   | 
| 109 | 
            +
                  if (showDate && showTime) return timestamp ? fullDateDisplay() : text
         | 
| 110 | 
            +
                  if (showDate && !showTime) return baseDateDisplay()
         | 
| 111 | 
            +
                  if (!showDate && showTime) return fullTimeDisplay()
         | 
| 112 | 
            +
                  return text
         | 
| 97 113 | 
             
                }
         | 
| 98 114 | 
             
              }
         | 
| 99 115 |  | 
| @@ -8,7 +8,6 @@ | |
| 8 8 |  | 
| 9 9 | 
             
            <%= pb_rails("timestamp", props: {
         | 
| 10 10 | 
             
              timestamp: DateTime.now,
         | 
| 11 | 
            -
              show_date: true,
         | 
| 12 11 | 
             
              align: "left"
         | 
| 13 12 | 
             
            }) %>
         | 
| 14 13 |  | 
| @@ -16,7 +15,6 @@ | |
| 16 15 |  | 
| 17 16 | 
             
            <%= pb_rails("timestamp", props: {
         | 
| 18 17 | 
             
              timestamp: DateTime.now + 4.years,
         | 
| 19 | 
            -
              show_date: true,
         | 
| 20 18 | 
             
              align: "left"
         | 
| 21 19 | 
             
            }) %>
         | 
| 22 20 |  | 
| @@ -24,7 +22,6 @@ | |
| 24 22 |  | 
| 25 23 | 
             
            <%= pb_rails("timestamp", props: {
         | 
| 26 24 | 
             
              timestamp: DateTime.now - 1.year,
         | 
| 27 | 
            -
              show_date: true,
         | 
| 28 25 | 
             
              align: "left"
         | 
| 29 26 | 
             
            }) %>
         | 
| 30 27 |  | 
| @@ -40,7 +37,6 @@ | |
| 40 37 |  | 
| 41 38 | 
             
            <%= pb_rails("timestamp", props: {
         | 
| 42 39 | 
             
              timestamp: DateTime.now,
         | 
| 43 | 
            -
              show_date: true,
         | 
| 44 40 | 
             
              align: "center"
         | 
| 45 41 | 
             
            }) %>
         | 
| 46 42 |  | 
| @@ -48,7 +44,6 @@ | |
| 48 44 |  | 
| 49 45 | 
             
            <%= pb_rails("timestamp", props: {
         | 
| 50 46 | 
             
              timestamp: DateTime.now + 4.years,
         | 
| 51 | 
            -
              show_date: true,
         | 
| 52 47 | 
             
              align: "center"
         | 
| 53 48 | 
             
            }) %>
         | 
| 54 49 |  | 
| @@ -56,7 +51,6 @@ | |
| 56 51 |  | 
| 57 52 | 
             
            <%= pb_rails("timestamp", props: {
         | 
| 58 53 | 
             
              timestamp: DateTime.now - 1.year,
         | 
| 59 | 
            -
              show_date: true,
         | 
| 60 54 | 
             
              align: "center"
         | 
| 61 55 | 
             
            }) %>
         | 
| 62 56 |  | 
| @@ -64,7 +58,6 @@ | |
| 64 58 |  | 
| 65 59 | 
             
            <%= pb_rails("timestamp", props: {
         | 
| 66 60 | 
             
              timestamp: DateTime.now,
         | 
| 67 | 
            -
              show_date: false,
         | 
| 68 61 | 
             
              align: "right"
         | 
| 69 62 | 
             
            }) %>
         | 
| 70 63 |  | 
| @@ -72,7 +65,6 @@ | |
| 72 65 |  | 
| 73 66 | 
             
            <%= pb_rails("timestamp", props: {
         | 
| 74 67 | 
             
              timestamp: DateTime.now,
         | 
| 75 | 
            -
              show_date: true,
         | 
| 76 68 | 
             
              align: "right"
         | 
| 77 69 | 
             
            }) %>
         | 
| 78 70 |  | 
| @@ -80,7 +72,6 @@ | |
| 80 72 |  | 
| 81 73 | 
             
            <%= pb_rails("timestamp", props: {
         | 
| 82 74 | 
             
              timestamp: DateTime.now + 4.years,
         | 
| 83 | 
            -
              show_date: true,
         | 
| 84 75 | 
             
              align: "right"
         | 
| 85 76 | 
             
            }) %>
         | 
| 86 77 |  | 
| @@ -88,6 +79,5 @@ | |
| 88 79 |  | 
| 89 80 | 
             
            <%= pb_rails("timestamp", props: {
         | 
| 90 81 | 
             
              timestamp: DateTime.now - 1.year,
         | 
| 91 | 
            -
              show_date: true,
         | 
| 92 82 | 
             
              align: "right"
         | 
| 93 83 | 
             
            }) %>
         | 
| @@ -25,7 +25,6 @@ const TimestampAlign = (props) => { | |
| 25 25 |  | 
| 26 26 | 
             
                  <Timestamp
         | 
| 27 27 | 
             
                      align="left"
         | 
| 28 | 
            -
                      showDate
         | 
| 29 28 | 
             
                      timestamp={todaysDate}
         | 
| 30 29 | 
             
                      {...props}
         | 
| 31 30 | 
             
                  />
         | 
| @@ -34,7 +33,6 @@ const TimestampAlign = (props) => { | |
| 34 33 |  | 
| 35 34 | 
             
                  <Timestamp
         | 
| 36 35 | 
             
                      align="left"
         | 
| 37 | 
            -
                      showDate
         | 
| 38 36 | 
             
                      timestamp={futureDate}
         | 
| 39 37 | 
             
                      {...props}
         | 
| 40 38 | 
             
                  />
         | 
| @@ -43,7 +41,6 @@ const TimestampAlign = (props) => { | |
| 43 41 |  | 
| 44 42 | 
             
                  <Timestamp
         | 
| 45 43 | 
             
                      align="left"
         | 
| 46 | 
            -
                      showDate
         | 
| 47 44 | 
             
                      timestamp={pastDate}
         | 
| 48 45 | 
             
                      {...props}
         | 
| 49 46 | 
             
                  />
         | 
| @@ -62,7 +59,6 @@ const TimestampAlign = (props) => { | |
| 62 59 |  | 
| 63 60 | 
             
                  <Timestamp
         | 
| 64 61 | 
             
                      align="center"
         | 
| 65 | 
            -
                      showDate
         | 
| 66 62 | 
             
                      timestamp={todaysDate}
         | 
| 67 63 | 
             
                      {...props}
         | 
| 68 64 | 
             
                  />
         | 
| @@ -71,7 +67,6 @@ const TimestampAlign = (props) => { | |
| 71 67 |  | 
| 72 68 | 
             
                  <Timestamp
         | 
| 73 69 | 
             
                      align="center"
         | 
| 74 | 
            -
                      showDate
         | 
| 75 70 | 
             
                      timestamp={futureDate}
         | 
| 76 71 | 
             
                      {...props}
         | 
| 77 72 | 
             
                  />
         | 
| @@ -80,7 +75,6 @@ const TimestampAlign = (props) => { | |
| 80 75 |  | 
| 81 76 | 
             
                  <Timestamp
         | 
| 82 77 | 
             
                      align="center"
         | 
| 83 | 
            -
                      showDate
         | 
| 84 78 | 
             
                      timestamp={pastDate}
         | 
| 85 79 | 
             
                      {...props}
         | 
| 86 80 | 
             
                  />
         | 
| @@ -99,7 +93,6 @@ const TimestampAlign = (props) => { | |
| 99 93 |  | 
| 100 94 | 
             
                  <Timestamp
         | 
| 101 95 | 
             
                      align="right"
         | 
| 102 | 
            -
                      showDate
         | 
| 103 96 | 
             
                      timestamp={todaysDate}
         | 
| 104 97 | 
             
                      {...props}
         | 
| 105 98 | 
             
                  />
         | 
| @@ -108,7 +101,6 @@ const TimestampAlign = (props) => { | |
| 108 101 |  | 
| 109 102 | 
             
                  <Timestamp
         | 
| 110 103 | 
             
                      align="right"
         | 
| 111 | 
            -
                      showDate
         | 
| 112 104 | 
             
                      timestamp={futureDate}
         | 
| 113 105 | 
             
                      {...props}
         | 
| 114 106 | 
             
                  />
         | 
| @@ -117,7 +109,6 @@ const TimestampAlign = (props) => { | |
| 117 109 |  | 
| 118 110 | 
             
                  <Timestamp
         | 
| 119 111 | 
             
                      align="right"
         | 
| 120 | 
            -
                      showDate
         | 
| 121 112 | 
             
                      timestamp={pastDate}
         | 
| 122 113 | 
             
                      {...props}
         | 
| 123 114 | 
             
                  />
         | 
| @@ -0,0 +1 @@ | |
| 1 | 
            +
            The `align` prop can be used to set alignment. This prop is set to 'left' by default. 
         | 
| @@ -1,29 +1,15 @@ | |
| 1 1 | 
             
            <%= pb_rails("timestamp", props: {
         | 
| 2 | 
            -
              timestamp: DateTime.now | 
| 3 | 
            -
              show_date: false,
         | 
| 4 | 
            -
              align: "left"
         | 
| 2 | 
            +
              timestamp: DateTime.now
         | 
| 5 3 | 
             
            }) %>
         | 
| 6 4 |  | 
| 7 5 | 
             
            <br>
         | 
| 8 6 |  | 
| 9 7 | 
             
            <%= pb_rails("timestamp", props: {
         | 
| 10 | 
            -
              timestamp: DateTime.now | 
| 11 | 
            -
              show_date: true,
         | 
| 12 | 
            -
              align: "left"
         | 
| 8 | 
            +
              timestamp: DateTime.now + 4.years
         | 
| 13 9 | 
             
            }) %>
         | 
| 14 10 |  | 
| 15 11 | 
             
            <br>
         | 
| 16 12 |  | 
| 17 13 | 
             
            <%= pb_rails("timestamp", props: {
         | 
| 18 | 
            -
              timestamp: DateTime.now  | 
| 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"
         | 
| 14 | 
            +
              timestamp: DateTime.now - 1.year
         | 
| 29 15 | 
             
            }) %>
         | 
| @@ -15,8 +15,6 @@ const TimestampDefault = (props) => { | |
| 15 15 | 
             
              return (
         | 
| 16 16 | 
             
                <div>
         | 
| 17 17 | 
             
                  <Timestamp
         | 
| 18 | 
            -
                      align="left"
         | 
| 19 | 
            -
                      showDate={false}
         | 
| 20 18 | 
             
                      timestamp={todaysDate}
         | 
| 21 19 | 
             
                      {...props}
         | 
| 22 20 | 
             
                  />
         | 
| @@ -24,17 +22,6 @@ const TimestampDefault = (props) => { | |
| 24 22 | 
             
                  <br />
         | 
| 25 23 |  | 
| 26 24 | 
             
                  <Timestamp
         | 
| 27 | 
            -
                      align="left"
         | 
| 28 | 
            -
                      showDate
         | 
| 29 | 
            -
                      timestamp={todaysDate}
         | 
| 30 | 
            -
                      {...props}
         | 
| 31 | 
            -
                  />
         | 
| 32 | 
            -
             | 
| 33 | 
            -
                  <br />
         | 
| 34 | 
            -
             | 
| 35 | 
            -
                  <Timestamp
         | 
| 36 | 
            -
                      align="left"
         | 
| 37 | 
            -
                      showDate
         | 
| 38 25 | 
             
                      timestamp={futureDate}
         | 
| 39 26 | 
             
                      {...props}
         | 
| 40 27 | 
             
                  />
         | 
| @@ -42,8 +29,6 @@ const TimestampDefault = (props) => { | |
| 42 29 | 
             
                  <br />
         | 
| 43 30 |  | 
| 44 31 | 
             
                  <Timestamp
         | 
| 45 | 
            -
                      align="left"
         | 
| 46 | 
            -
                      showDate
         | 
| 47 32 | 
             
                      timestamp={pastDate}
         | 
| 48 33 | 
             
                      {...props}
         | 
| 49 34 | 
             
                  />
         | 
| @@ -0,0 +1 @@ | |
| 1 | 
            +
            By default, the timestamp kit will display the date and time as shown here. If the date is NOT within the current year, the year will also be shown while dates in the current year will not show the year. 
         | 
| @@ -10,7 +10,6 @@ | |
| 10 10 | 
             
            <%= pb_rails("timestamp", props: {
         | 
| 11 11 | 
             
              timestamp: DateTime.now - 3.months,
         | 
| 12 12 | 
             
              variant: "elapsed",
         | 
| 13 | 
            -
              show_user: false
         | 
| 14 13 | 
             
            }) %>
         | 
| 15 14 |  | 
| 16 15 | 
             
            <br>
         | 
| @@ -18,6 +17,5 @@ | |
| 18 17 | 
             
            <%= pb_rails("timestamp", props: {
         | 
| 19 18 | 
             
              timestamp: DateTime.now - 320.days,
         | 
| 20 19 | 
             
              variant: "elapsed",
         | 
| 21 | 
            -
              show_user: false,
         | 
| 22 20 | 
             
              hide_updated: true
         | 
| 23 21 | 
             
            }) %>
         | 
| @@ -23,7 +23,6 @@ const TimestampElapsed = (props) => { | |
| 23 23 | 
             
                  <br />
         | 
| 24 24 |  | 
| 25 25 | 
             
                  <Timestamp
         | 
| 26 | 
            -
                      showUser={false}
         | 
| 27 26 | 
             
                      timestamp={customDate}
         | 
| 28 27 | 
             
                      variant="elapsed"
         | 
| 29 28 | 
             
                      {...props}
         | 
| @@ -33,7 +32,6 @@ const TimestampElapsed = (props) => { | |
| 33 32 |  | 
| 34 33 | 
             
                  <Timestamp
         | 
| 35 34 | 
             
                      hideUpdated
         | 
| 36 | 
            -
                      showUser={false}
         | 
| 37 35 | 
             
                      timestamp={customDate}
         | 
| 38 36 | 
             
                      variant="elapsed"
         | 
| 39 37 | 
             
                      {...props}
         | 
| @@ -0,0 +1,5 @@ | |
| 1 | 
            +
            Use variant `elapsed` to show time ago. This variant can be customized in several ways:
         | 
| 2 | 
            +
             | 
| 3 | 
            +
            Use the optional `showUser`/`show_user` prop to show user as part of the text. When showing the user, pass in the user name using the `text` prop as shown. `showUser`/`show_user` is set to false by default. 
         | 
| 4 | 
            +
             | 
| 5 | 
            +
            Use the optional `hideUpdated`/`hide_updated` prop to hide the 'Last updated' text if needed. 
         | 
| @@ -0,0 +1,25 @@ | |
| 1 | 
            +
            import React from 'react'
         | 
| 2 | 
            +
            import Timestamp from '../_timestamp'
         | 
| 3 | 
            +
             | 
| 4 | 
            +
             | 
| 5 | 
            +
            const TimestampShowCurrentYear = (props) => {
         | 
| 6 | 
            +
              return (
         | 
| 7 | 
            +
                <div>
         | 
| 8 | 
            +
                  <Timestamp
         | 
| 9 | 
            +
                      showCurrentYear
         | 
| 10 | 
            +
                      timestamp={new Date()}
         | 
| 11 | 
            +
                      {...props}
         | 
| 12 | 
            +
                  />
         | 
| 13 | 
            +
                  <br />
         | 
| 14 | 
            +
                  <Timestamp
         | 
| 15 | 
            +
                      showCurrentYear
         | 
| 16 | 
            +
                      showTime={false}
         | 
| 17 | 
            +
                      timestamp={new Date()}
         | 
| 18 | 
            +
                      {...props}
         | 
| 19 | 
            +
                  />
         | 
| 20 | 
            +
             | 
| 21 | 
            +
                </div>
         | 
| 22 | 
            +
              )
         | 
| 23 | 
            +
            }
         | 
| 24 | 
            +
             | 
| 25 | 
            +
            export default TimestampShowCurrentYear
         | 
| @@ -0,0 +1 @@ | |
| 1 | 
            +
            Use the `showCurrentYear`/`show_current_year` prop to show the year even if it is the current year. This is set to false by default.
         | 
| @@ -0,0 +1,17 @@ | |
| 1 | 
            +
            import React from 'react'
         | 
| 2 | 
            +
            import Timestamp from '../_timestamp'
         | 
| 3 | 
            +
             | 
| 4 | 
            +
            const TimestampShowDate = (props) => {
         | 
| 5 | 
            +
              return (
         | 
| 6 | 
            +
                <div>
         | 
| 7 | 
            +
                  <Timestamp
         | 
| 8 | 
            +
                      align="left"
         | 
| 9 | 
            +
                      showDate={false}
         | 
| 10 | 
            +
                      timestamp={new Date()}
         | 
| 11 | 
            +
                      {...props}
         | 
| 12 | 
            +
                  />
         | 
| 13 | 
            +
                </div>
         | 
| 14 | 
            +
              )
         | 
| 15 | 
            +
            }
         | 
| 16 | 
            +
             | 
| 17 | 
            +
            export default TimestampShowDate
         | 
| @@ -0,0 +1 @@ | |
| 1 | 
            +
            The `showDate`/`show_date` prop is set to true by default but can be set to false to hide the date.
         | 
| @@ -0,0 +1,18 @@ | |
| 1 | 
            +
            <%= pb_rails("timestamp", props: {
         | 
| 2 | 
            +
              timestamp: DateTime.now,
         | 
| 3 | 
            +
              show_time: false,
         | 
| 4 | 
            +
            }) %>
         | 
| 5 | 
            +
             | 
| 6 | 
            +
            <br>
         | 
| 7 | 
            +
             | 
| 8 | 
            +
            <%= pb_rails("timestamp", props: {
         | 
| 9 | 
            +
              timestamp: DateTime.now + 4.years,
         | 
| 10 | 
            +
              show_time: false,
         | 
| 11 | 
            +
            }) %>
         | 
| 12 | 
            +
             | 
| 13 | 
            +
            <br>
         | 
| 14 | 
            +
             | 
| 15 | 
            +
            <%= pb_rails("timestamp", props: {
         | 
| 16 | 
            +
              timestamp: DateTime.now - 1.year,
         | 
| 17 | 
            +
              show_time: false
         | 
| 18 | 
            +
            }) %>
         | 
| @@ -0,0 +1,44 @@ | |
| 1 | 
            +
            import React from 'react'
         | 
| 2 | 
            +
            import Timestamp from '../_timestamp'
         | 
| 3 | 
            +
             | 
| 4 | 
            +
            const todaysDate = new Date()
         | 
| 5 | 
            +
            const futureYear = new Date().getFullYear() + 4
         | 
| 6 | 
            +
            const pastYear = new Date().getFullYear() - 1
         | 
| 7 | 
            +
            const month = new Date().getMonth()
         | 
| 8 | 
            +
            const date = new Date().getDate()
         | 
| 9 | 
            +
            const hours = new Date().getHours()
         | 
| 10 | 
            +
            const minutes = new Date().getMinutes()
         | 
| 11 | 
            +
            const futureDate = new Date(futureYear, month, date, hours, minutes)
         | 
| 12 | 
            +
            const pastDate = new Date(pastYear, month, date, hours, minutes)
         | 
| 13 | 
            +
             | 
| 14 | 
            +
            const TimestampShowTime = (props) => {
         | 
| 15 | 
            +
              return (
         | 
| 16 | 
            +
                <div>
         | 
| 17 | 
            +
                  <Timestamp
         | 
| 18 | 
            +
                      align="left"
         | 
| 19 | 
            +
                      showTime={false}
         | 
| 20 | 
            +
                      timestamp={todaysDate}
         | 
| 21 | 
            +
                      {...props}
         | 
| 22 | 
            +
                  />
         | 
| 23 | 
            +
                  <br />
         | 
| 24 | 
            +
             | 
| 25 | 
            +
                  <Timestamp
         | 
| 26 | 
            +
                      align="left"
         | 
| 27 | 
            +
                      showTime={false}
         | 
| 28 | 
            +
                      timestamp={futureDate}
         | 
| 29 | 
            +
                      {...props}
         | 
| 30 | 
            +
                  />
         | 
| 31 | 
            +
             | 
| 32 | 
            +
                  <br />
         | 
| 33 | 
            +
             | 
| 34 | 
            +
                  <Timestamp
         | 
| 35 | 
            +
                      align="left"
         | 
| 36 | 
            +
                      showTime={false}
         | 
| 37 | 
            +
                      timestamp={pastDate}
         | 
| 38 | 
            +
                      {...props}
         | 
| 39 | 
            +
                  />
         | 
| 40 | 
            +
                </div>
         | 
| 41 | 
            +
              )
         | 
| 42 | 
            +
            }
         | 
| 43 | 
            +
             | 
| 44 | 
            +
            export default TimestampShowTime
         | 
| @@ -0,0 +1 @@ | |
| 1 | 
            +
            The `showTime`/`show_time` prop is set to true by default but can be set to false to hide the time.
         |