diff --git a/.github/workflows/github-actions-check-labels.yml b/.github/workflows/github-actions-check-labels.yml new file mode 100644 index 0000000000..e69de29bb2 diff --git a/playbook-website/Gemfile.lock b/playbook-website/Gemfile.lock index dde6ef761d..884c2fb3af 100644 --- a/playbook-website/Gemfile.lock +++ b/playbook-website/Gemfile.lock @@ -1,7 +1,7 @@ PATH remote: ../playbook specs: - playbook_ui (14.6.0) + playbook_ui (14.6.2) actionpack (>= 5.2.4.5) actionview (>= 5.2.4.5) activesupport (>= 5.2.4.5) diff --git a/playbook-website/config/deploy/production/secrets.yaml b/playbook-website/config/deploy/production/secrets.yaml index f11748c1aa..0754f061f0 100644 --- a/playbook-website/config/deploy/production/secrets.yaml +++ b/playbook-website/config/deploy/production/secrets.yaml @@ -1,6 +1,6 @@ appConfig: secretKeyBase: ENC[AES256_GCM,data:pTc2zofEnukd275BCaIpHOM5LokYsaYdgyGPHH6tggclP8Fj2S3/s7UREfDDuNZdAWAelmfWj3AY6xhtmdNRXt0F1UDvrNw0aCDAUqQK/jfHvgCtPQ2ncdZdpoUeEzmTaHUu3JVCphrCBFWxYrSvQg5qfx/docSiGR/PtaWTgOA=,iv:NwUXrRidkh5gT0E90h8CH9qtddboQnd2uvQfPXVkfM0=,tag:vJ5vPuSFeiRc+kDX5tY3Jg==,type:str] - sentry_dsn: ENC[AES256_GCM,data:pnb9JEfwZ0wCe+eh1CChiKiYAyyMeRtMvJEy9HyY9HFyleFB336Q6nVFx1D74LSxgNbrZiBqg/aA1ZysYCIDRciN6LOMlFAn5AAbMhpYcdNbLQ==,iv:j8l3ISTxrLVF21VRTDkqcmxeMt8jPrZDzDW9rHZ84lc=,tag:eMnHnxYQ+uAIhba0bDNuAA==,type:str] + sentry_dsn: ENC[AES256_GCM,data:30XIW9Gw0dniLDeHEzyjrWtWY5TtkjcjkSlAPg5J84QaYeKaKYOZZClfYj3nARyHDj3ryyxYYzMusfLvXPrIXoZUzP9o+xSUnyCHaWL/ZEqReB+7Dg==,iv:6sT6Qs/lkE+vZVGDkEG8E7e8cpe0Z4dLe5lF+NRpVL0=,tag:4Kd3Rp8Kkr2baGQOo8JJ9g==,type:str] open_ai: ENC[AES256_GCM,data:He7ruscMUMlif05pZhA7f0/rjVt1oG8qzJKGXO6SxHVKZ5t062dD3covgJAGqjCh9aH4wcjCS2xyhBNJWbqjcLhrYsLHuZB4URLfA1CyhJa+maReOCOH88vTutFdIYY=,iv:cZBzbIWxtp+sq3mcE+YGeHeALlSADsU7uXgmKgbmQc8=,tag:a09iJDiJRQ5ImhndwPeYkA==,type:str] database: passwords: @@ -35,8 +35,8 @@ sops: azure_kv: [] hc_vault: [] age: [] - lastmodified: "2024-10-09T16:27:54Z" - mac: ENC[AES256_GCM,data:XZUMDOE+3t8dqAGGi1kZa7JCeC4yHKtBLKMAptq9rDfVqu+j8jjQpN6GuoHarhCSNmo14gOeN619YwSDpowgqY1WTv4LSRMBy2/zZfyd+dIfAnDpvIOMAB2nFj6QoAzRRZjR7j54/oXLJUaySyVB6Wfe8gz4JXBwkaXS2qKDr6Q=,iv:Q05Ig42Jcdx8TOJImzv2OVIRhkKAloE+GSPCKP/OC0s=,tag:Ib3otL+28qidtoYGWqXxYA==,type:str] + lastmodified: "2024-10-23T17:00:12Z" + mac: ENC[AES256_GCM,data:1c0jrxXg2CJpl4Z4mC+I/vL/yJo0gZDVFPNqwk4nYX2iRiCXJL+N+V+ti07Ml1W+4ZoHsGZSC9dF78VZ6Josok3QL2Xtthp7PySkvLZyAqhWY0m5dv6DNaBGKkqVTqcPEp0AgMlK9+1a7DnhOpSZX/R2RsiuxHsJ8LkNsyroPWM=,iv:wRR+AsB11L2r0zPi92QPE6j19GkkrpcMOv7KsbMM5s4=,tag:dScA92dGzuuzRJ64ciXzrQ==,type:str] pgp: [] unencrypted_suffix: _unencrypted - version: 3.8.1 + version: 3.9.1 diff --git a/playbook-website/config/deploy/prs/secrets.yaml b/playbook-website/config/deploy/prs/secrets.yaml index 44cb2f815e..e1c06fe367 100644 --- a/playbook-website/config/deploy/prs/secrets.yaml +++ b/playbook-website/config/deploy/prs/secrets.yaml @@ -1,6 +1,6 @@ appConfig: secretKeyBase: ENC[AES256_GCM,data:tX9TTqw+teUH3ugGOXIfCMSE1fofM8YBfei2cXLB8Wbmsxp+bsoIgByMtgAbyHzov73P2PaJhQWWo/fG2W7Zj8T0gQ5BcK9mVFUkbt/+SmQpbbprLeIpauN4Gar2QWzyzJPIVEUopf3gdEERx3a+2rbMotJ4rB8Xfvv9OO4sOy4=,iv:H7nM7+ERPsNpehyuaAXSotrG8YCMhL1VSNAmFggs+Q4=,tag:eE+MuzvnCuQ6XKAKMMkrsA==,type:str] - sentry_dsn: ENC[AES256_GCM,data:9k5OGZqUcLote0IAJt7GJBsDxN3iJxoVtfPn9RKYfV1KZzNNWyeTZKC/PmjdjKotNbXzLPUSIPbtV8bk2DmttOwQr/r0xbnaTcRT2CWh/4XwVA==,iv:qML16zZMGBSO9nz7kSihlvn5uLj1s+RDSSqOb1jivGw=,tag:XvsrAuIAgAboayg2ZN1KZQ==,type:str] + sentry_dsn: ENC[AES256_GCM,data:v111U+PNOrc28dbLZmpk3ye0EdSpmQtt8HnFxAIidGOkWqlOgdkJzCm05crcLi4i6vHwp9cmXHe/gPPNZJbS45SEs/w8JJheAyA5iBZTLBMqQmTXYg==,iv:Fr0AYhTRJlJxEOVe1bUccoIClEnchTgNJvb6OHCuNsE=,tag:VRAaBIWgvfck6bIzwQTFSw==,type:str] open_ai: ENC[AES256_GCM,data:ewKDrouP0ZuMNAr19DvqBIzYdRInruWH7GxPX2ZH79DVJkT53qLFqzQMIBScqai40WXQmFLNicLnnbHVK+Xcv0tq/xBHtS7BANIwa5XJnWo56jYR3mOdbAcw+ZNFrks=,iv:c5veWRGGydflJ38TFf56ei9GI0tCnE24TLxJGFHscdE=,tag:rGLKDJesBs5JTNt83dsmoA==,type:str] database: passwords: @@ -35,8 +35,8 @@ sops: azure_kv: [] hc_vault: [] age: [] - lastmodified: "2024-10-09T16:20:19Z" - mac: ENC[AES256_GCM,data:qG/8X0ZyqRkCAaQvxqghiYPmPsqhRoq7WAeh8MvkzfAdYWuEp3UIcOqG/CYs77A9770537CYearWkuskXRvYxDyTHdMasqyvayxxl3INwkZgqWWY9fcePLS76FL0nXq8jKz4rQg39148PgeYbYEQuz72wq6CmlXRLj6jg1cyAJw=,iv:24lVuaQcM+GyKg8A8+ek462zm9rXj/D7B5tli6hxJF4=,tag:mX/8OUwt6Mb7dn/Tmx8VkA==,type:str] + lastmodified: "2024-10-23T17:00:27Z" + mac: ENC[AES256_GCM,data:iaQDM4Pzl/nUcwMy07k3qbrupwR2rAiQH+N060upYycShO2hKTeuBXIMrI13HSu+zmi/Bfttw/1LC/hHa3O7vDXw6SEUrRVsAyS4BneO53WmSiJZei7ilBAIgCIdUMdfAtw+S3m7Tb4pdOow+vU1vrq5NDFxU1qNwhza86OlpDc=,iv:4g1EfhnEy6QSv5bGvHUKtXQWePiuzg6ytnp+DyoUaWw=,tag:0MGrT0vgI4zhSgFRfAx6xw==,type:str] pgp: [] unencrypted_suffix: _unencrypted - version: 3.8.1 + version: 3.9.1 diff --git a/playbook-website/config/deploy/staging/secrets.yaml b/playbook-website/config/deploy/staging/secrets.yaml index b364148685..7123fac27d 100644 --- a/playbook-website/config/deploy/staging/secrets.yaml +++ b/playbook-website/config/deploy/staging/secrets.yaml @@ -1,6 +1,6 @@ appConfig: secretKeyBase: ENC[AES256_GCM,data:kOsJ3LgAPCPZ4Vdm/EBFksqneV7tSeFqKrI965UEqkZ7EQ7n/STuE0vte90/oMF1C0eBYzwHEsnT/1kPirKn5/Rz4np2M1jQIvucTfk7QMd76fueIS2lXtLw155rYL8iEh5JyxviOJNfL93U3FiySo1Fa8+1FoOqvlnHa4+/Uoo=,iv:pjEQHF499TYjNEe+O95G3VgqpAfUyJPtVws8nl3zw4k=,tag:38L8NgqyGQu8ueIBS8NcmQ==,type:str] - sentry_dsn: ENC[AES256_GCM,data:8vuODktXtDvYOUKS5XR7JJ0t9sX0urMWdmIeu66wwvqfGNJogacXj097PqM4MHLIsl0DICJen/2xA+uvUSV+ZVqJH7gCqeY3fH4XwMhE8dKZZA==,iv:5NYs+MiDZiR41cuazIFPXC3IKJsJgbl4eoRvTym0dTo=,tag:XP1rGTjYcl5nMUScJ/3w/A==,type:str] + sentry_dsn: ENC[AES256_GCM,data:ZXe1ap46ockSXjRM1BxPMhbydR9k4eyHBLH+vx/a5D+gvvkFgEc9A9PCJ1bJg6I5IvoeZM1P56/RNi82W3QQTRCJsmHraJ39JQdEU0T4olYCdC8n/A==,iv:3jr3T4IYhzfj1GQ7V6q/HfPv0OC10caiNabI2W5DsgI=,tag:hbYiukEbPfygPC9uXBMn2Q==,type:str] open_ai: ENC[AES256_GCM,data:XX6uvmMSXUvaZFcLR4o5zOmZaQDodlRP4tpZ9Od73pnk4sA6VEaPoqBk3AHr0Ret5KD0WhE2TLnMt2UVEv4+xeRcct0lJtN/n+xXODXsGXoRYRRF7hiYGTJJewT5glY=,iv:tOWyS9Ep+TmP4MtY6LEez9XcD/mWERVV2sbEXQU8rrc=,tag:v3sv3+FzybiKijYY7ncqYg==,type:str] database: passwords: @@ -35,8 +35,8 @@ sops: azure_kv: [] hc_vault: [] age: [] - lastmodified: "2024-10-09T16:26:13Z" - mac: ENC[AES256_GCM,data:4oDOX4judp5IwSWIwz0TjModHhgYdIDLlij0m4S7qVeoluGaDSdn8Xx5bhaTOapYxzk1xIzrCuRhAeMFnieBhJ4l8V9XBGxRYDOobYPCJzXuWJFF80T+QoOe2JyjMB84LjtA6qUTn4cvul/tW7hMQ7ySKVr94oHpNW6lx24N2JM=,iv:EDoIKM6S044f764iz73LJBG+NRBqyy+ev6lCK+12cHg=,tag:pR8fl4g7ppG14Mym05P2uQ==,type:str] + lastmodified: "2024-10-23T17:00:43Z" + mac: ENC[AES256_GCM,data:BAUFJMNvJ7ZpY+W4LIAZFA48icyvyClqDFgh9b/uVoRppoU4x87AvD5WX7nSJm7Dn6Dy7ru+BbE36MFZMQMozmVtpxOwdWvxk+WckIzPpIIiB3IFCBhFz01Ql1/kYC56XVGFGTZ/nhGm0Vm3swbroPF/bf6LPHwXGyS6gcAKX9M=,iv:MATRiWYznGMAvu+hukaFJJa92txGq/CFj/B2sX5NaXg=,tag:U80RXtROcr5AcEM7zXvmnA==,type:str] pgp: [] unencrypted_suffix: _unencrypted - version: 3.8.1 + version: 3.9.1 diff --git a/playbook-website/config/menu.yml b/playbook-website/config/menu.yml index 882f663f75..61f8012c84 100644 --- a/playbook-website/config/menu.yml +++ b/playbook-website/config/menu.yml @@ -542,6 +542,9 @@ kits: be followed by Title 2s followed by Title 3s and so on, without skipping any levels. status: stable + - name: link + platforms: *1 + status: beta - category: user description: components: diff --git a/playbook/CHANGELOG.md b/playbook/CHANGELOG.md index 7080805df6..53cc2c1163 100644 --- a/playbook/CHANGELOG.md +++ b/playbook/CHANGELOG.md @@ -1,3 +1,45 @@ +# Supercharge Your Tables: Custom Components in Advanced Table Cells! +##### October 22, 2024 + +6c7a47b3-9b73-4790-811f-e4a01f32c625 + +Weโ€™re excited to announce a new level of flexibility for your tables! The Advanced Table now supports custom components within individual cells. Using the optional customRenderer in columnDefinition, you can access not only the current cell's value but also the entire row's data. This opens up powerful possibilities to render dynamic, tailored content in each cell with ease. + +[14.6.2](https://github.com/powerhome/playbook/tree/14.6.2) full list of changes: + +**Kit Enhancements:** + +- Custom Width for Popover Kit and PopoverProps for Filter Kit [\#3827](https://github.com/powerhome/playbook/pull/3827) ([ElisaShapiro](https://github.com/ElisaShapiro)) +- Dropdown Kit - States & Variant Prop [\#3828](https://github.com/powerhome/playbook/pull/3828) ([nickamantia](https://github.com/nickamantia)) +- Custom Cells for Advanced Table [\#3821](https://github.com/powerhome/playbook/pull/3821) ([nidaqg](https://github.com/nidaqg)) +- Multiple User Bubble Size Prop [\#3719](https://github.com/powerhome/playbook/pull/3719) +([markdoeswork](https://github.com/markdoeswork)) +- Adding React Dropdown Clearing Feature [\#3793](https://github.com/powerhome/playbook/pull/3793) ([carloslimasd](https://github.com/carloslimasd)) +- Filter Kit - Filter Kit Displaying Zero Results [\#3799](https://github.com/powerhome/playbook/pull/3799) ([ElisaShapiro](https://github.com/ElisaShapiro)) +- Add Reset Functionality to Rails side of MultiLevelSelect [\#3792](https://github.com/powerhome/playbook/pull/3792) ([nidaqg](https://github.com/nidaqg)) +- Allow Children for MultiLevelSelect [\#3661](https://github.com/powerhome/playbook/pull/3661) ([nidaqg](https://github.com/nidaqg)) +- Loading State for Rails Form, Resolution of Dialog Loading [\#3753](https://github.com/powerhome/playbook/pull/3753) ([skduncan](https://github.com/skduncan)) + +**Fixed Bugs:** +- Advanced Table Kit "toggle all" is Inverted in Rails [\#3790](https://github.com/powerhome/playbook/pull/3790) ([ElisaShapiro](https://github.com/ElisaShapiro)) +- Truncating the Typeahead FormPill Text [\#3738](https://github.com/powerhome/playbook/pull/3738) ([carloslimasd](https://github.com/carloslimasd)) +- Fixing icon display for markdown helper [\#3754](https://github.com/powerhome/playbook/pull/3754) ([skduncan](https://github.com/skduncan)) +- Set Total Tickets Hero Gauge Height to 150px instead of 25% [\#3752](https://github.com/powerhome/playbook/pull/3752) ([kangaree](https://github.com/kangaree)) +- Dropdown ClassName Fix [\#3845](https://github.com/powerhome/playbook/pull/3845)ย ([@nickamantia](https://github.com/nickamantia)) + +**Improvements:** +- Upgrade intl-tel-input to Latest and Make Fixes [\#3791](https://github.com/powerhome/playbook/pull/3791) ([kangaree](https://github.com/kangaree)) +- Bump react-zoom-pan-pinch from 2.6.1 to 3.6.0 [\#3817](https://github.com/powerhome/playbook/pull/3817) ([kangaree](https://github.com/kangaree)) +- Update react modal version [\#3819](https://github.com/powerhome/playbook/pull/3819) ([markdoeswork](https://github.com/markdoeswork)) +- Add rdbms to playbook-website [\#3778](https://github.com/powerhome/playbook/pull/3778) ([indiebrain](https://github.com/indiebrain)) +- Show htmlOptions as a Global Prop [\#3755](https://github.com/powerhome/playbook/pull/3755) ([skduncan](https://github.com/skduncan)) +- Support Multiple Versions of ruby/psych [\#3751](https://github.com/powerhome/playbook/pull/3751) ([xjunior](https://github.com/xjunior)) +- More storage for CI image builds [\#3767](https://github.com/powerhome/playbook/pull/3767) ([benlangfeld](https://github.com/benlangfeld)) + + +[Full Changelog](https://github.com/powerhome/playbook/compare/14.5.0...14.6.2) + + # ๐Ÿ Improved Usability, Flexibility, Customization and More! ๐Ÿ ##### October 1, 2024 diff --git a/playbook/Gemfile.lock b/playbook/Gemfile.lock index 98fa51d2da..b644f93b20 100644 --- a/playbook/Gemfile.lock +++ b/playbook/Gemfile.lock @@ -1,7 +1,7 @@ PATH remote: . specs: - playbook_ui (14.6.0) + playbook_ui (14.6.2) actionpack (>= 5.2.4.5) actionview (>= 5.2.4.5) activesupport (>= 5.2.4.5) diff --git a/playbook/README.md b/playbook/README.md new file mode 100644 index 0000000000..6cdedb92c2 --- /dev/null +++ b/playbook/README.md @@ -0,0 +1,94 @@ +[![npm version](https://badge.fury.io/js/playbook-ui.svg)](https://badge.fury.io/js/playbook-ui) +[![Gem Version](https://badge.fury.io/rb/playbook_ui.svg)](https://badge.fury.io/rb/playbook_ui) + +# Playbook Design System + +Playbook is the first design system built for both Rails & React interfaces. Inspired by [Velocity](https://www.invisionapp.com/inside-design/design-resources/design-system-dashboard-ui-kit/), Playbook takes a modern design approach and applies it in a way that makes it easy to support bleeding edge or legacy systems. Playbook is built & maintained by the User Experience & Development teams at [Power Home Remodeling](https://www.techatpower.com/), the largest home remodeler in the US. + +## Development + +### Requirements + +- [asdf](https://github.com/asdf-vm/asdf) + +### Getting Started and Running Playbook for Development + +1. After cloning the repo, you should have the following nested folders among other files. It will be important to pay attention to which folder we are in as we get playbook running: + ``` + playbook + โ”‚ playbook + โ”‚ playbook-website + ``` +1. Ensure your installed version of `bundler` is the same as the `BUNDLED WITH` section found in [Gemfile.lock](./Gemfile.lock). You can check the version you have by running `bundle -v`. + +1. From the root directory, run `./setup.sh` + +1. From the top-level playbook folder run `yarn start-dev` This may take a little while. +1. Once you see the "compiled successfully" message in your terminal, navigate to [http://localhost:3000](http://localhost:3000) and you should see the playbook website. + +### Post Installation Startup + +Use `./run.sh` to run the application in one step. This will handle dependency updates then start the server. Helpful for fast start-up without bootstrapping especially when switching branches. ๐Ÿš€ + +### Running Library Tests + +1. `cd playbook && ./test.sh` + +--- + +## Additional Resources + +### Adding NPM Dependencies + +1. You need to be working in `playbook/playbook` or `playbook/playbook-website` subdirectory +1. run `yarn workspace playbook-website add ` to add to the website +1. run `yarn workspace playbook-ui add ` to add to the kit source +1. run `yarn workspace playbook-project add ` to add to the main project + +### Upgrading between versions + +See [docs/upgrade-guide](./upgrade-guide) + +### Releases + +* [Playbook Releases](https://github.com/powerhome/playbook/wiki/Playbook-Releases) + +### Development Environment + +* [Common Errors & Solutions](https://github.com/powerhome/playbook/wiki/Common-Errors-&-Solutions) + +### Building Playbook Kits + +* [Generating a Kit](https://github.com/powerhome/playbook/wiki/Generating-a-Kit) +* [Rails Kit](https://github.com/powerhome/playbook/wiki/Rails-Kit) +* [Rails Kit Helpers](https://github.com/powerhome/playbook/wiki/Rails-Kit-Helpers) +* [Using a Kit within a Kit](https://github.com/powerhome/playbook/wiki/Using-a-Kit-within-a-Kit) +* [Understanding Rails Kit HTML Wrapper](https://github.com/powerhome/playbook/wiki/Understanding-Rails-Kit-HTML-Wrapper) +* [Kit Stylesheet](https://github.com/powerhome/playbook/wiki/Kit-Stylesheet) + +### Testing Playbook Kits Locally + +#### Testing React Kits locally + +1. From inside the `playbook-ui` directory, run `yarn link`; +1. From Inside the project you want to test with `playbook-ui`, run `yarn link playbook-ui`; +1. Rebuild the project now using this version of `playbook-ui`; +1. Test all the things! +1. When finished, from inside the project you were testing with `playbook-ui`, run `yarn unlink playbook-ui`; +1. From Inside the `playbook-ui` directory, run `yarn unlink`; + +#### Jest & React-Testing-Library for Writing Tests + +We are currently backfilling test cases for React kit test coverage using Jest and React Testing Library. More additions and enhancements +to the testing libraries are currently in the works. In the meantime, please take a look at these resources: + +- https://github.com/testing-library/jest-dom#usage for usage and examples +- https://jestjs.io/docs/en/using-matchers + +When a new kit is generated, a placeholder React kit test will also be created. You can run all the tests with `yarn test`. + +### Important Note + +Keep in mind: Styles are brought in from playbook through the rails gem, so you will not be able to test scss updates with yarn linking. + +The gem & npm package is available as open source under the terms of the [ISC License](https://opensource.org/licenses/ISC). diff --git a/playbook/SWIFT_CHANGELOG.md b/playbook/SWIFT_CHANGELOG.md index 7a0624a559..24bd2c6434 100644 --- a/playbook/SWIFT_CHANGELOG.md +++ b/playbook/SWIFT_CHANGELOG.md @@ -1,3 +1,56 @@ +# ๐Ÿš€ Playbook Swift 6.4.0: Enhanced Buttons, Truncations, and Dynamic Typeahead! ๐Ÿš€ +##### Oct 18, 2024 +![image](https://github.com/user-attachments/assets/875ae784-bb68-47e1-ae67-3d25e90f427e) + +The latest release, Playbook Swift 6.4.0, brings new enhancements focused on flexibility, user experience, and seamless integrations. Key highlights include the new **Destructive Button**, adjustments to **Typeahead** for height and list display, and improved truncation in the User Kit for a cleaner, more responsive UI. + +[6.4.0](https://github.com/powerhome/playbook-swift/tree/6.4.0) full list of changes: + +### Playbook Changes + +#### Kit Enhancements +- **Destructive Button**: A new button style designed for critical actions. (#457) +- **Height Adjusted Dropdown**: Improved dropdown to better fit varied content heights. (#450) +- **User Kit Truncation**: Tighter, more dynamic user name displays. (#458) +- **Add Props to PBMessage**: Additional properties to further customize PBMessage. (#456) +- **Typeahead Enhancements**: + - **Show No Option**: Now includes messaging when no options are available. (#455) + - **Section List**: Categorized options for a more organized typeahead. (#459) + - **Initial Value Support**: Set a starting value in PBSwift Typeahead. + - **Truncated User Name Support**: Cleaner user name display in User Kit. + +#### Bug Fixes +- **Message Component Cursor Fix**: Improved cursor behavior for smooth typing experiences. (#454) + +### Documentation Updates +- **Typeahead Enhancements**: Documented updates for scrollable lists, dropdown height adjustments, conversation name display, and improved conversation management options. + +### Connect-Specific +- **Conditional Popover Handler**: Fixed the โ€œCloseโ€ button issue with a new conditional handler. (#565) + +๐Ÿ”— **Full Changelog**: https://github.com/powerhome/playbook-swift/compare/6.3.1...6.4.0 + + + +# โœจ Dynamic Status Indicators & Interactive Messaging! โœจ +##### Sept 20, 2024 +![image](https://github.com/user-attachments/assets/84b6e16c-9fa4-45ba-b00f-6ffa223dbbb4) + +Weโ€™re excited to introduce Playbook Swift 6.3.0, featuring two key updates: a customizable PBAvatar status indicator size and new interactivity for the message kit, delivering more responsive, intuitive user experiences. Hereโ€™s whatโ€™s new: + +[6.3.0](https://github.com/powerhome/playbook-swift/tree/6.3.0) full list of changes: + +**Kit Enhancements** +- **PBAvatar Status Indicator Size**: Adjust and style status indicators with more control for a sharper, polished look. #525 +- **Handle Click on Message Kit**: Respond to user interactions seamlessly, elevating message engagement. #526 +- **Dark Mode Reaction Button Improvements**: Enhanced visibility with border and button refinements for Dark Mode. #508, #528 + +### Bug Fix +- **Online Status Color**: Ensuring accurate color representation for improved visual clarity. #566 + + +๐Ÿ”— **Full Changelog**: https://github.com/powerhome/playbook-swift/compare/6.2.0...6.3.0 + # โœจ Enhance, Customize, and Expand! โœจ ##### Aug 28, 2024 diff --git a/playbook/app/entrypoints/playbook-doc.js b/playbook/app/entrypoints/playbook-doc.js index 91fc773807..c4491a7449 100755 --- a/playbook/app/entrypoints/playbook-doc.js +++ b/playbook/app/entrypoints/playbook-doc.js @@ -59,6 +59,7 @@ import * as Layout from 'kits/pb_layout/docs' import * as LegendDocs from 'kits/pb_legend/docs' import * as Lightbox from 'kits/pb_lightbox/docs' import * as LineGraphDocs from 'kits/pb_line_graph/docs' +import * as Link from 'kits/pb_link/docs' import * as List from 'kits/pb_list/docs' import * as LoadingInline from 'kits/pb_loading_inline/docs' import * as Map from 'kits/pb_map/docs' @@ -167,6 +168,7 @@ WebpackerReact.registerComponents({ ...LegendDocs, ...Lightbox, ...LineGraphDocs, + ...Link, ...List, ...LoadingInline, ...Map, diff --git a/playbook/app/entrypoints/playbook.scss b/playbook/app/entrypoints/playbook.scss index eed254252d..8ebaa9cf11 100755 --- a/playbook/app/entrypoints/playbook.scss +++ b/playbook/app/entrypoints/playbook.scss @@ -30,6 +30,7 @@ @import 'kits/pb_dialog/dialog'; @import 'kits/pb_distribution_bar/distribution_bar'; @import 'kits/pb_draggable/draggable'; +@import 'kits/pb_drawer/drawer'; @import 'kits/pb_dropdown/dropdown'; @import 'kits/pb_file_upload/file_upload'; @import 'kits/pb_filter/filter'; @@ -54,6 +55,7 @@ @import 'kits/pb_legend/legend'; @import 'kits/pb_lightbox/lightbox'; @import 'kits/pb_line_graph/line_graph'; +@import 'kits/pb_link/link'; @import 'kits/pb_list/list'; @import 'kits/pb_loading_inline/loading_inline'; @import 'kits/pb_map/map'; @@ -106,7 +108,6 @@ @import 'kits/pb_user_badge/user_badge'; @import 'kits/pb_walkthrough/walkthrough'; @import 'kits/pb_weekday_stacked/weekday_stacked'; -@import 'kits/pb_drawer/drawer'; @import 'utilities/mixins'; @import 'utilities/spacing'; @import 'utilities/cursor'; diff --git a/playbook/app/javascript/kits.js b/playbook/app/javascript/kits.js index 9651ffa73b..15de7bb5b1 100644 --- a/playbook/app/javascript/kits.js +++ b/playbook/app/javascript/kits.js @@ -59,6 +59,7 @@ export { default as Layout } from '../pb_kits/playbook/pb_layout/_layout' export { default as Legend } from '../pb_kits/playbook/pb_legend/_legend' export { default as Lightbox } from '../pb_kits/playbook/pb_lightbox/_lightbox' export { default as LineGraph } from '../pb_kits/playbook/pb_line_graph/_line_graph' +export { default as Link} from '../pb_kits/playbook/pb_link/_link' export { default as List } from '../pb_kits/playbook/pb_list/_list' export { default as ListItem } from '../pb_kits/playbook/pb_list/_list_item' export { default as LoadingInline } from '../pb_kits/playbook/pb_loading_inline/_loading_inline' diff --git a/playbook/app/pb_kits/playbook/pb_currency/_currency.tsx b/playbook/app/pb_kits/playbook/pb_currency/_currency.tsx index f0673c777b..c03f683541 100644 --- a/playbook/app/pb_kits/playbook/pb_currency/_currency.tsx +++ b/playbook/app/pb_kits/playbook/pb_currency/_currency.tsx @@ -26,6 +26,7 @@ type CurrencyProps = { variant?: 'default' | 'light' | 'bold', unit?: string, unstyled?: boolean, + commaSeparator?: boolean, } const sizes: {lg: 1, md: 3, sm: 4} = { @@ -53,6 +54,7 @@ const Currency = (props: CurrencyProps): React.ReactElement => { variant = 'default', dark = false, unstyled = false, + commaSeparator = false, } = props const emphasizedClass = emphasized ? '' : '_deemphasized' @@ -74,7 +76,7 @@ const Currency = (props: CurrencyProps): React.ReactElement => { className ) - const getFormattedNumber = (input: number | any ) => new Intl.NumberFormat('en-US', { + const getFormattedNumber = (input: number | any) => new Intl.NumberFormat('en-US', { notation: 'compact', maximumFractionDigits: 1, }).format(input) @@ -88,12 +90,20 @@ const Currency = (props: CurrencyProps): React.ReactElement => { return isAmount ? num.slice(0, -1) : isUnit ? num.slice(-1) : '' } - const getMatchingDecimalAmount = decimals === "matching" ? amount : whole, - getMatchingDecimalValue = decimals === "matching" ? '' : `.${decimal}` + const getMatchingDecimalAmount = decimals === "matching" ? amount : whole + const getMatchingDecimalValue = decimals === "matching" ? '' : `.${decimal}` - const getAmount = abbreviate ? getAbbreviatedValue('amount') : getMatchingDecimalAmount, - getAbbreviation = abbreviate ? getAbbreviatedValue('unit') : null, - getDecimalValue = abbreviate ? '' : getMatchingDecimalValue + const formatAmount = (amount: string) => { + if (!commaSeparator) return amount; + + const [wholePart, decimalPart] = amount.split('.'); + const formattedWhole = new Intl.NumberFormat('en-US').format(parseInt(wholePart)); + return decimalPart ? `${formattedWhole}.${decimalPart}` : formattedWhole; + } + + const getAmount = abbreviate ? getAbbreviatedValue('amount') : formatAmount(getMatchingDecimalAmount) + const getAbbreviation = abbreviate ? getAbbreviatedValue('unit') : null + const getDecimalValue = abbreviate ? '' : getMatchingDecimalValue return (
{ expect(currencyKit.querySelector('.pb_currency_value')).toHaveTextContent('320') expect(currencyKit.querySelector('.unit')).toHaveTextContent('.20') }) + + +test('commaSeparator prop returns comma separated amount', () => { + render( + + ) + expect(screen.getByTestId('comma-test')).toHaveTextContent('1,234,567,890') +}) + +test('commaSeparator prop returns comma separated amount with decimals', () => { + render( + + ) + expect(screen.getByTestId('comma-test-decimals')).toHaveTextContent('1,234,567,890.12') +}) + +test('commaSeparator prop returns comma separated amount with decimals="matching"', () => { + render( + + ) + expect(screen.getByTestId('comma-test-decimals-matching')).toHaveTextContent('1,234,567,890.12') +}) diff --git a/playbook/app/pb_kits/playbook/pb_currency/docs/_currency_comma_separator.html.erb b/playbook/app/pb_kits/playbook/pb_currency/docs/_currency_comma_separator.html.erb new file mode 100644 index 0000000000..48f0548013 --- /dev/null +++ b/playbook/app/pb_kits/playbook/pb_currency/docs/_currency_comma_separator.html.erb @@ -0,0 +1,7 @@ +<%= pb_rails("currency", props: { + amount: '1234567.89', + comma_separator: true, + size: 'lg', + emphasized: false, + decimals: 'matching', +}) %> diff --git a/playbook/app/pb_kits/playbook/pb_currency/docs/_currency_comma_separator.jsx b/playbook/app/pb_kits/playbook/pb_currency/docs/_currency_comma_separator.jsx new file mode 100644 index 0000000000..851cf52a10 --- /dev/null +++ b/playbook/app/pb_kits/playbook/pb_currency/docs/_currency_comma_separator.jsx @@ -0,0 +1,18 @@ +import React from "react" + +import Currency from "../_currency" + +const CurrencyCommaSeparator = (props) => { + return ( + + ) +} + +export default CurrencyCommaSeparator diff --git a/playbook/app/pb_kits/playbook/pb_currency/docs/_currency_comma_separator.md b/playbook/app/pb_kits/playbook/pb_currency/docs/_currency_comma_separator.md new file mode 100644 index 0000000000..b2c926c110 --- /dev/null +++ b/playbook/app/pb_kits/playbook/pb_currency/docs/_currency_comma_separator.md @@ -0,0 +1,3 @@ +The optional `commaSeparator` can be used to auto-format the use of commas as a thousands separator. + +**NOTE:** If the value passed into the `amount` prop is already comma-dilineated, it will not add additional commas. diff --git a/playbook/app/pb_kits/playbook/pb_currency/docs/example.yml b/playbook/app/pb_kits/playbook/pb_currency/docs/example.yml index a8354bce15..8568c2a514 100644 --- a/playbook/app/pb_kits/playbook/pb_currency/docs/example.yml +++ b/playbook/app/pb_kits/playbook/pb_currency/docs/example.yml @@ -8,7 +8,8 @@ examples: - currency_abbreviated: Abbreviate Larger Amounts - currency_matching_decimals: Matching Decimals - currency_unstyled: Unstyled - + - currency_comma_separator: Comma Separator + react: - currency_variants: Variants - currency_size: Size @@ -17,6 +18,7 @@ examples: - currency_abbreviated: Abbreviate Larger Amounts - currency_matching_decimals: Matching Decimals - currency_unstyled: Unstyled + - currency_comma_separator: Comma Separator swift: - currency_size_swift: Size diff --git a/playbook/app/pb_kits/playbook/pb_currency/docs/index.js b/playbook/app/pb_kits/playbook/pb_currency/docs/index.js index e0ab2b0b99..86ae571909 100644 --- a/playbook/app/pb_kits/playbook/pb_currency/docs/index.js +++ b/playbook/app/pb_kits/playbook/pb_currency/docs/index.js @@ -5,3 +5,4 @@ export { default as CurrencyNoSymbol } from './_currency_no_symbol.jsx' export { default as CurrencyAbbreviated } from './_currency_abbreviated.jsx' export { default as CurrencyMatchingDecimals } from './_currency_matching_decimals.jsx' export { default as CurrencyUnstyled } from './_currency_unstyled.jsx' +export { default as CurrencyCommaSeparator } from './_currency_comma_separator.jsx' diff --git a/playbook/app/pb_kits/playbook/pb_dropdown/_dropdown.scss b/playbook/app/pb_kits/playbook/pb_dropdown/_dropdown.scss index 05b26b4b07..f769bd112a 100644 --- a/playbook/app/pb_kits/playbook/pb_dropdown/_dropdown.scss +++ b/playbook/app/pb_kits/playbook/pb_dropdown/_dropdown.scss @@ -9,7 +9,7 @@ @import "./scss_partials/dropdown_animation"; -.pb_dropdown { +[class*="pb_dropdown"] { .dropdown_wrapper { [class*="dropdown_trigger_wrapper"] { @include pb_body; @@ -131,7 +131,7 @@ } } - &.separators_hidden { + &[class*="separators_hidden"] { .dropdown_wrapper { .pb_dropdown_container { @@ -142,7 +142,7 @@ } } - &.subtle { + &[class*="subtle"] { .dropdown_wrapper { .pb_dropdown_container { @@ -178,7 +178,7 @@ } } - &.separators_hidden { + &[class*="separators_hidden"] { .dropdown_wrapper { .pb_dropdown_container { [class*="pb_dropdown_option"]:first-child { diff --git a/playbook/app/pb_kits/playbook/pb_dropdown/_dropdown.tsx b/playbook/app/pb_kits/playbook/pb_dropdown/_dropdown.tsx index 28af6eb76a..13af9cb3c5 100644 --- a/playbook/app/pb_kits/playbook/pb_dropdown/_dropdown.tsx +++ b/playbook/app/pb_kits/playbook/pb_dropdown/_dropdown.tsx @@ -74,10 +74,8 @@ const Dropdown = forwardRef((props: DropdownProps, ref: any) => { const htmlProps = buildHtmlProps(htmlOptions); const separatorsClass = separators ? '' : 'separators_hidden' const classes = classnames( - buildCss("pb_dropdown"), + buildCss("pb_dropdown", variant, separatorsClass), globalProps(props), - variant, - separatorsClass, className ); diff --git a/playbook/app/pb_kits/playbook/pb_dropdown/dropdown.rb b/playbook/app/pb_kits/playbook/pb_dropdown/dropdown.rb index 30e6cbd2f5..422e7824e2 100644 --- a/playbook/app/pb_kits/playbook/pb_dropdown/dropdown.rb +++ b/playbook/app/pb_kits/playbook/pb_dropdown/dropdown.rb @@ -24,7 +24,7 @@ def data end def classname - generate_classname("pb_dropdown", variant, separators_class, separator: " ") + generate_classname("pb_dropdown", variant, separators_class) end private @@ -38,7 +38,7 @@ def input_default_value end def separators_class - separators ? "" : "separators_hidden" + separators ? nil : "separators_hidden" end def options_with_blank diff --git a/playbook/app/pb_kits/playbook/pb_dropdown/dropdown.test.jsx b/playbook/app/pb_kits/playbook/pb_dropdown/dropdown.test.jsx index 58e114d1a6..2ea0553a0e 100644 --- a/playbook/app/pb_kits/playbook/pb_dropdown/dropdown.test.jsx +++ b/playbook/app/pb_kits/playbook/pb_dropdown/dropdown.test.jsx @@ -50,7 +50,7 @@ test('generated default kit and classname', () => { const kit = screen.getByTestId(testId) expect(kit).toBeInTheDocument() - expect(kit).toHaveClass('pb_dropdown') + expect(kit).toHaveClass('pb_dropdown_default') }) test('generated default Trigger and Container when none passed in', () => { diff --git a/playbook/app/pb_kits/playbook/pb_link/_link.scss b/playbook/app/pb_kits/playbook/pb_link/_link.scss new file mode 100644 index 0000000000..bb1aec6e2e --- /dev/null +++ b/playbook/app/pb_kits/playbook/pb_link/_link.scss @@ -0,0 +1,66 @@ +@import "../tokens/colors"; +@import "../tokens/line_height"; +@import "../tokens/typography"; +@import "../tokens/border_radius"; + +[class^=pb_link_kit]{ + @include pb_link($primary); + &:hover { + color: $text_lt_default; + } + &:focus { + outline: none; + } + &:focus-visible { + border-radius: $border_rad_light; + outline: 1px solid $primary; + outline-offset: 2px; + } + &:visited { + color: $data_3; + } + &.dark { + @include pb_link($active_dark); + &:hover { + color: $text_dk_default; + } + } + @each $color_name, $color_value in $pb_link_colors { + &[class*=_#{"" + $color_name}] { + @include pb_link($color_value); + + &:hover { + color: map-get($pb_link_hover_colors, $color_name); + } + + &:visited { + color: $data_3; + } + } + } + + @each $dark_color_name, $dark_color_value in $pb_dark_link_colors{ + &[class*=_#{$dark_color_name}][class*=dark]{ + @include pb_link($dark_color_value); + + &:hover { + color: map-get($pb_dark_link_hover_colors, $dark_color_name); + } + + &:visited { + color: $data_3; + } + } + } + + &[class*=_underline] { + text-decoration: underline; + } + + &[class*=_disabled] { + pointer-events: none; + cursor: default; + color: $text_lt_lighter; + } + +} diff --git a/playbook/app/pb_kits/playbook/pb_link/_link.tsx b/playbook/app/pb_kits/playbook/pb_link/_link.tsx new file mode 100644 index 0000000000..1ed1a3625e --- /dev/null +++ b/playbook/app/pb_kits/playbook/pb_link/_link.tsx @@ -0,0 +1,107 @@ +import React from 'react' +import classnames from 'classnames' + +import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props' +import { globalProps, GlobalProps } from '../utilities/globalProps' + +import Icon from '../pb_icon/_icon' + +type LinkProps = { + aria?: {[key: string]: string}, + className?: string, + children?: React.ReactChild[] | React.ReactChild, + color?: 'default' | 'body' | 'muted' | 'destructive', + dark?: boolean, + data?: {[key: string]: string}, + disabled?: boolean, + href?: string, + htmlOptions?: {[key: string]: string | number | boolean | (() => void) | ((arg?: Event) => void)}, + icon?: string, + iconRight?: string, + id?: string, + tag?: 'a' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'div', + text?: string, + underline?: boolean, +} & GlobalProps + +const Link = (props: LinkProps): React.ReactElement => { + const { + aria = {}, + children, + className, + color = '', + data = {}, + disabled = false, + href= '', + htmlOptions = {}, + icon = '', + iconRight = '', + id = '', + tag = 'a', + text = '', + underline = false, + } = props + + const ariaProps: {[key: string]: string} = buildAriaProps(aria) + const dataProps: {[key: string]: string} = buildDataProps(data) + const htmlProps = buildHtmlProps(htmlOptions); + const classes = classnames( + buildCss('pb_link_kit', color, underline ? 'underline' : '', disabled ? 'disabled' : ''), + globalProps(props), + className + ) + const Tag = tag as keyof JSX.IntrinsicElements + + const renderContent = () => ( + <> + {icon && ( + + )} + {text || children} + {iconRight && ( + + )} + + ) + + const commonProps = { + ...ariaProps, + ...dataProps, + ...htmlProps, + className: classes, + id, + } + + if (tag === 'a') { + return ( + + {renderContent()} + + ) + } else { + return ( + + {renderContent()} + + ) + } + +} + +export default Link \ No newline at end of file diff --git a/playbook/app/pb_kits/playbook/pb_link/docs/_link_color.html.erb b/playbook/app/pb_kits/playbook/pb_link/docs/_link_color.html.erb new file mode 100644 index 0000000000..1d5d695dd8 --- /dev/null +++ b/playbook/app/pb_kits/playbook/pb_link/docs/_link_color.html.erb @@ -0,0 +1,30 @@ +
+ <%= pb_rails("link", props: { + text: "link example", + href: "https://www.google.com/search?q=playbook+design+system", + }) %> +
+ +
+ <%= pb_rails("link", props: { + text: "link example", + href: "https://www.youtube.com/@PowerHRG", + color: "body", + }) %> +
+ +
+ <%= pb_rails("link", props: { + text: "link example", + href: "https://github.com/powerhome/.github/blob/main/profile/README.md", + color: "muted", + }) %> +
+ +
+ <%= pb_rails("link", props: { + text: "link example", + href: "https://rubygems.org/gems/playbook_ui/", + color: "destructive", + }) %> +
diff --git a/playbook/app/pb_kits/playbook/pb_link/docs/_link_color.jsx b/playbook/app/pb_kits/playbook/pb_link/docs/_link_color.jsx new file mode 100644 index 0000000000..8d3108dd10 --- /dev/null +++ b/playbook/app/pb_kits/playbook/pb_link/docs/_link_color.jsx @@ -0,0 +1,40 @@ +import React from 'react' +import { Link } from 'playbook-ui' + +const LinkColor = (props) => ( +
+
+ +
+
+ +
+
+ +
+
+ +
+
+) + +export default LinkColor diff --git a/playbook/app/pb_kits/playbook/pb_link/docs/_link_disabled.html.erb b/playbook/app/pb_kits/playbook/pb_link/docs/_link_disabled.html.erb new file mode 100644 index 0000000000..df60fec0b2 --- /dev/null +++ b/playbook/app/pb_kits/playbook/pb_link/docs/_link_disabled.html.erb @@ -0,0 +1,5 @@ +<%= pb_rails("link", props: { + text: "link example", + href: "#disabled", + disabled: true, +}) %> \ No newline at end of file diff --git a/playbook/app/pb_kits/playbook/pb_link/docs/_link_disabled.jsx b/playbook/app/pb_kits/playbook/pb_link/docs/_link_disabled.jsx new file mode 100644 index 0000000000..ed9a64d613 --- /dev/null +++ b/playbook/app/pb_kits/playbook/pb_link/docs/_link_disabled.jsx @@ -0,0 +1,15 @@ +import React from 'react' +import { Link } from 'playbook-ui' + +const LinkDisabled = (props) => ( +
+ +
+) + +export default LinkDisabled diff --git a/playbook/app/pb_kits/playbook/pb_link/docs/_link_icon.html.erb b/playbook/app/pb_kits/playbook/pb_link/docs/_link_icon.html.erb new file mode 100644 index 0000000000..ac17688298 --- /dev/null +++ b/playbook/app/pb_kits/playbook/pb_link/docs/_link_icon.html.erb @@ -0,0 +1,15 @@ +
+ <%= pb_rails("link", props: { + text: "link example", + href: "#icon", + icon: "arrow-up-right-from-square", + }) %> +
+ +
+ <%= pb_rails("link", props: { + text: "link example", + href: "#icon2", + icon_right: "chevron-right", + }) %> +
\ No newline at end of file diff --git a/playbook/app/pb_kits/playbook/pb_link/docs/_link_icon.jsx b/playbook/app/pb_kits/playbook/pb_link/docs/_link_icon.jsx new file mode 100644 index 0000000000..07503f0890 --- /dev/null +++ b/playbook/app/pb_kits/playbook/pb_link/docs/_link_icon.jsx @@ -0,0 +1,25 @@ +import React from 'react' +import { Link } from 'playbook-ui' + +const LinkIcon = (props) => ( +
+
+ +
+
+ +
+
+) + +export default LinkIcon diff --git a/playbook/app/pb_kits/playbook/pb_link/docs/_link_tag.html.erb b/playbook/app/pb_kits/playbook/pb_link/docs/_link_tag.html.erb new file mode 100644 index 0000000000..a7a41266e9 --- /dev/null +++ b/playbook/app/pb_kits/playbook/pb_link/docs/_link_tag.html.erb @@ -0,0 +1,35 @@ +<%= pb_rails("link", props: { + text: "h1 link example", + href: "#tag", + icon: "arrow-up-right-from-square", + tag: "h1", +}) %> + +<%= pb_rails("link", props: { + text: "h3 link example", + href: "#tag2", + tag: "h3", + underline: true, +}) %> + +<%= pb_rails("link", props: { + color: "destructive", + text: "h6 link example", + href: "#tag3", + tag: "h6", +}) %> + +<%= pb_rails("link", props: { + text: "p link example", + href: "#tag4", + icon_right: "chevron-right", + tag: "p", +}) %> + +
+ This is a <%= pb_rails("link", props: { + text: "span link example", + href: "#tag5", + tag: "span", + }) %> +
\ No newline at end of file diff --git a/playbook/app/pb_kits/playbook/pb_link/docs/_link_tag.jsx b/playbook/app/pb_kits/playbook/pb_link/docs/_link_tag.jsx new file mode 100644 index 0000000000..9d9d4ae710 --- /dev/null +++ b/playbook/app/pb_kits/playbook/pb_link/docs/_link_tag.jsx @@ -0,0 +1,45 @@ +import React from 'react' +import { Link } from 'playbook-ui' + +const LinkTag = (props) => ( +
+ + + + +
+ This is a +
+
+) + +export default LinkTag diff --git a/playbook/app/pb_kits/playbook/pb_link/docs/_link_underline.html.erb b/playbook/app/pb_kits/playbook/pb_link/docs/_link_underline.html.erb new file mode 100644 index 0000000000..854357a6f2 --- /dev/null +++ b/playbook/app/pb_kits/playbook/pb_link/docs/_link_underline.html.erb @@ -0,0 +1,5 @@ +<%= pb_rails("link", props: { + text: "link example", + href: "#underline", + underline: true, +}) %> \ No newline at end of file diff --git a/playbook/app/pb_kits/playbook/pb_link/docs/_link_underline.jsx b/playbook/app/pb_kits/playbook/pb_link/docs/_link_underline.jsx new file mode 100644 index 0000000000..8f509db388 --- /dev/null +++ b/playbook/app/pb_kits/playbook/pb_link/docs/_link_underline.jsx @@ -0,0 +1,15 @@ +import React from 'react' +import { Link } from 'playbook-ui' + +const LinkUnderline = (props) => ( +
+ +
+) + +export default LinkUnderline diff --git a/playbook/app/pb_kits/playbook/pb_link/docs/example.yml b/playbook/app/pb_kits/playbook/pb_link/docs/example.yml new file mode 100644 index 0000000000..ae862385d6 --- /dev/null +++ b/playbook/app/pb_kits/playbook/pb_link/docs/example.yml @@ -0,0 +1,16 @@ +examples: + + rails: + - link_color: Color + - link_underline: Underline + - link_icon: Icon + - link_disabled: Disabled + - link_tag: Tag + + + react: + - link_color: Color + - link_underline: Underline + - link_icon: Icon + - link_disabled: Disabled + - link_tag: Tag diff --git a/playbook/app/pb_kits/playbook/pb_link/docs/index.js b/playbook/app/pb_kits/playbook/pb_link/docs/index.js new file mode 100644 index 0000000000..6f0b6c138e --- /dev/null +++ b/playbook/app/pb_kits/playbook/pb_link/docs/index.js @@ -0,0 +1,5 @@ +export { default as LinkColor } from './_link_color.jsx' +export { default as LinkUnderline } from './_link_underline.jsx' +export { default as LinkIcon } from './_link_icon.jsx' +export { default as LinkDisabled } from './_link_disabled.jsx' +export { default as LinkTag } from './_link_tag.jsx' \ No newline at end of file diff --git a/playbook/app/pb_kits/playbook/pb_link/link.html.erb b/playbook/app/pb_kits/playbook/pb_link/link.html.erb new file mode 100644 index 0000000000..fcbab306e4 --- /dev/null +++ b/playbook/app/pb_kits/playbook/pb_link/link.html.erb @@ -0,0 +1,21 @@ +<% link_content = proc do %> + <% if object.icon.present? %> + <%= pb_rails("icon", props: { icon: object.icon, fixed_width: true, size: "xs", margin_right: "xxs" }) %> + <% end %> + <%= object.content %> + <% if object.icon_right.present? %> + <%= pb_rails("icon", props: { icon: object.icon_right, fixed_width: true, size: "xs", margin_left: "xxs" }) %> + <% end %> +<% end %> + +<% if object.tag == "a" %> + <%= pb_content_tag(object.tag, { href: object.href }) do %> + <%= link_content.call %> + <% end %> +<% else %> + <%= pb_content_tag(:a, { href: object.href }) do %> + <%= content_tag(object.tag) do %> + <%= link_content.call %> + <% end %> + <% end %> +<% end %> diff --git a/playbook/app/pb_kits/playbook/pb_link/link.rb b/playbook/app/pb_kits/playbook/pb_link/link.rb new file mode 100644 index 0000000000..e1b3695633 --- /dev/null +++ b/playbook/app/pb_kits/playbook/pb_link/link.rb @@ -0,0 +1,44 @@ +# frozen_string_literal: true + +module Playbook + module PbLink + class Link < ::Playbook::KitBase + prop :color, type: Playbook::Props::Enum, + values: %w[default body muted destructive], + default: "default" + prop :disabled, type: Playbook::Props::Boolean, + default: false + prop :href + prop :icon + prop :icon_right + prop :tag, type: Playbook::Props::Enum, + values: %w[a h1 h2 h3 h4 h5 h6 p span div], + default: "a" + prop :text + prop :underline, type: Playbook::Props::Boolean, + default: false + + def classname + generate_classname("pb_link_kit", color_class, underline_class, disabled_class) + end + + def content + text + end + + private + + def color_class + color == "default" ? nil : color + end + + def disabled_class + disabled ? "disabled" : nil + end + + def underline_class + underline ? "underline" : nil + end + end + end +end diff --git a/playbook/app/pb_kits/playbook/pb_link/link.test.jsx b/playbook/app/pb_kits/playbook/pb_link/link.test.jsx new file mode 100644 index 0000000000..7161767d7a --- /dev/null +++ b/playbook/app/pb_kits/playbook/pb_link/link.test.jsx @@ -0,0 +1,92 @@ +import React from 'react' +import { ensureAccessible, renderKit, render, screen } from '../utilities/test-utils' + +import { Link } from 'playbook-ui' + +const link = 'https://www.google.com' + +const props = { + data: { testid: 'default' }, + href: link, +} + +test('returns namespaced class name', () => { + const kit = renderKit(Link , props) + expect(kit).toBeInTheDocument() + expect(kit).toHaveClass('pb_link_kit') + expect(kit).toHaveAttribute('href', link) +}) + +it("should be accessible", async () => { + ensureAccessible(Link, props) +}) + +test('with colors', () => { + ['default', 'body', 'muted', 'destructive'].forEach((color) => { + const testId = `colors-test-${color}` + render( + + ) + + const kit = screen.getByTestId(testId) + expect(kit).toHaveClass(`pb_link_kit_${color}`) + }) +}) + +test('disable prop', () => { + render( + + ) + + const kit = screen.getByTestId('disable-test') + + expect(kit).toHaveClass('pb_link_kit_disabled') +}) + +test('underline prop', () => { + render( + + ) + + const kit = screen.getByTestId('underline-test') + + expect(kit).toHaveClass('pb_link_kit_underline') +}) + +test('adds icon', () => { + render( + + ) + + const kit = screen.getByTestId('icon-test') + + const icon = kit.querySelector('.pb_icon_kit') + expect(icon).toBeInTheDocument(); +}) + +test('adds icon right', () => { + render( + + ) + + const kit = screen.getByTestId('icon-right-test') + + const icon = kit.querySelector('.pb_icon_kit') + expect(icon).toBeInTheDocument(); +}) diff --git a/playbook/app/pb_kits/playbook/tokens/_typography.scss b/playbook/app/pb_kits/playbook/tokens/_typography.scss index 25c4cbbc97..5bf975e92e 100755 --- a/playbook/app/pb_kits/playbook/tokens/_typography.scss +++ b/playbook/app/pb_kits/playbook/tokens/_typography.scss @@ -1,3 +1,5 @@ +@import "../tokens/colors"; + $font_family_base: "Power Centra", "Helvetica Neue", Helvetica, Arial, sans_serif !default; /* CLEAN UP AND REMOVE */ @@ -51,3 +53,36 @@ $boldest: 700 !default; $bolder: 700 !default; $light: 300 !default; $lighter: 300 !default; + +/* Link Colors */ +$pb_link_colors: ( + default: $primary_action, + body: $text_lt_default, + muted: $text_lt_light, + destructive: $error, +); + +$pb_link_hover_colors: ( + default: $text_lt_default, + body: $primary_action, + muted: $text_lt_default, + destructive: $text_lt_default, +); + +$pb_dark_link_colors: ( + default: $active_dark, + body: $text_dk_default, + muted: $text_dk_light, + destructive: $error_dark, +); + +$pb_dark_link_hover_colors: ( + default: $text_dk_default, + body: $active_dark, + muted: $text_dk_default, + destructive: $text_dk_default, +); + +@mixin pb_link($color: $primary_action) { + color: $color; +} \ No newline at end of file diff --git a/playbook/lib/playbook/version.rb b/playbook/lib/playbook/version.rb index 97fbbe200c..1d1954ad9f 100644 --- a/playbook/lib/playbook/version.rb +++ b/playbook/lib/playbook/version.rb @@ -1,6 +1,6 @@ # frozen_string_literal: true module Playbook - PREVIOUS_VERSION = "14.5.0" - VERSION = "14.6.0" + PREVIOUS_VERSION = "14.6.1" + VERSION = "14.6.2" end diff --git a/playbook/package.json b/playbook/package.json index bf8236bca2..2af3422d19 100644 --- a/playbook/package.json +++ b/playbook/package.json @@ -1,6 +1,6 @@ { "name": "playbook-ui", - "version": "14.6.0", + "version": "14.6.2", "description": "Nitro's Design System", "main": "./dist/playbook.js", "types": "./dist/types/index.d.ts", diff --git a/playbook/spec/pb_kits/playbook/kits/link_spec.rb b/playbook/spec/pb_kits/playbook/kits/link_spec.rb new file mode 100644 index 0000000000..11a694fc13 --- /dev/null +++ b/playbook/spec/pb_kits/playbook/kits/link_spec.rb @@ -0,0 +1,43 @@ +# frozen_string_literal: true + +require_relative "../../../../app/pb_kits/playbook/pb_link/link" + +RSpec.describe Playbook::PbLink::Link do + subject { Playbook::PbLink::Link } + + it { + is_expected.to define_enum_prop(:color) + .with_default("default") + .with_values("default", "body", "muted", "destructive") + } + it { is_expected.to define_boolean_prop(:disabled).with_default(false) } + it { is_expected.to define_prop(:href) } + it { is_expected.to define_prop(:icon) } + it { is_expected.to define_prop(:icon_right) } + it { + is_expected.to define_enum_prop(:tag) + .with_default("a") + .with_values("a", "h1", "h2", "h3", "h4", "h5", "h6", "p", "span", "div") + } + it { is_expected.to define_prop(:text) } + it { is_expected.to define_boolean_prop(:underline).with_default(false) } + + describe "#classname" do + it "returns namespaced class name", :aggregate_failures do + expect(subject.new({}).classname).to eq "pb_link_kit" + expect(subject.new(classname: "additional_class").classname).to eq "pb_link_kit additional_class" + expect(subject.new(dark: true).classname).to eq "pb_link_kit dark" + expect(subject.new(color: "destructive").classname).to eq "pb_link_kit_destructive" + expect(subject.new(underline: true).classname).to eq "pb_link_kit_underline" + expect(subject.new(disabled: true).classname).to eq "pb_link_kit_disabled" + end + end + + describe "#href" do + it "adds href attribute", :aggregate_failures do + instance = subject.new(href: "google.com") + expect(instance.href).to eq("google.com") + expect(instance).to have_attributes(href: "google.com") + end + end +end diff --git a/playbook/spec/pb_kits/playbook/pb_currency/currency_spec.rb b/playbook/spec/pb_kits/playbook/pb_currency/currency_spec.rb index 6a5d8bf3e6..f69e4a8449 100644 --- a/playbook/spec/pb_kits/playbook/pb_currency/currency_spec.rb +++ b/playbook/spec/pb_kits/playbook/pb_currency/currency_spec.rb @@ -15,6 +15,7 @@ it { is_expected.to define_enum_prop(:variant).with_default("default").with_values("default", "light", "bold") } it { is_expected.to define_prop(:abbreviate).with_default(false).of_type(Playbook::Props::Boolean) } it { is_expected.to define_enum_prop(:decimals).with_default("default").with_values("default", "matching") } + it { is_expected.to define_prop(:comma_separator).with_default(false).of_type(Playbook::Props::Boolean) } describe "#classname" do it "returns namespaced class name", :aggregate_failures do @@ -75,4 +76,12 @@ expect(num.body_props[:text]).to eq ".20" end end + + describe "when prop commaSeparator is set to true" do + it "returns comma separated amount" do + num = subject.new(comma_separator: true, amount: "1234567890") + + expect(num.title_props[:text]).to eq "1,234,567,890" + end + end end