diff --git a/.eslintignore b/.eslintignore
index 6585ff5ebee..61a5a1ef908 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -7,6 +7,6 @@ types
eui.d.ts
**/*.snap.js
**/assets/**/*.js
+package.json
src-docs/src/views/icon/icon_example.js
-src-framer/code/canvas.tsx
packages/react-datepicker/examples
diff --git a/.npmignore b/.npmignore
index 1538d294d5d..d5cb84fcb18 100644
--- a/.npmignore
+++ b/.npmignore
@@ -6,7 +6,6 @@ wiki/
generator-eui/
test/
src-docs/
-src-framer/
packages/react-datepicker
packages/eslint-plugin
.nvmrc
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 3a674688ffd..9f475e59955 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,6 +4,14 @@
- Added `displayName` to components using `React.forwardRef` ([#3451](https://github.com/elastic/eui/pull/3451))
- Added event target checker for `EuiOverlayMask`'s `onClick` prop ([#3462](https://github.com/elastic/eui/pull/3462))
+**Deprecations**
+
+- Added a deprecation notice for `EuiNavDrawer` family of components. Advise usage of `EuiCollapsibleNav` instead ([#3487](https://github.com/elastic/eui/pull/3487))
+
+**Notes**
+
+- Removed `src-framer` files from the repository ([#3487](https://github.com/elastic/eui/pull/3487))
+
## [`24.0.0`](https://github.com/elastic/eui/tree/v24.0.0)
- Added `null` as acceptable `icon` prop for `EuiCard` ([#3470](https://github.com/elastic/eui/pull/3470))
diff --git a/package.json b/package.json
index e57ac88b939..c731c751b44 100644
--- a/package.json
+++ b/package.json
@@ -18,7 +18,7 @@
"extract-i18n-strings": "node ./scripts/babel/fetch-i18n-strings",
"lint": "yarn tsc --noEmit && yarn lint-es && yarn lint-sass",
"lint-fix": "yarn lint-es-fix",
- "lint-es": "eslint --cache \"{src,src-docs,src-framer}/**/*.{ts,tsx,js}\" --max-warnings 0",
+ "lint-es": "eslint --cache \"{src,src-docs}/**/*.{ts,tsx,js}\" --max-warnings 0",
"lint-es-fix": "yarn lint-es --fix",
"lint-sass": "sass-lint -v --max-warnings 0",
"lint-sass-fix": "sass-lint-auto-fix -c ./.sass-lint-fix.yml",
diff --git a/scripts/dtsgenerator.js b/scripts/dtsgenerator.js
index fe03bf5cd98..cbf0771f9a6 100644
--- a/scripts/dtsgenerator.js
+++ b/scripts/dtsgenerator.js
@@ -31,12 +31,11 @@ const generator = dtsGenerator({
exclude: [
'node_modules/**/*.d.ts',
'*/custom_typings/**/*.d.ts',
- 'src-framer/**/*',
'**/*.test.ts',
'**/*.test.tsx',
'**/*.testenv.ts',
'**/*.testenv.tsx',
- 'src/themes/charts/*' // A separate d.ts file is generated for the charts theme file
+ 'src/themes/charts/*', // A separate d.ts file is generated for the charts theme file
],
resolveModuleId(params) {
if (
diff --git a/src-docs/src/views/nav_drawer/nav_drawer_example.js b/src-docs/src/views/nav_drawer/nav_drawer_example.js
index 69d3698e190..d760a9b6927 100644
--- a/src-docs/src/views/nav_drawer/nav_drawer_example.js
+++ b/src-docs/src/views/nav_drawer/nav_drawer_example.js
@@ -5,7 +5,13 @@ import { renderToHtml } from '../../services';
import { GuideSectionTypes } from '../../components';
-import { EuiNavDrawer, EuiCode, EuiCallOut } from '../../../../src/components';
+import {
+ EuiNavDrawer,
+ EuiCode,
+ EuiCallOut,
+ EuiBadge,
+ EuiSpacer,
+} from '../../../../src/components';
import NavDrawer from './nav_drawer';
const navDrawerSource = require('!!raw-loader!./nav_drawer');
@@ -30,6 +36,24 @@ export const NavDrawerExample = {
],
text: (
+
+ Set for deprecation. See details.
+
+
+
+ Please use{' '}
+
+ EuiCollapsableNav
+ {' '}
+ instead of EuiNavDrawer for your global navigation
+ needs. Feature enhancements are no longer being made to this
+ component.
+
EuiNavDrawer provides a side navigation feature
that is complete with interactions and a mobile-friendly design. It
diff --git a/src-framer/.eslintrc.js b/src-framer/.eslintrc.js
deleted file mode 100644
index e5906d649c7..00000000000
--- a/src-framer/.eslintrc.js
+++ /dev/null
@@ -1,13 +0,0 @@
-module.exports = {
- extends: '../.eslintrc.js',
- rules: {
- 'import/no-unresolved': [
- 'error',
- {
- ignore: ['^framer$', '^@elastic/eui/lib/', '^!!raw-loader!'],
- },
- ],
- '@typescript-eslint/no-var-requires': 'off',
- 'local/require-license-header': 'off',
- },
-};
diff --git a/src-framer/README.md b/src-framer/README.md
deleted file mode 100644
index dd8c2f7761e..00000000000
--- a/src-framer/README.md
+++ /dev/null
@@ -1,37 +0,0 @@
-## Using EUI components in Framer X
-
-Install the [Elastic UI framework](https://store.framer.com/package/snide/elastic-ui-temp) package from the Framer store.
-
-Once installed, simply drag over the `_framer_helpers/theme` component onto your artboard to load the appropriate CSS. You'll need to do this before loading any other components on the page.
-
-![](https://d3vv6lp55qjaqc.cloudfront.net/items/1J012y3Z0t2K251U1R0u/Screen%20Recording%202018-10-30%20at%2003.22%20PM.gif?X-CloudApp-Visitor-Id=59773)
-
-### How to contribute new components to our store package
-
-The following are instructions for how to develop or edit the components we publish to the store. This step is not required if you merely wish to use the components.
-
-Make sure the latest EUI is cloned somewhere on your machine.
-
-1. Create a new brand new Framer project.
-2. Open your terminal to the unpacked Framer folder within `~Library/Autosave Information/Framer-${HASH}/container/`
-3. In the same `container` directory run `yarn add @elastic/eui raw-loader`. These files are required to work on the files.
-4. In the same `container` directory remove the empty `code` directory using `rm -rf code`. We'll be replacing it with the development files contained in this repo.
-5. Rsync the source files with `rsync -r ~/path-to-eui-repo/framer-src/code ./`. This will place the `eui/src-framer/code` directory inside of your `framer/container/` directory.
-6. Reload Framer. Your framer project will now point to the files contained in EUI.
-7. Commit your changes to EUI.
-
-Remember that the Framer container folder is just a node repo of it's own. If for some reason you need to edit the ACTUAL EUI components (possibly you see a bug in EUI that is effecting Framer) you can `yarn link` the repo over similarly as you would fixing an EUI issue in Kibana.
-
-### Framer component best practices
-
-* Try to keep the Framer property mappings as close to EUI properties as possible.
-* When adding additional props for Framer that don't exist in EUI, utilize emojis (🧙 for magic!, ↳ for related children) and other visual signifiers to classify the distinction.
-* In most cases it makes sense to replace the `children` prop from EUI components with something a Framer specific prop. Name those new props `childText` or something similar to remind people they are actually adding the child prop. You can see an example of this in the Button component.
-
-### Theming
-
-Like EUI, the Framer components support theming. The `_framer_helpers/theme.tsx` will define which CSS file is loaded onto the Framer page.
-
-### How to publish to the Framer store
-
-Currently, the Framer store is tied to individual user accounts. Contact one of the EUI admins and they'll point you in the right direction.
diff --git a/src-framer/code/App.tsx b/src-framer/code/App.tsx
deleted file mode 100644
index e239e313257..00000000000
--- a/src-framer/code/App.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import { Data, animate, Override, Animatable } from 'framer';
-
-// eslint-disable-next-line new-cap
-const data = Data({ scale: Animatable(1) });
-
-export const Scale: Override = () => {
- return {
- scale: data.scale,
- onTap() {
- data.scale.set(0.6);
- animate.spring(data.scale, 1);
- },
- };
-};
diff --git a/src-framer/code/Examples.tsx b/src-framer/code/Examples.tsx
deleted file mode 100644
index 30bcac9dd7a..00000000000
--- a/src-framer/code/Examples.tsx
+++ /dev/null
@@ -1,68 +0,0 @@
-import { Data, animate, Override, Animatable } from 'framer';
-
-/* eslint-disable new-cap */
-
-const data = Data({
- toggle: true,
- scale: Animatable(1),
- opacity: Animatable(1),
- rotation: Animatable(0),
- rotationY: Animatable(0),
-});
-
-export const Scale: Override = () => {
- return {
- scale: data.scale,
- onTap() {
- data.scale.set(0.6);
- animate.spring(data.scale, 1);
- },
- };
-};
-
-export const Rotate: Override = (props: any) => {
- data.rotation.set(props.rotation);
-
- return {
- rotation: data.rotation,
- onTap() {
- animate.spring(data.rotation, data.rotation.get() + 90, {
- tension: 250,
- friction: 20,
- });
- },
- };
-};
-
-export const Fade: Override = (props: any) => {
- data.opacity.set(props.opacity);
-
- return {
- opacity: data.opacity,
- onTap() {
- animate.linear(data.opacity, 0, 0.2);
- },
- };
-};
-
-export const FlipOutput: Override = () => {
- return {
- rotationY: data.rotationY,
- };
-};
-
-export const FlipInput: Override = () => {
- return {
- onTap() {
- const toggle = data.toggle;
- animate.spring(
- { rotationY: data.rotationY },
- {
- rotationY: toggle ? 360 : 0,
- },
- { tension: 200, friction: 20 }
- );
- data.toggle = !toggle;
- },
- };
-};
diff --git a/src-framer/code/_framer_helpers/frame_size.tsx b/src-framer/code/_framer_helpers/frame_size.tsx
deleted file mode 100644
index 266f8def763..00000000000
--- a/src-framer/code/_framer_helpers/frame_size.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import { ControlType, PropertyControls } from 'framer';
-import * as React from 'react';
-
-// Define type of property
-interface Props {
- frame?: boolean;
-}
-
-export class FrameSize extends React.Component {
- // Set default properties
- static defaultProps = {
- frame: true,
- };
-
- // Items shown in property panel
- static propertyControls: PropertyControls = {
- frame: {
- type: ControlType.Boolean,
- title: '🖍 Fit to frame',
- },
- };
-
- render() {
- let optionallyFramedComponent;
- if (this.props.frame) {
- optionallyFramedComponent = (
-
- {this.props.children}
-
- );
- } else {
- optionallyFramedComponent = this.props.children;
- }
- return {optionallyFramedComponent} ;
- }
-}
diff --git a/src-framer/code/_framer_helpers/theme.tsx b/src-framer/code/_framer_helpers/theme.tsx
deleted file mode 100644
index 4efc1d0e371..00000000000
--- a/src-framer/code/_framer_helpers/theme.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-// @ts-ignore
-import DarkCSS from '!!raw-loader!@elastic/eui/dist/eui_theme_dark.css';
-// @ts-ignore
-import LightCSS from '!!raw-loader!@elastic/eui/dist/eui_theme_light.css';
-import { ControlType, PropertyControls } from 'framer';
-import * as React from 'react';
-import { FrameSize } from './frame_size';
-
-// Define type of property
-interface Props {
- theme: string;
-}
-
-export class Theme extends React.Component {
- // Set default properties
- static defaultProps = {
- theme: 'light',
- };
-
- // Items shown in property panel
- static propertyControls: PropertyControls = {
- theme: {
- type: ControlType.SegmentedEnum,
- options: ['light', 'dark'],
- title: 'Theme',
- },
- };
-
- render() {
- const lightBgColor = '#FFF';
- const darkBgColor = '#222';
- const bgColor = this.props.theme === 'light' ? lightBgColor : darkBgColor;
- return (
-
-
-
-
-
- );
- }
-}
diff --git a/src-framer/code/avatar/avatar.tsx b/src-framer/code/avatar/avatar.tsx
deleted file mode 100644
index 0cae898682c..00000000000
--- a/src-framer/code/avatar/avatar.tsx
+++ /dev/null
@@ -1,74 +0,0 @@
-import {
- EuiAvatar,
- SIZES,
- TYPES,
- // @ts-ignore
-} from '@elastic/eui/lib/components/avatar/avatar.js';
-// @ts-ignore
-import { ControlType, PropertyControls } from 'framer';
-import React from 'react';
-
-const initialsOptions = ['1', '2'];
-
-// Define type of property
-interface Props {
- size: SIZES;
- imageUrl: string;
- type: TYPES;
- name: string;
- initialsLength: keyof typeof initialsOptions;
- initials: string;
-}
-
-export class Avatar extends React.Component {
- // Set default properties
- static defaultProps = {
- name: 'Han Solo',
- height: 32, // To give a decent start with sizing
- width: 32, // To give a decent start with sizing
- };
-
- // Items shown in property panel
- static propertyControls: PropertyControls = {
- name: {
- type: ControlType.String,
- title: 'name',
- },
- initialsLength: {
- type: ControlType.SegmentedEnum,
- options: initialsOptions,
- title: 'initialsLength',
- },
- initials: {
- type: ControlType.String,
- title: 'initials',
- },
- size: {
- type: ControlType.SegmentedEnum,
- options: SIZES,
- title: 'size',
- },
- type: {
- type: ControlType.SegmentedEnum,
- options: TYPES,
- title: 'type',
- },
- imageUrl: {
- type: ControlType.Image,
- title: 'imageUrl',
- },
- };
-
- render() {
- return (
-
- );
- }
-}
diff --git a/src-framer/code/badge/badge.tsx b/src-framer/code/badge/badge.tsx
deleted file mode 100644
index c95edd215e1..00000000000
--- a/src-framer/code/badge/badge.tsx
+++ /dev/null
@@ -1,77 +0,0 @@
-import {
- COLORS,
- EuiBadge,
- ICON_SIDES,
- // @ts-ignore
-} from '@elastic/eui/lib/components/badge/badge.js';
-// @ts-ignore
-import { ICON_TYPES } from '@elastic/eui/lib/components/icon/index.js';
-import { ControlType, PropertyControls } from 'framer';
-import * as React from 'react';
-
-// Define type of property
-interface Props {
- childText: string;
- iconType: ICON_TYPES;
- color: COLORS;
- iconSide: string;
- showIconProps: boolean;
- height: number;
-}
-
-export class Badge extends React.Component {
- // Set default properties
- static defaultProps = {
- childText: 'Badge text',
- color: 'primary',
- iconType: null,
- iconSide: 'left',
- showIconProps: false,
- // Initial height for ease of use in framer
- height: 20,
- };
-
- // Items shown in property panel
- static propertyControls: PropertyControls = {
- childText: {
- type: ControlType.String,
- title: '🧙 childText',
- },
- color: {
- type: ControlType.Enum,
- options: COLORS,
- title: 'color',
- },
- showIconProps: {
- type: ControlType.Boolean,
- title: '🧙 icon?',
- },
- iconType: {
- type: ControlType.Enum,
- options: ICON_TYPES,
- title: '↳ iconType',
- hidden(props: Props) {
- return props.showIconProps === false;
- },
- },
- iconSide: {
- type: ControlType.SegmentedEnum,
- options: ICON_SIDES,
- title: '↳ iconSide',
- hidden(props: Props) {
- return props.showIconProps === false;
- },
- },
- };
-
- render() {
- return (
-
- {this.props.childText}
-
- );
- }
-}
diff --git a/src-framer/code/button/button.tsx b/src-framer/code/button/button.tsx
deleted file mode 100644
index c707a850a15..00000000000
--- a/src-framer/code/button/button.tsx
+++ /dev/null
@@ -1,102 +0,0 @@
-import {
- COLORS,
- EuiButton,
- ICON_SIDES,
- SIZES,
- // @ts-ignore
-} from '@elastic/eui/lib/components/button/button.js';
-// @ts-ignore
-import { ICON_TYPES } from '@elastic/eui/lib/components/icon/index.js';
-import { ControlType, PropertyControls } from 'framer';
-import * as React from 'react';
-import { FrameSize } from '../_framer_helpers/frame_size';
-
-// Define type of property
-interface Props {
- childText: string;
- iconType: ICON_TYPES;
- color: COLORS;
- iconSide: string;
- size: SIZES;
- showIconProps: boolean;
- fullWidth: boolean;
- fill: boolean;
- width: number;
- height: number;
-}
-
-export class Button extends React.Component {
- // Set default properties
- static defaultProps = {
- childText: 'Button text',
- color: 'primary',
- iconType: null,
- iconSide: 'left',
- showIconProps: false,
- fullWidth: false,
- };
-
- // Items shown in property panel
- static propertyControls: PropertyControls = {
- childText: {
- type: ControlType.String,
- title: '🧙 childText',
- },
- fill: {
- type: ControlType.Boolean,
- title: 'fill',
- },
- size: {
- type: ControlType.SegmentedEnum,
- options: SIZES,
- title: 'size',
- },
- color: {
- type: ControlType.Enum,
- options: COLORS,
- title: 'color',
- },
- fullWidth: {
- type: ControlType.Boolean,
- title: '🧙♀️ fullWidth',
- },
- showIconProps: {
- type: ControlType.Boolean,
- title: '🧙 icon?',
- },
- iconType: {
- type: ControlType.Enum,
- options: ICON_TYPES,
- title: '↳ iconType',
- hidden(props: Props) {
- return props.showIconProps === false;
- },
- },
- iconSide: {
- type: ControlType.SegmentedEnum,
- options: ICON_SIDES,
- title: '↳ iconSide',
- hidden(props: Props) {
- return props.showIconProps === false;
- },
- },
- };
-
- render() {
- return (
-
-
- {this.props.childText}
-
-
- );
- }
-}
diff --git a/src-framer/code/call_out/call_out.tsx b/src-framer/code/call_out/call_out.tsx
deleted file mode 100644
index e2d647f0f60..00000000000
--- a/src-framer/code/call_out/call_out.tsx
+++ /dev/null
@@ -1,73 +0,0 @@
-import {
- COLORS,
- EuiCallOut,
- SIZES,
- // @ts-ignore
-} from '@elastic/eui/lib/components/call_out/call_out.js';
-// @ts-ignore
-import { ICON_TYPES } from '@elastic/eui/lib/components/icon/index.js';
-import { ControlType, PropertyControls } from 'framer';
-import * as React from 'react';
-
-// Define type of property
-interface Props {
- title: string;
- iconType: ICON_TYPES;
- color: COLORS;
- size: SIZES;
- childText: string;
- showIconProps: boolean;
-}
-
-export class CallOut extends React.Component {
- // Set default properties
- static defaultProps = {
- title: 'Title',
- color: 'primary',
- iconType: null,
- size: 'm',
- childText: 'Some random text where the children prop would go',
- };
-
- // Items shown in property panel
- static propertyControls: PropertyControls = {
- title: {
- type: ControlType.String,
- title: 'title',
- },
- childText: {
- type: ControlType.String,
- title: '🧙 childText',
- },
- size: {
- type: ControlType.SegmentedEnum,
- options: SIZES,
- title: 'size',
- },
- color: {
- type: ControlType.Enum,
- options: COLORS,
- title: 'color',
- },
- iconType: {
- type: ControlType.Enum,
- options: ICON_TYPES,
- title: 'iconType',
- hidden(props: Props) {
- return props.showIconProps === false;
- },
- },
- };
-
- render() {
- return (
-
- {this.props.childText}
-
- );
- }
-}
diff --git a/src-framer/code/canvas.tsx b/src-framer/code/canvas.tsx
deleted file mode 100644
index d1aa59fcd5e..00000000000
--- a/src-framer/code/canvas.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-// WARNING: this file is auto generated, any changes will be lost
-import { createDesignComponent, CanvasStore } from 'framer';
-const canvas = CanvasStore.shared(); // CANVAS_DATA;
diff --git a/src-framer/code/card/card.tsx b/src-framer/code/card/card.tsx
deleted file mode 100644
index e918abd2513..00000000000
--- a/src-framer/code/card/card.tsx
+++ /dev/null
@@ -1,136 +0,0 @@
-import {
- ALIGNMENTS,
- EuiCard,
- LAYOUT_ALIGNMENTS,
- // @ts-ignore
-} from '@elastic/eui/lib/components/card/card.js';
-import {
- COLORS,
- EuiIcon,
- SIZES,
- TYPES,
- // @ts-ignore
-} from '@elastic/eui/lib/components/icon/icon.js';
-import { ControlType, PropertyControls } from 'framer';
-import * as React from 'react';
-import { FrameSize } from '../_framer_helpers/frame_size';
-
-// Define type of property
-interface Props {
- title: string;
- description: string;
- icon: TYPES;
- image: string;
- textAlign: ALIGNMENTS;
- betaBadgeLabel: string;
- layout: LAYOUT_ALIGNMENTS;
- showIconProps: boolean;
- iconSize: SIZES;
- iconColor: COLORS;
- // Helper prop for providing a unsplash image
- randomImage: boolean;
-}
-
-export class Card extends React.Component {
- // Set default properties
- static defaultProps = {
- title: 'Hey there',
- showIconProps: false,
- iconSize: 'xl',
- description: 'I am a witty description for a card',
- randomImage: false,
- };
-
- // Items shown in property panel
- static propertyControls: PropertyControls = {
- title: {
- type: ControlType.String,
- title: 'title',
- },
- description: {
- type: ControlType.String,
- title: 'description',
- },
- betaBadgeLabel: {
- type: ControlType.String,
- title: 'betaBadgeLabel',
- },
- textAlign: {
- type: ControlType.SegmentedEnum,
- options: ALIGNMENTS,
- title: 'textAlign',
- },
- layout: {
- type: ControlType.SegmentedEnum,
- options: LAYOUT_ALIGNMENTS,
- title: 'layout',
- },
- randomImage: {
- type: ControlType.Boolean,
- title: '🧙 random img?',
- },
- image: {
- type: ControlType.Image,
- title: 'image',
- hidden(props: Props) {
- return props.randomImage === true;
- },
- },
- showIconProps: {
- type: ControlType.Boolean,
- title: '🧙 icon?',
- },
- icon: {
- type: ControlType.Enum,
- options: TYPES,
- title: '↳ icon',
- hidden(props: Props) {
- return props.showIconProps === false;
- },
- },
- iconSize: {
- type: ControlType.Enum,
- options: SIZES,
- title: '↳ iconSize',
- hidden(props: Props) {
- return props.showIconProps === false;
- },
- },
- iconColor: {
- type: ControlType.Enum,
- options: COLORS,
- title: 'iconColor',
- hidden(props: Props) {
- return props.showIconProps === false;
- },
- },
- };
-
- render() {
- return (
-
-
- ) : null
- }
- image={
- this.props.randomImage
- ? 'https://source.unsplash.com/400x200/?Nature'
- : this.props.image
- }
- title={this.props.title}
- description={this.props.description}
- betaBadgeLabel={this.props.betaBadgeLabel}
- />
-
- );
- }
-}
diff --git a/src-framer/code/code/code_block.tsx b/src-framer/code/code/code_block.tsx
deleted file mode 100644
index 4122733a44a..00000000000
--- a/src-framer/code/code/code_block.tsx
+++ /dev/null
@@ -1,71 +0,0 @@
-import {
- FONT_SIZES,
- PADDING_SIZES,
- // @ts-ignore
-} from '@elastic/eui/lib/components/code/_code_block.js';
-// @ts-ignore
-import { EuiCodeBlock } from '@elastic/eui/lib/components/code/code_block.js';
-import { ControlType, PropertyControls } from 'framer';
-import React from 'react';
-
-// Define type of property
-interface Props {
- fontSize: FONT_SIZES;
- language: string;
- overflowHeight: number;
- paddingSize: PADDING_SIZES;
- transparentBackground: boolean;
- childText: string;
-}
-
-export class CodeBlock extends React.Component {
- // Set default properties
- static defaultProps = {
- name: 'Han Solo',
- height: 300, // To give a decent start with sizing
- width: 600, // To give a decent start with sizing
- };
-
- // Items shown in property panel
- static propertyControls: PropertyControls = {
- fontSize: {
- type: ControlType.SegmentedEnum,
- options: FONT_SIZES,
- title: 'fontSize',
- },
- language: {
- type: ControlType.String,
- title: 'language',
- },
- overflowHeight: {
- type: ControlType.Number,
- title: 'overflowHeight',
- },
- paddingSize: {
- type: ControlType.SegmentedEnum,
- options: PADDING_SIZES,
- title: 'paddingSize',
- },
- transparentBackground: {
- type: ControlType.Boolean,
- title: 'transparentBackground',
- },
- childText: {
- type: ControlType.String,
- title: '🧙 childText',
- },
- };
-
- render() {
- return (
-
- {this.props.childText}
-
- );
- }
-}
diff --git a/src-framer/code/description_list/description_list.tsx b/src-framer/code/description_list/description_list.tsx
deleted file mode 100644
index 6e060614d7e..00000000000
--- a/src-framer/code/description_list/description_list.tsx
+++ /dev/null
@@ -1,88 +0,0 @@
-import {
- EuiDescriptionList,
- TYPES,
- ALIGNMENTS,
- TEXT_STYLES,
- // @ts-ignore
-} from '@elastic/eui/lib/components/description_list/description_list.js';
-// @ts-ignore
-import { EuiDescriptionListTitle } from '@elastic/eui/lib/components/description_list/description_list_title.js';
-// @ts-ignore
-import { EuiDescriptionListDescription } from '@elastic/eui/lib/components/description_list/description_list_description.js';
-import { ControlType, PropertyControls } from 'framer';
-import * as React from 'react';
-
-// Define type of property
-interface Props {
- align: ALIGNMENTS;
- compressed: boolean;
- textStyle: TEXT_STYLES;
- type: TYPES;
- titleText: string;
- descText: string;
- height: number;
-}
-
-export class DescriptionList extends React.Component {
- // Set default properties
- static defaultProps = {
- align: 'left',
- compressed: false,
- textStyle: 'normal',
- type: 'row',
- // Framer only props for ease of use below
- titleText: 'Title',
- descText: 'Description',
- height: 40,
- };
-
- // Items shown in property panel
- static propertyControls: PropertyControls = {
- titleText: {
- type: ControlType.String,
- title: '🧙 titleText',
- },
- descText: {
- type: ControlType.String,
- title: '🧙 descText',
- },
- compressed: {
- type: ControlType.Boolean,
- title: 'compressed',
- },
- align: {
- type: ControlType.SegmentedEnum,
- options: ALIGNMENTS,
- align: 'size',
- },
- textStyle: {
- type: ControlType.SegmentedEnum,
- options: TEXT_STYLES,
- align: 'textStyle',
- },
- type: {
- type: ControlType.SegmentedEnum,
- options: TYPES,
- title: 'type',
- },
- };
-
- render() {
- return (
-
-
- {this.props.titleText}
-
-
- {this.props.descText}
-
-
- );
- }
-}
diff --git a/src-framer/code/facet/facet.tsx b/src-framer/code/facet/facet.tsx
deleted file mode 100644
index 53430cb4814..00000000000
--- a/src-framer/code/facet/facet.tsx
+++ /dev/null
@@ -1,107 +0,0 @@
-// @ts-ignore
-import { EuiFacetButton } from '@elastic/eui/lib/components/facet/facet_button.js';
-import {
- COLORS,
- EuiIcon,
- SIZES,
- TYPES,
- // @ts-ignore
-} from '@elastic/eui/lib/components/icon/icon.js';
-import { ControlType, PropertyControls } from 'framer';
-import * as React from 'react';
-
-// Define type of property
-interface Props {
- showIconProps: boolean;
- iconType: TYPES;
- iconColor: COLORS;
- iconSize: SIZES;
- isDisabled: boolean;
- isLoading: boolean;
- isSelected: boolean;
- quantity: number;
- childText: string;
-}
-
-export class FacetButton extends React.Component {
- // Set default properties
- static defaultProps = {
- childText: 'Facet button',
- quantity: 19,
- height: 40, // To give a decent start with sizing
- showIconProps: false,
- };
-
- // Items shown in property panel
- static propertyControls: PropertyControls = {
- childText: {
- type: ControlType.String,
- title: '🧙 childText',
- },
- quantity: {
- type: ControlType.Number,
- title: 'quantity',
- },
- isDisabled: {
- type: ControlType.Boolean,
- title: 'isDisabled',
- },
- isLoading: {
- type: ControlType.Boolean,
- title: 'isLoading',
- },
- isSelected: {
- type: ControlType.Boolean,
- title: 'isSelected',
- },
- showIconProps: {
- type: ControlType.Boolean,
- title: '🧙 icon?',
- },
- iconType: {
- type: ControlType.Enum,
- options: TYPES,
- title: '↳ icon',
- hidden(props: Props) {
- return props.showIconProps === false;
- },
- },
- iconSize: {
- type: ControlType.Enum,
- options: SIZES,
- title: '↳ iconSize',
- hidden(props: Props) {
- return props.showIconProps === false;
- },
- },
- iconColor: {
- type: ControlType.Enum,
- options: COLORS,
- title: '↳ iconColor',
- hidden(props: Props) {
- return props.showIconProps === false;
- },
- },
- };
-
- render() {
- return (
-
- ) : null
- }
- isDisabled={this.props.isDisabled}
- isLoading={this.props.isLoading}
- isSelected={this.props.isSelected}
- quantity={this.props.quantity}>
- {this.props.childText}
-
- );
- }
-}
diff --git a/src-framer/code/forms/field_password.tsx b/src-framer/code/forms/field_password.tsx
deleted file mode 100644
index e2bbb658cde..00000000000
--- a/src-framer/code/forms/field_password.tsx
+++ /dev/null
@@ -1,79 +0,0 @@
-// @ts-ignore
-import { EuiFieldPassword } from '@elastic/eui/lib/components/form/field_password/field_password.js';
-// @ts-ignore
-import { EuiFormRow } from '@elastic/eui/lib/components/form/form_row/form_row.js';
-import { ControlType, PropertyControls } from 'framer';
-import * as React from 'react';
-
-// Define type of property
-interface Props {
- placeholder: string;
- value: string;
- isInvalid: boolean;
- fullWidth: boolean;
- isLoading: boolean;
- hasFormRow: boolean;
- compressed: boolean;
- formRowLabel: string;
- formRowHelpText: string;
-}
-
-export class FieldPassword extends React.Component {
- // Set default properties
- static defaultProps = {
- hasFormRow: false,
- fullWidth: true,
- formRowLabel: 'Label name',
- };
-
- // Items shown in property panel
- static propertyControls: PropertyControls = {
- placeholder: { type: ControlType.String, title: 'placeholder' },
- value: { type: ControlType.String, title: 'value' },
- isInvalid: { type: ControlType.Boolean, title: 'isInvalid' },
- isLoading: { type: ControlType.Boolean, title: 'isLoading' },
- fullWidth: { type: ControlType.Boolean, title: 'fullWidth' },
- compressed: { type: ControlType.Boolean, title: 'compressed' },
- hasFormRow: { type: ControlType.Boolean, title: '🖍 Form Row?' },
- formRowLabel: {
- type: ControlType.String,
- title: 'label',
- hidden(props: Props) {
- return props.hasFormRow === false;
- },
- },
- formRowHelpText: {
- type: ControlType.String,
- title: 'helpText',
- hidden(props: Props) {
- return props.hasFormRow === false;
- },
- },
- };
-
- render() {
- const fieldPassword = (
-
- );
- let fieldWithOptionalRow = fieldPassword;
-
- if (this.props.hasFormRow) {
- fieldWithOptionalRow = (
-
- {fieldPassword}
-
- );
- }
-
- return {fieldWithOptionalRow}
;
- }
-}
diff --git a/src-framer/code/forms/field_search.tsx b/src-framer/code/forms/field_search.tsx
deleted file mode 100644
index c53b1c78040..00000000000
--- a/src-framer/code/forms/field_search.tsx
+++ /dev/null
@@ -1,78 +0,0 @@
-// @ts-ignore
-import { EuiFieldSearch } from '@elastic/eui/lib/components/form/field_search/field_search.js';
-// @ts-ignore
-import { EuiFormRow } from '@elastic/eui/lib/components/form/form_row/form_row.js';
-import { ControlType, PropertyControls } from 'framer';
-import * as React from 'react';
-
-// Define type of property
-interface Props {
- placeholder: string;
- value: string;
- isInvalid: boolean;
- fullWidth: boolean;
- isLoading: boolean;
- hasFormRow: boolean;
- formRowLabel: string;
- formRowHelpText: string;
- compressed: boolean;
-}
-
-export class FieldSearch extends React.Component {
- // Set default properties
- static defaultProps = {
- hasFormRow: false,
- formRowLabel: 'Label name',
- };
-
- // Items shown in property panel
- static propertyControls: PropertyControls = {
- placeholder: { type: ControlType.String, title: 'placeholder' },
- value: { type: ControlType.String, title: 'value' },
- isInvalid: { type: ControlType.Boolean, title: 'isInvalid' },
- isLoading: { type: ControlType.Boolean, title: 'isLoading' },
- fullWidth: { type: ControlType.Boolean, title: 'fullWidth' },
- compressed: { type: ControlType.Boolean, title: 'compressed' },
- hasFormRow: { type: ControlType.Boolean, title: '🖍 Form Row?' },
- formRowLabel: {
- type: ControlType.String,
- title: 'label',
- hidden(props: Props) {
- return props.hasFormRow === false;
- },
- },
- formRowHelpText: {
- type: ControlType.String,
- title: 'helpText',
- hidden(props: Props) {
- return props.hasFormRow === false;
- },
- },
- };
-
- render() {
- const fieldSearch = (
-
- );
- let fieldWithOptionalRow = fieldSearch;
-
- if (this.props.hasFormRow) {
- fieldWithOptionalRow = (
-
- {fieldSearch}
-
- );
- }
-
- return {fieldWithOptionalRow}
;
- }
-}
diff --git a/src-framer/code/forms/field_text.tsx b/src-framer/code/forms/field_text.tsx
deleted file mode 100644
index de8bf324289..00000000000
--- a/src-framer/code/forms/field_text.tsx
+++ /dev/null
@@ -1,88 +0,0 @@
-// @ts-ignore
-import { EuiFieldText } from '@elastic/eui/lib/components/form/field_text/field_text.js';
-// @ts-ignore
-import { EuiFormRow } from '@elastic/eui/lib/components/form/form_row/form_row.js';
-// @ts-ignore
-import { ICON_TYPES } from '@elastic/eui/lib/components/icon/index.js';
-import { ControlType, PropertyControls } from 'framer';
-import * as React from 'react';
-
-// Define type of property
-interface Props {
- placeholder: string;
- value: string;
- isInvalid: boolean;
- fullWidth: boolean;
- isLoading: boolean;
- hasFormRow: boolean;
- compressed: boolean;
- formRowLabel: string;
- formRowHelpText: string;
- icon: ICON_TYPES;
-}
-
-export class FieldText extends React.Component {
- // Set default properties
- static defaultProps = {
- hasFormRow: false,
- fullWidth: true,
- formRowLabel: 'Label name',
- };
-
- // Items shown in property panel
- static propertyControls: PropertyControls = {
- placeholder: { type: ControlType.String, title: 'placeholder' },
- value: { type: ControlType.String, title: 'value' },
- isInvalid: { type: ControlType.Boolean, title: 'isInvalid' },
- isLoading: { type: ControlType.Boolean, title: 'isLoading' },
- fullWidth: { type: ControlType.Boolean, title: 'fullWidth' },
- compressed: { type: ControlType.Boolean, title: 'compressed' },
- hasFormRow: { type: ControlType.Boolean, title: '🧙 Form Row?' },
- formRowLabel: {
- type: ControlType.String,
- title: '↳ label',
- hidden(props: Props) {
- return props.hasFormRow === false;
- },
- },
- formRowHelpText: {
- type: ControlType.String,
- title: '↳ helpText',
- hidden(props: Props) {
- return props.hasFormRow === false;
- },
- },
- icon: {
- type: ControlType.Enum,
- options: ICON_TYPES,
- title: '↳ icon',
- },
- };
-
- render() {
- const fieldText = (
-
- );
- let fieldWithOptionalRow = fieldText;
-
- if (this.props.hasFormRow) {
- fieldWithOptionalRow = (
-
- {fieldText}
-
- );
- }
-
- return {fieldWithOptionalRow}
;
- }
-}
diff --git a/src-framer/code/icon/icon.tsx b/src-framer/code/icon/icon.tsx
deleted file mode 100644
index cfd77a71c75..00000000000
--- a/src-framer/code/icon/icon.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-import {
- COLORS,
- EuiIcon,
- SIZES,
- TYPES,
- // @ts-ignore
-} from '@elastic/eui/lib/components/icon/icon.js';
-import { ControlType, PropertyControls } from 'framer';
-import * as React from 'react';
-
-// Define type of property
-interface Props {
- type: TYPES;
- size: SIZES;
- color: COLORS;
- width: number;
- height: number;
-}
-
-export class Icon extends React.Component {
- // Set default properties
- static defaultProps = {
- size: 'xl',
- type: 'logoElasticsearch',
- // Initial size at 32 for ease of use
- width: 32,
- height: 32,
- };
-
- // Items shown in property panel
- static propertyControls: PropertyControls = {
- type: {
- type: ControlType.Enum,
- options: TYPES,
- title: 'type',
- },
- color: {
- type: ControlType.Enum,
- options: COLORS,
- title: 'color',
- },
- size: {
- type: ControlType.SegmentedEnum,
- options: SIZES,
- title: 'size',
- },
- };
-
- render() {
- return (
-
- );
- }
-}
diff --git a/src-framer/code/panel/panel.tsx b/src-framer/code/panel/panel.tsx
deleted file mode 100644
index 4a93ecf0102..00000000000
--- a/src-framer/code/panel/panel.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-// @ts-ignore
-import { EuiPanel, SIZES } from '@elastic/eui/lib/components/panel/panel.js';
-import { ControlType, PropertyControls } from 'framer';
-import * as React from 'react';
-import { FrameSize } from '../_framer_helpers/frame_size';
-
-// Define type of property
-interface Props {
- hasShadow: boolean;
- paddingSize: SIZES;
- betaBadgeLabel: string;
- fitToFrame: boolean;
-}
-
-export class Panel extends React.Component {
- // Set default properties
- static defaultProps = {
- paddingSize: 'm',
- hasShadow: false,
- fitToFrame: true,
- };
-
- // Items shown in property panel
- static propertyControls: PropertyControls = {
- hasShadow: { type: ControlType.Boolean, title: 'hasShadow' },
- betaBadgeLabel: { type: ControlType.String, title: 'betaBadgeLabel' },
- paddingSize: {
- type: ControlType.SegmentedEnum,
- options: SIZES,
- title: 'paddingSize',
- },
- fitToFrame: { type: ControlType.Boolean, title: 'fitToFrame' },
- };
-
- render() {
- return (
-
-
- {this.props.children}
-
-
- );
- }
-}
diff --git a/src-framer/code/text/text.tsx b/src-framer/code/text/text.tsx
deleted file mode 100644
index aba868ec5b8..00000000000
--- a/src-framer/code/text/text.tsx
+++ /dev/null
@@ -1,68 +0,0 @@
-// @ts-ignore
-import { EuiText, TEXT_SIZES } from '@elastic/eui/lib/components/text/text';
-// @ts-ignore
-import { ALIGNMENTS } from '@elastic/eui/lib/components/text/text_align';
-// @ts-ignore
-import { COLORS } from '@elastic/eui/lib/components/text/text_color';
-import { ControlType, PropertyControls } from 'framer';
-import * as React from 'react';
-import { FrameSize } from '../_framer_helpers/frame_size';
-
-// Define type of property
-interface Props {
- childText: string;
- size: TEXT_SIZES;
- color: COLORS;
- textAlign: ALIGNMENTS;
- grow: boolean;
-}
-
-export class Text extends React.Component {
- // Set default properties
- static defaultProps = {
- childText: 'Add your text in the overide',
- };
-
- // Items shown in property panel
- static propertyControls: PropertyControls = {
- childText: {
- type: ControlType.String,
- title: '🧙 childText',
- },
- textAlign: {
- type: ControlType.SegmentedEnum,
- options: ALIGNMENTS,
- title: 'textAlign',
- },
- size: {
- type: ControlType.SegmentedEnum,
- options: TEXT_SIZES,
- title: 'size',
- },
- color: {
- type: ControlType.Enum,
- options: COLORS,
- title: 'color',
- },
- grow: {
- type: ControlType.Boolean,
- title: 'grow',
- },
- };
-
- render() {
- return (
-
-
- {this.props.childText}
-
-
- );
- }
-}
diff --git a/src-framer/code/title/title.tsx b/src-framer/code/title/title.tsx
deleted file mode 100644
index d3838fe5dda..00000000000
--- a/src-framer/code/title/title.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-import {
- EuiTitle,
- TEXT_TRANSFORM,
- TITLE_SIZES,
- // @ts-ignore
-} from '@elastic/eui/lib/components/title/title';
-import { ControlType, PropertyControls } from 'framer';
-import * as React from 'react';
-import { FrameSize } from '../_framer_helpers/frame_size';
-
-// Define type of property
-interface Props {
- childText: string;
- size: TITLE_SIZES;
- textTransform: TEXT_TRANSFORM;
-}
-
-export class Title extends React.Component {
- // Set default properties
- static defaultProps = {
- childText: 'Title text goes here',
- size: 'l',
- };
-
- // Items shown in property panel
- static propertyControls: PropertyControls = {
- childText: {
- type: ControlType.String,
- title: '🧙 childText',
- },
- size: {
- type: ControlType.Enum,
- options: TITLE_SIZES,
- title: 'size',
- },
- textTransform: {
- type: ControlType.Enum,
- options: TEXT_TRANSFORM,
- title: 'textTransform',
- },
- };
-
- render() {
- return (
-
-
- {this.props.childText}
-
-
- );
- }
-}
diff --git a/src-framer/custom_typings/framer/index.d.ts b/src-framer/custom_typings/framer/index.d.ts
deleted file mode 100644
index 7b30fa1c6a2..00000000000
--- a/src-framer/custom_typings/framer/index.d.ts
+++ /dev/null
@@ -1,67 +0,0 @@
-/**
- * This was cobbled together from a few places, most notably:
- *
- * https://github.com/modest/framerx-js-lib/blob/master/src/index.d.ts
- *
- * It's extremley incompletely, probably wrong and shouldn't be relied upon
- * to do almost anything.
- */
-
-declare module 'framer' {
- export enum ControlType {
- Boolean = 'boolean',
- Number = 'number',
- String = 'string',
- FusedNumber = 'fusednumber',
- Enum = 'enum',
- SegmentedEnum = 'segmentedenum',
- Color = 'color',
- Image = 'image',
- File = 'file',
- ComponentInstance = 'componentinstance',
- Array = 'array',
- Object = 'object',
- }
-
- export interface PropertyControls {
- [propName: string]: { type: ControlType; [otherProp: string]: any };
- }
-
- export type Override<
- T extends object & {
- [key: string]: any;
- }
- > = OverrideObject | OverrideFunction;
-
- export type OverrideFunction = (
- props: P
- ) => Partial
;
-
- export type OverrideObject = Partial;
-
- export function Data(
- initial?: Partial | object
- ): T;
-
- export interface Animatable {
- get(): Value;
- set(value: Value | Animatable): void;
- set(value: Value | Animatable, transaction?: number): void;
- }
-
- export function Animatable(
- value: Value | Animatable
- ): Animatable;
-
- export interface Animate {
- spring(from: any, to: any, options?: object): any;
- bezier(from: any, to: any, options?: object): any;
- linear(from: any, to: any, options?: number | object): any;
- ease(from: any, to: any, options?: object): any;
- easeIn(from: any, to: any, options?: object): any;
- easeOut(from: any, to: any, options?: object): any;
- easeInOut(from: any, to: any, options?: object): any;
- }
-
- export const animate: Animate;
-}
diff --git a/tsconfig.json b/tsconfig.json
index 9d50cffaf1b..f44780013ce 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -47,14 +47,10 @@
// Specifies where to find library definitions. When this is explicitly set,
// it has to include the default location i.e. node_modules/@types
- "typeRoots": ["node_modules/@types", "src/custom_typings", "src-framer/custom_typings"]
+ "typeRoots": ["node_modules/@types", "src/custom_typings"]
},
"include": [
"./src/**/*",
"./src-docs/**/*",
- "./src-framer/**/*"
],
- "exclude": [
- "./src-framer/code/canvas.tsx"
- ]
}