@coorpacademy/components 11.12.2 → 11.12.3-alpha.1

package/es/molecule/course-section/style.css

@@ -33,10 +33,10 @@
     font-family: Gilroy;
     font-size: 16px;
     font-weight: bold;
-    overflow:hidden;
-    white-space:nowrap;
-    display:inline-block;
-    text-overflow:ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+    display: inline-block;
+    text-overflow: ellipsis;
     width: 100%;
 }
 
@@ -59,5 +59,3 @@
     min-height: 56px;
     min-width: 56px;
 }
-
-

package/es/molecule/draggable/style.css

@@ -13,15 +13,18 @@
   background: transparent;
   margin: 8px 0;
   border-radius: 7px;
-  transform:translate(0,0);
+  transform: translate(0, 0);
   z-index: 0;
 }
-.draggable:hover{
+
+.draggable:hover {
   background: rgba(0, 0, 0, 0.3);
 }
-.draggable:active{
+
+.draggable:active {
   background: transparent;
 }
+
 .draggable:before {
   content: '.';
   position: absolute;
@@ -32,9 +35,10 @@
   font-size: 25px;
   color: medium;
   pointer-events: none;
-  text-shadow: 0 0 medium,    0 5px medium,    0 10px medium,    0 15px medium,
-            5px 0 medium ,   5px 5px medium,  5px 10px medium,  5px 15px medium;
+  text-shadow: 0 0 medium, 0 5px medium, 0 10px medium, 0 15px medium,
+    5px 0 medium, 5px 5px medium, 5px 10px medium, 5px 15px medium;
 }
+
 .dragging {
   background: rgba(0, 0, 0, 0.1);
 }

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

@@ -6,7 +6,7 @@ declare function DraggableList({ items, onDrop, itemType }: {
 }): JSX.Element;
 declare namespace DraggableList {
     namespace propTypes {
-        const items: PropTypes.Requireable<(PropTypes.InferProps<{
+        const items: PropTypes.Requireable<(NonNullable<PropTypes.InferProps<{
             title: PropTypes.Validator<string>;
             onUp: PropTypes.Requireable<(...args: any[]) => any>;
             onDown: PropTypes.Requireable<(...args: any[]) => any>;
@@ -43,7 +43,55 @@ declare namespace DraggableList {
                 }> | null | undefined)[]>;
                 onChange: PropTypes.Requireable<(...args: any[]) => any>;
             }>>;
-        }> | null | undefined)[]>;
+        }> | PropTypes.InferProps<{
+            'aria-label': PropTypes.Requireable<PropTypes.InferProps<{
+                title: PropTypes.Requireable<string>;
+                author: PropTypes.Requireable<string>;
+                modules: PropTypes.Requireable<string>;
+                position: PropTypes.Requireable<string>;
+            }>>;
+            image: PropTypes.Requireable<string>;
+            badgeList: PropTypes.Requireable<(PropTypes.InferProps<{
+                category: PropTypes.Requireable<string>;
+                label: PropTypes.Requireable<string>;
+            }> | null | undefined)[]>;
+            title: PropTypes.Requireable<string>;
+            author: PropTypes.Requireable<string>;
+            position: PropTypes.Requireable<number>;
+            id: PropTypes.Requireable<string>;
+        }> | 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>;
+            }>>;
+            buttonLink: PropTypes.Requireable<PropTypes.InferProps<{
+                type: PropTypes.Requireable<string>;
+                label: PropTypes.Requireable<string>;
+                ariaLabel: PropTypes.Requireable<string>;
+                dataName: PropTypes.Requireable<string>;
+                icon: PropTypes.Requireable<PropTypes.InferProps<{
+                    position: PropTypes.Requireable<string>;
+                    type: PropTypes.Requireable<string>;
+                }>>;
+                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>;
+            order: PropTypes.Requireable<number>;
+            'aria-label': PropTypes.Requireable<string>;
+            contentType: PropTypes.Requireable<string>;
+            id: PropTypes.Requireable<string>;
+        }> | null | undefined> | null | undefined)[]>;
         const onDrop: PropTypes.Requireable<(...args: any[]) => any>;
         const itemType: PropTypes.Requireable<string>;
     }

package/es/molecule/draggable-list/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/draggable-list/index.js"],"names":[],"mappings":";AAQA;;;;gBAmDC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/draggable-list/index.js"],"names":[],"mappings":";AAaA;;;;gBAmDC"}

package/es/molecule/draggable-list/index.js

@@ -5,9 +5,11 @@ import PropTypes from 'prop-types';
 import Draggable from '../draggable';
 import SetupSection from '../setup-section';
 import CourseSection from '../course-section';
+import ListItem from '../../organism/list-item';
 const ITEMS = {
   'setup-section': SetupSection,
-  'course-section': CourseSection
+  'course-section': CourseSection,
+  'list-item': ListItem
 };
 
 const DraggableList = ({
@@ -48,7 +50,7 @@ const DraggableList = ({
 };
 
 DraggableList.propTypes = process.env.NODE_ENV !== "production" ? {
-  items: PropTypes.arrayOf(PropTypes.shape(SetupSection.propTypes)),
+  items: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.shape(SetupSection.propTypes), PropTypes.shape(CourseSection.propTypes), PropTypes.shape(ListItem.propTypes)])),
   onDrop: PropTypes.func,
   itemType: PropTypes.string
 } : {};

package/es/molecule/draggable-list/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","useState","useCallback","PropTypes","Draggable","SetupSection","CourseSection","ITEMS","DraggableList","items","onDrop","itemType","dragTo","setDragTo","dragFrom","setDragFrom","dragStartHandler","id","dragOverHandler","dragLeaveHandler","dropHandler","Item","itemsView","map","item","propTypes","arrayOf","shape","func","string"],"sources":["../../../src/molecule/draggable-list/index.js"],"sourcesContent":["import React, {useState, useCallback} from 'react';\nimport PropTypes from 'prop-types';\nimport Draggable from '../draggable';\nimport SetupSection from '../setup-section';\nimport CourseSection from '../course-section';\n\nconst ITEMS = {'setup-section': SetupSection, 'course-section': CourseSection};\n\nconst DraggableList = ({items, onDrop, itemType}) => {\n  const [dragTo, setDragTo] = useState(null);\n  const [dragFrom, setDragFrom] = useState(null);\n\n  const dragStartHandler = useCallback(\n    id => {\n      setDragFrom(id);\n    },\n    [setDragFrom]\n  );\n\n  const dragOverHandler = useCallback(\n    id => {\n      if (dragTo === id) return;\n      setDragTo(id);\n    },\n    [dragTo, setDragTo]\n  );\n\n  const dragLeaveHandler = useCallback(\n    id => {\n      setDragTo(null);\n    },\n    [setDragTo]\n  );\n\n  const dropHandler = useCallback(\n    id => {\n      if (onDrop && dragFrom) onDrop(dragFrom, id);\n\n      setDragTo(null);\n      setDragFrom(null);\n    },\n    [onDrop, setDragTo, setDragFrom, dragFrom]\n  );\n\n  const Item = ITEMS[itemType];\n  const itemsView = items.map(item => (\n    <Draggable\n      key={item.id}\n      id={item.id}\n      dragging={dragTo === item.id}\n      onDragStart={dragStartHandler}\n      onDragOver={dragOverHandler}\n      onDragLeave={dragLeaveHandler}\n      onDrop={dropHandler}\n    >\n      <Item {...item} key={item.id} />\n    </Draggable>\n  ));\n  return <div>{itemsView}</div>;\n};\n\nDraggableList.propTypes = {\n  items: PropTypes.arrayOf(PropTypes.shape(SetupSection.propTypes)),\n  onDrop: PropTypes.func,\n  itemType: PropTypes.string\n};\n\nexport default DraggableList;\n"],"mappings":";;AAAA,OAAOA,KAAP,IAAeC,QAAf,EAAyBC,WAAzB,QAA2C,OAA3C;AACA,OAAOC,SAAP,MAAsB,YAAtB;AACA,OAAOC,SAAP,MAAsB,cAAtB;AACA,OAAOC,YAAP,MAAyB,kBAAzB;AACA,OAAOC,aAAP,MAA0B,mBAA1B;AAEA,MAAMC,KAAK,GAAG;EAAC,iBAAiBF,YAAlB;EAAgC,kBAAkBC;AAAlD,CAAd;;AAEA,MAAME,aAAa,GAAG,CAAC;EAACC,KAAD;EAAQC,MAAR;EAAgBC;AAAhB,CAAD,KAA+B;EACnD,MAAM,CAACC,MAAD,EAASC,SAAT,IAAsBZ,QAAQ,CAAC,IAAD,CAApC;EACA,MAAM,CAACa,QAAD,EAAWC,WAAX,IAA0Bd,QAAQ,CAAC,IAAD,CAAxC;EAEA,MAAMe,gBAAgB,GAAGd,WAAW,CAClCe,EAAE,IAAI;IACJF,WAAW,CAACE,EAAD,CAAX;EACD,CAHiC,EAIlC,CAACF,WAAD,CAJkC,CAApC;EAOA,MAAMG,eAAe,GAAGhB,WAAW,CACjCe,EAAE,IAAI;IACJ,IAAIL,MAAM,KAAKK,EAAf,EAAmB;IACnBJ,SAAS,CAACI,EAAD,CAAT;EACD,CAJgC,EAKjC,CAACL,MAAD,EAASC,SAAT,CALiC,CAAnC;EAQA,MAAMM,gBAAgB,GAAGjB,WAAW,CAClCe,EAAE,IAAI;IACJJ,SAAS,CAAC,IAAD,CAAT;EACD,CAHiC,EAIlC,CAACA,SAAD,CAJkC,CAApC;EAOA,MAAMO,WAAW,GAAGlB,WAAW,CAC7Be,EAAE,IAAI;IACJ,IAAIP,MAAM,IAAII,QAAd,EAAwBJ,MAAM,CAACI,QAAD,EAAWG,EAAX,CAAN;IAExBJ,SAAS,CAAC,IAAD,CAAT;IACAE,WAAW,CAAC,IAAD,CAAX;EACD,CAN4B,EAO7B,CAACL,MAAD,EAASG,SAAT,EAAoBE,WAApB,EAAiCD,QAAjC,CAP6B,CAA/B;EAUA,MAAMO,IAAI,GAAGd,KAAK,CAACI,QAAD,CAAlB;EACA,MAAMW,SAAS,GAAGb,KAAK,CAACc,GAAN,CAAUC,IAAI,iBAC9B,oBAAC,SAAD;IACE,GAAG,EAAEA,IAAI,CAACP,EADZ;IAEE,EAAE,EAAEO,IAAI,CAACP,EAFX;IAGE,QAAQ,EAAEL,MAAM,KAAKY,IAAI,CAACP,EAH5B;IAIE,WAAW,EAAED,gBAJf;IAKE,UAAU,EAAEE,eALd;IAME,WAAW,EAAEC,gBANf;IAOE,MAAM,EAAEC;EAPV,gBASE,oBAAC,IAAD,eAAUI,IAAV;IAAgB,GAAG,EAAEA,IAAI,CAACP;EAA1B,GATF,CADgB,CAAlB;EAaA,oBAAO,iCAAMK,SAAN,CAAP;AACD,CAnDD;;AAqDAd,aAAa,CAACiB,SAAd,2CAA0B;EACxBhB,KAAK,EAAEN,SAAS,CAACuB,OAAV,CAAkBvB,SAAS,CAACwB,KAAV,CAAgBtB,YAAY,CAACoB,SAA7B,CAAlB,CADiB;EAExBf,MAAM,EAAEP,SAAS,CAACyB,IAFM;EAGxBjB,QAAQ,EAAER,SAAS,CAAC0B;AAHI,CAA1B;AAMA,eAAerB,aAAf"}
+{"version":3,"file":"index.js","names":["React","useState","useCallback","PropTypes","Draggable","SetupSection","CourseSection","ListItem","ITEMS","DraggableList","items","onDrop","itemType","dragTo","setDragTo","dragFrom","setDragFrom","dragStartHandler","id","dragOverHandler","dragLeaveHandler","dropHandler","Item","itemsView","map","item","propTypes","arrayOf","oneOfType","shape","func","string"],"sources":["../../../src/molecule/draggable-list/index.js"],"sourcesContent":["import React, {useState, useCallback} from 'react';\nimport PropTypes from 'prop-types';\nimport Draggable from '../draggable';\nimport SetupSection from '../setup-section';\nimport CourseSection from '../course-section';\nimport ListItem from '../../organism/list-item';\n\nconst ITEMS = {\n  'setup-section': SetupSection,\n  'course-section': CourseSection,\n  'list-item': ListItem\n};\n\nconst DraggableList = ({items, onDrop, itemType}) => {\n  const [dragTo, setDragTo] = useState(null);\n  const [dragFrom, setDragFrom] = useState(null);\n\n  const dragStartHandler = useCallback(\n    id => {\n      setDragFrom(id);\n    },\n    [setDragFrom]\n  );\n\n  const dragOverHandler = useCallback(\n    id => {\n      if (dragTo === id) return;\n      setDragTo(id);\n    },\n    [dragTo, setDragTo]\n  );\n\n  const dragLeaveHandler = useCallback(\n    id => {\n      setDragTo(null);\n    },\n    [setDragTo]\n  );\n\n  const dropHandler = useCallback(\n    id => {\n      if (onDrop && dragFrom) onDrop(dragFrom, id);\n\n      setDragTo(null);\n      setDragFrom(null);\n    },\n    [onDrop, setDragTo, setDragFrom, dragFrom]\n  );\n\n  const Item = ITEMS[itemType];\n  const itemsView = items.map(item => (\n    <Draggable\n      key={item.id}\n      id={item.id}\n      dragging={dragTo === item.id}\n      onDragStart={dragStartHandler}\n      onDragOver={dragOverHandler}\n      onDragLeave={dragLeaveHandler}\n      onDrop={dropHandler}\n    >\n      <Item {...item} key={item.id} />\n    </Draggable>\n  ));\n  return <div>{itemsView}</div>;\n};\n\nDraggableList.propTypes = {\n  items: PropTypes.arrayOf(\n    PropTypes.oneOfType([\n      PropTypes.shape(SetupSection.propTypes),\n      PropTypes.shape(CourseSection.propTypes),\n      PropTypes.shape(ListItem.propTypes)\n    ])\n  ),\n  onDrop: PropTypes.func,\n  itemType: PropTypes.string\n};\n\nexport default DraggableList;\n"],"mappings":";;AAAA,OAAOA,KAAP,IAAeC,QAAf,EAAyBC,WAAzB,QAA2C,OAA3C;AACA,OAAOC,SAAP,MAAsB,YAAtB;AACA,OAAOC,SAAP,MAAsB,cAAtB;AACA,OAAOC,YAAP,MAAyB,kBAAzB;AACA,OAAOC,aAAP,MAA0B,mBAA1B;AACA,OAAOC,QAAP,MAAqB,0BAArB;AAEA,MAAMC,KAAK,GAAG;EACZ,iBAAiBH,YADL;EAEZ,kBAAkBC,aAFN;EAGZ,aAAaC;AAHD,CAAd;;AAMA,MAAME,aAAa,GAAG,CAAC;EAACC,KAAD;EAAQC,MAAR;EAAgBC;AAAhB,CAAD,KAA+B;EACnD,MAAM,CAACC,MAAD,EAASC,SAAT,IAAsBb,QAAQ,CAAC,IAAD,CAApC;EACA,MAAM,CAACc,QAAD,EAAWC,WAAX,IAA0Bf,QAAQ,CAAC,IAAD,CAAxC;EAEA,MAAMgB,gBAAgB,GAAGf,WAAW,CAClCgB,EAAE,IAAI;IACJF,WAAW,CAACE,EAAD,CAAX;EACD,CAHiC,EAIlC,CAACF,WAAD,CAJkC,CAApC;EAOA,MAAMG,eAAe,GAAGjB,WAAW,CACjCgB,EAAE,IAAI;IACJ,IAAIL,MAAM,KAAKK,EAAf,EAAmB;IACnBJ,SAAS,CAACI,EAAD,CAAT;EACD,CAJgC,EAKjC,CAACL,MAAD,EAASC,SAAT,CALiC,CAAnC;EAQA,MAAMM,gBAAgB,GAAGlB,WAAW,CAClCgB,EAAE,IAAI;IACJJ,SAAS,CAAC,IAAD,CAAT;EACD,CAHiC,EAIlC,CAACA,SAAD,CAJkC,CAApC;EAOA,MAAMO,WAAW,GAAGnB,WAAW,CAC7BgB,EAAE,IAAI;IACJ,IAAIP,MAAM,IAAII,QAAd,EAAwBJ,MAAM,CAACI,QAAD,EAAWG,EAAX,CAAN;IAExBJ,SAAS,CAAC,IAAD,CAAT;IACAE,WAAW,CAAC,IAAD,CAAX;EACD,CAN4B,EAO7B,CAACL,MAAD,EAASG,SAAT,EAAoBE,WAApB,EAAiCD,QAAjC,CAP6B,CAA/B;EAUA,MAAMO,IAAI,GAAGd,KAAK,CAACI,QAAD,CAAlB;EACA,MAAMW,SAAS,GAAGb,KAAK,CAACc,GAAN,CAAUC,IAAI,iBAC9B,oBAAC,SAAD;IACE,GAAG,EAAEA,IAAI,CAACP,EADZ;IAEE,EAAE,EAAEO,IAAI,CAACP,EAFX;IAGE,QAAQ,EAAEL,MAAM,KAAKY,IAAI,CAACP,EAH5B;IAIE,WAAW,EAAED,gBAJf;IAKE,UAAU,EAAEE,eALd;IAME,WAAW,EAAEC,gBANf;IAOE,MAAM,EAAEC;EAPV,gBASE,oBAAC,IAAD,eAAUI,IAAV;IAAgB,GAAG,EAAEA,IAAI,CAACP;EAA1B,GATF,CADgB,CAAlB;EAaA,oBAAO,iCAAMK,SAAN,CAAP;AACD,CAnDD;;AAqDAd,aAAa,CAACiB,SAAd,2CAA0B;EACxBhB,KAAK,EAAEP,SAAS,CAACwB,OAAV,CACLxB,SAAS,CAACyB,SAAV,CAAoB,CAClBzB,SAAS,CAAC0B,KAAV,CAAgBxB,YAAY,CAACqB,SAA7B,CADkB,EAElBvB,SAAS,CAAC0B,KAAV,CAAgBvB,aAAa,CAACoB,SAA9B,CAFkB,EAGlBvB,SAAS,CAAC0B,KAAV,CAAgBtB,QAAQ,CAACmB,SAAzB,CAHkB,CAApB,CADK,CADiB;EAQxBf,MAAM,EAAER,SAAS,CAAC2B,IARM;EASxBlB,QAAQ,EAAET,SAAS,CAAC4B;AATI,CAA1B;AAYA,eAAetB,aAAf"}

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

@@ -32,6 +32,7 @@ declare namespace ListItem {
         order: PropTypes.Requireable<number>;
         'aria-label': PropTypes.Requireable<string>;
         contentType: PropTypes.Requireable<string>;
+        id: PropTypes.Requireable<string>;
     };
 }
 import PropTypes from "prop-types";

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

@@ -78,7 +78,8 @@ ListItem.propTypes = process.env.NODE_ENV !== "production" ? {
   title: PropTypes.string.isRequired,
   order: PropTypes.number,
   'aria-label': PropTypes.string,
-  contentType: PropTypes.string
+  contentType: PropTypes.string,
+  id: PropTypes.string
 } : {};
 export default ListItem;
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","PropTypes","Tag","ButtonLink","BulletPointMenuButton","style","ListItem","props","isPublished","bulletPointMenuButton","buttonLink","tags","title","order","ariaLabel","contentType","tagsView","convert","cap","tag","index","type","wrapper","orderWrapper","settings","edit","propTypes","shape","buttonAriaLabel","string","menuAriaLabel","buttons","arrayOf","label","onClick","func","dataName","icon","position","oneOf","isRequired","number"],"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          <div className={style.order} aria-label={ariaLabel}>\n            {order + 1}\n          </div>\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};\n\nexport default ListItem;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["React","PropTypes","Tag","ButtonLink","BulletPointMenuButton","style","ListItem","props","isPublished","bulletPointMenuButton","buttonLink","tags","title","order","ariaLabel","contentType","tagsView","convert","cap","tag","index","type","wrapper","orderWrapper","settings","edit","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          <div className={style.order} aria-label={ariaLabel}>\n            {order + 1}\n          </div>\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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"}

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

@@ -33,17 +33,17 @@
   text-align: left;
   text-overflow: ellipsis;
   white-space: nowrap;
- 
+
 }
 
 .settings {
   align-items: center;
   display: flex;
-  height: 100%; 
+  height: 100%;
 }
 
 .tag {
-  margin: 0 16px 0 0; 
+  margin: 0 16px 0 0;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
@@ -64,8 +64,10 @@
   color: cm_grey_400;
   margin: 0 16px 0 0;
 }
+
 .orderWrapper {
   align-items: center;
   display: flex;
   width: 100%;
-}
+  margin-left: 24px;
+}

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

@@ -60,6 +60,7 @@ declare namespace ListItems {
             order: PropTypes.Requireable<number>;
             'aria-label': PropTypes.Requireable<string>;
             contentType: PropTypes.Requireable<string>;
+            id: PropTypes.Requireable<string>;
         }> | null | undefined)[]>;
         title: PropTypes.Requireable<string>;
         contentType: PropTypes.Requireable<string>;

package/es/template/back-office/brand-update/index.d.ts

@@ -1522,6 +1522,7 @@ declare namespace BrandUpdate {
                 order: PropTypes.Requireable<number>;
                 'aria-label': PropTypes.Requireable<string>;
                 contentType: PropTypes.Requireable<string>;
+                id: PropTypes.Requireable<string>;
             }> | null | undefined)[]>;
             title: PropTypes.Requireable<string>;
         }> | PropTypes.InferProps<{

package/lib/molecule/course-section/style.css

@@ -33,10 +33,10 @@
     font-family: Gilroy;
     font-size: 16px;
     font-weight: bold;
-    overflow:hidden;
-    white-space:nowrap;
-    display:inline-block;
-    text-overflow:ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+    display: inline-block;
+    text-overflow: ellipsis;
     width: 100%;
 }
 
@@ -59,5 +59,3 @@
     min-height: 56px;
     min-width: 56px;
 }
-
-

package/lib/molecule/draggable/style.css

@@ -13,15 +13,18 @@
   background: transparent;
   margin: 8px 0;
   border-radius: 7px;
-  transform:translate(0,0);
+  transform: translate(0, 0);
   z-index: 0;
 }
-.draggable:hover{
+
+.draggable:hover {
   background: rgba(0, 0, 0, 0.3);
 }
-.draggable:active{
+
+.draggable:active {
   background: transparent;
 }
+
 .draggable:before {
   content: '.';
   position: absolute;
@@ -32,9 +35,10 @@
   font-size: 25px;
   color: medium;
   pointer-events: none;
-  text-shadow: 0 0 medium,    0 5px medium,    0 10px medium,    0 15px medium,
-            5px 0 medium ,   5px 5px medium,  5px 10px medium,  5px 15px medium;
+  text-shadow: 0 0 medium, 0 5px medium, 0 10px medium, 0 15px medium,
+    5px 0 medium, 5px 5px medium, 5px 10px medium, 5px 15px medium;
 }
+
 .dragging {
   background: rgba(0, 0, 0, 0.1);
 }

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

@@ -6,7 +6,7 @@ declare function DraggableList({ items, onDrop, itemType }: {
 }): JSX.Element;
 declare namespace DraggableList {
     namespace propTypes {
-        const items: PropTypes.Requireable<(PropTypes.InferProps<{
+        const items: PropTypes.Requireable<(NonNullable<PropTypes.InferProps<{
             title: PropTypes.Validator<string>;
             onUp: PropTypes.Requireable<(...args: any[]) => any>;
             onDown: PropTypes.Requireable<(...args: any[]) => any>;
@@ -43,7 +43,55 @@ declare namespace DraggableList {
                 }> | null | undefined)[]>;
                 onChange: PropTypes.Requireable<(...args: any[]) => any>;
             }>>;
-        }> | null | undefined)[]>;
+        }> | PropTypes.InferProps<{
+            'aria-label': PropTypes.Requireable<PropTypes.InferProps<{
+                title: PropTypes.Requireable<string>;
+                author: PropTypes.Requireable<string>;
+                modules: PropTypes.Requireable<string>;
+                position: PropTypes.Requireable<string>;
+            }>>;
+            image: PropTypes.Requireable<string>;
+            badgeList: PropTypes.Requireable<(PropTypes.InferProps<{
+                category: PropTypes.Requireable<string>;
+                label: PropTypes.Requireable<string>;
+            }> | null | undefined)[]>;
+            title: PropTypes.Requireable<string>;
+            author: PropTypes.Requireable<string>;
+            position: PropTypes.Requireable<number>;
+            id: PropTypes.Requireable<string>;
+        }> | 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>;
+            }>>;
+            buttonLink: PropTypes.Requireable<PropTypes.InferProps<{
+                type: PropTypes.Requireable<string>;
+                label: PropTypes.Requireable<string>;
+                ariaLabel: PropTypes.Requireable<string>;
+                dataName: PropTypes.Requireable<string>;
+                icon: PropTypes.Requireable<PropTypes.InferProps<{
+                    position: PropTypes.Requireable<string>;
+                    type: PropTypes.Requireable<string>;
+                }>>;
+                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>;
+            order: PropTypes.Requireable<number>;
+            'aria-label': PropTypes.Requireable<string>;
+            contentType: PropTypes.Requireable<string>;
+            id: PropTypes.Requireable<string>;
+        }> | null | undefined> | null | undefined)[]>;
         const onDrop: PropTypes.Requireable<(...args: any[]) => any>;
         const itemType: PropTypes.Requireable<string>;
     }

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/draggable-list/index.js"],"names":[],"mappings":";AAQA;;;;gBAmDC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/draggable-list/index.js"],"names":[],"mappings":";AAaA;;;;gBAmDC"}

package/lib/molecule/draggable-list/index.js

@@ -13,6 +13,8 @@ var _setupSection = _interopRequireDefault(require("../setup-section"));
 
 var _courseSection = _interopRequireDefault(require("../course-section"));
 
+var _listItem = _interopRequireDefault(require("../../organism/list-item"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -23,7 +25,8 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 
 const ITEMS = {
   'setup-section': _setupSection.default,
-  'course-section': _courseSection.default
+  'course-section': _courseSection.default,
+  'list-item': _listItem.default
 };
 
 const DraggableList = ({
@@ -64,7 +67,7 @@ const DraggableList = ({
 };
 
 DraggableList.propTypes = process.env.NODE_ENV !== "production" ? {
-  items: _propTypes.default.arrayOf(_propTypes.default.shape(_setupSection.default.propTypes)),
+  items: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.shape(_setupSection.default.propTypes), _propTypes.default.shape(_courseSection.default.propTypes), _propTypes.default.shape(_listItem.default.propTypes)])),
   onDrop: _propTypes.default.func,
   itemType: _propTypes.default.string
 } : {};

package/lib/molecule/draggable-list/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ITEMS","SetupSection","CourseSection","DraggableList","items","onDrop","itemType","dragTo","setDragTo","useState","dragFrom","setDragFrom","dragStartHandler","useCallback","id","dragOverHandler","dragLeaveHandler","dropHandler","Item","itemsView","map","item","propTypes","PropTypes","arrayOf","shape","func","string"],"sources":["../../../src/molecule/draggable-list/index.js"],"sourcesContent":["import React, {useState, useCallback} from 'react';\nimport PropTypes from 'prop-types';\nimport Draggable from '../draggable';\nimport SetupSection from '../setup-section';\nimport CourseSection from '../course-section';\n\nconst ITEMS = {'setup-section': SetupSection, 'course-section': CourseSection};\n\nconst DraggableList = ({items, onDrop, itemType}) => {\n  const [dragTo, setDragTo] = useState(null);\n  const [dragFrom, setDragFrom] = useState(null);\n\n  const dragStartHandler = useCallback(\n    id => {\n      setDragFrom(id);\n    },\n    [setDragFrom]\n  );\n\n  const dragOverHandler = useCallback(\n    id => {\n      if (dragTo === id) return;\n      setDragTo(id);\n    },\n    [dragTo, setDragTo]\n  );\n\n  const dragLeaveHandler = useCallback(\n    id => {\n      setDragTo(null);\n    },\n    [setDragTo]\n  );\n\n  const dropHandler = useCallback(\n    id => {\n      if (onDrop && dragFrom) onDrop(dragFrom, id);\n\n      setDragTo(null);\n      setDragFrom(null);\n    },\n    [onDrop, setDragTo, setDragFrom, dragFrom]\n  );\n\n  const Item = ITEMS[itemType];\n  const itemsView = items.map(item => (\n    <Draggable\n      key={item.id}\n      id={item.id}\n      dragging={dragTo === item.id}\n      onDragStart={dragStartHandler}\n      onDragOver={dragOverHandler}\n      onDragLeave={dragLeaveHandler}\n      onDrop={dropHandler}\n    >\n      <Item {...item} key={item.id} />\n    </Draggable>\n  ));\n  return <div>{itemsView}</div>;\n};\n\nDraggableList.propTypes = {\n  items: PropTypes.arrayOf(PropTypes.shape(SetupSection.propTypes)),\n  onDrop: PropTypes.func,\n  itemType: PropTypes.string\n};\n\nexport default DraggableList;\n"],"mappings":";;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;AAEA,MAAMA,KAAK,GAAG;EAAC,iBAAiBC,qBAAlB;EAAgC,kBAAkBC;AAAlD,CAAd;;AAEA,MAAMC,aAAa,GAAG,CAAC;EAACC,KAAD;EAAQC,MAAR;EAAgBC;AAAhB,CAAD,KAA+B;EACnD,MAAM,CAACC,MAAD,EAASC,SAAT,IAAsB,IAAAC,eAAA,EAAS,IAAT,CAA5B;EACA,MAAM,CAACC,QAAD,EAAWC,WAAX,IAA0B,IAAAF,eAAA,EAAS,IAAT,CAAhC;EAEA,MAAMG,gBAAgB,GAAG,IAAAC,kBAAA,EACvBC,EAAE,IAAI;IACJH,WAAW,CAACG,EAAD,CAAX;EACD,CAHsB,EAIvB,CAACH,WAAD,CAJuB,CAAzB;EAOA,MAAMI,eAAe,GAAG,IAAAF,kBAAA,EACtBC,EAAE,IAAI;IACJ,IAAIP,MAAM,KAAKO,EAAf,EAAmB;IACnBN,SAAS,CAACM,EAAD,CAAT;EACD,CAJqB,EAKtB,CAACP,MAAD,EAASC,SAAT,CALsB,CAAxB;EAQA,MAAMQ,gBAAgB,GAAG,IAAAH,kBAAA,EACvBC,EAAE,IAAI;IACJN,SAAS,CAAC,IAAD,CAAT;EACD,CAHsB,EAIvB,CAACA,SAAD,CAJuB,CAAzB;EAOA,MAAMS,WAAW,GAAG,IAAAJ,kBAAA,EAClBC,EAAE,IAAI;IACJ,IAAIT,MAAM,IAAIK,QAAd,EAAwBL,MAAM,CAACK,QAAD,EAAWI,EAAX,CAAN;IAExBN,SAAS,CAAC,IAAD,CAAT;IACAG,WAAW,CAAC,IAAD,CAAX;EACD,CANiB,EAOlB,CAACN,MAAD,EAASG,SAAT,EAAoBG,WAApB,EAAiCD,QAAjC,CAPkB,CAApB;EAUA,MAAMQ,IAAI,GAAGlB,KAAK,CAACM,QAAD,CAAlB;EACA,MAAMa,SAAS,GAAGf,KAAK,CAACgB,GAAN,CAAUC,IAAI,iBAC9B,6BAAC,kBAAD;IACE,GAAG,EAAEA,IAAI,CAACP,EADZ;IAEE,EAAE,EAAEO,IAAI,CAACP,EAFX;IAGE,QAAQ,EAAEP,MAAM,KAAKc,IAAI,CAACP,EAH5B;IAIE,WAAW,EAAEF,gBAJf;IAKE,UAAU,EAAEG,eALd;IAME,WAAW,EAAEC,gBANf;IAOE,MAAM,EAAEC;EAPV,gBASE,6BAAC,IAAD,eAAUI,IAAV;IAAgB,GAAG,EAAEA,IAAI,CAACP;EAA1B,GATF,CADgB,CAAlB;EAaA,oBAAO,0CAAMK,SAAN,CAAP;AACD,CAnDD;;AAqDAhB,aAAa,CAACmB,SAAd,2CAA0B;EACxBlB,KAAK,EAAEmB,kBAAA,CAAUC,OAAV,CAAkBD,kBAAA,CAAUE,KAAV,CAAgBxB,qBAAA,CAAaqB,SAA7B,CAAlB,CADiB;EAExBjB,MAAM,EAAEkB,kBAAA,CAAUG,IAFM;EAGxBpB,QAAQ,EAAEiB,kBAAA,CAAUI;AAHI,CAA1B;eAMexB,a"}
+{"version":3,"file":"index.js","names":["ITEMS","SetupSection","CourseSection","ListItem","DraggableList","items","onDrop","itemType","dragTo","setDragTo","useState","dragFrom","setDragFrom","dragStartHandler","useCallback","id","dragOverHandler","dragLeaveHandler","dropHandler","Item","itemsView","map","item","propTypes","PropTypes","arrayOf","oneOfType","shape","func","string"],"sources":["../../../src/molecule/draggable-list/index.js"],"sourcesContent":["import React, {useState, useCallback} from 'react';\nimport PropTypes from 'prop-types';\nimport Draggable from '../draggable';\nimport SetupSection from '../setup-section';\nimport CourseSection from '../course-section';\nimport ListItem from '../../organism/list-item';\n\nconst ITEMS = {\n  'setup-section': SetupSection,\n  'course-section': CourseSection,\n  'list-item': ListItem\n};\n\nconst DraggableList = ({items, onDrop, itemType}) => {\n  const [dragTo, setDragTo] = useState(null);\n  const [dragFrom, setDragFrom] = useState(null);\n\n  const dragStartHandler = useCallback(\n    id => {\n      setDragFrom(id);\n    },\n    [setDragFrom]\n  );\n\n  const dragOverHandler = useCallback(\n    id => {\n      if (dragTo === id) return;\n      setDragTo(id);\n    },\n    [dragTo, setDragTo]\n  );\n\n  const dragLeaveHandler = useCallback(\n    id => {\n      setDragTo(null);\n    },\n    [setDragTo]\n  );\n\n  const dropHandler = useCallback(\n    id => {\n      if (onDrop && dragFrom) onDrop(dragFrom, id);\n\n      setDragTo(null);\n      setDragFrom(null);\n    },\n    [onDrop, setDragTo, setDragFrom, dragFrom]\n  );\n\n  const Item = ITEMS[itemType];\n  const itemsView = items.map(item => (\n    <Draggable\n      key={item.id}\n      id={item.id}\n      dragging={dragTo === item.id}\n      onDragStart={dragStartHandler}\n      onDragOver={dragOverHandler}\n      onDragLeave={dragLeaveHandler}\n      onDrop={dropHandler}\n    >\n      <Item {...item} key={item.id} />\n    </Draggable>\n  ));\n  return <div>{itemsView}</div>;\n};\n\nDraggableList.propTypes = {\n  items: PropTypes.arrayOf(\n    PropTypes.oneOfType([\n      PropTypes.shape(SetupSection.propTypes),\n      PropTypes.shape(CourseSection.propTypes),\n      PropTypes.shape(ListItem.propTypes)\n    ])\n  ),\n  onDrop: PropTypes.func,\n  itemType: PropTypes.string\n};\n\nexport default DraggableList;\n"],"mappings":";;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;AAEA,MAAMA,KAAK,GAAG;EACZ,iBAAiBC,qBADL;EAEZ,kBAAkBC,sBAFN;EAGZ,aAAaC;AAHD,CAAd;;AAMA,MAAMC,aAAa,GAAG,CAAC;EAACC,KAAD;EAAQC,MAAR;EAAgBC;AAAhB,CAAD,KAA+B;EACnD,MAAM,CAACC,MAAD,EAASC,SAAT,IAAsB,IAAAC,eAAA,EAAS,IAAT,CAA5B;EACA,MAAM,CAACC,QAAD,EAAWC,WAAX,IAA0B,IAAAF,eAAA,EAAS,IAAT,CAAhC;EAEA,MAAMG,gBAAgB,GAAG,IAAAC,kBAAA,EACvBC,EAAE,IAAI;IACJH,WAAW,CAACG,EAAD,CAAX;EACD,CAHsB,EAIvB,CAACH,WAAD,CAJuB,CAAzB;EAOA,MAAMI,eAAe,GAAG,IAAAF,kBAAA,EACtBC,EAAE,IAAI;IACJ,IAAIP,MAAM,KAAKO,EAAf,EAAmB;IACnBN,SAAS,CAACM,EAAD,CAAT;EACD,CAJqB,EAKtB,CAACP,MAAD,EAASC,SAAT,CALsB,CAAxB;EAQA,MAAMQ,gBAAgB,GAAG,IAAAH,kBAAA,EACvBC,EAAE,IAAI;IACJN,SAAS,CAAC,IAAD,CAAT;EACD,CAHsB,EAIvB,CAACA,SAAD,CAJuB,CAAzB;EAOA,MAAMS,WAAW,GAAG,IAAAJ,kBAAA,EAClBC,EAAE,IAAI;IACJ,IAAIT,MAAM,IAAIK,QAAd,EAAwBL,MAAM,CAACK,QAAD,EAAWI,EAAX,CAAN;IAExBN,SAAS,CAAC,IAAD,CAAT;IACAG,WAAW,CAAC,IAAD,CAAX;EACD,CANiB,EAOlB,CAACN,MAAD,EAASG,SAAT,EAAoBG,WAApB,EAAiCD,QAAjC,CAPkB,CAApB;EAUA,MAAMQ,IAAI,GAAGnB,KAAK,CAACO,QAAD,CAAlB;EACA,MAAMa,SAAS,GAAGf,KAAK,CAACgB,GAAN,CAAUC,IAAI,iBAC9B,6BAAC,kBAAD;IACE,GAAG,EAAEA,IAAI,CAACP,EADZ;IAEE,EAAE,EAAEO,IAAI,CAACP,EAFX;IAGE,QAAQ,EAAEP,MAAM,KAAKc,IAAI,CAACP,EAH5B;IAIE,WAAW,EAAEF,gBAJf;IAKE,UAAU,EAAEG,eALd;IAME,WAAW,EAAEC,gBANf;IAOE,MAAM,EAAEC;EAPV,gBASE,6BAAC,IAAD,eAAUI,IAAV;IAAgB,GAAG,EAAEA,IAAI,CAACP;EAA1B,GATF,CADgB,CAAlB;EAaA,oBAAO,0CAAMK,SAAN,CAAP;AACD,CAnDD;;AAqDAhB,aAAa,CAACmB,SAAd,2CAA0B;EACxBlB,KAAK,EAAEmB,kBAAA,CAAUC,OAAV,CACLD,kBAAA,CAAUE,SAAV,CAAoB,CAClBF,kBAAA,CAAUG,KAAV,CAAgB1B,qBAAA,CAAasB,SAA7B,CADkB,EAElBC,kBAAA,CAAUG,KAAV,CAAgBzB,sBAAA,CAAcqB,SAA9B,CAFkB,EAGlBC,kBAAA,CAAUG,KAAV,CAAgBxB,iBAAA,CAASoB,SAAzB,CAHkB,CAApB,CADK,CADiB;EAQxBjB,MAAM,EAAEkB,kBAAA,CAAUI,IARM;EASxBrB,QAAQ,EAAEiB,kBAAA,CAAUK;AATI,CAA1B;eAYezB,a"}

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

@@ -32,6 +32,7 @@ declare namespace ListItem {
         order: PropTypes.Requireable<number>;
         'aria-label': PropTypes.Requireable<string>;
         contentType: PropTypes.Requireable<string>;
+        id: PropTypes.Requireable<string>;
     };
 }
 import PropTypes from "prop-types";

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

@@ -91,7 +91,8 @@ ListItem.propTypes = process.env.NODE_ENV !== "production" ? {
   title: _propTypes.default.string.isRequired,
   order: _propTypes.default.number,
   'aria-label': _propTypes.default.string,
-  contentType: _propTypes.default.string
+  contentType: _propTypes.default.string,
+  id: _propTypes.default.string
 } : {};
 var _default = ListItem;
 exports.default = _default;

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","settings","edit","propTypes","PropTypes","shape","buttonAriaLabel","string","menuAriaLabel","buttons","arrayOf","label","onClick","func","dataName","icon","position","oneOf","isRequired","number"],"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          <div className={style.order} aria-label={ariaLabel}>\n            {order + 1}\n          </div>\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};\n\nexport default ListItem;\n"],"mappings":"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"}
+{"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","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          <div className={style.order} aria-label={ariaLabel}>\n            {order + 1}\n          </div>\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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"}

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

@@ -33,17 +33,17 @@
   text-align: left;
   text-overflow: ellipsis;
   white-space: nowrap;
- 
+
 }
 
 .settings {
   align-items: center;
   display: flex;
-  height: 100%; 
+  height: 100%;
 }
 
 .tag {
-  margin: 0 16px 0 0; 
+  margin: 0 16px 0 0;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
@@ -64,8 +64,10 @@
   color: cm_grey_400;
   margin: 0 16px 0 0;
 }
+
 .orderWrapper {
   align-items: center;
   display: flex;
   width: 100%;
-}
+  margin-left: 24px;
+}

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

@@ -60,6 +60,7 @@ declare namespace ListItems {
             order: PropTypes.Requireable<number>;
             'aria-label': PropTypes.Requireable<string>;
             contentType: PropTypes.Requireable<string>;
+            id: PropTypes.Requireable<string>;
         }> | null | undefined)[]>;
         title: PropTypes.Requireable<string>;
         contentType: PropTypes.Requireable<string>;

package/lib/template/back-office/brand-update/index.d.ts

@@ -1522,6 +1522,7 @@ declare namespace BrandUpdate {
                 order: PropTypes.Requireable<number>;
                 'aria-label': PropTypes.Requireable<string>;
                 contentType: PropTypes.Requireable<string>;
+                id: PropTypes.Requireable<string>;
             }> | null | undefined)[]>;
             title: PropTypes.Requireable<string>;
         }> | PropTypes.InferProps<{

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coorpacademy/components",
-  "version": "11.12.2",
+  "version": "11.12.3-alpha.1+a2f45c9a8",
   "description": "",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -166,5 +166,5 @@
     "last 2 versions",
     "IE 11"
   ],
-  "gitHead": "92e0c84557fc2269b55eb0d886ddf8f28387a546"
+  "gitHead": "a2f45c9a89f91f624c4d45321fe715ee8a32658d"
 }