@elliemae/ds-form-layout-blocks 2.3.1 → 3.0.0-alpha.3

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';

package/types/form-layout-block-item/DSFormLayoutBlockItem.d.ts

@@ -1,77 +0,0 @@
-/// <reference path="../../../../../shared/typings/react-desc.d.ts" />
-/// <reference types="react" />
-import type { DSFormLayoutBlockItemPropsT as Props } from './index.d';
-declare const DSFormLayoutBlockItem: {
-    (props: Props): JSX.Element;
-    propTypes: {
-        children: any;
-        label: any;
-        inputID: any;
-        feedbackMessage: {
-            defaultValue(arg: import("react-desc").ReactDescPossibleDefaultValues): {
-                deprecated: import("react-desc").PropTypesDescValidator;
-            };
-            isRequired: import("react-desc").PropTypesDescValue;
-        };
-        validationMessage: {
-            defaultValue(arg: import("react-desc").ReactDescPossibleDefaultValues): {
-                deprecated: import("react-desc").PropTypesDescValidator;
-            };
-            isRequired: import("react-desc").PropTypesDescValue;
-        };
-        hasError: {
-            defaultValue(arg: import("react-desc").ReactDescPossibleDefaultValues): {
-                deprecated: import("react-desc").PropTypesDescValidator;
-            };
-            isRequired: import("react-desc").PropTypesDescValue;
-        };
-        required: {
-            defaultValue(arg: import("react-desc").ReactDescPossibleDefaultValues): {
-                deprecated: import("react-desc").PropTypesDescValidator;
-            };
-            isRequired: import("react-desc").PropTypesDescValue;
-        };
-        optional: {
-            defaultValue(arg: import("react-desc").ReactDescPossibleDefaultValues): {
-                deprecated: import("react-desc").PropTypesDescValidator;
-            };
-            isRequired: import("react-desc").PropTypesDescValue;
-        };
-        fitContent: {
-            defaultValue(arg: import("react-desc").ReactDescPossibleDefaultValues): {
-                deprecated: import("react-desc").PropTypesDescValidator;
-            };
-            isRequired: import("react-desc").PropTypesDescValue;
-        };
-        leftLabel: {
-            defaultValue(arg: import("react-desc").ReactDescPossibleDefaultValues): {
-                deprecated: import("react-desc").PropTypesDescValidator;
-            };
-            isRequired: import("react-desc").PropTypesDescValue;
-        };
-        hideLabel: {
-            defaultValue(arg: import("react-desc").ReactDescPossibleDefaultValues): {
-                deprecated: import("react-desc").PropTypesDescValidator;
-            };
-            isRequired: import("react-desc").PropTypesDescValue;
-        };
-        withHighlight: {
-            defaultValue(arg: import("react-desc").ReactDescPossibleDefaultValues): {
-                deprecated: import("react-desc").PropTypesDescValidator;
-            };
-            isRequired: import("react-desc").PropTypesDescValue;
-        };
-        isGroup: {
-            defaultValue(arg: import("react-desc").ReactDescPossibleDefaultValues): {
-                deprecated: import("react-desc").PropTypesDescValidator;
-            };
-            isRequired: import("react-desc").PropTypesDescValue;
-        };
-    };
-};
-declare const DSFormLayoutBlockItemWithSchema: {
-    (props?: unknown): JSX.Element;
-    propTypes: unknown;
-    toTypescript: () => import("react-desc").TypescriptSchema;
-};
-export { DSFormLayoutBlockItem, DSFormLayoutBlockItemWithSchema };

package/types/form-layout-block-item/index.d.d.ts

@@ -1,35 +0,0 @@
-/// <reference types="react" />
-export interface DSFormLayoutBlockItemPropsT {
-    children: JSX.Element;
-    label: string;
-    inputID: string;
-    validationMessage?: string;
-    feedbackMessage?: string;
-    hasError?: boolean;
-    leftLabel?: boolean;
-    required?: boolean;
-    fitContent?: boolean;
-    optional?: boolean;
-    hideLabel?: boolean;
-    withHighlight?: boolean;
-    isGroup?: boolean;
-}
-export interface DSFormLayoutBlockItemStyledMessageT {
-    hasError?: boolean;
-    leftLabel?: boolean;
-    hideLabel?: boolean;
-}
-export interface DSFormLayoutBlockItemStyledContainerT {
-    leftLabel?: boolean;
-    fitContent?: boolean;
-    hideLabel?: boolean;
-    withHighlight?: boolean;
-    isGroup?: boolean;
-}
-export interface DSFormLayoutBlockItemStyledLabelT {
-    leftLabel?: boolean;
-    hideLabel?: boolean;
-}
-export interface DSFormLayoutBlockItemStyledMarkT {
-    required?: boolean;
-}

package/types/form-layout-block-item/index.d.ts

@@ -1 +0,0 @@
-export * from './DSFormLayoutBlockItem';

package/types/form-layout-block-item/propTypes.d.ts

@@ -1,66 +0,0 @@
-/// <reference path="../../../../../shared/typings/react-desc.d.ts" />
-export declare const propTypes: {
-    children: any;
-    label: any;
-    inputID: any;
-    feedbackMessage: {
-        defaultValue(arg: import("react-desc").ReactDescPossibleDefaultValues): {
-            deprecated: import("react-desc").PropTypesDescValidator;
-        };
-        isRequired: import("react-desc").PropTypesDescValue;
-    };
-    validationMessage: {
-        defaultValue(arg: import("react-desc").ReactDescPossibleDefaultValues): {
-            deprecated: import("react-desc").PropTypesDescValidator;
-        };
-        isRequired: import("react-desc").PropTypesDescValue;
-    };
-    hasError: {
-        defaultValue(arg: import("react-desc").ReactDescPossibleDefaultValues): {
-            deprecated: import("react-desc").PropTypesDescValidator;
-        };
-        isRequired: import("react-desc").PropTypesDescValue;
-    };
-    required: {
-        defaultValue(arg: import("react-desc").ReactDescPossibleDefaultValues): {
-            deprecated: import("react-desc").PropTypesDescValidator;
-        };
-        isRequired: import("react-desc").PropTypesDescValue;
-    };
-    optional: {
-        defaultValue(arg: import("react-desc").ReactDescPossibleDefaultValues): {
-            deprecated: import("react-desc").PropTypesDescValidator;
-        };
-        isRequired: import("react-desc").PropTypesDescValue;
-    };
-    fitContent: {
-        defaultValue(arg: import("react-desc").ReactDescPossibleDefaultValues): {
-            deprecated: import("react-desc").PropTypesDescValidator;
-        };
-        isRequired: import("react-desc").PropTypesDescValue;
-    };
-    leftLabel: {
-        defaultValue(arg: import("react-desc").ReactDescPossibleDefaultValues): {
-            deprecated: import("react-desc").PropTypesDescValidator;
-        };
-        isRequired: import("react-desc").PropTypesDescValue;
-    };
-    hideLabel: {
-        defaultValue(arg: import("react-desc").ReactDescPossibleDefaultValues): {
-            deprecated: import("react-desc").PropTypesDescValidator;
-        };
-        isRequired: import("react-desc").PropTypesDescValue;
-    };
-    withHighlight: {
-        defaultValue(arg: import("react-desc").ReactDescPossibleDefaultValues): {
-            deprecated: import("react-desc").PropTypesDescValidator;
-        };
-        isRequired: import("react-desc").PropTypesDescValue;
-    };
-    isGroup: {
-        defaultValue(arg: import("react-desc").ReactDescPossibleDefaultValues): {
-            deprecated: import("react-desc").PropTypesDescValidator;
-        };
-        isRequired: import("react-desc").PropTypesDescValue;
-    };
-};

package/types/form-layout-block-item/styles.d.ts

@@ -1,6 +0,0 @@
-import type { DSFormLayoutBlockItemStyledContainerT, DSFormLayoutBlockItemStyledLabelT, DSFormLayoutBlockItemStyledMessageT, DSFormLayoutBlockItemStyledMarkT } from './index.d';
-export declare const StyledContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, DSFormLayoutBlockItemStyledContainerT, never>;
-export declare const StyledLabel: import("styled-components").StyledComponent<"label", import("styled-components").DefaultTheme, DSFormLayoutBlockItemStyledLabelT, never>;
-export declare const StyledMessage: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, DSFormLayoutBlockItemStyledMessageT, never>;
-export declare const StyledMark: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, DSFormLayoutBlockItemStyledMarkT, never>;
-export declare const ScreenReaderOnly: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;

package/types/form-layout-checkbox-group/DSFormLayoutCheckboxGroup.d.ts

@@ -1,20 +0,0 @@
-/// <reference path="../../../../../shared/typings/react-desc.d.ts" />
-/// <reference types="react" />
-import type { DSControlledCheckboxGroupT } from './index.d';
-declare const DSFormLayoutCheckboxGroup: {
-    (props: DSControlledCheckboxGroupT): JSX.Element;
-    propTypes: {
-        direction: {
-            defaultValue(arg: import("react-desc").ReactDescPossibleDefaultValues): {
-                deprecated: import("react-desc").PropTypesDescValidator;
-            };
-            isRequired: import("react-desc").PropTypesDescValue;
-        };
-    };
-};
-declare const DSFormLayoutCheckboxGroupWithSchema: {
-    (props?: unknown): JSX.Element;
-    propTypes: unknown;
-    toTypescript: () => import("react-desc").TypescriptSchema;
-};
-export { DSFormLayoutCheckboxGroup, DSFormLayoutCheckboxGroupWithSchema };

package/types/form-layout-checkbox-group/config/useValidateProps.d.ts

@@ -1,2 +0,0 @@
-import type { DSControlledCheckboxGroupT } from '../index.d';
-export declare const useValidateProps: (props: DSControlledCheckboxGroupT) => void;

package/types/form-layout-checkbox-group/defaultProps.d.ts

@@ -1,3 +0,0 @@
-export declare const defaultProps: {
-    direction: string;
-};

package/types/form-layout-checkbox-group/index.d.d.ts

@@ -1,10 +0,0 @@
-/// <reference types="react" />
-declare type DirectionsT = 'horizontal' | 'vertical';
-export interface DSControlledCheckboxGroupT {
-    direction: DirectionsT;
-    children: React.ReactNode;
-}
-export interface DSControlledCheckboxGroupStyledContainerT {
-    direction: DirectionsT;
-}
-export {};

package/types/form-layout-checkbox-group/index.d.ts

@@ -1 +0,0 @@
-export * from './DSFormLayoutCheckboxGroup';

package/types/form-layout-checkbox-group/propTypes.d.ts

@@ -1,9 +0,0 @@
-/// <reference path="../../../../../shared/typings/react-desc.d.ts" />
-export declare const propTypes: {
-    direction: {
-        defaultValue(arg: import("react-desc").ReactDescPossibleDefaultValues): {
-            deprecated: import("react-desc").PropTypesDescValidator;
-        };
-        isRequired: import("react-desc").PropTypesDescValue;
-    };
-};

package/types/form-layout-checkbox-group/styles.d.ts

@@ -1,2 +0,0 @@
-import type { DSControlledCheckboxGroupStyledContainerT } from './index.d';
-export declare const StyledContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, DSControlledCheckboxGroupStyledContainerT, never>;

package/types/index.d.ts

@@ -1,2 +0,0 @@
-export * from './form-layout-block-item';
-export * from './form-layout-checkbox-group';