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 <[email protected]>
Co-authored-by: Jason Moon <[email protected]>

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',
+			},
+		],
+	},
 };

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

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
+<AutomatticBylineLogo height={ 7 } className="jp-automattic-byline-logo-jetpack" />
+```
+
+#### 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.

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 (
+		<svg
+			role="img"
+			x="0"
+			y="0"
+			viewBox="0 0 935 38.2"
+			enableBackground="new 0 0 935 38.2"
+			aria-labelledby="jp-automattic-byline-logo-title"
+			height={ height }
+			className={ classnames( 'jp-automattic-byline-logo', className ) }
+			{ ...otherProps }
+		>
+			<title id="jp-automattic-byline-logo-title">{ title }</title>
+			<path d="M317.1 38.2c-12.6 0-20.7-9.1-20.7-18.5v-1.2c0-9.6 8.2-18.5 20.7-18.5 12.6 0 20.8 8.9 20.8 18.5v1.2C337.9 29.1 329.7 38.2 317.1 38.2zM331.2 18.6c0-6.9-5-13-14.1-13s-14 6.1-14 13v0.9c0 6.9 5 13.1 14 13.1s14.1-6.2 14.1-13.1V18.6zM175 36.8l-4.7-8.8h-20.9l-4.5 8.8h-7L157 1.3h5.5L182 36.8H175zM159.7 8.2L152 23.1h15.7L159.7 8.2zM212.4 38.2c-12.7 0-18.7-6.9-18.7-16.2V1.3h6.6v20.9c0 6.6 4.3 10.5 12.5 10.5 8.4 0 11.9-3.9 11.9-10.5V1.3h6.7V22C231.4 30.8 225.8 38.2 212.4 38.2zM268.6 6.8v30h-6.7v-30h-15.5V1.3h37.7v5.5H268.6zM397.3 36.8V8.7l-1.8 3.1 -14.9 25h-3.3l-14.7-25 -1.8-3.1v28.1h-6.5V1.3h9.2l14 24.4 1.7 3 1.7-3 13.9-24.4h9.1v35.5H397.3zM454.4 36.8l-4.7-8.8h-20.9l-4.5 8.8h-7l19.2-35.5h5.5l19.5 35.5H454.4zM439.1 8.2l-7.7 14.9h15.7L439.1 8.2zM488.4 6.8v30h-6.7v-30h-15.5V1.3h37.7v5.5H488.4zM537.3 6.8v30h-6.7v-30h-15.5V1.3h37.7v5.5H537.3zM569.3 36.8V4.6c2.7 0 3.7-1.4 3.7-3.4h2.8v35.5L569.3 36.8 569.3 36.8zM628 11.3c-3.2-2.9-7.9-5.7-14.2-5.7 -9.5 0-14.8 6.5-14.8 13.3v0.7c0 6.7 5.4 13 15.3 13 5.9 0 10.8-2.8 13.9-5.7l4 4.2c-3.9 3.8-10.5 7.1-18.3 7.1 -13.4 0-21.6-8.7-21.6-18.3v-1.2c0-9.6 8.9-18.7 21.9-18.7 7.5 0 14.3 3.1 18 7.1L628 11.3zM321.5 12.4c1.2 0.8 1.5 2.4 0.8 3.6l-6.1 9.4c-0.8 1.2-2.4 1.6-3.6 0.8l0 0c-1.2-0.8-1.5-2.4-0.8-3.6l6.1-9.4C318.7 11.9 320.3 11.6 321.5 12.4L321.5 12.4z" />
+			<path d="M37.5 36.7l-4.7-8.9H11.7l-4.6 8.9H0L19.4 0.8H25l19.7 35.9H37.5zM22 7.8l-7.8 15.1h15.9L22 7.8zM82.8 36.7l-23.3-24 -2.3-2.5v26.6h-6.7v-36H57l22.6 24 2.3 2.6V0.8h6.7v35.9H82.8z" />
+			<path d="M719.9 37l-4.8-8.9H694l-4.6 8.9h-7.1l19.5-36h5.6l19.8 36H719.9zM704.4 8l-7.8 15.1h15.9L704.4 8zM733 37V1h6.8v36H733zM781 37c-1.8 0-2.6-2.5-2.9-5.8l-0.2-3.7c-0.2-3.6-1.7-5.1-8.4-5.1h-12.8V37H750V1h19.6c10.8 0 15.7 4.3 15.7 9.9 0 3.9-2 7.7-9 9 7 0.5 8.5 3.7 8.6 7.9l0.1 3c0.1 2.5 0.5 4.3 2.2 6.1V37H781zM778.5 11.8c0-2.6-2.1-5.1-7.9-5.1h-13.8v10.8h14.4c5 0 7.3-2.4 7.3-5.2V11.8zM794.8 37V1h6.8v30.4h28.2V37H794.8zM836.7 37V1h6.8v36H836.7zM886.2 37l-23.4-24.1 -2.3-2.5V37h-6.8V1h6.5l22.7 24.1 2.3 2.6V1h6.8v36H886.2zM902.3 37V1H935v5.6h-26v9.2h20v5.5h-20v10.1h26V37H902.3z" />
+		</svg>
+	);
+}

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( <AutomatticBylineLogo { ...testProps } /> );
+
+		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 );
+		} );
+	} );
+} );

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
+<JetpackFooter
+	moduleName="Jetpack Search"
+	a8cLogoHref="https://www.jetpack.com"
+	className="jp-dashboard-footer"
+/>
+```
+
+#### 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`.

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 (
+		<div className={ classnames( 'jp-dashboard-footer', className ) } { ...otherProps }>
+			<div className="jp-dashboard-footer__footer-left">
+				<span className="jp-dashboard-footer__logo"></span>
+				<span>{ moduleName }</span>
+			</div>
+			<div className="jp-dashboard-footer__footer-right">
+				<a href={ a8cLogoHref }>
+					<AutomatticBylineLogo />
+				</a>
+			</div>
+		</div>
+	);
+}

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;
+}

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( <JetpackFooter { ...testProps } /> );
+
+		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 );
+		} );
+	} );
+} );

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';

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"
 	},