@telus-uds/components-community.sticky 1.0.0

package/.eslintrc.js

@@ -0,0 +1,21 @@
+const path = require('path')
+const base = require('../../../../eslintrc.base')
+
+base.rules['import/no-extraneous-dependencies'] = [
+  'error',
+  { packageDir: [__dirname, path.join(__dirname, '../..')] }
+]
+base.settings = {
+  ...base.settings,
+  'import/resolver': {
+    node: {
+      ...base.settings?.['import/resolver']?.node,
+      moduleDirectory: [
+        path.join(__dirname, '../../node_modules'),
+        path.join(__dirname, '../../../../node_modules')
+      ]
+    }
+  }
+}
+
+module.exports = base

package/CHANGELOG.json

@@ -0,0 +1,50 @@
+{
+  "name": "@telus-uds/components-community.sticky",
+  "entries": [
+    {
+      "date": "Wed, 24 May 2023 01:36:34 GMT",
+      "tag": "@telus-uds/components-community.sticky_v1.0.0",
+      "version": "1.0.0",
+      "comments": {
+        "major": [
+          {
+            "author": "oscar.palencia@telus.com",
+            "package": "@telus-uds/components-community.sticky",
+            "commit": "8dbd3648007f312603cb1844872ea3ff85202e55",
+            "comment": "Implementation of Sticky component"
+          },
+          {
+            "author": "beachball",
+            "package": "@telus-uds/components-community.sticky",
+            "comment": "Bump @telus-uds/components-base to v1.43.0",
+            "commit": "8dbd3648007f312603cb1844872ea3ff85202e55"
+          },
+          {
+            "author": "beachball",
+            "package": "@telus-uds/components-community.sticky",
+            "comment": "Bump @telus-uds/components-web to v2.1.0",
+            "commit": "8dbd3648007f312603cb1844872ea3ff85202e55"
+          },
+          {
+            "author": "beachball",
+            "package": "@telus-uds/components-community.sticky",
+            "comment": "Bump @telus-uds/system-constants to v1.2.1",
+            "commit": "8dbd3648007f312603cb1844872ea3ff85202e55"
+          },
+          {
+            "author": "beachball",
+            "package": "@telus-uds/components-community.sticky",
+            "comment": "Bump @telus-uds/system-theme-tokens to v2.26.1",
+            "commit": "8dbd3648007f312603cb1844872ea3ff85202e55"
+          },
+          {
+            "author": "beachball",
+            "package": "@telus-uds/components-community.sticky",
+            "comment": "Bump @telus-uds/browserslist-config to v1.0.5",
+            "commit": "8dbd3648007f312603cb1844872ea3ff85202e55"
+          }
+        ]
+      }
+    }
+  ]
+}

package/CHANGELOG.md

@@ -0,0 +1,18 @@
+# Change Log - @telus-uds/components-community.sticky
+
+This log was last generated on Wed, 24 May 2023 01:36:34 GMT and should not be manually modified.
+
+<!-- Start content -->
+
+## 1.0.0
+
+Wed, 24 May 2023 01:36:34 GMT
+
+### Major changes
+
+- Implementation of Sticky component (oscar.palencia@telus.com)
+- Bump @telus-uds/components-base to v1.43.0
+- Bump @telus-uds/components-web to v2.1.0
+- Bump @telus-uds/system-constants to v1.2.1
+- Bump @telus-uds/system-theme-tokens to v2.26.1
+- Bump @telus-uds/browserslist-config to v1.0.5

package/__fixtures__/Theme.jsx

@@ -0,0 +1,13 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import { ThemeProvider } from '@telus-uds/components-base'
+import testTheme from './testTheme'
+
+const Theme = ({ children }) => <ThemeProvider defaultTheme={testTheme}>{children}</ThemeProvider>
+
+Theme.propTypes = {
+  children: PropTypes.node.isRequired
+}
+
+export default Theme

package/__fixtures__/testTheme.js

@@ -0,0 +1,335 @@
+import { appearances } from '@telus-uds/system-theme-tokens'
+import systemThemeTokensPackage from '@telus-uds/system-theme-tokens/package.json'
+
+// This is a dev-only file so we don't need to make @telus-uds/palette-allium a dependency.
+
+export default {
+  metadata: {
+    name: 'test',
+    themeTokensVersion: systemThemeTokensPackage.version
+  },
+  components: {
+    spacingScale: {
+      tokens: {
+        size: 36
+      },
+      rules: [
+        { if: { space: 5 }, tokens: { size: 32 } },
+        { if: { space: 4 }, tokens: { size: 24 } },
+        { if: { space: 3 }, tokens: { size: 16 } },
+        { if: { space: 2 }, tokens: { size: 8 } },
+        { if: { space: 1 }, tokens: { size: 4 } },
+
+        { if: { compact: true }, tokens: { size: 12 } },
+        { if: { compact: true, space: 5 }, tokens: { size: 10 } },
+        { if: { compact: true, space: 4 }, tokens: { size: 8 } },
+        { if: { compact: true, space: 3 }, tokens: { size: 6 } },
+        { if: { compact: true, space: 2 }, tokens: { size: 4 } },
+        { if: { compact: true, space: 1 }, tokens: { size: 2 } },
+
+        { if: { responsive: true }, tokens: { size: 6 } },
+        { if: { responsive: true, space: 5 }, tokens: { size: 5 } },
+        { if: { responsive: true, space: 4 }, tokens: { size: 4 } },
+        { if: { responsive: true, space: 3 }, tokens: { size: 3 } },
+        { if: { responsive: true, space: 2 }, tokens: { size: 2 } },
+        { if: { responsive: true, space: 1 }, tokens: { size: 1 } },
+        { if: { responsive: true, viewport: ['sm', 'md'] }, tokens: { size: 8 } },
+        { if: { responsive: true, viewport: ['sm', 'md'], space: 5 }, tokens: { size: 7 } },
+        { if: { responsive: true, viewport: ['sm', 'md'], space: 4 }, tokens: { size: 6 } },
+        { if: { responsive: true, viewport: ['sm', 'md'], space: 3 }, tokens: { size: 5 } },
+        { if: { responsive: true, viewport: ['sm', 'md'], space: 2 }, tokens: { size: 4 } },
+        { if: { responsive: true, viewport: ['sm', 'md'], space: 1 }, tokens: { size: 3 } },
+        { if: { responsive: true, viewport: ['lg', 'xl'] }, tokens: { size: 12 } },
+        { if: { responsive: true, viewport: ['lg', 'xl'], space: 5 }, tokens: { size: 11 } },
+        { if: { responsive: true, viewport: ['lg', 'xl'], space: 4 }, tokens: { size: 10 } },
+        { if: { responsive: true, viewport: ['lg', 'xl'], space: 3 }, tokens: { size: 9 } },
+        { if: { responsive: true, viewport: ['lg', 'xl'], space: 2 }, tokens: { size: 8 } },
+        { if: { responsive: true, viewport: ['lg', 'xl'], space: 1 }, tokens: { size: 7 } },
+
+        { if: { space: 0 }, tokens: { size: 0 } }
+      ]
+    },
+    Box: {
+      tokens: {},
+      variants: {
+        lightest: {
+          backgroundColor: '#ffffff'
+        },
+        light: {
+          backgroundColor: '#f4f4f7'
+        },
+        dark: {
+          backgroundColor: '#414547'
+        },
+        darkest: {
+          backgroundColor: '#2c2e30'
+        },
+        critical: {
+          backgroundColor: '#c12335'
+        },
+        danger: {
+          backgroundColor: '#fff6f8'
+        },
+        warning: {
+          backgroundColor: '#000000'
+        },
+        positive: {
+          backgroundColor: '#f4f9f2'
+        },
+        brand: {
+          backgroundColor: '#4d80de'
+        }
+      },
+      defaultVariant: ['lightest']
+    },
+    Typography: {
+      appearances: {
+        weight: {
+          values: ['light', 'medium', 'bold'],
+          type: 'variant'
+        },
+        size: {
+          values: [
+            'micro',
+            'small',
+            'large',
+            'h1',
+            'h2',
+            'h3',
+            'h4',
+            'h5',
+            'h6',
+            'display1',
+            'display2'
+          ],
+          type: 'variant'
+        },
+        colour: {
+          values: ['secondary', 'tertiary'],
+          type: 'variant'
+        },
+        inverse: {
+          description: 'Styles the link white for use on dark backgrounds.',
+          values: [true],
+          type: 'variant'
+        },
+        viewport: appearances.system.viewport
+      },
+      tokens: {
+        fontWeight: '400',
+        fontSize: 16,
+        color: '#2c2e30',
+        lineHeight: 1.5,
+        fontScaleCap: 64
+      },
+      rules: [
+        {
+          if: { inverse: true },
+          tokens: {
+            color: '#ffffff'
+          }
+        },
+        {
+          if: { colour: 'primary' },
+          tokens: {
+            color: '#2c2e30'
+          }
+        },
+        {
+          if: { colour: 'secondary' },
+          tokens: {
+            color: '#414547'
+          }
+        },
+        {
+          if: { weight: 'light' },
+          tokens: {
+            fontWeight: '300'
+          }
+        },
+        {
+          if: { weight: 'medium' },
+          tokens: {
+            fontWeight: '500'
+          }
+        },
+        {
+          if: { weight: 'bold' },
+          tokens: {
+            fontWeight: '700'
+          }
+        },
+        {
+          if: { size: 'large' },
+          tokens: {
+            fontSize: 20,
+            lineHeight: 1.6
+          }
+        },
+        {
+          if: { size: 'small' },
+          tokens: {
+            fontSize: 14,
+            lineHeight: 1.4
+          }
+        },
+        {
+          if: { size: 'micro' },
+          tokens: {
+            fontSize: 12,
+            fontWeight: '500',
+            lineHeight: 1.3
+          }
+        },
+        {
+          if: { size: 'display1' },
+          tokens: {
+            fontSize: 40,
+            fontWeight: '300',
+            lineHeight: 1.2
+          }
+        },
+        {
+          if: { size: 'display1', colour: 'primary' },
+          tokens: {
+            color: '#4d80de'
+          }
+        },
+        {
+          if: { size: 'display1', colour: 'secondary' },
+          tokens: {
+            color: '#2c2e30'
+          }
+        },
+        {
+          if: { size: 'display1', viewport: ['lg', 'xl'] },
+          tokens: {
+            fontSize: 64,
+            lineHeight: 1.1
+          }
+        },
+        {
+          if: { size: 'display2' },
+          tokens: {
+            fontSize: 40,
+            fontWeight: '300',
+            color: '#4d80de',
+            lineHeight: 1.2
+          }
+        },
+        {
+          if: { size: 'display2', colour: 'secondary' },
+          tokens: {
+            color: '#2c2e30'
+          }
+        },
+        {
+          if: { size: 'display2', viewport: ['lg', 'xl'] },
+          tokens: {
+            fontSize: 56,
+            lineHeight: 1.1
+          }
+        },
+        {
+          if: { size: 'h1' },
+          tokens: {
+            fontSize: 28,
+            lineHeight: 1.2,
+            color: '#4d80de'
+          }
+        },
+        {
+          if: { size: 'h1', colour: 'secondary' },
+          tokens: {
+            color: '#2c2e30'
+          }
+        },
+        {
+          if: { size: 'h1', viewport: ['lg', 'xl'] },
+          tokens: {
+            fontSize: 40,
+            lineHeight: 1.1
+          }
+        },
+        {
+          if: { size: 'h2' },
+          tokens: {
+            fontSize: 24,
+            color: '#4d80de',
+            fontWeight: '500',
+            lineHeight: 1.3
+          }
+        },
+        {
+          if: { size: 'h2', colour: 'secondary' },
+          tokens: {
+            color: '#2c2e30'
+          }
+        },
+        {
+          if: { size: 'h2', viewport: ['lg', 'xl'] },
+          tokens: {
+            fontSize: 28
+          }
+        },
+        {
+          if: { size: 'h3' },
+          tokens: {
+            fontSize: 20,
+            fontWeight: '500',
+            lineHeight: 1.4,
+            color: '#4d80de'
+          }
+        },
+        {
+          if: { size: 'h3', colour: 'secondary' },
+          tokens: {
+            color: '#2c2e30'
+          }
+        },
+        {
+          if: { size: 'h3', viewport: ['lg', 'xl'] },
+          tokens: {
+            fontSize: 24,
+            lineHeight: 1.3
+          }
+        },
+        {
+          if: { size: 'h4' },
+          tokens: {
+            fontSize: 16,
+            weight: '500',
+            lineHeight: 1.5
+          }
+        },
+        {
+          if: { size: 'h5' },
+          tokens: {
+            fontSize: 14,
+            fontWeight: '500',
+            lineHeight: 1.3
+          }
+        },
+        {
+          if: { size: 'h6' },
+          tokens: {
+            fontSize: 12,
+            fontWeight: '700',
+            lineHeight: 1.3
+          }
+        },
+        {
+          if: { size: 'h6', colour: 'tertiary' },
+          tokens: {
+            color: '#000000'
+          }
+        }
+      ]
+    },
+    Sticky: {
+      appearances: {},
+      rules: [],
+      tokens: {}
+    }
+  }
+}

package/__tests__/Sticky.test.jsx

@@ -0,0 +1,66 @@
+import React from 'react'
+import { render } from '@testing-library/react'
+import { Typography } from '@telus-uds/components-web'
+import Theme from '../__fixtures__/Theme'
+import { Sticky } from '../src'
+
+describe('Sticky', () => {
+  beforeEach(() => {
+    const mockIntersectionObserver = jest.fn()
+    mockIntersectionObserver.mockReturnValue({
+      observe: jest.fn(),
+      unobserve: jest.fn(),
+      disconnect: jest.fn()
+    })
+    window.IntersectionObserver = mockIntersectionObserver
+  })
+
+  it('is rendered with children', () => {
+    const { getByText, container } = render(
+      <Theme>
+        <Sticky>
+          <Typography>Sticky Content</Typography>
+        </Sticky>
+      </Theme>
+    )
+    const sentinelTop = container.querySelector('.sentinelTop')
+    const sentinelBottom = container.querySelector('.sentinelBottom')
+    const stickyElement = container.querySelector('.sticky-element')
+    const titleElement = getByText(/Sticky Content/i)
+    expect(sentinelTop).toBeInTheDocument()
+    expect(sentinelBottom).toBeInTheDocument()
+    expect(stickyElement).toBeInTheDocument()
+    expect(titleElement).toBeInTheDocument()
+  })
+
+  it('is rendered with children using alternate variant', () => {
+    const { getByText, container } = render(
+      <Theme>
+        <Sticky variant="alternate">
+          <Typography>Sticky Content</Typography>
+        </Sticky>
+      </Theme>
+    )
+    const titleElement = getByText(/Sticky Content/i)
+    const alternateSticky = container.querySelector('.alternate')
+    const stickyElement = container.querySelector('.sticky-element')
+    expect(titleElement).toBeInTheDocument()
+    expect(alternateSticky).toBeInTheDocument()
+    expect(stickyElement).toBeInTheDocument()
+  })
+
+  it('is rendered with children using hidden variant', () => {
+    const { getByText, container } = render(
+      <Theme>
+        <Sticky variant="hidden">
+          <Typography>Sticky Content</Typography>
+        </Sticky>
+      </Theme>
+    )
+    const titleElement = getByText(/Sticky Content/i)
+    const stickyElement = container.querySelector('.sticky-element')
+    expect(stickyElement).toBeInTheDocument()
+    expect(titleElement).toBeInTheDocument()
+    expect(stickyElement.parentNode).toHaveStyle('height: 0px')
+  })
+})

package/babel.config.js

@@ -0,0 +1,4 @@
+const baseConfig = require('../../../../babel.config.base')
+const name = require('./package.json').name.split('@telus-uds/').pop()
+
+module.exports = baseConfig({ name })

package/jest.config.js

@@ -0,0 +1,20 @@
+module.exports = () => ({
+  displayName: {
+    name: require('./package.json').name.split('@telus-uds/').pop(),
+    color: 'magenta'
+  },
+  testEnvironment: 'jsdom',
+  // __dirname here tells babel to look in ds-allium/ for babel root when running from monorepo root
+  transform: { '\\.(js|jsx)$': ['babel-jest', { cwd: __dirname }] },
+  moduleNameMapper: {
+    '.+\\.(otf|png|jpg)$': 'identity-obj-proxy',
+    // mock icon imports as in https://jestjs.io/docs/webpack#mocking-css-modules
+    '\\.icon.svg': '<rootDir>/__mocks__/iconMock.jsx',
+    '\\.css': '<rootDir>/__mocks__/styleMock.js',
+    '^styled-components':
+      '<rootDir>/../../node_modules/styled-components/dist/styled-components.browser.cjs.js'
+  },
+  setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
+  // Count everything in src when calculating coverage
+  collectCoverageFrom: ['src/*.{js,jsx}']
+})

package/jest.setup.js

@@ -0,0 +1,5 @@
+import '@testing-library/jest-dom'
+import 'jest-styled-components'
+import { toHaveNoViolations } from 'jest-axe'
+
+expect.extend(toHaveNoViolations)

package/lib/Sticky.js

@@ -0,0 +1,126 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _componentsWeb = require("@telus-uds/components-web");
+
+var _componentsBase = require("@telus-uds/components-base");
+
+var _styles = _interopRequireDefault(require("./styles"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function createObserver(ref, callback) {
+  const options = {
+    threshold: [1]
+  };
+  const observer = new IntersectionObserver(_ref => {
+    let [e] = _ref;
+    const isNotVisibleInViewport = e.intersectionRatio < 1;
+    callback(isNotVisibleInViewport);
+  }, options);
+  observer.observe(ref.current);
+  return observer;
+}
+
+const Sticky = _ref2 => {
+  let {
+    children,
+    variant = 'default',
+    vertical = {
+      xs: 0,
+      sm: 0,
+      lg: 0,
+      xl: 0
+    },
+    horizontal = {
+      xs: 0,
+      sm: 0,
+      lg: 0,
+      xl: 0
+    }
+  } = _ref2;
+  const sentinelTopRef = (0, _react.useRef)();
+  const sentinelBottomRef = (0, _react.useRef)();
+  const stickyWrapperRef = (0, _react.useRef)();
+  const [observer, setObserver] = (0, _react.useState)();
+  (0, _react.useEffect)(() => {
+    if (observer) {
+      observer.disconnect();
+    }
+
+    if (variant === 'default' || variant === 'hidden') {
+      setObserver(createObserver(sentinelTopRef, intersected => {
+        var _stickyWrapperRef$cur, _stickyWrapperRef$cur2;
+
+        (_stickyWrapperRef$cur = stickyWrapperRef.current) === null || _stickyWrapperRef$cur === void 0 ? void 0 : _stickyWrapperRef$cur.classList.toggle('sticky-mode', intersected);
+        (_stickyWrapperRef$cur2 = stickyWrapperRef.current) === null || _stickyWrapperRef$cur2 === void 0 ? void 0 : _stickyWrapperRef$cur2.classList.toggle('top', intersected);
+      }));
+    }
+
+    if (variant === 'alternate') {
+      setObserver(createObserver(sentinelBottomRef, intersected => {
+        var _stickyWrapperRef$cur3, _stickyWrapperRef$cur4;
+
+        (_stickyWrapperRef$cur3 = stickyWrapperRef.current) === null || _stickyWrapperRef$cur3 === void 0 ? void 0 : _stickyWrapperRef$cur3.classList.toggle('sticky-mode', intersected);
+        (_stickyWrapperRef$cur4 = stickyWrapperRef.current) === null || _stickyWrapperRef$cur4 === void 0 ? void 0 : _stickyWrapperRef$cur4.classList.toggle('bottom', intersected);
+      }));
+    } // eslint-disable-next-line react-hooks/exhaustive-deps
+
+  }, [variant]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "sentinelTop",
+      ref: sentinelTopRef
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.default, {
+      className: variant,
+      ref: stickyWrapperRef,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "sticky-element",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsWeb.Box, {
+          vertical: vertical,
+          horizontal: horizontal,
+          children: children
+        })
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "sentinelBottom",
+      ref: sentinelBottomRef
+    })]
+  });
+};
+
+Sticky.propTypes = {
+  /**
+   * Sets top and bottom padding using the theme's spacing scale.
+   *
+   */
+  vertical: _componentsBase.spacingProps.types.spacingValue,
+
+  /**
+   * Sets left and right padding using the theme's spacing scale.
+   *
+   */
+  horizontal: _componentsBase.spacingProps.types.spacingValue,
+
+  /**
+   * Sticky accepts any content as children.
+   */
+  children: _propTypes.default.node.isRequired,
+  variant: _propTypes.default.oneOf(['default', 'alternate', 'hidden'])
+};
+var _default = Sticky;
+exports.default = _default;

package/lib/index.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Sticky", {
+  enumerable: true,
+  get: function () {
+    return _Sticky.default;
+  }
+});
+exports.default = void 0;
+
+var _Sticky = _interopRequireDefault(require("./Sticky"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _default = _Sticky.default;
+exports.default = _default;

package/lib/styles.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const StickyWrapper = /*#__PURE__*/_styledComponents.default.div.withConfig({
+  displayName: "styles__StickyWrapper",
+  componentId: "[object Object]__sc-160gk65-0"
+})(["top:0;&.sticky-mode{&.alternate,&.default{position:-webkit-sticky;position:sticky;top:0px;z-index:1;box-shadow:0px 7px 4px -3px rgb(0,0,0,0.08);}&.hidden{animation:0.3s animateIn forwards;.sticky-element{animation:0.3s shadowIn forwards;}}}&.alternate{}&.hidden{position:sticky;pointerevents:none;height:0px;min-height:0px;max-height:0px;animation:0.6s animateOut forwards;.sticky-element{background:white;animation:0.6s shadowOut forwards;}}.sticky-element{background:#ffffff;}@keyframes animateIn{from{height:0%;pointerevents:none;transform:translateY(-100vh);opacity:0;z-index:-1;}to{height:100%;pointerevents:all;transform:translateY(0);opacity:1;z-index:1;}}@keyframes animateOut{from{height:100%;pointerevents:all;transform:translateY(0);opacity:1;z-index:1;}to{height:0%;pointerevents:none;transform:translateY(-100vh);opacity:0;z-index:-1;}}@keyframes shadowIn{from{box-shadow:0px 7px 4px -3px rgb(0,0,0,0);}to{box-shadow:0px 7px 4px -3px rgb(0,0,0,0.08);}}@keyframes shadowOut{from{box-shadow:0px 7px 4px -3px rgb(0,0,0,0.08);}to{box-shadow:0px 7px 4px -3px rgb(0,0,0,0);}}"]);
+
+var _default = StickyWrapper;
+exports.default = _default;

package/package.json

@@ -0,0 +1,49 @@
+{
+  "author": "TELUS Digital",
+  "browserslist": [
+    "extends @telus-uds/browserslist-config"
+  ],
+  "dependencies": {
+    "@telus-uds/components-base": "^1.43.0",
+    "@telus-uds/components-web": "^2.1.0",
+    "@telus-uds/system-constants": "^1.2.1",
+    "@telus-uds/system-theme-tokens": "^2.26.1",
+    "prop-types": "^15.7.2",
+    "styled-components": "^5.3.10"
+  },
+  "devDependencies": {
+    "@telus-uds/browserslist-config": "^1.0.5",
+    "@testing-library/jest-dom": "^5.16.1",
+    "@testing-library/react": "^13.3.0",
+    "babel-plugin-styled-components": "^2.0.6",
+    "jest-axe": "^6.0.0",
+    "jest-styled-components": "^7.0.8"
+  },
+  "homepage": "https://github.com/telus/universal-design-system#readme",
+  "license": "UNLICENSED",
+  "name": "@telus-uds/components-community.sticky",
+  "peerDependencies": {
+    "react": "^17.0.2 || ^18.0.0",
+    "react-dom": "^17.0.2 || ^18.0.0"
+  },
+  "main": "lib/index.js",
+  "module": "lib-module/index.js",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/telus/universal-design-system.git"
+  },
+  "scripts": {
+    "format": "prettier --write .",
+    "lint": "telus-standard",
+    "lint:fix": "telus-standard --fix",
+    "test": "jest",
+    "build:main": "babel src -d lib",
+    "build:module": "babel src -d lib-module --env-name module",
+    "build": "npm run build:main && npm run build:module"
+  },
+  "sideEffects": false,
+  "standard-engine": {
+    "skip": true
+  },
+  "version": "1.0.0"
+}

package/src/Sticky.jsx

@@ -0,0 +1,83 @@
+import React, { useEffect, useRef, useState } from 'react'
+import PropTypes from 'prop-types'
+import { Box } from '@telus-uds/components-web'
+import { spacingProps } from '@telus-uds/components-base'
+import StickyWrapper from './styles'
+
+function createObserver(ref, callback) {
+  const options = { threshold: [1] }
+  const observer = new IntersectionObserver(([e]) => {
+    const isNotVisibleInViewport = e.intersectionRatio < 1
+    callback(isNotVisibleInViewport)
+  }, options)
+  observer.observe(ref.current)
+  return observer
+}
+
+const Sticky = ({
+  children,
+  variant = 'default',
+  vertical = { xs: 0, sm: 0, lg: 0, xl: 0 },
+  horizontal = { xs: 0, sm: 0, lg: 0, xl: 0 }
+}) => {
+  const sentinelTopRef = useRef()
+  const sentinelBottomRef = useRef()
+  const stickyWrapperRef = useRef()
+  const [observer, setObserver] = useState()
+  useEffect(() => {
+    if (observer) {
+      observer.disconnect()
+    }
+    if (variant === 'default' || variant === 'hidden') {
+      setObserver(
+        createObserver(sentinelTopRef, (intersected) => {
+          stickyWrapperRef.current?.classList.toggle('sticky-mode', intersected)
+          stickyWrapperRef.current?.classList.toggle('top', intersected)
+        })
+      )
+    }
+    if (variant === 'alternate') {
+      setObserver(
+        createObserver(sentinelBottomRef, (intersected) => {
+          stickyWrapperRef.current?.classList.toggle('sticky-mode', intersected)
+          stickyWrapperRef.current?.classList.toggle('bottom', intersected)
+        })
+      )
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [variant])
+
+  return (
+    <>
+      <div className="sentinelTop" ref={sentinelTopRef} />
+      <StickyWrapper className={variant} ref={stickyWrapperRef}>
+        <div className="sticky-element">
+          <Box vertical={vertical} horizontal={horizontal}>
+            {children}
+          </Box>
+        </div>
+      </StickyWrapper>
+      <div className="sentinelBottom" ref={sentinelBottomRef} />
+    </>
+  )
+}
+
+Sticky.propTypes = {
+  /**
+   * Sets top and bottom padding using the theme's spacing scale.
+   *
+   */
+  vertical: spacingProps.types.spacingValue,
+  /**
+   * Sets left and right padding using the theme's spacing scale.
+   *
+   */
+  horizontal: spacingProps.types.spacingValue,
+  /**
+   * Sticky accepts any content as children.
+   */
+  children: PropTypes.node.isRequired,
+  variant: PropTypes.oneOf(['default', 'alternate', 'hidden'])
+}
+
+export default Sticky

package/src/index.js

@@ -0,0 +1,5 @@
+import Sticky from './Sticky'
+
+export { default as Sticky } from './Sticky'
+
+export default Sticky

package/src/styles.js

@@ -0,0 +1,92 @@
+import styled from 'styled-components'
+
+const StickyWrapper = styled.div`
+  top: 0;
+
+  &.sticky-mode {
+    &.alternate,
+    &.default {
+      position: -webkit-sticky;
+      position: sticky;
+      top: 0px;
+      z-index: 1;
+      box-shadow: 0px 7px 4px -3px rgb(0, 0, 0, 0.08);
+    }
+
+    &.hidden {
+      animation: 0.3s animateIn forwards;
+      .sticky-element {
+        animation: 0.3s shadowIn forwards;
+      }
+    }
+  }
+  &.alternate {
+  }
+  &.hidden {
+    position: sticky;
+    pointerevents: none;
+    height: 0px;
+    min-height: 0px;
+    max-height: 0px;
+    animation: 0.6s animateOut forwards;
+    .sticky-element {
+      background: white;
+      animation: 0.6s shadowOut forwards;
+    }
+  }
+
+  .sticky-element {
+    background: #ffffff;
+  }
+
+  @keyframes animateIn {
+    from {
+      height: 0%;
+      pointerevents: none;
+      transform: translateY(-100vh);
+      opacity: 0;
+      z-index: -1;
+    }
+    to {
+      height: 100%;
+      pointerevents: all;
+      transform: translateY(0);
+      opacity: 1;
+      z-index: 1;
+    }
+  }
+  @keyframes animateOut {
+    from {
+      height: 100%;
+      pointerevents: all;
+      transform: translateY(0);
+      opacity: 1;
+      z-index: 1;
+    }
+    to {
+      height: 0%;
+      pointerevents: none;
+      transform: translateY(-100vh);
+      opacity: 0;
+      z-index: -1;
+    }
+  }
+  @keyframes shadowIn {
+    from {
+      box-shadow: 0px 7px 4px -3px rgb(0, 0, 0, 0);
+    }
+    to {
+      box-shadow: 0px 7px 4px -3px rgb(0, 0, 0, 0.08);
+    }
+  }
+  @keyframes shadowOut {
+    from {
+      box-shadow: 0px 7px 4px -3px rgb(0, 0, 0, 0.08);
+    }
+    to {
+      box-shadow: 0px 7px 4px -3px rgb(0, 0, 0, 0);
+    }
+  }
+`
+
+export default StickyWrapper

package/stories/Sticky.stories.jsx

@@ -0,0 +1,222 @@
+import React from 'react'
+import { Typography, FlexGrid, Box, StoryCard, Spacer, Card } from '@telus-uds/components-web'
+import { Sticky } from '../..'
+import pigPhoto from '../__fixtures__/images/pigs-allium-lo.png'
+import mountainPhoto from '../__fixtures__/images/mountains_desktop.jpg'
+
+export default {
+  title: 'Community/Sticky',
+  component: Sticky
+}
+
+export const Default = (args) => (
+  <FlexGrid gutter={false}>
+    <FlexGrid.Row horizontalAlign="center">
+      <FlexGrid.Col xs={12}>
+        <Box variant={{ background: 'light' }} space={4}>
+          <Typography variant={{ size: 'h3' }}>Lorem Ipsum</Typography>
+          <Spacer space={4} />
+          <Typography>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque rutrum dolor
+            ligula, ac placerat tortor ornare a. Praesent pellentesque accumsan nibh eu volutpat.
+          </Typography>
+          <Spacer space={2} />
+          <Typography>
+            Vestibulum blandit dui leo, non placerat nisi efficitur eget. Pellentesque habitant
+            morbi tristique senectus et netus et malesuada fames ac turpis egestas.
+          </Typography>
+        </Box>
+      </FlexGrid.Col>
+    </FlexGrid.Row>
+    <FlexGrid.Row horizontalAlign="center">
+      <FlexGrid.Col md={4}>
+        <StoryCard
+          href="https://telus.com"
+          tag="Lorem Ipsum"
+          date="Oct 28, 2023"
+          title="Lorem Ipsum"
+          description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+          fullBleedContent={{
+            alt: 'Pig photo',
+            src: pigPhoto
+          }}
+        />
+      </FlexGrid.Col>
+      <FlexGrid.Col md={4}>
+        <StoryCard
+          href="https://telus.com"
+          tag="Lorem Ipsum"
+          date="Oct 28, 2023"
+          title="Lorem Ipsum"
+          description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+          fullBleedContent={{
+            alt: 'Pig photo',
+            src: pigPhoto
+          }}
+        />
+      </FlexGrid.Col>
+      <FlexGrid.Col md={4}>
+        <StoryCard
+          href="https://telus.com"
+          tag="Lorem Ipsum"
+          date="Oct 28, 2023"
+          title="Lorem Ipsum"
+          description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+          fullBleedContent={{
+            alt: 'Pig photo',
+            src: pigPhoto
+          }}
+        />
+      </FlexGrid.Col>
+    </FlexGrid.Row>
+    <Sticky {...args}>
+      <FlexGrid gutter={false}>
+        <FlexGrid.Row horizontalAlign="center">
+          <FlexGrid.Col>
+            <Box variant={{ background: 'featurePrimary' }} space={2}>
+              <Typography block variant={{ size: 'h1', inverse: true }}>
+                Sticky Content
+              </Typography>
+              <Spacer space={4} />
+              <Typography align="center" variant={{ inverse: true }}>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, diam quis
+                aliquam Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+              </Typography>
+            </Box>
+          </FlexGrid.Col>
+        </FlexGrid.Row>
+      </FlexGrid>
+    </Sticky>
+    <FlexGrid.Row horizontalAlign="center">
+      <FlexGrid.Col md={12}>
+        <Card
+          footer={
+            <Typography>
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque rutrum dolor
+              ligula, ac placerat tortor ornare a. Praesent pellentesque accumsan nibh eu volutpat.
+            </Typography>
+          }
+        >
+          <Typography block variant={{ size: 'h2' }}>
+            Lorem Ipsum
+          </Typography>
+          <Box top={4}>
+            <Typography>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</Typography>
+          </Box>
+        </Card>
+      </FlexGrid.Col>
+    </FlexGrid.Row>
+    <FlexGrid.Row horizontalAlign="center">
+      <FlexGrid.Col xs={12}>
+        <Box variant={{ background: 'light' }} space={4}>
+          <Typography variant={{ size: 'h3' }}>Lorem Ipsum</Typography>
+          <Spacer space={4} />
+          <Typography>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque rutrum dolor
+            ligula, ac placerat tortor ornare a. Praesent pellentesque accumsan nibh eu volutpat.
+          </Typography>
+          <Spacer space={2} />
+          <Typography>
+            Vestibulum blandit dui leo, non placerat nisi efficitur eget. Pellentesque habitant
+            morbi tristique senectus et netus et malesuada fames ac turpis egestas.
+          </Typography>
+        </Box>
+      </FlexGrid.Col>
+    </FlexGrid.Row>
+    <FlexGrid.Row horizontalAlign="center">
+      <FlexGrid.Col md={4}>
+        <StoryCard
+          href="https://telus.com"
+          tag="Lorem Ipsum"
+          date="Oct 28, 2023"
+          title="Lorem Ipsum"
+          description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+          fullBleedContent={{
+            alt: 'Mountain photo',
+            src: mountainPhoto
+          }}
+        />
+      </FlexGrid.Col>
+      <FlexGrid.Col md={4}>
+        <StoryCard
+          href="https://telus.com"
+          tag="Lorem Ipsum"
+          date="Oct 28, 2023"
+          title="Lorem Ipsum"
+          description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+          fullBleedContent={{
+            alt: 'Mountain photo',
+            src: mountainPhoto
+          }}
+        />
+      </FlexGrid.Col>
+      <FlexGrid.Col md={4}>
+        <StoryCard
+          href="https://telus.com"
+          tag="Lorem Ipsum"
+          date="Oct 28, 2023"
+          title="Lorem Ipsum"
+          description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+          fullBleedContent={{
+            alt: 'Mountain photo',
+            src: mountainPhoto
+          }}
+        />
+      </FlexGrid.Col>
+    </FlexGrid.Row>
+    <FlexGrid.Row horizontalAlign="center">
+      <FlexGrid.Col xs={12}>
+        <Box variant={{ background: 'light' }} space={4}>
+          <Typography variant={{ size: 'h3' }}>Lorem Ipsum</Typography>
+          <Spacer space={4} />
+          <Typography>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque rutrum dolor
+            ligula, ac placerat tortor ornare a. Praesent pellentesque accumsan nibh eu volutpat.
+          </Typography>
+          <Spacer space={2} />
+          <Typography>
+            Vestibulum blandit dui leo, non placerat nisi efficitur eget. Pellentesque habitant
+            morbi tristique senectus et netus et malesuada fames ac turpis egestas.
+          </Typography>
+        </Box>
+      </FlexGrid.Col>
+    </FlexGrid.Row>
+    <FlexGrid.Row horizontalAlign="center">
+      <FlexGrid.Col xs={12}>
+        <Box variant={{ background: 'light' }} space={4}>
+          <Typography variant={{ size: 'h3' }}>Lorem Ipsum</Typography>
+          <Spacer space={4} />
+          <Typography>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque rutrum dolor
+            ligula, ac placerat tortor ornare a. Praesent pellentesque accumsan nibh eu volutpat.
+          </Typography>
+          <Spacer space={2} />
+          <Typography>
+            Vestibulum blandit dui leo, non placerat nisi efficitur eget. Pellentesque habitant
+            morbi tristique senectus et netus et malesuada fames ac turpis egestas.
+          </Typography>
+        </Box>
+      </FlexGrid.Col>
+    </FlexGrid.Row>
+    <FlexGrid.Row horizontalAlign="center">
+      <FlexGrid.Col xs={12}>
+        <Box variant={{ background: 'light' }} space={4}>
+          <Typography variant={{ size: 'h3' }}>Lorem Ipsum</Typography>
+          <Spacer space={4} />
+          <Typography>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque rutrum dolor
+            ligula, ac placerat tortor ornare a. Praesent pellentesque accumsan nibh eu volutpat.
+          </Typography>
+          <Spacer space={2} />
+          <Typography>
+            Vestibulum blandit dui leo, non placerat nisi efficitur eget. Pellentesque habitant
+            morbi tristique senectus et netus et malesuada fames ac turpis egestas.
+          </Typography>
+        </Box>
+      </FlexGrid.Col>
+    </FlexGrid.Row>
+  </FlexGrid>
+)
+
+Default.storyName = 'Sticky'
+Default.args = { variant: 'default' }