@cloudflare/component-page 4.2.511 → 5.0.0

package/lib/PageHeader.js

@@ -1,67 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _styleContainer = require("@cloudflare/style-container");
-
-var _componentLabel = require("@cloudflare/component-label");
-
-var _intlReact = require("@cloudflare/intl-react");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-var PageHeading = (0, _styleContainer.createComponent)(function (_ref) {
-  var theme = _ref.theme;
-  return {
-    fontSize: theme.fontSizes[6],
-    marginTop: theme.space[0],
-    marginBottom: theme.space[0],
-    lineHeight: 1.25,
-    fontWeight: 600
-  };
-}, 'h1');
-var PageSubheading = (0, _styleContainer.createComponent)(function (_ref2) {
-  var theme = _ref2.theme;
-  return {
-    fontSize: theme.fontSizes[4],
-    marginTop: theme.space[0],
-    marginBottom: theme.space[0],
-    lineHeight: 1.25,
-    color: theme.colors.gray[3],
-    fontWeight: 400
-  };
-}, 'h2');
-var Beta = (0, _styleContainer.createComponent)(function (_ref3) {
-  var theme = _ref3.theme;
-  return {
-    marginLeft: theme.space[2],
-    verticalAlign: 'middle'
-  };
-}, _componentLabel.Label);
-
-var PageHeader = function PageHeader(_ref4) {
-  var title = _ref4.title,
-      subtitle = _ref4.subtitle,
-      beta = _ref4.beta;
-  return /*#__PURE__*/_react.default.createElement("header", null, /*#__PURE__*/_react.default.createElement(PageHeading, null, title, beta && /*#__PURE__*/_react.default.createElement(Beta, {
-    hue: "orange"
-  }, /*#__PURE__*/_react.default.createElement(_intlReact.Trans, {
-    _: "Beta",
-    id: "common.beta"
-  }))), subtitle && /*#__PURE__*/_react.default.createElement(PageSubheading, null, subtitle));
-};
-
-PageHeader.propTypes = {
-  title: _propTypes.default.node.isRequired,
-  subtitle: _propTypes.default.node,
-  beta: _propTypes.default.bool
-};
-var _default = PageHeader;
-exports.default = _default;

package/src/PageContent.tsx

@@ -1,34 +0,0 @@
-import React from 'react';
-import { createComponent } from '@cloudflare/style-container';
-
-type PageWidth = 'narrow' | 'wide' | 'unbounded';
-
-const maxWidthByType = {
-  narrow: '64em',
-  wide: '79em',
-  unbounded: '100%'
-};
-
-const styles = ({ type = 'wide' }: { type?: PageWidth }) => ({
-  marginLeft: 'auto',
-  marginRight: 'auto',
-  width: type === 'unbounded' ? '100%' : '90%',
-  maxWidth: maxWidthByType[type] || maxWidthByType.narrow
-});
-
-type Props = {
-  children?: any;
-  className?: string;
-  testId?: string;
-  type?: PageWidth;
-};
-
-const PageContent: React.FC<Props> = ({ className, children, testId }) => {
-  return (
-    <div className={className} data-testid={testId}>
-      {children}
-    </div>
-  );
-};
-
-export default createComponent(styles, PageContent);

package/src/PageHeader.tsx

@@ -1,66 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { createComponent } from '@cloudflare/style-container';
-import { Label } from '@cloudflare/component-label';
-import { Trans } from '@cloudflare/intl-react';
-
-const PageHeading = createComponent(
-  ({ theme }) => ({
-    fontSize: theme.fontSizes[6],
-    marginTop: theme.space[0],
-    marginBottom: theme.space[0],
-    lineHeight: 1.25,
-    fontWeight: 600
-  }),
-  'h1'
-);
-
-const PageSubheading = createComponent(
-  ({ theme }) => ({
-    fontSize: theme.fontSizes[4],
-    marginTop: theme.space[0],
-    marginBottom: theme.space[0],
-    lineHeight: 1.25,
-    color: theme.colors.gray[3],
-    fontWeight: 400
-  }),
-  'h2'
-);
-
-const Beta = createComponent(
-  ({ theme }) => ({
-    marginLeft: theme.space[2],
-    verticalAlign: 'middle'
-  }),
-  Label
-);
-
-type Props = {
-  title: React.ReactNode;
-  subtitle?: React.ReactNode;
-  beta?: boolean;
-};
-
-const PageHeader: React.FC<Props> = ({ title, subtitle, beta }) => {
-  return (
-    <header>
-      <PageHeading>
-        {title}
-        {beta && (
-          <Beta hue="orange">
-            <Trans _="Beta" id="common.beta" />
-          </Beta>
-        )}
-      </PageHeading>
-      {subtitle && <PageSubheading>{subtitle}</PageSubheading>}
-    </header>
-  );
-};
-
-PageHeader.propTypes = {
-  title: PropTypes.node.isRequired,
-  subtitle: PropTypes.node,
-  beta: PropTypes.bool
-};
-
-export default PageHeader;