feat(ScrollGradient): new component ScrollGradient (carbon-design-sys…

…tem#4446)

* Initial checkin... WIP

* WIP

* WIP

* WIP

* Continued work in progress - pre four side work.

* Working to get gradients to display without a directional prop

* Gradients z-indexed properly
Broke gradients up into 4 divs
Added inline styling to accomodate for the gradient as well as positioning due to scroll bars.

* Updated the docs
Updated the stories to look better

* Simplified the docs code sample

* Tests running

* Added styling to story

* Added a style to accomodate stories in Docs page

* fix: code changes per pr review

---------

Co-authored-by: elysia <[email protected]>

examples/carbon-for-ibm-products/ScrollGradient/gallery.config.json

@@ -0,0 +1,12 @@
+{
+  "label": "Scroll-Gradient",
+  "package-config": {
+    "flags": {
+      "component": {
+        "ScrollGradient": true
+      }
+    }
+  },
+  "dependencies": {},
+  "devDependencies": {}
+}

examples/carbon-for-ibm-products/ScrollGradient/package.json

@@ -0,0 +1,4 @@
+{
+  "name": "ScrollGradient-component-example",
+  "note": "Run `update-gallery-config to generate."
+}

examples/carbon-for-ibm-products/ScrollGradient/src/Example/Example.jsx

@@ -0,0 +1,19 @@
+// cspell:words grafana
+
+import React from 'react';
+
+// ----------------------------------------------------
+// This is an example showing use of the
+// AboutModal component
+// from the @carbon/ibm-products component library.
+// ----------------------------------------------------
+
+import { ScrollGradient } from '@carbon/ibm-products';
+
+import './_example.scss';
+
+export const Example = () => {
+  return <ScrollGradient />;
+};
+
+export default Example;

examples/carbon-for-ibm-products/ScrollGradient/src/Example/_example.scss

@@ -0,0 +1,3 @@
+@use '@carbon/react/scss/spacing' as *;
+
+/* example SCSS */

packages/ibm-products-styles/src/components/ScrollGradient/_carbon-imports.scss

@@ -0,0 +1,9 @@
+//
+// Copyright IBM Corp. 2024, 2024
+//
+// 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 any Carbon component styles used from ScrollGradient in this file.
+// ScrollGradient uses the following Carbon components:

packages/ibm-products-styles/src/components/ScrollGradient/_index-with-carbon.scss

@@ -0,0 +1,9 @@
+//
+// Copyright IBM Corp. 2024, 2024
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@use './carbon-imports';
+@use './scroll-gradient';

packages/ibm-products-styles/src/components/ScrollGradient/_index.scss

@@ -0,0 +1,8 @@
+//
+// Copyright IBM Corp. 2024, 2024
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@use './scroll-gradient';

packages/ibm-products-styles/src/components/ScrollGradient/_scroll-gradient.scss

@@ -0,0 +1,102 @@
+//
+// Copyright IBM Corp. 2024, 2024
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+// Standard imports.
+@use '../../global/styles/project-settings' as c4p-settings;
+@use '../../global/styles/mixins';
+@use '@carbon/styles/scss/motion' as *;
+@use '@carbon/styles/scss/spacing' as *;
+
+$block-class: #{c4p-settings.$pkg-prefix}--scroll-gradient;
+
+.#{$block-class} {
+  position: relative;
+  display: flex;
+  width: inherit;
+  height: inherit;
+  align-items: stretch;
+  justify-content: stretch;
+}
+.#{$block-class}__content {
+  overflow: auto;
+  width: 100%;
+  height: inherit;
+}
+
+.#{$block-class}__content-children {
+  width: 100%;
+  height: 100%;
+}
+// All gradients
+.#{$block-class}__start-vertical,
+.#{$block-class}__start-horizontal,
+.#{$block-class}__end-vertical,
+.#{$block-class}__end-horizontal {
+  position: absolute;
+  z-index: 1;
+  display: none;
+  pointer-events: none;
+}
+
+// Vertical start
+.#{$block-class}--y-scrollable .#{$block-class}__start-vertical {
+  top: 0;
+  left: 0;
+  height: $spacing-09;
+}
+// Vertical end
+.#{$block-class}--y-scrollable .#{$block-class}__end-vertical {
+  bottom: 0;
+  left: 0;
+  height: $spacing-09;
+}
+
+// Horizontal start
+.#{$block-class}--x-scrollable .#{$block-class}__start-horizontal {
+  top: 0;
+  left: 0;
+  width: $spacing-09;
+}
+
+// Horizontal end
+.#{$block-class}--x-scrollable .#{$block-class}__end-horizontal {
+  top: 0;
+  right: 0;
+  width: $spacing-09;
+}
+
+// Vertical start states
+.#{$block-class}--y-started.#{$block-class}--y-scrollable
+  .#{$block-class}__start-vertical,
+.#{$block-class}--y-end.#{$block-class}--y-scrollable
+  .#{$block-class}__start-vertical {
+  display: block;
+}
+
+// Vertical end states
+.#{$block-class}--y-initial.#{$block-class}--y-scrollable
+  .#{$block-class}__end-vertical,
+.#{$block-class}--y-started.#{$block-class}--y-scrollable
+  .#{$block-class}__end-vertical {
+  display: block;
+}
+
+// Horizontal start states
+.#{$block-class}--x-started.#{$block-class}--x-scrollable
+  .#{$block-class}__start-horizontal,
+.#{$block-class}--x-end.#{$block-class}--x-scrollable
+  .#{$block-class}__start-horizontal {
+  display: block;
+}
+
+// Horizontal end states
+.#{$block-class}--x-initial.#{$block-class}--x-scrollable
+  .#{$block-class}__end-horizontal,
+.#{$block-class}--x-started.#{$block-class}--x-scrollable
+  .#{$block-class}__end-horizontal {
+  display: block;
+}

packages/ibm-products-styles/src/components/_index-with-carbon.scss

@@ -70,5 +70,6 @@
 @use './Nav/index-with-carbon' as *;
 @use './StringFormatter/index-with-carbon' as *;
 @use './UserAvatar/index-with-carbon' as *;
+@use './ScrollGradient/index-with-carbon' as *;
 @use './StatusIndicator/index-with-carbon' as *;
 @use './FilterPanel/index-with-carbon' as *;

packages/ibm-products-styles/src/components/_index.scss

@@ -78,5 +78,6 @@
 @use './Nav';
 @use './StringFormatter';
 @use './UserAvatar';
+@use './ScrollGradient';
 @use './StatusIndicator';
 @use './FilterPanel';