diff --git a/app/assets/images/bold.svg b/app/assets/images/bold.svg new file mode 100644 index 000000000..a995df678 --- /dev/null +++ b/app/assets/images/bold.svg @@ -0,0 +1,3 @@ + + + diff --git a/app/assets/images/code.svg b/app/assets/images/code.svg new file mode 100644 index 000000000..d3e5ca776 --- /dev/null +++ b/app/assets/images/code.svg @@ -0,0 +1,3 @@ + + + diff --git a/app/assets/images/codeblock.svg b/app/assets/images/codeblock.svg new file mode 100644 index 000000000..5ff605dfb --- /dev/null +++ b/app/assets/images/codeblock.svg @@ -0,0 +1,3 @@ + + + diff --git a/app/assets/images/divider.svg b/app/assets/images/divider.svg new file mode 100644 index 000000000..9c3512068 --- /dev/null +++ b/app/assets/images/divider.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/app/assets/images/heading.svg b/app/assets/images/heading.svg new file mode 100644 index 000000000..4c92b5265 --- /dev/null +++ b/app/assets/images/heading.svg @@ -0,0 +1,3 @@ + + + diff --git a/app/assets/images/help.svg b/app/assets/images/help.svg new file mode 100644 index 000000000..090929cb4 --- /dev/null +++ b/app/assets/images/help.svg @@ -0,0 +1,3 @@ + + + diff --git a/app/assets/images/italic.svg b/app/assets/images/italic.svg new file mode 100644 index 000000000..2dd3e23be --- /dev/null +++ b/app/assets/images/italic.svg @@ -0,0 +1,3 @@ + + + diff --git a/app/assets/images/link.svg b/app/assets/images/link.svg index 242514e93..ba80f26b4 100644 --- a/app/assets/images/link.svg +++ b/app/assets/images/link.svg @@ -1,3 +1,3 @@ - - + + diff --git a/app/assets/images/list-ordered.svg b/app/assets/images/list-ordered.svg new file mode 100644 index 000000000..c324eae6b --- /dev/null +++ b/app/assets/images/list-ordered.svg @@ -0,0 +1,3 @@ + + + diff --git a/app/assets/images/list-unordered.svg b/app/assets/images/list-unordered.svg new file mode 100644 index 000000000..c9473c134 --- /dev/null +++ b/app/assets/images/list-unordered.svg @@ -0,0 +1,3 @@ + + + diff --git a/app/assets/images/overflow-vertical.svg b/app/assets/images/overflow-vertical.svg new file mode 100644 index 000000000..2545989d1 --- /dev/null +++ b/app/assets/images/overflow-vertical.svg @@ -0,0 +1,3 @@ + + + diff --git a/app/assets/images/quote.svg b/app/assets/images/quote.svg new file mode 100644 index 000000000..aced3dec1 --- /dev/null +++ b/app/assets/images/quote.svg @@ -0,0 +1,3 @@ + + + diff --git a/app/assets/images/strikethrough.svg b/app/assets/images/strikethrough.svg new file mode 100644 index 000000000..c2f6e087d --- /dev/null +++ b/app/assets/images/strikethrough.svg @@ -0,0 +1,3 @@ + + + diff --git a/app/assets/images/underline.svg b/app/assets/images/underline.svg new file mode 100644 index 000000000..27c6b5717 --- /dev/null +++ b/app/assets/images/underline.svg @@ -0,0 +1,3 @@ + + + diff --git a/app/assets/stylesheets/components/buttons.scss b/app/assets/stylesheets/components/buttons.scss index 3de9f4d60..f21b1f221 100644 --- a/app/assets/stylesheets/components/buttons.scss +++ b/app/assets/stylesheets/components/buttons.scss @@ -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); diff --git a/app/javascript/article-form/components/ClipboardButton.jsx b/app/javascript/article-form/components/ClipboardButton.jsx index bdc4e76f8..9a3376fe1 100644 --- a/app/javascript/article-form/components/ClipboardButton.jsx +++ b/app/javascript/article-form/components/ClipboardButton.jsx @@ -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 = () => ( - - Copy Markdown for image - - -); - -CopyIcon.displayName = 'CopyIcon'; - export const ClipboardButton = ({ onCopy, imageUrls, @@ -47,9 +31,8 @@ export const ClipboardButton = ({ /> diff --git a/app/javascript/article-form/components/Close.jsx b/app/javascript/article-form/components/Close.jsx index da65964ca..385d073bc 100644 --- a/app/javascript/article-form/components/Close.jsx +++ b/app/javascript/article-form/components/Close.jsx @@ -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 = () => ( - - Close the editor - - - ); - return (
); diff --git a/app/javascript/article-form/components/EditorActions.jsx b/app/javascript/article-form/components/EditorActions.jsx index 21be7fb09..cafbbebc1 100644 --- a/app/javascript/article-form/components/EditorActions.jsx +++ b/app/javascript/article-form/components/EditorActions.jsx @@ -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 (
- {!(published || isVersion1) && ( - )} @@ -55,10 +60,8 @@ export const EditorActions = ({ {edited && ( diff --git a/app/javascript/article-form/components/ImageUploader.jsx b/app/javascript/article-form/components/ImageUploader.jsx index 75c0d4b60..491d19440 100644 --- a/app/javascript/article-form/components/ImageUploader.jsx +++ b/app/javascript/article-form/components/ImageUploader.jsx @@ -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 = () => ( - -); - -const CancelIcon = () => ( - -); +import { ButtonNew as Button, Spinner, Icon } from '@crayons'; +import ImageIcon from '@images/image.svg'; +import CancelIcon from '@images/x.svg'; const SpinnerOrCancel = () => ( - + ); -ImageIcon.displayName = 'ImageIcon'; - function imageUploaderReducer(state, action) { const { type, payload } = action; @@ -92,9 +62,7 @@ const NativeIosV1ImageUpload = ({ uploadingImage }) => ( {!uploadingImage && (
@@ -83,10 +69,9 @@ export const Options = ({
diff --git a/app/javascript/articles/__tests__/__snapshots__/Article.test.jsx.snap b/app/javascript/articles/__tests__/__snapshots__/Article.test.jsx.snap index eed77eb7a..b0da178da 100644 --- a/app/javascript/articles/__tests__/__snapshots__/Article.test.jsx.snap +++ b/app/javascript/articles/__tests__/__snapshots__/Article.test.jsx.snap @@ -113,8 +113,9 @@ Object { class="print-hidden" > @@ -362,8 +363,9 @@ Object { class="print-hidden" > diff --git a/app/javascript/crayons/Dropdown/__stories__/Dropdown.stories.jsx b/app/javascript/crayons/Dropdown/__stories__/Dropdown.stories.jsx index 42bf5c386..273de9b5a 100644 --- a/app/javascript/crayons/Dropdown/__stories__/Dropdown.stories.jsx +++ b/app/javascript/crayons/Dropdown/__stories__/Dropdown.stories.jsx @@ -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 = () => (
- + {
+ )} - - +
); }; diff --git a/app/javascript/packs/flagUserModal.jsx b/app/javascript/packs/flagUserModal.jsx index 7cc8dbf88..e3a0a3413 100644 --- a/app/javascript/packs/flagUserModal.jsx +++ b/app/javascript/packs/flagUserModal.jsx @@ -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 }) {

Flag User

- + />
@@ -153,20 +144,22 @@ export function FlagUserModal({ modCenterArticleUrl, authorId }) {

- Report other inappropriate conduct - +

- +
( - ); diff --git a/app/javascript/readingList/readingList.jsx b/app/javascript/readingList/readingList.jsx index 66c892991..7f8acffe3 100644 --- a/app/javascript/readingList/readingList.jsx +++ b/app/javascript/readingList/readingList.jsx @@ -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})`} - +
Filter @@ -258,11 +261,7 @@ export class ReadingList extends Component { /> {showLoadMoreButton && (
-
diff --git a/app/javascript/runtimeBanner/RuntimeBanner.jsx b/app/javascript/runtimeBanner/RuntimeBanner.jsx index 40e25a583..eae65af85 100644 --- a/app/javascript/runtimeBanner/RuntimeBanner.jsx +++ b/app/javascript/runtimeBanner/RuntimeBanner.jsx @@ -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" > - - - - - +
Forem Open with the Forem app
- + class="runtime-banner__dismiss color-base-inverted" + icon={CloseIcon} + tooltip="Dismiss banner" + />
); }; diff --git a/cypress/integration/seededFlows/publishingFlows/uploadImage.spec.js b/cypress/integration/seededFlows/publishingFlows/uploadImage.spec.js index 98c81c339..01e40cc61 100644 --- a/cypress/integration/seededFlows/publishingFlows/uploadImage.spec.js +++ b/cypress/integration/seededFlows/publishingFlows/uploadImage.spec.js @@ -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'); }); }); diff --git a/cypress/integration/seededFlows/readingListFlows/readingList.spec.js b/cypress/integration/seededFlows/readingListFlows/readingList.spec.js index bbe7d27b5..7f0fbf3db 100644 --- a/cypress/integration/seededFlows/readingListFlows/readingList.spec.js +++ b/cypress/integration/seededFlows/readingListFlows/readingList.spec.js @@ -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'); diff --git a/cypress/integration/seededFlows/readingListFlows/readingListArchive.spec.js b/cypress/integration/seededFlows/readingListFlows/readingListArchive.spec.js index 39e15c989..fa8f37086 100644 --- a/cypress/integration/seededFlows/readingListFlows/readingListArchive.spec.js +++ b/cypress/integration/seededFlows/readingListFlows/readingListArchive.spec.js @@ -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');