Skip to content

Commit

Permalink
[docs] Add introduction Base component demos & general uplift (#33896)
Browse files Browse the repository at this point in the history 
Co-authored-by: Michał Dudak <michal@dudak.me>
Co-authored-by: Olivier Tassinari <olivier.tassinari@gmail.com>
  • Loading branch information
@danilo-leal @michaldudak @oliviertassinari
3 people committed Aug 29, 2022
1 parent 0547ace commit b73c194
Show file tree
Hide file tree
Showing 105 changed files with 3,748 additions and 1,013 deletions.
37 changes: 24 additions & 13 deletions docs/data/base/components/badge/AccessibleBadges.js
View file
Expand Up @@ -3,7 +3,17 @@ import { styled } from '@mui/system';
import BadgeUnstyled, { badgeUnstyledClasses } from '@mui/base/BadgeUnstyled';
import MailIcon from '@mui/icons-material/Mail';

const StyledBadge = styled(BadgeUnstyled)`
const blue = {
500: '#007FFF',
};

const grey = {
300: '#afb8c1',
900: '#24292f',
};

const StyledBadge = styled(BadgeUnstyled)(
({ theme }) => `
box-sizing: border-box;
margin: 0;
padding: 0;
Expand All @@ -16,25 +26,26 @@ const StyledBadge = styled(BadgeUnstyled)`
& .${badgeUnstyledClasses.badge} {
z-index: auto;
min-width: 20px;
height: 20px;
position: absolute;
top: 0;
right: 0;
min-width: 22px;
height: 22px;
padding: 0 6px;
color: #fff;
font-weight: 400;
font-weight: 600;
font-size: 12px;
line-height: 20px;
line-height: 22px;
white-space: nowrap;
text-align: center;
background: #07f;
border-radius: 10px;
box-shadow: 0 0 0 1px #fff;
position: absolute;
top: 0;
right: 0;
border-radius: 12px;
background: ${blue[500]};
box-shadow: 0px 4px 6x ${theme.palette.mode === 'dark' ? grey[900] : grey[300]};
transform: translate(50%, -50%);
transform-origin: 100% 0;
transform-origin: 100% 0;
}
`;
`,
);

function notificationsLabel(count) {
if (count === 0) {
Expand Down
37 changes: 24 additions & 13 deletions docs/data/base/components/badge/AccessibleBadges.tsx
View file
Expand Up @@ -3,7 +3,17 @@ import { styled } from '@mui/system';
import BadgeUnstyled, { badgeUnstyledClasses } from '@mui/base/BadgeUnstyled';
import MailIcon from '@mui/icons-material/Mail';

const StyledBadge = styled(BadgeUnstyled)`
const blue = {
500: '#007FFF',
};

const grey = {
300: '#afb8c1',
900: '#24292f',
};

const StyledBadge = styled(BadgeUnstyled)(
({ theme }) => `
box-sizing: border-box;
margin: 0;
padding: 0;
Expand All @@ -16,25 +26,26 @@ const StyledBadge = styled(BadgeUnstyled)`
& .${badgeUnstyledClasses.badge} {
z-index: auto;
min-width: 20px;
height: 20px;
position: absolute;
top: 0;
right: 0;
min-width: 22px;
height: 22px;
padding: 0 6px;
color: #fff;
font-weight: 400;
font-weight: 600;
font-size: 12px;
line-height: 20px;
line-height: 22px;
white-space: nowrap;
text-align: center;
background: #07f;
border-radius: 10px;
box-shadow: 0 0 0 1px #fff;
position: absolute;
top: 0;
right: 0;
border-radius: 12px;
background: ${blue[500]};
box-shadow: 0px 4px 6x ${theme.palette.mode === 'dark' ? grey[900] : grey[300]};
transform: translate(50%, -50%);
transform-origin: 100% 0;
transform-origin: 100% 0;
}
`;
`,
);

function notificationsLabel(count: number) {
if (count === 0) {
Expand Down
35 changes: 23 additions & 12 deletions docs/data/base/components/badge/BadgeMax.js
View file
Expand Up @@ -4,7 +4,17 @@ import { styled } from '@mui/system';
import BadgeUnstyled, { badgeUnstyledClasses } from '@mui/base/BadgeUnstyled';
import MailIcon from '@mui/icons-material/Mail';

const StyledBadge = styled(BadgeUnstyled)`
const blue = {
500: '#007FFF',
};

const grey = {
300: '#afb8c1',
900: '#24292f',
};

const StyledBadge = styled(BadgeUnstyled)(
({ theme }) => `
box-sizing: border-box;
margin: 0;
padding: 0;
Expand All @@ -17,25 +27,26 @@ const StyledBadge = styled(BadgeUnstyled)`
& .${badgeUnstyledClasses.badge} {
z-index: auto;
min-width: 20px;
height: 20px;
position: absolute;
top: 0;
right: 0;
min-width: 22px;
height: 22px;
padding: 0 6px;
color: #fff;
font-weight: 400;
font-weight: 600;
font-size: 12px;
line-height: 20px;
line-height: 22px;
white-space: nowrap;
text-align: center;
background: #07f;
border-radius: 10px;
box-shadow: 0 0 0 1px #fff;
position: absolute;
top: 0;
right: 0;
border-radius: 12px;
background: ${blue[500]};
box-shadow: 0px 4px 6x ${theme.palette.mode === 'dark' ? grey[900] : grey[300]};
transform: translate(50%, -50%);
transform-origin: 100% 0;
}
`;
`,
);

export default function BadgeMax() {
return (
Expand Down
35 changes: 23 additions & 12 deletions docs/data/base/components/badge/BadgeMax.tsx
View file
Expand Up @@ -4,7 +4,17 @@ import { styled } from '@mui/system';
import BadgeUnstyled, { badgeUnstyledClasses } from '@mui/base/BadgeUnstyled';
import MailIcon from '@mui/icons-material/Mail';

const StyledBadge = styled(BadgeUnstyled)`
const blue = {
500: '#007FFF',
};

const grey = {
300: '#afb8c1',
900: '#24292f',
};

const StyledBadge = styled(BadgeUnstyled)(
({ theme }) => `
box-sizing: border-box;
margin: 0;
padding: 0;
Expand All @@ -17,25 +27,26 @@ const StyledBadge = styled(BadgeUnstyled)`
& .${badgeUnstyledClasses.badge} {
z-index: auto;
min-width: 20px;
height: 20px;
position: absolute;
top: 0;
right: 0;
min-width: 22px;
height: 22px;
padding: 0 6px;
color: #fff;
font-weight: 400;
font-weight: 600;
font-size: 12px;
line-height: 20px;
line-height: 22px;
white-space: nowrap;
text-align: center;
background: #07f;
border-radius: 10px;
box-shadow: 0 0 0 1px #fff;
position: absolute;
top: 0;
right: 0;
border-radius: 12px;
background: ${blue[500]};
box-shadow: 0px 4px 6x ${theme.palette.mode === 'dark' ? grey[900] : grey[300]};
transform: translate(50%, -50%);
transform-origin: 100% 0;
}
`;
`,
);

export default function BadgeMax() {
return (
Expand Down
39 changes: 24 additions & 15 deletions docs/data/base/components/badge/BadgeVisibility.js
View file
Expand Up @@ -10,7 +10,17 @@ import MailIcon from '@mui/icons-material/Mail';
import Switch from '@mui/material/Switch';
import FormControlLabel from '@mui/material/FormControlLabel';

const StyledBadge = styled(BadgeUnstyled)`
const blue = {
500: '#007FFF',
};

const grey = {
300: '#afb8c1',
900: '#24292f',
};

const StyledBadge = styled(BadgeUnstyled)(
({ theme }) => `
box-sizing: border-box;
margin: 0;
padding: 0;
Expand All @@ -23,32 +33,31 @@ const StyledBadge = styled(BadgeUnstyled)`
& .${badgeUnstyledClasses.badge} {
z-index: auto;
min-width: 20px;
height: 20px;
position: absolute;
top: 0;
right: 0;
min-width: 22px;
height: 22px;
padding: 0 6px;
color: #fff;
font-weight: 400;
font-weight: 600;
font-size: 12px;
line-height: 20px;
line-height: 22px;
white-space: nowrap;
text-align: center;
background: #07f;
border-radius: 10px;
box-shadow: 0 0 0 1px #fff;
position: absolute;
top: 0;
right: 0;
border-radius: 12px;
background: ${blue[500]};
box-shadow: 0px 4px 6x ${theme.palette.mode === 'dark' ? grey[900] : grey[300]};
transform: translate(50%, -50%);
transform-origin: 100% 0;
opacity: 1;
transition: opacity 0.2s ease-in-out;
transform-origin: 100% 0;
}
& .${badgeUnstyledClasses.invisible} {
opacity: 0;
pointer-events: none;
}
`;
`,
);

export default function BadgeVisibility() {
const [count, setCount] = React.useState(1);
Expand Down
39 changes: 24 additions & 15 deletions docs/data/base/components/badge/BadgeVisibility.tsx
View file
Expand Up @@ -10,7 +10,17 @@ import MailIcon from '@mui/icons-material/Mail';
import Switch from '@mui/material/Switch';
import FormControlLabel from '@mui/material/FormControlLabel';

const StyledBadge = styled(BadgeUnstyled)`
const blue = {
500: '#007FFF',
};

const grey = {
300: '#afb8c1',
900: '#24292f',
};

const StyledBadge = styled(BadgeUnstyled)(
({ theme }) => `
box-sizing: border-box;
margin: 0;
padding: 0;
Expand All @@ -23,32 +33,31 @@ const StyledBadge = styled(BadgeUnstyled)`
& .${badgeUnstyledClasses.badge} {
z-index: auto;
min-width: 20px;
height: 20px;
position: absolute;
top: 0;
right: 0;
min-width: 22px;
height: 22px;
padding: 0 6px;
color: #fff;
font-weight: 400;
font-weight: 600;
font-size: 12px;
line-height: 20px;
line-height: 22px;
white-space: nowrap;
text-align: center;
background: #07f;
border-radius: 10px;
box-shadow: 0 0 0 1px #fff;
position: absolute;
top: 0;
right: 0;
border-radius: 12px;
background: ${blue[500]};
box-shadow: 0px 4px 6x ${theme.palette.mode === 'dark' ? grey[900] : grey[300]};
transform: translate(50%, -50%);
transform-origin: 100% 0;
opacity: 1;
transition: opacity 0.2s ease-in-out;
transform-origin: 100% 0;
}
& .${badgeUnstyledClasses.invisible} {
opacity: 0;
pointer-events: none;
}
`;
`,
);

export default function BadgeVisibility() {
const [count, setCount] = React.useState(1);
Expand Down

0 comments on commit b73c194

Please sign in to comment.