Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(v10-banner): added a banner #3769

Merged
merged 2 commits into from
Oct 13, 2023
Merged

fix(v10-banner): added a banner #3769

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
1b6bce9
fix(v10-banner): added a banner
sstrubberg Oct 9, 2023
20f202c
fix(banner): updated v11 link in the hero, removed CTA from banner
sstrubberg Oct 13, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 32 additions & 0 deletions src/components/Banner/Banner.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
import React from 'react';
import { Button } from 'carbon-components-react';
import { ArrowRight16 } from '@carbon/icons-react';

import {
banner,
bannerText,
bannerDetails,
buttonBanner,
} from './Banner.module.scss';

const Banner = () => {
return (
<div aria-label="banner" className={banner}>
<p className={bannerText}>
<strong>
Carbon v10 is in maintenance mode. Support will end on Sept. 30, 2024.
</strong>
<span className={bannerDetails}>Start using v11 now!</span>
sstrubberg marked this conversation as resolved.
Show resolved Hide resolved
</p>
<Button
href="https://github.com/carbon-design-system/carbon/blob/main/docs/release-schedule.md"
className={buttonBanner}
kind="ghost"
renderIcon={ArrowRight16}>
Release schedule
</Button>
</div>
);
};

export default Banner;
50 changes: 50 additions & 0 deletions src/components/Banner/Banner.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
// banner styles
.banner {
position: fixed;
top: 0;
z-index: 99999;
display: flex;
width: 100%;
height: 48px;
justify-content: space-between;

background: $blue-70;
color: $text-on-color;
}

.banner-text {
display: none;

@include carbon--breakpoint('md') {
@include carbon--type-style('body-short-01');

display: block;
padding: 15px 0 0 $spacing-05;
}
}

.banner-details {
display: none;

@include carbon--breakpoint('lg') {
display: inline;
padding-left: $spacing-03;
}
}

// override carbon button styles
.buttonBanner,
a[class*='buttonBanner'] {
width: 100%;
max-width: 100%;
color: $text-04;

@include carbon--breakpoint('md') {
width: auto;
}

&:hover {
background: $blue-70-hover;
color: $text-04;
}
}
3 changes: 3 additions & 0 deletions src/components/Banner/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
import Banner from './Banner';

export default Banner;
2 changes: 2 additions & 0 deletions src/gatsby-theme-carbon/components/Layout.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import Header from 'gatsby-theme-carbon/src/components/Header';
import Switcher from 'gatsby-theme-carbon/src/components/Switcher';
import Footer from 'gatsby-theme-carbon/src/components/Footer';
import Container from 'gatsby-theme-carbon/src/components/Container';
import Banner from '../../components/Banner';

import 'gatsby-theme-carbon/src/styles/index.scss';
import { layout } from '../../styles/Layout.module.scss';
Expand Down Expand Up @@ -43,6 +44,7 @@ const Layout = ({
pageDescription={pageDescription}
pageKeywords={pageKeywords}
/>
{homepage && <Banner />}
<Header />
<Switcher />
<LeftNav homepage={homepage} is404Page={is404} theme={theme} />
Expand Down
Loading