Skip to content

Commit

Permalink
[docs-infra] Add the Base UI logo with copy functionality (mui#42446)
Browse files Browse the repository at this point in the history
  • Loading branch information
@danilo-leal @joserodolfofreitas
danilo-leal authored and joserodolfofreitas committed Jul 29, 2024
1 parent 403fc8c commit cf99653
Show file tree
Hide file tree
Showing 8 changed files with 203 additions and 125 deletions.
29 changes: 29 additions & 0 deletions docs/pages/_app.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,14 @@ import { pathnameToLanguage } from 'docs/src/modules/utils/helpers';
import getProductInfoFromUrl from 'docs/src/modules/utils/getProductInfoFromUrl';
import { DocsProvider } from '@mui/docs/DocsProvider';
import { mapTranslations } from '@mui/docs/i18n';
import SvgMuiLogomark, {
muiSvgLogoString,
muiSvgWordmarkString,
} from 'docs/src/icons/SvgMuiLogomark';
import SvgBaseUiLogo, {
baseSvgLogoString,
baseSvgWordmarkString,
} from 'docs/src/icons/SvgBaseUiLogo';
import './global.css';
import '../public/static/components-gallery/base-theme.css';
import config from '../config';
Expand Down Expand Up @@ -165,6 +173,9 @@ function AppWrapper(props) {
return {
metadata: '',
name: 'Material UI',
logo: SvgMuiLogomark,
logoSvg: muiSvgLogoString,
wordmarkSvg: muiSvgWordmarkString,
versions: [
{ text: `v${materialPkgJson.version}`, current: true },
{ text: `v5`, href: `https://mui.com${languagePrefix}/material-ui/getting-started/` },
Expand All @@ -184,6 +195,9 @@ function AppWrapper(props) {
return {
metadata: '',
name: 'Joy UI',
logo: SvgMuiLogomark,
logoSvg: muiSvgLogoString,
wordmarkSvg: muiSvgWordmarkString,
versions: [{ text: `v${joyPkgJson.version}`, current: true }],
};
}
Expand All @@ -192,6 +206,9 @@ function AppWrapper(props) {
return {
metadata: '',
name: 'MUI System',
logo: SvgMuiLogomark,
logoSvg: muiSvgLogoString,
wordmarkSvg: muiSvgWordmarkString,
versions: [
{ text: `v${systemPkgJson.version}`, current: true },
{ text: 'v5', href: `https://mui.com${languagePrefix}/system/getting-started/` },
Expand All @@ -208,6 +225,9 @@ function AppWrapper(props) {
return {
metadata: '',
name: 'Base UI',
logo: SvgBaseUiLogo,
logoSvg: baseSvgLogoString,
wordmarkSvg: baseSvgWordmarkString,
versions: [{ text: `v${basePkgJson.version}`, current: true }],
};
}
Expand All @@ -216,6 +236,9 @@ function AppWrapper(props) {
return {
metadata: '',
name: 'MUI Core',
logo: SvgMuiLogomark,
logoSvg: muiSvgLogoString,
wordmarkSvg: muiSvgWordmarkString,
versions: [
{ text: `v${materialPkgJson.version}`, current: true },
{
Expand All @@ -230,6 +253,9 @@ function AppWrapper(props) {
return {
metadata: '',
name: 'Docs-infra',
logo: SvgMuiLogomark,
logoSvg: muiSvgLogoString,
wordmarkSvg: muiSvgWordmarkString,
versions: [
{
text: 'v0.0.0',
Expand All @@ -243,6 +269,9 @@ function AppWrapper(props) {
return {
metadata: '',
name: 'Home docs',
logo: SvgMuiLogomark,
logoSvg: muiSvgLogoString,
wordmarkSvg: muiSvgWordmarkString,
versions: [
{
text: 'v0.0.0',
Expand Down
125 changes: 125 additions & 0 deletions docs/src/components/action/LogoWithCopyMenu.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,125 @@
import * as React from 'react';
import copy from 'clipboard-copy';
import { Link } from '@mui/docs/Link';
import { Portal } from '@mui/base/Portal';
import Box from '@mui/material/Box';
import Snackbar from '@mui/material/Snackbar';
import Menu from '@mui/material/Menu';
import MenuItem from '@mui/material/MenuItem';
import Slide from '@mui/material/Slide';
import TextFieldsRoundedIcon from '@mui/icons-material/TextFieldsRounded';
import CheckCircleRoundedIcon from '@mui/icons-material/CheckCircleRounded';
import { RootSvgProps } from 'docs/src/icons/RootSvg';
import SvgMuiLogomark, {
muiSvgLogoString,
muiSvgWordmarkString,
} from 'docs/src/icons/SvgMuiLogomark';

interface LogoWithCopyMenuProps {
logo?: React.ComponentType<RootSvgProps>;
logoSvgString?: string;
wordmarkSvgString?: string;
marginLeft?: boolean;
}

export default function LogoWithCopyMenu({
logo: LogoSvg = SvgMuiLogomark,
logoSvgString = muiSvgLogoString,
wordmarkSvgString = muiSvgWordmarkString,
marginLeft,
}: LogoWithCopyMenuProps) {
const [contextMenu, setContextMenu] = React.useState<{
mouseX: number;
mouseY: number;
} | null>(null);

const handleContextMenu = (event: React.MouseEvent) => {
event.preventDefault();
setContextMenu(
contextMenu === null
? {
mouseX: event.clientX + 8,
mouseY: event.clientY - 8,
}
: null,
);
};

const handleClose = () => {
setContextMenu(null);
};

const [copied, setCopied] = React.useState(false);
const handleCopy = (svgSnippet: string) => {
setCopied(true);
copy(svgSnippet).then(() => {
setTimeout(() => setCopied(false), 3500);
handleClose();
});
};

return (
<React.Fragment>
<Box
component={Link}
href="/"
aria-label="Go to homepage"
onContextMenu={handleContextMenu}
sx={{
cursor: 'default',
mr: 1,
ml: marginLeft ? 1.5 : undefined,
'& > svg': { m: '0 !important' }, // override the 2px margin-left coming from the Link component
}}
>
<LogoSvg height={28} width={28} />
</Box>
<Menu
open={contextMenu !== null}
onClose={handleClose}
anchorReference="anchorPosition"
anchorPosition={
contextMenu !== null ? { top: contextMenu.mouseY, left: contextMenu.mouseX } : undefined
}
sx={(theme) => ({
'& .MuiMenuItem-root': {
gap: 1,
'& path': {
fill: (theme.vars || theme).palette.text.tertiary,
color: (theme.vars || theme).palette.text.tertiary,
},
'&:hover, &:focus-visible': {
'& path': {
fill: (theme.vars || theme).palette.text.primary,
color: (theme.vars || theme).palette.text.primary,
},
},
},
})}
>
<MenuItem onClick={() => handleCopy(logoSvgString)}>
<LogoSvg height={16} width={18} />
Copy logo as SVG
</MenuItem>
<MenuItem onClick={() => handleCopy(wordmarkSvgString)}>
<TextFieldsRoundedIcon sx={{ fontSize: '18px' }} />
Copy wordmark as SVG
</MenuItem>
</Menu>
<Portal container={() => document.body}>
<Snackbar
open={copied}
onClose={handleClose}
anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
TransitionComponent={Slide}
message={
<Box sx={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
<CheckCircleRoundedIcon sx={{ fontSize: '18px', color: 'success.main' }} />
Logo SVG copied to clipboard!
</Box>
}
/>
</Portal>
</React.Fragment>
);
}
117 changes: 0 additions & 117 deletions docs/src/components/action/MuiLogoMenu.tsx
View file

This file was deleted.

28 changes: 28 additions & 0 deletions docs/src/icons/SvgBaseUiLogo.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
import * as React from 'react';
import RootSvg, { RootSvgProps } from 'docs/src/icons/RootSvg';

export default function SvgBaseUiLogo(props: RootSvgProps) {
return (
<RootSvg
xmlns="http://www.w3.org/2000/svg"
width={24}
height={24}
viewBox="0 0 24 24"
fill="none"
{...props}
>
<path
fillRule="evenodd"
clipRule="evenodd"
fill="#0073E6"
d="M2 0C6.97056 0 11 4.02944 11 9V12H2V0ZM12 24C17.5228 24 22 19.5228 22 14H2C2 19.5228 6.47715 24 12 24ZM21.3149 8.55585C21.7672 9.64778 22 10.8181 22 12H13V3C14.1819 3 15.3522 3.23279 16.4442 3.68508C17.5361 4.13738 18.5282 4.80031 19.364 5.63604C20.1997 6.47177 20.8626 7.46392 21.3149 8.55585Z"
/>
</RootSvg>
);
}

export const baseSvgLogoString = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M2 0C6.97056 0 11 4.02944 11 9V12H2V0ZM12 24C17.5228 24 22 19.5228 22 14H2C2 19.5228 6.47715 24 12 24ZM21.3149 8.55585C21.7672 9.64778 22 10.8181 22 12H13V3C14.1819 3 15.3522 3.23279 16.4442 3.68508C17.5361 4.13738 18.5282 4.80031 19.364 5.63604C20.1997 6.47177 20.8626 7.46392 21.3149 8.55585Z" fill="#0073E6"/>
</svg>`;

export const baseSvgWordmarkString = `<svg xmlns="http://www.w3.org/2000/svg" width="113" height="24" fill="none"><path fill="#0073E6" d="M12 24c5.523 0 10-4.477 10-10H2c0 5.523 4.477 10 10 10ZM2 0a9 9 0 0 1 9 9v3H2V0ZM22 12a9 9 0 0 0-9-9v9h9Z"/><path fill="#090B0B" fill-rule="evenodd" d="M40.112 2.34h-6.144V19.5h6.6c1.888 0 3.336-.4 4.344-1.2 1.024-.8 1.536-2 1.536-3.6v-.096c0-1.152-.28-2.048-.84-2.688-.56-.656-1.424-1.112-2.592-1.368.976-.304 1.672-.768 2.088-1.392.416-.64.624-1.392.624-2.256v-.096c0-1.568-.496-2.704-1.488-3.408-.976-.704-2.352-1.056-4.128-1.056Zm2.424 14.184c-.496.464-1.28.696-2.352.696h-3.096v-5.496h2.88c1.184 0 2.032.224 2.544.672.528.432.792 1.096.792 1.992v.096c0 .896-.256 1.576-.768 2.04Zm-.552-7.56c-.448.4-1.2.6-2.256.6h-2.64V4.62h2.592c1.024 0 1.776.184 2.256.552.48.368.72.96.72 1.776v.096c0 .88-.224 1.52-.672 1.92ZM53.442 19.74a5.397 5.397 0 0 1-2.088-.408 4.95 4.95 0 0 1-1.728-1.2c-.496-.544-.888-1.208-1.176-1.992-.288-.784-.432-1.688-.432-2.712v-.192c0-1.008.144-1.912.432-2.712.304-.816.704-1.504 1.2-2.064a5.26 5.26 0 0 1 1.776-1.32 5.123 5.123 0 0 1 2.136-.456c.96 0 1.752.208 2.376.624.624.4 1.12.912 1.488 1.536V6.948h2.904V19.5h-2.904v-2.064c-.176.304-.4.6-.672.888a4.689 4.689 0 0 1-.936.72 5.51 5.51 0 0 1-1.128.504 4.07 4.07 0 0 1-1.248.192Zm.696-2.304c.464 0 .904-.08 1.32-.24a3.034 3.034 0 0 0 1.08-.768c.304-.352.544-.784.72-1.296.176-.528.264-1.144.264-1.848v-.192c0-1.408-.296-2.448-.888-3.12-.592-.672-1.376-1.008-2.352-1.008-1.008 0-1.808.36-2.4 1.08-.592.72-.888 1.76-.888 3.12v.192c0 1.376.304 2.4.912 3.072.608.672 1.352 1.008 2.232 1.008Zm9.743 1.248c.912.704 2.184 1.056 3.816 1.056 1.616 0 2.856-.344 3.72-1.032.864-.704 1.296-1.696 1.296-2.976 0-.672-.112-1.224-.336-1.656a2.608 2.608 0 0 0-.912-1.08c-.4-.288-.896-.512-1.488-.672a13.956 13.956 0 0 0-1.968-.432c-.496-.08-.912-.168-1.248-.264a4.166 4.166 0 0 1-.816-.312 1.153 1.153 0 0 1-.408-.432 1.435 1.435 0 0 1-.12-.6c0-.448.176-.808.528-1.08.352-.272.84-.408 1.464-.408.672 0 1.176.136 1.512.408.352.272.592.696.72 1.272h2.688c-.08-.704-.264-1.296-.552-1.776a3.274 3.274 0 0 0-1.056-1.176 4.166 4.166 0 0 0-1.512-.648 8.065 8.065 0 0 0-1.8-.192 6.26 6.26 0 0 0-1.728.24c-.56.16-1.064.4-1.512.72a3.563 3.563 0 0 0-1.056 1.176c-.272.464-.408 1.008-.408 1.632 0 .592.08 1.096.24 1.512.16.416.416.776.768 1.08.368.304.84.552 1.416.744.576.192 1.28.352 2.112.48.928.16 1.608.36 2.04.6.432.24.648.616.648 1.128 0 .528-.184.928-.552 1.2-.352.272-.92.408-1.704.408-.864 0-1.48-.176-1.848-.528-.352-.352-.568-.848-.648-1.488H62.44c.064 1.344.544 2.376 1.44 3.096Zm13.945.624c.784.288 1.64.432 2.568.432 1.616 0 2.928-.344 3.936-1.032 1.008-.704 1.616-1.72 1.824-3.048h-2.808c-.112.608-.4 1.08-.864 1.416-.464.336-1.136.504-2.016.504-1.088 0-1.928-.32-2.52-.96-.576-.64-.888-1.56-.936-2.76h9.192v-.84c0-1.12-.168-2.08-.504-2.88-.32-.8-.752-1.456-1.296-1.968a5.072 5.072 0 0 0-1.896-1.128 6.87 6.87 0 0 0-2.232-.36c-.896 0-1.728.16-2.496.48a5.686 5.686 0 0 0-1.968 1.32c-.56.56-1 1.24-1.32 2.04-.304.784-.456 1.664-.456 2.64v.192c0 .992.152 1.88.456 2.664.32.784.76 1.456 1.32 2.016a6.258 6.258 0 0 0 2.016 1.272ZM82.41 9.54c.528.496.832 1.288.912 2.376h-6.264c.144-.976.496-1.736 1.056-2.28.56-.56 1.28-.84 2.16-.84.912 0 1.624.248 2.136.744Zm26.518 9.96V2.34h3.216V19.5h-3.216Zm-17.104-6.528c0 4.416 2.448 6.768 6.744 6.768 4.536 0 6.96-2.472 6.96-6.96V2.34h-3.216v10.176c0 3.552-1.248 4.656-3.72 4.656-2.544 0-3.552-1.296-3.552-4.44V2.34h-3.216v10.632Z" clip-rule="evenodd"/></svg>`;
Loading

0 comments on commit cf99653

Please sign in to comment.