template custom skill dashboard

packages/@coorpacademy-components/src/atom/title/index.js

@@ -1,7 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import {isEmpty} from 'lodash/fp';
 import Icon from '../icon';
 import Tag from '../tag';
+import ButtonLink from '../button-link';
 import style from './style.css';
 
 const getTitleStyle = (type, size) => {
@@ -51,7 +53,8 @@ const Title = props => {
     titleSize = 'standard',
     subtitleSize = 'standard',
     icon,
-    tag
+    tag,
+    button
   } = props;
   const titleStyle = getTitleStyle(type, titleSize);
   const subtitleStyle = getSubtitleStyle(type, subtitleSize);
@@ -61,12 +64,15 @@ const Title = props => {
   return (
     <div className={style.container}>
       {icon ? <Icon {...icon} className={style.icon} /> : null}
-      <div>
-        <div className={titleStyle} data-name={dataName}>
-          {title}
-          {tag ? <Tag {...tag} /> : null}
+      <div className={style.titleContainer}>
+        <div>
+          <div className={titleStyle} data-name={dataName}>
+            {title}
+            {tag ? <Tag {...tag} /> : null}
+          </div>
+          {subtitleSection}
         </div>
-        {subtitleSection}
+        {!isEmpty(button) ? <ButtonLink {...button} /> : null}
       </div>
     </div>
   );
@@ -86,6 +92,7 @@ Title.propTypes = {
     'extra-small'
   ]),
   icon: PropTypes.shape(Icon.propTypes),
-  tag: PropTypes.shape(Tag.propTypes)
+  tag: PropTypes.shape(Tag.propTypes),
+  button: PropTypes.shape(ButtonLink.propTypes)
 };
 export default Title;

packages/@coorpacademy-components/src/atom/title/style.css

@@ -14,6 +14,14 @@
     color: cm_grey_700;
 }
 
+.titleContainer {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 8px;
+    width: 100%;
+}
+
 .titlePage {
     composes: title;
     font-size: 32px;
@@ -30,7 +38,7 @@
 
 .titleFormGroupLightWeight {
     composes: titleFormGroup;
-    font-weight: 600;
+    font-weight: normal;
 }
 
 .mediumTitleFormGroup {

packages/@coorpacademy-components/src/atom/title/test/fixtures/form-group-title-with-button.js

@@ -0,0 +1,26 @@
+import buttonProps from '../../../button-link/test/fixtures/button-primary-icon-left';
+
+export default {
+  props: {
+    type: 'form-group',
+    title: 'Roles',
+    subtitle: 'lorem ipsum dolor sit amet consectetur adipiscing elit',
+    button: {
+      ...buttonProps.props,
+      label: 'Create skill',
+      icon: {
+        position: 'left',
+        faIcon: {
+          name: 'plus',
+          color: 'white',
+          customStyle: {
+            padding: 0
+          }
+        }
+      },
+      customStyle: {
+        width: 'fit-content'
+      }
+    }
+  }
+};

packages/@coorpacademy-components/src/molecule/bullet-point-menu-button/style.css

@@ -33,6 +33,7 @@
   transition: visibility 0.5s ease, opacity 0.5s ease;  background-color: #ffffff;
   visibility: hidden;
   opacity: 0;
+  z-index: 99;
 }
 
 .visible {

packages/@coorpacademy-components/src/organism/list-item/index.js

@@ -111,8 +111,8 @@ const ListItem = (
             <div className={style.title} title={title}>
               {title}
             </div>
-            {provider ? (
-              <Tag label={provider} type="default" className={style.providerTag} />
+            {!isEmpty(provider) ? (
+              <Tag label={provider.label} type={provider.type} className={style.providerTag} />
             ) : null}
           </div>
           {subtitle ? <div className={style.subtitle}>{subtitle}</div> : null}
@@ -148,7 +148,10 @@ ListItem.contextTypes = {
 ListItem.propTypes = {
   title: PropTypes.string.isRequired,
   subtitle: PropTypes.string,
-  provider: PropTypes.string,
+  provider: PropTypes.shape({
+    label: PropTypes.string,
+    type: PropTypes.oneOf(['info', 'default', 'success', 'failure', 'warning', 'progress'])
+  }),
   selected: PropTypes.bool,
   selectedColor: PropTypes.string,
   dataColumns: PropTypes.arrayOf(

packages/@coorpacademy-components/src/organism/list-item/style.css

@@ -8,6 +8,7 @@
 @value cm_grey_500 from colors;
 
 .wrapper {
+  font-family: Gilroy;
   align-items: center;
   background-color: color(xtraLightGrey a(90%));
   border-radius: 7px;
@@ -34,11 +35,10 @@
   flex-direction: column;
   justify-content: center;
   flex: 2 0 0;
-  font-family: Gilroy;
   font-size: 16px;
   font-stretch: normal;
   font-style: normal;
-  font-weight: bold;
+  font-weight: 600;
   line-height: 1.38;
   letter-spacing: normal;
   text-align: left;
@@ -47,9 +47,8 @@
 }
 
 .subtitle {
-  font-size: 14px;
-  font-weight: 500;
-  line-height: 20px;
+  font-size: 12px;
+  line-height: 16px;
   color: cm_grey_400;
 }
 
@@ -97,7 +96,6 @@
 .order {
   width: 6px;
   height: 20px;
-  font-family: 'Gilroy';
   font-style: normal;
   font-weight: 600;
   font-size: 14px;

packages/@coorpacademy-components/src/organism/list-item/test/fixtures/new-design-published-coorp-provider.js → packages/@coorpacademy-components/src/organism/list-item/test/fixtures/custom-skill.js

@@ -2,12 +2,15 @@ export default {
   props: {
     id: 'default',
     title: 'Leaders of tomorrow',
-    provider: 'Coorpacademy',
+    provider: {
+      label: 'Coorpacademy',
+      type: 'info'
+    },
     subtitle: '23 courses',
     tags: [
       {
-        label: 'Archived',
-        type: 'warning'
+        label: 'Published',
+        type: 'success'
       }
     ],
     leftIcon: {
@@ -18,7 +21,7 @@ export default {
       preset: 'xl'
     },
     buttonLink: {
-      'aria-label': 'Edit',
+      'aria-label': 'See details',
       type: 'primary',
       customStyle: {
         width: 'fit-content',
@@ -28,25 +31,43 @@ export default {
       icon: {
         position: 'left',
         faIcon: {
-          name: 'edit',
+          name: 'eye',
           color: '#515161',
           size: 16
         }
       },
       onClick: () => console.log('click')
     },
     bulletPointMenuButton: {
-      buttonAriaLabel: 'aria button',
+      buttonAriaLabel: 'More',
       menuAriaLabel: 'aria menu',
       buttons: [
         {
-          'data-name': 'CP-publish-button',
-          label: 'Publish',
+          'data-name': 'custom-skill-archive-button',
+          icon: {
+            position: 'left',
+            faIcon: {
+              name: 'folder-open',
+              color: '#515161',
+              size: 14,
+              customStyle: {padding: 0}
+            }
+          },
+          label: 'Archive',
           type: 'default',
           onClick: () => console.log('click')
         },
         {
-          'data-name': 'CP-delete-button',
+          'data-name': 'custom-skill-delete-button',
+          icon: {
+            position: 'left',
+            faIcon: {
+              name: 'trash',
+              color: '#991100',
+              size: 14,
+              customStyle: {padding: 0}
+            }
+          },
           label: 'Delete',
           type: 'dangerous',
           onClick: () => console.log('click')

packages/@coorpacademy-components/src/organism/list-items/index.js

@@ -9,6 +9,7 @@ import ButtonLink from '../../atom/button-link';
 import SelectMultiple from '../../molecule/select-multiple';
 import ExpandibleActionableTable from '../../molecule/expandible-actionable-table';
 import Loader from '../../atom/loader';
+import Search from '../../atom/input-search';
 import style from './style.css';
 
 const buildListItemsView = (content, ariaLabel, selectMultiple) => {
@@ -79,23 +80,31 @@ const ListItems = ({
   selectMultiple,
   content,
   'aria-label': ariaLabel,
-  isFetching
+  isFetching,
+  search
 }) => {
   const contentView = buildContentView(content, ariaLabel, selectMultiple);
   return (
     <div>
       <div className={style.header}>
         <div className={style.title}>
-          <Title title={title} type={'form-group'} data-name={'list-title'} />
+          <Title
+            title={title}
+            type="form-group"
+            titleSize="standard-light-weight"
+            data-name="list-title"
+          />
         </div>
-        <div className={style.actionsWrapper}>
-          {selectMultiple ? (
-            <div className={style.selectMultiple}>
-              <SelectMultiple {...selectMultiple} />
-            </div>
-          ) : null}
-
-          <ButtonLink {...buttonLink} />
+        <div className={style.inputWrapper}>
+          {!isEmpty(search) ? <Search {...search} /> : null}
+          <div className={style.actionsWrapper}>
+            {!isEmpty(selectMultiple) ? (
+              <div className={style.selectMultiple}>
+                <SelectMultiple {...selectMultiple} />
+              </div>
+            ) : null}
+            {!isEmpty(buttonLink) ? <ButtonLink {...buttonLink} /> : null}
+          </div>
         </div>
       </div>
       {isFetching ? (
@@ -128,7 +137,8 @@ ListItems.propTypes = {
     })
   ]),
   title: PropTypes.string,
-  isFetching: PropTypes.bool
+  isFetching: PropTypes.bool,
+  search: PropTypes.shape(Search.propTypes)
 };
 
 export default ListItems;

packages/@coorpacademy-components/src/organism/list-items/style.css

@@ -24,7 +24,7 @@
 .title {
   font-family: Gilroy;
   font-size: 20px;
-  font-weight: bold;
+  font-weight: 600;
   font-stretch: normal;
   font-style: normal;
   line-height: 1.4;
@@ -102,4 +102,10 @@
   align-items: center;
   height: 50vh;
   width: 100%;
-}
+}
+
+.inputWrapper {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}