Revert recent changes to migrate from custom portal (#3508)(#3522)(#3529

)(#3536) (#3555)

* Revert "[ARGG-1158][BpkDialog]: Migrate Dialog to not use Portal (#3508)"

This reverts commit d1ca50a.

* Revert "[ARGG-1159][BpkModal]: Remove portal from modal (#3522)" (#3556)

This reverts commit 77e32ae.

* Revert "[ARGG-1160][BpkDrawer]: Removal of portal from BpkDrawer (#3529)" (#3557)

This reverts commit d2fc04f.

* Revert "[ARGG-1161][Portal]: Deprecate the Backpack Portal component (#3536)" (#3558)

This reverts commit 63f154b.

examples/bpk-component-dialog/examples.js

@@ -0,0 +1,186 @@
+/*
+ * Backpack - Skyscanner's Design System
+ *
+ * Copyright 2016 Skyscanner Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/* @flow strict */
+
+import PropTypes from 'prop-types';
+import { Component } from 'react';
+import type { Node } from 'react';
+
+import BpkButton from '../../packages/bpk-component-button';
+import BpkDialog, {
+  HEADER_ICON_TYPES,
+} from '../../packages/bpk-component-dialog';
+import InfoIcon from '../../packages/bpk-component-icon/lg/information-circle';
+import TickIcon from '../../packages/bpk-component-icon/lg/tick';
+import TrashIcon from '../../packages/bpk-component-icon/lg/trash';
+import BpkText, { TEXT_STYLES } from '../../packages/bpk-component-text';
+import { cssModules, withDefaultProps } from '../../packages/bpk-react-utils';
+
+import STYLES from './examples.module.scss';
+
+const getClassName = cssModules(STYLES);
+
+const Paragraph = withDefaultProps(BpkText, {
+  textStyle: TEXT_STYLES.bodyDefault,
+  tagName: 'p',
+  className: getClassName('bpk-dialog-paragraph'),
+});
+
+type Props = {
+  children: Node,
+  dismissible: boolean,
+  headerIcon: ?Node,
+  initiallyOpen: ?boolean,
+};
+
+type State = {
+  isOpen: boolean,
+};
+
+class DialogContainer extends Component<Props, State> {
+  static propTypes = {
+    children: PropTypes.node.isRequired,
+    dismissible: PropTypes.bool,
+  };
+
+  static defaultProps = {
+    dismissible: true,
+    headerIcon: null,
+  };
+
+  constructor(props: Props) {
+    super();
+
+    this.state = {
+      isOpen: props.initiallyOpen || false,
+    };
+  }
+
+  onOpen = () => {
+    this.setState({
+      isOpen: true,
+    });
+  };
+
+  onClose = () => {
+    this.setState({
+      isOpen: false,
+    });
+  };
+
+  render() {
+    return (
+      <div id="dialog-container">
+        <div id="pagewrap">
+          <BpkButton onClick={this.onOpen}>Open dialog</BpkButton>
+        </div>
+        {/* $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'. */}
+        <BpkDialog
+          closeLabel="Close dialog"
+          id="my-dialog"
+          ariaLabel="example dialog to showcase component"
+          className="my-classname"
+          isOpen={this.state.isOpen}
+          onClose={this.onClose}
+          getApplicationElement={() => document.getElementById('pagewrap')}
+          renderTarget={() => document.getElementById('dialog-container')}
+          headerIcon
+          {...this.props}
+        >
+          {this.props.children}
+          <BpkButton onClick={this.onClose}>Close</BpkButton>
+        </BpkDialog>
+      </div>
+    );
+  }
+}
+
+const DefaultExample = () => (
+  <DialogContainer initiallyOpen>
+    <Paragraph>
+      This is a default dialog. You can put anything you want in here.
+    </Paragraph>
+  </DialogContainer>
+);
+
+const WithIconExample = () => (
+  <div>
+    <div>
+      <span>Default Icon Dialog</span>
+      <DialogContainer initiallyOpen headerIcon={<TickIcon />} dismissible={false}>
+        <Paragraph>
+          This is a default dialog with an icon. You can put anything you want
+          in here.
+        </Paragraph>
+      </DialogContainer>
+    </div>
+    <br />
+    <div>
+      <span>Warning Icon Dialog</span>
+      <DialogContainer
+        headerIcon={<InfoIcon />}
+        headerIconType={HEADER_ICON_TYPES.warning}
+        dismissible={false}
+      >
+        <Paragraph>
+          This is a warning dialog with an icon. You can put anything you want
+          in here.
+        </Paragraph>
+      </DialogContainer>
+    </div>
+    <br />
+    <div>
+      <span>Destructive Icon Dialog</span>
+      <DialogContainer
+        headerIcon={<TrashIcon />}
+        headerIconType={HEADER_ICON_TYPES.destructive}
+        dismissible={false}
+      >
+        <Paragraph>
+          This is a destructive dialog with an icon. You can put anything you
+          want in here.
+        </Paragraph>
+      </DialogContainer>
+    </div>
+  </div>
+);
+
+const NotDismissibleExample = () => (
+  <DialogContainer initiallyOpen dismissible={false}>
+    <Paragraph>
+      This is not dismissible. To close it you must bind the `onClose` function
+      to a component inside the dialog, like the button below.
+    </Paragraph>
+  </DialogContainer>
+);
+
+const WithFlareExample = () => (
+  <DialogContainer initiallyOpen flare dismissible={false}>
+    <Paragraph>
+      This is a dialog with a flare view added as the header.
+    </Paragraph>
+  </DialogContainer>
+);
+
+export {
+  DefaultExample,
+  WithIconExample,
+  NotDismissibleExample,
+  WithFlareExample,
+};

examples/bpk-component-dialog/stories.js

@@ -0,0 +1,46 @@
+/*
+ * Backpack - Skyscanner's Design System
+ *
+ * Copyright 2016 Skyscanner Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+
+import BpkDialog from '../../packages/bpk-component-dialog/src/BpkDialog';
+
+import {
+  DefaultExample,
+  WithIconExample,
+  NotDismissibleExample,
+  WithFlareExample,
+} from './examples';
+
+export default {
+  title: 'bpk-component-dialog',
+  component: BpkDialog,
+};
+
+export const Default = DefaultExample;
+export const WithAnIcon = WithIconExample;
+
+export const NotDismissible = NotDismissibleExample;
+
+export const WithFlare = WithFlareExample;
+
+export const VisualTest = DefaultExample;
+
+export const VisualTestWithZoom = VisualTest.bind({});
+VisualTestWithZoom.args = {
+  zoomEnabled: true
+};