Implementing new buttons (#15843)
* buttons * view archive link block * revert font weight change * save draft title * revert * fix * specs * specs * spec * spec * for fcks sake * Change spec for unarchive/archive button from .find to .findByRole * fix help icon * improve a11y on close.jsx * bring back the focus * . * Update cypress/integration/seededFlows/publishingFlows/uploadImage.spec.js Co-authored-by: Suzanne Aitchison <suzanne@forem.com> * drop icons.jsx Co-authored-by: Nick Taylor <nick@dev.to> Co-authored-by: Suzanne Aitchison <suzanne@forem.com>
This commit is contained in:
ludwiczakpawel
GitHub
parent
f3bc5e5db2
commit
ea28093bbb
35 changed files with 174 additions and 442 deletions
3
app/assets/images/bold.svg
Normal file
3
app/assets/images/bold.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M8 11h4.5a2.5 2.5 0 0 0 0-5H8v5Zm10 4.5a4.501 4.501 0 0 1-4.5 4.5H6V4h6.5a4.5 4.5 0 0 1 3.256 7.606A4.5 4.5 0 0 1 18 15.5ZM8 13v5h5.5a2.5 2.5 0 0 0 0-5H8Z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 262 B |
3
app/assets/images/code.svg
Normal file
3
app/assets/images/code.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="m23 12-7.071 7.071-1.414-1.414L20.172 12l-5.657-5.657 1.414-1.414zM3.828 12l5.657 5.657-1.414 1.414L1 12l7.071-7.071 1.414 1.414z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 237 B |
3
app/assets/images/codeblock.svg
Normal file
3
app/assets/images/codeblock.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M3 3h18a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1zm1 2v14h16V5zm15 7-3.536 3.536-1.414-1.415L16.172 12 14.05 9.879l1.414-1.415zM7.828 12l2.122 2.121-1.414 1.415L5 12l3.536-3.536L9.95 9.88z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 317 B |
5
app/assets/images/divider.svg
Normal file
5
app/assets/images/divider.svg
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M2 11h6v2H2z"/>
|
||||
<path d="M2 11h6v2H2zm7 0h6v2H9zm7 0h6v2h-6z"/>
|
||||
<path d="M12 6.586 9.707 4.293 8.293 5.707 12 9.414l3.707-3.707-1.414-1.414zm0 10.828-2.293 2.293-1.414-1.414L12 14.586l3.707 3.707-1.414 1.414z" clip-rule="evenodd" fill-rule="evenodd"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 364 B |
3
app/assets/images/heading.svg
Normal file
3
app/assets/images/heading.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M17 11V4h2v17h-2v-8H7v8H5V4h2v7z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 140 B |
3
app/assets/images/help.svg
Normal file
3
app/assets/images/help.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10Zm0-2a8 8 0 1 0 0-16.001A8 8 0 0 0 12 20Zm-1-5h2v2h-2v-2Zm2-1.645V14h-2v-1.5a1 1 0 0 1 1-1 1.5 1.5 0 1 0-1.471-1.794l-1.962-.393A3.5 3.5 0 1 1 13 13.355Z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 333 B |
3
app/assets/images/italic.svg
Normal file
3
app/assets/images/italic.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M15 20H7v-2h2.927l2.116-12H9V4h8v2h-2.927l-2.116 12H15v2Z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 165 B |
|
|
@ -1,3 +1,3 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="482.136" height="482.135" viewBox="0 0 482.136 482.135">
|
||||
<path d="M455.482 198.184L326.829 326.832c-35.535 35.54-93.108 35.54-128.646 0l-42.881-42.886 42.881-42.876 42.884 42.876c11.845 11.822 31.064 11.846 42.886 0l128.644-128.643c11.816-11.831 11.816-31.066 0-42.9l-42.881-42.881c-11.822-11.814-31.064-11.814-42.887 0l-45.928 45.936c-21.292-12.531-45.491-17.905-69.449-16.291l72.501-72.526c35.535-35.521 93.136-35.521 128.644 0l42.886 42.881c35.535 35.523 35.535 93.141-.001 128.662zM201.206 366.698l-45.903 45.9c-11.845 11.846-31.064 11.817-42.881 0l-42.884-42.881c-11.845-11.821-11.845-31.041 0-42.886l128.646-128.648c11.819-11.814 31.069-11.814 42.884 0l42.886 42.886 42.876-42.886-42.876-42.881c-35.54-35.521-93.113-35.521-128.65 0L26.655 283.946c-35.538 35.545-35.538 93.146 0 128.652l42.883 42.882c35.51 35.54 93.11 35.54 128.646 0l72.496-72.499c-23.956 1.597-48.092-3.784-69.474-16.283z"/>
|
||||
<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M18.364 15.536 16.95 14.12l1.414-1.414a5.001 5.001 0 0 0-3.531-8.551 5 5 0 0 0-3.54 1.48L9.879 7.05 8.464 5.636 9.88 4.222a7 7 0 1 1 9.9 9.9l-1.415 1.414zm-2.828 2.828-1.415 1.414a7 7 0 0 1-9.9-9.9l1.415-1.414L7.05 9.88l-1.414 1.414a5 5 0 1 0 7.071 7.071l1.414-1.414 1.415 1.414zm-.708-10.607 1.415 1.415-7.071 7.07-1.415-1.414 7.071-7.07z"/>
|
||||
</svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 957 B After Width: | Height: | Size: 447 B |
3
app/assets/images/list-ordered.svg
Normal file
3
app/assets/images/list-ordered.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M8 4h13v2H8zM5 3v3h1v1H3V6h1V4H3V3zM3 14v-2.5h2V11H3v-1h3v2.5H4v.5h2v1zm2 5.5H3v-1h2V18H3v-1h3v4H3v-1h2zM8 11h13v2H8zm0 7h13v2H8z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 237 B |
3
app/assets/images/list-unordered.svg
Normal file
3
app/assets/images/list-unordered.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M8 4h13v2H8zM4.5 6.5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm0 7a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm0 6.9a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zM8 11h13v2H8zm0 7h13v2H8z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 274 B |
3
app/assets/images/overflow-vertical.svg
Normal file
3
app/assets/images/overflow-vertical.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M12 17a2 2 0 1 1 0 4 2 2 0 0 1 0-4Zm0-7a2 2 0 1 1 0 4 2 2 0 0 1 0-4Zm2-5a2 2 0 1 0-4 0 2 2 0 0 0 4 0Z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 249 B |
3
app/assets/images/quote.svg
Normal file
3
app/assets/images/quote.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M4.583 17.321C3.553 16.227 3 15 3 13.011c0-3.5 2.457-6.637 6.03-8.188l.893 1.378c-3.335 1.804-3.987 4.145-4.247 5.621.537-.278 1.24-.375 1.929-.311 1.804.167 3.226 1.648 3.226 3.489a3.5 3.5 0 0 1-3.5 3.5 3.871 3.871 0 0 1-2.748-1.179zm10 0C13.553 16.227 13 15 13 13.011c0-3.5 2.457-6.637 6.03-8.188l.893 1.378c-3.335 1.804-3.987 4.145-4.247 5.621.537-.278 1.24-.375 1.929-.311 1.804.167 3.226 1.648 3.226 3.489a3.5 3.5 0 0 1-3.5 3.5 3.871 3.871 0 0 1-2.748-1.179z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 571 B |
3
app/assets/images/strikethrough.svg
Normal file
3
app/assets/images/strikethrough.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M17.154 14c.23.516.346 1.09.346 1.72 0 1.342-.524 2.392-1.571 3.147C14.88 19.622 13.433 20 11.586 20c-1.64 0-3.263-.381-4.87-1.144V16.6c1.52.877 3.075 1.316 4.666 1.316 2.551 0 3.83-.732 3.839-2.197a2.21 2.21 0 0 0-.648-1.603l-.12-.117H3v-2h18v2h-3.846zm-4.078-3H7.629a4.087 4.087 0 0 1-.481-.522C6.716 9.92 6.5 9.246 6.5 8.452c0-1.236.466-2.287 1.397-3.153C8.83 4.433 10.271 4 12.222 4c1.471 0 2.879.328 4.222.984v2.152c-1.2-.687-2.515-1.03-3.946-1.03-2.48 0-3.719.782-3.719 2.346 0 .42.218.786.654 1.099s.974.562 1.613.75c.62.18 1.297.414 2.03.699z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 658 B |
3
app/assets/images/underline.svg
Normal file
3
app/assets/images/underline.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M8 3v9a4 4 0 1 0 8 0V3h2v9a6 6 0 1 1-12 0V3zM4 20h16v2H4z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 165 B |
|
|
@ -460,7 +460,9 @@ label[class*='crayons-btn']:focus-within // label for input[type="file"] made to
|
|||
// which is basically almost all of them.
|
||||
// • Second declaration is for browsers that do not support :focus-visible
|
||||
// which basically is only Safari right now :shrug:
|
||||
&:focus-visible {
|
||||
&:focus-visible,
|
||||
&:is(label):focus-within {
|
||||
// label for input[type="file"] made to look like a button as the browse... button can't be styled.
|
||||
background-color: var(--bg-hover);
|
||||
color: var(--color-hover);
|
||||
z-index: var(--z-elevate);
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
import { h } from 'preact';
|
||||
import PropTypes from 'prop-types';
|
||||
import { Button } from '@crayons';
|
||||
import { ButtonNew as Button } from '@crayons';
|
||||
import CopyIcon from '@images/copy.svg';
|
||||
|
||||
function linksToMarkdownForm(imageLinks) {
|
||||
return imageLinks
|
||||
|
|
@ -8,23 +9,6 @@ function linksToMarkdownForm(imageLinks) {
|
|||
.join('\n');
|
||||
}
|
||||
|
||||
const CopyIcon = () => (
|
||||
<svg
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
className="crayons-icon"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
role="img"
|
||||
aria-labelledby="fc5f15add1e114844f5e"
|
||||
>
|
||||
<title id="fc5f15add1e114844f5e">Copy Markdown for image</title>
|
||||
<path d="M7 6V3a1 1 0 011-1h12a1 1 0 011 1v14a1 1 0 01-1 1h-3v3c0 .552-.45 1-1.007 1H4.007A1 1 0 013 21l.003-14c0-.552.45-1 1.007-1H7zm2 0h8v10h2V4H9v2zm-2 5v2h6v-2H7zm0 4v2h6v-2H7z" />
|
||||
</svg>
|
||||
);
|
||||
|
||||
CopyIcon.displayName = 'CopyIcon';
|
||||
|
||||
export const ClipboardButton = ({
|
||||
onCopy,
|
||||
imageUrls,
|
||||
|
|
@ -47,9 +31,8 @@ export const ClipboardButton = ({
|
|||
/>
|
||||
<Button
|
||||
className="spec__image-markdown-copy whitespace-nowrap fw-normal"
|
||||
variant="ghost"
|
||||
contentType="icon-left"
|
||||
icon={CopyIcon}
|
||||
title="Copy markdown for image"
|
||||
>
|
||||
{showCopyMessage ? 'Copied!' : 'Copy...'}
|
||||
</Button>
|
||||
|
|
|
|||
|
|
@ -1,29 +1,15 @@
|
|||
import { h } from 'preact';
|
||||
import { Button } from '@crayons';
|
||||
import { ButtonNew as Button } from '@crayons';
|
||||
import CloseIcon from '@images/x.svg';
|
||||
|
||||
export const Close = ({ displayModal = () => {} }) => {
|
||||
const Icon = () => (
|
||||
<svg
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
className="crayons-icon"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
role="img"
|
||||
aria-labelledby="as1mn15llu5e032u2pgzlc6yhvss2myk"
|
||||
>
|
||||
<title id="as1mn15llu5e032u2pgzlc6yhvss2myk">Close the editor</title>
|
||||
<path d="M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636l4.95 4.95z" />
|
||||
</svg>
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="crayons-article-form__close">
|
||||
<Button
|
||||
variant="ghost"
|
||||
contentType="icon"
|
||||
icon={Icon}
|
||||
icon={CloseIcon}
|
||||
onClick={() => displayModal()}
|
||||
title="Close the editor"
|
||||
aria-label="Close the editor"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import { h } from 'preact';
|
||||
import PropTypes from 'prop-types';
|
||||
import { Options } from './Options';
|
||||
import { Button } from '@crayons';
|
||||
import { ButtonNew as Button } from '@crayons';
|
||||
|
||||
export const EditorActions = ({
|
||||
onSaveDraft,
|
||||
|
|
@ -20,7 +20,12 @@ export const EditorActions = ({
|
|||
if (submitting) {
|
||||
return (
|
||||
<div className="crayons-article-form__footer">
|
||||
<Button className="mr-2 whitespace-nowrap" onClick={onPublish} disabled>
|
||||
<Button
|
||||
variant="primary"
|
||||
className="mr-2 whitespace-nowrap"
|
||||
onClick={onPublish}
|
||||
disabled
|
||||
>
|
||||
{published && isVersion2
|
||||
? 'Publishing...'
|
||||
: `Saving ${isVersion2 ? 'draft' : ''}...`}
|
||||
|
|
@ -31,16 +36,16 @@ export const EditorActions = ({
|
|||
|
||||
return (
|
||||
<div className="crayons-article-form__footer">
|
||||
<Button className="mr-2 whitespace-nowrap" onClick={onPublish}>
|
||||
<Button
|
||||
variant="primary"
|
||||
className="mr-2 whitespace-nowrap"
|
||||
onClick={onPublish}
|
||||
>
|
||||
{published || isVersion1 ? 'Save changes' : 'Publish'}
|
||||
</Button>
|
||||
|
||||
{!(published || isVersion1) && (
|
||||
<Button
|
||||
variant="secondary"
|
||||
className="mr-2 whitespace-nowrap"
|
||||
onClick={onSaveDraft}
|
||||
>
|
||||
<Button className="mr-2 whitespace-nowrap" onClick={onSaveDraft}>
|
||||
Save <span className="hidden s:inline">draft</span>
|
||||
</Button>
|
||||
)}
|
||||
|
|
@ -55,10 +60,8 @@ export const EditorActions = ({
|
|||
|
||||
{edited && (
|
||||
<Button
|
||||
variant="ghost"
|
||||
onClick={onClearChanges}
|
||||
className="whitespace-nowrap fw-normal"
|
||||
size="s"
|
||||
className="whitespace-nowrap fw-normal fs-s"
|
||||
>
|
||||
Revert <span className="hidden s:inline">new changes</span>
|
||||
</Button>
|
||||
|
|
|
|||
|
|
@ -6,47 +6,17 @@ import { generateMainImage } from '../actions';
|
|||
import { validateFileInputs } from '../../packs/validateFileInputs';
|
||||
import { addSnackbarItem } from '../../Snackbar';
|
||||
import { ClipboardButton } from './ClipboardButton';
|
||||
import { Button, Spinner } from '@crayons';
|
||||
|
||||
const ImageIcon = () => (
|
||||
<svg
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
className="crayons-icon"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
role="img"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<title id="a17qec5pfhrwzk9w4kg0tp62v27qqu9t">Upload image</title>
|
||||
<path d="M20 5H4v14l9.292-9.294a1 1 0 011.414 0L20 15.01V5zM2 3.993A1 1 0 012.992 3h18.016c.548 0 .992.445.992.993v16.014a1 1 0 01-.992.993H2.992A.993.993 0 012 20.007V3.993zM8 11a2 2 0 110-4 2 2 0 010 4z" />
|
||||
</svg>
|
||||
);
|
||||
|
||||
const CancelIcon = () => (
|
||||
<svg
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
className="crayons-icon cancel"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
role="img"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<title id="as1mn15llu5e032u2pgzlc6yhvss2myk">Cancel</title>
|
||||
<path d="M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636l4.95 4.95z" />
|
||||
</svg>
|
||||
);
|
||||
import { ButtonNew as Button, Spinner, Icon } from '@crayons';
|
||||
import ImageIcon from '@images/image.svg';
|
||||
import CancelIcon from '@images/x.svg';
|
||||
|
||||
const SpinnerOrCancel = () => (
|
||||
<span className="spinner-or-cancel">
|
||||
<Spinner />
|
||||
<CancelIcon />
|
||||
<Icon className="cancel" src={CancelIcon} />
|
||||
</span>
|
||||
);
|
||||
|
||||
ImageIcon.displayName = 'ImageIcon';
|
||||
|
||||
function imageUploaderReducer(state, action) {
|
||||
const { type, payload } = action;
|
||||
|
||||
|
|
@ -92,9 +62,7 @@ const NativeIosV1ImageUpload = ({ uploadingImage }) => (
|
|||
{!uploadingImage && (
|
||||
<Button
|
||||
aria-label="Upload an image"
|
||||
className="mr-2 fw-normal"
|
||||
variant="ghost"
|
||||
contentType="icon-left"
|
||||
className="mr-2"
|
||||
icon={ImageIcon}
|
||||
onClick={initNativeImagePicker}
|
||||
>
|
||||
|
|
@ -256,8 +224,9 @@ const V1EditorImageUpload = ({
|
|||
/>
|
||||
) : uploadingImage ? null : (
|
||||
<Fragment>
|
||||
<label className="cursor-pointer crayons-btn crayons-btn--ghost">
|
||||
<ImageIcon /> Upload image
|
||||
<label className="cursor-pointer c-btn">
|
||||
<Icon src={ImageIcon} className="c-btn__icon crayons-icon" /> Upload
|
||||
image
|
||||
<input
|
||||
type="file"
|
||||
id="image-upload-field"
|
||||
|
|
|
|||
|
|
@ -1,21 +1,7 @@
|
|||
import { h } from 'preact';
|
||||
import PropTypes from 'prop-types';
|
||||
import { Dropdown, Button } from '@crayons';
|
||||
|
||||
const Icon = () => (
|
||||
<svg
|
||||
width="24"
|
||||
className="crayons-icon"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
role="img"
|
||||
aria-labelledby="75abcb76478519ca4eb9"
|
||||
>
|
||||
<title id="75abcb76478519ca4eb9">Post options</title>
|
||||
<path d="M12 1l9.5 5.5v11L12 23l-9.5-5.5v-11L12 1zm0 2.311L4.5 7.653v8.694l7.5 4.342 7.5-4.342V7.653L12 3.311zM12 16a4 4 0 110-8 4 4 0 010 8zm0-2a2 2 0 100-4 2 2 0 000 4z" />
|
||||
</svg>
|
||||
);
|
||||
import { Dropdown, ButtonNew as Button } from '@crayons';
|
||||
import CogIcon from '@images/cog.svg';
|
||||
|
||||
/**
|
||||
* Component comprising a trigger button and dropdown with additional post options.
|
||||
|
|
@ -73,7 +59,7 @@ export const Options = ({
|
|||
<div className="crayons-field__label color-accent-danger">
|
||||
Danger Zone
|
||||
</div>
|
||||
<Button variant="danger" onClick={onSaveDraft}>
|
||||
<Button variant="primary" destructive onClick={onSaveDraft}>
|
||||
Unpublish post
|
||||
</Button>
|
||||
</div>
|
||||
|
|
@ -83,10 +69,9 @@ export const Options = ({
|
|||
<div className="s:relative">
|
||||
<Button
|
||||
id="post-options-btn"
|
||||
variant="ghost"
|
||||
contentType="icon"
|
||||
icon={Icon}
|
||||
icon={CogIcon}
|
||||
title="Post options"
|
||||
aria-label="Post options"
|
||||
/>
|
||||
|
||||
<Dropdown
|
||||
|
|
@ -141,6 +126,7 @@ export const Options = ({
|
|||
id="post-options-done-btn"
|
||||
className="w-100"
|
||||
data-content="exit"
|
||||
variant="secondary"
|
||||
>
|
||||
Done
|
||||
</Button>
|
||||
|
|
|
|||
|
|
@ -113,8 +113,9 @@ Object {
|
|||
class="print-hidden"
|
||||
>
|
||||
<button
|
||||
class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100"
|
||||
class="c-btn c-btn--primary follow-action-button follow-user w-100"
|
||||
data-info="{\\"id\\":23289,\\"className\\":\\"User\\",\\"name\\":\\"Stella Macejkovic\\",\\"style\\":\\"full\\"}"
|
||||
type="button"
|
||||
>
|
||||
Follow
|
||||
</button>
|
||||
|
|
@ -362,8 +363,9 @@ Object {
|
|||
class="print-hidden"
|
||||
>
|
||||
<button
|
||||
class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100"
|
||||
class="c-btn c-btn--primary follow-action-button follow-user w-100"
|
||||
data-info="{\\"id\\":23289,\\"className\\":\\"User\\",\\"name\\":\\"Stella Macejkovic\\",\\"style\\":\\"full\\"}"
|
||||
type="button"
|
||||
>
|
||||
Follow
|
||||
</button>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@ import { h } from 'preact';
|
|||
import { withKnobs, text } from '@storybook/addon-knobs';
|
||||
import './dropdown-css-helper.scss';
|
||||
import notes from './dropdowns.md';
|
||||
import { Dropdown } from '@crayons';
|
||||
import { ButtonNew as Button, Dropdown } from '@crayons';
|
||||
|
||||
export default {
|
||||
title: 'Components/Dropdowns',
|
||||
|
|
@ -12,13 +12,9 @@ export default {
|
|||
|
||||
export const Default = () => (
|
||||
<div className="dropdown-trigger-container">
|
||||
<button
|
||||
id="storybook-dropdown-trigger"
|
||||
className="crayons-btn dropdown-trigger"
|
||||
aria-haspopup="true"
|
||||
>
|
||||
<Button id="storybook-dropdown-trigger" aria-haspopup="true">
|
||||
Click to trigger dropdown
|
||||
</button>
|
||||
</Button>
|
||||
<Dropdown
|
||||
triggerButtonId="storybook-dropdown-trigger"
|
||||
dropdownContentId="storybook-dropdown"
|
||||
|
|
|
|||
|
|
@ -6,8 +6,9 @@ import {
|
|||
secondarySyntaxFormatters,
|
||||
getNewTextAreaValueWithEdits,
|
||||
} from './markdownSyntaxFormatters';
|
||||
import { Overflow, Help } from './icons';
|
||||
import { Button } from '@crayons';
|
||||
import OverflowIcon from '@images/overflow-vertical.svg';
|
||||
import HelpIcon from '@images/help.svg';
|
||||
import { ButtonNew as Button, Link } from '@crayons';
|
||||
import { KeyboardShortcuts } from '@components/useKeyboardShortcuts';
|
||||
import { BREAKPOINTS, useMediaQuery } from '@components/useMediaQuery';
|
||||
import { getSelectionData } from '@utilities/textAreaUtils';
|
||||
|
|
@ -286,8 +287,6 @@ export const MarkdownToolbar = ({ textAreaId }) => {
|
|||
<Button
|
||||
key={`${controlName}-btn`}
|
||||
role={isOverflow ? 'menuitem' : 'button'}
|
||||
variant="ghost"
|
||||
contentType="icon"
|
||||
icon={icon}
|
||||
className={
|
||||
isOverflow
|
||||
|
|
@ -332,8 +331,6 @@ export const MarkdownToolbar = ({ textAreaId }) => {
|
|||
return (
|
||||
<Button
|
||||
key={`${controlName}-btn`}
|
||||
variant="ghost"
|
||||
contentType="icon"
|
||||
icon={icon}
|
||||
className="toolbar-btn mr-1"
|
||||
tabindex={index === 0 ? '0' : '-1'}
|
||||
|
|
@ -371,8 +368,6 @@ export const MarkdownToolbar = ({ textAreaId }) => {
|
|||
<span aria-hidden="true">Upload image</span>
|
||||
),
|
||||
key: 'image-btn',
|
||||
variant: 'ghost',
|
||||
contentType: 'icon',
|
||||
className: 'toolbar-btn formatter-btn mr-1',
|
||||
tabindex: '-1',
|
||||
}}
|
||||
|
|
@ -387,9 +382,7 @@ export const MarkdownToolbar = ({ textAreaId }) => {
|
|||
onKeyUp={(e) => handleToolbarButtonKeyPress(e, 'toolbar-btn')}
|
||||
aria-expanded={overflowMenuOpen ? 'true' : 'false'}
|
||||
aria-haspopup="true"
|
||||
variant="ghost"
|
||||
contentType="icon"
|
||||
icon={Overflow}
|
||||
icon={OverflowIcon}
|
||||
className="toolbar-btn ml-auto hidden m:block"
|
||||
tabindex="-1"
|
||||
aria-label="More options"
|
||||
|
|
@ -403,15 +396,13 @@ export const MarkdownToolbar = ({ textAreaId }) => {
|
|||
className="crayons-dropdown flex p-2 min-w-unset right-0 top-100"
|
||||
>
|
||||
{getSecondaryFormatterButtons(true)}
|
||||
<Button
|
||||
tagName="a"
|
||||
<Link
|
||||
block
|
||||
role="menuitem"
|
||||
url="/p/editor_guide"
|
||||
href="/p/editor_guide"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
variant="ghost"
|
||||
contentType="icon"
|
||||
icon={Help}
|
||||
icon={HelpIcon}
|
||||
className="overflow-menu-btn"
|
||||
tabindex="-1"
|
||||
aria-label="Help"
|
||||
|
|
|
|||
|
|
@ -1,185 +0,0 @@
|
|||
import { h } from 'preact';
|
||||
|
||||
export const Bold = () => (
|
||||
<svg
|
||||
className="crayons-icon"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
width="24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path d="m8 11h4.5c.663 0 1.2989-.2634 1.7678-.7322.4688-.46887.7322-1.10476.7322-1.7678s-.2634-1.29893-.7322-1.76777c-.4689-.46884-1.1048-.73223-1.7678-.73223h-4.5zm10 4.5c0 .5909-.1164 1.1761-.3425 1.7221-.2262.5459-.5577 1.042-.9755 1.4599-.4179.4178-.914.7493-1.4599.9755-.546.2261-1.1312.3425-1.7221.3425h-7.5v-16h6.5c.881.00004 1.7425.25865 2.4779.74378.7353.48512 1.3121 1.17542 1.6588 1.98529s.448 1.70369.2915 2.57062c-.1566.86691-.5641 1.66881-1.1722 2.30631.6826.3953 1.2493.9632 1.6432 1.6466.3939.6835.6011 1.4586.6008 2.2474zm-10-2.5v5h5.5c.663 0 1.2989-.2634 1.7678-.7322.4688-.4689.7322-1.1048.7322-1.7678s-.2634-1.2989-.7322-1.7678c-.4689-.4688-1.1048-.7322-1.7678-.7322z" />
|
||||
</svg>
|
||||
);
|
||||
|
||||
export const Italic = () => (
|
||||
<svg
|
||||
className="crayons-icon"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M15 20H7V18H9.927L12.043 6H9V4H17V6H14.073L11.957 18H15V20Z"
|
||||
fill="black"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
|
||||
export const Link = () => (
|
||||
<svg
|
||||
className="crayons-icon"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
width="24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path d="m18.364 15.536-1.414-1.416 1.414-1.414c.4676-.4636.8391-1.0149 1.0931-1.6224.2539-.6075.3854-1.2592.3869-1.91765.0014-.65845-.1272-1.3107-.3785-1.9193-.2513-.60861-.6204-1.16158-1.086-1.62718s-1.0186-.83464-1.6272-1.08596c-.6086-.25131-1.2608-.37994-1.9193-.37849-.6584.00144-1.3101.13292-1.9176.3869-.6075.25397-1.1589.62544-1.6224 1.09307l-1.414 1.415-1.415-1.414 1.416-1.414c1.3128-1.31282 3.0934-2.05036 4.95-2.05036s3.6372.73754 4.95 2.05036 2.0504 3.09339 2.0504 4.95-.7376 3.63721-2.0504 4.95001l-1.415 1.414zm-2.828 2.828-1.415 1.414c-1.3128 1.3128-3.0934 2.0503-4.95 2.0503-1.85661 0-3.63718-.7375-4.95-2.0503-1.31283-1.3128-2.05036-3.0934-2.05036-4.95s.73753-3.6372 2.05036-4.95001l1.415-1.414 1.414 1.416-1.414 1.41401c-.46763.4635-.8391 1.0149-1.09308 1.6224-.25397.6075-.38545 1.2592-.3869 1.9176-.00144.6585.12719 1.3107.3785 1.9193s.62036 1.1616 1.08596 1.6272c.46559.4656 1.01857.8347 1.62717 1.086.60861.2513 1.26086.3799 1.91931.3785.65845-.0015 1.31014-.133 1.91764-.3869.6075-.254 1.1588-.6255 1.6224-1.0931l1.414-1.414 1.415 1.414zm-.708-10.60701 1.415 1.415-7.071 7.07001-1.415-1.414 7.071-7.07001z" />
|
||||
</svg>
|
||||
);
|
||||
|
||||
export const OrderedList = () => (
|
||||
<svg
|
||||
className="crayons-icon"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
width="24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path d="m8 4h13v2h-13zm-3-1v3h1v1h-3v-1h1v-2h-1v-1zm-2 11v-2.5h2v-.5h-2v-1h3v2.5h-2v.5h2v1zm2 5.5h-2v-1h2v-.5h-2v-1h3v4h-3v-1h2zm3-8.5h13v2h-13zm0 7h13v2h-13z" />
|
||||
</svg>
|
||||
);
|
||||
|
||||
export const UnorderedList = () => (
|
||||
<svg
|
||||
className="crayons-icon"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
width="24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path d="m8 4h13v2h-13zm-3.5 2.5c-.39782 0-.77936-.15804-1.06066-.43934s-.43934-.66284-.43934-1.06066.15804-.77936.43934-1.06066.66284-.43934 1.06066-.43934.77936.15804 1.06066.43934.43934.66284.43934 1.06066-.15804.77936-.43934 1.06066-.66284.43934-1.06066.43934zm0 7c-.39782 0-.77936-.158-1.06066-.4393s-.43934-.6629-.43934-1.0607.15804-.7794.43934-1.0607.66284-.4393 1.06066-.4393.77936.158 1.06066.4393.43934.6629.43934 1.0607-.15804.7794-.43934 1.0607-.66284.4393-1.06066.4393zm0 6.9c-.39782 0-.77936-.158-1.06066-.4393s-.43934-.6629-.43934-1.0607.15804-.7794.43934-1.0607.66284-.4393 1.06066-.4393.77936.158 1.06066.4393.43934.6629.43934 1.0607-.15804.7794-.43934 1.0607-.66284.4393-1.06066.4393zm3.5-9.4h13v2h-13zm0 7h13v2h-13z" />
|
||||
</svg>
|
||||
);
|
||||
|
||||
export const Heading = () => (
|
||||
<svg
|
||||
className="crayons-icon"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
width="24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path d="m17 11v-7h2v17h-2v-8h-10v8h-2v-17h2v7z" />
|
||||
</svg>
|
||||
);
|
||||
|
||||
export const Quote = () => (
|
||||
<svg
|
||||
className="crayons-icon"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
width="24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path d="m4.583 17.321c-1.03-1.094-1.583-2.321-1.583-4.31 0-3.5 2.457-6.637 6.03-8.188l.893 1.378c-3.335 1.804-3.987 4.145-4.247 5.621.537-.278 1.24-.375 1.929-.311 1.804.167 3.226 1.648 3.226 3.489 0 .9283-.3687 1.8185-1.02513 2.4749-.65637.6563-1.54661 1.0251-2.47487 1.0251-1.073 0-2.099-.49-2.748-1.179zm10 0c-1.03-1.094-1.583-2.321-1.583-4.31 0-3.5 2.457-6.637 6.03-8.188l.893 1.378c-3.335 1.804-3.987 4.145-4.247 5.621.537-.278 1.24-.375 1.929-.311 1.804.167 3.226 1.648 3.226 3.489 0 .9283-.3687 1.8185-1.0251 2.4749-.6564.6563-1.5466 1.0251-2.4749 1.0251-1.073 0-2.099-.49-2.748-1.179z" />
|
||||
</svg>
|
||||
);
|
||||
|
||||
export const Code = () => (
|
||||
<svg
|
||||
className="crayons-icon"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
width="24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path d="m23 12-7.071 7.071-1.414-1.414 5.657-5.657-5.657-5.65704 1.414-1.414zm-19.172 0 5.657 5.657-1.414 1.414-7.071-7.071 7.071-7.07104 1.414 1.414z" />
|
||||
</svg>
|
||||
);
|
||||
|
||||
export const CodeBlock = () => (
|
||||
<svg
|
||||
className="crayons-icon"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
width="24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path d="m3 3h18c.2652 0 .5196.10536.7071.29289.1875.18754.2929.44189.2929.70711v16c0 .2652-.1054.5196-.2929.7071s-.4419.2929-.7071.2929h-18c-.26522 0-.51957-.1054-.70711-.2929-.18753-.1875-.29289-.4419-.29289-.7071v-16c0-.26522.10536-.51957.29289-.70711.18754-.18753.44189-.29289.70711-.29289zm1 2v14h16v-14zm15 7-3.536 3.536-1.414-1.415 2.122-2.121-2.122-2.121 1.414-1.415zm-11.172 0 2.122 2.121-1.414 1.415-3.536-3.536 3.536-3.536 1.414 1.416z" />
|
||||
</svg>
|
||||
);
|
||||
|
||||
export const Overflow = () => (
|
||||
<svg
|
||||
className="crayons-icon"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
width="24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
clip-rule="evenodd"
|
||||
d="m12 17c1.1046 0 2 .8954 2 2s-.8954 2-2 2-2-.8954-2-2 .8954-2 2-2zm0-7c1.1046 0 2 .8954 2 2s-.8954 2-2 2-2-.8954-2-2 .8954-2 2-2zm2-5c0-1.10457-.8954-2-2-2s-2 .89543-2 2 .8954 2 2 2 2-.89543 2-2z"
|
||||
fill-rule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
|
||||
export const Underline = () => (
|
||||
<svg
|
||||
className="crayons-icon"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
width="24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path d="m8 3v9c0 1.0609.42143 2.0783 1.17157 2.8284.75015.7502 1.76753 1.1716 2.82843 1.1716s2.0783-.4214 2.8284-1.1716c.7502-.7501 1.1716-1.7675 1.1716-2.8284v-9h2v9c0 1.5913-.6321 3.1174-1.7574 4.2426-1.1252 1.1253-2.6513 1.7574-4.2426 1.7574s-3.11742-.6321-4.24264-1.7574c-1.12522-1.1252-1.75736-2.6513-1.75736-4.2426v-9zm-4 17h16v2h-16z" />
|
||||
</svg>
|
||||
);
|
||||
|
||||
export const Strikethrough = () => (
|
||||
<svg
|
||||
className="crayons-icon"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
width="24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path d="m17.154 14c.23.516.346 1.09.346 1.72 0 1.342-.524 2.392-1.571 3.147-1.049.755-2.496 1.133-4.343 1.133-1.64 0-3.263-.381-4.87-1.144v-2.256c1.52.877 3.075 1.316 4.666 1.316 2.551 0 3.83-.732 3.839-2.197.0053-.297-.0494-.5921-.1607-.8675-.1114-.2754-.2771-.5256-.4873-.7355l-.12-.117h-11.453v-2h18v2h-3.846zm-4.078-3h-5.447c-.17517-.1597-.33611-.3344-.481-.522-.432-.558-.648-1.232-.648-2.026 0-1.236.466-2.287 1.397-3.153.933-.866 2.374-1.299 4.325-1.299 1.471 0 2.879.328 4.222.984v2.152c-1.2-.687-2.515-1.03-3.946-1.03-2.48 0-3.719.782-3.719 2.346 0 .42.218.786.654 1.099s.974.562 1.613.75c.62.18 1.297.414 2.03.699z" />
|
||||
</svg>
|
||||
);
|
||||
|
||||
export const Divider = () => (
|
||||
<svg
|
||||
className="crayons-icon"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
width="24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<g>
|
||||
<path d="m2 11h6v2h-6z" />
|
||||
<path d="m2 11h6v2h-6z" />
|
||||
<path d="m9 11h6v2h-6z" />
|
||||
<path d="m16 11h6v2h-6z" />
|
||||
<g clip-rule="evenodd" fill-rule="evenodd">
|
||||
<path d="m12 6.58574-2.29288-2.29289-1.41421 1.41421 3.70709 3.70711 3.7071-3.70711-1.4142-1.41421z" />
|
||||
<path d="m12 17.4143-2.29288 2.2929-1.41421-1.4143 3.70709-3.7071 3.7071 3.7071-1.4142 1.4143z" />
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
);
|
||||
|
||||
export const Help = () => (
|
||||
<svg
|
||||
className="crayons-icon"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
width="24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path d="m12 22c-5.523 0-10-4.477-10-10s4.477-10 10-10 10 4.477 10 10-4.477 10-10 10zm0-2c2.1217 0 4.1566-.8429 5.6569-2.3431 1.5002-1.5003 2.3431-3.5352 2.3431-5.6569 0-2.12173-.8429-4.15656-2.3431-5.65685-1.5003-1.5003-3.5352-2.34315-5.6569-2.34315-2.12173 0-4.15656.84285-5.65685 2.34315-1.5003 1.50029-2.34315 3.53512-2.34315 5.65685 0 2.1217.84285 4.1566 2.34315 5.6569 1.50029 1.5002 3.53512 2.3431 5.65685 2.3431zm-1-5h2v2h-2zm2-1.645v.645h-2v-1.5c0-.2652.1054-.5196.2929-.7071s.4419-.2929.7071-.2929c.2841 0 .5623-.0807.8023-.2327.24-.1519.432-.3689.5535-.6257s.1676-.5428.1329-.82476c-.0347-.28195-.1487-.54826-.3289-.76793-.1801-.21967-.4189-.38368-.6886-.47294s-.5592-.1001-.8348-.03126c-.2756.06883-.526.21452-.722.42011-.1961.20558-.3297.46261-.3854.74118l-1.962-.393c.12163-.60792.40251-1.17263.81392-1.63641.41141-.46379.93858-.81001 1.52768-1.00327s1.2189-.22663 1.8251-.09671c.6062.12993 1.167.4185 1.6251.83621.4581.41772.7971.94959.9823 1.54124.1852.59166.21 1.22184.0718 1.82624s-.4344 1.1612-.8584 1.6136c-.4239.4523-.9604.784-1.5545.9611z" />
|
||||
</svg>
|
||||
);
|
||||
|
|
@ -1,4 +1,5 @@
|
|||
/* global Runtime */
|
||||
import { h } from 'preact';
|
||||
import {
|
||||
getLastIndexOfCharacter,
|
||||
getNextIndexOfCharacter,
|
||||
|
|
@ -6,20 +7,19 @@ import {
|
|||
getNumberOfNewLinesPrecedingSelection,
|
||||
getSelectionData,
|
||||
} from '../../utilities/textAreaUtils';
|
||||
import {
|
||||
Bold,
|
||||
Italic,
|
||||
Link,
|
||||
OrderedList,
|
||||
UnorderedList,
|
||||
Heading,
|
||||
Quote,
|
||||
Code,
|
||||
CodeBlock,
|
||||
Underline,
|
||||
Strikethrough,
|
||||
Divider,
|
||||
} from './icons';
|
||||
import BoldIcon from '@images/bold.svg';
|
||||
import ItalicIcon from '@images/italic.svg';
|
||||
import LinkIcon from '@images/link.svg';
|
||||
import OrderedListIcon from '@images/list-ordered.svg';
|
||||
import UnorderedListIcon from '@images/list-unordered.svg';
|
||||
import HeadingIcon from '@images/heading.svg';
|
||||
import QuoteIcon from '@images/quote.svg';
|
||||
import CodeIcon from '@images/code.svg';
|
||||
import CodeBlockIcon from '@images/codeblock.svg';
|
||||
import UnderlineIcon from '@images/underline.svg';
|
||||
import StrikethroughIcon from '@images/strikethrough.svg';
|
||||
import DividerIcon from '@images/divider.svg';
|
||||
import { Icon } from '@crayons';
|
||||
|
||||
const ORDERED_LIST_ITEM_REGEX = /^\d+\.\s+.*/;
|
||||
const MARKDOWN_LINK_REGEX =
|
||||
|
|
@ -405,7 +405,7 @@ export const getNewTextAreaValueWithEdits = ({
|
|||
|
||||
export const coreSyntaxFormatters = {
|
||||
bold: {
|
||||
icon: Bold,
|
||||
icon: () => <Icon src={BoldIcon} />,
|
||||
label: 'Bold',
|
||||
getKeyboardShortcut: () => {
|
||||
const modifier = Runtime.getOSKeyboardModifierKeyString();
|
||||
|
|
@ -425,7 +425,7 @@ export const coreSyntaxFormatters = {
|
|||
},
|
||||
},
|
||||
italic: {
|
||||
icon: Italic,
|
||||
icon: () => <Icon src={ItalicIcon} />,
|
||||
label: 'Italic',
|
||||
getKeyboardShortcut: () => {
|
||||
const modifier = Runtime.getOSKeyboardModifierKeyString();
|
||||
|
|
@ -445,7 +445,7 @@ export const coreSyntaxFormatters = {
|
|||
},
|
||||
},
|
||||
link: {
|
||||
icon: Link,
|
||||
icon: () => <Icon src={LinkIcon} />,
|
||||
label: 'Link',
|
||||
getKeyboardShortcut: () => {
|
||||
const modifier = Runtime.getOSKeyboardModifierKeyString();
|
||||
|
|
@ -504,7 +504,7 @@ export const coreSyntaxFormatters = {
|
|||
},
|
||||
},
|
||||
orderedList: {
|
||||
icon: OrderedList,
|
||||
icon: () => <Icon src={OrderedListIcon} />,
|
||||
label: 'Ordered list',
|
||||
getFormatting: ({ selectionStart, selectionEnd, value }) => {
|
||||
const { selectedText, textBeforeSelection } = getSelectionData({
|
||||
|
|
@ -600,7 +600,7 @@ export const coreSyntaxFormatters = {
|
|||
},
|
||||
},
|
||||
unorderedList: {
|
||||
icon: UnorderedList,
|
||||
icon: () => <Icon src={UnorderedListIcon} />,
|
||||
label: 'Unordered list',
|
||||
getFormatting: ({ selectionStart, selectionEnd, value }) => {
|
||||
return undoOrAddFormattingForMultilineSyntax({
|
||||
|
|
@ -612,7 +612,7 @@ export const coreSyntaxFormatters = {
|
|||
},
|
||||
},
|
||||
heading: {
|
||||
icon: Heading,
|
||||
icon: () => <Icon src={HeadingIcon} />,
|
||||
label: 'Heading',
|
||||
getFormatting: ({ selectionStart, selectionEnd, value }) => {
|
||||
let currentLineSelectionStart = selectionStart;
|
||||
|
|
@ -680,7 +680,7 @@ export const coreSyntaxFormatters = {
|
|||
},
|
||||
},
|
||||
quote: {
|
||||
icon: Quote,
|
||||
icon: () => <Icon src={QuoteIcon} />,
|
||||
label: 'Quote',
|
||||
getFormatting: ({ selectionStart, selectionEnd, value }) =>
|
||||
undoOrAddFormattingForMultilineSyntax({
|
||||
|
|
@ -691,7 +691,7 @@ export const coreSyntaxFormatters = {
|
|||
}),
|
||||
},
|
||||
code: {
|
||||
icon: Code,
|
||||
icon: () => <Icon src={CodeIcon} />,
|
||||
label: 'Code',
|
||||
getFormatting: ({ selectionStart, selectionEnd, value }) =>
|
||||
undoOrAddFormattingForInlineSyntax({
|
||||
|
|
@ -703,7 +703,7 @@ export const coreSyntaxFormatters = {
|
|||
}),
|
||||
},
|
||||
codeBlock: {
|
||||
icon: CodeBlock,
|
||||
icon: () => <Icon src={CodeBlockIcon} />,
|
||||
label: 'Code block',
|
||||
getFormatting: ({ selectionStart, selectionEnd, value }) =>
|
||||
undoOrAddFormattingForMultilineSyntax({
|
||||
|
|
@ -718,7 +718,7 @@ export const coreSyntaxFormatters = {
|
|||
|
||||
export const secondarySyntaxFormatters = {
|
||||
underline: {
|
||||
icon: Underline,
|
||||
icon: () => <Icon src={UnderlineIcon} />,
|
||||
label: 'Underline',
|
||||
getKeyboardShortcut: () => {
|
||||
const modifier = Runtime.getOSKeyboardModifierKeyString();
|
||||
|
|
@ -737,7 +737,7 @@ export const secondarySyntaxFormatters = {
|
|||
}),
|
||||
},
|
||||
strikethrough: {
|
||||
icon: Strikethrough,
|
||||
icon: () => <Icon src={StrikethroughIcon} />,
|
||||
label: 'Strikethrough',
|
||||
getKeyboardShortcut: () => {
|
||||
const modifier = Runtime.getOSKeyboardModifierKeyString();
|
||||
|
|
@ -756,7 +756,7 @@ export const secondarySyntaxFormatters = {
|
|||
}),
|
||||
},
|
||||
divider: {
|
||||
icon: Divider,
|
||||
icon: () => <Icon src={DividerIcon} />,
|
||||
label: 'Line divider',
|
||||
getFormatting: ({ selectionStart, selectionEnd, value }) =>
|
||||
undoOrAddFormattingForMultilineSyntax({
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
import { h, Component } from 'preact';
|
||||
import PropTypes from 'prop-types';
|
||||
import { Button } from '@crayons';
|
||||
import { ButtonNew as Button } from '@crayons';
|
||||
|
||||
export class SingleRepo extends Component {
|
||||
constructor(props) {
|
||||
|
|
@ -73,7 +73,6 @@ export class SingleRepo extends Component {
|
|||
{this.forkLabel()}
|
||||
</div>
|
||||
<Button
|
||||
className="crayons-btn"
|
||||
id={`github-repo-button-${githubIdCode}`}
|
||||
onClick={this.submitRepo}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -1,21 +1,21 @@
|
|||
import PropTypes from 'prop-types';
|
||||
import { h } from 'preact';
|
||||
import { Button } from '@crayons';
|
||||
import { Link } from '@crayons';
|
||||
|
||||
export const ActionButtons = ({ isDraft, editUrl, deleteConfirmUrl }) => {
|
||||
return (
|
||||
<div className="listing-row-actions crayons-btn-actions">
|
||||
<div className="listing-row-actions flex">
|
||||
{isDraft && (
|
||||
<Button tagName="a" url={editUrl}>
|
||||
<Link block href={editUrl}>
|
||||
View draft
|
||||
</Button>
|
||||
</Link>
|
||||
)}
|
||||
<Button tagName="a" url={editUrl}>
|
||||
<Link block href={editUrl}>
|
||||
Edit
|
||||
</Button>
|
||||
<Button variant="danger" tagName="a" url={deleteConfirmUrl}>
|
||||
</Link>
|
||||
<Link block href={deleteConfirmUrl}>
|
||||
Delete
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -2,7 +2,8 @@ import { h, render } from 'preact';
|
|||
import { useState, useRef } from 'preact/hooks';
|
||||
import PropTypes from 'prop-types';
|
||||
import { request } from '../utilities/http';
|
||||
import { Button } from '@crayons/Button/Button';
|
||||
import { ButtonNew as Button, Link } from '@crayons';
|
||||
import RemoveIcon from '@images/x.svg';
|
||||
|
||||
async function confirmFlagUser({ reactableType, category, reactableId }) {
|
||||
const body = JSON.stringify({
|
||||
|
|
@ -105,21 +106,11 @@ export function FlagUserModal({ modCenterArticleUrl, authorId }) {
|
|||
<div class="crayons-modal__box">
|
||||
<header class="crayons-modal__box__header flag-user-modal-header">
|
||||
<h2 class="crayons-modal__box__header__title">Flag User</h2>
|
||||
<button
|
||||
type="button"
|
||||
class="crayons-btn crayons-btn--icon crayons-btn--ghost modal-header-close-icon"
|
||||
<Button
|
||||
icon={RemoveIcon}
|
||||
className="inline-flex"
|
||||
onClick={toggleFlagUserModal}
|
||||
>
|
||||
<svg
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
class="crayons-icon"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path d="M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636l4.95 4.95z" />
|
||||
</svg>
|
||||
</button>
|
||||
/>
|
||||
</header>
|
||||
<div class="crayons-modal__box__body">
|
||||
<div class="grid gap-4">
|
||||
|
|
@ -153,20 +144,22 @@ export function FlagUserModal({ modCenterArticleUrl, authorId }) {
|
|||
</label>
|
||||
</div>
|
||||
<p>
|
||||
<a
|
||||
<Link
|
||||
variant="branded"
|
||||
href={`/report-abuse?url=${
|
||||
modCenterArticleUrl
|
||||
? `${document.location.origin}${modCenterArticleUrl}`
|
||||
: document.location
|
||||
}`}
|
||||
className="crayons-link crayons-link--brand"
|
||||
>
|
||||
Report other inappropriate conduct
|
||||
</a>
|
||||
</Link>
|
||||
</p>
|
||||
<div>
|
||||
<Button
|
||||
class="crayons-btn crayons-btn--danger mr-2"
|
||||
destructive
|
||||
variant="primary"
|
||||
className="mr-2"
|
||||
id="confirm-flag-user-action"
|
||||
onClick={(_event) => {
|
||||
const {
|
||||
|
|
@ -181,7 +174,6 @@ export function FlagUserModal({ modCenterArticleUrl, authorId }) {
|
|||
Confirm action
|
||||
</Button>
|
||||
<Button
|
||||
class="crayons-btn crayons-btn--secondary"
|
||||
id="cancel-flag-user-action"
|
||||
onClick={toggleFlagUserModal}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
import { h } from 'preact';
|
||||
import { ButtonNew as Button } from '@crayons';
|
||||
|
||||
export const MinimalProfilePreviewCard = ({
|
||||
triggerId,
|
||||
|
|
@ -40,8 +41,9 @@ export const MinimalProfilePreviewCard = ({
|
|||
</a>
|
||||
</div>
|
||||
<div class="print-hidden">
|
||||
<button
|
||||
class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100"
|
||||
<Button
|
||||
variant="primary"
|
||||
className="follow-action-button follow-user w-100"
|
||||
data-info={JSON.stringify({
|
||||
id: userId,
|
||||
className: 'User',
|
||||
|
|
@ -50,7 +52,7 @@ export const MinimalProfilePreviewCard = ({
|
|||
})}
|
||||
>
|
||||
Follow
|
||||
</button>
|
||||
</Button>
|
||||
</div>
|
||||
<div
|
||||
class="author-preview-metadata-container"
|
||||
|
|
|
|||
|
|
@ -7,16 +7,10 @@
|
|||
// handler or `e.stopPropagation` are just ignored
|
||||
import { h } from 'preact';
|
||||
import PropTypes from 'prop-types';
|
||||
import { Button } from '@crayons';
|
||||
import { ButtonNew as Button } from '@crayons';
|
||||
|
||||
export const ItemListItemArchiveButton = ({ text, onClick }) => (
|
||||
<Button
|
||||
onClick={onClick}
|
||||
aria-label="Archive item"
|
||||
role="button"
|
||||
variant="ghost"
|
||||
size="s"
|
||||
>
|
||||
<Button className="spec__archive-button" onClick={onClick}>
|
||||
{text}
|
||||
</Button>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@ import { TagList } from './components/TagList';
|
|||
import { MediaQuery } from '@components/MediaQuery';
|
||||
import { BREAKPOINTS } from '@components/useMediaQuery';
|
||||
import { debounceAction } from '@utilities/debounceAction';
|
||||
import { Button } from '@crayons';
|
||||
import { ButtonNew as Button, Link } from '@crayons';
|
||||
import { request } from '@utilities/http';
|
||||
|
||||
const NO_RESULTS_WITH_FILTER_MESSAGE = 'Nothing with this filter 🤔';
|
||||
|
|
@ -197,16 +197,19 @@ export class ReadingList extends Component {
|
|||
{isStatusViewValid ? 'Reading list' : 'Archive'}
|
||||
{` (${itemsTotal})`}
|
||||
</h1>
|
||||
<Button
|
||||
<Link
|
||||
onClick={(e) => this.toggleStatusView(e)}
|
||||
href={
|
||||
isStatusViewValid
|
||||
? READING_LIST_ARCHIVE_PATH
|
||||
: READING_LIST_PATH
|
||||
}
|
||||
className="whitespace-nowrap ml-auto s:w-auto"
|
||||
variant="outlined"
|
||||
url={READING_LIST_ARCHIVE_PATH}
|
||||
tagName="a"
|
||||
block
|
||||
data-no-instant
|
||||
>
|
||||
{isStatusViewValid ? 'View archive' : 'View reading list'}
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
<fieldset className="m:flex justify-end s:pl-2 w-100 s:w-auto">
|
||||
<legend className="hidden">Filter</legend>
|
||||
|
|
@ -258,11 +261,7 @@ export class ReadingList extends Component {
|
|||
/>
|
||||
{showLoadMoreButton && (
|
||||
<div className="flex justify-center my-2">
|
||||
<Button
|
||||
onClick={this.loadNextPage}
|
||||
variant="secondary"
|
||||
className="w-max"
|
||||
>
|
||||
<Button onClick={this.loadNextPage} className="w-max">
|
||||
Load more
|
||||
</Button>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,9 @@
|
|||
/* global Runtime */
|
||||
|
||||
import { h } from 'preact';
|
||||
import { ButtonNew as Button, Icon } from '@crayons';
|
||||
import CloseIcon from '@images/x.svg';
|
||||
import LogoForem from '@images/logo-forem-app.svg';
|
||||
|
||||
const BANNER_DISMISS_KEY = 'runtimeBannerDismissed';
|
||||
|
||||
|
|
@ -91,49 +94,18 @@ export const RuntimeBanner = () => {
|
|||
class="flex items-center flex-1"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<svg
|
||||
class="crayons-icon crayons-icon--default"
|
||||
width="32"
|
||||
height="32"
|
||||
viewBox="0 0 32 32"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M16.44 23.363a.5.5 0 0 1 .59.286c.712 1.893 2.765 2.915 4.713 2.393 1.938-.553 3.206-2.465 2.876-4.46a.474.474 0 0 1 .368-.543l1.628-.437a.508.508 0 0 1 .607.35l.008.032c.642 3.416-1.444 6.743-4.778 7.705-3.352.898-6.813-.909-7.933-4.196a.488.488 0 0 1 .31-.63l.032-.009 1.579-.491z"
|
||||
fill="#E9F0E8"
|
||||
/>
|
||||
<path
|
||||
d="M12.828 11.415a.5.5 0 0 1-.59-.287c-.713-1.893-2.766-2.915-4.713-2.393-1.971.562-3.206 2.465-2.877 4.461a.474.474 0 0 1-.367.543l-1.628.436a.508.508 0 0 1-.607-.35l-.009-.032c-.642-3.416 1.444-6.742 4.779-7.704 3.352-.898 6.812.908 7.933 4.196a.488.488 0 0 1-.31.63l-.032.008-1.58.492z"
|
||||
fill="#4CFCA7"
|
||||
/>
|
||||
<path
|
||||
d="m22.142 8.509-1.691.453a.508.508 0 0 1-.607-.35l-.692-2.582a.508.508 0 0 1 .35-.607l1.724-.462a.508.508 0 0 0 .35-.606l-.435-1.626a.486.486 0 0 0-.607-.35l-4.269 1.178a.508.508 0 0 0-.35.606l.563 2.105.692 2.582.692 2.582.026.096L19.81 18.7c.068.255.32.427.575.359l1.596-.428a.508.508 0 0 0 .35-.607l-1.597-5.961c-.051-.192.042-.353.234-.405l1.884-.504a.508.508 0 0 0 .35-.607l-.435-1.626c-.086-.319-.37-.482-.625-.413zm2.155-.133a.526.526 0 0 1 .255-.581c.746-.405 1.157-1.301.934-2.13-.222-.83-.993-1.408-1.834-1.354a.463.463 0 0 1-.502-.344l-.436-1.626c-.068-.255.095-.538.342-.638l.064-.017a4.412 4.412 0 0 1 4.92 3.295c.59 2.2-.511 4.476-2.605 5.345a.513.513 0 0 1-.654-.27l-.017-.063-.467-1.617z"
|
||||
fill="#FBC1F5"
|
||||
/>
|
||||
</svg>
|
||||
<Icon src={LogoForem} native />
|
||||
<div class="flex flex-col pl-3">
|
||||
<span>Forem</span>
|
||||
<span>Open with the Forem app</span>
|
||||
</div>
|
||||
</a>
|
||||
<button
|
||||
<Button
|
||||
onClick={dismissBanner}
|
||||
type="button"
|
||||
class="runtime-banner__dismiss crayons-btn crayons-btn--ghost crayons-btn--icon crayons-btn--inverted crayons-btn--s"
|
||||
>
|
||||
<svg
|
||||
class="crayons-icon"
|
||||
title="Dismiss banner: Open with the Forem app"
|
||||
aria="true"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path d="M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636l4.95 4.95z" />
|
||||
</svg>
|
||||
</button>
|
||||
class="runtime-banner__dismiss color-base-inverted"
|
||||
icon={CloseIcon}
|
||||
tooltip="Dismiss banner"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -18,8 +18,8 @@ describe('Upload image', () => {
|
|||
});
|
||||
|
||||
// Confirm the UI has updated to show the uploaded state
|
||||
cy.findByRole('button', {
|
||||
name: 'Copy Markdown for imageCopy...',
|
||||
cy.findByRole('button', {
|
||||
name: 'Copy markdown for image',
|
||||
}).should('exist');
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -83,7 +83,7 @@ describe('Reading List Archive', () => {
|
|||
cy.get('@main')
|
||||
.contains('Test Article 1')
|
||||
.parents('article')
|
||||
.findByLabelText(/^Archive item$/i)
|
||||
.findByRole('button', { name: /^archive$/i })
|
||||
.click();
|
||||
|
||||
cy.wait('@archiveItem');
|
||||
|
|
|
|||
|
|
@ -81,7 +81,7 @@ describe('Reading List Archive', () => {
|
|||
cy.get('@main')
|
||||
.contains('Test Article 1')
|
||||
.parents('article')
|
||||
.findByLabelText(/^Archive item$/i)
|
||||
.findByRole('button', { name: /^unarchive$/i })
|
||||
.click();
|
||||
|
||||
cy.wait('@unarchiveItem');
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue