@elliemae/ds-form-layout-blocks 2.0.0-alpha.3 → 2.0.0-alpha.7

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

@@ -3,8 +3,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var _jsx = require('@babel/runtime/helpers/jsx');
-require('react');
+var React = require('react');
 var reactDesc = require('react-desc');
+var uid = require('uid');
 var propTypes = require('./propTypes.js');
 var styles = require('./styles.js');
 
@@ -17,7 +18,7 @@ const DSFormLayoutBlockItem = props => {
     label,
     feedbackMessage,
     validationMessage,
-    labelFor,
+    inputID,
     children,
     hasError,
     leftLabel,
@@ -25,24 +26,38 @@ const DSFormLayoutBlockItem = props => {
     optional,
     hideLabel,
     fitContent,
-    withHighlight
+    withHighlight,
+    isGroup = false
   } = props;
-  return /*#__PURE__*/_jsx__default['default'](styles.StyledContainer, {
+  const instanceUID = React.useMemo(() => uid.uid(6), []);
+  return /*#__PURE__*/_jsx__default["default"](styles.StyledContainer, {
     leftLabel: leftLabel,
     fitContent: fitContent,
     hideLabel: hideLabel,
-    withHighlight: withHighlight
-  }, void 0, /*#__PURE__*/_jsx__default['default'](styles.StyledLabel, {
-    htmlFor: labelFor,
+    withHighlight: withHighlight,
+    as: isGroup ? 'fieldset' : 'div',
+    isGroup: isGroup,
+    "aria-describedby": `${inputID || instanceUID}_feedback_message`
+  }, void 0, /*#__PURE__*/_jsx__default["default"](styles.StyledLabel, {
+    htmlFor: inputID,
     leftLabel: leftLabel,
-    hideLabel: hideLabel
-  }, void 0, label, (required || optional) && /*#__PURE__*/_jsx__default['default'](styles.StyledMark, {
+    hideLabel: hideLabel,
+    "aria-hidden": isGroup
+  }, void 0, label, (required || optional) && /*#__PURE__*/_jsx__default["default"](styles.StyledMark, {
     required: required
-  })), children, (validationMessage || feedbackMessage) && /*#__PURE__*/_jsx__default['default'](styles.StyledMessage, {
+  })), isGroup && /*#__PURE__*/_jsx__default["default"](styles.ScreenReaderOnly, {
+    as: "legend"
+  }, void 0, label), children, feedbackMessage && !hasError && /*#__PURE__*/_jsx__default["default"](styles.StyledMessage, {
+    leftLabel: leftLabel,
+    hideLabel: hideLabel,
+    "aria-hidden": isGroup,
+    id: `${inputID || instanceUID}_feedback_message`
+  }, void 0, feedbackMessage), validationMessage && hasError && /*#__PURE__*/_jsx__default["default"](styles.StyledMessage, {
     hasError: hasError,
     leftLabel: leftLabel,
-    hideLabel: hideLabel
-  }, void 0, hasError ? validationMessage : feedbackMessage));
+    hideLabel: hideLabel,
+    role: "alert"
+  }, void 0, validationMessage));
 };
 
 const DSFormLayoutBlockItemWithSchema = reactDesc.describe(DSFormLayoutBlockItem);

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

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

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

@@ -8,11 +8,13 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
-const StyledContainer = /*#__PURE__*/styled__default['default'].div.withConfig({
+const StyledContainer = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-196zgtg-0"
-})(["position:relative;", " display:grid;", " align-items:center;", ""], ({
+})(["position:relative;padding:0;margin:0;display:grid;", " ", ";", " align-items:center;", ""], ({
   fitContent
 }) => fitContent ? 'width: fit-content;' : undefined, ({
+  isGroup
+}) => isGroup ? 'border: none' : '', ({
   leftLabel,
   hideLabel
 }) => leftLabel && !hideLabel ? 'grid-template-columns: max-content auto;' : undefined, ({
@@ -49,7 +51,7 @@ const StyledContainer = /*#__PURE__*/styled__default['default'].div.withConfig({
           }
         }
   ` : undefined);
-const StyledLabel = /*#__PURE__*/styled__default['default'].label.withConfig({
+const StyledLabel = /*#__PURE__*/styled__default["default"].label.withConfig({
   componentId: "sc-196zgtg-1"
 })(["display:flex;", " ", ""], ({
   theme,
@@ -66,9 +68,9 @@ const StyledLabel = /*#__PURE__*/styled__default['default'].label.withConfig({
       white-space: nowrap;
       border: 0;
   ` : undefined);
-const StyledMessage = /*#__PURE__*/styled__default['default'].div.withConfig({
+const StyledMessage = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-196zgtg-2"
-})(["font-size:", ";font-style:italic;text-align:right;line-height:15px;overflow:hidden;text-overflow:ellipsis;color:", ";", ""], ({
+})(["font-size:", ";font-style:italic;text-align:right;line-height:15px;height:15px;overflow:hidden;text-overflow:ellipsis;color:", ";", ""], ({
   theme
 }) => theme.fontSizes.microText[200], ({
   theme,
@@ -77,7 +79,7 @@ const StyledMessage = /*#__PURE__*/styled__default['default'].div.withConfig({
   leftLabel,
   hideLabel
 }) => leftLabel && !hideLabel ? 'grid-column: 1/3;' : undefined);
-const StyledMark = /*#__PURE__*/styled__default['default'].span.withConfig({
+const StyledMark = /*#__PURE__*/styled__default["default"].span.withConfig({
   componentId: "sc-196zgtg-3"
 })(["width:6px;height:6px;border-radius:50%;margin-left:", ";", ""], ({
   theme
@@ -89,7 +91,11 @@ const StyledMark = /*#__PURE__*/styled__default['default'].span.withConfig({
   ` : `
   border: 1px solid ${theme.colors.brand[600]};
   `);
+const ScreenReaderOnly = /*#__PURE__*/styled__default["default"].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;"]);
 
+exports.ScreenReaderOnly = ScreenReaderOnly;
 exports.StyledContainer = StyledContainer;
 exports.StyledLabel = StyledLabel;
 exports.StyledMark = StyledMark;

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

@@ -18,7 +18,7 @@ var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
 const DSFormLayoutCheckboxGroup = props => {
   useValidateProps.useValidateProps(props);
   const propsWithDefault = dsPropsHelpers.useMemoMergePropsWithDefault(props, defaultProps.defaultProps);
-  return /*#__PURE__*/_jsx__default['default'](styles.StyledContainer, {
+  return /*#__PURE__*/_jsx__default["default"](styles.StyledContainer, {
     direction: propsWithDefault.direction
   }, void 0, propsWithDefault.children);
 };

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

@@ -36,7 +36,7 @@ const useValidateProps = props => {
     throwCheckboxGroupDirectionError(props.direction);
   }
 
-  if (!React__default['default'].Children.count(props.children)) {
+  if (!React__default["default"].Children.count(props.children)) {
     throwCheckboxGroupChildrenError();
   }
 };

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

@@ -8,7 +8,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
-const StyledContainer = /*#__PURE__*/styled__default['default'].div.withConfig({
+const StyledContainer = /*#__PURE__*/styled__default["default"].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:", ";}"], ({
   direction

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

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

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

@@ -3,7 +3,7 @@ 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.'),
-  labelFor: PropTypes.string.isRequired.description("String that matches the input component's id. 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.'),
@@ -12,7 +12,8 @@ const propTypes = {
   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.')
+  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

@@ -2,9 +2,11 @@ import styled from 'styled-components';
 
 const StyledContainer = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-196zgtg-0"
-})(["position:relative;", " display:grid;", " align-items:center;", ""], ({
+})(["position:relative;padding:0;margin:0;display:grid;", " ", ";", " align-items:center;", ""], ({
   fitContent
 }) => fitContent ? 'width: fit-content;' : undefined, ({
+  isGroup
+}) => isGroup ? 'border: none' : '', ({
   leftLabel,
   hideLabel
 }) => leftLabel && !hideLabel ? 'grid-template-columns: max-content auto;' : undefined, ({
@@ -60,7 +62,7 @@ const StyledLabel = /*#__PURE__*/styled.label.withConfig({
   ` : undefined);
 const StyledMessage = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-196zgtg-2"
-})(["font-size:", ";font-style:italic;text-align:right;line-height:15px;overflow:hidden;text-overflow:ellipsis;color:", ";", ""], ({
+})(["font-size:", ";font-style:italic;text-align:right;line-height:15px;height:15px;overflow:hidden;text-overflow:ellipsis;color:", ";", ""], ({
   theme
 }) => theme.fontSizes.microText[200], ({
   theme,
@@ -81,5 +83,8 @@ const StyledMark = /*#__PURE__*/styled.span.withConfig({
   ` : `
   border: 1px solid ${theme.colors.brand[600]};
   `);
+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 { StyledContainer, StyledLabel, StyledMark, StyledMessage };
+export { ScreenReaderOnly, StyledContainer, StyledLabel, StyledMark, StyledMessage };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-form-layout-blocks",
-  "version": "2.0.0-alpha.3",
+  "version": "2.0.0-alpha.7",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Form Layout",
   "module": "./esm/index.js",
@@ -72,7 +72,7 @@
     "build": "node ../../scripts/build/build.js"
   },
   "dependencies": {
-    "@elliemae/ds-props-helpers": "2.0.0-alpha.3",
+    "@elliemae/ds-props-helpers": "2.0.0-alpha.7",
     "react-desc": "~4.1.3"
   },
   "devDependencies": {

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

@@ -5,7 +5,7 @@ declare const DSFormLayoutBlockItem: {
     propTypes: {
         children: any;
         label: any;
-        labelFor: any;
+        inputID: any;
         feedbackMessage: any;
         validationMessage: any;
         hasError: any;
@@ -15,6 +15,7 @@ declare const DSFormLayoutBlockItem: {
         leftLabel: any;
         hideLabel: any;
         withHighlight: any;
+        isGroup: any;
     };
 };
 declare const DSFormLayoutBlockItemWithSchema: any;

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

@@ -2,7 +2,7 @@
 export interface DSFormLayoutBlockItemPropsT {
     children: JSX.Element;
     label: string;
-    labelFor: string;
+    inputID: string;
     validationMessage?: string;
     feedbackMessage?: string;
     hasError?: boolean;
@@ -12,6 +12,7 @@ export interface DSFormLayoutBlockItemPropsT {
     optional?: boolean;
     hideLabel?: boolean;
     withHighlight?: boolean;
+    isGroup?: boolean;
 }
 export interface DSFormLayoutBlockItemStyledMessageT {
     hasError?: boolean;
@@ -23,6 +24,7 @@ export interface DSFormLayoutBlockItemStyledContainerT {
     fitContent?: boolean;
     hideLabel?: boolean;
     withHighlight?: boolean;
+    isGroup?: boolean;
 }
 export interface DSFormLayoutBlockItemStyledLabelT {
     leftLabel?: boolean;

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

@@ -1,7 +1,7 @@
 export declare const propTypes: {
     children: any;
     label: any;
-    labelFor: any;
+    inputID: any;
     feedbackMessage: any;
     validationMessage: any;
     hasError: any;
@@ -11,4 +11,5 @@ export declare const propTypes: {
     leftLabel: any;
     hideLabel: any;
     withHighlight: any;
+    isGroup: any;
 };

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

@@ -3,3 +3,4 @@ export declare const StyledContainer: import("styled-components").StyledComponen
 export declare const StyledLabel: import("styled-components").StyledComponent<"label", any, DSFormLayoutBlockItemStyledLabelT, never>;
 export declare const StyledMessage: import("styled-components").StyledComponent<"div", any, DSFormLayoutBlockItemStyledMessageT, never>;
 export declare const StyledMark: import("styled-components").StyledComponent<"span", any, DSFormLayoutBlockItemStyledMarkT, never>;
+export declare const ScreenReaderOnly: import("styled-components").StyledComponent<"div", any, {}, never>;