@coorpacademy/components 11.11.0 → 11.11.1-alpha.2

package/lib/atom/{review-header-step-item → status-item}/index.js

@@ -21,6 +21,8 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+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); }
+
 const Content = (props, legacyContext) => {
   const {
     icon,
@@ -29,33 +31,59 @@ const Content = (props, legacyContext) => {
   } = props;
   const translate = (0, _provider.GetTranslateFromContext)(legacyContext);
   let child;
-  let ariaDescription;
+  let contentAriaLabel;
 
   switch (icon) {
     case 'no-answer':
       child = value;
-      ariaDescription = current ? translate('review_header_step_item.current_question', {
-        headerStepValue: value
-      }) : translate('review_header_step_item.not_answered_question', {
+      contentAriaLabel = translate('review_header_step_item.not_answered_question', {
+        current: current ? 'current ' : '',
         headerStepValue: value
       });
       break;
 
     case 'right':
       child = /*#__PURE__*/_react.default.createElement(_novaIcons.NovaCompositionCoorpacademyCheck, {
-        className: (0, _classnames.default)(_style.default.rightIcon, current && _style.default.currentRightIcon)
-      });
-      ariaDescription = translate('review_header_step_item.correct_question', {
-        headerStepValue: value
+        className: (0, _classnames.default)(_style.default.rightIcon, current && _style.default.currentRightIcon),
+        role: "status",
+        "aria-label": translate('review_header_step_item.correct_question', {
+          current: current ? 'current ' : '',
+          headerStepValue: value
+        })
       });
       break;
 
     case 'wrong':
       child = /*#__PURE__*/_react.default.createElement(_novaIcons.NovaSolidStatusClose, {
-        className: (0, _classnames.default)(_style.default.wrongIcon, current && _style.default.currentWrongIcon)
+        className: (0, _classnames.default)(_style.default.wrongIcon, current && _style.default.currentWrongIcon),
+        role: "alert",
+        "aria-label": translate('review_header_step_item.incorrect_question', {
+          current: current ? 'current ' : '',
+          headerStepValue: value
+        })
       });
-      ariaDescription = translate('review_header_step_item.incorrect_question', {
-        headerStepValue: value
+      break;
+
+    case 'errors-number':
+      child = value;
+      contentAriaLabel = translate('bulk_import.errors_number', {
+        bulkImportErrorsNumber: value
+      });
+      break;
+
+    case 'valid':
+      child = /*#__PURE__*/_react.default.createElement(_novaIcons.NovaCompositionCoorpacademyCheck, {
+        className: (0, _classnames.default)(_style.default.validIcon),
+        role: "status",
+        "aria-label": translate('bulk_import.valid_scorm')
+      });
+      break;
+
+    case 'invalid':
+      child = /*#__PURE__*/_react.default.createElement(_novaIcons.NovaSolidStatusClose, {
+        className: (0, _classnames.default)(_style.default.invalidIcon),
+        role: "alert",
+        "aria-label": translate('bulk_import.invalid_scorm')
       });
       break;
 
@@ -63,23 +91,22 @@ const Content = (props, legacyContext) => {
       return null;
   }
 
-  return /*#__PURE__*/_react.default.createElement("span", {
-    className: _style.default.value,
-    "aria-label": translate('review_header_step_item.aria_label', {
-      headerStepValue: value
-    }),
-    "aria-describedby": ariaDescription
-  }, child);
+  return /*#__PURE__*/_react.default.createElement("span", _extends({}, icon === 'no-answer' || icon === 'errors-number' ? {
+    'aria-label': contentAriaLabel,
+    role: 'status'
+  } : {}, {
+    className: _style.default.value
+  }), child);
 };
 
-const ReviewHeaderStepItem = props => {
+const StatusItem = props => {
   const {
     icon,
     current
   } = props;
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _classnames.default)(_style.default.default, icon === 'right' && _style.default.right, icon === 'wrong' && _style.default.wrong, current && _style.default.current),
-    "data-name": "header-step-item"
+    className: (0, _classnames.default)(_style.default.default, icon === 'right' && _style.default.right, icon === 'wrong' && _style.default.wrong, current && _style.default.current, icon === 'valid' && _style.default.valid, icon === 'invalid' && _style.default.invalid, icon === 'errors-number' && _style.default.errorsNumber),
+    "data-name": "status-item"
   }, /*#__PURE__*/_react.default.createElement(Content, props));
 };
 
@@ -88,7 +115,7 @@ Content.contextTypes = {
   skin: _provider.default.childContextTypes.skin,
   translate: _provider.default.childContextTypes.translate
 };
-ReviewHeaderStepItem.propTypes = process.env.NODE_ENV !== "production" ? _types.default : {};
-var _default = ReviewHeaderStepItem;
+StatusItem.propTypes = process.env.NODE_ENV !== "production" ? _types.default : {};
+var _default = StatusItem;
 exports.default = _default;
 //# sourceMappingURL=index.js.map

package/lib/atom/status-item/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["Content","props","legacyContext","icon","current","value","translate","GetTranslateFromContext","child","contentAriaLabel","headerStepValue","classnames","style","rightIcon","currentRightIcon","wrongIcon","currentWrongIcon","bulkImportErrorsNumber","validIcon","invalidIcon","role","StatusItem","default","right","wrong","valid","invalid","errorsNumber","propTypes","contextTypes","skin","Provider","childContextTypes"],"sources":["../../../src/atom/status-item/index.tsx"],"sourcesContent":["import React from 'react';\nimport classnames from 'classnames';\nimport {\n  NovaCompositionCoorpacademyCheck as RightIcon,\n  NovaSolidStatusClose as WrongIcon\n} from '@coorpacademy/nova-icons';\nimport Provider, {GetTranslateFromContext} from '../provider';\nimport {WebContextValues} from '../provider/web-context';\nimport style from './style.css';\nimport propTypes, {StatusItemProps} from './types';\n\nconst Content = (props: StatusItemProps, legacyContext: WebContextValues) => {\n  const {icon, current, value} = props;\n  const translate = GetTranslateFromContext(legacyContext);\n  let child;\n  let contentAriaLabel;\n  switch (icon) {\n    case 'no-answer':\n      child = value;\n      contentAriaLabel = translate('review_header_step_item.not_answered_question', {\n        current: current ? 'current ' : '',\n        headerStepValue: value\n      });\n      break;\n\n    case 'right':\n      child = (\n        <RightIcon\n          className={classnames(style.rightIcon, current && style.currentRightIcon)}\n          role=\"status\"\n          aria-label={translate('review_header_step_item.correct_question', {\n            current: current ? 'current ' : '',\n            headerStepValue: value\n          })}\n        />\n      );\n      break;\n\n    case 'wrong':\n      child = (\n        <WrongIcon\n          className={classnames(style.wrongIcon, current && style.currentWrongIcon)}\n          role=\"alert\"\n          aria-label={translate('review_header_step_item.incorrect_question', {\n            current: current ? 'current ' : '',\n            headerStepValue: value\n          })}\n        />\n      );\n      break;\n\n    case 'errors-number':\n      child = value;\n      contentAriaLabel = translate('bulk_import.errors_number', {\n        bulkImportErrorsNumber: value\n      });\n      break;\n\n    case 'valid':\n      child = (\n        <RightIcon\n          className={classnames(style.validIcon)}\n          role=\"status\"\n          aria-label={translate('bulk_import.valid_scorm')}\n        />\n      );\n      break;\n\n    case 'invalid':\n      child = (\n        <WrongIcon\n          className={classnames(style.invalidIcon)}\n          role=\"alert\"\n          aria-label={translate('bulk_import.invalid_scorm')}\n        />\n      );\n      break;\n\n    default:\n      return null;\n  }\n\n  return (\n    <span\n      {...(icon === 'no-answer' || icon === 'errors-number'\n        ? {'aria-label': contentAriaLabel, role: 'status'}\n        : {})}\n      className={style.value}\n    >\n      {child}\n    </span>\n  );\n};\n\nconst StatusItem = (props: StatusItemProps) => {\n  const {icon, current} = props;\n  return (\n    <div\n      className={classnames(\n        style.default,\n        icon === 'right' && style.right,\n        icon === 'wrong' && style.wrong,\n        current && style.current,\n        icon === 'valid' && style.valid,\n        icon === 'invalid' && style.invalid,\n        icon === 'errors-number' && style.errorsNumber\n      )}\n      data-name=\"status-item\"\n    >\n      <Content {...props} />\n    </div>\n  );\n};\n\nContent.propTypes = propTypes;\n\nContent.contextTypes = {\n  skin: Provider.childContextTypes.skin,\n  translate: Provider.childContextTypes.translate\n};\n\nStatusItem.propTypes = propTypes;\n\nexport default StatusItem;\n"],"mappings":"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"}

package/lib/atom/status-item/index.native.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { StatusItemProps } from './types';
+declare const Step: ({ value, icon, current }: StatusItemProps) => JSX.Element | null;
+export default Step;
+//# sourceMappingURL=index.native.d.ts.map

package/lib/atom/status-item/index.native.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.native.d.ts","sourceRoot":"","sources":["../../../src/atom/status-item/index.native.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAC,eAAe,EAAC,MAAM,SAAS,CAAC;AA6CxC,QAAA,MAAM,IAAI,6BAA4B,eAAe,uBA2BpD,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/lib/atom/{review-header-step-item → status-item}/index.native.js

@@ -15,7 +15,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 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; }
 
-const createStyle = (current, icon) => {
+const createStyle = (icon, current) => {
   let backgroundColor;
 
   switch (icon) {
@@ -61,7 +61,7 @@ const Step = ({
 }) => {
   const [style, setStyle] = (0, _react.useState)(null);
   (0, _react.useEffect)(() => {
-    const _style = createStyle(current, icon);
+    const _style = createStyle(icon, current);
 
     setStyle(_style);
   }, [current, icon]);

package/lib/atom/status-item/index.native.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.native.js","names":["createStyle","icon","current","backgroundColor","COLORS","positive","negative","gray","StyleSheet","create","step","width","height","opacity","marginHorizontal","alignItems","justifyContent","borderRadius","stepText","fontWeight","fontSize","Step","value","style","setStyle","useState","useEffect","_style","child"],"sources":["../../../src/atom/status-item/index.native.tsx"],"sourcesContent":["import React, {useEffect, useState} from 'react';\nimport {StyleSheet, Text, TextStyle, View, ViewStyle} from 'react-native';\nimport {\n  NovaCompositionCoorpacademyCheck as RightIcon,\n  NovaSolidStatusClose as WrongIcon\n} from '@coorpacademy/nova-icons';\nimport {COLORS} from '../../variables/colors';\nimport {StatusItemProps} from './types';\n\ntype StyleSheetType = {\n  step: ViewStyle;\n  stepText: TextStyle;\n  icon: ViewStyle;\n};\n\nconst createStyle = (icon: StatusItemProps['icon'], current?: boolean): StyleSheetType => {\n  let backgroundColor;\n\n  switch (icon) {\n    case 'right':\n      backgroundColor = COLORS.positive;\n      break;\n    case 'wrong':\n      backgroundColor = COLORS.negative;\n      break;\n    case 'no-answer':\n    default:\n      backgroundColor = COLORS.gray;\n  }\n\n  return StyleSheet.create({\n    step: {\n      width: current ? 40 : 32,\n      height: current ? 40 : 32,\n      opacity: current ? 1 : 0.5,\n      marginHorizontal: 8,\n      backgroundColor,\n      alignItems: 'center',\n      justifyContent: 'center',\n      borderRadius: 50\n    },\n    stepText: {\n      fontWeight: '600',\n      fontSize: current ? 16 : 12\n    },\n    icon: {\n      width: current ? 14 : 12,\n      height: current ? 14 : 12\n    }\n  });\n};\n\nconst Step = ({value, icon, current}: StatusItemProps) => {\n  const [style, setStyle] = useState<StyleSheetType | null>(null);\n\n  useEffect(() => {\n    const _style = createStyle(icon, current);\n    setStyle(_style);\n  }, [current, icon]);\n\n  if (!style) {\n    return null;\n  }\n\n  let child;\n\n  switch (icon) {\n    case 'right':\n      child = <RightIcon style={style.icon} color=\"#fff\" />;\n      break;\n    case 'wrong':\n      child = <WrongIcon style={style.icon} color=\"#fff\" />;\n      break;\n    case 'no-answer':\n    default:\n      child = <Text style={style.stepText}>{value}</Text>;\n  }\n\n  return <View style={style.step}>{child}</View>;\n};\n\nexport default Step;\n"],"mappings":";;;;;AAAA;;AACA;;AACA;;AAIA;;;;;;AASA,MAAMA,WAAW,GAAG,CAACC,IAAD,EAAgCC,OAAhC,KAAsE;EACxF,IAAIC,eAAJ;;EAEA,QAAQF,IAAR;IACE,KAAK,OAAL;MACEE,eAAe,GAAGC,cAAA,CAAOC,QAAzB;MACA;;IACF,KAAK,OAAL;MACEF,eAAe,GAAGC,cAAA,CAAOE,QAAzB;MACA;;IACF,KAAK,WAAL;IACA;MACEH,eAAe,GAAGC,cAAA,CAAOG,IAAzB;EATJ;;EAYA,OAAOC,uBAAA,CAAWC,MAAX,CAAkB;IACvBC,IAAI,EAAE;MACJC,KAAK,EAAET,OAAO,GAAG,EAAH,GAAQ,EADlB;MAEJU,MAAM,EAAEV,OAAO,GAAG,EAAH,GAAQ,EAFnB;MAGJW,OAAO,EAAEX,OAAO,GAAG,CAAH,GAAO,GAHnB;MAIJY,gBAAgB,EAAE,CAJd;MAKJX,eALI;MAMJY,UAAU,EAAE,QANR;MAOJC,cAAc,EAAE,QAPZ;MAQJC,YAAY,EAAE;IARV,CADiB;IAWvBC,QAAQ,EAAE;MACRC,UAAU,EAAE,KADJ;MAERC,QAAQ,EAAElB,OAAO,GAAG,EAAH,GAAQ;IAFjB,CAXa;IAevBD,IAAI,EAAE;MACJU,KAAK,EAAET,OAAO,GAAG,EAAH,GAAQ,EADlB;MAEJU,MAAM,EAAEV,OAAO,GAAG,EAAH,GAAQ;IAFnB;EAfiB,CAAlB,CAAP;AAoBD,CAnCD;;AAqCA,MAAMmB,IAAI,GAAG,CAAC;EAACC,KAAD;EAAQrB,IAAR;EAAcC;AAAd,CAAD,KAA6C;EACxD,MAAM,CAACqB,KAAD,EAAQC,QAAR,IAAoB,IAAAC,eAAA,EAAgC,IAAhC,CAA1B;EAEA,IAAAC,gBAAA,EAAU,MAAM;IACd,MAAMC,MAAM,GAAG3B,WAAW,CAACC,IAAD,EAAOC,OAAP,CAA1B;;IACAsB,QAAQ,CAACG,MAAD,CAAR;EACD,CAHD,EAGG,CAACzB,OAAD,EAAUD,IAAV,CAHH;;EAKA,IAAI,CAACsB,KAAL,EAAY;IACV,OAAO,IAAP;EACD;;EAED,IAAIK,KAAJ;;EAEA,QAAQ3B,IAAR;IACE,KAAK,OAAL;MACE2B,KAAK,gBAAG,6BAAC,2CAAD;QAAW,KAAK,EAAEL,KAAK,CAACtB,IAAxB;QAA8B,KAAK,EAAC;MAApC,EAAR;MACA;;IACF,KAAK,OAAL;MACE2B,KAAK,gBAAG,6BAAC,+BAAD;QAAW,KAAK,EAAEL,KAAK,CAACtB,IAAxB;QAA8B,KAAK,EAAC;MAApC,EAAR;MACA;;IACF,KAAK,WAAL;IACA;MACE2B,KAAK,gBAAG,6BAAC,iBAAD;QAAM,KAAK,EAAEL,KAAK,CAACL;MAAnB,GAA8BI,KAA9B,CAAR;EATJ;;EAYA,oBAAO,6BAAC,iBAAD;IAAM,KAAK,EAAEC,KAAK,CAACb;EAAnB,GAA0BkB,KAA1B,CAAP;AACD,CA3BD;;eA6BeP,I"}

package/lib/atom/{review-header-step-item → status-item}/style.css

@@ -3,6 +3,12 @@
 @value cm_positive_100 from colors;
 @value cm_negative_100 from colors;
 @value white from colors;
+@value positive from colors;
+@value negative from colors;
+@value cm_negative_50 from colors;
+@value cm_green_secondary_200 from colors;
+@value cm_green_secondary_100 from colors;
+@value cm_pink_50 from colors;
 
 .default {
   width: 32px;
@@ -62,4 +68,45 @@
   transform: scale(1.5);
 }
 
+/* ----------------- CM bulk theme ------------------------- */
 
+
+.valid {
+  opacity: 1;
+  width: 24px;
+  height: 24px;
+  background-color: cm_green_secondary_100;
+}
+
+.validIcon {
+  color: cm_green_secondary_200;
+  width: 12px;
+  height: 10px;
+  transition: transform 0.25s ease;
+}
+
+.invalid {
+  opacity: 1;
+  width: 24px;
+  height: 24px;
+  background-color: cm_negative_50;
+}
+
+.invalidIcon {
+  color: cm_negative_100;
+  width: 10px;
+  height: 10px;
+  transition: color 0.25s ease;
+}
+
+.errorsNumber {
+  opacity: 1;
+  width: 24px;
+  height: 24px;
+  background-color: cm_pink_50;
+  color: cm_negative_100;
+  font-family: 'Gilroy';
+  font-style: normal;
+  font-weight: 600;
+  font-size: 14px;
+}

package/lib/atom/{review-header-step-item → status-item}/types.d.ts

@@ -5,12 +5,12 @@ declare const propTypes: {
     value: PropTypes.Requireable<string>;
 };
 export default propTypes;
-export declare type HeaderStepItemProps = {
-    current: boolean;
-    icon: 'no-answer' | 'right' | 'wrong';
-    value: string;
+export declare type StatusItemProps = {
+    current?: boolean;
+    icon: 'no-answer' | 'right' | 'wrong' | 'valid' | 'invalid' | 'errors-number';
+    value?: string;
 };
 export declare type Fixture = {
-    props: HeaderStepItemProps;
+    props: StatusItemProps;
 };
 //# sourceMappingURL=types.d.ts.map

package/lib/atom/status-item/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/atom/status-item/types.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,YAAY,CAAC;AAEnC,QAAA,MAAM,SAAS;;;;CAId,CAAC;AAEF,eAAe,SAAS,CAAC;AAEzB,oBAAY,eAAe,GAAG;IAC5B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,EAAE,WAAW,GAAG,OAAO,GAAG,OAAO,GAAG,OAAO,GAAG,SAAS,GAAG,eAAe,CAAC;IAC9E,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,oBAAY,OAAO,GAAG;IACpB,KAAK,EAAE,eAAe,CAAC;CACxB,CAAC"}

package/lib/atom/{review-header-step-item → status-item}/types.js

@@ -9,7 +9,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 const propTypes = {
   current: _propTypes.default.bool,
-  icon: _propTypes.default.oneOf(['no-answer', 'right', 'wrong']),
+  icon: _propTypes.default.oneOf(['no-answer', 'right', 'wrong', 'valid', 'invalid', 'errors-number']),
   value: _propTypes.default.string
 };
 var _default = propTypes;

package/lib/atom/status-item/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","names":["propTypes","current","PropTypes","bool","icon","oneOf","value","string"],"sources":["../../../src/atom/status-item/types.ts"],"sourcesContent":["import PropTypes from 'prop-types';\n\nconst propTypes = {\n  current: PropTypes.bool,\n  icon: PropTypes.oneOf(['no-answer', 'right', 'wrong', 'valid', 'invalid', 'errors-number']),\n  value: PropTypes.string\n};\n\nexport default propTypes;\n\nexport type StatusItemProps = {\n  current?: boolean;\n  icon: 'no-answer' | 'right' | 'wrong' | 'valid' | 'invalid' | 'errors-number';\n  value?: string;\n};\n\nexport type Fixture = {\n  props: StatusItemProps;\n};\n"],"mappings":";;;;;AAAA;;;;AAEA,MAAMA,SAAS,GAAG;EAChBC,OAAO,EAAEC,kBAAA,CAAUC,IADH;EAEhBC,IAAI,EAAEF,kBAAA,CAAUG,KAAV,CAAgB,CAAC,WAAD,EAAc,OAAd,EAAuB,OAAvB,EAAgC,OAAhC,EAAyC,SAAzC,EAAoD,eAApD,CAAhB,CAFU;EAGhBC,KAAK,EAAEJ,kBAAA,CAAUK;AAHD,CAAlB;eAMeP,S"}

package/lib/molecule/brand-form-group/index.d.ts

@@ -56,6 +56,8 @@ declare namespace BrandFormGroup {
             disabled: PropTypes.Requireable<boolean>;
             onChange: PropTypes.Requireable<(...args: any[]) => any>;
             description: PropTypes.Requireable<string>;
+            'aria-labelledby': PropTypes.Requireable<string>;
+            'aria-label': PropTypes.Requireable<string>;
             modified: PropTypes.Requireable<boolean>;
             titlePosition: PropTypes.Requireable<string>;
             theme: PropTypes.Requireable<string>;
@@ -109,6 +111,7 @@ declare namespace BrandFormGroup {
             modified: PropTypes.Requireable<boolean>;
             error: PropTypes.Requireable<boolean>;
             'aria-label': PropTypes.Requireable<string>;
+            'aria-labelledby': PropTypes.Requireable<string>;
         }> | PropTypes.InferProps<{
             type: PropTypes.Requireable<string>;
             title: PropTypes.Validator<string>;
@@ -188,6 +191,8 @@ declare namespace BrandFormGroup {
                     disabled: PropTypes.Requireable<boolean>;
                     onChange: PropTypes.Requireable<(...args: any[]) => any>;
                     description: PropTypes.Requireable<string>;
+                    'aria-labelledby': PropTypes.Requireable<string>;
+                    'aria-label': PropTypes.Requireable<string>;
                     modified: PropTypes.Requireable<boolean>;
                     titlePosition: PropTypes.Requireable<string>;
                     theme: PropTypes.Requireable<string>;
@@ -224,6 +229,7 @@ declare namespace BrandFormGroup {
                     modified: PropTypes.Requireable<boolean>;
                     error: PropTypes.Requireable<boolean>;
                     'aria-label': PropTypes.Requireable<string>;
+                    'aria-labelledby': PropTypes.Requireable<string>;
                 }> | PropTypes.InferProps<{
                     type: PropTypes.Requireable<string>;
                     title: PropTypes.Validator<string>;
@@ -328,6 +334,8 @@ declare namespace BrandFormGroup {
                     disabled: PropTypes.Requireable<boolean>;
                     onChange: PropTypes.Requireable<(...args: any[]) => any>;
                     description: PropTypes.Requireable<string>;
+                    'aria-labelledby': PropTypes.Requireable<string>;
+                    'aria-label': PropTypes.Requireable<string>;
                     modified: PropTypes.Requireable<boolean>;
                     titlePosition: PropTypes.Requireable<string>;
                     theme: PropTypes.Requireable<string>;

package/lib/molecule/cm-popin/types.d.ts

@@ -41,6 +41,8 @@ declare const propTypes: {
         disabled: PropTypes.Requireable<boolean>;
         onChange: PropTypes.Requireable<(...args: any[]) => any>;
         description: PropTypes.Requireable<string>;
+        'aria-labelledby': PropTypes.Requireable<string>;
+        'aria-label': PropTypes.Requireable<string>;
         modified: PropTypes.Requireable<boolean>;
         titlePosition: PropTypes.Requireable<string>;
         theme: PropTypes.Requireable<string>;

package/lib/molecule/cm-popin/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/molecule/cm-popin/types.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,YAAY,CAAC;AAInC,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmCd,CAAC;AAEF,oBAAY,eAAe,GAAG;IAC5B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,CAAC,EAAE;QACZ,eAAe,CAAC,EAAE,MAAM,CAAC;QACzB,KAAK,CAAC,EAAE,MAAM,CAAC;KAChB,CAAC;IACF,aAAa,EAAE,MAAM,IAAI,CAAC;CAC3B,CAAC;AAEF,oBAAY,YAAY,GAAG;IACzB,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,eAAe,EAAE,MAAM,CAAC;IACxB,WAAW,CAAC,EAAE,eAAe,CAAC;IAC9B,YAAY,CAAC,EAAE,eAAe,CAAC;CAChC,CAAC;AAEF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/molecule/cm-popin/types.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,YAAY,CAAC;AAInC,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmCd,CAAC;AAEF,oBAAY,eAAe,GAAG;IAC5B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,CAAC,EAAE;QACZ,eAAe,CAAC,EAAE,MAAM,CAAC;QACzB,KAAK,CAAC,EAAE,MAAM,CAAC;KAChB,CAAC;IACF,aAAa,EAAE,MAAM,IAAI,CAAC;CAC3B,CAAC;AAEF,oBAAY,YAAY,GAAG;IACzB,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,eAAe,EAAE,MAAM,CAAC;IACxB,WAAW,CAAC,EAAE,eAAe,CAAC;IAC9B,YAAY,CAAC,EAAE,eAAe,CAAC;CAChC,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/lib/molecule/draggable-list/index.d.ts

@@ -18,6 +18,8 @@ declare namespace DraggableList {
                 disabled: PropTypes.Requireable<boolean>;
                 onChange: PropTypes.Requireable<(...args: any[]) => any>;
                 description: PropTypes.Requireable<string>;
+                'aria-labelledby': PropTypes.Requireable<string>;
+                'aria-label': PropTypes.Requireable<string>;
                 modified: PropTypes.Requireable<boolean>;
                 titlePosition: PropTypes.Requireable<string>;
                 theme: PropTypes.Requireable<string>;

package/lib/molecule/filters/filters-wrapper.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"filters-wrapper.d.ts","sourceRoot":"","sources":["../../../src/molecule/filters/filters-wrapper.js"],"names":[],"mappings":";AAUA,sEA6DC"}
+{"version":3,"file":"filters-wrapper.d.ts","sourceRoot":"","sources":["../../../src/molecule/filters/filters-wrapper.js"],"names":[],"mappings":";AAUA,sEA+DC"}

package/lib/molecule/filters/filters-wrapper.js

@@ -80,10 +80,13 @@ const FiltersWapper = (props, context) => {
           className: _filtersWapper.default.choice,
           key: idx
         }, /*#__PURE__*/_react.default.createElement("p", {
+          id: `title-id-${idx}`,
           className: _filtersWapper.default.title
         }, filter.title), /*#__PURE__*/_react.default.createElement("div", {
           className: _filtersWapper.default.toggle
-        }, /*#__PURE__*/_react.default.createElement(_inputSwitch.default, filter.display)));
+        }, /*#__PURE__*/_react.default.createElement(_inputSwitch.default, _extends({}, filter.display, {
+          "aria-labelledby": `title-id-${idx}`
+        }))));
 
       default:
         return null;

package/lib/molecule/filters/filters-wrapper.js.map

@@ -1 +1 @@
-{"version":3,"file":"filters-wrapper.js","names":["FiltersWapper","props","context","filters","className","filterGroupAriaLabel","buildFilter","filter","idx","type","fieldName","style","choice","title","radioGroup","timerWrapper","timerSubtitle","subtitle","toggle","display","filtersList","convert","cap","emptyFilters","classnames","wrapperNone","wrapper","propTypes","PropTypes","string","arrayOf","shape","oneOf","isRequired"],"sources":["../../../src/molecule/filters/filters-wrapper.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport {isEmpty, map} from 'lodash/fp';\nimport classnames from 'classnames';\nimport Select from '../../atom/select';\nimport InputSwitch from '../../atom/input-switch';\nimport RadioGroup from '../../atom/radio-group';\nimport RangeSlider from '../../atom/range';\nimport style from './filters-wapper.css';\n\nconst FiltersWapper = (props, context) => {\n  const {filters, className, filterGroupAriaLabel} = props;\n\n  const buildFilter = (filter, idx) => {\n    const {type, fieldName} = filter;\n    switch (type) {\n      case 'select':\n        return (\n          <div data-name=\"choice\" data-filter-type={fieldName} className={style.choice} key={idx}>\n            <Select {...filter} />\n          </div>\n        );\n      case 'radio':\n        return (\n          <div data-name=\"choice\" data-filter-type={fieldName} className={style.choice} key={idx}>\n            <p className={style.title}>{filter.title}</p>\n            <RadioGroup {...filter} className={style.radioGroup} />\n          </div>\n        );\n      case 'range':\n        return (\n          <div\n            data-name=\"choice\"\n            data-filter-type={fieldName}\n            className={style.timerWrapper}\n            key={idx}\n          >\n            <label>\n              <span className={style.title}>{filter.title}</span>\n              <p className={style.timerSubtitle}>{filter.subtitle}</p>\n              <RangeSlider {...filter} />\n            </label>\n          </div>\n        );\n      case 'switch':\n        return (\n          <div data-name=\"choice\" data-filter-type={fieldName} className={style.choice} key={idx}>\n            <p className={style.title}>{filter.title}</p>\n            <div className={style.toggle}>\n              <InputSwitch {...filter.display} />\n            </div>\n          </div>\n        );\n      default:\n        return null;\n    }\n  };\n\n  const filtersList = map.convert({cap: false})(buildFilter, filters);\n  const emptyFilters = isEmpty(filters);\n  return (\n    <form>\n      <div\n        className={classnames(className, emptyFilters ? style.wrapperNone : style.wrapper)}\n        role=\"group\"\n        aria-label={filterGroupAriaLabel}\n      >\n        {filtersList}\n      </div>\n    </form>\n  );\n};\n\nFiltersWapper.propTypes = {\n  className: PropTypes.string,\n  filters: PropTypes.arrayOf(\n    PropTypes.shape({\n      type: PropTypes.oneOf(['select', 'range', 'radio', 'switch']).isRequired,\n      fieldName: PropTypes.string.isRequired\n    })\n  ),\n  filterGroupAriaLabel: PropTypes.string\n};\nexport default FiltersWapper;\n"],"mappings":"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"}
+{"version":3,"file":"filters-wrapper.js","names":["FiltersWapper","props","context","filters","className","filterGroupAriaLabel","buildFilter","filter","idx","type","fieldName","style","choice","title","radioGroup","timerWrapper","timerSubtitle","subtitle","toggle","display","filtersList","convert","cap","emptyFilters","classnames","wrapperNone","wrapper","propTypes","PropTypes","string","arrayOf","shape","oneOf","isRequired"],"sources":["../../../src/molecule/filters/filters-wrapper.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport {isEmpty, map} from 'lodash/fp';\nimport classnames from 'classnames';\nimport Select from '../../atom/select';\nimport InputSwitch from '../../atom/input-switch';\nimport RadioGroup from '../../atom/radio-group';\nimport RangeSlider from '../../atom/range';\nimport style from './filters-wapper.css';\n\nconst FiltersWapper = (props, context) => {\n  const {filters, className, filterGroupAriaLabel} = props;\n\n  const buildFilter = (filter, idx) => {\n    const {type, fieldName} = filter;\n    switch (type) {\n      case 'select':\n        return (\n          <div data-name=\"choice\" data-filter-type={fieldName} className={style.choice} key={idx}>\n            <Select {...filter} />\n          </div>\n        );\n      case 'radio':\n        return (\n          <div data-name=\"choice\" data-filter-type={fieldName} className={style.choice} key={idx}>\n            <p className={style.title}>{filter.title}</p>\n            <RadioGroup {...filter} className={style.radioGroup} />\n          </div>\n        );\n      case 'range':\n        return (\n          <div\n            data-name=\"choice\"\n            data-filter-type={fieldName}\n            className={style.timerWrapper}\n            key={idx}\n          >\n            <label>\n              <span className={style.title}>{filter.title}</span>\n              <p className={style.timerSubtitle}>{filter.subtitle}</p>\n              <RangeSlider {...filter} />\n            </label>\n          </div>\n        );\n      case 'switch':\n        return (\n          <div data-name=\"choice\" data-filter-type={fieldName} className={style.choice} key={idx}>\n            <p id={`title-id-${idx}`} className={style.title}>\n              {filter.title}\n            </p>\n            <div className={style.toggle}>\n              <InputSwitch {...filter.display} aria-labelledby={`title-id-${idx}`} />\n            </div>\n          </div>\n        );\n      default:\n        return null;\n    }\n  };\n\n  const filtersList = map.convert({cap: false})(buildFilter, filters);\n  const emptyFilters = isEmpty(filters);\n  return (\n    <form>\n      <div\n        className={classnames(className, emptyFilters ? style.wrapperNone : style.wrapper)}\n        role=\"group\"\n        aria-label={filterGroupAriaLabel}\n      >\n        {filtersList}\n      </div>\n    </form>\n  );\n};\n\nFiltersWapper.propTypes = {\n  className: PropTypes.string,\n  filters: PropTypes.arrayOf(\n    PropTypes.shape({\n      type: PropTypes.oneOf(['select', 'range', 'radio', 'switch']).isRequired,\n      fieldName: PropTypes.string.isRequired\n    })\n  ),\n  filterGroupAriaLabel: PropTypes.string\n};\nexport default FiltersWapper;\n"],"mappings":"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"}

package/lib/molecule/filters/index.d.ts

@@ -40,6 +40,7 @@ declare class Filters extends React.Component<any, any, any> {
             modified: PropTypes.Requireable<boolean>;
             error: PropTypes.Requireable<boolean>;
             'aria-label': PropTypes.Requireable<string>;
+            'aria-labelledby': PropTypes.Requireable<string>;
         }>>;
         onSearch: PropTypes.Requireable<(...args: any[]) => any>;
         onToggleFilters: PropTypes.Requireable<(...args: any[]) => any>;
@@ -47,6 +48,7 @@ declare class Filters extends React.Component<any, any, any> {
         moreSortAriaLabel: PropTypes.Requireable<string>;
         moreFilterAriaLabel: PropTypes.Requireable<string>;
         filterGroupAriaLabel: PropTypes.Requireable<string>;
+        sortAriaLabel: PropTypes.Requireable<string>;
     };
     static contextTypes: {
         skin: PropTypes.Requireable<PropTypes.InferProps<{

package/lib/molecule/filters/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/filters/index.js"],"names":[],"mappings":";AASA;IACE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAeE;IAEF;;;;;;;;;;;;;;;;;;;;;;MAEE;IAEF,wBASC;IAPC;;;MAGC;IAMH,yBAcC;IAED,uBAYC;IAED,qBAOC;IAED,sBA2FC;CACF"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/filters/index.js"],"names":[],"mappings":";AASA;IACE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAgBE;IAEF;;;;;;;;;;;;;;;;;;;;;;MAEE;IAEF,wBASC;IAPC;;;MAGC;IAMH,yBAcC;IAED,uBAYC;IAED,qBAOC;IAED,sBA4FC;CACF"}

package/lib/molecule/filters/index.js

@@ -21,6 +21,8 @@ var _filtersWrapper = _interopRequireDefault(require("./filters-wrapper"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+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); }
+
 class Filters extends _react.default.Component {
   constructor(props) {
     super(props);
@@ -87,7 +89,8 @@ class Filters extends _react.default.Component {
       filters,
       moreFilterAriaLabel,
       moreSortAriaLabel,
-      filterGroupAriaLabel
+      filterGroupAriaLabel,
+      sortAriaLabel
     } = this.props;
     const {
       filter,
@@ -103,7 +106,9 @@ class Filters extends _react.default.Component {
     const sortView = sorting !== undefined ? /*#__PURE__*/_react.default.createElement("div", {
       "data-name": "choice",
       className: _style.default.select
-    }, /*#__PURE__*/_react.default.createElement(_select.default, sorting)) : null;
+    }, /*#__PURE__*/_react.default.createElement(_select.default, _extends({}, sorting, {
+      "aria-label": sortAriaLabel
+    }))) : null;
     return /*#__PURE__*/_react.default.createElement("div", {
       "data-name": "search",
       className: _style.default.search
@@ -185,7 +190,8 @@ Filters.propTypes = process.env.NODE_ENV !== "production" ? {
   onToggleSorts: _propTypes.default.func,
   moreSortAriaLabel: _propTypes.default.string,
   moreFilterAriaLabel: _propTypes.default.string,
-  filterGroupAriaLabel: _propTypes.default.string
+  filterGroupAriaLabel: _propTypes.default.string,
+  sortAriaLabel: _propTypes.default.string
 } : {};
 var _default = Filters;
 exports.default = _default;

package/lib/molecule/filters/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["Filters","React","Component","constructor","props","state","filter","openFilters","sorted","openSorts","handleOpenFilter","bind","handleOpenSort","handleSearch","onToggleFilters","newValue","setState","onToggleSorts","onSearch","render","sorting","filterCTALabel","filterTabLabel","sortCTALabel","sortTabLabel","filters","moreFilterAriaLabel","moreSortAriaLabel","filterGroupAriaLabel","skin","context","defaultColor","darkColor","filtersActive","sortingActive","sortView","undefined","style","select","search","activeDefault","default","title","arrow","color","activeWrapperSortBy","wrapperSortBy","activeWrapperFilters","wrapperFilters","wrapper","CTAfilter","backgroundColor","activeSorting","contextTypes","Provider","childContextTypes","propTypes","PropTypes","string","bool","FiltersWrapper","shape","Select","func"],"sources":["../../../src/molecule/filters/index.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport {get} from 'lodash/fp';\nimport {NovaCompositionNavigationArrowDown as ArrowDown} from '@coorpacademy/nova-icons';\nimport Select from '../../atom/select';\nimport Provider from '../../atom/provider';\nimport style from './style.css';\nimport FiltersWrapper from './filters-wrapper';\n\nclass Filters extends React.Component {\n  static propTypes = {\n    filterCTALabel: PropTypes.string,\n    filterTabLabel: PropTypes.string,\n    sortCTALabel: PropTypes.string,\n    sortTabLabel: PropTypes.string,\n    openFilters: PropTypes.bool,\n    openSorts: PropTypes.bool,\n    filters: FiltersWrapper.propTypes.filters,\n    sorting: PropTypes.shape(Select.propTypes),\n    onSearch: PropTypes.func,\n    onToggleFilters: PropTypes.func,\n    onToggleSorts: PropTypes.func,\n    moreSortAriaLabel: PropTypes.string,\n    moreFilterAriaLabel: PropTypes.string,\n    filterGroupAriaLabel: PropTypes.string\n  };\n\n  static contextTypes = {\n    skin: Provider.childContextTypes.skin\n  };\n\n  constructor(props) {\n    super(props);\n    this.state = {\n      filter: !!props.openFilters,\n      sorted: !!props.openSorts\n    };\n    this.handleOpenFilter = this.handleOpenFilter.bind(this);\n    this.handleOpenSort = this.handleOpenSort.bind(this);\n    this.handleSearch = this.handleSearch.bind(this);\n  }\n\n  handleOpenFilter() {\n    const {filter} = this.state;\n    const {onToggleFilters} = this.props;\n\n    const newValue = !filter;\n\n    this.setState({\n      filter: newValue,\n      sorted: false\n    });\n\n    if (onToggleFilters) {\n      onToggleFilters(newValue);\n    }\n  }\n\n  handleOpenSort() {\n    const {sorted} = this.state;\n    const {onToggleSorts} = this.props;\n\n    const newValue = !sorted;\n\n    this.setState({\n      sorted: newValue,\n      filter: false\n    });\n\n    if (onToggleSorts) onToggleSorts(newValue);\n  }\n\n  handleSearch() {\n    const {onSearch} = this.props;\n    this.setState({\n      sorted: false,\n      filter: false\n    });\n    if (onSearch) onSearch();\n  }\n\n  render() {\n    const {\n      sorting,\n      filterCTALabel,\n      filterTabLabel,\n      sortCTALabel,\n      sortTabLabel,\n      filters,\n      moreFilterAriaLabel,\n      moreSortAriaLabel,\n      filterGroupAriaLabel\n    } = this.props;\n    const {filter, sorted} = this.state;\n    const {skin} = this.context;\n\n    const defaultColor = get('common.primary', skin);\n    const darkColor = get('common.dark', skin);\n    const filtersActive = filter === true;\n    const sortingActive = sorted === true;\n\n    const sortView =\n      sorting !== undefined ? (\n        <div data-name=\"choice\" className={style.select}>\n          <Select {...sorting} />\n        </div>\n      ) : null;\n\n    return (\n      <div data-name=\"search\" className={style.search}>\n        <div\n          data-name=\"filter\"\n          data-open={filtersActive}\n          className={filtersActive ? style.activeDefault : style.default}\n        >\n          <div className={style.title} data-name=\"filterButton\" onClick={this.handleOpenFilter}>\n            {filterTabLabel}\n            <div className={style.arrow}>\n              <ArrowDown style={{color: darkColor}} height={14} aria-label={moreFilterAriaLabel} />\n            </div>\n          </div>\n        </div>\n        <div\n          data-name=\"sortBy\"\n          data-open={sortingActive}\n          className={sortingActive ? style.activeWrapperSortBy : style.wrapperSortBy}\n        >\n          <div className={style.title} data-name=\"sortButton\" onClick={this.handleOpenSort}>\n            {sortTabLabel}\n            <div className={style.arrow}>\n              <ArrowDown style={{color: darkColor}} height={14} aria-label={moreSortAriaLabel} />\n            </div>\n          </div>\n        </div>\n        <div\n          data-name=\"filterWrapper\"\n          className={filtersActive ? style.activeWrapperFilters : style.wrapperFilters}\n        >\n          <FiltersWrapper\n            className={style.wrapper}\n            filters={filters}\n            filterGroupAriaLabel={filterGroupAriaLabel}\n          />\n          <div\n            data-name=\"cta\"\n            className={style.CTAfilter}\n            style={{\n              backgroundColor: defaultColor\n            }}\n            onClick={this.handleSearch}\n          >\n            {filterCTALabel}\n          </div>\n        </div>\n        <div\n          data-name=\"sortWrapper\"\n          className={sortingActive ? style.activeSorting : style.sorting}\n        >\n          {sortView}\n          <div\n            data-name=\"cta\"\n            className={style.CTAfilter}\n            style={{\n              backgroundColor: defaultColor\n            }}\n            onClick={this.handleSearch}\n          >\n            {sortCTALabel}\n          </div>\n        </div>\n      </div>\n    );\n  }\n}\n\nexport default Filters;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["Filters","React","Component","constructor","props","state","filter","openFilters","sorted","openSorts","handleOpenFilter","bind","handleOpenSort","handleSearch","onToggleFilters","newValue","setState","onToggleSorts","onSearch","render","sorting","filterCTALabel","filterTabLabel","sortCTALabel","sortTabLabel","filters","moreFilterAriaLabel","moreSortAriaLabel","filterGroupAriaLabel","sortAriaLabel","skin","context","defaultColor","darkColor","filtersActive","sortingActive","sortView","undefined","style","select","search","activeDefault","default","title","arrow","color","activeWrapperSortBy","wrapperSortBy","activeWrapperFilters","wrapperFilters","wrapper","CTAfilter","backgroundColor","activeSorting","contextTypes","Provider","childContextTypes","propTypes","PropTypes","string","bool","FiltersWrapper","shape","Select","func"],"sources":["../../../src/molecule/filters/index.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport {get} from 'lodash/fp';\nimport {NovaCompositionNavigationArrowDown as ArrowDown} from '@coorpacademy/nova-icons';\nimport Select from '../../atom/select';\nimport Provider from '../../atom/provider';\nimport style from './style.css';\nimport FiltersWrapper from './filters-wrapper';\n\nclass Filters extends React.Component {\n  static propTypes = {\n    filterCTALabel: PropTypes.string,\n    filterTabLabel: PropTypes.string,\n    sortCTALabel: PropTypes.string,\n    sortTabLabel: PropTypes.string,\n    openFilters: PropTypes.bool,\n    openSorts: PropTypes.bool,\n    filters: FiltersWrapper.propTypes.filters,\n    sorting: PropTypes.shape(Select.propTypes),\n    onSearch: PropTypes.func,\n    onToggleFilters: PropTypes.func,\n    onToggleSorts: PropTypes.func,\n    moreSortAriaLabel: PropTypes.string,\n    moreFilterAriaLabel: PropTypes.string,\n    filterGroupAriaLabel: PropTypes.string,\n    sortAriaLabel: PropTypes.string\n  };\n\n  static contextTypes = {\n    skin: Provider.childContextTypes.skin\n  };\n\n  constructor(props) {\n    super(props);\n    this.state = {\n      filter: !!props.openFilters,\n      sorted: !!props.openSorts\n    };\n    this.handleOpenFilter = this.handleOpenFilter.bind(this);\n    this.handleOpenSort = this.handleOpenSort.bind(this);\n    this.handleSearch = this.handleSearch.bind(this);\n  }\n\n  handleOpenFilter() {\n    const {filter} = this.state;\n    const {onToggleFilters} = this.props;\n\n    const newValue = !filter;\n\n    this.setState({\n      filter: newValue,\n      sorted: false\n    });\n\n    if (onToggleFilters) {\n      onToggleFilters(newValue);\n    }\n  }\n\n  handleOpenSort() {\n    const {sorted} = this.state;\n    const {onToggleSorts} = this.props;\n\n    const newValue = !sorted;\n\n    this.setState({\n      sorted: newValue,\n      filter: false\n    });\n\n    if (onToggleSorts) onToggleSorts(newValue);\n  }\n\n  handleSearch() {\n    const {onSearch} = this.props;\n    this.setState({\n      sorted: false,\n      filter: false\n    });\n    if (onSearch) onSearch();\n  }\n\n  render() {\n    const {\n      sorting,\n      filterCTALabel,\n      filterTabLabel,\n      sortCTALabel,\n      sortTabLabel,\n      filters,\n      moreFilterAriaLabel,\n      moreSortAriaLabel,\n      filterGroupAriaLabel,\n      sortAriaLabel\n    } = this.props;\n    const {filter, sorted} = this.state;\n    const {skin} = this.context;\n\n    const defaultColor = get('common.primary', skin);\n    const darkColor = get('common.dark', skin);\n    const filtersActive = filter === true;\n    const sortingActive = sorted === true;\n\n    const sortView =\n      sorting !== undefined ? (\n        <div data-name=\"choice\" className={style.select}>\n          <Select {...sorting} aria-label={sortAriaLabel} />\n        </div>\n      ) : null;\n\n    return (\n      <div data-name=\"search\" className={style.search}>\n        <div\n          data-name=\"filter\"\n          data-open={filtersActive}\n          className={filtersActive ? style.activeDefault : style.default}\n        >\n          <div className={style.title} data-name=\"filterButton\" onClick={this.handleOpenFilter}>\n            {filterTabLabel}\n            <div className={style.arrow}>\n              <ArrowDown style={{color: darkColor}} height={14} aria-label={moreFilterAriaLabel} />\n            </div>\n          </div>\n        </div>\n        <div\n          data-name=\"sortBy\"\n          data-open={sortingActive}\n          className={sortingActive ? style.activeWrapperSortBy : style.wrapperSortBy}\n        >\n          <div className={style.title} data-name=\"sortButton\" onClick={this.handleOpenSort}>\n            {sortTabLabel}\n            <div className={style.arrow}>\n              <ArrowDown style={{color: darkColor}} height={14} aria-label={moreSortAriaLabel} />\n            </div>\n          </div>\n        </div>\n        <div\n          data-name=\"filterWrapper\"\n          className={filtersActive ? style.activeWrapperFilters : style.wrapperFilters}\n        >\n          <FiltersWrapper\n            className={style.wrapper}\n            filters={filters}\n            filterGroupAriaLabel={filterGroupAriaLabel}\n          />\n          <div\n            data-name=\"cta\"\n            className={style.CTAfilter}\n            style={{\n              backgroundColor: defaultColor\n            }}\n            onClick={this.handleSearch}\n          >\n            {filterCTALabel}\n          </div>\n        </div>\n        <div\n          data-name=\"sortWrapper\"\n          className={sortingActive ? style.activeSorting : style.sorting}\n        >\n          {sortView}\n          <div\n            data-name=\"cta\"\n            className={style.CTAfilter}\n            style={{\n              backgroundColor: defaultColor\n            }}\n            onClick={this.handleSearch}\n          >\n            {sortCTALabel}\n          </div>\n        </div>\n      </div>\n    );\n  }\n}\n\nexport default Filters;\n"],"mappings":"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"}

package/lib/molecule/review-header-steps/index.js

@@ -7,7 +7,7 @@ var _react = _interopRequireDefault(require("react"));
 
 var _map = _interopRequireDefault(require("lodash/fp/map"));
 
-var _reviewHeaderStepItem = _interopRequireDefault(require("../../atom/review-header-step-item"));
+var _statusItem = _interopRequireDefault(require("../../atom/status-item"));
 
 var _style = _interopRequireDefault(require("./style.css"));
 
@@ -24,7 +24,7 @@ const ReviewHeaderSteps = props => {
 
   const items = _map.default.convert({
     cap: false
-  })((step, index) => /*#__PURE__*/_react.default.createElement(_reviewHeaderStepItem.default, _extends({}, step, {
+  })((step, index) => /*#__PURE__*/_react.default.createElement(_statusItem.default, _extends({}, step, {
     key: index
   })), steps);
 

package/lib/molecule/review-header-steps/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ReviewHeaderSteps","props","steps","items","map","convert","cap","step","index","style","wrapper","propTypes"],"sources":["../../../src/molecule/review-header-steps/index.js"],"sourcesContent":["import React from 'react';\nimport map from 'lodash/fp/map';\nimport ReviewHeaderStepItem from '../../atom/review-header-step-item';\nimport style from './style.css';\nimport propTypes from './prop-types';\n\nconst ReviewHeaderSteps = props => {\n  const {steps} = props;\n\n  const items = map.convert({cap: false})(\n    (step, index) => <ReviewHeaderStepItem {...step} key={index} />,\n    steps\n  );\n\n  return (\n    <div className={style.wrapper} data-name=\"header-steps\">\n      {items}\n    </div>\n  );\n};\n\nReviewHeaderSteps.propTypes = propTypes;\n\nexport default ReviewHeaderSteps;\n"],"mappings":";;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;;;;;AAEA,MAAMA,iBAAiB,GAAGC,KAAK,IAAI;EACjC,MAAM;IAACC;EAAD,IAAUD,KAAhB;;EAEA,MAAME,KAAK,GAAGC,YAAA,CAAIC,OAAJ,CAAY;IAACC,GAAG,EAAE;EAAN,CAAZ,EACZ,CAACC,IAAD,EAAOC,KAAP,kBAAiB,6BAAC,6BAAD,eAA0BD,IAA1B;IAAgC,GAAG,EAAEC;EAArC,GADL,EAEZN,KAFY,CAAd;;EAKA,oBACE;IAAK,SAAS,EAAEO,cAAA,CAAMC,OAAtB;IAA+B,aAAU;EAAzC,GACGP,KADH,CADF;AAKD,CAbD;;AAeAH,iBAAiB,CAACW,SAAlB,2CAA8BA,kBAA9B;eAEeX,iB"}
+{"version":3,"file":"index.js","names":["ReviewHeaderSteps","props","steps","items","map","convert","cap","step","index","style","wrapper","propTypes"],"sources":["../../../src/molecule/review-header-steps/index.js"],"sourcesContent":["import React from 'react';\nimport map from 'lodash/fp/map';\nimport StatusItem from '../../atom/status-item';\nimport style from './style.css';\nimport propTypes from './prop-types';\n\nconst ReviewHeaderSteps = props => {\n  const {steps} = props;\n\n  const items = map.convert({cap: false})(\n    (step, index) => <StatusItem {...step} key={index} />,\n    steps\n  );\n\n  return (\n    <div className={style.wrapper} data-name=\"header-steps\">\n      {items}\n    </div>\n  );\n};\n\nReviewHeaderSteps.propTypes = propTypes;\n\nexport default ReviewHeaderSteps;\n"],"mappings":";;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;;;;;AAEA,MAAMA,iBAAiB,GAAGC,KAAK,IAAI;EACjC,MAAM;IAACC;EAAD,IAAUD,KAAhB;;EAEA,MAAME,KAAK,GAAGC,YAAA,CAAIC,OAAJ,CAAY;IAACC,GAAG,EAAE;EAAN,CAAZ,EACZ,CAACC,IAAD,EAAOC,KAAP,kBAAiB,6BAAC,mBAAD,eAAgBD,IAAhB;IAAsB,GAAG,EAAEC;EAA3B,GADL,EAEZN,KAFY,CAAd;;EAKA,oBACE;IAAK,SAAS,EAAEO,cAAA,CAAMC,OAAtB;IAA+B,aAAU;EAAzC,GACGP,KADH,CADF;AAKD,CAbD;;AAeAH,iBAAiB,CAACW,SAAlB,2CAA8BA,kBAA9B;eAEeX,iB"}

package/lib/molecule/review-header-steps/prop-types.d.ts

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import { HeaderStepItemProps } from '../../atom/review-header-step-item/types';
+import { StatusItemProps } from '../../atom/status-item/types';
 declare const propTypes: {
     steps: PropTypes.Requireable<(PropTypes.InferProps<{
         current: PropTypes.Requireable<boolean>;
@@ -9,6 +9,6 @@ declare const propTypes: {
 };
 export default propTypes;
 export declare type ReviewHeaderStepsProps = {
-    steps: HeaderStepItemProps[];
+    steps: StatusItemProps[];
 };
 //# sourceMappingURL=prop-types.d.ts.map

package/lib/molecule/review-header-steps/prop-types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"prop-types.d.ts","sourceRoot":"","sources":["../../../src/molecule/review-header-steps/prop-types.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,YAAY,CAAC;AAEnC,OAAsC,EACpC,mBAAmB,EACpB,MAAM,0CAA0C,CAAC;AAElD,QAAA,MAAM,SAAS;;;;;;CAEd,CAAC;AAEF,eAAe,SAAS,CAAC;AAEzB,oBAAY,sBAAsB,GAAG;IACnC,KAAK,EAAE,mBAAmB,EAAE,CAAC;CAC9B,CAAC"}
+{"version":3,"file":"prop-types.d.ts","sourceRoot":"","sources":["../../../src/molecule/review-header-steps/prop-types.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,YAAY,CAAC;AAEnC,OAAsC,EAAC,eAAe,EAAC,MAAM,8BAA8B,CAAC;AAE5F,QAAA,MAAM,SAAS;;;;;;CAEd,CAAC;AAEF,eAAe,SAAS,CAAC;AAEzB,oBAAY,sBAAsB,GAAG;IACnC,KAAK,EAAE,eAAe,EAAE,CAAC;CAC1B,CAAC"}

package/lib/molecule/review-header-steps/prop-types.js

@@ -5,7 +5,7 @@ exports.default = void 0;
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _types = _interopRequireDefault(require("../../atom/review-header-step-item/types"));
+var _types = _interopRequireDefault(require("../../atom/status-item/types"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 

package/lib/molecule/review-header-steps/prop-types.js.map

@@ -1 +1 @@
-{"version":3,"file":"prop-types.js","names":["propTypes","steps","PropTypes","arrayOf","shape","ReviewHeaderStepItemPropTypes"],"sources":["../../../src/molecule/review-header-steps/prop-types.ts"],"sourcesContent":["import PropTypes from 'prop-types';\n\nimport ReviewHeaderStepItemPropTypes, {\n  HeaderStepItemProps\n} from '../../atom/review-header-step-item/types';\n\nconst propTypes = {\n  steps: PropTypes.arrayOf(PropTypes.shape(ReviewHeaderStepItemPropTypes))\n};\n\nexport default propTypes;\n\nexport type ReviewHeaderStepsProps = {\n  steps: HeaderStepItemProps[];\n};\n"],"mappings":";;;;;AAAA;;AAEA;;;;AAIA,MAAMA,SAAS,GAAG;EAChBC,KAAK,EAAEC,kBAAA,CAAUC,OAAV,CAAkBD,kBAAA,CAAUE,KAAV,CAAgBC,cAAhB,CAAlB;AADS,CAAlB;eAIeL,S"}
+{"version":3,"file":"prop-types.js","names":["propTypes","steps","PropTypes","arrayOf","shape","ReviewHeaderStepItemPropTypes"],"sources":["../../../src/molecule/review-header-steps/prop-types.ts"],"sourcesContent":["import PropTypes from 'prop-types';\n\nimport ReviewHeaderStepItemPropTypes, {StatusItemProps} from '../../atom/status-item/types';\n\nconst propTypes = {\n  steps: PropTypes.arrayOf(PropTypes.shape(ReviewHeaderStepItemPropTypes))\n};\n\nexport default propTypes;\n\nexport type ReviewHeaderStepsProps = {\n  steps: StatusItemProps[];\n};\n"],"mappings":";;;;;AAAA;;AAEA;;;;AAEA,MAAMA,SAAS,GAAG;EAChBC,KAAK,EAAEC,kBAAA,CAAUC,OAAV,CAAkBD,kBAAA,CAAUE,KAAV,CAAgBC,cAAhB,CAAlB;AADS,CAAlB;eAIeL,S"}

package/lib/molecule/setup-section/index.d.ts

@@ -37,6 +37,8 @@ declare namespace SetupSection {
             disabled: PropTypes.Requireable<boolean>;
             onChange: PropTypes.Requireable<(...args: any[]) => any>;
             description: PropTypes.Requireable<string>;
+            'aria-labelledby': PropTypes.Requireable<string>;
+            'aria-label': PropTypes.Requireable<string>;
             modified: PropTypes.Requireable<boolean>;
             titlePosition: PropTypes.Requireable<string>;
             theme: PropTypes.Requireable<string>;

package/lib/molecule/setup-section/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/setup-section/index.js"],"names":[],"mappings":";AAsCA,qEAeC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA7CD,mFAiBC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/setup-section/index.js"],"names":[],"mappings":";AAsCA,qEAeC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA7CD,mFAiBC"}

package/lib/molecule/setup-sections/index.d.ts

@@ -18,6 +18,8 @@ declare namespace SetupSections {
                 disabled: PropTypes.Requireable<boolean>;
                 onChange: PropTypes.Requireable<(...args: any[]) => any>;
                 description: PropTypes.Requireable<string>;
+                'aria-labelledby': PropTypes.Requireable<string>;
+                'aria-label': PropTypes.Requireable<string>;
                 modified: PropTypes.Requireable<boolean>;
                 titlePosition: PropTypes.Requireable<string>;
                 theme: PropTypes.Requireable<string>;