Commit graph

73 commits

Author SHA1 Message Date
Suzanne Aitchison
89faac306a
treat cmd and ctrl key shortcuts separately on macOS (#15265)
* treat cmd and ctrl key shortcuts differently on macOS

* consolidate shortcut key string into Runtime helper
2021-11-03 11:54:15 +00:00
Michael Kohl
0fab8d6634
Theming changes part 1: Rename default and night_theme (#15176) 2021-10-28 07:55:46 -04:00
Suzanne Aitchison
5069cd681a
Markdown editor toolbar (#14876)
* rough starting point, roving tabindex in toolbar, bold and italic buttons

* refactor, add link

* add ul

* add ordered list

* core formatters in place, wip

* overflow options

* add keyboard shortcuts

* tidy up some dodgy classes

* add mocks for runtime in test and storybook, use correct modifier key for tooltip

* style tweaks

* refactor tooltips

* add markdown formatters tests

* add tests for toolbar component, fix mistake in overflow menu tooltips

* undo change no longer needed to button

* fix issue accessing runtime in formatters file

* only show darkened buttons and tooltips when focus-visible is true

* mobile view

* fix for responsive buttons & roving tabindex

* tweaks from PR review

* update cursor position on link insertion

* add a new line after block selection formatting

* align icons in center

* tidy up overflow menu listeners

* small refactors

* test for new text area util

* tidy up new lines after syntaxes

* fix logic in cursor offsets for links

* prevent scroll jumps after inserting syntax

* some style tweaks

* insert level 2 heading with new lines above and below

* update icons

* use margin instead of gap
2021-10-19 09:22:54 +01:00
Suzanne Aitchison
70683d6d86
prevent scroll jumps when using mention autocomplete (#15031) 2021-10-12 13:06:27 +01:00
Papu Kumar(ReX)
33742e7907
Fix PropTypes Error Create New Post Page (#14969) 2021-10-11 09:48:24 -04:00
Daniel Uber
412fa09026
Rename jest test from spec.js to test.js, so it actually runs (#14972)
* Rename jest test from spec.js to test.js, so it actually runs

* rename snapshot from spec.js.snap to test.js.snap
2021-10-07 08:13:47 -05:00
Papu Kumar(ReX)
6da90073f6
Fix Prop Types Error #14837 (#14889)
* Fix Prop Types Error #14837

Fixed prop types errors for Button, ButtonGroup, Modal and articlePage

* #added some checks into default children props

Co-authored-by: Ben Halpern <bendhalpern@gmail.com>
2021-10-05 10:58:48 +02:00
Suzanne Aitchison
dcecc8bf00
Log prop-types warnings to console in development (#14635)
* enable debug for warnings in dev env

* remove preact/devtools call no longer needed

* fix majority of proptype errors on home page

* sweep up proptype errors from listings page

* fix article form error
2021-09-01 09:27:58 +01:00
Suzanne Aitchison
3b67810b9d
Add support for JSX copy paste in Storybook (#14591)
* add support for JSX and HTML copy paste

* remove html addon, refactor dropdown story

* undo html addon settings
2021-08-30 09:36:01 +01:00
Suzanne Aitchison
bfb4f00aae
Add copy to HTML feature for storybook (#14599)
* Add copy to HTML feature for storybook, inc fix for article markup

* remove html stories no longer needed
2021-08-27 16:09:21 +01:00
Nick Taylor
e0ee5e71f4
Some eslint fixes. (#14605) 2021-08-27 08:37:09 +01:00
Andy Zhao
3b81172c56
Remove docs from repo ✂✂✂ (#14579)
* Remove docs ✂✂✂✂

* Remove all references to docs and gitdocs

* Update docs.forem.com to developers.forem.com

* Remove .gitdocs_build/

* Update yarn.lock
2021-08-23 17:23:42 -04:00
Suzanne Aitchison
a6b4d8e91d
Create crayons mobile drawer components (#14495)
* add MobileDrawer component

* WIP begin navigation component

* rough working version complete

* update story to allow for actual navigation

* add component tests

* add docs

* add HTML variants

* add a max width to the drawer
2021-08-16 08:41:26 +01:00
payapula
52346188c4
Fixes #13601 - Storybook redirects off page (#14491) 2021-08-13 08:18:44 -04:00
Suzanne Aitchison
af517bc5aa
Optimise dropdowns for accessibility: Preact component usages (#13948)
* use the dropdown initializer in post editor options

* use dropdown initializer in comment subs dropdown

* use Dropdown component in listings

* show the dropdown button when it's focused

* update storybook notes and components

* add cypress tests for post options dropdown

* add comment subscription tests

* make sure page is properly initialized before setting button functionality

* add jsdoc comments, props types, rely on optional chaining

* Update app/javascript/crayons/Dropdown/__stories__/dropdowns.md

Co-authored-by: rhymes <github@rhymes.dev>

* Update app/javascript/crayons/Dropdown/__stories__/dropdowns.md

Co-authored-by: rhymes <github@rhymes.dev>

Co-authored-by: rhymes <github@rhymes.dev>
2021-06-15 12:06:27 +01:00
Andrew Bone
61cd4b3e14
🚑 Quick fix prevent grammarly from running on chromium based browsers (#13820) 2021-05-25 06:54:32 -04:00
Andrew Bone
f6e222f12e
Fix layout shift on active crayons-tabs change. (#13300) 2021-05-12 11:45:36 -04:00
Suzanne Aitchison
783fb6fa24
Accessibility enhancements to navigation tabs (#13559)
* update storybook example and docs

* update desktop home feed tabs with a11y enhancements

* update storybook to reflect buttons usage, update post editor buttons

* update admin html variants tabs

* update admin sponsorships tabs

* re-add flex to the crayons-tab class to prevent regression in tab components not updated

* Revert "update admin sponsorships tabs"

This reverts commit d9e4a5e4b0d362e38a11c795b35ceb4442bc4d90.

* Revert "update admin html variants tabs"

This reverts commit 3d9f119e88dc2f2f102d664c57a1f56413490a36.

* update search tabs

* update v2 form erb html

* update tag index tabs

* update notifications tabs

* label the notifications nav

* update mod sidebar tabs

* update main analytics page tabs

* add cypress tests for home feed tabs

* add tab tests for the post editor

* add cypress tests for tags index navigation

* fix UI issue with search tabs, add search cypress tests

* add tests for the analytics dashboard tabs

* add mod nav tests

* add notifications navigation tests

* get new handles after view switch

* replace hardcoded mod paths

* apply review suggestions
2021-05-07 15:24:34 +01:00
Suzanne Aitchison
4aebfb62f2
Improve keyboard accessibility of comment rate limit and error modals (#13536)
* add modal code to Forem namespace, use showModal in the rate limit modal generator

* add cypress tests for both modals

* styling tweaks

* tidy up

* make sure modal trap selector is unique to page, update Modal JSDoc

* add additional jest test for focusTrapSelector
2021-05-03 07:14:23 +01:00
Suzanne Aitchison
7c7a0992b7
Reintroduce autocomplete Cypress test, refactor tests in same suite (#13506)
* reintroduce test, refactor tests

* make sure we always wait for comment box substitution before continuing
2021-04-27 12:01:51 +01:00
Suzanne Aitchison
94bca23f07
Switch from combobox to plaintextArea on click outside (#13333)
* switch back to plaintextArea on click outside

* add a test for click outside

* restore plainTextArea on blur, add cypress test
2021-04-14 09:15:26 +01:00
Nick Taylor
b34db2360e
Fixed bug with iOS devices that crashed the post editor (#13281) 2021-04-07 05:52:17 -04:00
Suzanne Aitchison
6f057fc8ce
Add mention autocomplete to posts (#13101)
* WIP - initial exploration into post mentioon autocomplete

* replace the autosize textarea with mention autocomplete, adjusting height

* add cypress tests for mentioning in a post

* fix resizing of text areas

* refactor text area resize hook

* refactoring

* update cypress tests

* remove mergeRefs from utils, extract UserListItemContent

* allow useTextAreaAutoResize elements to have height greater than minimum, apply styles to container

* Trigger Travis CI

* Travis plz

* small refactors

* add comments and constants as per PR feedback

Co-authored-by: Nick Taylor <nick@dev.to>
2021-03-31 14:42:59 +01:00
Suzanne Aitchison
7af30e8bfc
reinstate reply to comment e2e test (#13181)
* reinstate reply to comment e2e test

* refactor selector for reply comment box

* refactor and remove data testid no longer needed
2021-03-30 16:31:07 +01:00
Suzanne Aitchison
45a291047d
Re-add mention autocomplete to comments, fixing bugs (#13126)
* Revert "Revert "Add (updated) mention autocomplete to post comments (#13061)" (#13116)"

This reverts commit e28bde043c.

* Fix issues with editing comments and arrow key navigation, update tests

* Update app/javascript/crayons/MentionAutocompleteTextArea/MentionAutocompleteTextArea.jsx

Co-authored-by: Nick Taylor <nick@forem.com>

* refactor adding of attributes

* destructure

Co-authored-by: Nick Taylor <nick@forem.com>
2021-03-26 13:43:05 +00:00
Nick Taylor
e28bde043c
Revert "Add (updated) mention autocomplete to post comments (#13061)" (#13116)
This reverts commit a23caead07.
2021-03-25 10:33:51 -04:00
Michael Kohl
7c31a9cc98
Remove buffer gem and related code: step 1 (#12993)
* Remove buffer gem and related code

* Remove more Buffer-related code

* Remove one more Buffer spec

* Remove DUS

* Remove more Buffer code
2021-03-24 09:58:38 +07:00
Suzanne Aitchison
8f9e3a3a55
refactor reach UI style import (#13082) 2021-03-22 12:02:53 +00:00
Suzanne Aitchison
a23caead07
Add (updated) mention autocomplete to post comments (#13061)
* 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
2021-03-22 09:18:13 +00:00
Suzanne Aitchison
124620e0e8
change async await back to then (#13050) 2021-03-19 12:15:19 +00:00
Suzanne Aitchison
e3c97d18d6
Update storybook mention autocomplete component to take over whole textarea (#13044)
* Revert "Revert "Update storybook autocomplete component (#12980)" (#13027)"

This reverts commit f393dd2bbc.

* create helper function to replace node, add comments

* minor refactors
2021-03-18 15:04:59 +00:00
Nick Taylor
f393dd2bbc
Revert "Update storybook autocomplete component (#12980)" (#13027) 2021-03-17 15:59:38 -04:00
Suzanne Aitchison
76a7ed6dbe
Update storybook autocomplete component (#12980) 2021-03-17 11:49:16 -04:00
Suzanne Aitchison
494d92d74c
Create mention autocomplete: initial storybook component (#12831)
* 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
2021-03-05 13:18:26 +00:00
Suzanne Aitchison
5bed8f56d4
improve keyboard accessibility of modals 12427 10610 (#12511)
* 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>
2021-02-24 16:01:10 +00:00
ludwiczakpawel
c816ef4a61
Text styles (#11743)
* tooltips 1.0.1

* tooltips 1.0.1

* .

* styles

* styles

* update

* nahh

* .

* adjustments

* more
2021-02-04 11:43:59 +01:00
Katie Davis
9d4b6c36ea
updates article form to have warning modal (#12430) 2021-01-28 11:32:28 -05:00
ludwiczakpawel
bf72758c4e
Close modal on escape keypress (#12428)
* tooltips 1.0.1

* tooltips 1.0.1

* close on esc

* simpler
2021-01-26 15:12:54 +01:00
Suzanne Aitchison
516bab133f
Storybook dropdown should be accessible 11724 (#12295)
* allow keyboard access to dropdown stories

* add accessibility notes to dropdown stories

* manage focus in html example

* Update reference to aria attributes in notes

Co-authored-by: Vaidehi Joshi <vaidehi.sj@gmail.com>

* add focus style to link for keyboard users

Co-authored-by: Vaidehi Joshi <vaidehi.sj@gmail.com>
2021-01-19 08:51:37 +00:00
Lisa Sy
ea00c808bd
Storybook: Add DocsPage and test out static content (#11397)
* Update naming of guidelines section and improve Introduction page

* Add Docs

* Add docs

* Install Docs add-on

- Rename top-level folders and sort manually
- Add MDX static pages

* Updated all Storybook addons to 6.1.3 except for notes as it's currently 5.3.21

* Fixed naming of section for the select component.

* Updated yarn.lock file.

* Added missing dependency @storybook/addon-docs

Co-authored-by: Nick Taylor <nick@dev.to>
2020-12-02 09:56:38 -08:00
Mac Siri
5ef6106045
Update JS dependencies with yarn upgrade (#11589) 2020-11-24 11:17:25 -05:00
Nick Taylor
bf7780cd2c
Ran prettier on *.js, *.jsx and *.md files. (#11586) 2020-11-23 20:45:50 -05:00
Rafi
0bc475254b
Adding select option to storybook (#11338) 2020-11-11 11:36:11 -05:00
ludwiczakpawel
9d384e1a93
CSS Cleanups, part 2 (#10527)
* padding-top on body

* padding-top on body

* move cheese around

* .

* :(

* rename
2020-10-03 06:57:57 +02:00
ludwiczakpawel
877bdba176
Typography fix & Optimization (#9650)
* flare tag line height

* .

* dropdown fix + actions bar fix

* actions bar on mob

* fixing typography and improving font handling

* cleanup

* variables naming

* fonts swapping

* Makes user's default font render as SiteConfig.default_font

* Trigger checks

* Fixes missing user model specs

* Fixes storybook CI error import & logged out user font set with default

* Limits default_font config to serif, sans-serif & open-dyslexic

* Default font description text

Co-authored-by: Fernando Valverde <fdov88@gmail.com>
2020-08-18 08:05:51 -04:00
Emma Goto
977e8aec45
Bump storybook to version 6 (#9766)
* Bump storybook to version 6

* Remove storybook addon-docs and revert back to storybook/addon-notes

Co-authored-by: Nick Taylor <nick@dev.to>
2020-08-17 10:34:43 +02:00
Nick Taylor
1faa7c723f
Updated docs.dev.to to docs.forem.com (#9666) 2020-08-07 11:24:53 -04:00
ludwiczakpawel
dbbe158d21
Buttons: Ghost Dimmed (#9626)
* flare tag line height

* .

* dropdown fix + actions bar fix

* actions bar on mob

* ghost dimmed

* add to page/crayons
2020-08-06 11:03:06 +02:00
Nick Taylor
3402856fdc
Make <Modal /> component more accessible (#9563)
* Used <dialog /> for modal to stay on the semantic HTML train.

* Added tests and fixed a11y issues with <Modal /> component.
2020-07-29 10:35:42 -04:00
Nick Taylor
efc3a124a0
Added spinner/upload message when uploading an image to a post's content (#8986) 2020-06-30 13:52:47 -04:00