@coorpacademy/components 11.18.7 → 11.18.8-alpha.12

package/lib/molecule/title-and-checkbox-wrapper/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["CHILD","InputTextWithTitle","DragAndDropWrapper","TitleAndCheckBoxWrapper","props","checkboxWithTitle","child","sectionTitle","Child","childType","style","propTypes","PropTypes","shape","CheckboxWithTitle","Title","oneOfType","oneOf"],"sources":["../../../src/molecule/title-and-checkbox-wrapper/index.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport InputTextWithTitle from '../../atom/input-text-with-title';\nimport CheckboxWithTitle from '../../atom/checkbox-with-title';\nimport Title from '../../atom/title';\nimport DragAndDropWrapper from '../drag-and-drop-wrapper';\nimport style from './style.css';\n\nconst CHILD = {\n  'input-text': InputTextWithTitle,\n  'drag-and-drop-wrapper': DragAndDropWrapper\n};\nconst TitleAndCheckBoxWrapper = props => {\n  const {checkboxWithTitle, child, sectionTitle} = props;\n\n  const Child = CHILD[child.childType];\n  return (\n    <div>\n      {checkboxWithTitle ? <CheckboxWithTitle {...checkboxWithTitle} /> : null}\n      {sectionTitle ? (\n        <div className={style.sectionTitle}>\n          <Title {...sectionTitle} type={'form-group'} />\n        </div>\n      ) : null}\n      <div className={checkboxWithTitle || sectionTitle ? style.child : null}>\n        <Child {...child} />\n      </div>\n    </div>\n  );\n};\n\nTitleAndCheckBoxWrapper.propTypes = {\n  checkboxWithTitle: PropTypes.shape(CheckboxWithTitle.propTypes),\n  sectionTitle: PropTypes.shape(Title.propTypes),\n  child: PropTypes.oneOfType([\n    PropTypes.shape({\n      ...InputTextWithTitle.propTypes,\n      childType: PropTypes.oneOf(['input-text'])\n    }),\n    PropTypes.shape({\n      ...DragAndDropWrapper.propTypes,\n      childType: PropTypes.oneOf(['drag-and-drop-wrapper'])\n    })\n  ])\n};\nexport default TitleAndCheckBoxWrapper;\n"],"mappings":";;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;AAEA,MAAMA,KAAK,GAAG;EACZ,cAAcC,2BADF;EAEZ,yBAAyBC;AAFb,CAAd;;AAIA,MAAMC,uBAAuB,GAAGC,KAAK,IAAI;EACvC,MAAM;IAACC,iBAAD;IAAoBC,KAApB;IAA2BC;EAA3B,IAA2CH,KAAjD;EAEA,MAAMI,KAAK,GAAGR,KAAK,CAACM,KAAK,CAACG,SAAP,CAAnB;EACA,oBACE,0CACGJ,iBAAiB,gBAAG,6BAAC,0BAAD,EAAuBA,iBAAvB,CAAH,GAAkD,IADtE,EAEGE,YAAY,gBACX;IAAK,SAAS,EAAEG,cAAA,CAAMH;EAAtB,gBACE,6BAAC,cAAD,eAAWA,YAAX;IAAyB,IAAI,EAAE;EAA/B,GADF,CADW,GAIT,IANN,eAOE;IAAK,SAAS,EAAEF,iBAAiB,IAAIE,YAArB,GAAoCG,cAAA,CAAMJ,KAA1C,GAAkD;EAAlE,gBACE,6BAAC,KAAD,EAAWA,KAAX,CADF,CAPF,CADF;AAaD,CAjBD;;AAmBAH,uBAAuB,CAACQ,SAAxB,2CAAoC;EAClCN,iBAAiB,EAAEO,kBAAA,CAAUC,KAAV,CAAgBC,0BAAA,CAAkBH,SAAlC,CADe;EAElCJ,YAAY,EAAEK,kBAAA,CAAUC,KAAV,CAAgBE,cAAA,CAAMJ,SAAtB,CAFoB;EAGlCL,KAAK,EAAEM,kBAAA,CAAUI,SAAV,CAAoB,CACzBJ,kBAAA,CAAUC,KAAV,cACKZ,2BAAA,CAAmBU,SADxB;IAEEF,SAAS,EAAEG,kBAAA,CAAUK,KAAV,CAAgB,CAAC,YAAD,CAAhB;EAFb,GADyB,EAKzBL,kBAAA,CAAUC,KAAV,cACKX,2BAAA,CAAmBS,SADxB;IAEEF,SAAS,EAAEG,kBAAA,CAAUK,KAAV,CAAgB,CAAC,uBAAD,CAAhB;EAFb,GALyB,CAApB;AAH2B,CAApC;eAced,uB"}
+{"version":3,"file":"index.js","names":["CHILD","InputTextWithTitle","DragAndDropWrapper","ImageUpload","SelectMultiple","TitleAndCheckBoxWrapper","props","checkboxWithTitle","child","sectionTitle","Child","childType","style","removeMargin","propTypes","PropTypes","shape","CheckboxWithTitle","Title","bool","oneOfType","oneOf"],"sources":["../../../src/molecule/title-and-checkbox-wrapper/index.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport {isUndefined} from 'lodash/fp';\nimport ImageUpload from '../../atom/image-upload';\nimport InputTextWithTitle from '../../atom/input-text-with-title';\nimport SelectMultiple from '../select-multiple';\nimport CheckboxWithTitle from '../../atom/checkbox-with-title';\nimport Title from '../../atom/title';\nimport DragAndDropWrapper from '../drag-and-drop-wrapper';\nimport style from './style.css';\n\nconst CHILD = {\n  'input-text': InputTextWithTitle,\n  'drag-and-drop-wrapper': DragAndDropWrapper,\n  'image-upload': ImageUpload,\n  'select-multiple': SelectMultiple\n};\nconst TitleAndCheckBoxWrapper = props => {\n  const {checkboxWithTitle, child, sectionTitle} = props;\n\n  const Child = CHILD[child.childType];\n  return (\n    <div>\n      {checkboxWithTitle ? <CheckboxWithTitle {...checkboxWithTitle} /> : null}\n      {sectionTitle ? (\n        <div className={style.sectionTitle}>\n          <Title {...sectionTitle} type={'form-group'} />\n        </div>\n      ) : null}\n      <div\n        className={\n          checkboxWithTitle || (sectionTitle && isUndefined(sectionTitle.removeMargin))\n            ? style.child\n            : null\n        }\n      >\n        <Child {...child} />\n      </div>\n    </div>\n  );\n};\n\nTitleAndCheckBoxWrapper.propTypes = {\n  checkboxWithTitle: PropTypes.shape(CheckboxWithTitle.propTypes),\n  sectionTitle: PropTypes.shape({...Title.propTypes, removeMargin: PropTypes.bool}),\n  child: PropTypes.oneOfType([\n    PropTypes.shape({\n      ...InputTextWithTitle.propTypes,\n      childType: PropTypes.oneOf(['input-text'])\n    }),\n    PropTypes.shape({\n      ...DragAndDropWrapper.propTypes,\n      childType: PropTypes.oneOf(['drag-and-drop-wrapper'])\n    }),\n    PropTypes.shape({\n      ...ImageUpload.propTypes,\n      childType: PropTypes.oneOf(['image-upload'])\n    }),\n    PropTypes.shape({\n      ...SelectMultiple.propTypes,\n      childType: PropTypes.oneOf(['select-multiple'])\n    })\n  ])\n};\nexport default TitleAndCheckBoxWrapper;\n"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;AAEA,MAAMA,KAAK,GAAG;EACZ,cAAcC,2BADF;EAEZ,yBAAyBC,2BAFb;EAGZ,gBAAgBC,oBAHJ;EAIZ,mBAAmBC;AAJP,CAAd;;AAMA,MAAMC,uBAAuB,GAAGC,KAAK,IAAI;EACvC,MAAM;IAACC,iBAAD;IAAoBC,KAApB;IAA2BC;EAA3B,IAA2CH,KAAjD;EAEA,MAAMI,KAAK,GAAGV,KAAK,CAACQ,KAAK,CAACG,SAAP,CAAnB;EACA,oBACE,0CACGJ,iBAAiB,gBAAG,6BAAC,0BAAD,EAAuBA,iBAAvB,CAAH,GAAkD,IADtE,EAEGE,YAAY,gBACX;IAAK,SAAS,EAAEG,cAAA,CAAMH;EAAtB,gBACE,6BAAC,cAAD,eAAWA,YAAX;IAAyB,IAAI,EAAE;EAA/B,GADF,CADW,GAIT,IANN,eAOE;IACE,SAAS,EACPF,iBAAiB,IAAKE,YAAY,IAAI,2BAAYA,YAAY,CAACI,YAAzB,CAAtC,GACID,cAAA,CAAMJ,KADV,GAEI;EAJR,gBAOE,6BAAC,KAAD,EAAWA,KAAX,CAPF,CAPF,CADF;AAmBD,CAvBD;;AAyBAH,uBAAuB,CAACS,SAAxB,2CAAoC;EAClCP,iBAAiB,EAAEQ,kBAAA,CAAUC,KAAV,CAAgBC,0BAAA,CAAkBH,SAAlC,CADe;EAElCL,YAAY,EAAEM,kBAAA,CAAUC,KAAV,cAAoBE,cAAA,CAAMJ,SAA1B;IAAqCD,YAAY,EAAEE,kBAAA,CAAUI;EAA7D,GAFoB;EAGlCX,KAAK,EAAEO,kBAAA,CAAUK,SAAV,CAAoB,CACzBL,kBAAA,CAAUC,KAAV,cACKf,2BAAA,CAAmBa,SADxB;IAEEH,SAAS,EAAEI,kBAAA,CAAUM,KAAV,CAAgB,CAAC,YAAD,CAAhB;EAFb,GADyB,EAKzBN,kBAAA,CAAUC,KAAV,cACKd,2BAAA,CAAmBY,SADxB;IAEEH,SAAS,EAAEI,kBAAA,CAAUM,KAAV,CAAgB,CAAC,uBAAD,CAAhB;EAFb,GALyB,EASzBN,kBAAA,CAAUC,KAAV,cACKb,oBAAA,CAAYW,SADjB;IAEEH,SAAS,EAAEI,kBAAA,CAAUM,KAAV,CAAgB,CAAC,cAAD,CAAhB;EAFb,GATyB,EAazBN,kBAAA,CAAUC,KAAV,cACKZ,uBAAA,CAAeU,SADpB;IAEEH,SAAS,EAAEI,kBAAA,CAAUM,KAAV,CAAgB,CAAC,iBAAD,CAAhB;EAFb,GAbyB,CAApB;AAH2B,CAApC;eAsBehB,uB"}

package/lib/organism/list-item/index.d.ts

@@ -1,18 +1,24 @@
 export default ListItem;
-declare function ListItem(props: any): JSX.Element;
+declare function ListItem({ buttonLink, buttonLinkIcon, bulletPointMenuButton, tags, title, dataColumns, order, "aria-label": ariaLabel, contentType, isBulkStyle }: {
+    buttonLink: any;
+    buttonLinkIcon: any;
+    bulletPointMenuButton: any;
+    tags: any;
+    title: any;
+    dataColumns: any;
+    order: any;
+    "aria-label": any;
+    contentType: any;
+    isBulkStyle?: boolean | undefined;
+}): JSX.Element;
 declare namespace ListItem {
     const propTypes: {
-        bulletPointMenuButton: PropTypes.Requireable<PropTypes.InferProps<{
-            buttonAriaLabel: PropTypes.Requireable<string>;
-            menuAriaLabel: PropTypes.Requireable<string>;
-            buttons: PropTypes.Requireable<(PropTypes.InferProps<{
-                'data-name': PropTypes.Requireable<string>;
-                label: PropTypes.Requireable<string>;
-                type: PropTypes.Requireable<string>;
-                onClick: PropTypes.Requireable<(...args: any[]) => any>;
-            }> | null | undefined)[]>;
-            onClick: PropTypes.Requireable<(...args: any[]) => any>;
-        }>>;
+        title: PropTypes.Validator<string>;
+        dataColumns: PropTypes.Requireable<(PropTypes.InferProps<{
+            label: PropTypes.Requireable<string>;
+            type: PropTypes.Requireable<string>;
+            className: PropTypes.Requireable<string>;
+        }> | null | undefined)[]>;
         buttonLink: PropTypes.Requireable<PropTypes.InferProps<{
             type: PropTypes.Requireable<string>;
             label: PropTypes.Requireable<string>;
@@ -24,11 +30,36 @@ declare namespace ListItem {
             }>>;
             onClick: PropTypes.Requireable<(...args: any[]) => any>;
         }>>;
+        buttonLinkIcon: PropTypes.Requireable<PropTypes.InferProps<{
+            size: PropTypes.Requireable<string>;
+            'aria-label': PropTypes.Requireable<string>;
+            'data-name': PropTypes.Requireable<string>;
+            icon: PropTypes.Requireable<string>;
+            onClick: PropTypes.Requireable<(...args: any[]) => any>;
+            link: PropTypes.Requireable<PropTypes.InferProps<{
+                href: PropTypes.Requireable<string>;
+                download: PropTypes.Requireable<boolean>;
+                target: PropTypes.Requireable<string>;
+            }>>;
+            disabled: PropTypes.Requireable<boolean>;
+            className: PropTypes.Requireable<string>;
+        }>>;
+        bulletPointMenuButton: PropTypes.Requireable<PropTypes.InferProps<{
+            buttonAriaLabel: PropTypes.Requireable<string>;
+            menuAriaLabel: PropTypes.Requireable<string>;
+            buttons: PropTypes.Requireable<(PropTypes.InferProps<{
+                'data-name': PropTypes.Requireable<string>;
+                label: PropTypes.Requireable<string>;
+                type: PropTypes.Requireable<string>;
+                onClick: PropTypes.Requireable<(...args: any[]) => any>;
+            }> | null | undefined)[]>;
+            onClick: PropTypes.Requireable<(...args: any[]) => any>;
+        }>>;
         tags: PropTypes.Requireable<(PropTypes.InferProps<{
             label: PropTypes.Requireable<string>;
             type: PropTypes.Requireable<string>;
         }> | null | undefined)[]>;
-        title: PropTypes.Validator<string>;
+        isBulkStyle: PropTypes.Requireable<boolean>;
         order: PropTypes.Requireable<number>;
         'aria-label': PropTypes.Requireable<string>;
         contentType: PropTypes.Requireable<string>;

package/lib/organism/list-item/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/organism/list-item/index.js"],"names":[],"mappings":";AAQA,mDA8CC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/organism/list-item/index.js"],"names":[],"mappings":";AAWA;;;;;;;;;;;gBAgEC"}

package/lib/organism/list-item/index.js

@@ -9,70 +9,81 @@ var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _classnames = _interopRequireDefault(require("classnames"));
+
 var _tag = _interopRequireDefault(require("../../atom/tag"));
 
 var _buttonLink = _interopRequireDefault(require("../../atom/button-link"));
 
+var _buttonLinkIconOnly = _interopRequireDefault(require("../../atom/button-link-icon-only"));
+
 var _bulletPointMenuButton = _interopRequireDefault(require("../../molecule/bullet-point-menu-button"));
 
 var _style = _interopRequireDefault(require("./style.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-const ListItem = props => {
+// eslint-disable-next-line css-modules/no-unused-class
+const ListItem = ({
+  buttonLink,
+  buttonLinkIcon,
+  bulletPointMenuButton,
+  tags,
+  title,
+  dataColumns,
+  order,
+  'aria-label': ariaLabel,
+  contentType,
+  isBulkStyle = false
+}) => {
   let isPublished = false;
-  const {
-    bulletPointMenuButton,
-    buttonLink,
-    tags,
-    title,
-    order,
-    'aria-label': ariaLabel,
-    contentType
-  } = props;
 
   const tagsView = _map2.default.convert({
     cap: false
   })((tag, index) => {
-    isPublished = tag.type === 'published';
+    isPublished = tag.type === 'success';
     return /*#__PURE__*/_react.default.createElement("div", {
       key: index,
       className: _style.default.tag
     }, /*#__PURE__*/_react.default.createElement(_tag.default, tag));
   })(tags);
 
-  return /*#__PURE__*/_react.default.createElement("div", {
-    className: _style.default.wrapper
-  }, isPublished && contentType === 'certification' ? /*#__PURE__*/_react.default.createElement("div", {
-    className: _style.default.orderWrapper
-  }, order !== null && order !== undefined ? /*#__PURE__*/_react.default.createElement("div", {
+  const dataColumnsView = _map2.default.convert({
+    cap: false
+  })((dataColumn, index) => {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      key: index,
+      className: _style.default[dataColumn.className]
+    }, dataColumn.type ? /*#__PURE__*/_react.default.createElement(_tag.default, dataColumn) : dataColumn.label);
+  })(dataColumns);
+
+  const orderView = order !== null && order !== undefined ? /*#__PURE__*/_react.default.createElement("div", {
     className: _style.default.order,
     "aria-label": ariaLabel
-  }, order + 1) : null, /*#__PURE__*/_react.default.createElement("div", {
-    className: _style.default.title,
-    title: title
-  }, title)) : /*#__PURE__*/_react.default.createElement("div", {
+  }, order + 1) : null;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _classnames.default)(_style.default.wrapper, isBulkStyle && _style.default.gridLayout)
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.dataColumnsWrapper
+  }, isPublished && contentType === 'certification' ? orderView : null, /*#__PURE__*/_react.default.createElement("div", {
     className: _style.default.title,
     title: title
-  }, title), /*#__PURE__*/_react.default.createElement("div", {
+  }, title), dataColumnsView), /*#__PURE__*/_react.default.createElement("div", {
     className: _style.default.settings
-  }, tagsView, /*#__PURE__*/_react.default.createElement("div", {
-    className: _style.default.edit
-  }, /*#__PURE__*/_react.default.createElement(_buttonLink.default, buttonLink)), /*#__PURE__*/_react.default.createElement(_bulletPointMenuButton.default, bulletPointMenuButton)));
+  }, tagsView, buttonLink ? /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.buttonLink
+  }, /*#__PURE__*/_react.default.createElement(_buttonLink.default, buttonLink)) : null, buttonLinkIcon ? /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.buttonLink
+  }, /*#__PURE__*/_react.default.createElement(_buttonLinkIconOnly.default, buttonLinkIcon)) : null, /*#__PURE__*/_react.default.createElement(_bulletPointMenuButton.default, bulletPointMenuButton)));
 };
 
 ListItem.propTypes = process.env.NODE_ENV !== "production" ? {
-  bulletPointMenuButton: _propTypes.default.shape({
-    buttonAriaLabel: _propTypes.default.string,
-    menuAriaLabel: _propTypes.default.string,
-    buttons: _propTypes.default.arrayOf(_propTypes.default.shape({
-      'data-name': _propTypes.default.string,
-      label: _propTypes.default.string,
-      type: _propTypes.default.string,
-      onClick: _propTypes.default.func
-    })),
-    onClick: _propTypes.default.func
-  }),
+  title: _propTypes.default.string.isRequired,
+  dataColumns: _propTypes.default.arrayOf(_propTypes.default.shape({
+    label: _propTypes.default.string,
+    type: _propTypes.default.oneOf(['success', 'failure', 'warning', 'progress', 'default']),
+    className: _propTypes.default.oneOf(['cell', 'title'])
+  })),
   buttonLink: _propTypes.default.shape({
     type: _propTypes.default.string,
     label: _propTypes.default.string,
@@ -84,11 +95,36 @@ ListItem.propTypes = process.env.NODE_ENV !== "production" ? {
     }),
     onClick: _propTypes.default.func
   }),
+  buttonLinkIcon: _propTypes.default.shape({
+    size: _propTypes.default.oneOf(['default', 'small', 'responsive']),
+    'aria-label': _propTypes.default.string,
+    'data-name': _propTypes.default.string,
+    icon: _propTypes.default.string,
+    onClick: _propTypes.default.func,
+    link: _propTypes.default.shape({
+      href: _propTypes.default.string,
+      download: _propTypes.default.bool,
+      target: _propTypes.default.oneOf(['_self', '_blank', '_parent', '_top'])
+    }),
+    disabled: _propTypes.default.bool,
+    className: _propTypes.default.string
+  }),
+  bulletPointMenuButton: _propTypes.default.shape({
+    buttonAriaLabel: _propTypes.default.string,
+    menuAriaLabel: _propTypes.default.string,
+    buttons: _propTypes.default.arrayOf(_propTypes.default.shape({
+      'data-name': _propTypes.default.string,
+      label: _propTypes.default.string,
+      type: _propTypes.default.string,
+      onClick: _propTypes.default.func
+    })),
+    onClick: _propTypes.default.func
+  }),
   tags: _propTypes.default.arrayOf(_propTypes.default.shape({
     label: _propTypes.default.string,
-    type: _propTypes.default.oneOf(['published', 'draft', 'archived', 'revised', 'default'])
+    type: _propTypes.default.oneOf(['success', 'failure', 'warning', 'progress', 'default'])
   })),
-  title: _propTypes.default.string.isRequired,
+  isBulkStyle: _propTypes.default.bool,
   order: _propTypes.default.number,
   'aria-label': _propTypes.default.string,
   contentType: _propTypes.default.string,

package/lib/organism/list-item/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ListItem","props","isPublished","bulletPointMenuButton","buttonLink","tags","title","order","ariaLabel","contentType","tagsView","convert","cap","tag","index","type","style","wrapper","orderWrapper","undefined","settings","edit","propTypes","PropTypes","shape","buttonAriaLabel","string","menuAriaLabel","buttons","arrayOf","label","onClick","func","dataName","icon","position","oneOf","isRequired","number","id"],"sources":["../../../src/organism/list-item/index.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport {map} from 'lodash/fp';\nimport Tag from '../../atom/tag';\nimport ButtonLink from '../../atom/button-link';\nimport BulletPointMenuButton from '../../molecule/bullet-point-menu-button';\nimport style from './style.css';\n\nconst ListItem = props => {\n  let isPublished = false;\n  const {\n    bulletPointMenuButton,\n    buttonLink,\n    tags,\n    title,\n    order,\n    'aria-label': ariaLabel,\n    contentType\n  } = props;\n  const tagsView = map.convert({cap: false})((tag, index) => {\n    isPublished = tag.type === 'published';\n    return (\n      <div key={index} className={style.tag}>\n        <Tag {...tag} />\n      </div>\n    );\n  })(tags);\n  return (\n    <div className={style.wrapper}>\n      {isPublished && contentType === 'certification' ? (\n        <div className={style.orderWrapper}>\n          {order !== null && order !== undefined ? (\n            <div className={style.order} aria-label={ariaLabel}>\n              {order + 1}\n            </div>\n          ) : null}\n          <div className={style.title} title={title}>\n            {title}\n          </div>\n        </div>\n      ) : (\n        <div className={style.title} title={title}>\n          {title}\n        </div>\n      )}\n      <div className={style.settings}>\n        {tagsView}\n        <div className={style.edit}>\n          <ButtonLink {...buttonLink} />\n        </div>\n        <BulletPointMenuButton {...bulletPointMenuButton} />\n      </div>\n    </div>\n  );\n};\n\nListItem.propTypes = {\n  bulletPointMenuButton: PropTypes.shape({\n    buttonAriaLabel: PropTypes.string,\n    menuAriaLabel: PropTypes.string,\n    buttons: PropTypes.arrayOf(\n      PropTypes.shape({\n        'data-name': PropTypes.string,\n        label: PropTypes.string,\n        type: PropTypes.string,\n        onClick: PropTypes.func\n      })\n    ),\n    onClick: PropTypes.func\n  }),\n  buttonLink: PropTypes.shape({\n    type: PropTypes.string,\n    label: PropTypes.string,\n    ariaLabel: PropTypes.string,\n    dataName: PropTypes.string,\n    icon: PropTypes.shape({\n      position: PropTypes.string,\n      type: PropTypes.string\n    }),\n    onClick: PropTypes.func\n  }),\n  tags: PropTypes.arrayOf(\n    PropTypes.shape({\n      label: PropTypes.string,\n      type: PropTypes.oneOf(['published', 'draft', 'archived', 'revised', 'default'])\n    })\n  ),\n  title: PropTypes.string.isRequired,\n  order: PropTypes.number,\n  'aria-label': PropTypes.string,\n  contentType: PropTypes.string,\n  id: PropTypes.string\n};\n\nexport default ListItem;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["ListItem","buttonLink","buttonLinkIcon","bulletPointMenuButton","tags","title","dataColumns","order","ariaLabel","contentType","isBulkStyle","isPublished","tagsView","convert","cap","tag","index","type","style","dataColumnsView","dataColumn","className","label","orderView","undefined","classnames","wrapper","gridLayout","dataColumnsWrapper","settings","propTypes","PropTypes","string","isRequired","arrayOf","shape","oneOf","dataName","icon","position","onClick","func","size","link","href","download","bool","target","disabled","buttonAriaLabel","menuAriaLabel","buttons","number","id"],"sources":["../../../src/organism/list-item/index.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport {map} from 'lodash/fp';\nimport classnames from 'classnames';\nimport Tag from '../../atom/tag';\nimport ButtonLink from '../../atom/button-link';\nimport ButtonLinkIconOnly from '../../atom/button-link-icon-only';\nimport BulletPointMenuButton from '../../molecule/bullet-point-menu-button';\n// eslint-disable-next-line css-modules/no-unused-class\nimport style from './style.css';\n\nconst ListItem = ({\n  buttonLink,\n  buttonLinkIcon,\n  bulletPointMenuButton,\n  tags,\n  title,\n  dataColumns,\n  order,\n  'aria-label': ariaLabel,\n  contentType,\n  isBulkStyle = false\n}) => {\n  let isPublished = false;\n\n  const tagsView = map.convert({cap: false})((tag, index) => {\n    isPublished = tag.type === 'success';\n    return (\n      <div key={index} className={style.tag}>\n        <Tag {...tag} />\n      </div>\n    );\n  })(tags);\n\n  const dataColumnsView = map.convert({cap: false})((dataColumn, index) => {\n    return (\n      <div key={index} className={style[dataColumn.className]}>\n        {dataColumn.type ? <Tag {...dataColumn} /> : dataColumn.label}\n      </div>\n    );\n  })(dataColumns);\n\n  const orderView =\n    order !== null && order !== undefined ? (\n      <div className={style.order} aria-label={ariaLabel}>\n        {order + 1}\n      </div>\n    ) : null;\n\n  return (\n    <div className={classnames(style.wrapper, isBulkStyle && style.gridLayout)}>\n      <div className={style.dataColumnsWrapper}>\n        {isPublished && contentType === 'certification' ? orderView : null}\n        <div className={style.title} title={title}>\n          {title}\n        </div>\n        {dataColumnsView}\n      </div>\n\n      <div className={style.settings}>\n        {tagsView}\n        {buttonLink ? (\n          <div className={style.buttonLink}>\n            <ButtonLink {...buttonLink} />\n          </div>\n        ) : null}\n        {buttonLinkIcon ? (\n          <div className={style.buttonLink}>\n            <ButtonLinkIconOnly {...buttonLinkIcon} />\n          </div>\n        ) : null}\n        <BulletPointMenuButton {...bulletPointMenuButton} />\n      </div>\n    </div>\n  );\n};\n\nListItem.propTypes = {\n  title: PropTypes.string.isRequired,\n  dataColumns: PropTypes.arrayOf(\n    PropTypes.shape({\n      label: PropTypes.string,\n      type: PropTypes.oneOf(['success', 'failure', 'warning', 'progress', 'default']),\n      className: PropTypes.oneOf(['cell', 'title'])\n    })\n  ),\n  buttonLink: PropTypes.shape({\n    type: PropTypes.string,\n    label: PropTypes.string,\n    ariaLabel: PropTypes.string,\n    dataName: PropTypes.string,\n    icon: PropTypes.shape({\n      position: PropTypes.string,\n      type: PropTypes.string\n    }),\n    onClick: PropTypes.func\n  }),\n  buttonLinkIcon: PropTypes.shape({\n    size: PropTypes.oneOf(['default', 'small', 'responsive']),\n    'aria-label': PropTypes.string,\n    'data-name': PropTypes.string,\n    icon: PropTypes.string,\n    onClick: PropTypes.func,\n    link: PropTypes.shape({\n      href: PropTypes.string,\n      download: PropTypes.bool,\n      target: PropTypes.oneOf(['_self', '_blank', '_parent', '_top'])\n    }),\n    disabled: PropTypes.bool,\n    className: PropTypes.string\n  }),\n  bulletPointMenuButton: PropTypes.shape({\n    buttonAriaLabel: PropTypes.string,\n    menuAriaLabel: PropTypes.string,\n    buttons: PropTypes.arrayOf(\n      PropTypes.shape({\n        'data-name': PropTypes.string,\n        label: PropTypes.string,\n        type: PropTypes.string,\n        onClick: PropTypes.func\n      })\n    ),\n    onClick: PropTypes.func\n  }),\n  tags: PropTypes.arrayOf(\n    PropTypes.shape({\n      label: PropTypes.string,\n      type: PropTypes.oneOf(['success', 'failure', 'warning', 'progress', 'default'])\n    })\n  ),\n  isBulkStyle: PropTypes.bool,\n  order: PropTypes.number,\n  'aria-label': PropTypes.string,\n  contentType: PropTypes.string,\n  id: PropTypes.string\n};\n\nexport default ListItem;\n"],"mappings":"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"}

package/lib/organism/list-item/style.css

@@ -5,6 +5,7 @@
 @value cm_grey_900 from colors;
 @value primaryAdd1 from colors;
 @value cm_grey_400 from colors;
+@value cm_grey_500 from colors;
 
 .wrapper {
   align-items: center;
@@ -16,11 +17,22 @@
   justify-content: space-between;
   padding: 0 24px;
   width: 100%;
+  gap: 24px;
+}
+
+.gridLayout {
+  display: grid;
+  grid-template-columns: 70% auto; 
 }
 
 .title {
   color: cm_grey_900;
   flex-grow: 0;
+  display: flex;
+  height: 56px;
+  align-items: center;
+  gap: 16px;
+  flex: 1 0 0;
   font-family: Gilroy;
   font-size: 16px;
   font-stretch: normal;
@@ -28,12 +40,10 @@
   font-weight: bold;
   line-height: 1.38;
   letter-spacing: normal;
-  margin-right: 24px;
   overflow: hidden;
   text-align: left;
   text-overflow: ellipsis;
   white-space: nowrap;
-
 }
 
 .settings {
@@ -47,10 +57,23 @@
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+.cell {
+  display: flex;
+  height: 56px;
+  align-items: center;
+  gap: 16px;
+  flex: 1 0 0;
+  color: cm_grey_500;
+  font-family: Gilroy;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 20px;
+  white-space: nowrap;
+}
 
-.edit {
+.buttonLink {
   margin: 0 16px 0 0;
-  min-width: 93px;
 }
 
 .order {
@@ -65,7 +88,7 @@
   margin: 0 16px 0 0;
 }
 
-.orderWrapper {
+.dataColumnsWrapper {
   align-items: center;
   display: flex;
   width: 100%;

package/lib/organism/list-items/index.d.ts

@@ -49,17 +49,12 @@ declare namespace ListItems {
         }>>;
         content: PropTypes.Requireable<NonNullable<PropTypes.InferProps<{
             items: PropTypes.Requireable<(PropTypes.InferProps<{
-                bulletPointMenuButton: PropTypes.Requireable<PropTypes.InferProps<{
-                    buttonAriaLabel: PropTypes.Requireable<string>;
-                    menuAriaLabel: PropTypes.Requireable<string>;
-                    buttons: PropTypes.Requireable<(PropTypes.InferProps<{
-                        'data-name': PropTypes.Requireable<string>;
-                        label: PropTypes.Requireable<string>;
-                        type: PropTypes.Requireable<string>;
-                        onClick: PropTypes.Requireable<(...args: any[]) => any>;
-                    }> | null | undefined)[]>;
-                    onClick: PropTypes.Requireable<(...args: any[]) => any>;
-                }>>;
+                title: PropTypes.Validator<string>;
+                dataColumns: PropTypes.Requireable<(PropTypes.InferProps<{
+                    label: PropTypes.Requireable<string>;
+                    type: PropTypes.Requireable<string>;
+                    className: PropTypes.Requireable<string>;
+                }> | null | undefined)[]>;
                 buttonLink: PropTypes.Requireable<PropTypes.InferProps<{
                     type: PropTypes.Requireable<string>;
                     label: PropTypes.Requireable<string>;
@@ -71,11 +66,36 @@ declare namespace ListItems {
                     }>>;
                     onClick: PropTypes.Requireable<(...args: any[]) => any>;
                 }>>;
+                buttonLinkIcon: PropTypes.Requireable<PropTypes.InferProps<{
+                    size: PropTypes.Requireable<string>;
+                    'aria-label': PropTypes.Requireable<string>;
+                    'data-name': PropTypes.Requireable<string>;
+                    icon: PropTypes.Requireable<string>;
+                    onClick: PropTypes.Requireable<(...args: any[]) => any>;
+                    link: PropTypes.Requireable<PropTypes.InferProps<{
+                        href: PropTypes.Requireable<string>;
+                        download: PropTypes.Requireable<boolean>;
+                        target: PropTypes.Requireable<string>;
+                    }>>;
+                    disabled: PropTypes.Requireable<boolean>;
+                    className: PropTypes.Requireable<string>;
+                }>>;
+                bulletPointMenuButton: PropTypes.Requireable<PropTypes.InferProps<{
+                    buttonAriaLabel: PropTypes.Requireable<string>;
+                    menuAriaLabel: PropTypes.Requireable<string>;
+                    buttons: PropTypes.Requireable<(PropTypes.InferProps<{
+                        'data-name': PropTypes.Requireable<string>;
+                        label: PropTypes.Requireable<string>;
+                        type: PropTypes.Requireable<string>;
+                        onClick: PropTypes.Requireable<(...args: any[]) => any>;
+                    }> | null | undefined)[]>;
+                    onClick: PropTypes.Requireable<(...args: any[]) => any>;
+                }>>;
                 tags: PropTypes.Requireable<(PropTypes.InferProps<{
                     label: PropTypes.Requireable<string>;
                     type: PropTypes.Requireable<string>;
                 }> | null | undefined)[]>;
-                title: PropTypes.Validator<string>;
+                isBulkStyle: PropTypes.Requireable<boolean>;
                 order: PropTypes.Requireable<number>;
                 'aria-label': PropTypes.Requireable<string>;
                 contentType: PropTypes.Requireable<string>;
@@ -85,6 +105,7 @@ declare namespace ListItems {
             itemType: PropTypes.Requireable<string>;
             onDrop: PropTypes.Requireable<(...args: any[]) => any>;
             isDraggable: PropTypes.Requireable<boolean>;
+            tableHeader: PropTypes.Requireable<(string | null | undefined)[]>;
         }> | PropTypes.InferProps<{
             type: PropTypes.Requireable<string>;
             columns: PropTypes.Requireable<(PropTypes.InferProps<{
@@ -94,6 +115,7 @@ declare namespace ListItems {
                 fields: PropTypes.Requireable<(NonNullable<string | PropTypes.InferProps<{
                     type: PropTypes.Requireable<string>;
                     current: PropTypes.Requireable<boolean>;
+                    selected: PropTypes.Requireable<boolean>;
                     icon: PropTypes.Requireable<string>;
                     value: PropTypes.Requireable<string>;
                 }> | null | undefined> | null | undefined)[]>;
@@ -156,6 +178,8 @@ declare namespace ListItems {
                 isBulkMenu: PropTypes.Requireable<boolean>;
             }> | null | undefined>>;
             isNestedTable: PropTypes.Requireable<boolean>;
+            emptyStateFirstMessage: PropTypes.Requireable<string>;
+            emptyStateSecondMessage: PropTypes.Requireable<string>;
         }> | null | undefined>>;
         title: PropTypes.Requireable<string>;
     };

package/lib/organism/list-items/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/organism/list-items/index.js"],"names":[],"mappings":";AA8CA;;;;;;gBAwBC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/organism/list-items/index.js"],"names":[],"mappings":";AAoEA;;;;;;gBAwBC"}

package/lib/organism/list-items/index.js

@@ -7,6 +7,10 @@ var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _isNil = _interopRequireDefault(require("lodash/fp/isNil"));
+
+var _isEmpty = _interopRequireDefault(require("lodash/fp/isEmpty"));
+
 var _listItem = _interopRequireDefault(require("../list-item"));
 
 var _draggableList = _interopRequireDefault(require("../../molecule/draggable-list"));
@@ -30,7 +34,8 @@ const buildListItemsView = (content, ariaLabel, selectMultiple) => {
     items,
     itemType,
     onDrop,
-    isDraggable = false
+    isDraggable = false,
+    tableHeader
   } = content;
   const itemsView = isDraggable && items.length > 1 ? /*#__PURE__*/_react.default.createElement(_draggableList.default, {
     items: items.map(item => _extends({}, item, {
@@ -46,11 +51,22 @@ const buildListItemsView = (content, ariaLabel, selectMultiple) => {
     order: null,
     contentType: itemType
   }))));
-  return /*#__PURE__*/_react.default.createElement("ul", {
+  const tableHeaderView = !(0, _isNil.default)(tableHeader) && !(0, _isEmpty.default)(tableHeader) ? /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.tableHeaderWrapper
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.dataColumnsWrapper
+  }, tableHeader.map((tableHeaderItem, index) => /*#__PURE__*/_react.default.createElement("div", {
+    key: `tableHeadeColumn-key-${index}`,
+    className: _style.default.tableHeaderItem,
+    "data-name": `tableHeader-${index}`
+  }, tableHeaderItem))), /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.settings
+  }, '')) : null;
+  return /*#__PURE__*/_react.default.createElement("div", null, tableHeaderView, /*#__PURE__*/_react.default.createElement("ul", {
     className: !selectMultiple ? _style.default.list : _style.default.listWithSelectMultiple,
     "aria-label": ariaLabel,
     "data-name": 'content-list'
-  }, itemsView);
+  }, itemsView));
 };
 
 const buildContentView = (content, ariaLabel, selectMultiple) => {
@@ -101,7 +117,8 @@ ListItems.propTypes = process.env.NODE_ENV !== "production" ? {
     type: _propTypes.default.oneOf(['list']),
     itemType: _propTypes.default.string,
     onDrop: _propTypes.default.func,
-    isDraggable: _propTypes.default.bool
+    isDraggable: _propTypes.default.bool,
+    tableHeader: _propTypes.default.arrayOf(_propTypes.default.string)
   }), _propTypes.default.shape(_extends({}, _expandibleActionableTable.default.propTypes, {
     type: _propTypes.default.oneOf(['expandible-actionable-table'])
   }))]),

package/lib/organism/list-items/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["buildListItemsView","content","ariaLabel","selectMultiple","items","itemType","onDrop","isDraggable","itemsView","length","map","item","contentType","index","id","style","list","listWithSelectMultiple","buildContentView","type","ListItems","title","buttonLink","contentView","header","actionsWrapper","buttonCreate","propTypes","PropTypes","string","shape","ButtonLink","SelectMultiple","oneOfType","arrayOf","ListItem","oneOf","func","bool","ExpandibleActionableTable"],"sources":["../../../src/organism/list-items/index.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport ListItem from '../list-item';\nimport DraggableList from '../../molecule/draggable-list';\nimport Title from '../../atom/title';\nimport ButtonLink from '../../atom/button-link';\nimport SelectMultiple from '../../molecule/select-multiple';\nimport ExpandibleActionableTable from '../../molecule/expandible-actionable-table';\nimport style from './style.css';\n\nconst buildListItemsView = (content, ariaLabel, selectMultiple) => {\n  const {items, itemType, onDrop, isDraggable = false} = content;\n  const itemsView =\n    isDraggable && items.length > 1 ? (\n      <DraggableList\n        items={items.map(item => ({...item, contentType: itemType}))}\n        itemType=\"list-item\"\n        onDrop={onDrop}\n      />\n    ) : (\n      items.map((item, index) => (\n        <li key={item.id} className={style.item} data-name={`content-${index}`}>\n          <ListItem {...item} order={null} contentType={itemType} />\n        </li>\n      ))\n    );\n  return (\n    <ul\n      className={!selectMultiple ? style.list : style.listWithSelectMultiple}\n      aria-label={ariaLabel}\n      data-name={'content-list'}\n    >\n      {itemsView}\n    </ul>\n  );\n};\nconst buildContentView = (content, ariaLabel, selectMultiple) => {\n  const {type} = content;\n  switch (type) {\n    case 'list':\n      return buildListItemsView(content, ariaLabel, selectMultiple);\n    case 'expandible-actionable-table':\n      return <ExpandibleActionableTable {...content} />;\n  }\n};\n\nconst ListItems = ({title, buttonLink, selectMultiple, content, 'aria-label': ariaLabel}) => {\n  const contentView = buildContentView(content, ariaLabel, selectMultiple);\n\n  return (\n    <div>\n      <div className={style.header}>\n        <div className={style.title}>\n          <Title title={title} type={'form-group'} data-name={'list-title'} />\n        </div>\n        <div className={style.actionsWrapper}>\n          {selectMultiple ? (\n            <div className={style.selectMultiple}>\n              <SelectMultiple {...selectMultiple} />\n            </div>\n          ) : null}\n\n          <div className={style.buttonCreate}>\n            <ButtonLink {...buttonLink} />\n          </div>\n        </div>\n      </div>\n      {contentView}\n    </div>\n  );\n};\n\nListItems.propTypes = {\n  'aria-label': PropTypes.string,\n  buttonLink: PropTypes.shape(ButtonLink.propTypes),\n  selectMultiple: PropTypes.shape(SelectMultiple.propTypes),\n  content: PropTypes.oneOfType([\n    PropTypes.shape({\n      items: PropTypes.arrayOf(PropTypes.shape(ListItem.propTypes)),\n      type: PropTypes.oneOf(['list']),\n      itemType: PropTypes.string,\n      onDrop: PropTypes.func,\n      isDraggable: PropTypes.bool\n    }),\n    PropTypes.shape({\n      ...ExpandibleActionableTable.propTypes,\n      type: PropTypes.oneOf(['expandible-actionable-table'])\n    })\n  ]),\n  title: PropTypes.string\n};\n\nexport default ListItems;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["buildListItemsView","content","ariaLabel","selectMultiple","items","itemType","onDrop","isDraggable","tableHeader","itemsView","length","map","item","contentType","index","id","style","tableHeaderView","isNil","isEmpty","tableHeaderWrapper","dataColumnsWrapper","tableHeaderItem","settings","list","listWithSelectMultiple","buildContentView","type","ListItems","title","buttonLink","contentView","header","actionsWrapper","buttonCreate","propTypes","PropTypes","string","shape","ButtonLink","SelectMultiple","oneOfType","arrayOf","ListItem","oneOf","func","bool","ExpandibleActionableTable"],"sources":["../../../src/organism/list-items/index.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport isNil from 'lodash/fp/isNil';\nimport isEmpty from 'lodash/fp/isEmpty';\nimport ListItem from '../list-item';\nimport DraggableList from '../../molecule/draggable-list';\nimport Title from '../../atom/title';\nimport ButtonLink from '../../atom/button-link';\nimport SelectMultiple from '../../molecule/select-multiple';\nimport ExpandibleActionableTable from '../../molecule/expandible-actionable-table';\nimport style from './style.css';\n\nconst buildListItemsView = (content, ariaLabel, selectMultiple) => {\n  const {items, itemType, onDrop, isDraggable = false, tableHeader} = content;\n  const itemsView =\n    isDraggable && items.length > 1 ? (\n      <DraggableList\n        items={items.map(item => ({...item, contentType: itemType}))}\n        itemType=\"list-item\"\n        onDrop={onDrop}\n      />\n    ) : (\n      items.map((item, index) => (\n        <li key={item.id} className={style.item} data-name={`content-${index}`}>\n          <ListItem {...item} order={null} contentType={itemType} />\n        </li>\n      ))\n    );\n  const tableHeaderView =\n    !isNil(tableHeader) && !isEmpty(tableHeader) ? (\n      <div className={style.tableHeaderWrapper}>\n        <div className={style.dataColumnsWrapper}>\n          {tableHeader.map((tableHeaderItem, index) => (\n            <div\n              key={`tableHeadeColumn-key-${index}`}\n              className={style.tableHeaderItem}\n              data-name={`tableHeader-${index}`}\n            >\n              {tableHeaderItem}\n            </div>\n          ))}\n        </div>\n        <div className={style.settings}>{''}</div>\n      </div>\n    ) : null;\n  return (\n    <div>\n      {tableHeaderView}\n      <ul\n        className={!selectMultiple ? style.list : style.listWithSelectMultiple}\n        aria-label={ariaLabel}\n        data-name={'content-list'}\n      >\n        {itemsView}\n      </ul>\n    </div>\n  );\n};\nconst buildContentView = (content, ariaLabel, selectMultiple) => {\n  const {type} = content;\n  switch (type) {\n    case 'list':\n      return buildListItemsView(content, ariaLabel, selectMultiple);\n    case 'expandible-actionable-table':\n      return <ExpandibleActionableTable {...content} />;\n  }\n};\n\nconst ListItems = ({title, buttonLink, selectMultiple, content, 'aria-label': ariaLabel}) => {\n  const contentView = buildContentView(content, ariaLabel, selectMultiple);\n\n  return (\n    <div>\n      <div className={style.header}>\n        <div className={style.title}>\n          <Title title={title} type={'form-group'} data-name={'list-title'} />\n        </div>\n        <div className={style.actionsWrapper}>\n          {selectMultiple ? (\n            <div className={style.selectMultiple}>\n              <SelectMultiple {...selectMultiple} />\n            </div>\n          ) : null}\n\n          <div className={style.buttonCreate}>\n            <ButtonLink {...buttonLink} />\n          </div>\n        </div>\n      </div>\n      {contentView}\n    </div>\n  );\n};\n\nListItems.propTypes = {\n  'aria-label': PropTypes.string,\n  buttonLink: PropTypes.shape(ButtonLink.propTypes),\n  selectMultiple: PropTypes.shape(SelectMultiple.propTypes),\n  content: PropTypes.oneOfType([\n    PropTypes.shape({\n      items: PropTypes.arrayOf(PropTypes.shape(ListItem.propTypes)),\n      type: PropTypes.oneOf(['list']),\n      itemType: PropTypes.string,\n      onDrop: PropTypes.func,\n      isDraggable: PropTypes.bool,\n      tableHeader: PropTypes.arrayOf(PropTypes.string)\n    }),\n    PropTypes.shape({\n      ...ExpandibleActionableTable.propTypes,\n      type: PropTypes.oneOf(['expandible-actionable-table'])\n    })\n  ]),\n  title: PropTypes.string\n};\n\nexport default ListItems;\n"],"mappings":"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"}

package/lib/organism/list-items/style.css

@@ -3,6 +3,7 @@
 @value colors: "../../variables/colors.css";
 @value medium from colors;
 @value xtraLightGrey from colors;
+@value cm_grey_400 from colors;
 @value dark from colors;
 
 .header {
@@ -53,4 +54,45 @@
   margin: 0;
   padding: 0;
   min-height: 200px;
+}
+
+.tableHeaderWrapper {
+  display: grid;
+  grid-template-columns: 70% auto; 
+  padding: 8px 16px;
+  align-items: center;
+  gap: 24px;
+  border-radius: 7px;
+  padding: 8px 16px;
+}
+
+
+.tableHeaderItem {
+  display: flex;
+  gap: 16px;
+  flex: 1 0 0;
+  overflow: hidden;
+  align-items: flex-start;
+  gap: 8px;
+  flex-shrink: 0;
+  color: var(--font-font-color-tertiary, #9999A8);
+  text-overflow: ellipsis;
+  font-family: Gilroy;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 20px;
+}
+
+.dataColumnsWrapper {
+  align-items: center;
+  display: flex;
+  width: 100%;
+  margin-left: 24px;
+}
+
+.settings {
+  align-items: center;
+  display: flex;
+  height: 100%;
 }

package/lib/organism/mooc-header/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/organism/mooc-header/index.js"],"names":[],"mappings":";AAyBA;IACE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MA6FE;IAEF;;;;;;;;;;;;;;;;;;;;;;;MAGE;IAEF,wBAwBC;IAtBC;;;;;;MAMC;IAgDH,6BAIC;IAED,yBAGC;IAxBD,qCAQC;IAED,wBAGC;IAjBD,+BAEC;IA4BD,2BAKC;IAED,0BAKC;IAED,sBAIC;IAED,qBAIC;IAED,yBAQC;IAED,0BAQC;IAED,0BAIC;IAED,2BAIC;IAED,iCAUC;IA7GD,2EASC;IAGC,kBAAsB;IAmGxB,6BAIE;IAEF,6BAIE;IAEF,6BAucC;CACF"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/organism/mooc-header/index.js"],"names":[],"mappings":";AAyBA;IACE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MA6FE;IAEF;;;;;;;;;;;;;;;;;;;;;;;MAGE;IAEF,wBAwBC;IAtBC;;;;;;MAMC;IAgDH,6BAIC;IAED,yBAGC;IAxBD,qCAQC;IAED,wBAGC;IAjBD,+BAEC;IA4BD,2BAKC;IAED,0BAKC;IAED,sBAIC;IAED,qBAIC;IAED,yBAQC;IAED,0BAQC;IAED,0BAIC;IAED,2BAIC;IAED,iCAUC;IA7GD,2EASC;IAGC,kBAAsB;IAmGxB,6BAIE;IAEF,6BAIE;IAEF,6BAwcC;CACF"}