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 <jasper.furniss@powerhrg.com> * [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 <smarshall1980@gmail.com> * 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 <jasper.furniss@powerhrg.com> * Changelog Generator 2.0 (#1136) * Changelog Generator 2.0 * Updated PR Template Co-authored-by: Jasper Furniss <jasper.furniss@powerhrg.com> * 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 <jason@jasoncypret.com> * [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 <bot@renovateapp.com> * 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](rails/rails@v5.2.4.3...v5.2.4.4) Signed-off-by: dependabot[bot] <support@github.com> 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 <cole.erikson@powerhrg.com> * Update dependency mini-css-extract-plugin to v0.12.0 (#1140) Co-authored-by: Renovate Bot <bot@renovateapp.com> * Update dependency copy-webpack-plugin to v6.2.0 (#1139) Co-authored-by: Renovate Bot <bot@renovateapp.com> * Fix typeahead example using wrong attribute Co-authored-by: Brendan Huffman <bh247484@gmail.com> Co-authored-by: Rafael Garcia <rafael.garcia@powerhrg.com> Co-authored-by: Jasper Furniss <jasperfurniss@gmail.com> Co-authored-by: Jasper Furniss <jasper.furniss@powerhrg.com> Co-authored-by: Matthew Russell Dodds <matthew.dodds@powerhrg.com> Co-authored-by: Eva Louderback <50629488+evalouderback@users.noreply.github.com> Co-authored-by: Jon Zazula <djonyriz@gmail.com> Co-authored-by: Brendan Huffman <57693937+bh247484@users.noreply.github.com> Co-authored-by: Jason Cypret <jason@jasoncypret.com> 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 <bot@renovateapp.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Cole Erikson <cole.erikson@powerhrg.com> * 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 <jasper.furniss@powerhrg.com> * Changelog Generator 2.0 (#1136) * Changelog Generator 2.0 * Updated PR Template Co-authored-by: Jasper Furniss <jasper.furniss@powerhrg.com> * 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 <jason@jasoncypret.com> * [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 <bot@renovateapp.com> * 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](rails/rails@v5.2.4.3...v5.2.4.4) Signed-off-by: dependabot[bot] <support@github.com> 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 <cole.erikson@powerhrg.com> * Update dependency mini-css-extract-plugin to v0.12.0 (#1140) Co-authored-by: Renovate Bot <bot@renovateapp.com> * Update dependency copy-webpack-plugin to v6.2.0 (#1139) Co-authored-by: Renovate Bot <bot@renovateapp.com> * 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 <smarshall1980@gmail.com> Co-authored-by: Brendan Huffman <bh247484@gmail.com> Co-authored-by: Rafael Garcia <rafael.garcia@powerhrg.com> Co-authored-by: Jasper Furniss <jasperfurniss@gmail.com> Co-authored-by: Jasper Furniss <jasper.furniss@powerhrg.com> Co-authored-by: Matthew Russell Dodds <matthew.dodds@powerhrg.com> Co-authored-by: Eva Louderback <50629488+evalouderback@users.noreply.github.com> Co-authored-by: Jon Zazula <djonyriz@gmail.com> Co-authored-by: Brendan Huffman <57693937+bh247484@users.noreply.github.com> Co-authored-by: Jason Cypret <jason@jasoncypret.com> 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 <bot@renovateapp.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Cole Erikson <cole.erikson@powerhrg.com> * [NUX-639] - Caption Kits to support block / Time Kit style updates (#1100) * Revert "Playbook v7.1.0 (#1143)" (#1148) This reverts commit f1efe55. * Solar Patch (#1149) * Solar Patch * syntax Co-authored-by: Jasper Furniss <jasper.furniss@powerhrg.com> * 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 <jasper.furniss@powerhrg.com> * Pin dependencies (#1138) Co-authored-by: Renovate Bot <bot@renovateapp.com> * Update caption to support block, update time kit structure/style * Remove extra additions. * removed CHANGELOG duplicate Co-authored-by: Jasper Furniss <jasperfurniss@gmail.com> Co-authored-by: Jasper Furniss <jasper.furniss@powerhrg.com> Co-authored-by: Rafael Garcia <rafael.garcia@powerhrg.com> Co-authored-by: thestephenmarshall <smarshall1980@gmail.com> Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: Renovate Bot <bot@renovateapp.com> Co-authored-by: Brendan Huffman <bh247484@gmail.com> * 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 <jasperfurniss@gmail.com> Co-authored-by: Jasper Furniss <jasper.furniss@powerhrg.com> 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 <garettarrowood@gmail.com> Co-authored-by: Stephen Marshall <smarshall1980@gmail.com> Co-authored-by: Brendan Huffman <bh247484@gmail.com> Co-authored-by: Rafael Garcia <rafael.garcia@powerhrg.com> Co-authored-by: Matthew Russell Dodds <matthew.dodds@powerhrg.com> Co-authored-by: Eva Louderback <50629488+evalouderback@users.noreply.github.com> Co-authored-by: Jon Zazula <djonyriz@gmail.com> Co-authored-by: Brendan Huffman <57693937+bh247484@users.noreply.github.com> Co-authored-by: Jason Cypret <jason@jasoncypret.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 <bot@renovateapp.com> 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 <garettarrowood@gmail.com> * Update app/pb_kits/playbook/pb_background/docs/_background_default.html.erb Co-authored-by: Garett Arrowood <garettarrowood@gmail.com> * Update app/pb_kits/playbook/pb_background/docs/_background_default.html.erb Co-authored-by: Garett Arrowood <garettarrowood@gmail.com> * Update app/pb_kits/playbook/pb_background/docs/_background_default.html.erb Co-authored-by: Garett Arrowood <garettarrowood@gmail.com> * 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 <jasper.furniss@powerhrg.com> * added scss file, separated examples, and wrote documentation * fixed failing specs * got rid of extra files Co-authored-by: Stephen Marshall <smarshall1980@gmail.com> Co-authored-by: Kelly Ryan <kellyeryan@gmail.com> Co-authored-by: Garett Arrowood <garettarrowood@gmail.com> Co-authored-by: Jasper Furniss <jasperfurniss@gmail.com> Co-authored-by: Jasper Furniss <jasper.furniss@powerhrg.com> Co-authored-by: Eva Louderback <evalouderback@gmail.com> Co-authored-by: Brendan Huffman <bh247484@gmail.com> 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 <jasper.furniss@powerhrg.com> * [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 <smarshall1980@gmail.com> * 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 <jasper.furniss@powerhrg.com> * Changelog Generator 2.0 (#1136) * Changelog Generator 2.0 * Updated PR Template Co-authored-by: Jasper Furniss <jasper.furniss@powerhrg.com> * 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 <jason@jasoncypret.com> * [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 <bot@renovateapp.com> * 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](rails/rails@v5.2.4.3...v5.2.4.4) Signed-off-by: dependabot[bot] <support@github.com> 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 <cole.erikson@powerhrg.com> * Update dependency mini-css-extract-plugin to v0.12.0 (#1140) Co-authored-by: Renovate Bot <bot@renovateapp.com> * Update dependency copy-webpack-plugin to v6.2.0 (#1139) Co-authored-by: Renovate Bot <bot@renovateapp.com> * Fix typeahead example using wrong attribute Co-authored-by: Brendan Huffman <bh247484@gmail.com> Co-authored-by: Rafael Garcia <rafael.garcia@powerhrg.com> Co-authored-by: Jasper Furniss <jasperfurniss@gmail.com> Co-authored-by: Jasper Furniss <jasper.furniss@powerhrg.com> Co-authored-by: Matthew Russell Dodds <matthew.dodds@powerhrg.com> Co-authored-by: Eva Louderback <50629488+evalouderback@users.noreply.github.com> Co-authored-by: Jon Zazula <djonyriz@gmail.com> Co-authored-by: Brendan Huffman <57693937+bh247484@users.noreply.github.com> Co-authored-by: Jason Cypret <jason@jasoncypret.com> 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 <bot@renovateapp.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Cole Erikson <cole.erikson@powerhrg.com> * 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 <jasper.furniss@powerhrg.com> * Changelog Generator 2.0 (#1136) * Changelog Generator 2.0 * Updated PR Template Co-authored-by: Jasper Furniss <jasper.furniss@powerhrg.com> * 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 <jason@jasoncypret.com> * [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 <bot@renovateapp.com> * 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](rails/rails@v5.2.4.3...v5.2.4.4) Signed-off-by: dependabot[bot] <support@github.com> 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 <cole.erikson@powerhrg.com> * Update dependency mini-css-extract-plugin to v0.12.0 (#1140) Co-authored-by: Renovate Bot <bot@renovateapp.com> * Update dependency copy-webpack-plugin to v6.2.0 (#1139) Co-authored-by: Renovate Bot <bot@renovateapp.com> * 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 <smarshall1980@gmail.com> Co-authored-by: Brendan Huffman <bh247484@gmail.com> Co-authored-by: Rafael Garcia <rafael.garcia@powerhrg.com> Co-authored-by: Jasper Furniss <jasperfurniss@gmail.com> Co-authored-by: Jasper Furniss <jasper.furniss@powerhrg.com> Co-authored-by: Matthew Russell Dodds <matthew.dodds@powerhrg.com> Co-authored-by: Eva Louderback <50629488+evalouderback@users.noreply.github.com> Co-authored-by: Jon Zazula <djonyriz@gmail.com> Co-authored-by: Brendan Huffman <57693937+bh247484@users.noreply.github.com> Co-authored-by: Jason Cypret <jason@jasoncypret.com> 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 <bot@renovateapp.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Cole Erikson <cole.erikson@powerhrg.com> * [NUX-639] - Caption Kits to support block / Time Kit style updates (#1100) * Revert "Playbook v7.1.0 (#1143)" (#1148) This reverts commit f1efe55. * Solar Patch (#1149) * Solar Patch * syntax Co-authored-by: Jasper Furniss <jasper.furniss@powerhrg.com> * 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 <jasper.furniss@powerhrg.com> * Pin dependencies (#1138) Co-authored-by: Renovate Bot <bot@renovateapp.com> * Update caption to support block, update time kit structure/style * Remove extra additions. * removed CHANGELOG duplicate Co-authored-by: Jasper Furniss <jasperfurniss@gmail.com> Co-authored-by: Jasper Furniss <jasper.furniss@powerhrg.com> Co-authored-by: Rafael Garcia <rafael.garcia@powerhrg.com> Co-authored-by: thestephenmarshall <smarshall1980@gmail.com> Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: Renovate Bot <bot@renovateapp.com> Co-authored-by: Brendan Huffman <bh247484@gmail.com> * 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 <jasperfurniss@gmail.com> Co-authored-by: Jasper Furniss <jasper.furniss@powerhrg.com> 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 <garettarrowood@gmail.com> Co-authored-by: Brendan Huffman <bh247484@gmail.com> Co-authored-by: Rafael Garcia <rafael.garcia@powerhrg.com> Co-authored-by: Matthew Russell Dodds <matthew.dodds@powerhrg.com> Co-authored-by: Eva Louderback <50629488+evalouderback@users.noreply.github.com> Co-authored-by: Jon Zazula <djonyriz@gmail.com> Co-authored-by: Brendan Huffman <57693937+bh247484@users.noreply.github.com> Co-authored-by: Jason Cypret <jason@jasoncypret.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 <bot@renovateapp.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Cole Erikson <cole.erikson@powerhrg.com> Co-authored-by: Megan Trimble <53874143+megantrimble@users.noreply.github.com> Co-authored-by: Cole Erikson <coleerikson@users.noreply.github.com> Co-authored-by: Andrew Kloecker <lt.kvothe@gmail.com> * 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 <smarshall1980@gmail.com> Co-authored-by: Cole Erikson <coleerikson@users.noreply.github.com> Co-authored-by: Jasper Furniss <jasperfurniss@gmail.com> Co-authored-by: Jasper Furniss <jasper.furniss@powerhrg.com> 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 <garettarrowood@gmail.com> Co-authored-by: Brendan Huffman <bh247484@gmail.com> Co-authored-by: Rafael Garcia <rafael.garcia@powerhrg.com> Co-authored-by: Matthew Russell Dodds <matthew.dodds@powerhrg.com> Co-authored-by: Eva Louderback <50629488+evalouderback@users.noreply.github.com> Co-authored-by: Jon Zazula <djonyriz@gmail.com> Co-authored-by: Brendan Huffman <57693937+bh247484@users.noreply.github.com> Co-authored-by: Jason Cypret <jason@jasoncypret.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 <bot@renovateapp.com> 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 <kellyeryan@gmail.com> Co-authored-by: Eva Louderback <evalouderback@gmail.com> Co-authored-by: Katie Weber <38359249+web-kat@users.noreply.github.com> Co-authored-by: Cole Erikson <cole.erikson@powerhrg.com> Co-authored-by: Andrew Kloecker <lt.kvothe@gmail.com>
powerhome · Oct 29, 2020 · 571c323 · 571c323
1 parent 8bddff2
commit 571c323
Show file tree

Hide file tree

Showing 24 changed files with 1,614 additions and 65 deletions.
diff --git 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
@@ -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<string>,
+  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 (
-    <div
-        {...dataProps}
-        className={classnames(pbCss, globalProps(props), className)}
-        id={id}
-    >
-      <Caption
-          size="xs"
-          tag="span"
-          text={text}
-      />
+    <div className={classes}>
+      <div className="pb_timestamp_kit">
+        <If condition={variant == 'updated'}>
+          <Caption
+              dark={dark}
+              size="xs"
+              text={fullUpdatedDisplay(showUser, text, timeDisplay, timezone, showTimezone)}
+          />
+        </If>
+        <If condition={variant == 'elapsed'}>
+          <Caption
+              dark={dark}
+              size="xs"
+              text={fullElapsedDisplay(showUser, text, dateTimestamp)}
+          />
+        </If>
+        <If condition={variant == 'default'}>
+          <If condition={showDate == 'true'}>
+            <Caption
+                dark={dark}
+                size="xs"
+                text={fullDateDisplay(dateTimestamp, currentYear, dateDisplay, timezone, showTimezone)}
+            />
+          </If>
+          <If condition={showDate == 'false'}>
+            <Caption
+                dark={dark}
+                size="xs"
+                text={timeDisplay}
+            />
+          </If>
+        </If>
+      </div>
     </div>
   )
 }

diff --git 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
@@ -0,0 +1,69 @@
+<%= pb_rails("timestamp", props: {
+  timestamp: DateTime.now,
+  show_date: false,
+  align: "left"
+}) %>
+
+<br>
+
+<%= pb_rails("timestamp", props: {
+  timestamp: DateTime.now,
+  show_date: true,
+  align: "left"
+}) %>
+
+<br>
+
+<%= pb_rails("timestamp", props: {
+  timestamp: DateTime.now + 4.years,
+  show_date: true,
+  align: "left"
+}) %>
+
+<br><br>
+
+<%= pb_rails("timestamp", props: {
+  timestamp: DateTime.now,
+  show_date: false,
+  align: "center"
+}) %>
+
+<br>
+
+<%= pb_rails("timestamp", props: {
+  timestamp: DateTime.now,
+  show_date: true,
+  align: "center"
+}) %>
+
+<br>
+
+<%= pb_rails("timestamp", props: {
+  timestamp: DateTime.now + 4.years,
+  show_date: true,
+  align: "center"
+}) %>
+
+<br><br>
+
+<%= pb_rails("timestamp", props: {
+  timestamp: DateTime.now,
+  show_date: false,
+  align: "right"
+}) %>
+
+<br>
+
+<%= pb_rails("timestamp", props: {
+  timestamp: DateTime.now,
+  show_date: true,
+  align: "right"
+}) %>
+
+<br>
+
+<%= 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
@@ -0,0 +1,91 @@
+import React from 'react'
+import Timestamp from '../_timestamp.jsx'
+
+const TimestampAlign = (props) => {
+  return (
+    <div>
+      <Timestamp
+          align="left"
+          showDate="false"
+          timestamp={new Date().getTime()}
+          {...props}
+      />
+
+      <br />
+
+      <Timestamp
+          align="left"
+          showDate="true"
+          timestamp={new Date().getTime()}
+          {...props}
+      />
+
+      <br />
+
+      <Timestamp
+          align="left"
+          showDate="true"
+          timestamp={new Date((new Date()).getFullYear() + 4, (new Date().getMonth()), (new Date().getDate() + 1)).getTime()}
+          {...props}
+      />
+
+      <br />
+      <br />
+
+      <Timestamp
+          align="center"
+          showDate="false"
+          timestamp={new Date().getTime()}
+          {...props}
+      />
+
+      <br />
+
+      <Timestamp
+          align="center"
+          showDate="true"
+          timestamp={new Date().getTime()}
+          {...props}
+      />
+
+      <br />
+
+      <Timestamp
+          align="center"
+          showDate="true"
+          timestamp={new Date((new Date()).getFullYear() + 4, (new Date().getMonth()), (new Date().getDate() + 1)).getTime()}
+          {...props}
+      />
+
+      <br />
+      <br />
+
+      <Timestamp
+          align="right"
+          showDate="false"
+          timestamp={new Date().getTime()}
+          {...props}
+      />
+
+      <br />
+
+      <Timestamp
+          align="right"
+          showDate="true"
+          timestamp={new Date().getTime()}
+          {...props}
+      />
+
+      <br />
+
+      <Timestamp
+          align="right"
+          showDate="true"
+          timestamp={new Date((new Date()).getFullYear() + 4, (new Date().getMonth()), (new Date().getDate() + 1)).getTime()}
+          {...props}
+      />
+    </div>
+  )
+}
+
+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
@@ -1 +1,21 @@
-<%= pb_rails("timestamp", props: { text: "20 seconds ago" }) %>
+<%= pb_rails("timestamp", props: {
+  timestamp: DateTime.now,
+  show_date: false,
+  align: "left"
+}) %>
+
+<br>
+
+<%= pb_rails("timestamp", props: {
+  timestamp: DateTime.now,
+  show_date: true,
+  align: "left"
+}) %>
+
+<br>
+
+<%= 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
@@ -1,8 +1,35 @@
 import React from 'react'
-import { Timestamp } from '../../'
+import Timestamp from '../_timestamp.jsx'
 
-const TimestampDefault = () => (
-  <Timestamp text="20 seconds ago" />
-)
+const TimestampDefault = (props) => {
+  return (
+    <div>
+      <Timestamp
+          align="left"
+          showDate="false"
+          timestamp={new Date().getTime()}
+          {...props}
+      />
+
+      <br />
+
+      <Timestamp
+          align="left"
+          showDate="true"
+          timestamp={new Date().getTime()}
+          {...props}
+      />
+
+      <br />
+
+      <Timestamp
+          align="left"
+          showDate="true"
+          timestamp={new Date((new Date()).getFullYear() + 4, (new Date().getMonth()), (new Date().getDate() + 1)).getTime()}
+          {...props}
+      />
+    </div>
+  )
+}
 
 export default TimestampDefault