From ca0ab25e1a6430b651dce791ca8e61234126ed86 Mon Sep 17 00:00:00 2001 From: Jasper Kang Date: Tue, 13 Jul 2021 10:02:00 +1200 Subject: [PATCH] RNA: Add Jetpack footer (#20287) * added A8C byline logo component * added Jetpack shared admin footer * add i18n text domain check to eslint Co-authored-by: Jeremy Herve Co-authored-by: Jason Moon <4044428+jsnmoon@users.noreply.github.com> --- pnpm-lock.yaml | 2 + projects/js-packages/components/.eslintrc.cjs | 11 ++++- .../changelog/add-rna-jetpack-footer | 4 ++ .../automattic-byline-logo/README.md | 16 +++++++ .../automattic-byline-logo/index.jsx | 42 ++++++++++++++++++ .../automattic-byline-logo/test/component.jsx | 33 ++++++++++++++ .../components/jetpack-footer/README.md | 20 +++++++++ .../components/jetpack-footer/index.jsx | 43 +++++++++++++++++++ .../components/jetpack-footer/style.scss | 31 +++++++++++++ .../jetpack-footer/test/component.jsx | 33 ++++++++++++++ projects/js-packages/components/index.jsx | 2 + projects/js-packages/components/package.json | 1 + 12 files changed, 237 insertions(+), 1 deletion(-) create mode 100644 projects/js-packages/components/changelog/add-rna-jetpack-footer create mode 100644 projects/js-packages/components/components/automattic-byline-logo/README.md create mode 100644 projects/js-packages/components/components/automattic-byline-logo/index.jsx create mode 100644 projects/js-packages/components/components/automattic-byline-logo/test/component.jsx create mode 100644 projects/js-packages/components/components/jetpack-footer/README.md 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/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/.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', + }, + ], + }, }; 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 diff --git a/projects/js-packages/components/components/automattic-byline-logo/README.md b/projects/js-packages/components/components/automattic-byline-logo/README.md new file mode 100644 index 0000000000000..c437f816684d4 --- /dev/null +++ b/projects/js-packages/components/components/automattic-byline-logo/README.md @@ -0,0 +1,16 @@ +# Automattic Byline Logo + +Component that renders the stylish `AN AUTOMATTIC AIRLINE`. +It takes width and height properties but defaults to 7 in height. + +#### How to use: + +```js + +``` + +#### Props + +- `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 new file mode 100644 index 0000000000000..c7140a34cebcc --- /dev/null +++ b/projects/js-packages/components/components/automattic-byline-logo/index.jsx @@ -0,0 +1,42 @@ +/** + * External dependencies + */ +import React from 'react'; +import classnames from 'classnames'; +import { __ } from '@wordpress/i18n'; + +/** + * 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 - 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', 'jetpack' ), + height = 7, + className = '', + ...otherProps +} ) { + return ( + + { title } + + + + + ); +} diff --git a/projects/js-packages/components/components/automattic-byline-logo/test/component.jsx b/projects/js-packages/components/components/automattic-byline-logo/test/component.jsx new file mode 100644 index 0000000000000..48b41e08d2516 --- /dev/null +++ b/projects/js-packages/components/components/automattic-byline-logo/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 AutomatticBylineLogo from '../index'; + +describe( 'AutomatticBylineLogo', () => { + const testProps = { + className: 'sample-classname', + }; + + describe( 'Render the AutomatticBylineLogo component', () => { + const renderer = new ShallowRenderer(); + renderer.render( ); + + const wrapper = shallow( renderer.getRenderOutput() ); + + it( 'component exists', () => { + expect( wrapper.find( 'AutomatticBylineLogo' ) ).to.exist; + } ); + + it( 'validate the class name', () => { + expect( wrapper.hasClass( 'sample-classname' ) ).to.equal( true ); + } ); + } ); +} ); 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..3e42344139dd2 --- /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 additional class name set on the element. +- `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`. 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..0d428524ff2ab --- /dev/null +++ b/projects/js-packages/components/components/jetpack-footer/index.jsx @@ -0,0 +1,43 @@ +/** + * External dependencies + */ +import React from 'react'; +import { __ } from '@wordpress/i18n'; +import classnames from 'classnames'; + +/** + * Internal dependencies + */ +import AutomatticBylineLogo from '../automattic-byline-logo'; +import './style.scss'; + +/** + * JetpackFooter component definition. + * + * @param {object} props - Component properties. + * @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`. + * + * @returns {React.Component} JetpackFooter component. + */ +export default function JetpackFooter( { + a8cLogoHref, + moduleName = __( 'Jetpack', 'jetpack' ), + className = '', + ...otherProps +} ) { + return ( +
+
+ + { moduleName } +
+
+ + + +
+
+ ); +} 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..311a99d4e0ceb --- /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; + 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 ca220cf206987..d4e2e14c68bbd 100644 --- a/projects/js-packages/components/index.jsx +++ b/projects/js-packages/components/index.jsx @@ -15,3 +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 AutomatticBylineLogo } from './components/automattic-byline-logo'; +export { default as JetpackFooter } from './components/jetpack-footer'; 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" },