Convert EuiPage and related components to TS

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 - Improved a11y of `EuiNavDrawer` lock button state via `aria-pressed` ([#2643](https://github.com/elastic/eui/pull/2643))
 - Added exports for available types related to `EuiDataGrid` ([#2640](https://github.com/elastic/eui/pull/2640))
+- Converted `EuiPage` and related child components to  TypeScript ([#2669](https://github.com/elastic/eui/pull/2669))
 
 **Bug fixes**
 

src/components/index.d.ts

@@ -5,7 +5,6 @@
 /// <reference path="./filter_group/index.d.ts" />
 /// <reference path="./form/index.d.ts" />
 /// <reference path="./modal/index.d.ts" />
-/// <reference path="./page/index.d.ts" />
 /// <reference path="./tabs/index.d.ts" />
 
 declare module '@elastic/eui' {

src/components/page/page.js → src/components/page/page.tsx

@@ -1,12 +1,24 @@
-import React from 'react';
-import PropTypes from 'prop-types';
+import React, { FunctionComponent } from 'react';
 import classNames from 'classnames';
+import { CommonProps } from '../common';
 
-export const EuiPage = ({
+export interface EuiPageProps extends CommonProps {
+  restrictWidth?: boolean | number | string;
+  style?: React.CSSProperties;
+}
+
+export const EuiPage: FunctionComponent<EuiPageProps> = ({
   children,
-  className,
-  restrictWidth,
+  /**
+   * Sets the max-width of the page,
+   * set to `true` to use the default size,
+   * set to `false` to not restrict the width,
+   * set to a number for a custom width in px,
+   * set to a string for a custom width in custom measurement.
+   */
+  restrictWidth = false,
   style,
+  className,
   ...rest
 }) => {
   let widthClassname;
@@ -17,7 +29,7 @@ export const EuiPage = ({
   } else if (restrictWidth !== false) {
     widthClassname = 'euiPage--restrictWidth-custom';
     const value =
-      typeof maxWidth === 'number' ? `${restrictWidth}px` : restrictWidth;
+      typeof restrictWidth === 'number' ? `${restrictWidth}px` : restrictWidth;
     newStyle = { ...style, maxWidth: value };
   }
 
@@ -29,25 +41,3 @@ export const EuiPage = ({
     </div>
   );
 };
-
-EuiPage.propTypes = {
-  children: PropTypes.node,
-  className: PropTypes.string,
-
-  /**
-   * Sets the max-width of the page,
-   * set to `true` to use the default size,
-   * set to `false` to not restrict the width,
-   * set to a number for a custom width in px,
-   * set to a string for a custom width in custom measurement.
-   */
-  restrictWidth: PropTypes.oneOfType([
-    PropTypes.bool,
-    PropTypes.number,
-    PropTypes.string,
-  ]),
-};
-
-EuiPage.defaultProps = {
-  restrictWidth: false,
-};

src/components/page/page_body/page_body.js → src/components/page/page_body/page_body.tsx

@@ -1,13 +1,29 @@
-import React from 'react';
-import PropTypes from 'prop-types';
+import React, { FunctionComponent } from 'react';
 import classNames from 'classnames';
+import { CommonProps } from '../../common';
 
-export const EuiPageBody = ({
+export interface EuiPageBodyProps extends CommonProps {
+  /**
+   * Sets the max-width of the page,
+   * set to `true` to use the default size,
+   * set to `false` to not restrict the width,
+   * set to a number for a custom width in px,
+   * set to a string for a custom width in custom measurement.
+   */
+  restrictWidth?: boolean | number | string;
+  style?: React.CSSProperties;
+  /**
+   * Sets the HTML element for `EuiPageBody`.
+   */
+  component?: keyof JSX.IntrinsicElements;
+}
+
+export const EuiPageBody: FunctionComponent<EuiPageBodyProps> = ({
   children,
-  restrictWidth,
+  restrictWidth = false,
   style,
   className,
-  component,
+  component: Component = 'main',
   ...rest
 }) => {
   let widthClassname;
@@ -18,43 +34,15 @@ export const EuiPageBody = ({
   } else if (restrictWidth !== false) {
     widthClassname = 'euiPageBody--restrictWidth-custom';
     const value =
-      typeof maxWidth === 'number' ? `${restrictWidth}px` : restrictWidth;
+      typeof restrictWidth === 'number' ? `${restrictWidth}px` : restrictWidth;
     newStyle = { ...style, maxWidth: value };
   }
 
   const classes = classNames('euiPageBody', widthClassname, className);
 
-  const OuterElement = component;
-
   return (
-    <OuterElement className={classes} style={newStyle || style} {...rest}>
+    <Component className={classes} style={newStyle || style} {...rest}>
       {children}
-    </OuterElement>
+    </Component>
   );
 };
-
-EuiPageBody.propTypes = {
-  children: PropTypes.node,
-  className: PropTypes.string,
-  /**
-   * Sets the HTML element for `EuiPageBody`.
-   */
-  component: PropTypes.string,
-  /**
-   * Sets the max-width of the page,
-   * set to `true` to use the default size,
-   * set to `false` to not restrict the width,
-   * set to a number for a custom width in px,
-   * set to a string for a custom width in custom measurement.
-   */
-  restrictWidth: PropTypes.oneOfType([
-    PropTypes.bool,
-    PropTypes.number,
-    PropTypes.string,
-  ]),
-};
-
-EuiPageBody.defaultProps = {
-  restrictWidth: false,
-  component: 'main',
-};

src/components/page/page_content/page_content.tsx

@@ -0,0 +1,50 @@
+import React, { FunctionComponent } from 'react';
+import classNames from 'classnames';
+import { CommonProps } from '../../common';
+
+import { EuiPanel, PanelPaddingSize } from '../../panel/panel';
+
+export type EuiPageContentVerticalPositions = 'center';
+export type EuiPageContentHorizontalPositions = 'center';
+
+const verticalPositionToClassNameMap: {
+  [position in EuiPageContentVerticalPositions]: string | null
+} = {
+  center: 'euiPageContent--verticalCenter',
+};
+
+const horizontalPositionToClassNameMap: {
+  [position in EuiPageContentHorizontalPositions]: string | null
+} = {
+  center: 'euiPageContent--horizontalCenter',
+};
+
+export interface EuiPageContentProps extends CommonProps {
+  panelPaddingSize?: PanelPaddingSize;
+  verticalPosition?: EuiPageContentVerticalPositions;
+  horizontalPosition?: EuiPageContentHorizontalPositions;
+}
+
+export const EuiPageContent: FunctionComponent<EuiPageContentProps> = ({
+  verticalPosition,
+  horizontalPosition,
+  panelPaddingSize = 'l',
+  children,
+  className,
+  ...rest
+}) => {
+  const classes = classNames(
+    'euiPageContent',
+    verticalPosition ? verticalPositionToClassNameMap[verticalPosition] : null,
+    horizontalPosition
+      ? horizontalPositionToClassNameMap[horizontalPosition]
+      : null,
+    className
+  );
+
+  return (
+    <EuiPanel className={classes} paddingSize={panelPaddingSize} {...rest}>
+      {children}
+    </EuiPanel>
+  );
+};

src/components/page/page_content/page_content_body.tsx

@@ -0,0 +1,17 @@
+import React, { FunctionComponent } from 'react';
+import classNames from 'classnames';
+import { CommonProps } from '../../common';
+
+export const EuiPageContentBody: FunctionComponent<CommonProps> = ({
+  children,
+  className,
+  ...rest
+}) => {
+  const classes = classNames('euiPageContentBody', className);
+
+  return (
+    <div className={classes} {...rest}>
+      {children}
+    </div>
+  );
+};