Commit graph

9 commits

Author SHA1 Message Date
ludwiczakpawel
245e70d4a8
Crayons: Buttons vs CTAs (#15311)
* init

* buttons

* buttons, ctas, icons

* ctas fix

* links vs ctas

* alias

* fixes

* add tests for Buttons component

* add tooltip to button story controls

* add link and CTA tests

* add prop types

* docs

* designs

* docs

* focus visible moved to global place

* Updated some component snapshot tests.

* Mocked react-inlinesvg module because of https://github.com/gilbarbara/react-inlinesvg/issues/145\#issuecomment-623453339

* tests

* Copy updates

Co-authored-by: Suzanne Aitchison <suzanne@forem.com>

* missed spots

* Apply suggestions from code review

Co-authored-by: Suzanne Aitchison <suzanne@forem.com>

* danger accent colors

* node

* colors

* adding code comment

* better prop name: style -> variant

* button new

Co-authored-by: Suzanne Aitchison <suzanne@forem.com>
Co-authored-by: Nick Taylor <nick@dev.to>
2021-11-30 20:40:32 +01: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
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
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
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
29951e05e3
Created the <RadioButton /> and <FormField /> components. (#7112)
* Created the <RadioButton /> and <FormField /> components.
2020-04-08 15:04:54 -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