From 319f1fb8d872c2c27dee0606fc6254c969298b98 Mon Sep 17 00:00:00 2001 From: Jasper Kang Date: Wed, 7 Jul 2021 16:32:39 +1200 Subject: [PATCH 01/23] [not verified] init jetpack-components 0.0.2 From 72c7d561c293bc95f0a7b5825c120d4398a31760 Mon Sep 17 00:00:00 2001 From: Jasper Kang Date: Wed, 7 Jul 2021 13:54:20 +1200 Subject: [PATCH 02/23] [not verified] a8c title svg component --- .../components/a8c-svg-title/README.md | 16 ++++++++ .../components/a8c-svg-title/index.jsx | 39 +++++++++++++++++++ .../a8c-svg-title/test/component.jsx | 33 ++++++++++++++++ projects/js-packages/components/index.jsx | 1 + 4 files changed, 89 insertions(+) create mode 100644 projects/js-packages/components/components/a8c-svg-title/README.md create mode 100644 projects/js-packages/components/components/a8c-svg-title/index.jsx create mode 100644 projects/js-packages/components/components/a8c-svg-title/test/component.jsx diff --git a/projects/js-packages/components/components/a8c-svg-title/README.md b/projects/js-packages/components/components/a8c-svg-title/README.md new file mode 100644 index 0000000000000..15d0c02bbdd11 --- /dev/null +++ b/projects/js-packages/components/components/a8c-svg-title/README.md @@ -0,0 +1,16 @@ +# A8C SVG Title + +Component that renders the stylish `AN AUTOMATTIC AIRLINE`. +It takes width and height properties but defaults to 32px in height. + +#### How to use: + +```js + +``` + +#### Props + +- `className`: String - (default: `jp-a8c-svg-title`) the class name set on the SVG element. +- `height`: Number - (default: 8) set the height of the title. +- `width`: Number - (optional) set the width of the title. diff --git a/projects/js-packages/components/components/a8c-svg-title/index.jsx b/projects/js-packages/components/components/a8c-svg-title/index.jsx new file mode 100644 index 0000000000000..85d74322d4470 --- /dev/null +++ b/projects/js-packages/components/components/a8c-svg-title/index.jsx @@ -0,0 +1,39 @@ +/** + * External dependencies + */ +import React from 'react'; + +/** + * A8cSvgTitle component definition. + * + * @param {object} props - Component properties. + * @param {string} props.href - Link URL. + * @param {string} props.title - Title for SVG. + * @param {number} props.height - height for SVG. + * @returns {React.Component} A8cSvgTitle component. + */ +export default function A8cSvgTitle( { + href = 'https://www.automattic.com', + title = 'An Automattic Airline', + height = 8, + ...otherProps +} ) { + return ( + + + { title } + + + + + + ); +} diff --git a/projects/js-packages/components/components/a8c-svg-title/test/component.jsx b/projects/js-packages/components/components/a8c-svg-title/test/component.jsx new file mode 100644 index 0000000000000..c4602525dc54d --- /dev/null +++ b/projects/js-packages/components/components/a8c-svg-title/test/component.jsx @@ -0,0 +1,33 @@ +/** + * External dependencies + */ +import React from 'react'; +import { expect } from 'chai'; +import { shallow } from 'enzyme'; +import ShallowRenderer from 'react-test-renderer/shallow'; + +/** + * Internal dependencies + */ +import A8cSvgTitle from '../index'; + +describe( 'A8cSvgTitle', () => { + const testProps = { + className: 'sample-classname', + }; + + describe( 'Render the A8cSvgTitle component', () => { + const renderer = new ShallowRenderer(); + renderer.render( ); + + const wrapper = shallow( renderer.getRenderOutput() ); + + it( 'component exists', () => { + expect( wrapper.find( 'A8cSvgTitle' ) ).to.exist; + } ); + + it( 'validate the class name', () => { + expect( wrapper.hasClass( 'sample-classname' ) ).to.equal( true ); + } ); + } ); +} ); diff --git a/projects/js-packages/components/index.jsx b/projects/js-packages/components/index.jsx index ca220cf206987..ccf364cffcbde 100644 --- a/projects/js-packages/components/index.jsx +++ b/projects/js-packages/components/index.jsx @@ -15,3 +15,4 @@ Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ export { default as JetpackLogo } from './components/jetpack-logo'; +export { default as A8cSvgTitle } from './components/a8c-svg-title'; From ec845dfe587592378585c46f8ad2952672affba8 Mon Sep 17 00:00:00 2001 From: Jasper Kang Date: Wed, 7 Jul 2021 13:59:38 +1200 Subject: [PATCH 03/23] [not verified] set svg size smaller --- .../js-packages/components/components/a8c-svg-title/index.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/js-packages/components/components/a8c-svg-title/index.jsx b/projects/js-packages/components/components/a8c-svg-title/index.jsx index 85d74322d4470..6fab9e1dea235 100644 --- a/projects/js-packages/components/components/a8c-svg-title/index.jsx +++ b/projects/js-packages/components/components/a8c-svg-title/index.jsx @@ -15,7 +15,7 @@ import React from 'react'; export default function A8cSvgTitle( { href = 'https://www.automattic.com', title = 'An Automattic Airline', - height = 8, + height = 7, ...otherProps } ) { return ( From 9f67e59b76d2e7df016fb5b9e366b73041721808 Mon Sep 17 00:00:00 2001 From: Jasper Kang Date: Wed, 7 Jul 2021 14:33:11 +1200 Subject: [PATCH 04/23] [not verified] added jetpack admin footer --- .../components/a8c-svg-title/index.jsx | 2 +- .../components/jetpack-footer/index.jsx | 40 +++++++++++++++++++ .../components/jetpack-footer/style.scss | 31 ++++++++++++++ .../jetpack-footer/test/component.jsx | 33 +++++++++++++++ projects/js-packages/components/index.jsx | 1 + 5 files changed, 106 insertions(+), 1 deletion(-) create mode 100644 projects/js-packages/components/components/jetpack-footer/index.jsx create mode 100644 projects/js-packages/components/components/jetpack-footer/style.scss create mode 100644 projects/js-packages/components/components/jetpack-footer/test/component.jsx diff --git a/projects/js-packages/components/components/a8c-svg-title/index.jsx b/projects/js-packages/components/components/a8c-svg-title/index.jsx index 6fab9e1dea235..233366b5633e4 100644 --- a/projects/js-packages/components/components/a8c-svg-title/index.jsx +++ b/projects/js-packages/components/components/a8c-svg-title/index.jsx @@ -13,7 +13,7 @@ import React from 'react'; * @returns {React.Component} A8cSvgTitle component. */ export default function A8cSvgTitle( { - href = 'https://www.automattic.com', + href = 'https://www.jetpack.com', title = 'An Automattic Airline', height = 7, ...otherProps diff --git a/projects/js-packages/components/components/jetpack-footer/index.jsx b/projects/js-packages/components/components/jetpack-footer/index.jsx new file mode 100644 index 0000000000000..7657b490f5fb5 --- /dev/null +++ b/projects/js-packages/components/components/jetpack-footer/index.jsx @@ -0,0 +1,40 @@ +/** + * External dependencies + */ +import React from 'react'; +import { __ } from '@wordpress/i18n'; + +/** + * Internal dependencies + */ +import A8cSvgTitle from '../a8c-svg-title'; +import './style.scss'; + +/** + * JetpackFooter component definition. + * + * @param {object} props - Component properties. + * @param {object} props.aboutPageUrl - URL for 'An Automattic Airline'. + * @param {object} props.moduelName - Name of the moduel, e.g. 'Jetpack Search'. + * @param {object} props.className - default: jp-dashboard-footer. + * + * @returns {React.Component} JetpackFooter component. + */ +export default function JetpackFooter( { + aboutPageUrl, + moduelName = 'Jetpack', + className = 'jp-dashboard-footer', + ...otherProps +} ) { + return ( +
+
+ + { moduelName } +
+
+ +
+
+ ); +} diff --git a/projects/js-packages/components/components/jetpack-footer/style.scss b/projects/js-packages/components/components/jetpack-footer/style.scss new file mode 100644 index 0000000000000..5683d1daa8767 --- /dev/null +++ b/projects/js-packages/components/components/jetpack-footer/style.scss @@ -0,0 +1,31 @@ +.jp-dashboard-footer { + display: flex; + flex-flow: row wrap; + justify-content: space-between; + align-items: center; + width: 100%; + max-width: 65rem; + + color: #000; + + // Align with header. + @media ( max-width: 1250px ) { + width: 95%; + } + @media ( max-width: 480px ) { + justify-content: space-around; + } +} +.jp-dashboard-footer__footer-left { + font-size: 0.875em; + & span { + vertical-align: middle; + line-height: 1.2em; + } +} +.jp-dashboard-footer__logo:before { + font-family: jetpack !important; + font-size: 1.2em; + content: '\f100'; + margin: 10px 5px; +} diff --git a/projects/js-packages/components/components/jetpack-footer/test/component.jsx b/projects/js-packages/components/components/jetpack-footer/test/component.jsx new file mode 100644 index 0000000000000..628cd86cdc149 --- /dev/null +++ b/projects/js-packages/components/components/jetpack-footer/test/component.jsx @@ -0,0 +1,33 @@ +/** + * External dependencies + */ +import React from 'react'; +import { expect } from 'chai'; +import { shallow } from 'enzyme'; +import ShallowRenderer from 'react-test-renderer/shallow'; + +/** + * Internal dependencies + */ +import JetpackFooter from '../index'; + +describe( 'JetpackFooter', () => { + const testProps = { + className: 'sample-classname', + }; + + describe( 'Render the JetpackFooter component', () => { + const renderer = new ShallowRenderer(); + renderer.render( ); + + const wrapper = shallow( renderer.getRenderOutput() ); + + it( 'component exists', () => { + expect( wrapper.find( 'JetpackFooter' ) ).to.exist; + } ); + + it( 'validate the class name', () => { + expect( wrapper.hasClass( 'sample-classname' ) ).to.equal( true ); + } ); + } ); +} ); diff --git a/projects/js-packages/components/index.jsx b/projects/js-packages/components/index.jsx index ccf364cffcbde..442234ba0e4b8 100644 --- a/projects/js-packages/components/index.jsx +++ b/projects/js-packages/components/index.jsx @@ -16,3 +16,4 @@ Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. export { default as JetpackLogo } from './components/jetpack-logo'; export { default as A8cSvgTitle } from './components/a8c-svg-title'; +export { default as JetpackFooter } from './components/jetpack-footer'; From fc1ffe7fda81cac27d55cd980cb7c1ef74dab05d Mon Sep 17 00:00:00 2001 From: Jasper Kang Date: Wed, 7 Jul 2021 15:34:50 +1200 Subject: [PATCH 05/23] [not verified] refactoring --- pnpm-lock.yaml | 2 + .../components/a8c-svg-title/README.md | 6 +-- .../components/a8c-svg-title/index.jsx | 37 ++++++++++--------- .../components/jetpack-footer/README.md | 20 ++++++++++ .../components/jetpack-footer/index.jsx | 13 ++++--- projects/js-packages/components/package.json | 1 + 6 files changed, 53 insertions(+), 26 deletions(-) create mode 100644 projects/js-packages/components/components/jetpack-footer/README.md diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 8bc1be6b31988..895bfa0059941 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -61,6 +61,7 @@ importers: '@wordpress/browserslist-config': 3.0.1 '@wordpress/components': 9.2.6 '@wordpress/i18n': ^3.9.0 + classnames: 2.3.1 jetpack-js-test-runner: workspace:* lodash: 4.17.21 nyc: 15.1.0 @@ -72,6 +73,7 @@ importers: '@wordpress/browserslist-config': 3.0.1 '@wordpress/components': 9.2.6_react-dom@16.14.0+react@16.14.0 '@wordpress/i18n': 3.20.0 + classnames: 2.3.1 lodash: 4.17.21 prop-types: 15.7.2 devDependencies: diff --git a/projects/js-packages/components/components/a8c-svg-title/README.md b/projects/js-packages/components/components/a8c-svg-title/README.md index 15d0c02bbdd11..eccfa49cec816 100644 --- a/projects/js-packages/components/components/a8c-svg-title/README.md +++ b/projects/js-packages/components/components/a8c-svg-title/README.md @@ -1,16 +1,16 @@ # A8C SVG Title Component that renders the stylish `AN AUTOMATTIC AIRLINE`. -It takes width and height properties but defaults to 32px in height. +It takes width and height properties but defaults to 7 in height. #### How to use: ```js - + ``` #### Props - `className`: String - (default: `jp-a8c-svg-title`) the class name set on the SVG element. - `height`: Number - (default: 8) set the height of the title. -- `width`: Number - (optional) set the width of the title. +- `title`: String - (default: `AN AUTOMATTIC AIRLINE`) title of the SVG. diff --git a/projects/js-packages/components/components/a8c-svg-title/index.jsx b/projects/js-packages/components/components/a8c-svg-title/index.jsx index 233366b5633e4..ee35c68a6c076 100644 --- a/projects/js-packages/components/components/a8c-svg-title/index.jsx +++ b/projects/js-packages/components/components/a8c-svg-title/index.jsx @@ -7,33 +7,34 @@ import React from 'react'; * A8cSvgTitle component definition. * * @param {object} props - Component properties. - * @param {string} props.href - Link URL. * @param {string} props.title - Title for SVG. * @param {number} props.height - height for SVG. + * @param {number} props.className - className for the a wrapper, default: `jp-a8c-svg-title`. + * * @returns {React.Component} A8cSvgTitle component. */ export default function A8cSvgTitle( { - href = 'https://www.jetpack.com', title = 'An Automattic Airline', height = 7, + className = 'jp-a8c-svg-title', ...otherProps } ) { return ( - - - { title } - - - - - + + { title } + + + + ); } diff --git a/projects/js-packages/components/components/jetpack-footer/README.md b/projects/js-packages/components/components/jetpack-footer/README.md new file mode 100644 index 0000000000000..37ec0b6d659d6 --- /dev/null +++ b/projects/js-packages/components/components/jetpack-footer/README.md @@ -0,0 +1,20 @@ +# Jetpack Admin Footer + +Component that renders Jetpack Admin Footer. +It takes moduleName and URL to show in the footer. + +#### How to use: + +```js + +``` + +#### Props + +- `className`: String - (default: `jp-dashboard-footer`) the class name set on the element. +- `aboutPageUrl`: String - (default: `https://www.jetpack.com`) link to be added on 'An Automattic Airline'. +- `moduleName`: String - (default: `Jetpack`) set the name of the Module, e.g. `Jetpack Search`. diff --git a/projects/js-packages/components/components/jetpack-footer/index.jsx b/projects/js-packages/components/components/jetpack-footer/index.jsx index 7657b490f5fb5..8fcdb0cbc1fa6 100644 --- a/projects/js-packages/components/components/jetpack-footer/index.jsx +++ b/projects/js-packages/components/components/jetpack-footer/index.jsx @@ -3,6 +3,7 @@ */ import React from 'react'; import { __ } from '@wordpress/i18n'; +import classnames from 'classnames'; /** * Internal dependencies @@ -14,26 +15,28 @@ import './style.scss'; * JetpackFooter component definition. * * @param {object} props - Component properties. - * @param {object} props.aboutPageUrl - URL for 'An Automattic Airline'. + * @param {object} props.aboutPageUrl - Link for 'An Automattic Airline'. * @param {object} props.moduelName - Name of the moduel, e.g. 'Jetpack Search'. - * @param {object} props.className - default: jp-dashboard-footer. + * @param {object} props.className - className of the wrapper, default: `jp-dashboard-footer`. * * @returns {React.Component} JetpackFooter component. */ export default function JetpackFooter( { aboutPageUrl, moduelName = 'Jetpack', - className = 'jp-dashboard-footer', + className = '', ...otherProps } ) { return ( -
+
{ moduelName }
- + + +
); diff --git a/projects/js-packages/components/package.json b/projects/js-packages/components/package.json index 69c9b5ad5fd9e..171ca7497bc29 100644 --- a/projects/js-packages/components/package.json +++ b/projects/js-packages/components/package.json @@ -8,6 +8,7 @@ "@wordpress/browserslist-config": "3.0.1", "@wordpress/components": "9.2.6", "@wordpress/i18n": "^3.9.0", + "classnames": "2.3.1", "lodash": "4.17.21", "prop-types": "^15.7.2" }, From 466fbc4dabe8cecee6391a0a12968c00a9eaf139 Mon Sep 17 00:00:00 2001 From: Jasper Kang Date: Wed, 7 Jul 2021 15:55:21 +1200 Subject: [PATCH 06/23] [not verified] changelog --- .../js-packages/components/changelog/add-rna-jetpack-footer | 4 ++++ 1 file changed, 4 insertions(+) create mode 100644 projects/js-packages/components/changelog/add-rna-jetpack-footer diff --git a/projects/js-packages/components/changelog/add-rna-jetpack-footer b/projects/js-packages/components/changelog/add-rna-jetpack-footer new file mode 100644 index 0000000000000..a6d7c93f3984f --- /dev/null +++ b/projects/js-packages/components/changelog/add-rna-jetpack-footer @@ -0,0 +1,4 @@ +Significance: major +Type: added + +Added Jetpack Footer and `An Automattic Airline` SVG components From cb9a178b9ffc75a8952c3e59c1c7b92b97396e8f Mon Sep 17 00:00:00 2001 From: Jasper Kang Date: Wed, 7 Jul 2021 16:02:02 +1200 Subject: [PATCH 07/23] [not verified] fixed typo --- .../js-packages/components/components/a8c-svg-title/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/js-packages/components/components/a8c-svg-title/README.md b/projects/js-packages/components/components/a8c-svg-title/README.md index eccfa49cec816..1961364f5fc05 100644 --- a/projects/js-packages/components/components/a8c-svg-title/README.md +++ b/projects/js-packages/components/components/a8c-svg-title/README.md @@ -6,7 +6,7 @@ It takes width and height properties but defaults to 7 in height. #### How to use: ```js - + ``` #### Props From d4d6f16e1e224d661623ed30040603ab3ddfbd62 Mon Sep 17 00:00:00 2001 From: Jasper Kang Date: Thu, 8 Jul 2021 10:35:34 +1200 Subject: [PATCH 08/23] [not verified] rename a8c-svg-title to automattic-byline-logo --- .../README.md | 6 +++--- .../index.jsx | 14 +++++++------- .../test/component.jsx | 10 +++++----- .../components/components/jetpack-footer/index.jsx | 4 ++-- projects/js-packages/components/index.jsx | 2 +- 5 files changed, 18 insertions(+), 18 deletions(-) rename projects/js-packages/components/components/{a8c-svg-title => automattic-byline-logo}/README.md (60%) rename projects/js-packages/components/components/{a8c-svg-title => automattic-byline-logo}/index.jsx (88%) rename projects/js-packages/components/components/{a8c-svg-title => automattic-byline-logo}/test/component.jsx (66%) diff --git a/projects/js-packages/components/components/a8c-svg-title/README.md b/projects/js-packages/components/components/automattic-byline-logo/README.md similarity index 60% rename from projects/js-packages/components/components/a8c-svg-title/README.md rename to projects/js-packages/components/components/automattic-byline-logo/README.md index 1961364f5fc05..08021dbf33a93 100644 --- a/projects/js-packages/components/components/a8c-svg-title/README.md +++ b/projects/js-packages/components/components/automattic-byline-logo/README.md @@ -1,4 +1,4 @@ -# A8C SVG Title +# Automattic Byline Logo Component that renders the stylish `AN AUTOMATTIC AIRLINE`. It takes width and height properties but defaults to 7 in height. @@ -6,11 +6,11 @@ It takes width and height properties but defaults to 7 in height. #### How to use: ```js - + ``` #### Props -- `className`: String - (default: `jp-a8c-svg-title`) the class name set on the SVG element. +- `className`: String - (default: `jp-automattic-byline-logo`) the class name set on the SVG element. - `height`: Number - (default: 8) set the height of the title. - `title`: String - (default: `AN AUTOMATTIC AIRLINE`) title of the SVG. diff --git a/projects/js-packages/components/components/a8c-svg-title/index.jsx b/projects/js-packages/components/components/automattic-byline-logo/index.jsx similarity index 88% rename from projects/js-packages/components/components/a8c-svg-title/index.jsx rename to projects/js-packages/components/components/automattic-byline-logo/index.jsx index ee35c68a6c076..43d3d6f31bbd7 100644 --- a/projects/js-packages/components/components/a8c-svg-title/index.jsx +++ b/projects/js-packages/components/components/automattic-byline-logo/index.jsx @@ -4,19 +4,19 @@ import React from 'react'; /** - * A8cSvgTitle component definition. + * AutomatticBylineLogo component definition. * * @param {object} props - Component properties. * @param {string} props.title - Title for SVG. * @param {number} props.height - height for SVG. - * @param {number} props.className - className for the a wrapper, default: `jp-a8c-svg-title`. + * @param {number} props.className - className for the a wrapper, default: `jp-automattic-byline-logo`. * - * @returns {React.Component} A8cSvgTitle component. + * @returns {React.Component} AutomatticBylineLogo component. */ -export default function A8cSvgTitle( { +export default function AutomatticBylineLogo( { title = 'An Automattic Airline', height = 7, - className = 'jp-a8c-svg-title', + className = 'jp-automattic-byline-logo', ...otherProps } ) { return ( @@ -26,12 +26,12 @@ export default function A8cSvgTitle( { y="0" viewBox="0 0 935 38.2" enableBackground="new 0 0 935 38.2" - aria-labelledby="a8c-svg-title" + aria-labelledby="jp-automattic-byline-logo-title" height={ height } className={ className } { ...otherProps } > - { title } + { title } diff --git a/projects/js-packages/components/components/a8c-svg-title/test/component.jsx b/projects/js-packages/components/components/automattic-byline-logo/test/component.jsx similarity index 66% rename from projects/js-packages/components/components/a8c-svg-title/test/component.jsx rename to projects/js-packages/components/components/automattic-byline-logo/test/component.jsx index c4602525dc54d..48b41e08d2516 100644 --- a/projects/js-packages/components/components/a8c-svg-title/test/component.jsx +++ b/projects/js-packages/components/components/automattic-byline-logo/test/component.jsx @@ -9,21 +9,21 @@ import ShallowRenderer from 'react-test-renderer/shallow'; /** * Internal dependencies */ -import A8cSvgTitle from '../index'; +import AutomatticBylineLogo from '../index'; -describe( 'A8cSvgTitle', () => { +describe( 'AutomatticBylineLogo', () => { const testProps = { className: 'sample-classname', }; - describe( 'Render the A8cSvgTitle component', () => { + describe( 'Render the AutomatticBylineLogo component', () => { const renderer = new ShallowRenderer(); - renderer.render( ); + renderer.render( ); const wrapper = shallow( renderer.getRenderOutput() ); it( 'component exists', () => { - expect( wrapper.find( 'A8cSvgTitle' ) ).to.exist; + expect( wrapper.find( 'AutomatticBylineLogo' ) ).to.exist; } ); it( 'validate the class name', () => { diff --git a/projects/js-packages/components/components/jetpack-footer/index.jsx b/projects/js-packages/components/components/jetpack-footer/index.jsx index 8fcdb0cbc1fa6..6728eb7b5c854 100644 --- a/projects/js-packages/components/components/jetpack-footer/index.jsx +++ b/projects/js-packages/components/components/jetpack-footer/index.jsx @@ -8,7 +8,7 @@ import classnames from 'classnames'; /** * Internal dependencies */ -import A8cSvgTitle from '../a8c-svg-title'; +import AutomatticBylineLogo from '../automattic-byline-logo'; import './style.scss'; /** @@ -35,7 +35,7 @@ export default function JetpackFooter( {
diff --git a/projects/js-packages/components/index.jsx b/projects/js-packages/components/index.jsx index 442234ba0e4b8..d4e2e14c68bbd 100644 --- a/projects/js-packages/components/index.jsx +++ b/projects/js-packages/components/index.jsx @@ -15,5 +15,5 @@ Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ export { default as JetpackLogo } from './components/jetpack-logo'; -export { default as A8cSvgTitle } from './components/a8c-svg-title'; +export { default as AutomatticBylineLogo } from './components/automattic-byline-logo'; export { default as JetpackFooter } from './components/jetpack-footer'; From edc8105b7ae00d76c5f16d977d6ce6aa1ead1f11 Mon Sep 17 00:00:00 2001 From: Jasper Kang Date: Thu, 8 Jul 2021 10:40:54 +1200 Subject: [PATCH 09/23] [not verified] use classnames for automattic logo component --- .../components/automattic-byline-logo/README.md | 4 ++-- .../components/automattic-byline-logo/index.jsx | 9 +++++---- .../components/components/jetpack-footer/README.md | 2 +- .../components/components/jetpack-footer/index.jsx | 2 +- 4 files changed, 9 insertions(+), 8 deletions(-) diff --git a/projects/js-packages/components/components/automattic-byline-logo/README.md b/projects/js-packages/components/components/automattic-byline-logo/README.md index 08021dbf33a93..c437f816684d4 100644 --- a/projects/js-packages/components/components/automattic-byline-logo/README.md +++ b/projects/js-packages/components/components/automattic-byline-logo/README.md @@ -6,11 +6,11 @@ It takes width and height properties but defaults to 7 in height. #### How to use: ```js - + ``` #### Props -- `className`: String - (default: `jp-automattic-byline-logo`) the class name set on the SVG element. +- `className`: String - (default only: `jp-automattic-byline-logo`) the additional class name set on the SVG element. - `height`: Number - (default: 8) set the height of the title. - `title`: String - (default: `AN AUTOMATTIC AIRLINE`) title of the SVG. diff --git a/projects/js-packages/components/components/automattic-byline-logo/index.jsx b/projects/js-packages/components/components/automattic-byline-logo/index.jsx index 43d3d6f31bbd7..93cbd92cfcd44 100644 --- a/projects/js-packages/components/components/automattic-byline-logo/index.jsx +++ b/projects/js-packages/components/components/automattic-byline-logo/index.jsx @@ -2,21 +2,22 @@ * External dependencies */ import React from 'react'; +import classnames from 'classnames'; /** * AutomatticBylineLogo component definition. * * @param {object} props - Component properties. * @param {string} props.title - Title for SVG. - * @param {number} props.height - height for SVG. - * @param {number} props.className - className for the a wrapper, default: `jp-automattic-byline-logo`. + * @param {number} props.height - Height for SVG. + * @param {number} props.className - Additional className for the a wrapper, default only: `jp-automattic-byline-logo`. * * @returns {React.Component} AutomatticBylineLogo component. */ export default function AutomatticBylineLogo( { title = 'An Automattic Airline', height = 7, - className = 'jp-automattic-byline-logo', + className = '', ...otherProps } ) { return ( @@ -28,7 +29,7 @@ export default function AutomatticBylineLogo( { enableBackground="new 0 0 935 38.2" aria-labelledby="jp-automattic-byline-logo-title" height={ height } - className={ className } + className={ classnames( 'jp-automattic-byline-logo', className ) } { ...otherProps } > { title } diff --git a/projects/js-packages/components/components/jetpack-footer/README.md b/projects/js-packages/components/components/jetpack-footer/README.md index 37ec0b6d659d6..fa65564da3fea 100644 --- a/projects/js-packages/components/components/jetpack-footer/README.md +++ b/projects/js-packages/components/components/jetpack-footer/README.md @@ -15,6 +15,6 @@ It takes moduleName and URL to show in the footer. #### Props -- `className`: String - (default: `jp-dashboard-footer`) the class name set on the element. +- `className`: String - (default: `jp-dashboard-footer`) the additional class name set on the element. - `aboutPageUrl`: String - (default: `https://www.jetpack.com`) link to be added on 'An Automattic Airline'. - `moduleName`: String - (default: `Jetpack`) set the name of the Module, e.g. `Jetpack Search`. diff --git a/projects/js-packages/components/components/jetpack-footer/index.jsx b/projects/js-packages/components/components/jetpack-footer/index.jsx index 6728eb7b5c854..89ae94215e4a9 100644 --- a/projects/js-packages/components/components/jetpack-footer/index.jsx +++ b/projects/js-packages/components/components/jetpack-footer/index.jsx @@ -17,7 +17,7 @@ import './style.scss'; * @param {object} props - Component properties. * @param {object} props.aboutPageUrl - Link for 'An Automattic Airline'. * @param {object} props.moduelName - Name of the moduel, e.g. 'Jetpack Search'. - * @param {object} props.className - className of the wrapper, default: `jp-dashboard-footer`. + * @param {object} props.className - additional className of the wrapper, default only: `jp-dashboard-footer`. * * @returns {React.Component} JetpackFooter component. */ From 1843af764ee355219004a93464316dcf95f1a10c Mon Sep 17 00:00:00 2001 From: Jasper Kang Date: Thu, 8 Jul 2021 10:41:58 +1200 Subject: [PATCH 10/23] [not verified] fixed typo --- .../components/components/jetpack-footer/index.jsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/projects/js-packages/components/components/jetpack-footer/index.jsx b/projects/js-packages/components/components/jetpack-footer/index.jsx index 89ae94215e4a9..aafe28932cff1 100644 --- a/projects/js-packages/components/components/jetpack-footer/index.jsx +++ b/projects/js-packages/components/components/jetpack-footer/index.jsx @@ -16,14 +16,14 @@ import './style.scss'; * * @param {object} props - Component properties. * @param {object} props.aboutPageUrl - Link for 'An Automattic Airline'. - * @param {object} props.moduelName - Name of the moduel, e.g. 'Jetpack Search'. + * @param {object} props.moduleName - Name of the moduel, e.g. 'Jetpack Search'. * @param {object} props.className - additional className of the wrapper, default only: `jp-dashboard-footer`. * * @returns {React.Component} JetpackFooter component. */ export default function JetpackFooter( { aboutPageUrl, - moduelName = 'Jetpack', + moduleName = 'Jetpack', className = '', ...otherProps } ) { @@ -31,7 +31,7 @@ export default function JetpackFooter( {
- { moduelName } + { moduleName }
From 4fe3455c634a8e7516f7bdba43c6d877d33f6015 Mon Sep 17 00:00:00 2001 From: Jasper Kang Date: Thu, 8 Jul 2021 10:43:34 +1200 Subject: [PATCH 11/23] [not verified] i18n logo title --- .../components/components/automattic-byline-logo/index.jsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/projects/js-packages/components/components/automattic-byline-logo/index.jsx b/projects/js-packages/components/components/automattic-byline-logo/index.jsx index 93cbd92cfcd44..414573a461b41 100644 --- a/projects/js-packages/components/components/automattic-byline-logo/index.jsx +++ b/projects/js-packages/components/components/automattic-byline-logo/index.jsx @@ -3,6 +3,7 @@ */ import React from 'react'; import classnames from 'classnames'; +import { __ } from '@wordpress/i18n'; /** * AutomatticBylineLogo component definition. @@ -15,7 +16,7 @@ import classnames from 'classnames'; * @returns {React.Component} AutomatticBylineLogo component. */ export default function AutomatticBylineLogo( { - title = 'An Automattic Airline', + title = __( 'An Automattic Airline' ), height = 7, className = '', ...otherProps From 3fd373d8255fdab4590cf12b82ce7201aacce113 Mon Sep 17 00:00:00 2001 From: Jasper Kang Date: Thu, 8 Jul 2021 13:15:43 +1200 Subject: [PATCH 12/23] [not verified] removed important --- .../js-packages/components/components/jetpack-footer/style.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/js-packages/components/components/jetpack-footer/style.scss b/projects/js-packages/components/components/jetpack-footer/style.scss index 5683d1daa8767..311a99d4e0ceb 100644 --- a/projects/js-packages/components/components/jetpack-footer/style.scss +++ b/projects/js-packages/components/components/jetpack-footer/style.scss @@ -24,7 +24,7 @@ } } .jp-dashboard-footer__logo:before { - font-family: jetpack !important; + font-family: jetpack; font-size: 1.2em; content: '\f100'; margin: 10px 5px; From 38ef5e44ca861b857b50cf34e47871fbc58dc5c9 Mon Sep 17 00:00:00 2001 From: Jasper Kang Date: Fri, 9 Jul 2021 15:39:17 +1200 Subject: [PATCH 13/23] [not verified] added translation --- .../js-packages/components/components/jetpack-footer/index.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/js-packages/components/components/jetpack-footer/index.jsx b/projects/js-packages/components/components/jetpack-footer/index.jsx index aafe28932cff1..c53519ccc4a9b 100644 --- a/projects/js-packages/components/components/jetpack-footer/index.jsx +++ b/projects/js-packages/components/components/jetpack-footer/index.jsx @@ -23,7 +23,7 @@ import './style.scss'; */ export default function JetpackFooter( { aboutPageUrl, - moduleName = 'Jetpack', + moduleName = __( 'Jetpack', 'jetpack' ), className = '', ...otherProps } ) { From 8cb160bd3f23c5f8a591ca01ad426016b53510c7 Mon Sep 17 00:00:00 2001 From: Jasper Kang Date: Fri, 9 Jul 2021 15:44:47 +1200 Subject: [PATCH 14/23] [not verified] renamed aboutPageUrl to a8cLogoHref --- .../components/components/jetpack-footer/README.md | 4 ++-- .../components/components/jetpack-footer/index.jsx | 6 +++--- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/projects/js-packages/components/components/jetpack-footer/README.md b/projects/js-packages/components/components/jetpack-footer/README.md index fa65564da3fea..e977d446d55b0 100644 --- a/projects/js-packages/components/components/jetpack-footer/README.md +++ b/projects/js-packages/components/components/jetpack-footer/README.md @@ -8,7 +8,7 @@ It takes moduleName and URL to show in the footer. ```js ``` @@ -16,5 +16,5 @@ It takes moduleName and URL to show in the footer. #### Props - `className`: String - (default: `jp-dashboard-footer`) the additional class name set on the element. -- `aboutPageUrl`: String - (default: `https://www.jetpack.com`) link to be added on 'An Automattic Airline'. +- `a8cLogoHerf`: String - (default: `https://www.jetpack.com`) link to be added on 'An Automattic Airline'. - `moduleName`: String - (default: `Jetpack`) set the name of the Module, e.g. `Jetpack Search`. diff --git a/projects/js-packages/components/components/jetpack-footer/index.jsx b/projects/js-packages/components/components/jetpack-footer/index.jsx index c53519ccc4a9b..3f7896b9d1b52 100644 --- a/projects/js-packages/components/components/jetpack-footer/index.jsx +++ b/projects/js-packages/components/components/jetpack-footer/index.jsx @@ -15,14 +15,14 @@ import './style.scss'; * JetpackFooter component definition. * * @param {object} props - Component properties. - * @param {object} props.aboutPageUrl - Link for 'An Automattic Airline'. + * @param {object} props.a8cLogoHerf - Link for 'An Automattic Airline'. * @param {object} props.moduleName - Name of the moduel, e.g. 'Jetpack Search'. * @param {object} props.className - additional className of the wrapper, default only: `jp-dashboard-footer`. * * @returns {React.Component} JetpackFooter component. */ export default function JetpackFooter( { - aboutPageUrl, + a8cLogoHerf, moduleName = __( 'Jetpack', 'jetpack' ), className = '', ...otherProps @@ -34,7 +34,7 @@ export default function JetpackFooter( { { moduleName }
From 519e24a69d344f3d7707b8b5abc0bafeb5fc9c83 Mon Sep 17 00:00:00 2001 From: Jasper Kang Date: Fri, 9 Jul 2021 15:49:56 +1200 Subject: [PATCH 15/23] [not verified] fixed typo --- .../js-packages/components/components/jetpack-footer/index.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/js-packages/components/components/jetpack-footer/index.jsx b/projects/js-packages/components/components/jetpack-footer/index.jsx index 3f7896b9d1b52..bf9ff2952af34 100644 --- a/projects/js-packages/components/components/jetpack-footer/index.jsx +++ b/projects/js-packages/components/components/jetpack-footer/index.jsx @@ -16,7 +16,7 @@ import './style.scss'; * * @param {object} props - Component properties. * @param {object} props.a8cLogoHerf - Link for 'An Automattic Airline'. - * @param {object} props.moduleName - Name of the moduel, e.g. 'Jetpack Search'. + * @param {object} props.moduleName - Name of the module, e.g. 'Jetpack Search'. * @param {object} props.className - additional className of the wrapper, default only: `jp-dashboard-footer`. * * @returns {React.Component} JetpackFooter component. From eedc32eb85b7c84821f49f7b71f6625fcfc04b6b Mon Sep 17 00:00:00 2001 From: Jasper Kang Date: Fri, 9 Jul 2021 21:11:37 +1200 Subject: [PATCH 16/23] [not verified] Update projects/js-packages/components/components/automattic-byline-logo/index.jsx Co-authored-by: Jeremy Herve --- .../components/components/automattic-byline-logo/index.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/js-packages/components/components/automattic-byline-logo/index.jsx b/projects/js-packages/components/components/automattic-byline-logo/index.jsx index 414573a461b41..c7140a34cebcc 100644 --- a/projects/js-packages/components/components/automattic-byline-logo/index.jsx +++ b/projects/js-packages/components/components/automattic-byline-logo/index.jsx @@ -16,7 +16,7 @@ import { __ } from '@wordpress/i18n'; * @returns {React.Component} AutomatticBylineLogo component. */ export default function AutomatticBylineLogo( { - title = __( 'An Automattic Airline' ), + title = __( 'An Automattic Airline', 'jetpack' ), height = 7, className = '', ...otherProps From 6b962b08d00b48bbb5aeb8e7daf4590e39892dea Mon Sep 17 00:00:00 2001 From: Jasper Kang Date: Mon, 12 Jul 2021 10:04:27 +1200 Subject: [PATCH 17/23] [not verified] Update projects/js-packages/components/components/jetpack-footer/README.md Co-authored-by: Jason Moon <4044428+jsnmoon@users.noreply.github.com> --- .../js-packages/components/components/jetpack-footer/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/js-packages/components/components/jetpack-footer/README.md b/projects/js-packages/components/components/jetpack-footer/README.md index e977d446d55b0..31a3e3c1217d0 100644 --- a/projects/js-packages/components/components/jetpack-footer/README.md +++ b/projects/js-packages/components/components/jetpack-footer/README.md @@ -8,7 +8,7 @@ It takes moduleName and URL to show in the footer. ```js ``` From 6ca653c8fb21b50e706aec18a21d2c4d0cb15225 Mon Sep 17 00:00:00 2001 From: Jasper Kang Date: Mon, 12 Jul 2021 10:04:35 +1200 Subject: [PATCH 18/23] [not verified] Update projects/js-packages/components/components/jetpack-footer/index.jsx Co-authored-by: Jason Moon <4044428+jsnmoon@users.noreply.github.com> --- .../js-packages/components/components/jetpack-footer/index.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/js-packages/components/components/jetpack-footer/index.jsx b/projects/js-packages/components/components/jetpack-footer/index.jsx index bf9ff2952af34..80e091f17d27b 100644 --- a/projects/js-packages/components/components/jetpack-footer/index.jsx +++ b/projects/js-packages/components/components/jetpack-footer/index.jsx @@ -22,7 +22,7 @@ import './style.scss'; * @returns {React.Component} JetpackFooter component. */ export default function JetpackFooter( { - a8cLogoHerf, + a8cLogoHref, moduleName = __( 'Jetpack', 'jetpack' ), className = '', ...otherProps From 569165acf7452be3ebd3f856cf9aeb4c45c7ddb1 Mon Sep 17 00:00:00 2001 From: Jasper Kang Date: Mon, 12 Jul 2021 10:04:40 +1200 Subject: [PATCH 19/23] [not verified] Update projects/js-packages/components/components/jetpack-footer/index.jsx Co-authored-by: Jason Moon <4044428+jsnmoon@users.noreply.github.com> --- .../js-packages/components/components/jetpack-footer/index.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/js-packages/components/components/jetpack-footer/index.jsx b/projects/js-packages/components/components/jetpack-footer/index.jsx index 80e091f17d27b..ecec324aae484 100644 --- a/projects/js-packages/components/components/jetpack-footer/index.jsx +++ b/projects/js-packages/components/components/jetpack-footer/index.jsx @@ -34,7 +34,7 @@ export default function JetpackFooter( { { moduleName }
From 9026ee9e52959210cb8bb16846825c6706284f2d Mon Sep 17 00:00:00 2001 From: Jasper Kang Date: Mon, 12 Jul 2021 10:04:56 +1200 Subject: [PATCH 20/23] [not verified] Update projects/js-packages/components/components/jetpack-footer/README.md Co-authored-by: Jason Moon <4044428+jsnmoon@users.noreply.github.com> --- .../js-packages/components/components/jetpack-footer/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/js-packages/components/components/jetpack-footer/README.md b/projects/js-packages/components/components/jetpack-footer/README.md index 31a3e3c1217d0..3e42344139dd2 100644 --- a/projects/js-packages/components/components/jetpack-footer/README.md +++ b/projects/js-packages/components/components/jetpack-footer/README.md @@ -16,5 +16,5 @@ It takes moduleName and URL to show in the footer. #### Props - `className`: String - (default: `jp-dashboard-footer`) the additional class name set on the element. -- `a8cLogoHerf`: String - (default: `https://www.jetpack.com`) link to be added on 'An Automattic Airline'. +- `a8cLogoHref`: String - (default: `https://www.jetpack.com`) link to be added on 'An Automattic Airline'. - `moduleName`: String - (default: `Jetpack`) set the name of the Module, e.g. `Jetpack Search`. From d426fc1a6cdd2d47a0d302f62d953863bd901f78 Mon Sep 17 00:00:00 2001 From: Jasper Kang Date: Mon, 12 Jul 2021 10:41:53 +1200 Subject: [PATCH 21/23] [not verified] fixed typo --- .../js-packages/components/components/jetpack-footer/index.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/js-packages/components/components/jetpack-footer/index.jsx b/projects/js-packages/components/components/jetpack-footer/index.jsx index ecec324aae484..8da670fe15289 100644 --- a/projects/js-packages/components/components/jetpack-footer/index.jsx +++ b/projects/js-packages/components/components/jetpack-footer/index.jsx @@ -15,7 +15,7 @@ import './style.scss'; * JetpackFooter component definition. * * @param {object} props - Component properties. - * @param {object} props.a8cLogoHerf - Link for 'An Automattic Airline'. + * @param {object} props.a8cLogoHref - Link for 'An Automattic Airline'. * @param {object} props.moduleName - Name of the module, e.g. 'Jetpack Search'. * @param {object} props.className - additional className of the wrapper, default only: `jp-dashboard-footer`. * From 23d260873184acf9164e91669e06ce30967e9dcb Mon Sep 17 00:00:00 2001 From: Jasper Kang Date: Mon, 12 Jul 2021 13:24:33 +1200 Subject: [PATCH 22/23] [not verified] add i18n check to eslint --- projects/js-packages/components/.eslintrc.cjs | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/projects/js-packages/components/.eslintrc.cjs b/projects/js-packages/components/.eslintrc.cjs index 5992ee517a473..b99a00c831890 100644 --- a/projects/js-packages/components/.eslintrc.cjs +++ b/projects/js-packages/components/.eslintrc.cjs @@ -1,11 +1,20 @@ module.exports = { // This project uses react, so load the shared react config. root: true, - extends: [ '../../../.eslintrc.react.js' ], + extends: [ '../../../.eslintrc.react.js', 'plugin:@wordpress/eslint-plugin/i18n' ], parserOptions: { requireConfigFile: false, babelOptions: { presets: [ '@babel/preset-react' ], }, }, + rules: { + // Enforce the use of the Jetpack textdomain. + '@wordpress/i18n-text-domain': [ + 'error', + { + allowedTextDomain: 'jetpack', + }, + ], + }, }; From 48c416412ed542652ed3efbe980d667b86f998ac Mon Sep 17 00:00:00 2001 From: Jasper Kang Date: Mon, 12 Jul 2021 21:53:30 +1200 Subject: [PATCH 23/23] [not verified] Update projects/js-packages/components/components/jetpack-footer/index.jsx Co-authored-by: Jeremy Herve --- .../js-packages/components/components/jetpack-footer/index.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/js-packages/components/components/jetpack-footer/index.jsx b/projects/js-packages/components/components/jetpack-footer/index.jsx index 8da670fe15289..0d428524ff2ab 100644 --- a/projects/js-packages/components/components/jetpack-footer/index.jsx +++ b/projects/js-packages/components/components/jetpack-footer/index.jsx @@ -35,7 +35,7 @@ export default function JetpackFooter( {