From 571c3233e44f93a2b999e09f59f0e72628fd7042 Mon Sep 17 00:00:00 2001 From: Maricris Nonato Date: Fri, 30 Oct 2020 02:41:00 +0800 Subject: [PATCH] Timestamp Kit Formatted Date Additions (#1150) * Update README.md * WIP: Timestamp kit update Issue #618 * Add show_date false example, alignment classes * WIP: Rails kit update * WIP: React component for pb_timestamp kit * Adding specs to rails component of kit * Adding more specs to timestamp kit * Adding elapsed variant * [NUX-638] - Date Kit Refactor/Design (#1108) * Patch for rake dist (#1147) * Patch for Removing Rake Tasks from Dist * Patch Commit Co-authored-by: Jasper Furniss * [CMPN-22] Allow all HTML options on input in PbSelectableIcon, PbSelectableCard and PbSelectableCardIcon Rails kits (#1113) * Add input options to selectable card * Add input options to selectable icon * Add input options to selectable card icon * Add more spec coverage * Switch name to input options * Fix spec tests * [NUXE-158] Section separator dark mode (WIP) (#1146) * Fixed dark mode * Updated spec doc * Fixed dark card variant Deleted unnecessary lines Deleted lines * Better error messages, and more test coverage (#1115) * Update README.md * Add coverage for added boilerplate props * Pass prop name to type creation & expose in error messages * Also specify name of kit * Simplify prop examples Co-authored-by: Stephen Marshall * Fixes Typeahead (Rails) setting wrong image attribute in examples (#1151) * Update README.md * Playbook Distribution Release (#834) * Update changelog * Fixing Flash By Separating Fade Out Keyframe from Default Class (#1135) Co-authored-by: Jasper Furniss * Changelog Generator 2.0 (#1136) * Changelog Generator 2.0 * Updated PR Template Co-authored-by: Jasper Furniss * Make updates to the inline date range kit (#1126) * Make updates to the inline date range kit for issue #613 * Pass the props so darkmode works * Make alignment changes * Fix breaking spec * Adjust time presentation * Fix spacing * use buildCss * Concat classname using the classnames function * Use spacing variable * updated table with examplesof how to use buttons (#1123) * Update Progress Step (#1128) * Update Progress Step * Add hidden status to step items * [NUXE-155] Date Picker Patch 3 (#1125) * fixed readonly rails validation bug, created default onChange lambda * improved validation fix * rails form label fix * fixed simple form attribute mismatch * fixed mising commas in model class def * replicated improved null value handling from patch-4 * removed dark doc examples * more unused doc example removal * cleaned helper js * alphas and timeout solution * cleaned up commented code, re-formatted dp helper js * removed test dp in filter kit, reworked boolean label logic * reverted alpha versioning * Typeahead with Pills (Rails) (#1104) * Update PULL_REQUEST_TEMPLATE.md * WIP: Typeahead w/ Pills (React) * WIP * Basic pub-sub working for add, remove and clear * Revert changes to index.js * Async options * Spec coverage * Add code example docs Co-authored-by: Jason Cypret * [NUXE-55] Updated styles to button toolbar kit (#1129) * Updated styles to button toolbar kit * Updated spec doc * Fixed dark bug for react Fixed dark bug for react * Sass optimization Use spacing variables Border disappear when hovered Sass optimization Sass optimization Deleted some lines * Fixed sass variables * Sass optimization & update doc examples & update spec doc * Fix jenkins error * Adds HTML input options to PB toggle kit (#1112) * Pin dependencies (#1138) Co-authored-by: Renovate Bot * Bump actionview from 5.2.4.3 to 5.2.4.4 (#1103) Bumps [actionview](https://github.com/rails/rails) from 5.2.4.3 to 5.2.4.4. - [Release notes](https://github.com/rails/rails/releases) - [Changelog](https://github.com/rails/rails/blob/v6.0.3.3/actionview/CHANGELOG.md) - [Commits](https://github.com/rails/rails/compare/v5.2.4.3...v5.2.4.4) Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * [NUXE-80] - Add 'close' option to kit, with examples (#1142) * Add 'close' option to kit, with examples * Update style * Update default state * Update func name * Update class and fixedWidth * Use proper classname approach * Add fixed width to rails version to match react * Update toast styling * Refactor onclick conditional Co-authored-by: Cole Erikson * Update dependency mini-css-extract-plugin to v0.12.0 (#1140) Co-authored-by: Renovate Bot * Update dependency copy-webpack-plugin to v6.2.0 (#1139) Co-authored-by: Renovate Bot * Fix typeahead example using wrong attribute Co-authored-by: Brendan Huffman Co-authored-by: Rafael Garcia Co-authored-by: Jasper Furniss Co-authored-by: Jasper Furniss Co-authored-by: Matthew Russell Dodds Co-authored-by: Eva Louderback <50629488+evalouderback@users.noreply.github.com> Co-authored-by: Jon Zazula Co-authored-by: Brendan Huffman <57693937+bh247484@users.noreply.github.com> Co-authored-by: Jason Cypret Co-authored-by: Christina Tai <42459486+christinaatai@users.noreply.github.com> Co-authored-by: Idan Zonshein <64423490+idanzonshein@users.noreply.github.com> Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: Renovate Bot Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Cole Erikson * white-space: nowrap added (#1153) * Nav Kit Update (#1152) * Update README.md * Playbook Distribution Release (#834) * Update changelog * Fixing Flash By Separating Fade Out Keyframe from Default Class (#1135) Co-authored-by: Jasper Furniss * Changelog Generator 2.0 (#1136) * Changelog Generator 2.0 * Updated PR Template Co-authored-by: Jasper Furniss * Make updates to the inline date range kit (#1126) * Make updates to the inline date range kit for issue #613 * Pass the props so darkmode works * Make alignment changes * Fix breaking spec * Adjust time presentation * Fix spacing * use buildCss * Concat classname using the classnames function * Use spacing variable * updated table with examplesof how to use buttons (#1123) * Update Progress Step (#1128) * Update Progress Step * Add hidden status to step items * [NUXE-155] Date Picker Patch 3 (#1125) * fixed readonly rails validation bug, created default onChange lambda * improved validation fix * rails form label fix * fixed simple form attribute mismatch * fixed mising commas in model class def * replicated improved null value handling from patch-4 * removed dark doc examples * more unused doc example removal * cleaned helper js * alphas and timeout solution * cleaned up commented code, re-formatted dp helper js * removed test dp in filter kit, reworked boolean label logic * reverted alpha versioning * Typeahead with Pills (Rails) (#1104) * Update PULL_REQUEST_TEMPLATE.md * WIP: Typeahead w/ Pills (React) * WIP * Basic pub-sub working for add, remove and clear * Revert changes to index.js * Async options * Spec coverage * Add code example docs Co-authored-by: Jason Cypret * [NUXE-55] Updated styles to button toolbar kit (#1129) * Updated styles to button toolbar kit * Updated spec doc * Fixed dark bug for react Fixed dark bug for react * Sass optimization Use spacing variables Border disappear when hovered Sass optimization Sass optimization Deleted some lines * Fixed sass variables * Sass optimization & update doc examples & update spec doc * Fix jenkins error * Adds HTML input options to PB toggle kit (#1112) * Pin dependencies (#1138) Co-authored-by: Renovate Bot * Bump actionview from 5.2.4.3 to 5.2.4.4 (#1103) Bumps [actionview](https://github.com/rails/rails) from 5.2.4.3 to 5.2.4.4. - [Release notes](https://github.com/rails/rails/releases) - [Changelog](https://github.com/rails/rails/blob/v6.0.3.3/actionview/CHANGELOG.md) - [Commits](https://github.com/rails/rails/compare/v5.2.4.3...v5.2.4.4) Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * [NUXE-80] - Add 'close' option to kit, with examples (#1142) * Add 'close' option to kit, with examples * Update style * Update default state * Update func name * Update class and fixedWidth * Use proper classname approach * Add fixed width to rails version to match react * Update toast styling * Refactor onclick conditional Co-authored-by: Cole Erikson * Update dependency mini-css-extract-plugin to v0.12.0 (#1140) Co-authored-by: Renovate Bot * Update dependency copy-webpack-plugin to v6.2.0 (#1139) Co-authored-by: Renovate Bot * Updated Changelog and Made Minor Adjustment to Changelog Rake * Updated padding & Borderless option created * Nav with image for icon added * _with_img_nav.md added * updated specs Co-authored-by: Stephen Marshall Co-authored-by: Brendan Huffman Co-authored-by: Rafael Garcia Co-authored-by: Jasper Furniss Co-authored-by: Jasper Furniss Co-authored-by: Matthew Russell Dodds Co-authored-by: Eva Louderback <50629488+evalouderback@users.noreply.github.com> Co-authored-by: Jon Zazula Co-authored-by: Brendan Huffman <57693937+bh247484@users.noreply.github.com> Co-authored-by: Jason Cypret Co-authored-by: Christina Tai <42459486+christinaatai@users.noreply.github.com> Co-authored-by: Idan Zonshein <64423490+idanzonshein@users.noreply.github.com> Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: Renovate Bot Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Cole Erikson * [NUX-639] - Caption Kits to support block / Time Kit style updates (#1100) * Revert "Playbook v7.1.0 (#1143)" (#1148) This reverts commit f1efe55b0dbc6401ffa4d8e061b5ee40bc1d9b6f. * Solar Patch (#1149) * Solar Patch * syntax Co-authored-by: Jasper Furniss * Cherry-picked and pushing Playbook v7.1.0 commit back into Master branch * Playbook Distribution Release (#834) * Update changelog * Changelog Generator 2.0 (#1136) * Changelog Generator 2.0 * Updated PR Template Co-authored-by: Jasper Furniss * Pin dependencies (#1138) Co-authored-by: Renovate Bot * Update caption to support block, update time kit structure/style * Remove extra additions. * removed CHANGELOG duplicate Co-authored-by: Jasper Furniss Co-authored-by: Jasper Furniss Co-authored-by: Rafael Garcia Co-authored-by: thestephenmarshall Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: Renovate Bot Co-authored-by: Brendan Huffman * Revised * Update design of Date Kit * update test, add deprecation in react * Revised * Update design of Date Kit * update test, add deprecation in react * Space Co-authored-by: Jasper Furniss Co-authored-by: Jasper Furniss Co-authored-by: Josephine Fischer <64423298+josephinef9@users.noreply.github.com> Co-authored-by: Christina Tai <42459486+christinaatai@users.noreply.github.com> Co-authored-by: Garett Arrowood Co-authored-by: Stephen Marshall Co-authored-by: Brendan Huffman Co-authored-by: Rafael Garcia Co-authored-by: Matthew Russell Dodds Co-authored-by: Eva Louderback <50629488+evalouderback@users.noreply.github.com> Co-authored-by: Jon Zazula Co-authored-by: Brendan Huffman <57693937+bh247484@users.noreply.github.com> Co-authored-by: Jason Cypret Co-authored-by: Idan Zonshein <64423490+idanzonshein@users.noreply.github.com> Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: Renovate Bot Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Megan Trimble <53874143+megantrimble@users.noreply.github.com> * Create Background kit (#1110) * Update README.md * Generate Background Kit * wip but image background seen * wip add white to react, start rails * Change backgroundcolor prop * Add more props * Add image background Need to fix text * Alphabetize menu names * Fix lint issues * Change color names * Change to backgroun prop and edit color Still working on image part * Fix conditional for ruby Classname and children work for color background, image still in progress * Correct the React kit to work with images more easily * Get image to work * Fix linting issues Add examples to react docs, alphabetize props * Finish docs * Edit spacing/ details * Add spec tests Also tweaked classname prop * Fix minor offenses * Delete import of background css since there was no css * Update app/pb_kits/playbook/pb_background/docs/_background_default.html.erb Co-authored-by: Garett Arrowood * Update app/pb_kits/playbook/pb_background/docs/_background_default.html.erb Co-authored-by: Garett Arrowood * Update app/pb_kits/playbook/pb_background/docs/_background_default.html.erb Co-authored-by: Garett Arrowood * Update app/pb_kits/playbook/pb_background/docs/_background_default.html.erb Co-authored-by: Garett Arrowood * Fix tag * Impliment Jasons suggestion on docs Add loader to image, change lorum ipsum to quote, change image to unsplash, and put shadowing on card and change color names * Fix spec * Add background-size & fix classnames * Single/Double Quote mistake * Fix spacing * Patch for rake dist (#1147) * Patch for Removing Rake Tasks from Dist * Patch Commit Co-authored-by: Jasper Furniss * added scss file, separated examples, and wrote documentation * fixed failing specs * got rid of extra files Co-authored-by: Stephen Marshall Co-authored-by: Kelly Ryan Co-authored-by: Garett Arrowood Co-authored-by: Jasper Furniss Co-authored-by: Jasper Furniss Co-authored-by: Eva Louderback Co-authored-by: Brendan Huffman Co-authored-by: Eva Louderback <50629488+evalouderback@users.noreply.github.com> * Add safe navigator to address home's without addresses (#1161) * Add solid example of Typeahead (default) Rails kit to Form kit (#1158) * Patch for rake dist (#1147) * Patch for Removing Rake Tasks from Dist * Patch Commit Co-authored-by: Jasper Furniss * [CMPN-22] Allow all HTML options on input in PbSelectableIcon, PbSelectableCard and PbSelectableCardIcon Rails kits (#1113) * Add input options to selectable card * Add input options to selectable icon * Add input options to selectable card icon * Add more spec coverage * Switch name to input options * Fix spec tests * [NUXE-158] Section separator dark mode (WIP) (#1146) * Fixed dark mode * Updated spec doc * Fixed dark card variant Deleted unnecessary lines Deleted lines * Better error messages, and more test coverage (#1115) * Update README.md * Add coverage for added boilerplate props * Pass prop name to type creation & expose in error messages * Also specify name of kit * Simplify prop examples Co-authored-by: Stephen Marshall * Fixes Typeahead (Rails) setting wrong image attribute in examples (#1151) * Update README.md * Playbook Distribution Release (#834) * Update changelog * Fixing Flash By Separating Fade Out Keyframe from Default Class (#1135) Co-authored-by: Jasper Furniss * Changelog Generator 2.0 (#1136) * Changelog Generator 2.0 * Updated PR Template Co-authored-by: Jasper Furniss * Make updates to the inline date range kit (#1126) * Make updates to the inline date range kit for issue #613 * Pass the props so darkmode works * Make alignment changes * Fix breaking spec * Adjust time presentation * Fix spacing * use buildCss * Concat classname using the classnames function * Use spacing variable * updated table with examplesof how to use buttons (#1123) * Update Progress Step (#1128) * Update Progress Step * Add hidden status to step items * [NUXE-155] Date Picker Patch 3 (#1125) * fixed readonly rails validation bug, created default onChange lambda * improved validation fix * rails form label fix * fixed simple form attribute mismatch * fixed mising commas in model class def * replicated improved null value handling from patch-4 * removed dark doc examples * more unused doc example removal * cleaned helper js * alphas and timeout solution * cleaned up commented code, re-formatted dp helper js * removed test dp in filter kit, reworked boolean label logic * reverted alpha versioning * Typeahead with Pills (Rails) (#1104) * Update PULL_REQUEST_TEMPLATE.md * WIP: Typeahead w/ Pills (React) * WIP * Basic pub-sub working for add, remove and clear * Revert changes to index.js * Async options * Spec coverage * Add code example docs Co-authored-by: Jason Cypret * [NUXE-55] Updated styles to button toolbar kit (#1129) * Updated styles to button toolbar kit * Updated spec doc * Fixed dark bug for react Fixed dark bug for react * Sass optimization Use spacing variables Border disappear when hovered Sass optimization Sass optimization Deleted some lines * Fixed sass variables * Sass optimization & update doc examples & update spec doc * Fix jenkins error * Adds HTML input options to PB toggle kit (#1112) * Pin dependencies (#1138) Co-authored-by: Renovate Bot * Bump actionview from 5.2.4.3 to 5.2.4.4 (#1103) Bumps [actionview](https://github.com/rails/rails) from 5.2.4.3 to 5.2.4.4. - [Release notes](https://github.com/rails/rails/releases) - [Changelog](https://github.com/rails/rails/blob/v6.0.3.3/actionview/CHANGELOG.md) - [Commits](https://github.com/rails/rails/compare/v5.2.4.3...v5.2.4.4) Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * [NUXE-80] - Add 'close' option to kit, with examples (#1142) * Add 'close' option to kit, with examples * Update style * Update default state * Update func name * Update class and fixedWidth * Use proper classname approach * Add fixed width to rails version to match react * Update toast styling * Refactor onclick conditional Co-authored-by: Cole Erikson * Update dependency mini-css-extract-plugin to v0.12.0 (#1140) Co-authored-by: Renovate Bot * Update dependency copy-webpack-plugin to v6.2.0 (#1139) Co-authored-by: Renovate Bot * Fix typeahead example using wrong attribute Co-authored-by: Brendan Huffman Co-authored-by: Rafael Garcia Co-authored-by: Jasper Furniss Co-authored-by: Jasper Furniss Co-authored-by: Matthew Russell Dodds Co-authored-by: Eva Louderback <50629488+evalouderback@users.noreply.github.com> Co-authored-by: Jon Zazula Co-authored-by: Brendan Huffman <57693937+bh247484@users.noreply.github.com> Co-authored-by: Jason Cypret Co-authored-by: Christina Tai <42459486+christinaatai@users.noreply.github.com> Co-authored-by: Idan Zonshein <64423490+idanzonshein@users.noreply.github.com> Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: Renovate Bot Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Cole Erikson * white-space: nowrap added (#1153) * Nav Kit Update (#1152) * Update README.md * Playbook Distribution Release (#834) * Update changelog * Fixing Flash By Separating Fade Out Keyframe from Default Class (#1135) Co-authored-by: Jasper Furniss * Changelog Generator 2.0 (#1136) * Changelog Generator 2.0 * Updated PR Template Co-authored-by: Jasper Furniss * Make updates to the inline date range kit (#1126) * Make updates to the inline date range kit for issue #613 * Pass the props so darkmode works * Make alignment changes * Fix breaking spec * Adjust time presentation * Fix spacing * use buildCss * Concat classname using the classnames function * Use spacing variable * updated table with examplesof how to use buttons (#1123) * Update Progress Step (#1128) * Update Progress Step * Add hidden status to step items * [NUXE-155] Date Picker Patch 3 (#1125) * fixed readonly rails validation bug, created default onChange lambda * improved validation fix * rails form label fix * fixed simple form attribute mismatch * fixed mising commas in model class def * replicated improved null value handling from patch-4 * removed dark doc examples * more unused doc example removal * cleaned helper js * alphas and timeout solution * cleaned up commented code, re-formatted dp helper js * removed test dp in filter kit, reworked boolean label logic * reverted alpha versioning * Typeahead with Pills (Rails) (#1104) * Update PULL_REQUEST_TEMPLATE.md * WIP: Typeahead w/ Pills (React) * WIP * Basic pub-sub working for add, remove and clear * Revert changes to index.js * Async options * Spec coverage * Add code example docs Co-authored-by: Jason Cypret * [NUXE-55] Updated styles to button toolbar kit (#1129) * Updated styles to button toolbar kit * Updated spec doc * Fixed dark bug for react Fixed dark bug for react * Sass optimization Use spacing variables Border disappear when hovered Sass optimization Sass optimization Deleted some lines * Fixed sass variables * Sass optimization & update doc examples & update spec doc * Fix jenkins error * Adds HTML input options to PB toggle kit (#1112) * Pin dependencies (#1138) Co-authored-by: Renovate Bot * Bump actionview from 5.2.4.3 to 5.2.4.4 (#1103) Bumps [actionview](https://github.com/rails/rails) from 5.2.4.3 to 5.2.4.4. - [Release notes](https://github.com/rails/rails/releases) - [Changelog](https://github.com/rails/rails/blob/v6.0.3.3/actionview/CHANGELOG.md) - [Commits](https://github.com/rails/rails/compare/v5.2.4.3...v5.2.4.4) Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * [NUXE-80] - Add 'close' option to kit, with examples (#1142) * Add 'close' option to kit, with examples * Update style * Update default state * Update func name * Update class and fixedWidth * Use proper classname approach * Add fixed width to rails version to match react * Update toast styling * Refactor onclick conditional Co-authored-by: Cole Erikson * Update dependency mini-css-extract-plugin to v0.12.0 (#1140) Co-authored-by: Renovate Bot * Update dependency copy-webpack-plugin to v6.2.0 (#1139) Co-authored-by: Renovate Bot * Updated Changelog and Made Minor Adjustment to Changelog Rake * Updated padding & Borderless option created * Nav with image for icon added * _with_img_nav.md added * updated specs Co-authored-by: Stephen Marshall Co-authored-by: Brendan Huffman Co-authored-by: Rafael Garcia Co-authored-by: Jasper Furniss Co-authored-by: Jasper Furniss Co-authored-by: Matthew Russell Dodds Co-authored-by: Eva Louderback <50629488+evalouderback@users.noreply.github.com> Co-authored-by: Jon Zazula Co-authored-by: Brendan Huffman <57693937+bh247484@users.noreply.github.com> Co-authored-by: Jason Cypret Co-authored-by: Christina Tai <42459486+christinaatai@users.noreply.github.com> Co-authored-by: Idan Zonshein <64423490+idanzonshein@users.noreply.github.com> Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: Renovate Bot Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Cole Erikson * [NUX-639] - Caption Kits to support block / Time Kit style updates (#1100) * Revert "Playbook v7.1.0 (#1143)" (#1148) This reverts commit f1efe55b0dbc6401ffa4d8e061b5ee40bc1d9b6f. * Solar Patch (#1149) * Solar Patch * syntax Co-authored-by: Jasper Furniss * Cherry-picked and pushing Playbook v7.1.0 commit back into Master branch * Playbook Distribution Release (#834) * Update changelog * Changelog Generator 2.0 (#1136) * Changelog Generator 2.0 * Updated PR Template Co-authored-by: Jasper Furniss * Pin dependencies (#1138) Co-authored-by: Renovate Bot * Update caption to support block, update time kit structure/style * Remove extra additions. * removed CHANGELOG duplicate Co-authored-by: Jasper Furniss Co-authored-by: Jasper Furniss Co-authored-by: Rafael Garcia Co-authored-by: thestephenmarshall Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: Renovate Bot Co-authored-by: Brendan Huffman * Solar Patch fixes * Downgrade react-select lib (#1155) * Highcharts React null value bug fix (#1154) * if check for undefined * optimized conditional * Upgrades library dependencies (#1145) * Add solid example of Typeahead (default) Rails kit to Form kit Co-authored-by: Jasper Furniss Co-authored-by: Jasper Furniss Co-authored-by: Josephine Fischer <64423298+josephinef9@users.noreply.github.com> Co-authored-by: Christina Tai <42459486+christinaatai@users.noreply.github.com> Co-authored-by: Garett Arrowood Co-authored-by: Brendan Huffman Co-authored-by: Rafael Garcia Co-authored-by: Matthew Russell Dodds Co-authored-by: Eva Louderback <50629488+evalouderback@users.noreply.github.com> Co-authored-by: Jon Zazula Co-authored-by: Brendan Huffman <57693937+bh247484@users.noreply.github.com> Co-authored-by: Jason Cypret Co-authored-by: Idan Zonshein <64423490+idanzonshein@users.noreply.github.com> Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: Renovate Bot Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Cole Erikson Co-authored-by: Megan Trimble <53874143+megantrimble@users.noreply.github.com> Co-authored-by: Cole Erikson Co-authored-by: Andrew Kloecker * Restore text prop, replaces name in show_user variant * Fix: prefer to_s over string interpolation * Fixing sorting of props * fixed dark mode Co-authored-by: Stephen Marshall Co-authored-by: Cole Erikson Co-authored-by: Jasper Furniss Co-authored-by: Jasper Furniss Co-authored-by: Josephine Fischer <64423298+josephinef9@users.noreply.github.com> Co-authored-by: Christina Tai <42459486+christinaatai@users.noreply.github.com> Co-authored-by: Garett Arrowood Co-authored-by: Brendan Huffman Co-authored-by: Rafael Garcia Co-authored-by: Matthew Russell Dodds Co-authored-by: Eva Louderback <50629488+evalouderback@users.noreply.github.com> Co-authored-by: Jon Zazula Co-authored-by: Brendan Huffman <57693937+bh247484@users.noreply.github.com> Co-authored-by: Jason Cypret Co-authored-by: Idan Zonshein <64423490+idanzonshein@users.noreply.github.com> Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: Renovate Bot Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Megan Trimble <53874143+megantrimble@users.noreply.github.com> Co-authored-by: Madison McCardle <64422843+maddiemc01@users.noreply.github.com> Co-authored-by: Kelly Ryan Co-authored-by: Eva Louderback Co-authored-by: Katie Weber <38359249+web-kat@users.noreply.github.com> Co-authored-by: Cole Erikson Co-authored-by: Andrew Kloecker --- .../playbook/pb_timestamp/_timestamp.html.erb | 14 +- .../playbook/pb_timestamp/_timestamp.jsx | 116 ++++++++-- .../playbook/pb_timestamp/_timestamp.scss | 13 +- .../docs/_timestamp_align.html.erb | 69 ++++++ .../pb_timestamp/docs/_timestamp_align.jsx | 91 ++++++++ .../docs/_timestamp_default.html.erb | 22 +- .../pb_timestamp/docs/_timestamp_default.jsx | 35 ++- .../docs/_timestamp_elapsed.html.erb | 14 ++ .../pb_timestamp/docs/_timestamp_elapsed.jsx | 27 +++ .../docs/_timestamp_elapsed_align.html.erb | 54 +++++ .../docs/_timestamp_elapsed_align.jsx | 73 ++++++ .../docs/_timestamp_timezones.html.erb | 59 +++++ .../docs/_timestamp_timezones.jsx | 74 +++++++ .../docs/_timestamp_timezones_align.html.erb | 177 +++++++++++++++ .../docs/_timestamp_timezones_align.jsx | 209 ++++++++++++++++++ .../docs/_timestamp_updated.html.erb | 35 +++ .../pb_timestamp/docs/_timestamp_updated.jsx | 51 +++++ .../docs/_timestamp_updated_align.html.erb | 123 +++++++++++ .../docs/_timestamp_updated_align.jsx | 146 ++++++++++++ .../playbook/pb_timestamp/docs/example.yml | 14 ++ .../playbook/pb_timestamp/docs/index.js | 7 + .../playbook/pb_timestamp/timestamp.rb | 68 +++++- spec/pb_kits/playbook/kits/timestamp_spec.rb | 152 ++++++++++++- yarn.lock | 36 +-- 24 files changed, 1614 insertions(+), 65 deletions(-) create mode 100644 app/pb_kits/playbook/pb_timestamp/docs/_timestamp_align.html.erb create mode 100644 app/pb_kits/playbook/pb_timestamp/docs/_timestamp_align.jsx create mode 100644 app/pb_kits/playbook/pb_timestamp/docs/_timestamp_elapsed.html.erb create mode 100644 app/pb_kits/playbook/pb_timestamp/docs/_timestamp_elapsed.jsx create mode 100644 app/pb_kits/playbook/pb_timestamp/docs/_timestamp_elapsed_align.html.erb create mode 100644 app/pb_kits/playbook/pb_timestamp/docs/_timestamp_elapsed_align.jsx create mode 100644 app/pb_kits/playbook/pb_timestamp/docs/_timestamp_timezones.html.erb create mode 100644 app/pb_kits/playbook/pb_timestamp/docs/_timestamp_timezones.jsx create mode 100644 app/pb_kits/playbook/pb_timestamp/docs/_timestamp_timezones_align.html.erb create mode 100644 app/pb_kits/playbook/pb_timestamp/docs/_timestamp_timezones_align.jsx create mode 100644 app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated.html.erb create mode 100644 app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated.jsx create mode 100644 app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated_align.html.erb create mode 100644 app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated_align.jsx diff --git a/app/pb_kits/playbook/pb_timestamp/_timestamp.html.erb b/app/pb_kits/playbook/pb_timestamp/_timestamp.html.erb index fbb78baa4f..223edeb75c 100644 --- a/app/pb_kits/playbook/pb_timestamp/_timestamp.html.erb +++ b/app/pb_kits/playbook/pb_timestamp/_timestamp.html.erb @@ -2,5 +2,17 @@ id: object.id, data: object.data, class: object.classname) do %> - <%= pb_rails("caption", props: { text: object.text, tag: 'span', size: 'xs' }) %> + + <% case object.variant + when "updated" %> + <%= pb_rails("caption", props: { text: object.format_updated_string, size: 'xs', dark: object.dark }) %> + <% when "elapsed" %> + <%= pb_rails("caption", props: { text: object.format_updated_string, size: 'xs', dark: object.dark }) %> + <% else %> + <% if object.show_date %> + <%= pb_rails("caption", props: { text: object.format_datetime_string, size: 'xs', dark: object.dark }) %> + <% else %> + <%= pb_rails("caption", props: { text: object.format_time_string, size: 'xs', dark: object.dark }) %> + <% end %> + <% end %> <% end %> diff --git a/app/pb_kits/playbook/pb_timestamp/_timestamp.jsx b/app/pb_kits/playbook/pb_timestamp/_timestamp.jsx index 2d25f79920..e7bd55af65 100644 --- a/app/pb_kits/playbook/pb_timestamp/_timestamp.jsx +++ b/app/pb_kits/playbook/pb_timestamp/_timestamp.jsx @@ -2,36 +2,112 @@ import React from 'react' import classnames from 'classnames' - +import DateTime from '../pb_kit/dateTime.js' +import { buildCss } from '../utilities/props' import { Caption } from '../' - -import { buildCss, buildDataProps } from '../utilities/props' - import { globalProps } from '../utilities/globalProps.js' type TimestampProps = { + align?: "left" | "center" | "right", + className?: string | array, + dark?: boolean, + data?: string, + text: string, + timestamp: string, + timezone: string, id?: string, - data?: object, - className?: string, - text?: string, + showDate?: boolean, + showUser?: boolean, + showTimezone?: boolean, + variant?: "default" | "elapsed" | "updated" } const Timestamp = (props: TimestampProps) => { - const { id, className, data = {}, text } = props - const dataProps = buildDataProps(data) - const pbCss = buildCss('pb_timestamp_kit') + const { + align = 'left', + className, + dark = false, + text, + timestamp, + timezone, + showDate = true, + showUser = false, + showTimezone = false, + variant = 'default', + } = props + const classes = classnames( + buildCss('pb_timestamp_kit', align, { + dark: dark, + variant: variant, + }), + globalProps(props), + className + ) + + const currentYear = new Date().getFullYear().toString() + const dateTimestamp = new DateTime({ value: timestamp, zone: timezone }) + const dateDisplay = dateTimestamp.toMonth() + ' ' + dateTimestamp.toDay() + const timeDisplay = dateTimestamp.toHour() + ':' + dateTimestamp.toMinute() + dateTimestamp.toMeridian() + + var fullTimeDisplay = function fullTimeDisplay(dateTimestamp, timeDisplay, timezone, showTimezone) { + if (showTimezone == 'true' && timezone.length > 0) { + timeDisplay = timeDisplay + ' ' + dateTimestamp.toTimezone() + } + return timeDisplay + } + + var fullDateDisplay = function fullDateDisplay(dateTimestamp, currentYear, dateDisplay, timezone, showTimezone) { + var fullDisplay = dateTimestamp.toMonth() + ' ' + dateTimestamp.toDay() + if (dateTimestamp.toYear() > currentYear) { + fullDisplay = fullDisplay + ', ' + dateTimestamp.toYear().toString() + } + return fullDisplay + ' \u00b7 ' + fullTimeDisplay(dateTimestamp, timeDisplay, timezone, showTimezone) + } + + var fullElapsedDisplay = function fullElapsedDisplay(showUser, text, dateTimestamp){ + var userDisplay = (showUser == 'true' && text.length > 0) ? ' by ' + text : '' + return 'Last updated' + userDisplay + ' ' + dateTimestamp.value.fromNow() + } + + var fullUpdatedDisplay = function fullUpdatedDisplay(showUser, text, timeDisplay, timezone, showTimezone){ + var userDisplay = (showUser == 'true' && text.length > 0) ? ' by ' + text : '' + return 'Last updated' + userDisplay + ' at ' + fullTimeDisplay(dateTimestamp, timeDisplay, timezone, showTimezone) + } return ( -
- +
+
+ + + + + + + + + + + + + + +
) } diff --git a/app/pb_kits/playbook/pb_timestamp/_timestamp.scss b/app/pb_kits/playbook/pb_timestamp/_timestamp.scss index f62ba9a75f..67e5522ee3 100644 --- a/app/pb_kits/playbook/pb_timestamp/_timestamp.scss +++ b/app/pb_kits/playbook/pb_timestamp/_timestamp.scss @@ -1,5 +1,16 @@ @import "timestamp-mixins"; +@import "../tokens/colors"; -[class^=pb_timestamp_kit] { +[class^=pb_timestamp_kit]{ @include pb_timestamp; + + &[class*=_center] { + text-align: center; + } + &[class*=_right] { + text-align: right; + } + &[class*=_dark] { + color: $text_dk_default; + } } diff --git a/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_align.html.erb b/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_align.html.erb new file mode 100644 index 0000000000..52dc03a5ce --- /dev/null +++ b/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_align.html.erb @@ -0,0 +1,69 @@ +<%= pb_rails("timestamp", props: { + timestamp: DateTime.now, + show_date: false, + align: "left" +}) %> + +
+ +<%= pb_rails("timestamp", props: { + timestamp: DateTime.now, + show_date: true, + align: "left" +}) %> + +
+ +<%= pb_rails("timestamp", props: { + timestamp: DateTime.now + 4.years, + show_date: true, + align: "left" +}) %> + +

+ +<%= pb_rails("timestamp", props: { + timestamp: DateTime.now, + show_date: false, + align: "center" +}) %> + +
+ +<%= pb_rails("timestamp", props: { + timestamp: DateTime.now, + show_date: true, + align: "center" +}) %> + +
+ +<%= pb_rails("timestamp", props: { + timestamp: DateTime.now + 4.years, + show_date: true, + align: "center" +}) %> + +

+ +<%= pb_rails("timestamp", props: { + timestamp: DateTime.now, + show_date: false, + align: "right" +}) %> + +
+ +<%= pb_rails("timestamp", props: { + timestamp: DateTime.now, + show_date: true, + align: "right" +}) %> + +
+ +<%= pb_rails("timestamp", props: { + timestamp: DateTime.now + 4.years, + show_date: true, + align: "right" +}) %> diff --git a/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_align.jsx b/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_align.jsx new file mode 100644 index 0000000000..1e236c400a --- /dev/null +++ b/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_align.jsx @@ -0,0 +1,91 @@ +import React from 'react' +import Timestamp from '../_timestamp.jsx' + +const TimestampAlign = (props) => { + return ( +
+ + +
+ + + +
+ + + +
+
+ + + +
+ + + +
+ + + +
+
+ + + +
+ + + +
+ + +
+ ) +} + +export default TimestampAlign diff --git a/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_default.html.erb b/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_default.html.erb index 01e8ea7952..1344b4629f 100644 --- a/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_default.html.erb +++ b/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_default.html.erb @@ -1 +1,21 @@ -<%= pb_rails("timestamp", props: { text: "20 seconds ago" }) %> +<%= pb_rails("timestamp", props: { + timestamp: DateTime.now, + show_date: false, + align: "left" +}) %> + +
+ +<%= pb_rails("timestamp", props: { + timestamp: DateTime.now, + show_date: true, + align: "left" +}) %> + +
+ +<%= pb_rails("timestamp", props: { + timestamp: DateTime.now + 4.years, + show_date: true, + align: "left" +}) %> diff --git a/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_default.jsx b/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_default.jsx index 5be89b837e..d8bd6f9461 100644 --- a/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_default.jsx +++ b/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_default.jsx @@ -1,8 +1,35 @@ import React from 'react' -import { Timestamp } from '../../' +import Timestamp from '../_timestamp.jsx' -const TimestampDefault = () => ( - -) +const TimestampDefault = (props) => { + return ( +
+ + +
+ + + +
+ + +
+ ) +} export default TimestampDefault diff --git a/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_elapsed.html.erb b/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_elapsed.html.erb new file mode 100644 index 0000000000..898d4c6862 --- /dev/null +++ b/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_elapsed.html.erb @@ -0,0 +1,14 @@ +<%= pb_rails("timestamp", props: { + timestamp: DateTime.now, + variant: "elapsed", + show_user: true, + text: "Maricris Nonato" +}) %> + +
+ +<%= pb_rails("timestamp", props: { + timestamp: DateTime.now, + variant: "elapsed", + show_user: false +}) %> diff --git a/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_elapsed.jsx b/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_elapsed.jsx new file mode 100644 index 0000000000..bf48fdcaa4 --- /dev/null +++ b/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_elapsed.jsx @@ -0,0 +1,27 @@ +import React from 'react' +import Timestamp from '../_timestamp.jsx' + +const TimestampElapsed = (props) => { + return ( +
+ + +
+ + +
+ ) +} + +export default TimestampElapsed diff --git a/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_elapsed_align.html.erb b/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_elapsed_align.html.erb new file mode 100644 index 0000000000..464e7307fa --- /dev/null +++ b/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_elapsed_align.html.erb @@ -0,0 +1,54 @@ +<%= pb_rails("timestamp", props: { + timestamp: DateTime.now, + variant: "elapsed", + show_user: true, + text: "Maricris Nonato", + align: "left" +}) %> + +
+ +<%= pb_rails("timestamp", props: { + timestamp: DateTime.now, + variant: "elapsed", + show_user: false, + align: "left" +}) %> + +

+ +<%= pb_rails("timestamp", props: { + timestamp: DateTime.now, + variant: "elapsed", + show_user: true, + text: "Maricris Nonato", + align: "center" +}) %> + +
+ +<%= pb_rails("timestamp", props: { + timestamp: DateTime.now, + variant: "elapsed", + show_user: false, + align: "center" +}) %> + +

+ +<%= pb_rails("timestamp", props: { + timestamp: DateTime.now, + variant: "elapsed", + show_user: true, + text: "Maricris Nonato", + align: "right" +}) %> + +
+ +<%= pb_rails("timestamp", props: { + timestamp: DateTime.now, + variant: "elapsed", + show_user: false, + align: "right" +}) %> diff --git a/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_elapsed_align.jsx b/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_elapsed_align.jsx new file mode 100644 index 0000000000..8ad27e89b3 --- /dev/null +++ b/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_elapsed_align.jsx @@ -0,0 +1,73 @@ +import React from 'react' +import Timestamp from '../_timestamp.jsx' + +const TimestampUpdatedAlign = (props) => { + return ( +
+ + +
+ + + +
+
+ + + +
+ + + +
+
+ + + +
+ + +
+ ) +} + +export default TimestampUpdatedAlign diff --git a/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_timezones.html.erb b/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_timezones.html.erb new file mode 100644 index 0000000000..47994208ed --- /dev/null +++ b/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_timezones.html.erb @@ -0,0 +1,59 @@ +<%= pb_rails("timestamp", props: { + timestamp: DateTime.now, + show_date: false, + show_timezone: true, + timezone: "America/New_York", + align: "left" +}) %> + +
+ +<%= pb_rails("timestamp", props: { + timestamp: DateTime.now, + show_date: true, + show_timezone: true, + timezone: "America/New_York", + align: "left" +}) %> + +
+ +<%= pb_rails("timestamp", props: { + timestamp: DateTime.now + 4.years, + show_date: true, + show_timezone: true, + timezone: "America/New_York", + align: "left" +}) %> + +
+ +<%= pb_rails("timestamp", props: { + timestamp: DateTime.now, + show_date: false, + show_timezone: true, + timezone: "Asia/Hong_Kong", + align: "left" +}) %> + +
+ +<%= pb_rails("timestamp", props: { + timestamp: DateTime.now, + show_date: true, + show_timezone: true, + timezone: "Asia/Hong_Kong", + align: "left" +}) %> + +
+ +<%= pb_rails("timestamp", props: { + timestamp: DateTime.now + 4.years, + show_date: true, + show_timezone: true, + timezone: "Asia/Hong_Kong", + align: "left" +}) %> + +
diff --git a/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_timezones.jsx b/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_timezones.jsx new file mode 100644 index 0000000000..e000930f6d --- /dev/null +++ b/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_timezones.jsx @@ -0,0 +1,74 @@ +import React from 'react' +import Timestamp from '../_timestamp.jsx' + +const TimestampTimezones = (props) => { + return ( +
+ + +
+ + + +
+ + + +
+ + + +
+ + + +
+ + +
+ ) +} + +export default TimestampTimezones diff --git a/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_timezones_align.html.erb b/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_timezones_align.html.erb new file mode 100644 index 0000000000..c2518b9f96 --- /dev/null +++ b/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_timezones_align.html.erb @@ -0,0 +1,177 @@ +<%= pb_rails("timestamp", props: { + timestamp: DateTime.now, + show_date: false, + show_timezone: true, + timezone: "America/New_York", + align: "left" +}) %> + +
+ +<%= pb_rails("timestamp", props: { + timestamp: DateTime.now, + show_date: true, + show_timezone: true, + timezone: "America/New_York", + align: "left" +}) %> + +
+ +<%= pb_rails("timestamp", props: { + timestamp: DateTime.now + 4.years, + show_date: true, + show_timezone: true, + timezone: "America/New_York", + align: "left" +}) %> + +
+ +<%= pb_rails("timestamp", props: { + timestamp: DateTime.now, + show_date: false, + show_timezone: true, + timezone: "Asia/Hong_Kong", + align: "left" +}) %> + +
+ +<%= pb_rails("timestamp", props: { + timestamp: DateTime.now, + show_date: true, + show_timezone: true, + timezone: "Asia/Hong_Kong", + align: "left" +}) %> + +
+ +<%= pb_rails("timestamp", props: { + timestamp: DateTime.now + 4.years, + show_date: true, + show_timezone: true, + timezone: "Asia/Hong_Kong", + align: "left" +}) %> + +

+ +<%= pb_rails("timestamp", props: { + timestamp: DateTime.now, + show_date: false, + show_timezone: true, + timezone: "America/New_York", + align: "center" +}) %> + +
+ +<%= pb_rails("timestamp", props: { + timestamp: DateTime.now, + show_date: true, + show_timezone: true, + timezone: "America/New_York", + align: "center" +}) %> + +
+ +<%= pb_rails("timestamp", props: { + timestamp: DateTime.now + 4.years, + show_date: true, + show_timezone: true, + timezone: "America/New_York", + align: "center" +}) %> + +
+ +<%= pb_rails("timestamp", props: { + timestamp: DateTime.now, + show_date: false, + show_timezone: true, + timezone: "Asia/Hong_Kong", + align: "center" +}) %> + +
+ +<%= pb_rails("timestamp", props: { + timestamp: DateTime.now, + show_date: true, + show_timezone: true, + timezone: "Asia/Hong_Kong", + align: "center" +}) %> + +
+ +<%= pb_rails("timestamp", props: { + timestamp: DateTime.now + 4.years, + show_date: true, + show_timezone: true, + timezone: "Asia/Hong_Kong", + align: "center" +}) %> + +

+ +<%= pb_rails("timestamp", props: { + timestamp: DateTime.now, + show_date: false, + show_timezone: true, + timezone: "America/New_York", + align: "right" +}) %> + +
+ +<%= pb_rails("timestamp", props: { + timestamp: DateTime.now, + show_date: true, + show_timezone: true, + timezone: "America/New_York", + align: "right" +}) %> + +
+ +<%= pb_rails("timestamp", props: { + timestamp: DateTime.now + 4.years, + show_date: true, + show_timezone: true, + timezone: "America/New_York", + align: "right" +}) %> + +
+ +<%= pb_rails("timestamp", props: { + timestamp: DateTime.now, + show_date: false, + show_timezone: true, + timezone: "Asia/Hong_Kong", + align: "right" +}) %> + +
+ +<%= pb_rails("timestamp", props: { + timestamp: DateTime.now, + show_date: true, + show_timezone: true, + timezone: "Asia/Hong_Kong", + align: "right" +}) %> + +
+ +<%= pb_rails("timestamp", props: { + timestamp: DateTime.now + 4.years, + show_date: true, + show_timezone: true, + timezone: "Asia/Hong_Kong", + align: "right" +}) %> diff --git a/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_timezones_align.jsx b/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_timezones_align.jsx new file mode 100644 index 0000000000..c3f109772d --- /dev/null +++ b/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_timezones_align.jsx @@ -0,0 +1,209 @@ +import React from 'react' +import Timestamp from '../_timestamp.jsx' + +const TimestampTimezonesAlign = (props) => { + return ( +
+ + +
+ + + +
+ + + +
+ + + +
+ + + +
+ + + +
+
+ + + +
+ + + +
+ + + +
+ + + +
+ + + +
+ + + +
+
+ + + +
+ + + +
+ + + +
+ + + +
+ + + +
+ + + +
+ ) +} + +export default TimestampTimezonesAlign diff --git a/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated.html.erb b/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated.html.erb new file mode 100644 index 0000000000..e23fa73867 --- /dev/null +++ b/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated.html.erb @@ -0,0 +1,35 @@ +<%= pb_rails("timestamp", props: { + timestamp: DateTime.now, + variant: "updated", + show_user: true, + text: "Maricris Nonato" +}) %> + +
+ +<%= pb_rails("timestamp", props: { + timestamp: DateTime.now, + variant: "updated", + show_user: false +}) %> + +

+ +<%= pb_rails("timestamp", props: { + timestamp: DateTime.now, + variant: "updated", + show_user: true, + show_timezone: true, + text: "Maricris Nonato", + timezone: "America/New_York" +}) %> + +
+ +<%= pb_rails("timestamp", props: { + timestamp: DateTime.now, + variant: "updated", + show_user: false, + show_timezone: true, + timezone: "America/New_York" +}) %> diff --git a/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated.jsx b/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated.jsx new file mode 100644 index 0000000000..888ffe97e8 --- /dev/null +++ b/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated.jsx @@ -0,0 +1,51 @@ +import React from 'react' +import Timestamp from '../_timestamp.jsx' + +const TimestampUpdated = (props) => { + return ( +
+ + +
+ + + +
+
+ + + +
+ + +
+ ) +} + +export default TimestampUpdated diff --git a/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated_align.html.erb b/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated_align.html.erb new file mode 100644 index 0000000000..1713a177f6 --- /dev/null +++ b/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated_align.html.erb @@ -0,0 +1,123 @@ +<%= pb_rails("timestamp", props: { + timestamp: DateTime.now, + variant: "updated", + align: "left", + show_user: true, + text: "Maricris Nonato" +}) %> + +
+ +<%= pb_rails("timestamp", props: { + timestamp: DateTime.now, + variant: "updated", + align: "left", + show_user: false +}) %> + +
+ +<%= pb_rails("timestamp", props: { + timestamp: DateTime.now, + variant: "updated", + align: "left", + show_user: true, + show_timezone: true, + text: "Maricris Nonato", + timezone: "America/New_York" +}) %> + +
+ +<%= pb_rails("timestamp", props: { + timestamp: DateTime.now, + variant: "updated", + align: "left", + show_user: false, + show_timezone: true, + timezone: "America/New_York" +}) %> + +

+ +<%= pb_rails("timestamp", props: { + timestamp: DateTime.now, + variant: "updated", + align: "center", + show_user: true, + text: "Maricris Nonato" +}) %> + +
+ +<%= pb_rails("timestamp", props: { + timestamp: DateTime.now, + variant: "updated", + align: "center", + show_user: false +}) %> + +
+ +<%= pb_rails("timestamp", props: { + timestamp: DateTime.now, + variant: "updated", + align: "center", + show_user: true, + show_timezone: true, + text: "Maricris Nonato", + timezone: "America/New_York" +}) %> + +
+ +<%= pb_rails("timestamp", props: { + timestamp: DateTime.now, + variant: "updated", + align: "center", + show_user: false, + show_timezone: true, + timezone: "America/New_York" +}) %> + +

+ +<%= pb_rails("timestamp", props: { + timestamp: DateTime.now, + variant: "updated", + align: "right", + show_user: true, + text: "Maricris Nonato" +}) %> + +
+ +<%= pb_rails("timestamp", props: { + timestamp: DateTime.now, + variant: "updated", + align: "right", + show_user: false +}) %> + +
+ +<%= pb_rails("timestamp", props: { + timestamp: DateTime.now, + variant: "updated", + align: "right", + show_user: true, + show_timezone: true, + text: "Maricris Nonato", + timezone: "America/New_York" +}) %> + +
+ +<%= pb_rails("timestamp", props: { + timestamp: DateTime.now, + variant: "updated", + align: "right", + show_user: false, + show_timezone: true, + timezone: "America/New_York" +}) %> diff --git a/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated_align.jsx b/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated_align.jsx new file mode 100644 index 0000000000..391c90d8c6 --- /dev/null +++ b/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated_align.jsx @@ -0,0 +1,146 @@ +import React from 'react' +import Timestamp from '../_timestamp.jsx' + +const TimestampUpdatedAlign = (props) => { + return ( +
+ + +
+ + + +
+ + + +
+ + + +
+
+ + + +
+ + + +
+ + + +
+ + + +
+
+ + + +
+ + + +
+ + + +
+ + +
+ ) +} + +export default TimestampUpdatedAlign diff --git a/app/pb_kits/playbook/pb_timestamp/docs/example.yml b/app/pb_kits/playbook/pb_timestamp/docs/example.yml index 4f1aea4e8a..424638d8ea 100644 --- a/app/pb_kits/playbook/pb_timestamp/docs/example.yml +++ b/app/pb_kits/playbook/pb_timestamp/docs/example.yml @@ -2,6 +2,20 @@ examples: rails: - timestamp_default: Default + - timestamp_align: Alignments + - timestamp_timezones: Timezones + - timestamp_timezones_align: Timezones - Alignments + - timestamp_updated: Last Updated by + - timestamp_updated_align: Last Updated by - Alignments + - timestamp_elapsed: Time Ago + - timestamp_elapsed_align: Time Ago - Alignments react: - timestamp_default: Default + - timestamp_align: Alignments + - timestamp_timezones: Timezones + - timestamp_timezones_align: Timezones - Alignments + - timestamp_updated: Last Updated by + - timestamp_updated_align: Last Updated by - Alignments + - timestamp_elapsed: Time Ago + - timestamp_elapsed_align: Time Ago - Alignments diff --git a/app/pb_kits/playbook/pb_timestamp/docs/index.js b/app/pb_kits/playbook/pb_timestamp/docs/index.js index ffefbad614..94e7153fab 100644 --- a/app/pb_kits/playbook/pb_timestamp/docs/index.js +++ b/app/pb_kits/playbook/pb_timestamp/docs/index.js @@ -1 +1,8 @@ export { default as TimestampDefault } from './_timestamp_default.jsx' +export { default as TimestampAlign } from './_timestamp_align.jsx' +export { default as TimestampTimezones } from './_timestamp_timezones.jsx' +export { default as TimestampTimezonesAlign } from './_timestamp_timezones_align.jsx' +export { default as TimestampUpdated } from './_timestamp_updated.jsx' +export { default as TimestampUpdatedAlign } from './_timestamp_updated_align.jsx' +export { default as TimestampElapsed } from './_timestamp_elapsed.jsx' +export { default as TimestampElapsedAlign } from './_timestamp_elapsed_align.jsx' diff --git a/app/pb_kits/playbook/pb_timestamp/timestamp.rb b/app/pb_kits/playbook/pb_timestamp/timestamp.rb index f2cf186181..32e2c20a1c 100644 --- a/app/pb_kits/playbook/pb_timestamp/timestamp.rb +++ b/app/pb_kits/playbook/pb_timestamp/timestamp.rb @@ -3,14 +3,80 @@ module Playbook module PbTimestamp class Timestamp + include ActionView::Helpers::DateHelper include Playbook::Props partial "pb_timestamp/timestamp" prop :text + prop :timestamp, required: true + + prop :dark, type: Playbook::Props::Boolean, + default: false + prop :align, type: Playbook::Props::Enum, + values: %w[left center right], + default: "left" + prop :show_date, type: Playbook::Props::Boolean, + default: true + prop :show_timezone, type: Playbook::Props::Boolean, + default: false + prop :show_user, type: Playbook::Props::Boolean, + default: false + prop :timezone, default: "America/New_York" + prop :variant, type: Playbook::Props::Enum, + values: %w[default elapsed updated], + default: "default" def classname - generate_classname("pb_timestamp_kit") + generate_classname("pb_timestamp_kit", variant_class, align) + end + + def format_year_string + pb_date_time.to_year != DateTime.now.year.to_s ? ", #{pb_date_time.to_year}" : "" + end + + def format_time_string + "#{pb_date_time.to_hour}:#{pb_date_time.to_minutes}#{pb_date_time.to_meridian} #{format_timezone_string}".strip + end + + def format_timezone_string + timezone && show_timezone ? pb_date_time.to_timezone.to_s : "" + end + + def format_date_string + "#{pb_date_time.to_month_downcase} #{pb_date_time.to_unpadded_day}#{format_year_string}" + end + + def format_datetime_string + "#{format_date_string} · #{format_time_string}".html_safe + end + + def format_updated_string + user_string = show_user ? " by #{text}" : "" + + case variant + when "updated" + datetime_string = " on #{format_date_string} at #{format_time_string}" + when "elapsed" + datetime_string = " #{time_ago_in_words(pb_date_time.convert_to_timestamp)} ago" + end + + "Last updated#{user_string}#{datetime_string}" + end + + private + + def pb_date_time + Playbook::PbKit::PbDateTime.new(timestamp, timezone) + end + + def variant_class + case variant + when "updated" + "updated" + when "elapsed" + "elapsed" + end end end end diff --git a/spec/pb_kits/playbook/kits/timestamp_spec.rb b/spec/pb_kits/playbook/kits/timestamp_spec.rb index ace3fac71b..33919dc36d 100644 --- a/spec/pb_kits/playbook/kits/timestamp_spec.rb +++ b/spec/pb_kits/playbook/kits/timestamp_spec.rb @@ -1,18 +1,164 @@ # frozen_string_literal: true require_relative "../../../../app/pb_kits/playbook/pb_timestamp/timestamp" +include ActionView::Helpers::DateHelper RSpec.describe Playbook::PbTimestamp::Timestamp do subject { Playbook::PbTimestamp::Timestamp } + let(:timestamp) { DateTime.new(2020, 10, 10, 20, 30, 00).in_time_zone("America/New_York").freeze } + let(:future_timestamp) { DateTime.new(2024, 10, 10, 20, 30, 00).in_time_zone("America/New_York").freeze } it { is_expected.to define_partial } - it { is_expected.to define_prop(:text) } + it { is_expected.to define_enum_prop(:align) + .with_values("left", "center", "right") } + it { is_expected.to define_prop(:dark) + .of_type(Playbook::Props::Boolean) } + it { is_expected.to define_prop(:show_date) + .of_type(Playbook::Props::Boolean) } + it { is_expected.to define_prop(:show_timezone) + .of_type(Playbook::Props::Boolean) } + it { is_expected.to define_prop(:show_user) + .of_type(Playbook::Props::Boolean) } + it { is_expected.to define_string_prop(:text) } + it { is_expected.to define_string_prop(:timezone) } + it { is_expected.to define_prop(:timestamp) + .that_is_required } + it { is_expected.to define_enum_prop(:variant) + .with_values("default", "elapsed", "updated") } describe "#classname" do it "returns namespaced class name", :aggregate_failures do - expect(subject.new({}).classname).to eq "pb_timestamp_kit" - expect(subject.new(classname: "additional_class").classname).to eq "pb_timestamp_kit additional_class" + timestamp = DateTime.current + align = "left" + dark = "dark" + + expect(subject.new(timestamp: timestamp).classname).to eq "pb_timestamp_kit_#{align}" + expect(subject.new(variant: "updated", timestamp: timestamp).classname).to eq "pb_timestamp_kit_updated_#{align}" + expect(subject.new(variant: "updated", dark: true, timestamp: timestamp).classname).to eq "pb_timestamp_kit_updated_left dark" + expect(subject.new(variant: "elapsed", timestamp: timestamp).classname).to eq "pb_timestamp_kit_elapsed_#{align}" + expect(subject.new(variant: "elapsed", dark: true, timestamp: timestamp).classname).to eq "pb_timestamp_kit_elapsed_#{align} dark" + expect(subject.new(timestamp: timestamp, classname: "additional_class").classname).to eq "pb_timestamp_kit_left additional_class" + end + end + + describe "#format_year_string" do + it "returns the year if timestamp not current year" do + expect(subject.new(timestamp: DateTime.current + 4.years).format_year_string).to eq(", #{(DateTime.current + 4.years).year}") + end + + it "returns nothing if timestamp is in year" do + expect(subject.new(timestamp: DateTime.current).format_year_string).to eq("") + end + end + + describe "#format_time_string" do + it "returns HH:MM with meridian" do + timestamp = DateTime.new(2020, 10, 10, 20, 30, 00).in_time_zone("America/New_York").freeze + expect(subject.new(timestamp: timestamp).format_time_string).to eq("4:30p") + end + + context "timezone" do + it "returns timezone if present && show_timezone" do + timestamp = DateTime.new(2020, 10, 10, 20, 30, 00).in_time_zone("America/New_York").freeze + expect(subject.new(timestamp: timestamp, timezone: "America/New_York", show_timezone: true).format_time_string).to eq("4:30p EDT") + end + + it "doesn't returns timezone if present && show_timezone is false" do + timestamp = DateTime.new(2020, 10, 10, 20, 30, 00).in_time_zone("America/New_York").freeze + expect(subject.new(timestamp: timestamp, timezone: "America/New_York", show_timezone: false).format_time_string).to eq("4:30p") + end + end + end + + describe "#format_date_string" do + it "returns date in specific format without year" do + expect(subject.new(timestamp: timestamp).format_date_string).to eq("#{timestamp.strftime('%b %-d')}") + end + + it "returns date in specific format with year" do + expect(subject.new(timestamp: future_timestamp).format_date_string).to eq("#{future_timestamp.strftime('%b %-d, %Y')}") + end + end + + describe "#format_datetime_string" do + it "returns date with time separated by middot" do + expect(subject.new(timestamp: timestamp).format_datetime_string).to eq("Oct 10 · 4:30p") + end + + it "returns full date and time separated by middot" do + expect(subject.new(timestamp: future_timestamp).format_datetime_string).to eq("Oct 10, 2024 · 4:30p") + end + end + + describe "#format_updated_string" do + let(:name) { "Maricris Nonato" } + + context "for variant updated" do + let(:variant) { "updated" } + + context "if show_user is true" do + let(:show_user) { true } + it "returns last updated string including user's name" do + timestamp = DateTime.new(2020, 10, 10, 20, 30, 00).in_time_zone("America/New_York").freeze + date = "Oct 10" + time = " 4:30p" + + expect(subject.new(timestamp: timestamp, variant: variant, show_user: show_user, text: name).format_updated_string).to eq("Last updated by #{name} on #{date} at#{time}") + end + + it "returns last updated with year including user's name" do + timestamp = DateTime.new(2024, 10, 10, 20, 30, 00).in_time_zone("America/New_York").freeze + date = "Oct 10, 2024" + time = " 4:30p" + + expect(subject.new(timestamp: timestamp, variant: variant, show_user: show_user, text: name).format_updated_string).to eq("Last updated by #{name} on #{date} at#{time}") + end + end + + context "if show_user is false" do + let(:show_user) { false } + it "returns last updated without user's name" do + timestamp = DateTime.new(2020, 10, 10, 20, 30, 00).in_time_zone("America/New_York").freeze + date = "Oct 10" + time = " 4:30p" + + expect(subject.new(timestamp: timestamp, variant: variant, show_user: show_user).format_updated_string).to eq("Last updated on #{date} at#{time}") + end + + it "returns last updated with year without user's name" do + timestamp = DateTime.new(2024, 10, 10, 20, 30, 00).in_time_zone("America/New_York").freeze + date = "Oct 10, 2024" + time = " 4:30p" + + expect(subject.new(timestamp: timestamp, variant: variant, show_user: show_user).format_updated_string).to eq("Last updated on #{date} at#{time}") + end + end + end + + context "for variant elapsed" do + let(:variant) { "elapsed" } + context "if show_user is true" do + let(:show_user) { true } + it "returns time elaspsed string including user's name" do + timestamp = DateTime.new(2020, 10, 10, 20, 30, 00).in_time_zone("America/New_York").freeze + date = "Oct 10" + time = " 4:30p" + + expect(subject.new(timestamp: timestamp, variant: variant, show_user: show_user, text: name).format_updated_string).to eq("Last updated by #{name} #{time_ago_in_words(timestamp)} ago") + end + end + + context "if show_user is false" do + let(:show_user) { false } + it "returns time elaspsed string sans user's name" do + timestamp = DateTime.new(2020, 10, 10, 20, 30, 00).in_time_zone("America/New_York").freeze + date = "Oct 10" + time = " 4:30p" + + expect(subject.new(timestamp: timestamp, variant: variant, show_user: show_user).format_updated_string).to eq("Last updated #{time_ago_in_words(timestamp)} ago") + end + end end end end diff --git a/yarn.lock b/yarn.lock index f565b1b8bf..2204247588 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3399,7 +3399,7 @@ debug@^4.0.1, debug@^4.1.0, debug@^4.1.1: dependencies: ms "^2.1.1" -debuglog@*, debuglog@^1.0.1: +debuglog@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/debuglog/-/debuglog-1.0.1.tgz#aa24ffb9ac3df9a2351837cfb2d279360cd78492" integrity sha1-qiT/uaw9+aI1GDfPstJ5NgzXhJI= @@ -5230,7 +5230,7 @@ import-local@2.0.0, import-local@^2.0.0: pkg-dir "^3.0.0" resolve-cwd "^2.0.0" -imurmurhash@*, imurmurhash@^0.1.4: +imurmurhash@^0.1.4: version "0.1.4" resolved "https://registry.yarnpkg.com/imurmurhash/-/imurmurhash-0.1.4.tgz#9218b9b2b928a238b13dc4fb6b6d576f231453ea" integrity sha1-khi5srkoojixPcT7a21XbyMUU+o= @@ -6238,11 +6238,6 @@ lockfile@^1.0.4: dependencies: signal-exit "^3.0.2" -lodash._baseindexof@*: - version "3.1.0" - resolved "https://registry.yarnpkg.com/lodash._baseindexof/-/lodash._baseindexof-3.1.0.tgz#fe52b53a1c6761e42618d654e4a25789ed61822c" - integrity sha1-/lK1OhxnYeQmGNZU5KJXie1hgiw= - lodash._baseuniq@~4.6.0: version "4.6.0" resolved "https://registry.yarnpkg.com/lodash._baseuniq/-/lodash._baseuniq-4.6.0.tgz#0ebb44e456814af7905c6212fa2c9b2d51b841e8" @@ -6251,33 +6246,11 @@ lodash._baseuniq@~4.6.0: lodash._createset "~4.0.0" lodash._root "~3.0.0" -lodash._bindcallback@*: - version "3.0.1" - resolved "https://registry.yarnpkg.com/lodash._bindcallback/-/lodash._bindcallback-3.0.1.tgz#e531c27644cf8b57a99e17ed95b35c748789392e" - integrity sha1-5THCdkTPi1epnhftlbNcdIeJOS4= - -lodash._cacheindexof@*: - version "3.0.2" - resolved "https://registry.yarnpkg.com/lodash._cacheindexof/-/lodash._cacheindexof-3.0.2.tgz#3dc69ac82498d2ee5e3ce56091bafd2adc7bde92" - integrity sha1-PcaayCSY0u5ePOVgkbr9Ktx73pI= - -lodash._createcache@*: - version "3.1.2" - resolved "https://registry.yarnpkg.com/lodash._createcache/-/lodash._createcache-3.1.2.tgz#56d6a064017625e79ebca6b8018e17440bdcf093" - integrity sha1-VtagZAF2JeeevKa4AY4XRAvc8JM= - dependencies: - lodash._getnative "^3.0.0" - lodash._createset@~4.0.0: version "4.0.3" resolved "https://registry.yarnpkg.com/lodash._createset/-/lodash._createset-4.0.3.tgz#0f4659fbb09d75194fa9e2b88a6644d363c9fe26" integrity sha1-D0ZZ+7CddRlPqeK4imZE02PJ/iY= -lodash._getnative@*, lodash._getnative@^3.0.0: - version "3.9.1" - resolved "https://registry.yarnpkg.com/lodash._getnative/-/lodash._getnative-3.9.1.tgz#570bc7dede46d61cdcde687d65d3eecbaa3aaff5" - integrity sha1-VwvH3t5G1hzc3mh9ZdPuy6o6r/U= - lodash._reinterpolate@^3.0.0: version "3.0.0" resolved "https://registry.yarnpkg.com/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz#0ccf2d89166af03b3663c796538b75ac6e114d9d" @@ -6313,11 +6286,6 @@ lodash.memoize@^4.1.2: resolved "https://registry.yarnpkg.com/lodash.memoize/-/lodash.memoize-4.1.2.tgz#bcc6c49a42a2840ed997f323eada5ecd182e0bfe" integrity sha1-vMbEmkKihA7Zl/Mj6tpezRguC/4= -lodash.restparam@*: - version "3.6.1" - resolved "https://registry.yarnpkg.com/lodash.restparam/-/lodash.restparam-3.6.1.tgz#936a4e309ef330a7645ed4145986c85ae5b20805" - integrity sha1-k2pOMJ7zMKdkXtQUWYbIWuWyCAU= - lodash.template@^4.5.0: version "4.5.0" resolved "https://registry.yarnpkg.com/lodash.template/-/lodash.template-4.5.0.tgz#f976195cf3f347d0d5f52483569fe8031ccce8ab"