Commit graph

41 commits

Author SHA1 Message Date
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
Nick Taylor
2130269f91
Documentation Improvements to Storybook (#8947) 2020-06-29 08:25:57 -05:00
Nick Taylor
a7938ed287
Fixed a bunch of linting issues in components (#8921) 2020-06-26 10:26:02 -04:00
Nick Taylor
d1f43ae4f4
Fixed warning notice Storybook name (#8856) 2020-06-23 10:13:58 -04:00
Vaidehi Joshi
c4d9c4aed9
Remove trailing slashes from URLs to improve SEO (#8836) [deploy] 2020-06-22 13:44:58 -07:00
Nick Taylor
b03cd5e515
Created the spinner for the image uploader (#8781) 2020-06-22 10:35:42 -04:00
Nick Taylor
653ec12300
Upgrade to Preact 10.4.4 (#8739)
Co-authored-by: Nick Taylor <nick@iamdeveloper.com>
Co-authored-by: Ridhwana <Ridhwana.Khan16@gmail.com>
2020-06-18 10:07:17 -04:00
Ben Halpern
3c840610a1
[deploy] Remove unnecessary bulk from image assets (#8306)
* Remove unnecessary bulk from image assets

* Swap background-image

* Fix test

* Fix test
2020-06-05 17:51:06 -04:00
ludwiczakpawel
a161d3ce31
[deploy] Redesign article editor (#7524) 2020-05-29 11:59:37 -04:00
Nick Taylor
c83cad6fb6
Sorting Storybook stories (#8058)
* Added story sorting to Storybook.

* Added design system guidelines.

* Made Base in Storybook tree 2nd in the tree view.

* Now Components are 3rd in the treeview of Storybook.

* Now App Components are 4th in the treeview of Storybook.

* Froze node version to 12.16.0

* Revert "Froze node version to 12.16.0"

This reverts commit 093b119c7d7ca05ecb4e1c0234b24bcf8e7b10a4.
2020-05-27 13:10:16 -04:00
Nick Taylor
be5f80a04b
Moved common-prop-types out of src/ folder (#7871) 2020-05-14 16:58:29 -04:00
ludwiczakpawel
b1bcf2ed9b
Adding tabIndex prop to Buttons component (#7694)
* tabindex

* Added a test for tabIndex.

Co-authored-by: Nick Taylor <nick@iamdeveloper.com>
2020-05-06 15:40:09 +02:00
ludwiczakpawel
9ddac632e4
Modals (#7603)
* wip

* no comment

* tests

* typo

* typo

* crayons example page

* doc

* boxes fix

* fix

* Update index.html.erb

* Small refactor to return null when the modal is not visible.

* Update app/assets/stylesheets/components/modals.scss

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

* tiny fixes & improvements

Co-authored-by: Nick Taylor <nick@iamdeveloper.com>
2020-05-05 15:33:17 +02:00
Nick Taylor
ddf6a06bc2
Fixed a typo in a a folder name. (#7671) 2020-05-04 13:53:43 -04:00
ludwiczakpawel
2ad5403045
Boxes coloring fix (#7656)
* boxes fix

* fix
2020-05-04 08:42:11 -04:00
Andy Zhao
f5c94391b7
[deploy] Revert "[deploy] Revert "[deploy] Buttons (#7361)" (#7399)" (#7400)
This reverts commit 028121b39d.
2020-04-20 16:40:50 -04:00
Molly Struve
028121b39d
[deploy] Revert "[deploy] Buttons (#7361)" (#7399)
This reverts commit a20e76995c.
2020-04-20 15:57:38 -04:00
ludwiczakpawel
a20e76995c
[deploy] Buttons (#7361)
* cleanup

* more cleanups

* copy fix + groups

* more buttons

* we are good.

* little shadow update

* .

* doc update

* themes

* stories

* button with icon

* html stories

* button groups

* comment subscription component

* Update small-bell.svg

* tests

* Fix polish locale in snapshots

Co-authored-by: rhymes <rhymesete@gmail.com>
2020-04-20 14:35:49 -04:00
Nick Taylor
29951e05e3
Created the <RadioButton /> and <FormField /> components. (#7112)
* Created the <RadioButton /> and <FormField /> components.
2020-04-08 15:04:54 -04:00
Nick Taylor
24b7d380d8
Made typography styles while in Storybook more specific. (#7078)
* Made typography styles while in Storybook more specific.
2020-04-06 21:19:51 -04:00
Nick Taylor
4d3278a21e
Created the <ButtonGroup /> Preact Component (#7048)
* Created the <ButtonGroup /> component.

* Removed comment for children proptypes.

* Updated <ButtonGroup /> SB story and tests.
2020-04-03 11:29:24 -04:00
Nick Taylor
d6e5808dec
Created Crayons Button Preact component (#6987)
* wip <Button > component.

* wip button components.

* Fixed issue when icon does not exist.

* Removed subfolder JSX for Preact components in Storybook sidebar.

* Touched up some Storybook stories.

* Now <Button /> component supports a or button for HTML.

* Now the <Button /> component supports the disabled prop

* A nice little refactor.

* Added onClick, onMouseOver, onMouseOut, onFocus and onBlur events to the <Button /> component.

* Set the cursor to default when a <Button /> component is disabled.

* Added tests for <Button /> component.

* Added tests for <SecondaryButton />, <OutlineButton /> and <DangerButton />.

* Updated disabled cursor.

* Removed link href when button is disabled and is an <a />.

* Added the icon alone option for the <Button /> component.

* Now active and hover states are disabled for <Button /> when an HTML button is rendered.

* Now the disabled <Button /> component deactivates hover/active states properly.

* Removed global button hover styling as per @ludwiczakpawel's request.

* Renamed the as prop to tagName.

* Removed components that were wrapping different variants.
2020-04-03 10:49:01 -04:00
Nick Taylor
f557c9d474
Created preact component for crayons dropdown (#6961)
* Created barrel files so we can import directly from @crayons.

* Added stories for Dropdown for JSX.

* Tweaked Dropdown Storybook stories.

* Tweaked <Dropdown /> component.

* Added module mapping to jest for @crayons.

* Added tests for <Dropdown /> component.

* Removed Storybook custom decorator that is no longer required.
2020-03-31 09:42:21 -04:00
Nick Taylor
e4fdbd1a30
Restructure Storybook stories in sidebar (#6915)
* Renamed designSystem to crayons.

* Restructured how Storybook stories are laid out in Storybook's sidebar.

* wip

* More folder restructuring for Storybook sidebar.

* Fixed Dropdown description story.

* There no longer is a Dropdown for no padding. Just add additional utility classes.

* Showing dropdowns by default in Storybook as they are hidden by default.
2020-03-30 17:26:04 +02:00