* add mention autocomplete functionality to article and notification comments
* add cypress tests
* make sure entry transitions dont replay
* undo change to async useeffect covered in other pr
* move search into dynamic import
* exit search if enter pressed in middle of search term
* refactor button activation code
* add a space after a mention is selected
* tweak cypress test for reply to ensure it awaits combobox
* small refactor
* initial setup of component
* initial styles applied
* add some initial docs
* small tweaks to story
* add some very initial tests
* tweaks to styles to add border bottom
* add some preact tests
* import default style in jsx, ignore in jest
* WIP - create MentionAutocompleteListener, attempt to position popover
* position dropdown correctly, exit selection in various scenarios
* refactor
* make sure cursor placed correctly after selection
* only import autocomplete when needed
* rename files, add jsdoc
* update tests and story notes
* tidy up scss file
* fix story styling
* fix aria label in story
* fix issue with key event not triggering in mobile
* position dropdown at input left if small screen
* fix issue with deleting and re-entering
* don't trigger search if directly following a letter or number
* stop change event being fired with highihted text
* move regex out of function into constant
* Add logic to subscribe button that shows login modal if user is not logged in
Pass in userstatus to CommentSubscription
Remove logic that loads comment subscription button for logged-in users only
* Modify test to account for new userStatus input in CommentSubscription
* Change UserStatus to isLoggedIn
Add propType to isLoggedIn
Remove preventDefault from click event
* Fix indentation and input on commentSubscription test
Create new isLoggedIn variable that returns boolean
Replace all instances of userStatus to isLoggedIn
Create test for showLoginModal when subscribing
* Try yarn instead over npm
* Remove ignore flag and use default flag
* Add yarn version
* Remove --docs
* Use NPM :( we don't have a yarn.lock in app/javascript
* Use NPM :( we don't have a yarn.lock in app/javascript
* Updated base to root to use yarn
* hack the command with cd 🙃
* debuggng
* copy package.json and yarn.lock from root
* Set flag to use yarn explicitly
* Oops
* Try a different way
* Package.json not yarn.lock
* Maybe??
* Install yarn with npm then run yarn install??
* Add a Node version
* Try one more thing...
* Syntax error
* I think it's working...
* nvm it didn't work
* Use any 14.14 node version -- syntax correct maybe?
* Fix broken redirects smh
* Update redirects for storybook
* Remove unnecessary redirect rule
* Trigger notifications
* Trigger notifications
* Remove some unused comments
* Add username to onboarding
* Add margin to profile form error alert
* Update user controller for onboarding
Co-authored-by: Michael Kohl <me@citizen428.net>
* adds focusTrap wrapper to preact Modal component
* add view specific code for focus trap in admin add nav link
* add script to return a focustrap toggle, use in add nav link modal partial
* add trap to edit nav link modal
* add handlers for sign up modal
* update modal controller for admin section, update nav link modals to use
* update other admin modals with new data values for trap
* remove unneeded erb script file
* remove unneeded target
* refactor to remove extra unneeded param
* remove duplicate code, store getFocusTrapToggle in window
* trap focus in comment and bookmark showModal instances for not logged in user
* remove need for activator id
* clean up id refs no longer needed
* remove custom code and re-use focsu-trap lib
* update storybook docs
* update default export in focusTrap
* prevent close button click triggering a modal toggle twice
* ensure if user navigates from a modal the trap is deactivated
* add jsdoc comments and add dynamic import
* ensure admin controller modal traps are cleaned up on disconnect
* update sign up modal to use crayons
* update modal controller and admin nav links modals to use preact modal
* update profile fields modals for new controller
* tweak styling of sign up and admin modals to match previous
* update listings modal to use crayons modal, adapt focus trap to work with click outside
* memoize deactivate callback to ensure modal can be presented on first page load
* add missed focustrap changes
* fix focus trap issues in onboarding flow
* refactor onboarding focus trap, remove getFocusTrapToggle
* tweaks for styling and article modal toggle
* add click outside tests to modal
* add cypress tests for the login modal
* update liquid tag tests affected by change
* refactors to address review comments
* fix issue with login modal presented twice on comment add
* change ids to selectors in admin modals
* small pr comment refactors
* add listings e2e tests
* add nav link modal tests
* fix issue with help modal
* tweak to fix ui bug from merge
* remove context from showLoginModal
* rename toggleModal
* rename state property for clarity
Co-authored-by: Nick Taylor <nick@dev.to>
* Added the @shared webpack alias to the project.
* Added some documentation.
* Fixed a copy paste error.
* Renamed @shared to @components.
* Update docs/frontend/webpacker.md
Co-authored-by: Suzanne Aitchison <suzanne@forem.com>
Co-authored-by: Suzanne Aitchison <suzanne@forem.com>
* Some div soup to semantic markup.
* Converted an import to use our webpack @utilities alias.
* Removed unnecessary t variable to house .
* Removed state that can be derived from other component state.
* Removed unused state property .
* Reverted to <div /> as per PR feedback.
* Use grid instead of flex
* Use child margin instead of flex gap
* use .grid instead of .flex.flex-column
* Missed one conditional flex gap
* gap-2 safely deleted since there’s only one element
* Add class for crayons-btn-actions
This pattern occurs pretty often. Easy class addition and easy swap out once flex gap is supported in target browsers
* Use crayons-btn-actions
* Adjust styling to use negative margins
* apply crayons-btn-actions
* use margin-right instead of gap
* use .grid instead of .flex.flex-column
* use margin instead of gap for indicators/tooltips in headings
* remove unused class for clarity
* use flex and add margin to small element
* remove gap from flex container and add margin to figure
* crayons-article__main has neither flex nor grid thus gap has no effect
* fix typo
* use actual grid columns
* use gap instead of flex-column
* Apply crayons-btn-actions
* Fix modal window display
* Safari bein a real pain here
Apparently Safari uses a different model to calculate height than other browsers. who knew.
* change home page main id to main-ontent, update scroll, refresh and shortcut handlers
* update articles by timeframe test with new main-content id
* tidy up css
* Trigger Travis CI
* undo unneeded changes
* small refactors
* Fix typo in alt text
* Convert unsemantic div into nav
* Remove commented CSS
* Refactor connect config menu to be more usable
* Remove unused prop
* Return focus to button when config menu collapses
* Fix aria-label
* Add aria-expanded and fix aria-label text
Co-authored-by: Suzanne Aitchison <suzanne@forem.com>
* Add transparent background-color to config menu button
Co-authored-by: Suzanne Aitchison <suzanne@forem.com>
* Try to fix preview bug
* Now an error is thrown client side if HTTP status isn't 200
* Now the JSON response is thrown instead of the response when preview fails.
* Linter test
Co-authored-by: Nick Taylor <nick@dev.to>
Co-authored-by: Fernando Valverde <fdov88@gmail.com>
Co-authored-by: Nick Taylor <nick@iamdeveloper.com>
Co-authored-by: ludwiczakpawel <ludwiczakpawel@gmail.com>
Co-authored-by: Nick Taylor <nick@dev.to>
Co-authored-by: Suzanne Aitchison <suzanne@forem.com>
* Added svg image picker to navigation link form
* Added svg image picker to navigation link form
* removed unnecessary attribute at _form.html.erb
* Added targets into SvgIconUploadController
* Fixed accept file type in .erb and stimulus controller
* Fixed UI form elements
The phrasing of this may reflect the code, but is a little confusing. A
user might not understand what a "joining request" is, so we should
probably just keep things simple for the time being.
