feat: truncate component rework
Description
Corresponding issue: #3311
This refactors the Truncate component to use CSS properties instead of complex JS. The -webkit-line-clamp property has support for most common browsers (source). Eventually, line-clamp should have support but that is not currently the case.
This was discussed in Paragon Working Group (session notes).
Both title and aria-label are used for accessibility in the same way it was used before. The assembleStringFromChildrenArray utility function has been moved to a utils.ts file and thus converted to TypeScript.
The deprecated component as well as it's utils file still exist under the Truncate directory. The deprecated component is still accessible at Truncate.Deprecated. The utils file has been renamed to utils.deprecated. It didn't make sense to convert the entire utils file to TS when only the one utility function (assembleStringFromChildrenArray) was needed.
The tests for the deprecated component are under TruncateDeprecated.test.jsx.
src/
└── Truncate/
├── index.js
├── index.scss
├── README.md
├── Truncate.test.jsx
├── Truncate.tsx
├── TruncateDeprecated.jsx
├── TruncateDeprecated.test.jsx
├── utils.deprecated.js
├── utils.deprecated.test.js
├── utils.test.ts
└── utils.ts
Deploy Preview
https://deploy-preview-4037--paragon-openedx-v23.netlify.app/components/truncate/
Merge Checklist
- [x] If your update includes visual changes, have they been reviewed by a designer? Send them a link to the Netlify deploy preview, if applicable.
- [ ] Does your change adhere to the documented style conventions?
- [ ] Do any prop types have missing descriptions in the Props API tables in the documentation site (check deploy preview)?
- [ ] Were your changes tested using all available themes (see theme switcher in the header of the deploy preview, under the "Settings" icon)?
- [ ] Were your changes tested in the
exampleapp? - [ ] Is there adequate test coverage for your changes?
- [ ] Consider whether this change needs to reviewed/QA'ed for accessibility (a11y). If so, please request an a11y review for the PR in the #wg-paragon Open edX Slack channel.
Post-merge Checklist
- [ ] Verify your changes were released to NPM at the expected version.
- [ ] If you'd like, share your contribution in #show-and-tell.
- [ ] 🎉 🙌 Celebrate! Thanks for your contribution.