@sk-web-gui/core 0.1.92 → 1.0.0

package/src/components/zebratable.js

@@ -1,89 +1,140 @@
 module.exports = ZebraTable = () => ({
+  '.sk-zebratable-wrapper': {
+    '@apply rounded-groups': {},
+    '@apply border-1': {},
+    '@apply bg-background-content': {},
+    '&-inside': {
+      '@apply border-0 rounded-t-groups': {},
+      '@apply overflow-hidden': {},
+    },
+    '&[data-variant="table"]': {
+      '&:not([data-background="true"])': {
+        '@apply border-0': {},
+        '@apply bg-transparent': {},
+      },
+      '.sk-zebratable-wrapper-inside': {
+        '@apply border-0 rounded-b-groups': {},
+      },
+    },
+  },
   '.sk-zebratable': {
     '@apply w-full text-left table-auto': {},
+    '@apply text-dark-secondary': {},
 
     '&-thead': {
+      '@apply border-b-1 border-dark-primary': {},
+      '@apply h-48': {},
       '&-tr': {
-        '@apply text-sm hidden lg:table-row': {},
+        '@apply table-row': {},
+        '@apply text-label-small': {},
       },
 
       '&-th': {
-        '@apply py-sm first-of-type:pl-lg': {},
+        '@apply py-4': {},
 
         "&[data-isColumnSortable='true']": {
-          '@apply py-sm cursor-pointer': {},
+          '@apply cursor-pointer': {},
         },
       },
+      '@apply bg-transparent': {},
+      '&[data-background="true"]': {
+        '@apply bg-vattjom-background-200 border-b-transparent': {},
+      },
     },
 
     '&-sortbutton': {
       '@apply flex items-center': {},
+      '@apply focus-visible:ring ring-ring ring-offset-0': {},
+      '@apply focus-visible:bg-vattjom-background-200': {},
+      '@apply rounded-utility': {},
+      '@apply px-16': {},
+      '@apply h-40': {},
 
       '&-icon': {
         '@apply inline-flex pl-sm': {},
 
-        '.MuiSvgIcon-root': {
-          '@apply !text-lg': {},
-        },
-
         '&-sort': {
-          '@apply text-black transform': {},
+          '@apply text-dark-secondary': {},
+          '@apply flex flex-col': {},
+
+          svg: {
+            '@apply h-16 w-16': {},
+            '@apply first-of-type:-mb-4': {},
+            '@apply last-of-type:-mt-4': {},
+          },
 
           "&[data-sortmodeascending='true']": {
-            '@apply -rotate-90': {},
+            '> *': {
+              '@apply last-of-type:text-dark-ghost': {},
+            },
           },
 
           "&[data-sortmodeascending='false']": {
-            '@apply rotate-90': {},
+            '> *': {
+              '@apply first-of-type:text-dark-ghost': {},
+            },
           },
         },
-
-        '&-more': {
-          '@apply text-gray': {},
-        },
       },
     },
 
-    '.material-icons-outlined': {
-      fontSize: '1.25em',
-    },
-
     '&-tbody': {
-      '@apply text-body lg:bg-white': {},
+      '@apply text-dark-secondary bg-transparent': {},
 
       '&-tr': {
-        '@apply transition-all bg-white lg:even:bg-white lg:odd:bg-gray-100 px-md py-md md:px-lg md:py-lg my-lg first-of-type:mt-0 block shadow-md lg:shadow-none lg:table-row lg:my-0 lg:py-0 lg:px-lg':
-          {},
-
-        '&.highlighted': {
-          '@apply lg:border-4 lg:border-hover': {},
-        },
+        '@apply bg-transparent': {},
+        '@apply hover:bg-background-100': {},
+        '@apply border-b-1': {},
+        '@apply last-of-type:border-b-transparent': {},
       },
 
       '&-td': {
-        '@apply empty:hidden py-4 px-sm lg:px-0 first-of-type:pl-sm lg:first-of-type:pl-lg last-of-type:px-0 lg:last-of-type:pr-lg last-of-type:text-right block lg:table-cell even:bg-white odd:bg-gray-100 last-of-type:bg-transparent lg:even:bg-transparent lg:odd:bg-transparent':
-          {},
+        '@apply py-20 px-18': {},
+        '@apply text-small': {},
       },
     },
 
-    '&-paginationwrapper': {
-      '@apply w-full text-lg flex justify-center lg:justify-start': {},
+    '&[data-dense="true"]': {
+      '.sk-zebratable': {
+        '&-thead': {
+          '&-th': {
+            '@apply py-12': {},
+          },
+        },
+        '&-tbody': {
+          '&-td': {
+            '@apply py-12': {},
+          },
+        },
+      },
     },
-    '&-pagination': {
-      '@apply grow': {},
+
+    '&-paginationwrapper': {
+      '@apply w-full max-w-[60rem]': {},
+      '@apply shrink': {},
     },
-    '&-pagination-pagesizes': {
-      '@apply grow-0 flex gap-xs flex-row justify-end items-center': {},
-      '&-label': {
-        '@apply font-bold': {},
+
+    '&-bottom': {
+      '@apply py-14 px-16': {},
+      '@apply border-t-1': {},
+      '@apply flex flex-row': {},
+      '@apply gap-32': {},
+      '@apply justify-between items-center': {},
+      '&-section': {
+        '@apply shrink-0': {},
+        '@apply flex flex-row': {},
+        '@apply justify-start items-center': {},
+        '@apply gap-8': {},
+        '&-label': {
+          '@apply font-normal': {},
+          '@apply text-small': {},
+          '@apply shrink-0': {},
+        },
       },
-      '&.-select': {
-        '@apply w-auto': {},
+      '&-pagination': {
+        '@apply grow': {},
+        '@apply shrink': {},
       },
     },
-
-    '&-bottomwrapper': {
-      '@apply mt-lg px-lg flex items-center justify-end': {},
-    },
   },
 });

package/src/index.js

@@ -1,8 +1,8 @@
-const preset = require('./preset');
-const plugin = require('./plugin');
-
-module.exports = {
-  default: plugin,
-  plugin: plugin,
-  preset: preset,
-};
+const preset = require('./preset');
+const plugin = require('./plugin');
+
+module.exports = {
+  default: plugin,
+  plugin: plugin,
+  preset: preset,
+};

package/src/plugin.js

@@ -1,120 +1,142 @@
-const plugin = require('tailwindcss/plugin');
-
-const base = require('./base');
-const theme = require('./theme');
-
-// components
-const Alert = require('./components/alert');
-const AlertBanner = require('./components/alert-banner');
-const Badge = require('./components/badge');
-const Breadcrumb = require('./components/breadcrumb');
-const ButtonGroup = require('./components/button-group');
-const Comments = require('./components/comments');
-const Checkbox = require('./components/checkbox');
-const ContextMenu = require('./components/context-menu');
-const Dialog = require('./components/dialog');
-const Dot = require('./components/dot');
-const Forms = require('./components/forms');
-const Calendar = require('./components/calendar');
-const Icon = require('./components/icon');
-const Link = require('./components/link');
-const Message = require('./components/message');
-const Notification = require('./components/notification');
-const Radio = require('./components/radio');
-const Switch = require('./components/switch');
-
-const Button = require('./components/button');
-const Accordion = require('./components/accordion');
-const Card = require('./components/card');
-const Table = require('./components/table');
-const ZebraTable = require('./components/zebratable');
-
-const Modal = require('./components/modal');
-const CookieConsent = require('./components/cookie-consent');
-const Divider = require('./components/divider');
-
-const SideMenu = require('./components/side-menu');
-const TabMenu = require('./components/tab-menu');
-const Tabs = require('./components/tabs');
-const UserMenu = require('./components/user-menu');
-
-const DropdownFilter = require('./components/dropdown-filter');
-
-const Tag = require('./components/tag');
-const Pagination = require('./components/pagination');
-const Footer = require('./components/footer');
-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,
-  Badge,
-  Breadcrumb,
-  ButtonGroup,
-  Button,
-  Checkbox,
-  Comments,
-  ContextMenu,
-  Dialog,
-  Dot,
-  Forms,
-  Calendar,
-  Icon,
-  Link,
-  Message,
-  Notification,
-  Radio,
-  Switch,
-
-  Table,
-  ZebraTable,
-  CookieConsent,
-  Modal,
-
-  Accordion,
-  Card,
-  Divider,
-
-  SideMenu,
-  TabMenu,
-  Tabs,
-  UserMenu,
-
-  DropdownFilter,
-
-  SearchBar,
-
-  Tag,
-  Pagination,
-  Footer,
-  Header,
-
-  ProfilePicture,
-  Profile,
-];
-
-const defaultColors = ['primary', 'secondary'];
-
-module.exports = plugin.withOptions(
-  function (options = { colors: [], cssBase: true }) {
-    return function ({ addComponents, addBase, theme }) {
-      const optionColors = [...defaultColors, ...(options.colors || [])];
-
-      if (options.cssBase) {
-        addBase(base);
-      }
-
-      addComponents(components.map((component) => component(optionColors, theme)));
-    };
-  },
-  function () {
-    return {
-      theme: theme,
-    };
-  }
-);
+const plugin = require('tailwindcss/plugin');
+
+const base = require('./base');
+const theme = require('./theme');
+
+// components
+const Alert = require('./components/alert');
+const AlertBanner = require('./components/alert-banner');
+const Badge = require('./components/badge');
+const Breadcrumb = require('./components/breadcrumb');
+const ButtonGroup = require('./components/button-group');
+const ComboBox = require('./components/combobox');
+const Comments = require('./components/comments');
+const Checkbox = require('./components/checkbox');
+const ContextMenu = require('./components/context-menu');
+const Dialog = require('./components/dialog');
+const Dot = require('./components/dot');
+const Forms = require('./components/forms');
+const Filter = require('./components/filter');
+const Icon = require('./components/icon');
+const Input = require('./components/input');
+const Label = require('./components/label');
+const Link = require('./components/link');
+const List = require('./components/list');
+const Logo = require('./components/logo');
+const Menubar = require('./components/menubar');
+const MenuVertical = require('./components/menu-vertical');
+const Select = require('./components/select');
+const Snackbar = require('./components/snackbar');
+const Spinner = require('./components/spinner');
+const Notification = require('./components/notification');
+const Radio = require('./components/radio');
+const Switch = require('./components/switch');
+
+const Button = require('./components/button');
+const Accordion = require('./components/accordion');
+const Avatar = require('./components/avatar');
+const Card = require('./components/card');
+const Table = require('./components/table');
+const ZebraTable = require('./components/zebratable');
+
+const Modal = require('./components/modal');
+const CookieConsent = require('./components/cookie-consent');
+const Divider = require('./components/divider');
+
+const SideMenu = require('./components/side-menu');
+const TabMenu = require('./components/tab-menu');
+const Tabs = require('./components/tabs');
+const Tooltip = require('./components/tooltip');
+const UserMenu = require('./components/user-menu');
+
+const DropdownFilter = require('./components/dropdown-filter');
+
+const Pagination = require('./components/pagination');
+const PopupMenu = require('./components/popup-menu');
+const Footer = require('./components/footer');
+const Header = require('./components/header');
+
+const SearchField = require('./components/search-field');
+
+const ProgressStepper = require('./components/progress-stepper');
+const ProgressBar = require('./components/progress-bar');
+
+const components = [
+  Alert,
+  AlertBanner,
+  Badge,
+  Breadcrumb,
+  ButtonGroup,
+  Button,
+  Checkbox,
+
+  Comments,
+  ContextMenu,
+  Dialog,
+  Dot,
+  Forms,
+  Filter,
+  Icon,
+  Input,
+  Label,
+  Link,
+  List,
+  Logo,
+  Menubar,
+  MenuVertical,
+  Select,
+  Snackbar,
+  Spinner,
+  Notification,
+  Radio,
+  Switch,
+  Table,
+  ZebraTable,
+  CookieConsent,
+  Modal,
+
+  Accordion,
+  Avatar,
+  Card,
+  Divider,
+
+  SideMenu,
+  TabMenu,
+  Tabs,
+  Tooltip,
+
+  UserMenu,
+
+  DropdownFilter,
+
+  SearchField,
+
+  Pagination,
+  PopupMenu,
+  Footer,
+  Header,
+  ProgressStepper,
+  ProgressBar,
+  ComboBox,
+];
+
+const defaultColors = ['warning', 'error', 'success', 'info', 'vattjom', 'juniskar', 'bjornstigen', 'gronsta'];
+
+module.exports = plugin.withOptions(
+  function (options = { colors: [], cssBase: true }) {
+    return function ({ addComponents, addBase, theme }) {
+      const optionColors = [...defaultColors, ...(options.colors || [])];
+
+      if (options.cssBase) {
+        addBase(base);
+      }
+
+      addComponents(components.map((component) => component(optionColors, theme)));
+    };
+  },
+  function () {
+    return {
+      theme: theme,
+    };
+  }
+);