Skip to content

Commit 92d0cb0

Browse files
author
Eugene Manuilov
authored
Merge pull request #10734 from google/enhancement/10703-banner-component
BNR Banner component
2 parents b0ba3f1 + ced5b37 commit 92d0cb0

38 files changed

Lines changed: 2195 additions & 9 deletions

‎assets/js/components/Banner/CTAButton.js‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
/**
2+
* Site Kit by Google, Copyright 2025 Google LLC
3+
*
4+
* Licensed under the Apache License, Version 2.0 (the "License");
5+
* you may not use this file except in compliance with the License.
6+
* You may obtain a copy of the License at
7+
*
8+
* https://www.apache.org/licenses/LICENSE-2.0
9+
*
10+
* Unless required by applicable law or agreed to in writing, software
11+
* distributed under the License is distributed on an "AS IS" BASIS,
12+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
* See the License for the specific language governing permissions and
14+
* limitations under the License.
15+
*/
16+
17+
/**
18+
* External dependencies
19+
*/
20+
import PropTypes from 'prop-types';
21+
22+
/**
23+
* Internal dependencies
24+
*/
25+
import { Button } from 'googlesitekit-components';
26+
27+
export default function CTAButton( { label, disabled, onClick, href } ) {
28+
if ( ! label || ( ! onClick && ! href ) ) {
29+
return null;
30+
}
31+
32+
return (
33+
<Button
34+
className="googlesitekit-banner__cta"
35+
disabled={ disabled }
36+
onClick={ onClick }
37+
href={ href }
38+
>
39+
{ label }
40+
</Button>
41+
);
42+
}
43+
44+
// eslint-disable-next-line sitekit/acronym-case
45+
CTAButton.propTypes = {
46+
label: PropTypes.string.isRequired,
47+
disabled: PropTypes.bool,
48+
onClick: PropTypes.func.isRequired,
49+
href: PropTypes.string,
50+
};

‎assets/js/components/Banner/Description.js‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
/**
2+
* Site Kit by Google, Copyright 2025 Google LLC
3+
*
4+
* Licensed under the Apache License, Version 2.0 (the "License");
5+
* you may not use this file except in compliance with the License.
6+
* You may obtain a copy of the License at
7+
*
8+
* https://www.apache.org/licenses/LICENSE-2.0
9+
*
10+
* Unless required by applicable law or agreed to in writing, software
11+
* distributed under the License is distributed on an "AS IS" BASIS,
12+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
* See the License for the specific language governing permissions and
14+
* limitations under the License.
15+
*/
16+
17+
/**
18+
* External dependencies
19+
*/
20+
import classnames from 'classnames';
21+
import PropTypes from 'prop-types';
22+
23+
export default function Description( { className, children } ) {
24+
return (
25+
<div
26+
className={ classnames(
27+
'googlesitekit-banner__description',
28+
className
29+
) }
30+
>
31+
{ children }
32+
</div>
33+
);
34+
}
35+
36+
Description.propTypes = {
37+
className: PropTypes.string,
38+
children: PropTypes.node,
39+
};

‎assets/js/components/Banner/DismissButton.js‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
/**
2+
* Site Kit by Google, Copyright 2025 Google LLC
3+
*
4+
* Licensed under the Apache License, Version 2.0 (the "License");
5+
* you may not use this file except in compliance with the License.
6+
* You may obtain a copy of the License at
7+
*
8+
* https://www.apache.org/licenses/LICENSE-2.0
9+
*
10+
* Unless required by applicable law or agreed to in writing, software
11+
* distributed under the License is distributed on an "AS IS" BASIS,
12+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
* See the License for the specific language governing permissions and
14+
* limitations under the License.
15+
*/
16+
17+
/**
18+
* External dependencies
19+
*/
20+
import PropTypes from 'prop-types';
21+
22+
/**
23+
* WordPress dependencies
24+
*/
25+
import { __ } from '@wordpress/i18n';
26+
27+
/**
28+
* Internal dependencies
29+
*/
30+
import { Button } from 'googlesitekit-components';
31+
32+
export default function DismissButton( {
33+
label = __( 'Maybe later', 'google-site-kit' ),
34+
onClick,
35+
disabled,
36+
} ) {
37+
if ( ! onClick ) {
38+
return null;
39+
}
40+
41+
return (
42+
<Button onClick={ onClick } tertiary disabled={ disabled }>
43+
{ label }
44+
</Button>
45+
);
46+
}
47+
48+
DismissButton.propTypes = {
49+
label: PropTypes.string,
50+
onClick: PropTypes.func.isRequired,
51+
disabled: PropTypes.bool,
52+
};

‎assets/js/components/Banner/Footer.js‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
/**
2+
* Site Kit by Google, Copyright 2025 Google LLC
3+
*
4+
* Licensed under the Apache License, Version 2.0 (the "License");
5+
* you may not use this file except in compliance with the License.
6+
* You may obtain a copy of the License at
7+
*
8+
* https://www.apache.org/licenses/LICENSE-2.0
9+
*
10+
* Unless required by applicable law or agreed to in writing, software
11+
* distributed under the License is distributed on an "AS IS" BASIS,
12+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
* See the License for the specific language governing permissions and
14+
* limitations under the License.
15+
*/
16+
17+
/**
18+
* External dependencies
19+
*/
20+
import classnames from 'classnames';
21+
import PropTypes from 'prop-types';
22+
23+
export default function Footer( { className, children } ) {
24+
return (
25+
<div
26+
className={ classnames(
27+
'googlesitekit-banner__footer',
28+
className
29+
) }
30+
>
31+
{ children }
32+
</div>
33+
);
34+
}
35+
36+
Footer.propTypes = {
37+
className: PropTypes.string,
38+
children: PropTypes.node,
39+
};

‎assets/js/components/Banner/HelpText.js‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
/**
2+
* Site Kit by Google, Copyright 2025 Google LLC
3+
*
4+
* Licensed under the Apache License, Version 2.0 (the "License");
5+
* you may not use this file except in compliance with the License.
6+
* You may obtain a copy of the License at
7+
*
8+
* https://www.apache.org/licenses/LICENSE-2.0
9+
*
10+
* Unless required by applicable law or agreed to in writing, software
11+
* distributed under the License is distributed on an "AS IS" BASIS,
12+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
* See the License for the specific language governing permissions and
14+
* limitations under the License.
15+
*/
16+
17+
/**
18+
* External dependencies
19+
*/
20+
import classnames from 'classnames';
21+
import PropTypes from 'prop-types';
22+
23+
export default function HelpText( { className, children } ) {
24+
return (
25+
<p
26+
className={ classnames(
27+
'googlesitekit-banner__help-text',
28+
className
29+
) }
30+
>
31+
{ children }
32+
</p>
33+
);
34+
}
35+
36+
HelpText.propTypes = {
37+
className: PropTypes.string,
38+
children: PropTypes.node,
39+
};

‎assets/js/components/Banner/LearnMoreLink.js‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
/**
2+
* Site Kit by Google, Copyright 2025 Google LLC
3+
*
4+
* Licensed under the Apache License, Version 2.0 (the "License");
5+
* you may not use this file except in compliance with the License.
6+
* You may obtain a copy of the License at
7+
*
8+
* https://www.apache.org/licenses/LICENSE-2.0
9+
*
10+
* Unless required by applicable law or agreed to in writing, software
11+
* distributed under the License is distributed on an "AS IS" BASIS,
12+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
* See the License for the specific language governing permissions and
14+
* limitations under the License.
15+
*/
16+
17+
/**
18+
* External dependencies
19+
*/
20+
import PropTypes from 'prop-types';
21+
22+
/**
23+
* WordPress dependencies
24+
*/
25+
import { __ } from '@wordpress/i18n';
26+
27+
/**
28+
* Internal dependencies
29+
*/
30+
import Link from '../Link';
31+
32+
export default function LearnMoreLink( {
33+
href,
34+
className,
35+
label = __( 'Learn more', 'google-site-kit' ),
36+
} ) {
37+
if ( ! href ) {
38+
return null;
39+
}
40+
41+
return (
42+
<Link href={ href } className={ className } external>
43+
{ label }
44+
</Link>
45+
);
46+
}
47+
48+
LearnMoreLink.propTypes = {
49+
href: PropTypes.string.isRequired,
50+
className: PropTypes.string,
51+
label: PropTypes.string,
52+
};

‎assets/js/components/Banner/Title.js‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
/**
2+
* Site Kit by Google, Copyright 2025 Google LLC
3+
*
4+
* Licensed under the Apache License, Version 2.0 (the "License");
5+
* you may not use this file except in compliance with the License.
6+
* You may obtain a copy of the License at
7+
*
8+
* https://www.apache.org/licenses/LICENSE-2.0
9+
*
10+
* Unless required by applicable law or agreed to in writing, software
11+
* distributed under the License is distributed on an "AS IS" BASIS,
12+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
* See the License for the specific language governing permissions and
14+
* limitations under the License.
15+
*/
16+
17+
/**
18+
* External dependencies
19+
*/
20+
import classnames from 'classnames';
21+
import PropTypes from 'prop-types';
22+
23+
export default function Title( { className, children } ) {
24+
return (
25+
<p className={ classnames( 'googlesitekit-banner__title', className ) }>
26+
{ children }
27+
</p>
28+
);
29+
}
30+
31+
Title.propTypes = {
32+
className: PropTypes.string,
33+
children: PropTypes.node,
34+
};

0 commit comments

Comments
 (0)