Skip to content

Commit

Permalink
commit to get netlify deploy
Browse files Browse the repository at this point in the history
  • Loading branch information
oliviertassinari committed Jan 14, 2020
1 parent 7d61d14 commit a5c4715
Show file tree
Hide file tree
Showing 6 changed files with 31 additions and 205 deletions.
201 changes: 16 additions & 185 deletions docs/pages/index.js
Original file line number Diff line number Diff line change
@@ -1,192 +1,23 @@
import React from 'react';
import { useSelector } from 'react-redux';
import { makeStyles } from '@material-ui/core/styles';
import Typography from '@material-ui/core/Typography';
import Button from '@material-ui/core/Button';
import Container from '@material-ui/core/Container';
import HomeSteps from 'docs/src/modules/components/HomeSteps';
import HomeQuickWord from 'docs/src/modules/components/HomeQuickWord';
import HomeBackers from 'docs/src/modules/components/HomeBackers';
import HomeUsers from 'docs/src/modules/components/HomeUsers';
import HomePro from 'docs/src/modules/components/HomePro';
import HomeFooter from 'docs/src/modules/components/HomeFooter';
import AppFrame from 'docs/src/modules/components/AppFrame';
import Link from 'docs/src/modules/components/Link';
import Head from 'docs/src/modules/components/Head';
import loadScript from 'docs/src/modules/utils/loadScript';

let dependenciesLoaded = false;

function loadDependencies() {
if (dependenciesLoaded) {
return;
}

dependenciesLoaded = true;

loadScript('https://buttons.github.io/buttons.js', document.querySelector('head'));
loadScript('https://platform.twitter.com/widgets.js', document.querySelector('head'));
}

const useStyles = makeStyles(theme => ({
root: {
flex: '1 0 100%',
'& #main-content': {
outline: 0,
},
},
hero: {
paddingTop: 64,
color: theme.palette.primary.main,
},
content: {
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
textAlign: 'center',
paddingTop: theme.spacing(4),
paddingBottom: theme.spacing(8),
[theme.breakpoints.up('md')]: {
paddingTop: theme.spacing(22),
paddingBottom: theme.spacing(22),
flexDirection: 'row',
alignItems: 'flex-start',
textAlign: 'left',
},
},
title: {
marginLeft: -12,
whiteSpace: 'nowrap',
letterSpacing: '.7rem',
textIndent: '.7rem',
fontWeight: theme.typography.fontWeightLight,
[theme.breakpoints.only('xs')]: {
fontSize: 28,
},
},
logo: {
flexShrink: 0,
width: 120,
height: 120,
marginBottom: theme.spacing(2),
[theme.breakpoints.up('md')]: {
marginRight: theme.spacing(8),
width: 195,
height: 175,
},
},
button: {
marginTop: theme.spacing(4),
},
social: {
padding: theme.spacing(2, 0),
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
minHeight: 21,
boxSizing: 'content-box',
'& span': {
display: 'flex',
marginRight: theme.spacing(1),
},
'& a': {
color: theme.palette.background.paper,
},
},
}));

const GettingStartedLink = React.forwardRef((props, ref) => {
return <Link href="/getting-started/installation" naked prefetch ref={ref} {...props} />;
});

export default function HomePage() {
import InputLabel from '@material-ui/core/InputLabel';
import TextField from '@material-ui/core/TextField';
import FormControl from '@material-ui/core/FormControl';
import OutlinedInput from '@material-ui/core/OutlinedInput';

export default function Test() {
const inputLabel = React.useRef(null);
const [labelWidth, setLabelWidth] = React.useState(0);
React.useEffect(() => {
if (window.location.hash !== '' && window.location.hash !== '#main=content') {
window.location.replace(`https://v0.material-ui.com/${window.location.hash}`);
}

loadDependencies();
setLabelWidth(inputLabel.current.offsetWidth);
}, []);
const t = useSelector(state => state.options.t);
const classes = useStyles();

return (
<AppFrame>
<div className={classes.root}>
<Head />
<main id="main-content" tabIndex="-1">
<div className={classes.hero}>
<Container maxWidth="md" className={classes.content}>
<img src="/static/logo_raw.svg" alt="" className={classes.logo} />
<div>
<Typography
variant="h3"
component="h1"
color="inherit"
gutterBottom
className={classes.title}
>
{'MATERIAL-UI'}
</Typography>
<Typography variant="h5" component="h2" color="inherit">
{t('strapline')}
</Typography>
<Button
component={GettingStartedLink}
className={classes.button}
variant="outlined"
color="primary"
>
{t('getStarted')}
</Button>
</div>
</Container>
</div>
<div className={classes.social}>
<a
className="github-button"
href="https://github.com/mui-org/material-ui"
data-icon="octicon-star"
data-show-count="true"
>
Star
</a>
<a
className="twitter-follow-button"
href="https://twitter.com/@materialui"
data-show-screen-name="false"
>
Follow
</a>
</div>
<HomePro />
<HomeQuickWord />
<HomeSteps />
<HomeBackers />
<HomeUsers />
</main>
<HomeFooter />
</div>
<script
type="application/ld+json"
// eslint-disable-next-line react/no-danger
dangerouslySetInnerHTML={{
__html: `
{
"@context": "https://schema.org",
"@type": "Organization",
"name": "Material-UI",
"url": "https://material-ui.com/",
"logo": "https://material-ui.com/static/brand.png",
"sameAs": [
"https://twitter.com/materialUI",
"https://github.com/mui-org/material-ui",
"https://opencollective.com/material-ui"
]
}
`,
}}
/>
</AppFrame>
<div>
<FormControl variant="outlined">
<InputLabel ref={inputLabel}>Age</InputLabel>
<OutlinedInput id="old" labelWidth={labelWidth} />
</FormControl>
<TextField id="new" label="Outlined" variant="outlined" />
</div>
);
}
6 changes: 3 additions & 3 deletions packages/material-ui/src/FilledInput/FilledInput.js
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ export const styles = theme => {
borderTopLeftRadius: theme.shape.borderRadius,
borderTopRightRadius: theme.shape.borderRadius,
transition: theme.transitions.create('background-color', {
duration: theme.transitions.duration.shorter,
duration: theme.transitions.duration.shortest,
easing: theme.transitions.easing.easeOut,
}),
'&:hover': {
Expand Down Expand Up @@ -53,7 +53,7 @@ export const styles = theme => {
right: 0,
transform: 'scaleX(0)',
transition: theme.transitions.create('transform', {
duration: theme.transitions.duration.shorter,
duration: theme.transitions.duration.shortest,
easing: theme.transitions.easing.easeOut,
}),
pointerEvents: 'none', // Transparent to the hover style.
Expand All @@ -74,7 +74,7 @@ export const styles = theme => {
position: 'absolute',
right: 0,
transition: theme.transitions.create('border-bottom-color', {
duration: theme.transitions.duration.shorter,
duration: theme.transitions.duration.shortest,
}),
pointerEvents: 'none', // Transparent to the hover style.
},
Expand Down
4 changes: 2 additions & 2 deletions packages/material-ui/src/Input/Input.js
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ export const styles = theme => {
right: 0,
transform: 'scaleX(0)',
transition: theme.transitions.create('transform', {
duration: theme.transitions.duration.shorter,
duration: theme.transitions.duration.shortest,
easing: theme.transitions.easing.easeOut,
}),
pointerEvents: 'none', // Transparent to the hover style.
Expand All @@ -63,7 +63,7 @@ export const styles = theme => {
position: 'absolute',
right: 0,
transition: theme.transitions.create('border-bottom-color', {
duration: theme.transitions.duration.shorter,
duration: theme.transitions.duration.shortest,
}),
pointerEvents: 'none', // Transparent to the hover style.
},
Expand Down
2 changes: 1 addition & 1 deletion packages/material-ui/src/InputBase/InputBase.js
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ export const styles = theme => {
color: 'currentColor',
opacity: light ? 0.42 : 0.5,
transition: theme.transitions.create('opacity', {
duration: theme.transitions.duration.shorter,
duration: theme.transitions.duration.shortest,
}),
};
const placeholderHidden = {
Expand Down
2 changes: 1 addition & 1 deletion packages/material-ui/src/InputLabel/InputLabel.js
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ export const styles = theme => ({
/* Styles applied to the `input` element if `disableAnimation={false}`. */
animated: {
transition: theme.transitions.create(['color', 'transform'], {
duration: theme.transitions.duration.shorter,
duration: theme.transitions.duration.shortest,
easing: theme.transitions.easing.easeOut,
}),
},
Expand Down
21 changes: 8 additions & 13 deletions packages/material-ui/src/OutlinedInput/NotchedOutline.js
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,6 @@ import useTheme from '../styles/useTheme';
import capitalize from '../utils/capitalize';

export const styles = theme => {
const align = theme.direction === 'rtl' ? 'right' : 'left';

return {
/* Styles applied to the root element. */
root: {
Expand All @@ -23,19 +21,14 @@ export const styles = theme => {
borderRadius: 'inherit',
borderStyle: 'solid',
borderWidth: 1,
// Match the Input Label
transition: theme.transitions.create([`padding-${align}`, 'border-color', 'border-width'], {
duration: theme.transitions.duration.shorter,
easing: theme.transitions.easing.easeOut,
}),
},
/* Styles applied to the legend element when `labelWidth` is provided. */
legend: {
textAlign: 'left',
padding: 0,
lineHeight: '11px', // sync with `height` in `legend` styles
transition: theme.transitions.create('width', {
duration: theme.transitions.duration.shorter,
duration: theme.transitions.duration.shortest,
easing: theme.transitions.easing.easeOut,
}),
},
Expand All @@ -48,19 +41,21 @@ export const styles = theme => {
visibility: 'hidden',
maxWidth: 0,
transition: theme.transitions.create('max-width', {
duration: theme.transitions.duration.shorter,
duration: 50,
easing: theme.transitions.easing.easeOut,
}),
'& span': {
paddingLeft: 4,
paddingRight: 6,
paddingLeft: 5,
paddingRight: 5,
},
},
/* Styles applied to the legend element is notched. */
legendNotched: {
maxWidth: 1000,
transition: theme.transitions.create('max-width', {
duration: theme.transitions.duration.shorter,
duration: theme.transitions.duration.shortest - 50,
easing: theme.transitions.easing.easeOut,
delay: 30,
}),
},
};
Expand Down Expand Up @@ -114,7 +109,7 @@ const NotchedOutline = React.forwardRef(function NotchedOutline(props, ref) {
<fieldset
aria-hidden
style={{
[`padding${capitalize(align)}`]: 8 + (notched ? 0 : labelWidth / 2),
[`padding${capitalize(align)}`]: 8,
...style,
}}
className={clsx(classes.root, className)}
Expand Down

0 comments on commit a5c4715

Please sign in to comment.