@pareto-engineering/design-system 3.0.0-alpha.29 → 4.0.0-alpha.11

package/dist/es/f/fields/SelectInput/SelectInput.js

@@ -1,7 +1,7 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 /* @pareto-engineering/generator-front 1.0.12 */
 import * as React from 'react';
-import { useLayoutEffect, memo } from 'react';
+import { useInsertionEffect, memo } from 'react';
 import { useField } from 'formik';
 import PropTypes from 'prop-types';
 import styleNames from '@pareto-engineering/bem/exports';
@@ -16,24 +16,23 @@ const componentClassName = 'select-input';
 /**
  * This is the component description.
  */
-const SelectInput = _ref => {
-  let {
-    id,
-    className: userClassName,
-    style,
-    name,
-    label,
-    color,
-    options,
-    validate,
-    optional,
-    description,
-    disabled,
-    isLoading,
-    autoComplete
-    // ...otherProps
-  } = _ref;
-  useLayoutEffect(() => {
+const SelectInput = ({
+  id,
+  className: userClassName,
+  style,
+  name,
+  label,
+  color,
+  options,
+  validate,
+  optional,
+  description,
+  disabled,
+  isLoading,
+  autoComplete
+  // ...otherProps
+}) => {
+  useInsertionEffect(() => {
     import("./styles.scss");
   }, []);
   const [field] = useField({
@@ -49,7 +48,7 @@ const SelectInput = _ref => {
     name: name,
     optional: optional
   }, label), /*#__PURE__*/React.createElement("div", {
-    className: "select-wrapper"
+    className: "select-wrapper with-faded-border"
   }, /*#__PURE__*/React.createElement("select", _extends({
     className: "input"
   }, field, {
@@ -136,6 +135,6 @@ SelectInput.propTypes = {
 };
 SelectInput.defaultProps = {
   disabled: false,
-  color: 'background2'
+  color: 'interactive'
 };
 export default /*#__PURE__*/memo(SelectInput);

package/dist/es/f/fields/SelectInput/styles.scss

@@ -5,20 +5,32 @@
 @use "../../../form.scss";
 
 
-$default-padding: 0.75em;
-$default-margin: 1em;
+$default-spacing-size: 1em;
+$default-padding: .75em;
+$default-bg-gradient: var(--background-far);
+$default-input-border-radius: var(--theme-default-input-border-radius);
 
 .#{bem.$base}.select-input {
   display: flex;
   flex-direction: column;
 
   .#{bem.$base}.label {
-    margin-bottom: $default-margin
+    margin-bottom: $default-spacing-size;
   }
 
-  .select-wrapper {
+  >.select-wrapper {
+    background-color: var(--background-inputs);
+    border-radius: $default-input-border-radius;
+    padding: $default-padding;
     position: relative;
 
+    &::after {
+      border-radius: $default-input-border-radius;
+    }
+
+    &:not(:disabled):hover {
+      box-shadow: var(--default-input-box-shadow);
+    }
     >.#{bem.$base}.loading-circle {
       position: absolute;
       right: 0;
@@ -26,25 +38,23 @@ $default-margin: 1em;
       transform: translateY(-50%);
     }
 
-    >.input {
-      width: 100%;
-      border: var(--theme-border-style) var(--hard-y);
-      background: var(--soft-y);
-      color: var(--on-y);
-      padding: $default-padding;
-
-      &:not(:disabled):hover {
-        border: var(--theme-border-style) var(--soft-background4);
-      }
-
-      &:disabled {
-        background-color: var(--hard-y);
-        appearance: none;
-      }
-
-      &:focus {
-        background: var(--y);
+    select {
+      appearance: none;
+      background-color: inherit;
+      background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMTIiIHZpZXdCb3g9IjAgMCAyMCAxMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE5IDEuNUwxMCAxMC41TDEgMS41IiBzdHJva2U9IiM0QzRENTMiIHN0cm9rZS13aWR0aD0iMiIvPgo8L3N2Zz4=");
+      background-position: calc(100% - $default-spacing-size);
+      background-repeat: no-repeat;
+      background-size: $default-spacing-size;
+      padding-right: $default-spacing-size;
+
+      &.input {
+        width: 100%;
+
+        &:disabled {
+          appearance: none;
+          opacity: 35%;
+        }
       }
     }
   }
-}
+}

package/dist/es/f/fields/TextInput/TextInput.js

@@ -1,7 +1,7 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 /* @pareto-engineering/generator-front 1.0.12 */
 import * as React from 'react';
-import { useLayoutEffect, memo } from 'react';
+import { useInsertionEffect, memo } from 'react';
 import PropTypes from 'prop-types';
 import styleNames from '@pareto-engineering/bem/exports';
 import { useField } from 'formik';
@@ -15,26 +15,25 @@ const componentClassName = 'text-input';
 /**
  * This is the component description.
  */
-const TextInput = _ref => {
-  let {
-    id,
-    className: userClassName,
-    style,
-    type,
-    name,
-    label,
-    color,
-    labelColor,
-    validate,
-    oneInputLabel,
-    description,
-    disabled,
-    placeholder,
-    optional,
-    autoComplete
-    // ...otherProps
-  } = _ref;
-  useLayoutEffect(() => {
+const TextInput = ({
+  id,
+  className: userClassName,
+  style,
+  type,
+  name,
+  label,
+  color,
+  labelColor,
+  validate,
+  oneInputLabel,
+  description,
+  disabled,
+  placeholder,
+  optional,
+  autoComplete
+  // ...otherProps
+}) => {
+  useInsertionEffect(() => {
     import("./styles.scss");
   }, []);
   const [field] = useField({
@@ -51,14 +50,16 @@ const TextInput = _ref => {
     name: name,
     color: labelColor,
     optional: optional
-  }, label), /*#__PURE__*/React.createElement("input", _extends({
+  }, label), /*#__PURE__*/React.createElement("div", {
+    className: "input-wrapper with-faded-border"
+  }, /*#__PURE__*/React.createElement("input", _extends({
     id: name,
     className: "input",
     type: type,
     disabled: disabled,
     placeholder: placeholder,
     autoComplete: autoComplete
-  }, field)), /*#__PURE__*/React.createElement(FormDescription, {
+  }, field))), /*#__PURE__*/React.createElement(FormDescription, {
     className: "v50 mt-v s-1",
     description: description,
     name: name

package/dist/es/f/fields/TextInput/styles.scss

@@ -3,32 +3,41 @@
 @use "@pareto-engineering/bem";
 @use "../../../form.scss";
 
-$default-padding: 0.75em 0.75em 0.55em;
+$default-padding: .75em .75em .55em;
+$default-input-border-radius: var(--theme-default-input-border-radius);
+
 
 .#{bem.$base}.text-input {
   display: flex;
   flex-direction: column;
 
-  .input {
-    border: var(--theme-border-style) var(--hard-y);
-    background: var(--soft-y);
-    color: var(--on-y);
-    padding: $default-padding;
-
-    &::placeholder{
-      color: var(--metadata);
-    }
-
-    &:not(:disabled):hover{
-      border: var(--theme-border-style) var(--soft-background4);
-    }
+  >.input-wrapper {
+    position: relative;
 
-    &:disabled {
-      background-color: var(--hard-y);
+    &::after {
+      border-radius: $default-input-border-radius;
     }
 
-    &:focus {
-      background: var(--soft-background4);
+    > input {
+      background-color: var(--background-inputs);
+      border-radius: $default-input-border-radius;
+      color: var(--x);
+      height: 100%;
+      padding: $default-padding;
+      width: 100%;
+
+      &::placeholder {
+        color: var(--metadata);
+      }
+
+      &:disabled {
+        background-color: var(--hard-x);
+      }
+
+      &:not(:disabled):hover {
+        border-radius: $default-input-border-radius;
+        box-shadow: var(--theme-default-input-box-shadow);
+      }
     }
   }
 }

package/dist/es/f/fields/TextareaInput/TextareaInput.js

@@ -1,7 +1,7 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 /* @pareto-engineering/generator-front 1.0.12 */
 import * as React from 'react';
-import { useLayoutEffect, memo } from 'react';
+import { useInsertionEffect, memo } from 'react';
 import PropTypes from 'prop-types';
 import styleNames from '@pareto-engineering/bem/exports';
 import { useField } from 'formik';
@@ -15,28 +15,27 @@ const componentClassName = 'text-area-input';
 /**
  * This is the component description.
  */
-const TextareaInput = _ref => {
-  let {
-    id,
-    className: userClassName,
-    style,
-    name,
-    label,
-    validate,
-    labelAsDescription,
-    textAreaId,
-    rows,
-    optional,
-    textAreaColor,
-    labelColor,
-    description,
-    disabled,
-    placeholder,
-    autoComplete,
-    resize
-    // ...otherProps
-  } = _ref;
-  useLayoutEffect(() => {
+const TextareaInput = ({
+  id,
+  className: userClassName,
+  style,
+  name,
+  label,
+  validate,
+  labelAsDescription,
+  textAreaId,
+  rows,
+  optional,
+  textAreaColor,
+  labelColor,
+  description,
+  disabled,
+  placeholder,
+  autoComplete,
+  resize
+  // ...otherProps
+}) => {
+  useInsertionEffect(() => {
     import("./styles.scss");
   }, []);
   const [field] = useField({

package/dist/es/f/fields/TextareaInput/styles.scss

@@ -1,27 +1,28 @@
 /* @pareto-engineering/generator-front 1.0.12 */
+
 @use "@pareto-engineering/bem";
 
 $default-padding: .5em;
 
-.#{bem.$base}.text-area-input{
+.#{bem.$base}.text-area-input {
   display: flex;
   flex-direction: column;
 
   .textarea {
-    border: var(--theme-border-style) var(--hard-y);
     background: var(--soft-y);
+    border: var(--theme-border-style) var(--hard-y);
     color: var(--on-y);
     padding: $default-padding;
 
-    &::placeholder{
+    &::placeholder {
       color: var(--metadata);
     }
 
-    &:not(:disabled):hover{
+    &:not(:disabled):hover {
       border: var(--theme-border-style) var(--soft-background4);
     }
 
-     &:disabled {
+    &:disabled {
       background-color: var(--hard-y);
     }
 
@@ -29,4 +30,4 @@ $default-padding: .5em;
       background: var(--soft-background4);
     }
   }
-}
+}

package/dist/es/r/SwitchRouteMap/SwitchRouteMap.js

@@ -11,27 +11,21 @@ import { PrivateRoute } from "../common";
  * **`SessionContextProvider` in case you're using PrivateRoutes. **
  * `SwitchRouteMap` generates a routing `Switch` from an array of route Props
  */
-const SwitchRouteMap = _ref => {
-  let {
-    routes,
-    NotFound
-  } = _ref;
-  return /*#__PURE__*/React.createElement(Switch, {
-    children: [...routes.map(_ref2 => {
-      let {
-        isPrivate,
-        ...routeProps
-      } = _ref2;
-      return isPrivate ? /*#__PURE__*/React.createElement(PrivateRoute, _extends({
-        key: routeProps.path
-      }, routeProps)) : /*#__PURE__*/React.createElement(Route, _extends({
-        key: routeProps.path
-      }, routeProps));
-    }), ...(NotFound ? [/*#__PURE__*/React.createElement(Route, {
-      component: NotFound
-    })] : [])]
-  });
-};
+const SwitchRouteMap = ({
+  routes,
+  NotFound
+}) => /*#__PURE__*/React.createElement(Switch, {
+  children: [...routes.map(({
+    isPrivate,
+    ...routeProps
+  }) => isPrivate ? /*#__PURE__*/React.createElement(PrivateRoute, _extends({
+    key: routeProps.path
+  }, routeProps)) : /*#__PURE__*/React.createElement(Route, _extends({
+    key: routeProps.path
+  }, routeProps))), ...(NotFound ? [/*#__PURE__*/React.createElement(Route, {
+    component: NotFound
+  })] : [])]
+});
 SwitchRouteMap.propTypes = {
   /**
    * The routes to render

package/dist/es/r/common/PrivateRoute/PrivateRoute.js

@@ -21,13 +21,12 @@ const SessionContext = /*#__PURE__*/React.createContext({});
  * Please remember this is a front-end test, and is not equivalent to back-end permission checks.
  * This component is meant to be used alongside back-end checks.
  */
-const PrivateRoute = _ref => {
-  let {
-    component: Component,
-    render,
-    test,
-    ...rest
-  } = _ref;
+const PrivateRoute = ({
+  component: Component,
+  render,
+  test,
+  ...rest
+}) => {
   const {
     currentUserData: currentUser,
     loginPath

package/dist/es/test/QueryLoader/QueryLoader.js

@@ -2,7 +2,7 @@ var _QueryLoaderHelloQuery;
 /* @pareto-engineering/generator-front 1.0.12 */
 import * as React from 'react';
 import { useEffect, Suspense } from 'react';
-import { useQueryLoader } from 'react-relay';
+import { useQueryLoader, graphql } from 'react-relay';
 
 // Local Definitions
 

package/dist/es/test/QueryLoader/common/PreloadedTestData/PreloadedTestData.js

@@ -6,12 +6,11 @@ import { usePreloadedQuery } from 'react-relay';
 /**
  * This is the component description.
  */
-const PreloadedTestData = _ref => {
-  let {
-    query,
-    queryReference
-    // ...otherProps
-  } = _ref;
+const PreloadedTestData = ({
+  query,
+  queryReference
+  // ...otherProps
+}) => {
   const data = usePreloadedQuery(query, queryReference);
   return /*#__PURE__*/React.createElement("pre", null, JSON.stringify(data, null, 2));
 };

package/dist/es/utils/hooks/useDynamicPosition.js

@@ -12,16 +12,15 @@ const findCompatiblePositions = (primary, secondaryArray) => {
   }
   return [];
 };
-const useDynamicPosition = _ref => {
-  let {
-    elementRef,
-    parentRef,
-    preferredPrimaryOrder,
-    preferredSecondaryOrder,
-    // offsetYPx,
-    offsetXPx,
-    throttleMs = 200
-  } = _ref;
+const useDynamicPosition = ({
+  elementRef,
+  parentRef,
+  preferredPrimaryOrder,
+  preferredSecondaryOrder,
+  // offsetYPx,
+  offsetXPx,
+  throttleMs = 200
+}) => {
   const isClient = typeof window === 'object';
   const {
     height: currentHeight,

package/dist/es/utils/hooks/useWindowSize.js

@@ -1,7 +1,6 @@
 import { useCallback, useState, useEffect } from 'react';
 import debounce from 'lodash/debounce';
-const useWindowSize = function () {
-  let debounceMs = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 700;
+const useWindowSize = (debounceMs = 700) => {
   const isClient = typeof window === 'object';
   const getSize = () => ({
     width: isClient ? window.innerWidth : undefined,

package/jest.config.js

@@ -8,18 +8,18 @@ module.exports = {
   cache           :false,
   // https://stackoverflow.com/questions/39418555/syntaxerror-with-jest-and-react-and-importing-css-files
   moduleNameMapper:{
-    '^.+\\.(css|scss)$'        :'<rootDir>/config/CSSStub.js',
-    '^.+\\.(mdx)$'             :'<rootDir>/config/CSSStub.js',
+    '^.+\\.(css|scss)$'                :'<rootDir>/tests/staticStub.js',
+    '^.+\\.(mdx)$'                     :'<rootDir>/tests/staticStub.js',
     // https://jestjs.io/docs/webpack#mocking-css-modules
-    '^@pareto-engineering/bem$':'identity-obj-proxy',
+    '^@pareto-engineering/bem$'        :'identity-obj-proxy',
     '^@pareto-engineering/bem/exports$':'identity-obj-proxy',
   },
   transform:{
     '^.+\\.[tj]sx?$':'babel-jest',
     '^.+\\.mdx$'    :'@storybook/addon-docs/jest-transform-mdx',
   },
-  setupFiles     :['<rootDir>/config/test-setup.js'],
+  setupFiles     :['<rootDir>/tests/test-setup.js'],
   testEnvironment:'jsdom',
   // transformIgnorePatterns: [`node_modules/(?!${esModules})`],
-  globalSetup    :'<rootDir>/config/global-setup.js',
+  globalSetup    :'<rootDir>/tests/global-setup.js',
 }