@coorpacademy/components 10.1.12-alpha.0 → 10.1.15

package/lib/organism/brand-form/test/fixtures/wizard-playlists.js

@@ -6,6 +6,32 @@ var _default = {
   props: {
     groups: [{
       fields: [{
+        type: 'selectMultiple',
+        title: 'Languages',
+        placeholder: 'Language selection',
+        description: 'This is the tooltip text',
+        theme: 'coorpmanager',
+        hint: '15 / 30 characters',
+        size: 'default',
+        options: [{
+          name: '🇬🇧 English',
+          value: 'en',
+          selected: true
+        }, {
+          name: '🇩🇪 German',
+          value: 'de',
+          selected: false
+        }, {
+          name: '🇹🇭 Thai',
+          value: 'th',
+          selected: false
+        }, {
+          name: '🇪🇸 Spanish',
+          value: 'es',
+          selected: false
+        }],
+        multiple: false
+      }, {
         type: 'text',
         title: 'Playlist name',
         placeholder: 'Playlist name',

package/lib/organism/brand-form/test/fixtures/wizard-playlists.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/organism/brand-form/test/fixtures/wizard-playlists.js"],"names":["props","groups","fields","type","title","placeholder","description","theme","hint","value","size"],"mappings":";;;;eAAe;AACbA,EAAAA,KAAK,EAAE;AACLC,IAAAA,MAAM,EAAE,CACN;AACEC,MAAAA,MAAM,EAAE,CACN;AACEC,QAAAA,IAAI,EAAE,MADR;AAEEC,QAAAA,KAAK,EAAE,eAFT;AAGEC,QAAAA,WAAW,EAAE,eAHf;AAIEC,QAAAA,WAAW,EAAE,0BAJf;AAKEC,QAAAA,KAAK,EAAE,cALT;AAMEC,QAAAA,IAAI,EAAE,oBANR;AAOEC,QAAAA,KAAK,EAAE,kBAPT;AAQEC,QAAAA,IAAI,EAAE;AARR,OADM,EAWN;AACEP,QAAAA,IAAI,EAAE,UADR;AAEEC,QAAAA,KAAK,EAAE,aAFT;AAGEC,QAAAA,WAAW,EAAE,aAHf;AAIEC,QAAAA,WAAW,EAAE,0BAJf;AAKEC,QAAAA,KAAK,EAAE,cALT;AAMEC,QAAAA,IAAI,EAAE,qBANR;AAOEE,QAAAA,IAAI,EAAE,QAPR;AAQED,QAAAA,KAAK,EACH;AATJ,OAXM;AADV,KADM;AADH;AADM,C","sourcesContent":["export default {\n  props: {\n    groups: [\n      {\n        fields: [\n          {\n            type: 'text',\n            title: 'Playlist name',\n            placeholder: 'Playlist name',\n            description: 'This is the tooltip text',\n            theme: 'coorpmanager',\n            hint: '15 / 30 characters',\n            value: 'Marketing expert',\n            size: 'default'\n          },\n          {\n            type: 'textarea',\n            title: 'Description',\n            placeholder: 'Description',\n            description: 'This is the tooltip text',\n            theme: 'coorpmanager',\n            hint: '80 / 200 characters',\n            size: 'medium',\n            value:\n              'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis fermentum sem ac fermentum luctus. Integer eu dui magna. Donec ut tristique dui. Vestibulum non accumsan tellus. Donec luctus erat vitae aliquet viverra. Mauris malesuada tortor quis viverra vestibulum. Nullam laoreet porta massa vitae porta.'\n          }\n        ]\n      }\n    ]\n  }\n};\n"],"file":"wizard-playlists.js"}
+{"version":3,"sources":["../../../../../src/organism/brand-form/test/fixtures/wizard-playlists.js"],"names":["props","groups","fields","type","title","placeholder","description","theme","hint","size","options","name","value","selected","multiple"],"mappings":";;;;eAAe;AACbA,EAAAA,KAAK,EAAE;AACLC,IAAAA,MAAM,EAAE,CACN;AACEC,MAAAA,MAAM,EAAE,CACN;AACEC,QAAAA,IAAI,EAAE,gBADR;AAEEC,QAAAA,KAAK,EAAE,WAFT;AAGEC,QAAAA,WAAW,EAAE,oBAHf;AAIEC,QAAAA,WAAW,EAAE,0BAJf;AAKEC,QAAAA,KAAK,EAAE,cALT;AAMEC,QAAAA,IAAI,EAAE,oBANR;AAOEC,QAAAA,IAAI,EAAE,SAPR;AAQEC,QAAAA,OAAO,EAAE,CACP;AACEC,UAAAA,IAAI,EAAE,cADR;AAEEC,UAAAA,KAAK,EAAE,IAFT;AAGEC,UAAAA,QAAQ,EAAE;AAHZ,SADO,EAMP;AACEF,UAAAA,IAAI,EAAE,aADR;AAEEC,UAAAA,KAAK,EAAE,IAFT;AAGEC,UAAAA,QAAQ,EAAE;AAHZ,SANO,EAWP;AACEF,UAAAA,IAAI,EAAE,WADR;AAEEC,UAAAA,KAAK,EAAE,IAFT;AAGEC,UAAAA,QAAQ,EAAE;AAHZ,SAXO,EAgBP;AACEF,UAAAA,IAAI,EAAE,cADR;AAEEC,UAAAA,KAAK,EAAE,IAFT;AAGEC,UAAAA,QAAQ,EAAE;AAHZ,SAhBO,CARX;AA8BEC,QAAAA,QAAQ,EAAE;AA9BZ,OADM,EAiCN;AACEX,QAAAA,IAAI,EAAE,MADR;AAEEC,QAAAA,KAAK,EAAE,eAFT;AAGEC,QAAAA,WAAW,EAAE,eAHf;AAIEC,QAAAA,WAAW,EAAE,0BAJf;AAKEC,QAAAA,KAAK,EAAE,cALT;AAMEC,QAAAA,IAAI,EAAE,oBANR;AAOEI,QAAAA,KAAK,EAAE,kBAPT;AAQEH,QAAAA,IAAI,EAAE;AARR,OAjCM,EA2CN;AACEN,QAAAA,IAAI,EAAE,UADR;AAEEC,QAAAA,KAAK,EAAE,aAFT;AAGEC,QAAAA,WAAW,EAAE,aAHf;AAIEC,QAAAA,WAAW,EAAE,0BAJf;AAKEC,QAAAA,KAAK,EAAE,cALT;AAMEC,QAAAA,IAAI,EAAE,qBANR;AAOEC,QAAAA,IAAI,EAAE,QAPR;AAQEG,QAAAA,KAAK,EACH;AATJ,OA3CM;AADV,KADM;AADH;AADM,C","sourcesContent":["export default {\n  props: {\n    groups: [\n      {\n        fields: [\n          {\n            type: 'selectMultiple',\n            title: 'Languages',\n            placeholder: 'Language selection',\n            description: 'This is the tooltip text',\n            theme: 'coorpmanager',\n            hint: '15 / 30 characters',\n            size: 'default',\n            options: [\n              {\n                name: '🇬🇧 English',\n                value: 'en',\n                selected: true\n              },\n              {\n                name: '🇩🇪 German',\n                value: 'de',\n                selected: false\n              },\n              {\n                name: '🇹🇭 Thai',\n                value: 'th',\n                selected: false\n              },\n              {\n                name: '🇪🇸 Spanish',\n                value: 'es',\n                selected: false\n              }\n            ],\n            multiple: false\n          },\n          {\n            type: 'text',\n            title: 'Playlist name',\n            placeholder: 'Playlist name',\n            description: 'This is the tooltip text',\n            theme: 'coorpmanager',\n            hint: '15 / 30 characters',\n            value: 'Marketing expert',\n            size: 'default'\n          },\n          {\n            type: 'textarea',\n            title: 'Description',\n            placeholder: 'Description',\n            description: 'This is the tooltip text',\n            theme: 'coorpmanager',\n            hint: '80 / 200 characters',\n            size: 'medium',\n            value:\n              'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis fermentum sem ac fermentum luctus. Integer eu dui magna. Donec ut tristique dui. Vestibulum non accumsan tellus. Donec luctus erat vitae aliquet viverra. Mauris malesuada tortor quis viverra vestibulum. Nullam laoreet porta massa vitae porta.'\n          }\n        ]\n      }\n    ]\n  }\n};\n"],"file":"wizard-playlists.js"}

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

@@ -0,0 +1,82 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _map2 = _interopRequireDefault(require("lodash/fp/map"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _tag = _interopRequireDefault(require("../../atom/tag"));
+
+var _buttonLink = _interopRequireDefault(require("../../atom/button-link"));
+
+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 => {
+  const {
+    bulletPointMenuButton,
+    buttonLink,
+    tags,
+    title
+  } = props;
+
+  const tagsView = _map2.default.convert({
+    cap: false
+  })((tag, index) => {
+    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
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.title,
+    title: title
+  }, title), /*#__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)));
+};
+
+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
+  }),
+  buttonLink: _propTypes.default.shape({
+    type: _propTypes.default.string,
+    label: _propTypes.default.string,
+    ariaLabel: _propTypes.default.string,
+    dataName: _propTypes.default.string,
+    icon: _propTypes.default.shape({
+      position: _propTypes.default.string,
+      type: _propTypes.default.string
+    }),
+    onClick: _propTypes.default.func
+  }),
+  tags: _propTypes.default.arrayOf(_propTypes.default.shape({
+    label: _propTypes.default.string,
+    type: _propTypes.default.oneOf(['published', 'draft', 'archived', 'revised', 'default'])
+  })),
+  title: _propTypes.default.string.isRequired
+} : {};
+var _default = ListItem;
+exports.default = _default;
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/organism/list-item/index.js"],"names":["ListItem","props","bulletPointMenuButton","buttonLink","tags","title","tagsView","convert","cap","tag","index","style","wrapper","settings","edit","propTypes","PropTypes","shape","buttonAriaLabel","string","menuAriaLabel","buttons","arrayOf","label","type","onClick","func","ariaLabel","dataName","icon","position","oneOf","isRequired"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;AACA;;AACA;;AACA;;;;AAEA,MAAMA,QAAQ,GAAGC,KAAK,IAAI;AACxB,QAAM;AAACC,IAAAA,qBAAD;AAAwBC,IAAAA,UAAxB;AAAoCC,IAAAA,IAApC;AAA0CC,IAAAA;AAA1C,MAAmDJ,KAAzD;;AACA,QAAMK,QAAQ,GAAG,cAAIC,OAAJ,CAAY;AAACC,IAAAA,GAAG,EAAE;AAAN,GAAZ,EAA0B,CAACC,GAAD,EAAMC,KAAN,KAAgB;AACzD,wBACE;AAAK,MAAA,GAAG,EAAEA,KAAV;AAAiB,MAAA,SAAS,EAAEC,eAAMF;AAAlC,oBACE,6BAAC,YAAD,EAASA,GAAT,CADF,CADF;AAKD,GANgB,EAMdL,IANc,CAAjB;;AAOA,sBACE;AAAK,IAAA,SAAS,EAAEO,eAAMC;AAAtB,kBACE;AAAK,IAAA,SAAS,EAAED,eAAMN,KAAtB;AAA6B,IAAA,KAAK,EAAEA;AAApC,KACGA,KADH,CADF,eAIE;AAAK,IAAA,SAAS,EAAEM,eAAME;AAAtB,KACGP,QADH,eAEE;AAAK,IAAA,SAAS,EAAEK,eAAMG;AAAtB,kBACE,6BAAC,mBAAD,EAAgBX,UAAhB,CADF,CAFF,eAKE,6BAAC,8BAAD,EAA2BD,qBAA3B,CALF,CAJF,CADF;AAcD,CAvBD;;AAyBAF,QAAQ,CAACe,SAAT,2CAAqB;AACnBb,EAAAA,qBAAqB,EAAEc,mBAAUC,KAAV,CAAgB;AACrCC,IAAAA,eAAe,EAAEF,mBAAUG,MADU;AAErCC,IAAAA,aAAa,EAAEJ,mBAAUG,MAFY;AAGrCE,IAAAA,OAAO,EAAEL,mBAAUM,OAAV,CACPN,mBAAUC,KAAV,CAAgB;AACd,mBAAaD,mBAAUG,MADT;AAEdI,MAAAA,KAAK,EAAEP,mBAAUG,MAFH;AAGdK,MAAAA,IAAI,EAAER,mBAAUG,MAHF;AAIdM,MAAAA,OAAO,EAAET,mBAAUU;AAJL,KAAhB,CADO,CAH4B;AAWrCD,IAAAA,OAAO,EAAET,mBAAUU;AAXkB,GAAhB,CADJ;AAcnBvB,EAAAA,UAAU,EAAEa,mBAAUC,KAAV,CAAgB;AAC1BO,IAAAA,IAAI,EAAER,mBAAUG,MADU;AAE1BI,IAAAA,KAAK,EAAEP,mBAAUG,MAFS;AAG1BQ,IAAAA,SAAS,EAAEX,mBAAUG,MAHK;AAI1BS,IAAAA,QAAQ,EAAEZ,mBAAUG,MAJM;AAK1BU,IAAAA,IAAI,EAAEb,mBAAUC,KAAV,CAAgB;AACpBa,MAAAA,QAAQ,EAAEd,mBAAUG,MADA;AAEpBK,MAAAA,IAAI,EAAER,mBAAUG;AAFI,KAAhB,CALoB;AAS1BM,IAAAA,OAAO,EAAET,mBAAUU;AATO,GAAhB,CAdO;AAyBnBtB,EAAAA,IAAI,EAAEY,mBAAUM,OAAV,CACJN,mBAAUC,KAAV,CAAgB;AACdM,IAAAA,KAAK,EAAEP,mBAAUG,MADH;AAEdK,IAAAA,IAAI,EAAER,mBAAUe,KAAV,CAAgB,CAAC,WAAD,EAAc,OAAd,EAAuB,UAAvB,EAAmC,SAAnC,EAA8C,SAA9C,CAAhB;AAFQ,GAAhB,CADI,CAzBa;AA+BnB1B,EAAAA,KAAK,EAAEW,mBAAUG,MAAV,CAAiBa;AA/BL,CAArB;eAkCehC,Q","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  const {bulletPointMenuButton, buttonLink, tags, title} = props;\n  const tagsView = map.convert({cap: false})((tag, index) => {\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      <div className={style.title} title={title}>\n        {title}\n      </div>\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};\n\nexport default ListItem;\n"],"file":"index.js"}

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

@@ -0,0 +1,53 @@
+@value breakpoints: "../../variables/breakpoints.css";
+@value mobile from breakpoints;
+@value colors: "../../variables/colors.css";
+@value xtraLightGrey from colors;
+@value cm_grey_900 from colors;
+@value primaryAdd1 from colors;
+
+.wrapper {
+  align-items: center;
+  background-color: color(xtraLightGrey a(90%));
+  border-radius: 7px;
+  box-sizing: border-box;
+  display: flex;
+  height: 60px;
+  justify-content: space-between;
+  padding: 0 24px;
+  width: 100%;
+}
+
+.title {
+  color: cm_grey_900;
+  flex-grow: 0;
+  font-family: Gilroy;
+  font-size: 16px;
+  font-stretch: normal;
+  font-style: normal;
+  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 {
+  align-items: center;
+  display: flex;
+  height: 100%; 
+}
+
+.tag {
+  margin: 0 16px 0 0; 
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.edit {
+  margin: 0 16px 0 0;
+  min-width: 93px;
+}

package/lib/organism/list-item/test/fixtures/archived.js

@@ -0,0 +1,44 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+var _default = {
+  props: {
+    id: 'default',
+    title: 'Leaders of tomorrow',
+    tags: [{
+      label: 'Archived',
+      type: 'archived'
+    }],
+    bulletPointMenuButton: {
+      buttonAriaLabel: 'aria button',
+      menuAriaLabel: 'aria menu',
+      buttons: [{
+        'data-name': 'CP-publish-button',
+        label: 'Publish',
+        type: 'default',
+        onClick: () => console.log('click')
+      }, {
+        'data-name': 'CP-delete-button',
+        label: 'Delete',
+        type: 'dangerous',
+        onClick: () => console.log('click')
+      }],
+      onClick: () => console.log('click')
+    },
+    buttonLink: {
+      type: 'secondary',
+      label: 'Edit',
+      ariaLabel: 'aria button',
+      dataName: 'default-button',
+      icon: {
+        position: 'left',
+        type: 'edit'
+      },
+      onClick: () => console.log('click')
+    },
+    bulletPointButtonOnClick: () => console.log('click')
+  }
+};
+exports.default = _default;
+//# sourceMappingURL=archived.js.map

package/lib/organism/list-item/test/fixtures/archived.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/organism/list-item/test/fixtures/archived.js"],"names":["props","id","title","tags","label","type","bulletPointMenuButton","buttonAriaLabel","menuAriaLabel","buttons","onClick","console","log","buttonLink","ariaLabel","dataName","icon","position","bulletPointButtonOnClick"],"mappings":";;;;eAAe;AACbA,EAAAA,KAAK,EAAE;AACLC,IAAAA,EAAE,EAAE,SADC;AAELC,IAAAA,KAAK,EAAE,qBAFF;AAGLC,IAAAA,IAAI,EAAE,CACJ;AACEC,MAAAA,KAAK,EAAE,UADT;AAEEC,MAAAA,IAAI,EAAE;AAFR,KADI,CAHD;AASLC,IAAAA,qBAAqB,EAAE;AACrBC,MAAAA,eAAe,EAAE,aADI;AAErBC,MAAAA,aAAa,EAAE,WAFM;AAGrBC,MAAAA,OAAO,EAAE,CACP;AACE,qBAAa,mBADf;AAEEL,QAAAA,KAAK,EAAE,SAFT;AAGEC,QAAAA,IAAI,EAAE,SAHR;AAIEK,QAAAA,OAAO,EAAE,MAAMC,OAAO,CAACC,GAAR,CAAY,OAAZ;AAJjB,OADO,EAOP;AACE,qBAAa,kBADf;AAEER,QAAAA,KAAK,EAAE,QAFT;AAGEC,QAAAA,IAAI,EAAE,WAHR;AAIEK,QAAAA,OAAO,EAAE,MAAMC,OAAO,CAACC,GAAR,CAAY,OAAZ;AAJjB,OAPO,CAHY;AAiBrBF,MAAAA,OAAO,EAAE,MAAMC,OAAO,CAACC,GAAR,CAAY,OAAZ;AAjBM,KATlB;AA4BLC,IAAAA,UAAU,EAAE;AACVR,MAAAA,IAAI,EAAE,WADI;AAEVD,MAAAA,KAAK,EAAE,MAFG;AAGVU,MAAAA,SAAS,EAAE,aAHD;AAIVC,MAAAA,QAAQ,EAAE,gBAJA;AAKVC,MAAAA,IAAI,EAAE;AACJC,QAAAA,QAAQ,EAAE,MADN;AAEJZ,QAAAA,IAAI,EAAE;AAFF,OALI;AASVK,MAAAA,OAAO,EAAE,MAAMC,OAAO,CAACC,GAAR,CAAY,OAAZ;AATL,KA5BP;AAuCLM,IAAAA,wBAAwB,EAAE,MAAMP,OAAO,CAACC,GAAR,CAAY,OAAZ;AAvC3B;AADM,C","sourcesContent":["export default {\n  props: {\n    id: 'default',\n    title: 'Leaders of tomorrow',\n    tags: [\n      {\n        label: 'Archived',\n        type: 'archived'\n      }\n    ],\n    bulletPointMenuButton: {\n      buttonAriaLabel: 'aria button',\n      menuAriaLabel: 'aria menu',\n      buttons: [\n        {\n          'data-name': 'CP-publish-button',\n          label: 'Publish',\n          type: 'default',\n          onClick: () => console.log('click')\n        },\n        {\n          'data-name': 'CP-delete-button',\n          label: 'Delete',\n          type: 'dangerous',\n          onClick: () => console.log('click')\n        }\n      ],\n      onClick: () => console.log('click')\n    },\n    buttonLink: {\n      type: 'secondary',\n      label: 'Edit',\n      ariaLabel: 'aria button',\n      dataName: 'default-button',\n      icon: {\n        position: 'left',\n        type: 'edit'\n      },\n      onClick: () => console.log('click')\n    },\n    bulletPointButtonOnClick: () => console.log('click')\n  }\n};\n"],"file":"archived.js"}

package/lib/organism/list-item/test/fixtures/draft.js

@@ -0,0 +1,44 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+var _default = {
+  props: {
+    id: 'default',
+    title: 'Leaders of tomorrow',
+    tags: [{
+      label: 'Draft',
+      type: 'draft'
+    }],
+    bulletPointMenuButton: {
+      buttonAriaLabel: 'aria button',
+      menuAriaLabel: 'aria menu',
+      buttons: [{
+        'data-name': 'CP-publish-button',
+        label: 'Publish',
+        type: 'default',
+        onClick: () => console.log('click')
+      }, {
+        'data-name': 'CP-delete-button',
+        label: 'Delete',
+        type: 'dangerous',
+        onClick: () => console.log('click')
+      }],
+      onClick: () => console.log('click')
+    },
+    buttonLink: {
+      type: 'secondary',
+      label: 'Edit',
+      ariaLabel: 'aria button',
+      dataName: 'default-button',
+      icon: {
+        position: 'left',
+        type: 'edit'
+      },
+      onClick: () => console.log('click')
+    },
+    bulletPointButtonOnClick: () => console.log('click')
+  }
+};
+exports.default = _default;
+//# sourceMappingURL=draft.js.map

package/lib/organism/list-item/test/fixtures/draft.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/organism/list-item/test/fixtures/draft.js"],"names":["props","id","title","tags","label","type","bulletPointMenuButton","buttonAriaLabel","menuAriaLabel","buttons","onClick","console","log","buttonLink","ariaLabel","dataName","icon","position","bulletPointButtonOnClick"],"mappings":";;;;eAAe;AACbA,EAAAA,KAAK,EAAE;AACLC,IAAAA,EAAE,EAAE,SADC;AAELC,IAAAA,KAAK,EAAE,qBAFF;AAGLC,IAAAA,IAAI,EAAE,CACJ;AACEC,MAAAA,KAAK,EAAE,OADT;AAEEC,MAAAA,IAAI,EAAE;AAFR,KADI,CAHD;AASLC,IAAAA,qBAAqB,EAAE;AACrBC,MAAAA,eAAe,EAAE,aADI;AAErBC,MAAAA,aAAa,EAAE,WAFM;AAGrBC,MAAAA,OAAO,EAAE,CACP;AACE,qBAAa,mBADf;AAEEL,QAAAA,KAAK,EAAE,SAFT;AAGEC,QAAAA,IAAI,EAAE,SAHR;AAIEK,QAAAA,OAAO,EAAE,MAAMC,OAAO,CAACC,GAAR,CAAY,OAAZ;AAJjB,OADO,EAOP;AACE,qBAAa,kBADf;AAEER,QAAAA,KAAK,EAAE,QAFT;AAGEC,QAAAA,IAAI,EAAE,WAHR;AAIEK,QAAAA,OAAO,EAAE,MAAMC,OAAO,CAACC,GAAR,CAAY,OAAZ;AAJjB,OAPO,CAHY;AAiBrBF,MAAAA,OAAO,EAAE,MAAMC,OAAO,CAACC,GAAR,CAAY,OAAZ;AAjBM,KATlB;AA4BLC,IAAAA,UAAU,EAAE;AACVR,MAAAA,IAAI,EAAE,WADI;AAEVD,MAAAA,KAAK,EAAE,MAFG;AAGVU,MAAAA,SAAS,EAAE,aAHD;AAIVC,MAAAA,QAAQ,EAAE,gBAJA;AAKVC,MAAAA,IAAI,EAAE;AACJC,QAAAA,QAAQ,EAAE,MADN;AAEJZ,QAAAA,IAAI,EAAE;AAFF,OALI;AASVK,MAAAA,OAAO,EAAE,MAAMC,OAAO,CAACC,GAAR,CAAY,OAAZ;AATL,KA5BP;AAuCLM,IAAAA,wBAAwB,EAAE,MAAMP,OAAO,CAACC,GAAR,CAAY,OAAZ;AAvC3B;AADM,C","sourcesContent":["export default {\n  props: {\n    id: 'default',\n    title: 'Leaders of tomorrow',\n    tags: [\n      {\n        label: 'Draft',\n        type: 'draft'\n      }\n    ],\n    bulletPointMenuButton: {\n      buttonAriaLabel: 'aria button',\n      menuAriaLabel: 'aria menu',\n      buttons: [\n        {\n          'data-name': 'CP-publish-button',\n          label: 'Publish',\n          type: 'default',\n          onClick: () => console.log('click')\n        },\n        {\n          'data-name': 'CP-delete-button',\n          label: 'Delete',\n          type: 'dangerous',\n          onClick: () => console.log('click')\n        }\n      ],\n      onClick: () => console.log('click')\n    },\n    buttonLink: {\n      type: 'secondary',\n      label: 'Edit',\n      ariaLabel: 'aria button',\n      dataName: 'default-button',\n      icon: {\n        position: 'left',\n        type: 'edit'\n      },\n      onClick: () => console.log('click')\n    },\n    bulletPointButtonOnClick: () => console.log('click')\n  }\n};\n"],"file":"draft.js"}

package/lib/organism/list-item/test/fixtures/published.js

@@ -0,0 +1,44 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+var _default = {
+  props: {
+    id: 'default',
+    title: 'Leaders of tomorrow',
+    tags: [{
+      label: 'Published',
+      type: 'published'
+    }],
+    bulletPointMenuButton: {
+      buttonAriaLabel: 'aria button',
+      menuAriaLabel: 'aria menu',
+      buttons: [{
+        'data-name': 'CP-archive-button',
+        label: 'Archive',
+        type: 'default',
+        onClick: () => console.log('click')
+      }, {
+        'data-name': 'CP-delete-button',
+        label: 'Delete',
+        type: 'dangerous',
+        onClick: () => console.log('click')
+      }],
+      onClick: () => console.log('click')
+    },
+    buttonLink: {
+      type: 'secondary',
+      label: 'Edit',
+      ariaLabel: 'aria button',
+      dataName: 'default-button',
+      icon: {
+        position: 'left',
+        type: 'edit'
+      },
+      onClick: () => console.log('click')
+    },
+    bulletPointButtonOnClick: () => console.log('click')
+  }
+};
+exports.default = _default;
+//# sourceMappingURL=published.js.map

package/lib/organism/list-item/test/fixtures/published.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/organism/list-item/test/fixtures/published.js"],"names":["props","id","title","tags","label","type","bulletPointMenuButton","buttonAriaLabel","menuAriaLabel","buttons","onClick","console","log","buttonLink","ariaLabel","dataName","icon","position","bulletPointButtonOnClick"],"mappings":";;;;eAAe;AACbA,EAAAA,KAAK,EAAE;AACLC,IAAAA,EAAE,EAAE,SADC;AAELC,IAAAA,KAAK,EAAE,qBAFF;AAGLC,IAAAA,IAAI,EAAE,CACJ;AACEC,MAAAA,KAAK,EAAE,WADT;AAEEC,MAAAA,IAAI,EAAE;AAFR,KADI,CAHD;AASLC,IAAAA,qBAAqB,EAAE;AACrBC,MAAAA,eAAe,EAAE,aADI;AAErBC,MAAAA,aAAa,EAAE,WAFM;AAGrBC,MAAAA,OAAO,EAAE,CACP;AACE,qBAAa,mBADf;AAEEL,QAAAA,KAAK,EAAE,SAFT;AAGEC,QAAAA,IAAI,EAAE,SAHR;AAIEK,QAAAA,OAAO,EAAE,MAAMC,OAAO,CAACC,GAAR,CAAY,OAAZ;AAJjB,OADO,EAOP;AACE,qBAAa,kBADf;AAEER,QAAAA,KAAK,EAAE,QAFT;AAGEC,QAAAA,IAAI,EAAE,WAHR;AAIEK,QAAAA,OAAO,EAAE,MAAMC,OAAO,CAACC,GAAR,CAAY,OAAZ;AAJjB,OAPO,CAHY;AAiBrBF,MAAAA,OAAO,EAAE,MAAMC,OAAO,CAACC,GAAR,CAAY,OAAZ;AAjBM,KATlB;AA4BLC,IAAAA,UAAU,EAAE;AACVR,MAAAA,IAAI,EAAE,WADI;AAEVD,MAAAA,KAAK,EAAE,MAFG;AAGVU,MAAAA,SAAS,EAAE,aAHD;AAIVC,MAAAA,QAAQ,EAAE,gBAJA;AAKVC,MAAAA,IAAI,EAAE;AACJC,QAAAA,QAAQ,EAAE,MADN;AAEJZ,QAAAA,IAAI,EAAE;AAFF,OALI;AASVK,MAAAA,OAAO,EAAE,MAAMC,OAAO,CAACC,GAAR,CAAY,OAAZ;AATL,KA5BP;AAuCLM,IAAAA,wBAAwB,EAAE,MAAMP,OAAO,CAACC,GAAR,CAAY,OAAZ;AAvC3B;AADM,C","sourcesContent":["export default {\n  props: {\n    id: 'default',\n    title: 'Leaders of tomorrow',\n    tags: [\n      {\n        label: 'Published',\n        type: 'published'\n      }\n    ],\n    bulletPointMenuButton: {\n      buttonAriaLabel: 'aria button',\n      menuAriaLabel: 'aria menu',\n      buttons: [\n        {\n          'data-name': 'CP-archive-button',\n          label: 'Archive',\n          type: 'default',\n          onClick: () => console.log('click')\n        },\n        {\n          'data-name': 'CP-delete-button',\n          label: 'Delete',\n          type: 'dangerous',\n          onClick: () => console.log('click')\n        }\n      ],\n      onClick: () => console.log('click')\n    },\n    buttonLink: {\n      type: 'secondary',\n      label: 'Edit',\n      ariaLabel: 'aria button',\n      dataName: 'default-button',\n      icon: {\n        position: 'left',\n        type: 'edit'\n      },\n      onClick: () => console.log('click')\n    },\n    bulletPointButtonOnClick: () => console.log('click')\n  }\n};\n"],"file":"published.js"}

package/lib/organism/list-item/test/fixtures/revised.js

@@ -0,0 +1,46 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+var _default = {
+  props: {
+    id: 'default',
+    title: 'Leaders of tomorrow',
+    tags: [{
+      label: 'Ongoing changes',
+      type: 'revised'
+    }, {
+      label: 'Published',
+      type: 'published'
+    }],
+    buttonLink: {
+      type: 'secondary',
+      label: 'Edit',
+      ariaLabel: 'aria button',
+      dataName: 'default-button',
+      icon: {
+        position: 'left',
+        type: 'edit'
+      },
+      onClick: () => console.log('click')
+    },
+    bulletPointMenuButton: {
+      buttonAriaLabel: 'aria button',
+      menuAriaLabel: 'aria menu',
+      buttons: [{
+        'data-name': 'CP-publish-button',
+        label: 'Publish',
+        type: 'default',
+        onClick: () => console.log('click')
+      }, {
+        'data-name': 'CP-delete-button',
+        label: 'Delete',
+        type: 'dangerous',
+        onClick: () => console.log('click')
+      }],
+      onClick: () => console.log('click')
+    }
+  }
+};
+exports.default = _default;
+//# sourceMappingURL=revised.js.map

package/lib/organism/list-item/test/fixtures/revised.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/organism/list-item/test/fixtures/revised.js"],"names":["props","id","title","tags","label","type","buttonLink","ariaLabel","dataName","icon","position","onClick","console","log","bulletPointMenuButton","buttonAriaLabel","menuAriaLabel","buttons"],"mappings":";;;;eAAe;AACbA,EAAAA,KAAK,EAAE;AACLC,IAAAA,EAAE,EAAE,SADC;AAELC,IAAAA,KAAK,EAAE,qBAFF;AAGLC,IAAAA,IAAI,EAAE,CACJ;AACEC,MAAAA,KAAK,EAAE,iBADT;AAEEC,MAAAA,IAAI,EAAE;AAFR,KADI,EAKJ;AACED,MAAAA,KAAK,EAAE,WADT;AAEEC,MAAAA,IAAI,EAAE;AAFR,KALI,CAHD;AAcLC,IAAAA,UAAU,EAAE;AACVD,MAAAA,IAAI,EAAE,WADI;AAEVD,MAAAA,KAAK,EAAE,MAFG;AAGVG,MAAAA,SAAS,EAAE,aAHD;AAIVC,MAAAA,QAAQ,EAAE,gBAJA;AAKVC,MAAAA,IAAI,EAAE;AACJC,QAAAA,QAAQ,EAAE,MADN;AAEJL,QAAAA,IAAI,EAAE;AAFF,OALI;AASVM,MAAAA,OAAO,EAAE,MAAMC,OAAO,CAACC,GAAR,CAAY,OAAZ;AATL,KAdP;AAyBLC,IAAAA,qBAAqB,EAAE;AACrBC,MAAAA,eAAe,EAAE,aADI;AAErBC,MAAAA,aAAa,EAAE,WAFM;AAGrBC,MAAAA,OAAO,EAAE,CACP;AACE,qBAAa,mBADf;AAEEb,QAAAA,KAAK,EAAE,SAFT;AAGEC,QAAAA,IAAI,EAAE,SAHR;AAIEM,QAAAA,OAAO,EAAE,MAAMC,OAAO,CAACC,GAAR,CAAY,OAAZ;AAJjB,OADO,EAOP;AACE,qBAAa,kBADf;AAEET,QAAAA,KAAK,EAAE,QAFT;AAGEC,QAAAA,IAAI,EAAE,WAHR;AAIEM,QAAAA,OAAO,EAAE,MAAMC,OAAO,CAACC,GAAR,CAAY,OAAZ;AAJjB,OAPO,CAHY;AAiBrBF,MAAAA,OAAO,EAAE,MAAMC,OAAO,CAACC,GAAR,CAAY,OAAZ;AAjBM;AAzBlB;AADM,C","sourcesContent":["export default {\n  props: {\n    id: 'default',\n    title: 'Leaders of tomorrow',\n    tags: [\n      {\n        label: 'Ongoing changes',\n        type: 'revised'\n      },\n      {\n        label: 'Published',\n        type: 'published'\n      }\n    ],\n\n    buttonLink: {\n      type: 'secondary',\n      label: 'Edit',\n      ariaLabel: 'aria button',\n      dataName: 'default-button',\n      icon: {\n        position: 'left',\n        type: 'edit'\n      },\n      onClick: () => console.log('click')\n    },\n    bulletPointMenuButton: {\n      buttonAriaLabel: 'aria button',\n      menuAriaLabel: 'aria menu',\n      buttons: [\n        {\n          'data-name': 'CP-publish-button',\n          label: 'Publish',\n          type: 'default',\n          onClick: () => console.log('click')\n        },\n        {\n          'data-name': 'CP-delete-button',\n          label: 'Delete',\n          type: 'dangerous',\n          onClick: () => console.log('click')\n        }\n      ],\n      onClick: () => console.log('click')\n    }\n  }\n};\n"],"file":"revised.js"}

package/lib/organism/setup-header/style.css

@@ -1,6 +1,7 @@
 @value breakpoints: "../../variables/breakpoints.css";
 @value mobile from breakpoints;
 @value cm_tablet from breakpoints;
+@value desktop from breakpoints;
 @value colors: "../../variables/colors.css";
 @value light from colors;
 @value medium from colors;
@@ -17,12 +18,11 @@
 
 .container {
   background-color: white;
-  height: 80px;
   box-sizing: border-box;
   z-index: 1100;
-  margin: 24px 40px;
   display: flex;
   flex-direction: column;
+  width: 100%;
 }
 
 [data-name="logout-hide"] {
@@ -147,6 +147,20 @@
   display: none;
 }
 
+@media desktop {
+  .platformListIcon {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 0 16px 0 0;
+    width: 44px;
+  }
+
+  .platformList {
+    display: none;
+  }
+}
+
 @media cm_tablet {
   [data-name="logout-show"] {
     position: absolute;
@@ -206,11 +220,6 @@
   .logOut {
     display: none;
   }
-
-  .container {
-    margin: 24px 32px;
-  }
-  
 }
 
 @media mobile {