@sk-web-gui/core 0.1.71 → 0.1.72

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sk-web-gui/core",
-  "version": "0.1.71",
+  "version": "0.1.72",
   "license": "MIT",
   "main": "src/index.js",
   "files": [
@@ -31,5 +31,5 @@
     "postcss-import": "^14.0.2",
     "tailwindcss": "^2.2.4"
   },
-  "gitHead": "da5a8271e573b0d6fa137cb15ab1a8bffde0a467"
+  "gitHead": "117ee0f6d06650b88bbece69606efdcd4d8be836"
 }

package/src/components/badge.js

@@ -59,6 +59,7 @@ function badgeOutline(colors) {
         },
       },
 
+      
       "&[data-color='primary']": {
         '@apply border-primary': {},
         '@apply text-primary': {},
@@ -86,7 +87,7 @@ module.exports = badge = (colors) => ({
     '@apply relative': {},
     '@apply m-0': {},
     '@apply inline-flex items-center justify-center content-center align-middle': {},
-    '@apply font-medium leading-none': {},
+    '@apply font-sans leading-none': {},
 
     '&-fullrounded': {
       '@apply rounded-full': {},
@@ -104,55 +105,103 @@ module.exports = badge = (colors) => ({
     // sizing
     '&-sm': {
       '@apply text-opacity-0 text-[0rem] overflow-hidden rounded-full': {},
-      minHeight: '9px',
-      maxHeight: '9px',
-      minWidth: '9px',
+      minHeight: '10px',
+      maxHeight: '10px',
+      minWidth: '10px',
+
+      '&.noborder': {
+        '@apply border-none': {},
+        minHeight: '6px',
+        maxHeight: '6px',
+        minWidth: '6px',
+      }
     },
 
     '&-md': {
       '@apply text-xs font-bold': {},
-      minHeight: '23px',
-      maxHeight: '23px',
-      minWidth: '23px',
+      minHeight: '24px',
+      maxHeight: '24px',
+      minWidth: '24px',
+
+      '&.noborder': {
+        '@apply border-none': {},
+        minHeight: '20px',
+        maxHeight: '20px',
+        minWidth: '20px',
+      }
 
     },
 
     '&-lg': {
       '@apply text-sm font-bold': {},
-      minHeight: '27px',
-      maxHeight: '27px',
-      minWidth: '27px',
+      minHeight: '28px',
+      maxHeight: '28px',
+      minWidth: '28px',
+
+      '&.noborder': {
+        '@apply border-none': {},
+        minHeight: '24px',
+        maxHeight: '24px',
+        minWidth: '24px',
+      }
 
     },
 
     '&-standard-sm': {
       '@apply right-[-4px] self-center' : {},
+      '&.noborder': {
+        '@apply right-[-5px]': {},
+      }
     },
     '&-standard-md': {
       '@apply right-[-4px] self-center': {},
+      '&.noborder': {
+        '@apply right-[-5px]': {},
+      }
     },
     '&-standard-lg': {
       '@apply right-[-4px] self-center': {},
+      '&.noborder': {
+        '@apply right-[-5px]': {},
+      }
     },
 
     '&-super-sm': {
       '@apply right-[-2px] top-[-5px]': {},
+      '&.noborder': {
+        '@apply right-[-3px]': {},
+      }
     },
     '&-super-md': {
       '@apply right-[-3px] top-[-8px]': {},
+      '&.noborder': {
+        '@apply right-[-4px]': {},
+      }
     },
     '&-super-lg': {
       '@apply right-[-4px] top-[-8px]': {},
+      '&.noborder': {
+        '@apply right-[-5px]': {},
+      }
     },
 
     '&-superoverlap-sm': {
       '@apply right-[3px] top-[-5px]': {},
+      '&.noborder': {
+        '@apply right-[2px]': {},
+      }
     },
     '&-superoverlap-md': {
       '@apply right-[8px] top-[-6px]': {},
+      '&.noborder': {
+        '@apply right-[7px]': {},
+      }
     },
     '&-superoverlap-lg': {
       '@apply right-[8px] top-[-8px]': {},
+      '&.noborder': {
+        '@apply right-[7px]': {},
+      }
     },
 
 

package/src/components/forms.js

@@ -260,9 +260,20 @@ module.exports = Forms = (colors) => ({
   },
 
   '.form-textarea': {
-    //"@apply leading-tight": {},
-    minHeight: '5rem',
+    maxHeight: 'none',
+    '&.form-field': {
+      '&-sm': {
+        '@apply py-[0.85rem] min-h-[4rem]': {},
+      },
+
+      '&-md': {
+        '@apply py-[0.9rem] min-h-[4.4rem]': {},
+      },
 
+      '&-lg': {
+        '@apply py-[1.1rem] min-h-[4.8rem]': {},
+      },
+    },
     '&-counter': {
       '@apply mt-xs text-right': {},
     },

package/src/components/profile-picture.js

@@ -0,0 +1,14 @@
+module.exports = ProfilePicture = () => ({
+  '.profile-picture': {
+    '@apply relative overflow-hidden flex-shrink-0 text-xs leading-none flex items-center justify-center text-center w-[48px] h-[48px] mr-sm rounded-full border-2 border-primary':
+      {},
+
+    '.profile-picture-img': {
+      '@apply bg-cover absolute inset-0 bg-center text-xs leading-none': {},
+    },
+    '.icon': {
+      width: '3.8rem!important',
+      height: '3.8rem!important',
+    },
+  },
+});

package/src/components/profile.js

@@ -0,0 +1,33 @@
+module.exports = Profile = () => ({
+  '.profile-container': {
+    '@apply flex items-center': {},
+
+    '.profile-title': {
+      '@apply font-bold text-base m-0': {},
+    },
+    '.profile-subtitle': {
+      '@apply text-sm leading-[20px] m-0': {},
+    },
+
+    '&.minimal': {
+      '.profile-title': {
+        overflow: 'hidden',
+        'text-overflow': 'ellipsis',
+        display: '-webkit-box',
+        '-webkit-line-clamp': '1' /* number of lines to show */,
+        'line-clamp': '1',
+        '-webkit-box-orient': 'vertical',
+      },
+      '.profile-subtitle': {
+        overflow: 'hidden',
+        'text-overflow': 'ellipsis',
+        display: '-webkit-box',
+        '-webkit-line-clamp': '1' /* number of lines to show */,
+        'line-clamp': '1',
+        '-webkit-box-orient': 'vertical',
+      },
+    },
+
+    // '&.truncate': { '@apply truncate pr-md': {} },
+  },
+});

package/src/components/side-menu.js

@@ -38,7 +38,7 @@ module.exports = Menu = () => ({
       },
 
       '&-label': {
-        '@apply flex-grow select-none': {},
+        '@apply flex-grow select-none flex items-center': {},
       },
 
       '&.active': {
@@ -58,20 +58,20 @@ module.exports = Menu = () => ({
         '@apply min-h-[48px] max-h-[48px] relative flex flex-wrap items-center': {},
 
         '.menu-item-link': {
-          '@apply flex-grow flex items-center text-base text-left justify-start py-sm pr-sm h-full': {},
+          '@apply flex-grow relative flex items-center text-base text-left justify-start py-sm pr-sm h-full': {},
         },
 
         '.expand': {
           '@apply w-[50px] h-full flex justify-center items-center ml-auto p-0': {},
 
-          span: {
+          '&-button': {
             '@apply flex justify-center items-center border-l border-gray-stroke h-[24px] w-[45px]': {},
           },
         },
       },
 
       '&.open': {
-        '&:not(.moved-away) + .menu-item:not(.new-item) > .wrapper': {
+        '& + .menu-item > .wrapper': {
           '@apply border-t': {},
         },
       },
@@ -96,7 +96,7 @@ module.exports = Menu = () => ({
         },
 
         '& .menu-item-move-button': {
-          '@apply -translate-x-full text-gray-stroke absolute py-sm inset-y-0 my-auto': {},
+          '@apply -translate-x-full no-underline text-gray-stroke absolute py-sm inset-y-0 my-auto': {},
 
           svg: {
             '@apply h-full': {},
@@ -106,43 +106,7 @@ module.exports = Menu = () => ({
           },
         },
 
-        '.menu-item-error': {
-          '@apply text-error -ml-[5px] absolute -translate-x-full': {},
-        },
-
-        '&.moved-away': {
-          '@apply text-gray pointer-events-none': {},
-
-          '.menu-item-link': {
-            '@apply opacity-[78%] relative': {},
-
-            '&::before': {
-              '@apply absolute -translate-x-full -ml-sm block w-[10px] h-[10px] rounded-full bg-warning': {},
-              content: '""',
-            },
-          },
-
-          '.menu-item-error, .menu-item-changes, .items': {
-            '@apply hidden': {},
-          },
-
-          '.menu-item-changes': {
-            '@apply bg-gray': {},
-          },
-
-          '.menu-item-move-button': {
-            '@apply hidden': {},
-          },
-
-          '.expand': {
-            '@apply opacity-[78%]': {},
-            path: {
-              '@apply fill-gray-stroke': {},
-            },
-          },
-        },
-
-        '&.movedHere': {
+        '&.moved-here': {
           "[draggable='true']": {
             '@apply text-warning': {},
           },
@@ -155,21 +119,6 @@ module.exports = Menu = () => ({
             '@apply h-[44px]': {},
           },
         },
-
-        '&.new-item': {
-          '.wrapper': {
-            '@apply border-[3px] border-dashed border-[rgba(0,0,0,0.3)]': {},
-            boxSizing: 'border-box',
-
-            '.menu-item-move-button': {
-              '@apply -ml-[3px]': {},
-            },
-          },
-        },
-
-        '& .menu-item-changes': {
-          '@apply bg-warning rounded-full w-[24px] h-[24px] text-center text-sm font-bold text-white': {},
-        },
       },
 
       '&-separator': {
@@ -207,7 +156,7 @@ module.exports = Menu = () => ({
           '@apply border-l border-r border-svartvik-200': {},
         },
 
-        '&:last-child.open > .items': {
+        '&.open > .items': {
           '@apply border-b border-svartvik-200': {},
         },
 
@@ -223,13 +172,7 @@ module.exports = Menu = () => ({
           '@apply h-[56px] max-h-[56px]': {},
         },
 
-        '&.new-item': {
-          '> .wrapper .menu-item-link': {
-            '@apply h-[50px] max-h-[50px]': {},
-          },
-        },
-
-        '&.open:not(.new-item) > .wrapper': {
+        '&.open > .wrapper': {
           '@apply border-b border-svartvik-200': {},
         },
 
@@ -247,12 +190,6 @@ module.exports = Menu = () => ({
           },
         },
 
-        '&.new-item, .new-item': {
-          '> .wrapper .menu-item-link': {
-            '@apply h-[42px] max-h-[42px]': {},
-          },
-        },
-
         '> .wrapper > .menu-item-link': {
           paddingLeft: '6.4rem',
         },
@@ -310,69 +247,4 @@ module.exports = Menu = () => ({
       },
     },
   },
-
-  // Sparkle icon scss
-  '.sparkle-icon': {
-    '@apply inline-flex w-[25px] h-[18px] ml-md  gap-[6px]': {},
-  },
-  '.sparkle-vert-lg': {
-    '@apply relative w-0 h-0 border-b-[10px] border-b-primary border-x-[4px] border-x-transparent border-t-[4px] border-t-transparent top-[-4px]':
-      {},
-    '&::after': {
-      '@apply content-[""] absolute left-[-4px] top-[12px] w-0 h-0 border-x-[4px] border-b-[4px] border-x-transparent border-b-transparent border-t-[10px] border-t-primary':
-        {},
-    },
-  },
-  '.sparkle-horizontal-lg': {
-    '@apply relative w-0 h-0 border-b-[10px] border-b-primary border-x-[4px] border-x-transparent border-t-[4px] border-t-transparent right-[-7px] top-[-10px] rotate-[90deg]':
-      {},
-    '&::after': {
-      '@apply content-[""] absolute left-[-4px] top-[10px] w-0 h-0 border-x-[4px] border-b-[4px] border-x-transparent border-b-transparent border-t-[10px] border-t-primary':
-        {},
-    },
-  },
-  '.sparkle-vert-sm': {
-    '@apply relative w-0 h-0 border-b-[6px] border-b-primary border-x-[2px] border-x-transparent border-t-[2px] border-t-transparent top-[-2px]':
-      {},
-    '&::after': {
-      '@apply content-[""] absolute left-[-1.8px] top-[6px] w-0 h-0 border-x-[2px] border-b-[2px] border-x-transparent border-b-transparent border-t-[6px] border-t-primary':
-        {},
-    },
-  },
-  '.sparkle-horizontal-sm': {
-    '@apply relative w-0 h-0 border-b-[6px] border-b-primary border-x-[2px] border-x-transparent border-t-[6px] border-t-transparent right-[-5.5px] top-[-8px] rotate-[90deg]':
-      {},
-    '&::after': {
-      '@apply content-[""] absolute left-[-2.2px] top-[5px] w-0 h-0 border-x-[2px] border-b-[6px] border-x-transparent border-b-transparent border-t-[6px] border-t-primary':
-        {},
-    },
-  },
-  '.twinkling-1': {
-    '@apply animate-pulse delay-75': {},
-  },
-  '.twinkling-2': {
-    '@apply animate-fast-pulse delay-75': {},
-  },
-  '.twinkling-3': {
-    '@apply animate-slow-pulse delay-1000': {},
-  },
-
-  '@keyframes slow-pulse': {
-    '75%': {
-      opacity: 0,
-    },
-  },
-  '@keyframes fast-pulse': {
-    '65%': {
-      opacity: 0,
-    },
-  },
-
-  '.animate-slow-pulse': {
-    animation: 'slow-pulse 2s cubic-bezier(0.1, 0.8, 0.2, 0.8) infinite',
-  },
-
-  '.animate-fast-pulse': {
-    animation: 'fast-pulse 1.5s cubic-bezier(0.4, 0.8, 0.8, 1) infinite',
-  },
 });

package/src/index.js

@@ -47,6 +47,9 @@ const Header = require('./components/header');
 
 const SearchBar = require('./components/search-bar');
 
+const ProfilePicture = require('./components/profile-picture');
+const Profile = require('./components/profile');
+
 const components = [
   Alert,
   AlertBanner,
@@ -89,6 +92,9 @@ const components = [
   Pagination,
   Footer,
   Header,
+
+  ProfilePicture,
+  Profile,
 ];
 
 const defaultColors = ['primary', 'secondary'];