diff --git a/projects/js-packages/components/changelog/add-jetpack-protect-logo-component b/projects/js-packages/components/changelog/add-jetpack-protect-logo-component new file mode 100644 index 0000000000000..1935645eef139 --- /dev/null +++ b/projects/js-packages/components/changelog/add-jetpack-protect-logo-component @@ -0,0 +1,4 @@ +Significance: minor +Type: added + +Add JetpackProtectLogo component diff --git a/projects/js-packages/components/components/jetpack-protect-logo/README.md b/projects/js-packages/components/components/jetpack-protect-logo/README.md new file mode 100644 index 0000000000000..e813dc52f5353 --- /dev/null +++ b/projects/js-packages/components/components/jetpack-protect-logo/README.md @@ -0,0 +1,20 @@ +JetpackProtectLogo +======== + +Component that renders the Jetpack Protect SVG logo. +It consists of the Jetpack symbol followed by the name. +It takes width and height properties but defaults to 42px in height. + +#### How to use: + +```js + +``` + +#### Props + +* `className`: String - (default: `jetpack-logo`) the class name set on the SVG element. +* `height`: Number - (default: 42) set the height of the logo. +* `width`: Number - (optional) set the width of the logo. +* `showText`: Boolean - (default: true) Whether to show text `Jetpack` after the logo. +* `logoColor`: String - (default: '#069e08') The color of the logo symbol. diff --git a/projects/js-packages/components/components/jetpack-protect-logo/index.tsx b/projects/js-packages/components/components/jetpack-protect-logo/index.tsx new file mode 100644 index 0000000000000..1b1729e4f5723 --- /dev/null +++ b/projects/js-packages/components/components/jetpack-protect-logo/index.tsx @@ -0,0 +1,60 @@ +import { __ } from '@wordpress/i18n'; +import clsx from 'clsx'; +import React from 'react'; +import { JetpackProtectLogoProps } from './types'; + +const JetpackProtectLogo: React.FC< JetpackProtectLogoProps > = ( { + logoColor = '#069e08', + showText = true, + className, + height = 42, + ...otherProps +} ) => { + const viewBox = showText ? '0 0 245 41' : '0 0 41 41'; + + return ( + + { __( 'Jetpack Protect Logo', 'jetpack' ) } + + + + + + { showText && ( + <> + + + + + + + + + + + + + + + + + ) } + + ); +}; + +export default JetpackProtectLogo; diff --git a/projects/js-packages/components/components/jetpack-protect-logo/stories/index.stories.tsx b/projects/js-packages/components/components/jetpack-protect-logo/stories/index.stories.tsx new file mode 100644 index 0000000000000..90ec4de809223 --- /dev/null +++ b/projects/js-packages/components/components/jetpack-protect-logo/stories/index.stories.tsx @@ -0,0 +1,21 @@ +import JetpackProtectLogo from '../index'; +import type { StoryFn, Meta } from '@storybook/react'; + +export default { + title: 'JS Packages/Components/Jetpack Protect Logo', + component: JetpackProtectLogo, + argTypes: { + logoColor: { control: 'color' }, + }, +} as Meta< typeof JetpackProtectLogo >; + +const Template: StoryFn< typeof JetpackProtectLogo > = args => ; + +const DefaultArgs = { + width: 150, + className: 'sample-classname', + showText: true, +}; + +export const _default = Template.bind( {} ); +_default.args = DefaultArgs; diff --git a/projects/js-packages/components/components/jetpack-protect-logo/test/component.tsx b/projects/js-packages/components/components/jetpack-protect-logo/test/component.tsx new file mode 100644 index 0000000000000..32deae5d68d01 --- /dev/null +++ b/projects/js-packages/components/components/jetpack-protect-logo/test/component.tsx @@ -0,0 +1,16 @@ +import { render, screen } from '@testing-library/react'; +import JetpackProtectLogo from '../index'; + +describe( 'JetpackProtectLogo', () => { + const testProps = { + className: 'sample-classname', + }; + + describe( 'Render the JetpackProtectLogo component', () => { + it( 'validate the class name', () => { + render( ); + + expect( screen.getByLabelText( 'Jetpack Protect Logo' ) ).toHaveClass( testProps.className ); + } ); + } ); +} ); diff --git a/projects/js-packages/components/components/jetpack-protect-logo/types.ts b/projects/js-packages/components/components/jetpack-protect-logo/types.ts new file mode 100644 index 0000000000000..7060b82637e50 --- /dev/null +++ b/projects/js-packages/components/components/jetpack-protect-logo/types.ts @@ -0,0 +1,7 @@ +export type JetpackProtectLogoProps = { + className?: string; + width?: number; + height?: number; + showText?: boolean; + logoColor?: string; +}; diff --git a/projects/js-packages/components/index.ts b/projects/js-packages/components/index.ts index b4740fcff7404..fbb597ccf957a 100644 --- a/projects/js-packages/components/index.ts +++ b/projects/js-packages/components/index.ts @@ -16,6 +16,7 @@ Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. export { default as JetpackLogo } from './components/jetpack-logo'; export { default as JetpackSearchLogo } from './components/jetpack-search-logo'; +export { default as JetpackProtectLogo } from './components/jetpack-protect-logo'; export { default as JetpackVaultPressBackupLogo } from './components/jetpack-vaultpress-backup-logo'; export { default as JetpackVideoPressLogo } from './components/jetpack-videopress-logo'; export { default as getRedirectUrl } from './tools/jp-redirect'; diff --git a/projects/plugins/protect/changelog/use-logo-from-package b/projects/plugins/protect/changelog/use-logo-from-package new file mode 100644 index 0000000000000..6091f1215e714 --- /dev/null +++ b/projects/plugins/protect/changelog/use-logo-from-package @@ -0,0 +1,4 @@ +Significance: patch +Type: changed + +Use logo component from package diff --git a/projects/plugins/protect/src/js/components/admin-page/index.jsx b/projects/plugins/protect/src/js/components/admin-page/index.jsx index bdeee21f24b77..b4ef8c24bad6d 100644 --- a/projects/plugins/protect/src/js/components/admin-page/index.jsx +++ b/projects/plugins/protect/src/js/components/admin-page/index.jsx @@ -1,11 +1,14 @@ -import { AdminPage as JetpackAdminPage, Container } from '@automattic/jetpack-components'; +import { + AdminPage as JetpackAdminPage, + Container, + JetpackProtectLogo, +} from '@automattic/jetpack-components'; import { useConnection } from '@automattic/jetpack-connection'; import { __ } from '@wordpress/i18n'; import { useEffect } from 'react'; import { useNavigate } from 'react-router-dom'; import useNotices from '../../hooks/use-notices'; import useWafData from '../../hooks/use-waf-data'; -import Logo from '../logo'; import Notice from '../notice'; import Tabs, { Tab } from '../tabs'; import styles from './styles.module.scss'; @@ -28,7 +31,10 @@ const AdminPage = ( { children } ) => { } return ( - }> + } + > { notice && } diff --git a/projects/plugins/protect/src/js/components/logo/index.tsx b/projects/plugins/protect/src/js/components/logo/index.tsx deleted file mode 100644 index 3e02acf06aa5b..0000000000000 --- a/projects/plugins/protect/src/js/components/logo/index.tsx +++ /dev/null @@ -1,96 +0,0 @@ -import { Path, SVG } from '@wordpress/components'; -import React from 'react'; - -type HEXColorType = `#${ string }`; - -type LogoProps = { - iconColor: HEXColorType; - color: HEXColorType; -}; - -/** - * Protect Logo component - * - * @param {object} props - Component props - * @param {HEXColorType} props.color - Text color. - * @param {HEXColorType} props.iconColor - Icon color - * @return {React.ReactElement} Component template - */ -export default function Logo( { - iconColor = '#069E08', - color = '#000', -}: LogoProps ): React.ReactElement { - return ( - - - - - - - - - - - - - - - - - - - - - ); -} diff --git a/projects/plugins/protect/src/js/components/logo/stories/index.stories.tsx b/projects/plugins/protect/src/js/components/logo/stories/index.stories.tsx deleted file mode 100644 index 164640e03eaec..0000000000000 --- a/projects/plugins/protect/src/js/components/logo/stories/index.stories.tsx +++ /dev/null @@ -1,27 +0,0 @@ -import React from 'react'; -import Logo from '..'; - -export default { - title: 'Plugins/Protect/Logo', - component: Logo, - argTypes: { - iconColor: { - control: { - type: 'color', - }, - }, - color: { - control: { - type: 'color', - }, - }, - }, -}; - -const Template = args => ; - -export const _default = Template.bind( {} ); -_default.args = { - iconColor: '#069E08', - color: '#000', -}; diff --git a/projects/plugins/protect/src/js/routes/setup/index.jsx b/projects/plugins/protect/src/js/routes/setup/index.jsx index 3e82bf582e41c..cf64ede35a3b4 100644 --- a/projects/plugins/protect/src/js/routes/setup/index.jsx +++ b/projects/plugins/protect/src/js/routes/setup/index.jsx @@ -4,10 +4,10 @@ import { Col, Container, Text, + JetpackProtectLogo, } from '@automattic/jetpack-components'; import { createInterpolateElement } from '@wordpress/element'; import { __ } from '@wordpress/i18n'; -import Logo from '../../components/logo'; import ConnectedPricingTable from '../../components/pricing-table'; import useAnalyticsTracks from '../../hooks/use-analytics-tracks'; import styles from './styles.module.scss'; @@ -25,7 +25,7 @@ const SetupRoute = () => { moduleName={ __( 'Jetpack Protect', 'jetpack-protect' ) } header={
- + { createInterpolateElement( __(