@pareto-engineering/design-system 2.0.0-alpha.7 → 2.0.0-alpha.70

package/src/ui/utils/hooks/useDynamicPosition.js

@@ -0,0 +1,104 @@
+import {
+  useState, useEffect, useMemo, useCallback,
+} from 'react'
+import throttle from 'lodash/throttle'
+import useWindowSize from './useWindowSize'
+
+const verticalPositions = ['top', 'bottom']
+const horizontalPositions = ['left', 'right']
+
+const findCompatiblePositions = (primary, secondaryArray) => {
+  if (verticalPositions.includes(primary)) {
+    return secondaryArray.filter((secondary) => horizontalPositions.includes(secondary))
+  } if (horizontalPositions.includes(primary)) {
+    return secondaryArray.filter((secondary) => verticalPositions.includes(secondary))
+  }
+  return []
+}
+
+const useDynamicPosition = ({
+  elementRef,
+  parentRef,
+  preferredPrimaryOrder,
+  preferredSecondaryOrder,
+  // offsetYPx,
+  offsetXPx,
+  throttleMs = 200,
+}) => {
+  const isClient = typeof window === 'object'
+  const {
+    height:currentHeight,
+    width:currentWidth,
+  } = useWindowSize()
+
+  const [primaryPosition, setPrimaryPosition] = useState(preferredPrimaryOrder[0])
+  const compatibleSecondaryPositions = useMemo(
+    () => findCompatiblePositions(
+      primaryPosition,
+      preferredSecondaryOrder,
+    ), [primaryPosition, preferredSecondaryOrder],
+  )
+  const [secondaryPosition, setSecondaryPosition] = useState(compatibleSecondaryPositions[0])
+
+  const handle = useCallback(
+    throttle(() => {
+      const parentNode = parentRef?.current
+      const elementNode = elementRef?.current
+
+      const {
+        top:parentTop,
+        bottom: parentBottom,
+        right: parentRight,
+        left: parentLeft,
+      } = parentNode?.getBoundingClientRect() || {}
+
+      const {
+        width:elementWidth,
+        height:elementHeight,
+      } = elementNode?.getBoundingClientRect() || {}
+
+      const availablePositions = {
+        top   :parentTop >= elementHeight,
+        bottom:currentHeight - parentBottom >= elementHeight,
+        right :parentRight >= elementWidth,
+        left  :currentWidth - parentLeft >= elementWidth,
+      }
+
+      for (let i = 0; i < preferredPrimaryOrder.length; i += 1) {
+        const position = preferredPrimaryOrder[i]
+        if (availablePositions[position]) {
+          setPrimaryPosition(position)
+          break
+        }
+      }
+
+      for (let i = 0; i < compatibleSecondaryPositions.length; i += 1) {
+        const position = compatibleSecondaryPositions[i]
+        if (availablePositions[position]) {
+          setSecondaryPosition(position)
+          break
+        }
+      }
+    }, throttleMs),
+    [elementRef, offsetXPx, throttleMs],
+  )
+
+  useEffect(() => {
+    if (!isClient) {
+      return false
+    }
+
+    handle()
+    window.addEventListener('scroll', handle)
+    window.addEventListener('resize', handle)
+
+    return () => {
+      window.removeEventListener('scroll', handle)
+      window.removeEventListener('resize', handle)
+    }
+  }, [handle])
+
+  return { primaryPosition, secondaryPosition }
+}
+
+export default useDynamicPosition

package/src/ui/utils/hooks/useWindowSize.js

@@ -0,0 +1,32 @@
+import { useCallback, useState, useEffect } from 'react'
+import debounce from 'lodash/debounce'
+
+const useWindowSize = (debounceMs = 700) => {
+  const isClient = typeof window === 'object'
+
+  const getSize = () => ({
+    width :isClient ? window.innerWidth : undefined,
+    height:isClient ? window.innerHeight : undefined,
+  })
+
+  const [windowSize, setWindowSize] = useState(getSize)
+
+  const handle = useCallback(
+    debounce(() => {
+      setWindowSize(getSize())
+    }, debounceMs),
+  )
+
+  useEffect(() => {
+    if (!isClient) {
+      return false
+    }
+
+    window.addEventListener('resize', handle)
+    return () => window.removeEventListener('resize', handle)
+  }, [getSize, handle, isClient])
+
+  return windowSize
+}
+
+export default useWindowSize

package/src/ui/utils/index.js

@@ -0,0 +1 @@
+export { useWindowSize, useDynamicPosition } from './hooks'

package/stylelint.config.js

@@ -1,24 +1,24 @@
 module.exports = {
-  extends: [
+  extends:[
     'stylelint-config-palantir',
     'stylelint-config-palantir/sass.js',
   ],
-  rules: {
-    indentation: 2,
-    'number-leading-zero': 'never',
-    'at-rule-no-unknown': [true,
+  rules:{
+    indentation          :2,
+    'number-leading-zero':'never',
+    'at-rule-no-unknown' :[true,
       {
-        ignoreAtRules: [
+        ignoreAtRules:[
         // additional scss at-rules:
           'content', 'each', 'else', 'error', 'extend', 'for', 'function', 'if', 'include', 'mixin', 'return', 'use', 'forward',
         ],
       },
     ],
-    'at-rule-empty-line-before': ['always', {
-      except: ['after-same-name', 'inside-block'],
-      ignoreAtRules: ['include', 'mixin', 'function'],
+    'at-rule-empty-line-before':['always', {
+      except       :['after-same-name', 'inside-block'],
+      ignoreAtRules:['include', 'mixin', 'function'],
     }],
-    'order/order': [
+    'order/order':[
       [
         'custom-properties',
         'at-variables',
@@ -34,12 +34,12 @@ module.exports = {
       ],
       { unspecified: 'ignore' },
     ],
-    'property-no-unknown': [
+    'property-no-unknown':[
       true,
       {
-        ignoreProperties: ['text-stroke', 'font-smooth'],
+        ignoreProperties:['text-stroke', 'font-smooth'],
       },
     ],
-    'max-nesting-depth': 5,
+    'max-nesting-depth':5,
   },
 }

package/dist/cjs/a/GradientBackground/index.js

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

package/dist/cjs/a/GradientBackground/styles.scss

@@ -1,191 +0,0 @@
-/* @pareto-engineering/generator-front 1.0.12 */
-
-@use "@pareto-engineering/bem";
-
-$default-triangle-dimension:30em;
-$default-ellipses-dimension:50em;
-$default-ellipse-dimension:50em;
-$default-shapes-opacity:.8;
-$default-diamonds-dimension:40em;
-$default-circle-dimension:40em;
-
-.#{bem.$base}.gradient-background {
-  align-items: center;
-  background: var(--light-y);
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  justify-content: var(--pin);
-  position: absolute;
-  width: 100%;
-
-  .shapes {
-    display: flex;
-    justify-content: center;
-
-    .triangle {
-      background-image: linear-gradient(var(--light-y), var(--dark-y));
-      clip-path: polygon(0 0, 50% 100%, 100% 0);
-      height: $default-triangle-dimension * .86;
-      opacity: $default-shapes-opacity;
-      width: $default-triangle-dimension;
-    }
-
-    .half-ellipses {
-
-      height: $default-ellipses-dimension / 2;
-      width: $default-ellipses-dimension;
-      opacity: $default-shapes-opacity;
-
-      .up {
-        background-image: linear-gradient(var(--light-y), var(--y));
-        clip-path: ellipse(40% 100% at 50% 0%);
-        height:50%;
-      }
-
-      .down {
-        background-image: linear-gradient(to top, var(--light-y), var(--y));
-        clip-path: ellipse(40% 100% at 50% 100%);
-        height:50%;
-      }
-
-    }
-
-    .ellipse {
-      height: $default-ellipse-dimension / 1.5;
-      width: $default-ellipse-dimension;
-      background-image: linear-gradient( to top left, var(--dark-y), var(--light-y),var(--dark-y));
-      clip-path: ellipse(50% 25% at 50% 50%);
-      opacity: $default-shapes-opacity;
-      transform: rotate3d(0, 0, -1, 10deg);
-    }
-
-    .diamonds {
-
-      height: $default-diamonds-dimension;
-      width: $default-diamonds-dimension;
-      opacity: $default-shapes-opacity;
-      position: relative;
-
-      .top-right {
-        height: 100%;
-        width: 100%;
-        background-image: linear-gradient(to right, var(--dark-y), var(--y));
-        clip-path: polygon(100% 100%, 0 0, 100% 0);
-        position: absolute;
-      }
-      .bottom-left {
-        height: 100%;
-        width: 100%;
-        background-image: linear-gradient(to left, var(--dark-y), var(--y));
-        clip-path: polygon(0 100%, 0 0, 100% 100%);
-        position: absolute;
-        z-index: 1;
-        opacity: .95;
-      }
-      .bottom-right {
-        height: 100%;
-        width: 100%;
-        background-image: linear-gradient(to bottom, var(--dark-y), var(--y));
-        clip-path: polygon(100% 100%, 100% 0, 0 100%);
-        position: absolute;
-      }
-    }
-
-    .rectangles {
-      height: $default-diamonds-dimension;
-      width: $default-diamonds-dimension;
-      opacity: $default-shapes-opacity;
-      display: grid;
-      grid-template-rows: repeat(3, 1fr);
-
-      .top {
-        background-image: linear-gradient(to right, var(--dark-y), var(--y));
-      }
-
-      .center {
-        background-image: linear-gradient(to left, var(--dark-y), var(--y));
-      }
-
-      .bottom {
-        background-image: linear-gradient(to right, var(--dark-y), var(--y));
-      }
-    }
-
-    .half-ellipse {
-      height: $default-ellipses-dimension / 2;
-      width: $default-ellipses-dimension;
-      opacity: $default-shapes-opacity;
-      background-image: linear-gradient(var(--light-y), var(--dark-y));
-      clip-path: ellipse(50% 50% at 50% 0);
-    }
-
-    .circle {
-      height: $default-circle-dimension;
-      width: $default-circle-dimension;
-      opacity: $default-shapes-opacity;
-      background-image: linear-gradient(var(--light-y), var(--dark-y));
-      clip-path: circle(50% at 50% 50%);
-    }
-
-    .ellipses {
-      height: var(--height);
-      width: var(--width);
-      opacity: $default-shapes-opacity;
-      position: relative;
-
-      .first {
-        height: 100%;
-        width: 100%;
-        position: absolute;
-        background-image: linear-gradient(to top, var(--dark-y), var(--light-y));
-        clip-path: ellipse(50% 20% at 50% 60%);
-      }
-
-      .second{
-        height: 100%;
-        width: 100%;
-        position: absolute;
-        background-image: linear-gradient(to bottom, var(--dark-y), var(--light-y));
-        clip-path: ellipse(50% 20% at 50% 40%);
-      }
-
-    }
-
-    // .spiral {
-    //   height: $default-ellipses-dimension;
-    //   width: $default-ellipses-dimension;
-    //   opacity: $default-shapes-opacity;
-    //   position: relative;
-
-    //   > *{
-    //     position: absolute;
-    //     height: 100%;
-    //     width: 100%;
-    //     background: radial-gradient(var(--dark-y) 30%, var(--light-y));
-    //     transform-origin: 0 0;
-    //   }
-
-    //   .quater-circle-one{
-    //     transform: rotate(90deg);
-    //     clip-path: circle(200px at 0 0);
-    //     z-index: 1;
-    //   }
-
-    //   .quater-circle-two {
-    //     clip-path: circle(250px at 0 0);
-    //     transform: rotate(45deg);
-    //   }
-
-    //   .quater-circle-three {
-    //     clip-path: circle(300px at 0 0);
-    //   }
-
-    //   .quater-circle-four{
-    //     clip-path: circle(350px at 0 0);
-    //     transform: rotate(-45deg);
-    //   }
-    // }
-
-  }
-}

package/dist/cjs/c/AcceptCookies/styles.scss

@@ -1,49 +0,0 @@
-/* @pareto-engineering/generator-front 1.0.12 */
-
-@use "@pareto-engineering/bem";
-@use "@aztlan/stylebook/src/mixins";
-@use "@aztlan/stylebook/src/globals" as *;
-
-$default-padding:var(--u, 1em);
-
-.#{bem.$base}.accept-cookies {
-  padding: $default-padding;
-
-  .#{bem.$element-content} {
-    align-items: center;
-    background-color: var(--on-x);
-    border-radius: var(--theme-border-radius);
-    display: flex;
-    justify-content: space-between;
-    padding: $default-padding;
-
-    .buttons {
-      display: flex;
-
-      .allow,
-      .decline {
-        min-width: 100px;
-      }
-
-      .decline {
-        background-color: var(--on-x);
-        border: 1px solid var(--x);
-        color: var(--x);
-      }
-    }
-  }
-
-  @include mixins.media($to:$sm-md) {
-    .content {
-      flex-direction: column;
-    }
-  }
-
-  @include mixins.media($from:$sm-md) {
-    .content {
-      p {
-        margin-bottom: 0;
-      }
-    }
-  }
-}

package/dist/cjs/c/BlogCategoryButton/index.js

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

package/dist/cjs/c/BlogPost/BlogPost.js

@@ -1,147 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var React = _interopRequireWildcard(require("react"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _bem = _interopRequireDefault(require("@pareto-engineering/bem"));
-
-var _format = _interopRequireDefault(require("date-fns/format"));
-
-var _b = require("../../b");
-
-var _BlogCategoryButton = require("../BlogCategoryButton");
-
-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 _getRequireWildcardCache(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; }
-
-// Local Definitions
-var baseClassName = _bem.default.base;
-var componentClassName = 'blog-post';
-/**
- * This is the component description.
- */
-
-var BlogPost = _ref => {
-  var {
-    id,
-    className: userClassName,
-    style,
-    title,
-    // slug,
-    description,
-    content,
-    mainImage,
-    author,
-    category = {},
-    // itemType
-    // wordCount,
-    publishedOn // updatedAt,
-    // ...otherProps
-
-  } = _ref;
-  (0, React.useLayoutEffect)(() => {
-    Promise.resolve().then(() => _interopRequireWildcard(require("./styles.scss")));
-  }, []);
-  return /*#__PURE__*/React.createElement("div", {
-    id: id,
-    className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
-    style: style // {...otherProps}
-
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "y-red b-y uc article-head ph-u pv-v v4 md-v6"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "v2 mv-v"
-  }, /*#__PURE__*/React.createElement(_BlogCategoryButton.BlogCategoryButton, {
-    categorySlug: category.slug,
-    className: "s-1"
-  }, category.name)), /*#__PURE__*/React.createElement(_b.Title, {
-    heading: title,
-    subtitle: description,
-    subtitleClassName: "x-subtitle c-x"
-  }), /*#__PURE__*/React.createElement("p", {
-    className: "x-metadata c-x v2 mt-v"
-  }, 'Published on ', (0, _format.default)(new Date(publishedOn), 'MMMM do, yyyy'), "."), /*#__PURE__*/React.createElement("p", {
-    className: "x-metadata c-x v1 mt-v"
-  }, "".concat(author.firstName, " ").concat(author.lastName))), /*#__PURE__*/React.createElement("div", {
-    className: "article-illustration v4 md-v6 mb-v"
-  }, /*#__PURE__*/React.createElement("img", {
-    src: mainImage,
-    alt: description
-  })), /*#__PURE__*/React.createElement("div", {
-    dangerouslySetInnerHTML: {
-      __html: content
-    },
-    className: "article-body p-u s0 md-s1"
-  }));
-};
-
-BlogPost.propTypes = {
-  /**
-   * The HTML id for this element
-   */
-  id: _propTypes.default.string,
-
-  /**
-   * The HTML class names for this element
-   */
-  className: _propTypes.default.string,
-
-  /**
-   * The React-written, css properties for this element.
-   */
-  style: _propTypes.default.objectOf(_propTypes.default.string),
-
-  /**
-   * The title of this blog post
-   */
-  title: _propTypes.default.string.isRequired,
-
-  /**
-   * The description of this blog post
-   */
-  description: _propTypes.default.string.isRequired,
-
-  /**
-   * The content of this blog post
-   */
-  content: _propTypes.default.string.isRequired,
-
-  /**
-   * The link to the main image of this blog post
-   */
-  mainImage: _propTypes.default.string.isRequired,
-
-  /**
-   * The first and last name of the article's author
-   */
-  author: _propTypes.default.shape({
-    firstName: _propTypes.default.string.isRequired,
-    lastName: _propTypes.default.string.isRequired
-  }).isRequired,
-
-  /**
-   * The category of this blog post
-   */
-  category: _propTypes.default.shape({
-    name: _propTypes.default.string.isRequired,
-    slug: _propTypes.default.string.isRequired
-  }).isRequired,
-
-  /**
-   * The date this blog post was published
-   */
-  publishedOn: _propTypes.default.string.isRequired
-};
-BlogPost.defaultProps = {// someProp:false
-};
-var _default = BlogPost;
-exports.default = _default;

package/dist/cjs/c/BlogPost/styles.scss

@@ -1,33 +0,0 @@
-/* @pareto-engineering/generator-front 1.0.12 */
-
-@use "@pareto-engineering/bem";
-@use "@aztlan/stylebook/src/mixins";
-@use "@aztlan/stylebook/src/globals" as *;
-
-
-.#{bem.$base}.blog-post {
-  .article-body {
-    p {
-      line-height: var(--s3);
-      text-align: justify;
-    }
-  }
-
-  .article-illustration {
-    height: 13em;
-
-    img {
-      height: 100%;
-      object-fit: cover;
-      width: 100%;
-    }
-  }
-
-  @include mixins.media($from:$sm-md) {
-    .article-illustration {
-      height: 22em;
-    }
-  }
-}
-
-