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.

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

[docs] Migrate Tooltip, Steppers demos to emotion #26165

Merged
merged 3 commits into from
May 7, 2021
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
146 changes: 62 additions & 84 deletions docs/src/pages/components/steppers/CustomizedSteppers.js
Original file line number Diff line number Diff line change
@@ -1,87 +1,73 @@
import * as React from 'react';
import PropTypes from 'prop-types';
import { makeStyles, withStyles } from '@material-ui/core/styles';
import clsx from 'clsx';
import { experimentalStyled as styled } from '@material-ui/core/styles';
import Box from '@material-ui/core/Box';
import Stepper from '@material-ui/core/Stepper';
import Step from '@material-ui/core/Step';
import StepLabel from '@material-ui/core/StepLabel';
import Check from '@material-ui/icons/Check';
import SettingsIcon from '@material-ui/icons/Settings';
import GroupAddIcon from '@material-ui/icons/GroupAdd';
import VideoLabelIcon from '@material-ui/icons/VideoLabel';
import StepConnector from '@material-ui/core/StepConnector';
import StepConnector, {
stepConnectorClasses,
} from '@material-ui/core/StepConnector';

const useStyles = makeStyles({
root: {
width: '100%',
},
quontoStepper: {
marginBottom: 32,
},
});

const QontoConnector = withStyles({
alternativeLabel: {
const QontoConnector = styled(StepConnector)({
[`&.${stepConnectorClasses.alternativeLabel}`]: {
top: 10,
left: 'calc(-50% + 16px)',
right: 'calc(50% + 16px)',
},
active: {
'& $line': {
[`&.${stepConnectorClasses.active}`]: {
[`& .${stepConnectorClasses.line}`]: {
borderColor: '#784af4',
},
},
completed: {
'& $line': {
[`&.${stepConnectorClasses.completed}`]: {
[`& .${stepConnectorClasses.line}`]: {
borderColor: '#784af4',
},
},
line: {
[`& .${stepConnectorClasses.line}`]: {
borderColor: '#eaeaf0',
borderTopWidth: 3,
borderRadius: 1,
},
})(StepConnector);
});

const useQontoStepIconStyles = makeStyles({
root: {
color: '#eaeaf0',
display: 'flex',
height: 22,
alignItems: 'center',
},
active: {
const QontoStepIconRoot = styled('div')(({ styleProps = {} }) => ({
color: '#eaeaf0',
display: 'flex',
height: 22,
alignItems: 'center',
...(!!styleProps.active && {
color: '#784af4',
}),
'& .QontoStepIcon-completedIcon': {
color: '#784af4',
zIndex: 1,
fontSize: 18,
},
circle: {
'& .QontoStepIcon-circle': {
width: 8,
height: 8,
borderRadius: '50%',
backgroundColor: 'currentColor',
},
completed: {
color: '#784af4',
zIndex: 1,
fontSize: 18,
},
});
}));

function QontoStepIcon(props) {
const classes = useQontoStepIconStyles();
const { active, completed } = props;
const { active, completed, className } = props;

return (
<div
className={clsx(classes.root, {
[classes.active]: active,
})}
>
<QontoStepIconRoot styleProps={{ active }} className={className}>
{completed ? (
<Check className={classes.completed} />
<Check className="QontoStepIcon-completedIcon" />
) : (
<div className={classes.circle} />
<div className="QontoStepIcon-circle" />
)}
</div>
</QontoStepIconRoot>
);
}

Expand All @@ -91,63 +77,61 @@ QontoStepIcon.propTypes = {
* @default false
*/
active: PropTypes.bool,
className: PropTypes.string,
/**
* Mark the step as completed. Is passed to child components.
* @default false
*/
completed: PropTypes.bool,
};

const ColorlibConnector = withStyles({
alternativeLabel: {
const ColorlibConnector = styled(StepConnector)({
[`&.${stepConnectorClasses.alternativeLabel}`]: {
top: 22,
},
active: {
'& $line': {
[`&.${stepConnectorClasses.active}`]: {
[`& .${stepConnectorClasses.line}`]: {
backgroundImage:
'linear-gradient( 95deg,rgb(242,113,33) 0%,rgb(233,64,87) 50%,rgb(138,35,135) 100%)',
},
},
completed: {
'& $line': {
[`&.${stepConnectorClasses.completed}`]: {
[`& .${stepConnectorClasses.line}`]: {
backgroundImage:
'linear-gradient( 95deg,rgb(242,113,33) 0%,rgb(233,64,87) 50%,rgb(138,35,135) 100%)',
},
},
line: {
[`& .${stepConnectorClasses.line}`]: {
height: 3,
border: 0,
backgroundColor: '#eaeaf0',
borderRadius: 1,
},
})(StepConnector);
});

const useColorlibStepIconStyles = makeStyles({
root: {
backgroundColor: '#ccc',
zIndex: 1,
color: '#fff',
width: 50,
height: 50,
display: 'flex',
borderRadius: '50%',
justifyContent: 'center',
alignItems: 'center',
},
active: {
const ColorlibStepIconRoot = styled('div')(({ styleProps = {} }) => ({
backgroundColor: '#ccc',
zIndex: 1,
color: '#fff',
width: 50,
height: 50,
display: 'flex',
borderRadius: '50%',
justifyContent: 'center',
alignItems: 'center',
...(!!styleProps.active && {
backgroundImage:
'linear-gradient( 136deg, rgb(242,113,33) 0%, rgb(233,64,87) 50%, rgb(138,35,135) 100%)',
boxShadow: '0 4px 10px 0 rgba(0,0,0,.25)',
},
completed: {
}),
...(!!styleProps.completed && {
backgroundImage:
'linear-gradient( 136deg, rgb(242,113,33) 0%, rgb(233,64,87) 50%, rgb(138,35,135) 100%)',
},
});
}),
}));

function ColorlibStepIcon(props) {
const classes = useColorlibStepIconStyles();
const { active, completed } = props;
const { active, completed, className } = props;

const icons = {
1: <SettingsIcon />,
Expand All @@ -156,14 +140,9 @@ function ColorlibStepIcon(props) {
};

return (
<div
className={clsx(classes.root, {
[classes.active]: active,
[classes.completed]: completed,
})}
>
<ColorlibStepIconRoot styleProps={{ completed, active }} className={className}>
{icons[String(props.icon)]}
</div>
</ColorlibStepIconRoot>
);
}

Expand All @@ -173,6 +152,7 @@ ColorlibStepIcon.propTypes = {
* @default false
*/
active: PropTypes.bool,
className: PropTypes.string,
/**
* Mark the step as completed. Is passed to child components.
* @default false
Expand All @@ -187,15 +167,13 @@ ColorlibStepIcon.propTypes = {
const steps = ['Select campaign settings', 'Create an ad group', 'Create an ad'];

export default function CustomizedSteppers() {
const classes = useStyles();

return (
<div className={classes.root}>
<Box sx={{ width: '100%' }}>
<Stepper
alternativeLabel
activeStep={1}
connector={<QontoConnector />}
className={classes.quontoStepper}
sx={{ mb: 4 }}
>
{steps.map((label) => (
<Step key={label}>
Expand All @@ -210,6 +188,6 @@ export default function CustomizedSteppers() {
</Step>
))}
</Stepper>
</div>
</Box>
);
}
Loading