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

Add Framer X wrapper components #17797

Merged
merged 20 commits into from
Nov 6, 2019
Merged
Changes from 1 commit
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
5 changes: 2 additions & 3 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
# The best pattern people should follow is ignoring the editors' files in their
# global .gitignore configuration file.
# However, in order to prevent issues. We also ignore editors' files here.
# The best pattern to follow is ignoring editor files in a global .gitignore configuration file.
# However, in order to prevent issues, editor files are ignored here.
.idea
.vscode

3 changes: 3 additions & 0 deletions .prettierignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
framer/Material-UI.framerfx/design/*
eps1lon marked this conversation as resolved.
Show resolved Hide resolved
framer/Material-UI.framerfx/build/*
framer/Material-UI.framerfx/canvas.tsx
2 changes: 1 addition & 1 deletion docs/pages/api/checkbox.md
Original file line number Diff line number Diff line change
@@ -28,7 +28,7 @@ You can learn more about the difference by [reading this guide](/guides/minimizi
| <span class="prop-name">checkedIcon</span> | <span class="prop-type">node</span> | <span class="prop-default">&lt;CheckBoxIcon /></span> | The icon to display when the component is checked. |
| <span class="prop-name">classes</span> | <span class="prop-type">object</span> | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. |
| <span class="prop-name">color</span> | <span class="prop-type">'primary'<br>&#124;&nbsp;'secondary'<br>&#124;&nbsp;'default'</span> | <span class="prop-default">'secondary'</span> | The color of the component. It supports those theme colors that make sense for this component. |
| <span class="prop-name">disabled</span> | <span class="prop-type">bool</span> | | If `true`, the switch will be disabled. |
| <span class="prop-name">disabled</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If `true`, the switch will be disabled. |
| <span class="prop-name">disableRipple</span> | <span class="prop-type">bool</span> | | If `true`, the ripple effect will be disabled. |
| <span class="prop-name">icon</span> | <span class="prop-type">node</span> | <span class="prop-default">&lt;CheckBoxOutlineBlankIcon /></span> | The icon to display when the component is unchecked. |
| <span class="prop-name">id</span> | <span class="prop-type">string</span> | | The id of the `input` element. |
2 changes: 1 addition & 1 deletion docs/pages/api/list-item.md
Original file line number Diff line number Diff line change
@@ -32,7 +32,7 @@ Uses an additional container component if `ListItemSecondaryAction` is the last
| <span class="prop-name">component</span> | <span class="prop-type">elementType</span> | | The component used for the root node. Either a string to use a DOM element or a component. By default, it's a `li` when `button` is `false` and a `div` when `button` is `true`. |
| <span class="prop-name">ContainerComponent</span> | <span class="prop-type">elementType</span> | <span class="prop-default">'li'</span> | The container component used when a `ListItemSecondaryAction` is the last child. |
| <span class="prop-name">ContainerProps</span> | <span class="prop-type">object</span> | <span class="prop-default">{}</span> | Props applied to the container component if used. |
| <span class="prop-name">dense</span> | <span class="prop-type">bool</span> | | If `true`, compact vertical padding designed for keyboard and mouse input will be used. |
| <span class="prop-name">dense</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If `true`, compact vertical padding designed for keyboard and mouse input will be used. |
| <span class="prop-name">disabled</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If `true`, the list item will be disabled. |
| <span class="prop-name">disableGutters</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If `true`, the left and right padding is removed. |
| <span class="prop-name">divider</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If `true`, a 1px light border is added to the bottom of the list item. |
2 changes: 1 addition & 1 deletion docs/pages/api/radio.md
Original file line number Diff line number Diff line change
@@ -28,7 +28,7 @@ You can learn more about the difference by [reading this guide](/guides/minimizi
| <span class="prop-name">checkedIcon</span> | <span class="prop-type">node</span> | | The icon to display when the component is checked. |
| <span class="prop-name">classes</span> | <span class="prop-type">object</span> | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. |
| <span class="prop-name">color</span> | <span class="prop-type">'primary'<br>&#124;&nbsp;'secondary'<br>&#124;&nbsp;'default'</span> | <span class="prop-default">'secondary'</span> | The color of the component. It supports those theme colors that make sense for this component. |
| <span class="prop-name">disabled</span> | <span class="prop-type">bool</span> | | If `true`, the switch will be disabled. |
| <span class="prop-name">disabled</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If `true`, the switch will be disabled. |
| <span class="prop-name">disableRipple</span> | <span class="prop-type">bool</span> | | If `true`, the ripple effect will be disabled. |
| <span class="prop-name">icon</span> | <span class="prop-type">node</span> | | The icon to display when the component is unchecked. |
| <span class="prop-name">id</span> | <span class="prop-type">string</span> | | The id of the `input` element. |
2 changes: 1 addition & 1 deletion docs/pages/api/switch.md
Original file line number Diff line number Diff line change
@@ -28,7 +28,7 @@ You can learn more about the difference by [reading this guide](/guides/minimizi
| <span class="prop-name">checkedIcon</span> | <span class="prop-type">node</span> | | The icon to display when the component is checked. |
| <span class="prop-name">classes</span> | <span class="prop-type">object</span> | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. |
| <span class="prop-name">color</span> | <span class="prop-type">'primary'<br>&#124;&nbsp;'secondary'<br>&#124;&nbsp;'default'</span> | <span class="prop-default">'secondary'</span> | The color of the component. It supports those theme colors that make sense for this component. |
| <span class="prop-name">disabled</span> | <span class="prop-type">bool</span> | | If `true`, the switch will be disabled. |
| <span class="prop-name">disabled</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If `true`, the switch will be disabled. |
| <span class="prop-name">disableRipple</span> | <span class="prop-type">bool</span> | | If `true`, the ripple effect will be disabled. |
| <span class="prop-name">edge</span> | <span class="prop-type">'start'<br>&#124;&nbsp;'end'<br>&#124;&nbsp;false</span> | <span class="prop-default">false</span> | If given, uses a negative margin to counteract the padding on one side (this is often helpful for aligning the left or right side of the icon with content above or below, without ruining the border size and shape). |
| <span class="prop-name">icon</span> | <span class="prop-type">node</span> | | The icon to display when the component is unchecked. |
7 changes: 7 additions & 0 deletions framer/Material-UI.framerfx/.gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
build
.backups
.cache
.project.log
yarn-error.log
.yarnrc
.framer-lock
3 changes: 3 additions & 0 deletions framer/Material-UI.framerfx/.npmrc
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
@framer:registry=https://registry.framer.com/
always-auth=true
//registry.framer.com/:_authToken=69db2fc5-0cb5-4bbb-b4ae-8bcf1d090f8f
5 changes: 5 additions & 0 deletions framer/Material-UI.framerfx/.yarnignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
.DS_Store
Icon\r
.cache
.config.json
.backups
3 changes: 3 additions & 0 deletions framer/Material-UI.framerfx/canvas.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
// WARNING: this file is auto generated, any changes will be lost
import { createDesignComponent, CanvasStore } from 'framer';
const canvas = CanvasStore.shared(); // CANVAS_DATA;
114 changes: 114 additions & 0 deletions framer/Material-UI.framerfx/code/AppBar.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,114 @@
import * as React from 'react';
import { PropertyControls, ControlType } from 'framer';
// tslint:disable-next-line: ban-ts-ignore
// @ts-ignore
import MuiAppBar from '@material-ui/core/AppBar';
// tslint:disable-next-line: ban-ts-ignore
// @ts-ignore
import Toolbar from '@material-ui/core/Toolbar';
// tslint:disable-next-line: ban-ts-ignore
// @ts-ignore
import Typography from '@material-ui/core/Typography';
// tslint:disable-next-line: ban-ts-ignore
// @ts-ignore
import Button from '@material-ui/core/Button';
import { IconButton } from './IconButton';

// Define type of property
interface Props {
title?: string;
leftIcon?: string;
icon1?: string;
icon1Badge?: string;
icon2?: string;
icon2Badge?: string;
action1?: string;
action2?: string;
}

export class AppBar extends React.Component<Props> {
// Set default properties
static defaultProps = {
width: 300,
height: 56,
leftIcon: 'menu',
title: 'Material-UI',
action1: 'Login',
action2: '',
icon1: 'notifications',
icon1Badge: '8',
icon2: 'account_circle',
icon2Badge: '',
};

// Items shown in property panel
static propertyControls: PropertyControls = {
leftIcon: { type: ControlType.String, title: 'Left icon' },
title: { type: ControlType.String, title: 'Title' },
action1: { type: ControlType.String, title: 'Action 1' },
action2: {
type: ControlType.String,
title: 'Action 2',
hidden(props) {
return props.action1 === '' && props.action2 !== '';
},
},
icon1: { type: ControlType.String, title: 'Icon 1' },
icon1Badge: { type: ControlType.String, title: 'Icon 1 badge' },
icon2: {
type: ControlType.String,
title: 'Icon 2',
hidden(props) {
return props.icon1 === '' && props.icon2 !== '';
},
},
icon2Badge: { type: ControlType.String, title: 'Icon 2 badge' },
};

render() {
const { action1, action2, icon1, icon1Badge, icon2, icon2Badge, leftIcon, title } = this.props;
return (
<div style={{ flexGrow: 1 }}>
<MuiAppBar position="static">
<Toolbar>
{leftIcon && (
<IconButton
icon={leftIcon}
// tslint:disable-next-line: ban-ts-ignore
// @ts-ignore
style={{ marginLeft: -12, marginRight: 20 }}
color="inherit"
/>
)}
<Typography variant="h6" color="inherit" style={{ flexGrow: 1 }}>
{title}
</Typography>
{action1 && <Button color="inherit">{action1}</Button>}
{action2 && <Button color="inherit">{action2}</Button>}
{icon1 && (
<IconButton
icon={icon1}
badgeColor="secondary"
badgeContent={icon1Badge}
// tslint:disable-next-line: ban-ts-ignore
// @ts-ignore
style={{ marginRight: 8 }}
color="inherit"
/>
)}
{icon2 && (
<IconButton
icon={icon2}
badgeContent={icon2Badge}
// tslint:disable-next-line: ban-ts-ignore
// @ts-ignore
style={{ marginRight: 8 }}
color="inherit"
/>
)}
</Toolbar>
</MuiAppBar>
</div>
);
}
}
85 changes: 85 additions & 0 deletions framer/Material-UI.framerfx/code/Avatar.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,85 @@
import * as React from 'react';
import { addPropertyControls, ControlType } from 'framer';
// tslint:disable-next-line: ban-ts-ignore
// @ts-ignore
import MuiAvatar from '@material-ui/core/Avatar';
import { Icon } from './Icon';

interface Props {
backgroundColor?: string;
textColor?: string;
icon?: string;
imageFile?: string;
imageUrl?: string;
label?: string;
width?: number;
height?: number;
}

const defaultProps: Props = {
backgroundColor: '#4154af',
textColor: undefined,
icon: 'face',
imageFile: '',
imageUrl: 'https://i.pravatar.cc/300',
label: 'MB',
width: 40,
height: 40,
};

export const Avatar: React.SFC<Props> = (props: Props) => {
const {
backgroundColor,
height,
icon,
imageFile,
imageUrl,
label,
textColor,
width,
...other
} = props;

return imageFile || imageUrl ? (
<MuiAvatar src={imageFile || imageUrl} style={{ height, width }} {...other} />
) : (
<MuiAvatar style={{ color: textColor, backgroundColor, height, width }} {...other}>
{icon === '' ? label : <Icon icon={icon} />}
</MuiAvatar>
);
};

Avatar.defaultProps = defaultProps;

addPropertyControls(Avatar, {
backgroundColor: {
type: ControlType.Color,
title: 'Background color',
},
textColor: {
type: ControlType.Color,
title: 'Text color',
},
icon: {
type: ControlType.String,
title: 'Icon',
},
imageFile: {
type: ControlType.Image,
title: 'Image File',
hidden: function hidden(props) {
return props.primaryAction && props.primaryAction !== 'avatar';
},
},
imageUrl: {
type: ControlType.String,
title: 'Image URL',
hidden: function hidden(props) {
return props.imageFile !== '' || (props.primaryAction && props.primaryAction !== 'avatar');
},
},
label: {
type: ControlType.String,
title: 'Label',
},
});
85 changes: 85 additions & 0 deletions framer/Material-UI.framerfx/code/Badge.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,85 @@
import * as React from 'react';
import { addPropertyControls, ControlType } from 'framer';
// tslint:disable-next-line: ban-ts-ignore
// @ts-ignore
import MuiBadge from '@material-ui/core/Badge';
import { Icon } from './Icon';

interface Props {
badgeContent?: string;
max?: number;
showZero?: boolean;
variant?: 'dot' | 'standard';
icon?: string;
theme?: 'Filled' | 'Outlined' | 'Rounded' | 'TwoTone' | 'Sharp';
badgeColor?: 'default' | 'primary' | 'secondary' | 'error';
width?: number;
height?: number;
}

const defaultProps: Props = {
badgeContent: '8',
max: 99,
showZero: false,
variant: 'standard',
icon: '',
theme: 'Filled',
badgeColor: 'primary',
width: 22,
height: 22,
};

const style: React.CSSProperties = {
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
};

export const Badge: React.SFC<Props> = (props: Props) => {
const { badgeColor: color, badgeContent, icon, theme, width, height, ...other } = props;
const content =
icon === '' ? (
badgeContent
) : (
// @ts-ignore
<Icon icon={icon} theme={theme} style={{ width: '75%', height: '75%' }} />
);

return <MuiBadge badgeContent={content} color={color} style={style} {...other} />;
};

Badge.defaultProps = defaultProps;

addPropertyControls(Badge, {
badgeContent: {
type: ControlType.String,
title: 'Badge content',
},
max: {
type: ControlType.Number,
title: 'Max',
},
showZero: {
type: ControlType.Boolean,
title: 'Show zero',
},
variant: {
type: ControlType.Enum,
title: 'Variant',
options: ['dot', 'standard'],
},
icon: {
type: ControlType.String,
title: 'Icon',
},
theme: {
type: ControlType.Enum,
title: 'Theme',
options: ['Filled', 'Outlined', 'Rounded', 'TwoTone', 'Sharp'],
},
badgeColor: {
type: ControlType.Enum,
title: 'Badge color',
options: ['default', 'primary', 'secondary', 'error'],
},
});
Loading