carbon-design-system · kodiakhq · Jan 14, 2021 · Nov 24, 2020 · Nov 24, 2020 · Nov 24, 2020
diff --git a/packages/react/examples/codesandbox/components/FadeInOut/.gitignore b/packages/react/examples/codesandbox/components/FadeInOut/.gitignore
@@ -0,0 +1,23 @@
+# See https://help.github.com/ignore-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+
+# testing
+/coverage
+
+# production
+/build
+/dist
+
+# misc
+.DS_Store
+.cache
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
diff --git a/packages/react/examples/codesandbox/components/FadeInOut/index.html b/packages/react/examples/codesandbox/components/FadeInOut/index.html
@@ -0,0 +1,23 @@
+<!--
+ Copyright IBM Corp. 2016, 2020
+
+ This source code is licensed under the Apache-2.0 license found in the
+ LICENSE file in the root directory of this source tree.
+ -->
+
+<!DOCTYPE html>
+<html>
+
+<head>
+	<title>@carbon/ibmdotcom-react example</title>
+	<meta charset="UTF-8" />
+</head>
+
+<body>
+	<div id="app"></div>
+
+	<script src="src/index.js">
+	</script>
+</body>
+
+</html>
diff --git a/packages/react/examples/codesandbox/components/FadeInOut/package.json b/packages/react/examples/codesandbox/components/FadeInOut/package.json
@@ -0,0 +1,27 @@
+{
+  "name": "ibmdotcom-react-fade-in-out-example",
+  "private": true,
+  "version": "1.0.0",
+  "main": "index.html",
+  "scripts": {
+    "start": "parcel serve -p 9000 index.html --no-hmr",
+    "build": "parcel build index.html"
+  },
+  "dependencies": {
+    "@carbon/ibmdotcom-react": "latest",
+    "@carbon/ibmdotcom-styles": "latest",
+    "@carbon/icons-react": "10.13.0",
+    "react": "16.13.0",
+    "react-dom": "16.13.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.10.0",
+    "parcel-bundler": "^1.12.0",
+    "sass": "^1.26.9"
+  },
+  "sass": {
+    "includePaths": [
+      "./node_modules"
+    ]
+  }
+}
diff --git a/packages/react/examples/codesandbox/components/FadeInOut/sandbox.config.json b/packages/react/examples/codesandbox/components/FadeInOut/sandbox.config.json
@@ -0,0 +1,3 @@
+{
+  "template": "node"
+}
diff --git a/packages/react/examples/codesandbox/components/FadeInOut/src/index.js b/packages/react/examples/codesandbox/components/FadeInOut/src/index.js
@@ -0,0 +1,55 @@
+/**
+ * Copyright IBM Corp. 2016, 2021
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import "./styles.scss";
+
+import { FadeInOut } from "@carbon/ibmdotcom-react";
+import React from "react";
+import ReactDom from "react-dom";
+
+const App = () => (
+  <div className="bx--grid">
+    <div className="bx--row">
+      <div className="bx--col-sm-4 bx--col-lg-8">
+        <FadeInOut selectorTargets={'h1'}>
+          <h1>This is extra content so we can scroll!</h1>
+          <h1>This is extra content so we can scroll!</h1>
+          <h1>This is extra content so we can scroll!</h1>
+          <h1>This is extra content so we can scroll!</h1>
+          <h1>This is extra content so we can scroll!</h1>
+          <h1>This is extra content so we can scroll!</h1>
+          <h1>This is extra content so we can scroll!</h1>
+          <h1>This is extra content so we can scroll!</h1>
+          <h1>This is extra content so we can scroll!</h1>
+          <h1>This is extra content so we can scroll!</h1>
+          <h1>This is extra content so we can scroll!</h1>
+          <h1>This is extra content so we can scroll!</h1>
+          <h1>This is extra content so we can scroll!</h1>
+          <h1>This is extra content so we can scroll!</h1>
+          <h1>This is extra content so we can scroll!</h1>
+          <h1>This is extra content so we can scroll!</h1>
+          <h1>This is extra content so we can scroll!</h1>
+          <h1>This is extra content so we can scroll!</h1>
+          <h1>This is extra content so we can scroll!</h1>
+          <h1>This is extra content so we can scroll!</h1>
+          <h1>This is extra content so we can scroll!</h1>
+          <h1>This is extra content so we can scroll!</h1>
+          <h1>This is extra content so we can scroll!</h1>
+          <h1>This is extra content so we can scroll!</h1>
+          <h1>This is extra content so we can scroll!</h1>
+          <h1>This is extra content so we can scroll!</h1>
+          <h1>This is extra content so we can scroll!</h1>
+          <h1>This is extra content so we can scroll!</h1>
+          <h1>This is extra content so we can scroll!</h1>
+          <h1>This is extra content so we can scroll!</h1>
+        </FadeInOut>
+      </div>
+    </div>
+  </div>
+);
+
+ReactDom.render(<App />, document.getElementById("app"));
diff --git a/packages/react/examples/codesandbox/components/FadeInOut/src/styles.scss b/packages/react/examples/codesandbox/components/FadeInOut/src/styles.scss
@@ -0,0 +1,8 @@
+/**
+ * Copyright IBM Corp. 2016, 2021
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+@import '@carbon/ibmdotcom-styles/scss/components/scroll-into-view/_scroll-into-view.scss';
diff --git a/packages/react/src/components/DotcomShell/__stories__/DotcomShell.stories.js b/packages/react/src/components/DotcomShell/__stories__/DotcomShell.stories.js
@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2020
+ * Copyright IBM Corp. 2016, 2021
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.

diff --git a/packages/react/src/components/FadeInOut/FadeInOut.js b/packages/react/src/components/FadeInOut/FadeInOut.js
@@ -0,0 +1,200 @@
+/**
+ * Copyright IBM Corp. 2016, 2021
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React, { useCallback, useEffect, useRef } from 'react';
+import { breakpoints } from '@carbon/layout';
+import PropTypes from 'prop-types';
+import settings from 'carbon-components/es/globals/js/settings';
+const { prefix } = settings;
+
+/**
+ * Amount of columns used for calculation.
+ *
+ * @private
+ */
+const colSpan = 3;
+
+/**
+ * Utility handles fade transition for selected elements.
+ *
+ * @example
+ * import { FadeInOut } from '@carbon/ibmdotcom-react';
+ * import '@carbon/ibmdotcom-styles/scss/components/scroll-into-view/_scroll-into-view.scss';
+ *
+ * As an example, the function can be called to target all instances of the
+ * elements in a list:
+ *
+ * const list = '.bx--content-block, .bx--content-group';
+ *
+ * For default values of 400ms and 'one and done' play:
+ * <FadeInOut selectorTargets={selectorTargets}>
+ *   // some content
+ * </FadeInOut>
+ *
+ * With 'continuous play' option:
+ * <FadeInOut selectorTargets={selectorTargets} keepAnimations={true}>
+ *   // some content
+ * </FadeInOut>
+ *
+ * For custom delay time, set within targeted class in the application's CSS code as such:
+ *
+ * .bx--content-block {
+ *   --#{$dds-prefix}--fade-in-out-delay: 250ms;
+ * }
+ *
+ */
+const FadeInOut = ({ children, selectorTargets, keepAnimations }) => {
+  /**
+   * Outer div component ref for using with query selector.
+   *
+   * @private
+   */
+  const componentRef = useRef(null);
+
+  /**
+   * Intersection Observer that watches outer viewport.
+   *
+   * @private
+   */
+  const rootObserver = useRef(null);
+
+  /**
+   * Intersection observer that watches the inner viewport.
+   *
+   * @private
+   */
+  const innerObserver = useRef(null);
+
+  /**
+   * Resize observer to trigger rootMargin recalculations
+   *
+   * @private
+   */
+  const resizeObserver = useRef(null);
+
+  /**
+   * Create observers upon render and update.
+   */
+  useEffect(() => {
+    rootObserver.current = new IntersectionObserver(handleExit);
+    resizeObserver.current = new ResizeObserver(handleResize);
+
+    if (selectorTargets) {
+      componentRef.current?.querySelectorAll(selectorTargets).forEach(item => {
+        rootObserver?.current.observe(item);
+      });
+    }
+    resizeObserver.current.observe(document.documentElement);
+
+    return () => {
+      rootObserver.current.disconnect();
+      innerObserver.current.disconnect();
+      resizeObserver.current.disconnect();
+      rootObserver.current = null;
+      innerObserver.current = null;
+      resizeObserver.current = null;
+    };
+  }, [componentRef, selectorTargets, handleEntrance, handleResize]);
+
+  /**
+   * Handler to add recalculated rootMargin to a new instance of
+   * inner observer after clearing old one first.
+   *
+   * The calculation is done to retrieve the best fitting top and bottom
+   * margin for the fade animation to trigger/remove from elements in a
+   * user's screen.
+   *
+   * The resulting value is the optimal point where a user's attention will be
+   * grabbed by the animation without restricting their view and perception of
+   * the adopting website. The displayed elements will keep the user's attention
+   * for a longer time as they scroll down the website.
+   *
+   * @private
+   */
+  const handleResize = useCallback(() => {
+    if (innerObserver.current) {
+      innerObserver.current.disconnect();
+      innerObserver.current = null;
+    }
+
+    innerObserver.current = new IntersectionObserver(handleEntrance, {
+      rootMargin: `-${(
+        (document.documentElement.clientHeight * colSpan) /
+        breakpoints.max.columns
+      ).toString()}px 0px`,
+    });
+
+    if (selectorTargets) {
+      componentRef.current?.querySelectorAll(selectorTargets).forEach(item => {
+        innerObserver?.current.observe(item);
+      });
+    }
+  }, [componentRef, innerObserver, selectorTargets, handleEntrance]);
+
+  /**
+   * Handler to add fade animation to element
+   *
+   * @param {*} records observed elements
+   * @private
+   *
+   */
+  const handleEntrance = useCallback(
+    records => {
+      records.forEach(({ intersectionRatio, target }) => {
+        if (intersectionRatio > 0) {
+          target.classList.remove(`${prefix}--fade-out`);
+          target.classList.add(`${prefix}--fade-in`);
+          if (!keepAnimations) {
+            rootObserver.current.unobserve(target);
+            innerObserver.current.unobserve(target);
+          }
+        }
+      });
+    },
+    [keepAnimations, rootObserver, innerObserver]
+  );
+
+  /**
+   * Handler to remove element from view
+   *
+   * @param {*} records observed elements
+   * @private
+   *
+   */
+  function handleExit(records) {
+    records.forEach(({ intersectionRatio, target }) => {
+      if (intersectionRatio == 0) {
+        target.classList.remove(`${prefix}--fade-in`);
+        target.classList.add(`${prefix}--fade-out`);
+      }
+    });
+  }
+
+  return <div ref={componentRef}>{children}</div>;
+};
+
+FadeInOut.propTypes = {
+  /**
+   * Component(s) to render within the component
+   */
+  children: PropTypes.oneOfType([
+    PropTypes.arrayOf(PropTypes.node),
+    PropTypes.node,
+  ]).isRequired,
+
+  /**
+   * List of elements to be targeted
+   */
+  selectorTargets: PropTypes.string,
+
+  /**
+   * Boolean to define if animation is continuous
+   */
+  keepAnimations: PropTypes.bool,
+};
+
+export default FadeInOut;