Skip to content

Commit

Permalink
Improve Github button
Browse files Browse the repository at this point in the history
  • Loading branch information
@cdedreuille
cdedreuille committed Mar 8, 2024
1 parent a5cc6e4 commit 64ce22c
Show file tree
Hide file tree
Showing 3 changed files with 126 additions and 114 deletions.
78 changes: 27 additions & 51 deletions src/components/GithubButton.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,22 +1,37 @@
import React, { useEffect, useState } from 'react';
import React from 'react';
import { styled } from '@storybook/theming';
import { styles } from '@storybook/design-system';

const Svg = styled.svg`
const Wrapper = styled.div<{ inverse?: boolean }>`
display: flex;
align-items: center;
justify-content: center;
border: 1px solid rgba(27, 31, 36, 0.15);
/* border: props.inverse ? 'rgba(255, 255, 255, 0.2)' : styles.color.border */
border: ${(props) =>
`1px solid ${props.inverse ? 'rgba(255, 255, 255, 0.2)' : styles.color.border}`};
height: 32px;
border-radius: 64px;
cursor: pointer;
gap: 10px;
padding: 0 8px;
`;

const Svg = styled.svg<{ inverse?: boolean }>`
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif;
white-space: nowrap;
font-size: 11px;
font-weight: 600;
line-height: 14px;
cursor: pointer;
user-select: none;
color: #24292f;
color: ${(props) => (props.inverse ? styles.color.lightest : '#24292f')};
width: 14;
height: 14;
display: inline-block;
vertical-align: text-top;
fill: currentColor;
overflow: visible;
margin-right: 4px;
`;

const Star = styled.a`
Expand All @@ -27,78 +42,38 @@ const Star = styled.a`
position: relative;
display: inline-flex;
height: 14px;
padding: 2px 5px;
font-size: 11px;
font-weight: 600;
line-height: 14px;
vertical-align: bottom;
cursor: pointer;
user-select: none;
background-repeat: repeat-x;
background-position: -1px -1px;
background-size: 110% 110%;
border: 1px solid rgba(27, 31, 36, 0.15);
color: #24292f;
background-color: #ebf0f4;
background-image: linear-gradient(180deg, #f6f8fa, #ebf0f4 90%);
border-radius: 0.25em 0 0 0.25em;
&:focus,
&:hover {
background-color: #e9ebef;
background-position: 0 -0.5em;
background-image: url(
data:image/svg + xml,
%3csvgxmlns='http://www.w3.org/2000/svg'%3e%3clinearGradientid='o'x2='0'y2='1'%3e%3cstopstop-color='%23f3f4f6'/%3e%3cstopoffset='90%25'stop-color='%23e9ebef'/%3e%3c/linearGradient%3e%3crectwidth='100%25'height='100%25'fill='url(%23o)'/%3e%3c/svg%3e
);
background-image: linear-gradient(180deg, #f3f4f6, #e9ebef 90%);
}
&:active {
background-color: #e5e9ed;
box-shadow: inset 0 0.15em 0.3em rgb(27 31 36 / 15%);
background-image: none;
}
`;

const Count = styled.a`
const Count = styled.a<{ inverse?: boolean }>`
box-sizing: content-box;
text-align: left;
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif;
font-variant-numeric: tabular-nums;
white-space: nowrap;
text-decoration: none;
position: relative;
display: inline-flex;
height: 14px;
padding: 2px 5px;
font-size: 11px;
font-weight: 600;
line-height: 14px;
vertical-align: bottom;
cursor: pointer;
user-select: none;
background-repeat: repeat-x;
background-position: -1px -1px;
background-size: 110% 110%;
border: 1px solid rgba(27, 31, 36, 0.15);
border-left: 0;
border-radius: 0 0.25em 0.25em 0;
color: #24292f;
background-color: #fff;
color: ${(props) => (props.inverse ? styles.color.lightest : '#24292f')};
transition: color 0.2s ease;
&:focus,
&:hover {
color: #0969da;
color: ${(props) => (props.inverse ? styles.color.lightest : '#0969da')};
}
`;

const Wrapper = styled.div`
display: flex;
`;

export const GithubButton = ({ starCount }: { starCount: number }) => (
<Wrapper className="chromatic-ignore">
export const GithubButton = ({ starCount, inverse }: { starCount: number; inverse: boolean }) => (
<Wrapper className="chromatic-ignore" inverse={inverse}>
<Star
href="https://github.com/storybookjs/storybook"
rel="noopener"
Expand All @@ -111,19 +86,20 @@ export const GithubButton = ({ starCount }: { starCount: number }) => (
height="14"
className="octicon octicon-mark-github"
aria-hidden="true"
inverse={inverse}
>
<path
fillRule="evenodd"
d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"
/>
</Svg>
<span>Star</span>
</Star>
<Count
href="https://github.com/storybookjs/storybook/stargazers"
rel="noopener"
target="_blank"
aria-label={`${starCount} stargazers on GitHub`}
inverse={inverse}
>
{starCount.toLocaleString()}
</Count>
Expand Down
2 changes: 1 addition & 1 deletion src/components/Nav/Nav.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -82,7 +82,7 @@ export const FullStack = () => (
link="https://storybook.js.org/blog/storybook-lazy-compilation-for-webpack/"
githubStarCount={73724}
/>
<Nav apiKey="ALGOLIA_API_KEY" version="6.5" activeSection="showcase" />
<Nav apiKey="ALGOLIA_API_KEY" version="6.5" activeSection="showcase" githubStarCount={82000} />
<SubNav>
<SubNavBreadcrumb tertiary href="/back">
<Icon icon="arrowleft" />
Expand Down
160 changes: 98 additions & 62 deletions src/components/Nav/Nav.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import { Search } from '../Search';
import { TabletMenu } from './TabletMenu';
import { MobileMenu } from './MobileMenu';
import { LinksContext } from '../links-context';
import { GithubButton } from '../GithubButton';

const navBreakpoints = {
desktop: 978,
Expand Down Expand Up @@ -76,13 +77,10 @@ const Wrapper = styled.div<{ inverse?: boolean }>`

const NavContainer = styled.nav`
${pageMargins}
display: flex;
align-items: center;
justify-content: space-between;
@media (min-width: ${navBreakpoints.desktop}px) {
justify-content: flex-start;
}
`;

// Tablet nav 600 - desktop
Expand Down Expand Up @@ -118,6 +116,7 @@ interface NavProps {
version: string;
apiKey: string;
activeSection?: 'home' | 'docs' | 'showcase' | 'blog';
githubStarCount: number;
}

const NavLinks = styled.div`
Expand All @@ -133,78 +132,115 @@ const NavLinks = styled.div`
}
`;

const Left = styled.div`
display: flex;
align-items: center;
flex-direction: row;
`;

const Right = styled.div`
display: flex;
align-items: center;
flex-direction: row;
gap: 12px;
`;

const GithubButtonWrapper = styled.div`
margin-left: ${spacing.padding.medium}px;
flex: none;
display: none;
@media (min-width: 1024px) {
display: block;
}
`;

export const Nav: FunctionComponent<NavProps> = ({
inverse,
monochrome,
version = '6.5',
apiKey,
activeSection = 'home',
githubStarCount = 8000,
}) => {
const navLinks = useContext(LinksContext);

return (
<Wrapper inverse={inverse}>
<NavContainer>
<LogoNavItem
aria-label="home"
href={navLinks.home.url}
LinkWrapper={navLinks.home.linkWrapper}
>
{inverse ? (
<StorybookLogoInverse role="presentation" />
) : (
<StorybookLogo role="presentation" />
)}
</LogoNavItem>
<NavLinks>
<NavItem
active={activeSection === 'docs'}
monochrome={monochrome}
variant={inverse ? 'inverse' : 'default'}
href={navLinks.guides.url}
LinkWrapper={navLinks.showcase.linkWrapper}
<Left>
<LogoNavItem
aria-label="home"
href={navLinks.home.url}
LinkWrapper={navLinks.home.linkWrapper}
>
Docs
</NavItem>
<NavItem
active={activeSection === 'showcase'}
{inverse ? (
<StorybookLogoInverse role="presentation" />
) : (
<StorybookLogo role="presentation" />
)}
</LogoNavItem>
<NavLinks>
<NavItem
active={activeSection === 'docs'}
monochrome={monochrome}
variant={inverse ? 'inverse' : 'default'}
href={navLinks.guides.url}
LinkWrapper={navLinks.showcase.linkWrapper}
>
Docs
</NavItem>
<NavItem
active={activeSection === 'showcase'}
monochrome={monochrome}
variant={inverse ? 'inverse' : 'default'}
href={navLinks.showcase.url}
LinkWrapper={navLinks.showcase.linkWrapper}
>
Showcase
</NavItem>
<NavItem
active={activeSection === 'blog'}
monochrome={monochrome}
variant={inverse ? 'inverse' : 'default'}
href={navLinks.blog.url}
LinkWrapper={navLinks.blog.linkWrapper}
>
Blog
</NavItem>
<NavItem
active={activeSection === 'blog'}
monochrome={monochrome}
variant={inverse ? 'inverse' : 'default'}
href={navLinks.chromatic.url}
LinkWrapper={navLinks.chromatic.linkWrapper}
>
Visual Test
<Arrow size={8} />
</NavItem>
<NavItem
monochrome={monochrome}
variant={inverse ? 'inverse' : 'default'}
href={navLinks.enterprise.url}
LinkWrapper={navLinks.enterprise.linkWrapper}
>
Enterprise
<Arrow size={8} />
</NavItem>
</NavLinks>
</Left>
<Right>
<GithubButtonWrapper>
<GithubButton starCount={githubStarCount} inverse={inverse} />
</GithubButtonWrapper>
<GlobalSearch
monochrome={monochrome}
variant={inverse ? 'inverse' : 'default'}
href={navLinks.showcase.url}
LinkWrapper={navLinks.showcase.linkWrapper}
>
Showcase
</NavItem>
<NavItem
active={activeSection === 'blog'}
monochrome={monochrome}
variant={inverse ? 'inverse' : 'default'}
href={navLinks.blog.url}
LinkWrapper={navLinks.blog.linkWrapper}
>
Blog
</NavItem>
<NavItem
active={activeSection === 'blog'}
monochrome={monochrome}
variant={inverse ? 'inverse' : 'default'}
href={navLinks.chromatic.url}
LinkWrapper={navLinks.chromatic.linkWrapper}
>
Visual Test
<Arrow size={8} />
</NavItem>
<NavItem
monochrome={monochrome}
variant={inverse ? 'inverse' : 'default'}
href={navLinks.enterprise.url}
LinkWrapper={navLinks.enterprise.linkWrapper}
>
Enterprise
<Arrow size={8} />
</NavItem>
</NavLinks>
<GlobalSearch monochrome={monochrome} apiKey={apiKey} version={version} inverse={inverse} />
apiKey={apiKey}
version={version}
inverse={inverse}
/>
</Right>
{/* Collapsed navs for tablet and mobile */}
<TabletNav navLinks={navLinks} inverse={inverse} monochrome={monochrome} />
<MobileNav
Expand Down

0 comments on commit 64ce22c

Please sign in to comment.