@elliemae/ds-form-layout-blocks 2.3.0-next.3 → 3.0.0-alpha.0

package/esm/form-layout-block-item/DSFormLayoutBlockItem.js

@@ -1,58 +0,0 @@
-import _jsx from '@babel/runtime/helpers/esm/jsx';
-import { useMemo } from 'react';
-import { describe } from 'react-desc';
-import { uid } from 'uid';
-import { propTypes } from './propTypes.js';
-import { StyledContainer, StyledLabel, StyledMark, ScreenReaderOnly, StyledMessage } from './styles.js';
-
-const DSFormLayoutBlockItem = props => {
-  const {
-    label,
-    feedbackMessage,
-    validationMessage,
-    inputID,
-    children,
-    hasError,
-    leftLabel,
-    required,
-    optional,
-    hideLabel,
-    fitContent,
-    withHighlight,
-    isGroup = false
-  } = props;
-  const instanceUID = useMemo(() => uid(6), []);
-  return /*#__PURE__*/_jsx(StyledContainer, {
-    leftLabel: leftLabel,
-    fitContent: fitContent,
-    hideLabel: hideLabel,
-    withHighlight: withHighlight,
-    as: isGroup ? 'fieldset' : 'div',
-    isGroup: isGroup,
-    "aria-describedby": "".concat(inputID || instanceUID, "_feedback_message")
-  }, void 0, /*#__PURE__*/_jsx(StyledLabel, {
-    htmlFor: inputID,
-    leftLabel: leftLabel,
-    hideLabel: hideLabel,
-    "aria-hidden": isGroup
-  }, void 0, label, (required || optional) && /*#__PURE__*/_jsx(StyledMark, {
-    required: required
-  })), isGroup && /*#__PURE__*/_jsx(ScreenReaderOnly, {
-    as: "legend"
-  }, void 0, "".concat(label, ". ").concat(feedbackMessage || '')), children, feedbackMessage && !hasError && /*#__PURE__*/_jsx(StyledMessage, {
-    leftLabel: leftLabel,
-    hideLabel: hideLabel,
-    "aria-hidden": isGroup,
-    id: "".concat(inputID || instanceUID, "_feedback_message")
-  }, void 0, feedbackMessage), validationMessage && hasError && /*#__PURE__*/_jsx(StyledMessage, {
-    hasError: hasError,
-    leftLabel: leftLabel,
-    hideLabel: hideLabel,
-    role: "alert"
-  }, void 0, validationMessage));
-};
-
-const DSFormLayoutBlockItemWithSchema = describe(DSFormLayoutBlockItem);
-DSFormLayoutBlockItemWithSchema.propTypes = propTypes;
-
-export { DSFormLayoutBlockItem, DSFormLayoutBlockItemWithSchema };

package/esm/form-layout-block-item/index.d.js

@@ -1 +0,0 @@
-

package/esm/form-layout-block-item/index.js

@@ -1 +0,0 @@
-export { DSFormLayoutBlockItem, DSFormLayoutBlockItemWithSchema } from './DSFormLayoutBlockItem.js';

package/esm/form-layout-block-item/propTypes.js

@@ -1,19 +0,0 @@
-import { PropTypes } from 'react-desc';
-
-const propTypes = {
-  children: PropTypes.node.isRequired.description('Input component. '),
-  label: PropTypes.string.isRequired.description('Label property for the input component. This property is required for accesibility purposes.'),
-  inputID: PropTypes.string.isRequired.description("String that matches the input component's id. This property is required for accesibility purposes."),
-  feedbackMessage: PropTypes.string.description('Feedback message to show below the input component.'),
-  validationMessage: PropTypes.string.description('Validation message to show below the input component. It requires hasError property set to true to be visible.'),
-  hasError: PropTypes.bool.description('Helper boolean property for the validation message.'),
-  required: PropTypes.bool.description('Adds required extra styling.'),
-  optional: PropTypes.bool.description('Adds optional extra styling.'),
-  fitContent: PropTypes.bool.description('Set the width of the layout to the input component.'),
-  leftLabel: PropTypes.bool.description('Adds the label at the left of the input component.'),
-  hideLabel: PropTypes.bool.description('Hides the input label. It still requires label and labelFor property for accesibility purposes'),
-  withHighlight: PropTypes.bool.description('Adds highlight extra styling. It requires extra spacing, please check withHighlight explanation tab.'),
-  isGroup: PropTypes.bool.description('Sets the HTML elements as fieldset and legend. This should be used when you want to group more than one input.')
-};
-
-export { propTypes };

package/esm/form-layout-block-item/styles.js

@@ -1,80 +0,0 @@
-import styled from 'styled-components';
-
-const StyledContainer = /*#__PURE__*/styled.div.withConfig({
-  componentId: "sc-196zgtg-0"
-})(["position:relative;padding:0;margin:0;display:grid;", " ", ";", " align-items:center;", ""], _ref => {
-  let {
-    fitContent
-  } = _ref;
-  return fitContent ? 'width: fit-content;' : undefined;
-}, _ref2 => {
-  let {
-    isGroup
-  } = _ref2;
-  return isGroup ? 'border: none' : '';
-}, _ref3 => {
-  let {
-    leftLabel,
-    hideLabel
-  } = _ref3;
-  return leftLabel && !hideLabel ? 'grid-template-columns: max-content auto;' : undefined;
-}, _ref4 => {
-  let {
-    theme,
-    withHighlight
-  } = _ref4;
-  return withHighlight ? "\n  &::after {\n        position: absolute;\n        content: '';\n        left: -".concat(theme.space.xxs, ";\n        top: -").concat(theme.space.xxxs, ";\n        z-index: -1;\n        width: calc(100% + ").concat(theme.space.xs, ");\n        height: calc(100%  + ").concat(theme.space.xxs, ");\n        background-color: #FEFBEE;\n        border : 1px solid #8F6326;\n        border-radius : 4px;\n        box-shadow: 0 1px 3px 0 rgba(0,0,0,0.35);\n        }\n        &:hover, \n        &:focus-within {\n          &::after {\n            position: absolute;\n            content: '';\n            left: -").concat(theme.space.xxs, ";\n            top: -").concat(theme.space.xxxs, ";\n            z-index: -1;\n            width: calc(100% + ").concat(theme.space.xs, ");\n            height: calc(100%  + ").concat(theme.space.xxs, ");\n            background-color: #FFF9D3;\n            border : 2px solid #8F6326;\n            border-radius : 4px;\n            box-shadow: 0 6px 10px 0 rgba(0,0,0,0.30);\n          }\n        }\n  ") : undefined;
-});
-const StyledLabel = /*#__PURE__*/styled.label.withConfig({
-  componentId: "sc-196zgtg-1"
-})(["display:flex;", " ", ""], _ref5 => {
-  let {
-    theme,
-    leftLabel
-  } = _ref5;
-  return leftLabel ? "padding-right: ".concat(theme.space.xxs, ";") : undefined;
-}, _ref6 => {
-  let {
-    hideLabel
-  } = _ref6;
-  return hideLabel ? "position: absolute;\n      width: 1px;\n      height: 1px;\n      padding: 0;\n      margin: -1px;\n      overflow: hidden;\n      clip: rect(0, 0, 0, 0);\n      white-space: nowrap;\n      border: 0;\n  " : undefined;
-});
-const StyledMessage = /*#__PURE__*/styled.div.withConfig({
-  componentId: "sc-196zgtg-2"
-})(["font-size:", ";font-style:italic;text-align:right;line-height:15px;height:15px;overflow:hidden;text-overflow:ellipsis;color:", ";", ""], _ref7 => {
-  let {
-    theme
-  } = _ref7;
-  return theme.fontSizes.microText[200];
-}, _ref8 => {
-  let {
-    theme,
-    hasError
-  } = _ref8;
-  return hasError ? theme.colors.danger[900] : theme.colors.neutral[500];
-}, _ref9 => {
-  let {
-    leftLabel,
-    hideLabel
-  } = _ref9;
-  return leftLabel && !hideLabel ? 'grid-column: 1/3;' : undefined;
-});
-const StyledMark = /*#__PURE__*/styled.span.withConfig({
-  componentId: "sc-196zgtg-3"
-})(["width:6px;height:6px;border-radius:50%;margin-left:", ";", ""], _ref10 => {
-  let {
-    theme
-  } = _ref10;
-  return theme.space.xxxs;
-}, _ref11 => {
-  let {
-    theme,
-    required
-  } = _ref11;
-  return required ? "\n  background-color: ".concat(theme.colors.danger[900], ";\n  ") : "\n  border: 1px solid ".concat(theme.colors.brand[600], ";\n  ");
-});
-const ScreenReaderOnly = /*#__PURE__*/styled.div.withConfig({
-  componentId: "sc-196zgtg-4"
-})(["clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px;"]);
-
-export { ScreenReaderOnly, StyledContainer, StyledLabel, StyledMark, StyledMessage };

package/esm/form-layout-checkbox-group/DSFormLayoutCheckboxGroup.js

@@ -1,21 +0,0 @@
-import _jsx from '@babel/runtime/helpers/esm/jsx';
-import 'react';
-import { describe } from 'react-desc';
-import { useMemoMergePropsWithDefault } from '@elliemae/ds-props-helpers';
-import { propTypes } from './propTypes.js';
-import { StyledContainer } from './styles.js';
-import { defaultProps } from './defaultProps.js';
-import { useValidateProps } from './config/useValidateProps.js';
-
-const DSFormLayoutCheckboxGroup = props => {
-  useValidateProps(props);
-  const propsWithDefault = useMemoMergePropsWithDefault(props, defaultProps);
-  return /*#__PURE__*/_jsx(StyledContainer, {
-    direction: propsWithDefault.direction
-  }, void 0, propsWithDefault.children);
-};
-
-const DSFormLayoutCheckboxGroupWithSchema = describe(DSFormLayoutCheckboxGroup);
-DSFormLayoutCheckboxGroupWithSchema.propTypes = propTypes;
-
-export { DSFormLayoutCheckboxGroup, DSFormLayoutCheckboxGroupWithSchema };

package/esm/form-layout-checkbox-group/config/useValidateProps.js

@@ -1,28 +0,0 @@
-import React from 'react';
-
-const getVariableType = arg => {
-  if (Array.isArray(arg)) return 'array';
-  if (arg === null) return 'null';
-  if (arg === undefined) return 'undefined';
-  return typeof arg;
-};
-
-const throwCheckboxGroupDirectionError = invalidProp => {
-  throw new Error("You are trying to pass a not valid \"direction\" property value for a checkbox group, please provide a valid type.\n\n  Received: ".concat(invalidProp, " (").concat(getVariableType(invalidProp), ")\n  Expected: \"horizontal\" or \"vertical\" (string)\n  "));
-};
-
-const throwCheckboxGroupChildrenError = () => {
-  throw new Error("You are trying to use a checkbox group without any React children, please provide at least one children to use.\n    \n  Received: (null)\n  Expected: React children\n  ");
-};
-
-const useValidateProps = props => {
-  if (props.direction !== undefined && props.direction !== 'vertical' && props.direction !== 'horizontal') {
-    throwCheckboxGroupDirectionError(props.direction);
-  }
-
-  if (!React.Children.count(props.children)) {
-    throwCheckboxGroupChildrenError();
-  }
-};
-
-export { useValidateProps };

package/esm/form-layout-checkbox-group/defaultProps.js

@@ -1,5 +0,0 @@
-const defaultProps = {
-  direction: 'horizontal'
-};
-
-export { defaultProps };

package/esm/form-layout-checkbox-group/index.d.js

@@ -1 +0,0 @@
-

package/esm/form-layout-checkbox-group/index.js

@@ -1 +0,0 @@
-export { DSFormLayoutCheckboxGroup, DSFormLayoutCheckboxGroupWithSchema } from './DSFormLayoutCheckboxGroup.js';

package/esm/form-layout-checkbox-group/propTypes.js

@@ -1,7 +0,0 @@
-import { PropTypes } from 'react-desc';
-
-const propTypes = {
-  direction: PropTypes.oneOf(['horizontal', 'vertical']).description('Set direction for the checkbox group.')
-};
-
-export { propTypes };

package/esm/form-layout-checkbox-group/styles.js

@@ -1,38 +0,0 @@
-import styled from 'styled-components';
-
-const StyledContainer = /*#__PURE__*/styled.div.withConfig({
-  componentId: "sc-1wopk9q-0"
-})(["display:inline-flex;flex-wrap:wrap;flex-direction:", ";margin-left:", ";margin-right:", ";margin-top:", ";& div{padding:0;margin-bottom:", ";}& div:not(:last-child){margin-right:", ";}"], _ref => {
-  let {
-    direction
-  } = _ref;
-  return direction === 'horizontal' ? 'row' : 'column';
-}, _ref2 => {
-  let {
-    theme
-  } = _ref2;
-  return theme.space.xs;
-}, _ref3 => {
-  let {
-    theme
-  } = _ref3;
-  return theme.space.xs;
-}, _ref4 => {
-  let {
-    theme
-  } = _ref4;
-  return theme.space.xxs;
-}, _ref5 => {
-  let {
-    theme
-  } = _ref5;
-  return theme.space.xxs;
-}, _ref6 => {
-  let {
-    theme,
-    direction
-  } = _ref6;
-  return direction === 'horizontal' ? theme.space.s : '0';
-});
-
-export { StyledContainer };

package/esm/index.d.js

@@ -1 +0,0 @@
-

package/esm/index.js

@@ -1,2 +0,0 @@
-export { DSFormLayoutBlockItem, DSFormLayoutBlockItemWithSchema } from './form-layout-block-item/DSFormLayoutBlockItem.js';
-export { DSFormLayoutCheckboxGroup, DSFormLayoutCheckboxGroupWithSchema } from './form-layout-checkbox-group/DSFormLayoutCheckboxGroup.js';