agroptima-design-system 0.16.0 → 0.16.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agroptima-design-system",
-  "version": "0.16.0",
+  "version": "0.16.1",
   "scripts": {
     "dev": "npm run storybook",
     "storybook": "storybook dev -p 6006 --ci",

package/src/atoms/Alert.scss

@@ -37,6 +37,7 @@
   }
 
   .icon-button {
+    pointer-events: auto;
     .icon {
       width: config.$icon-size-2x;
       height: config.$icon-size-2x;

package/src/atoms/Button/Button.scss

@@ -55,7 +55,7 @@
 
   &.primary-outlined {
     @include button-style(
-      color_alias.$neutral-white,
+      transparent,
       color_alias.$primary-color-600,
       color_alias.$primary-color-50
     );
@@ -84,7 +84,7 @@
 
   &.error-outlined {
     @include button-style(
-      color_alias.$neutral-white,
+      transparent,
       color_alias.$error-color-600,
       color_alias.$error-color-50
     );
@@ -125,7 +125,7 @@
 
   &.success-outlined {
     @include button-style(
-      color_alias.$neutral-white,
+      transparent,
       color_alias.$neutral-color-900,
       color_alias.$success-color-50
     );
@@ -166,7 +166,7 @@
 
   &.warning-outlined {
     @include button-style(
-      color_alias.$neutral-white,
+      transparent,
       color_alias.$neutral-color-900,
       color_alias.$warning-color-50
     );
@@ -195,7 +195,7 @@
 
   &.info-outlined {
     @include button-style(
-      color_alias.$neutral-white,
+      transparent,
       color_alias.$info-color-600,
       color_alias.$info-color-50
     );
@@ -224,7 +224,7 @@
 
   &.neutral-outlined {
     @include button-style(
-      color_alias.$neutral-white,
+      transparent,
       color_alias.$neutral-color-1000,
       color_alias.$neutral-color-50
     );

package/src/atoms/CardsTable/CardsTable.scss

@@ -12,6 +12,10 @@
     display: flex;
     flex-direction: column;
     gap: config.$space-3x;
+
+    tr {
+      box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.25);
+    }
   }
 
   tr {
@@ -111,13 +115,10 @@
       border-radius: 0px config.$corner-radius-xxs config.$corner-radius-xxs 0px;
     }
 
-    tr {
-      box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.25);
-    }
-
     tr {
       td {
         @include typography.cards-table-list-text;
+        overflow: hidden;
       }
     }
 
@@ -138,6 +139,45 @@
     }
   }
 
+  // Desktop
+  thead {
+    display: flex;
+  }
+  tr {
+    flex-direction: row;
+  }
+
+  th,
+  td {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    flex: 2;
+  }
+
+  td {
+    padding: config.$space-2x config.$space-3x;
+  }
+
+  th.actions {
+    justify-content: center;
+    flex: 1;
+  }
+
+  td.actions {
+    order: 0;
+    justify-content: center;
+    flex: 1;
+  }
+
+  td:has(.badge) {
+    gap: config.$space-2x;
+  }
+
+  .alignment-right {
+    justify-content: flex-end;
+  }
+
   // Media queries
   // Mobile & tablet cases
   @media only screen and (max-width: breakpoints.$large) {
@@ -145,16 +185,20 @@
       display: none;
     }
 
-    tr {
-      flex-direction: row;
-      flex-wrap: wrap;
-      position: relative;
-      gap: config.$space-1x;
-      padding: config.$space-3x;
+    tbody {
+      tr {
+        flex-direction: row;
+        flex-wrap: wrap;
+        position: relative;
+        gap: config.$space-1x;
+        padding: config.$space-2x config.$space-3x;
+      }
     }
 
     td {
       width: 100%;
+      flex: inherit;
+      padding: 0px;
     }
 
     td:first-child {
@@ -184,43 +228,9 @@
       position: absolute;
       inset: auto config.$space-3x config.$space-3x auto;
     }
-  }
-  // Desktop case
-  @media only screen and (min-width: breakpoints.$large) {
-    thead {
-      display: flex;
-    }
-    tr {
-      flex-direction: row;
-    }
-
-    th,
-    td {
-      display: flex;
-      justify-content: flex-start;
-      align-items: center;
-      flex: 2;
-    }
-    th.actions {
-      justify-content: center;
-      flex: 1;
-    }
-    td {
-      padding: config.$space-5x config.$space-3x;
-    }
-
-    td.actions {
-      order: 0;
-      justify-content: center;
-      flex: 1;
-    }
-
-    td:has(.badge) {
-      gap: config.$space-2x;
-    }
 
     .alignment-right {
-      justify-content: flex-end;
+      justify-content: flex-start;
     }
   }
 }

package/src/icons/calendar.svg

@@ -0,0 +1 @@
+<svg width="20" height="20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M17 2h-1V0h-2v2H6V0H4v2H3c-1.11 0-1.99.9-1.99 2L1 18a2 2 0 0 0 2 2h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2Zm0 16H3V8h14v10Zm0-12H3V4h14v2Zm-7 5h5v5h-5v-5Z" fill="#444"/></svg>

package/src/icons/change-password.svg

@@ -0,0 +1 @@
+<svg width="20" height="20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M.91 13.167h18.18V15H.91v-1.833Zm1.045-3.713.772-1.357.773 1.357 1.182-.687-.773-1.357h1.546V6.035H3.909l.773-1.348L3.5 4l-.773 1.348L1.955 4l-1.182.688.772 1.347H0V7.41h1.545L.773 8.767l1.182.687Zm6.09-.687 1.182.687L10 8.097l.773 1.357 1.181-.687-.772-1.357h1.545V6.035h-1.545l.772-1.348L10.773 4 10 5.348 9.227 4l-1.182.688.773 1.347H7.273V7.41h1.545l-.773 1.357ZM20 6.035h-1.546l.773-1.348L18.046 4l-.773 1.348L16.5 4l-1.182.688.773 1.347h-1.546V7.41h1.546l-.773 1.357 1.182.687.773-1.357.773 1.357 1.181-.687-.773-1.357H20V6.035Z" fill="#444"/></svg>

package/src/icons/client.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><g clip-path="url(#client__a)"><path d="M10 2.375a2.625 2.625 0 1 1 0 5.25 2.625 2.625 0 0 1 0-5.25Zm0 11.25c3.713 0 7.625 1.825 7.625 2.625v1.375H2.375V16.25c0-.8 3.912-2.625 7.625-2.625ZM10 0C7.237 0 5 2.237 5 5s2.237 5 5 5c2.762 0 5-2.237 5-5s-2.238-5-5-5Zm0 11.25c-3.338 0-10 1.675-10 5V20h20v-3.75c0-3.325-6.662-5-10-5Z" fill="#444"/></g><defs><clipPath id="client__a"><path fill="#fff" d="M0 0h20v20H0z"/></clipPath></defs></svg>

package/src/icons/comment.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><g clip-path="url(#comment__a)"><path d="M19.99 2c0-1.1-.89-2-1.99-2H2C.9 0 0 .9 0 2v12c0 1.1.9 2 2 2h14l4 4-.01-18ZM18 2v13.17L16.83 14H2V2h16ZM4 10h12v2H4v-2Zm0-3h12v2H4V7Zm0-3h12v2H4V4Z" fill="#444"/></g><defs><clipPath id="comment__a"><path fill="#fff" d="M0 0h20v20H0z"/></clipPath></defs></svg>

package/src/icons/double-arrow-left.svg

@@ -0,0 +1 @@
+<svg width="20" height="20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M17.907 19 20 16.885 13.201 10 20 3.115 17.907 1 9 10l8.907 9Z" fill="#444"/><path d="M8.907 19 11 16.885 4.201 10 11 3.115 8.907 1 0 10l8.907 9Z" fill="#444"/></svg>

package/src/icons/double-arrow-right.svg

@@ -0,0 +1 @@
+<svg width="20" height="20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2.093 1 0 3.115 6.799 10 0 16.885 2.093 19 11 10 2.093 1Z" fill="#444"/><path d="M11.093 1 9 3.115 15.799 10 9 16.885 11.093 19 20 10l-8.907-9Z" fill="#444"/></svg>

package/src/icons/export.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><g clip-path="url(#export__a)" fill="#444"><path d="M15.648 6.9H12.66v1.774h2.99c.888 0 1.577.454 1.577.844v7.864c0 .39-.69.844-1.578.844H4.352c-.89 0-1.579-.453-1.579-.844V9.519c0-.391.69-.845 1.579-.845H7.34V6.901H4.352C2.472 6.9 1 8.05 1 9.519v7.863C1 18.85 2.472 20 4.352 20h11.296C17.528 20 19 18.85 19 17.382V9.519C19 8.05 17.527 6.9 15.648 6.9Z"/><path d="M7.376 4.42a.883.883 0 0 0 .627-.26l1.11-1.11v9.021a.887.887 0 1 0 1.773 0V2.99l1.17 1.17a.884.884 0 0 0 1.254 0 .886.886 0 0 0 0-1.254L10.663.26a.883.883 0 0 0-.627-.26h-.013a.883.883 0 0 0-.627.26L6.75 2.905a.886.886 0 0 0 .627 1.514Z"/></g><defs><clipPath id="export__a"><path fill="#fff" d="M0 0h20v20H0z"/></clipPath></defs></svg>
+<svg width="20" height="20" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#export__a)"><path d="M17.5 13.75v3.75h-15v-3.75H0v3.75C0 18.875 1.125 20 2.5 20h15c1.375 0 2.5-1.125 2.5-2.5v-3.75h-2.5ZM3.75 6.25l1.763 1.762L8.75 4.787V15h2.5V4.787l3.238 3.225L16.25 6.25 10 0 3.75 6.25Z" fill="#444"/></g><defs><clipPath id="export__a"><path fill="#fff" d="M0 0h20v20H0z"/></clipPath></defs></svg>

package/src/icons/import.svg

@@ -0,0 +1 @@
+<svg width="20" height="20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M17.5 13.75v3.75h-15v-3.75H0v3.75C0 18.875 1.125 20 2.5 20h15c1.375 0 2.5-1.125 2.5-2.5v-3.75h-2.5Zm-1.25-5-1.762-1.763-3.238 3.226V0h-2.5v10.213L5.513 6.988 3.75 8.75 10 15l6.25-6.25Z" fill="#444"/></svg>

package/src/icons/index.tsx

@@ -4,20 +4,31 @@ import AngleDown from './angle-down.svg'
 import AngleLeft from './angle-left.svg'
 import AngleRight from './angle-right.svg'
 import AngleUp from './angle-up.svg'
+import Calendar from './calendar.svg'
 import Check from './check.svg'
 import CheckboxActive from './checkbox-active.svg'
 import CheckboxInactive from './checkbox-inactive.svg'
+import ChangePassword from './change-password.svg'
+import Client from './client.svg'
 import Close from './close.svg'
+import Comment from './comment.svg'
 import Delete from './delete.svg'
 import Done from './done.svg'
+import DoubleArrowLeft from './double-arrow-left.svg'
+import DoubleArrowRight from './double-arrow-right.svg'
 import Edit from './edit.svg'
 import EditColumns from './edit-columns.svg'
 import EmptyState from './empty-customize.svg'
 import Error from './error.svg'
 import Export from './export.svg'
+import Import from './import.svg'
 import Info from './info.svg'
 import Loading from './loading.svg'
+import Logout from './logout.svg'
+import Product from './product.svg'
+import Salesman from './salesman.svg'
 import Search from './search.svg'
+import Settings from './settings.svg'
 import Show from './show.svg'
 import ShowOff from './show-off.svg'
 import Sorter from './sorter.svg'
@@ -30,20 +41,31 @@ export {
   AngleLeft,
   AngleRight,
   AngleUp,
+  Calendar,
+  ChangePassword,
   Check,
   CheckboxActive,
   CheckboxInactive,
+  Client,
   Close,
+  Comment,
   Delete,
   Done,
+  DoubleArrowLeft,
+  DoubleArrowRight,
   Edit,
   EditColumns,
   EmptyState,
   Error,
   Export,
+  Import,
   Info,
   Loading,
+  Logout,
+  Product,
+  Salesman,
   Search,
+  Settings,
   Show,
   ShowOff,
   Sorter,

package/src/icons/logout.svg

@@ -0,0 +1 @@
+<svg width="20" height="20" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#logout__a)"><path d="m15.556 5.556-1.567 1.566 1.755 1.767H6.667v2.222h9.077l-1.755 1.756 1.567 1.577L20 10l-4.444-4.444ZM2.222 2.222H10V0H2.222C1 0 0 1 0 2.222v15.556C0 19 1 20 2.222 20H10v-2.222H2.222V2.222Z" fill="#444"/></g><defs><clipPath id="logout__a"><path fill="#fff" d="M0 0h20v20H0z"/></clipPath></defs></svg>

package/src/icons/product.svg

@@ -0,0 +1 @@
+<svg width="20" height="20" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#product__a)" fill="#444"><path d="M11.404 0H8.596v2.922h2.808V0Zm0 4.832V3.596H8.596v1.236c0 1.46-2.023 2.022-2.023 4.607v9.606c0 .528.428.955.955.955h4.944a.955.955 0 0 0 .955-.955V9.439c0-2.585-2.023-3.147-2.023-4.607Zm.45 11.91H8.146V9.325h3.708v7.415Z"/></g><defs><clipPath id="product__a"><path fill="#fff" d="M0 0h20v20H0z"/></clipPath></defs></svg>

package/src/icons/salesman.svg

@@ -0,0 +1 @@
+<svg width="20" height="20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M18.333 2.5H1.667C.75 2.5 0 3.25 0 4.167v11.666C0 16.75.75 17.5 1.667 17.5h16.666c.917 0 1.659-.75 1.659-1.667L20 4.167c0-.917-.75-1.667-1.667-1.667Zm0 13.333H1.667V4.167h16.666v11.666ZM7.5 10C8.875 10 10 8.875 10 7.5S8.875 5 7.5 5A2.507 2.507 0 0 0 5 7.5C5 8.875 6.125 10 7.5 10Zm0-3.333c.458 0 .833.375.833.833a.836.836 0 0 1-.833.833.836.836 0 0 1-.833-.833c0-.458.375-.833.833-.833Zm5 7.158c0-2.083-3.308-2.983-5-2.983-1.692 0-5 .9-5 2.983V15h10v-1.175Zm-7.933-.492c.616-.416 1.85-.833 2.933-.833 1.083 0 2.308.408 2.933.833H4.567Z" fill="#444"/><path d="M17.5 7.5h-4.583v1.25H17.5V7.5Zm0 2.5h-4.583v1.25H17.5V10Z" fill="#444"/></svg>

package/src/icons/settings.svg

@@ -0,0 +1 @@
+<svg width="20" height="20" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#settings__a)"><path d="M17.64 10.98c.042-.32.073-.64.073-.98 0-.34-.031-.66-.072-.98l2.169-1.65a.495.495 0 0 0 .123-.64l-2.056-3.46a.517.517 0 0 0-.452-.25.492.492 0 0 0-.175.03l-2.56 1c-.534-.4-1.11-.73-1.737-.98l-.39-2.65a.497.497 0 0 0-.505-.42H7.946a.497.497 0 0 0-.504.42l-.39 2.65a7.97 7.97 0 0 0-1.738.98l-2.56-1a.597.597 0 0 0-.185-.03c-.174 0-.35.09-.442.25L.071 6.73a.484.484 0 0 0 .124.64l2.169 1.65a7.74 7.74 0 0 0-.072.98c0 .33.03.66.072.98l-2.17 1.65a.495.495 0 0 0-.123.64l2.056 3.46c.093.16.268.25.453.25.061 0 .123-.01.175-.03l2.56-1c.534.4 1.11.73 1.737.98l.39 2.65c.031.24.247.42.504.42h4.112c.257 0 .473-.18.504-.42l.39-2.65a7.955 7.955 0 0 0 1.738-.98l2.56 1c.062.02.123.03.185.03a.51.51 0 0 0 .442-.25l2.056-3.46a.495.495 0 0 0-.123-.64l-2.17-1.65Zm-2.035-1.71c.041.31.052.52.052.73 0 .21-.021.43-.052.73l-.144 1.13.915.7 1.11.84-.72 1.21-1.305-.51-1.069-.42-.925.68c-.442.32-.864.56-1.285.73l-1.09.43-.165 1.13-.205 1.35h-1.44l-.195-1.35-.164-1.13-1.09-.43a5.876 5.876 0 0 1-1.264-.71l-.936-.7-1.09.43-1.305.51-.72-1.21 1.11-.84.915-.7-.144-1.13a8.1 8.1 0 0 1-.051-.74c0-.2.02-.43.051-.73l.144-1.13-.915-.7-1.11-.84.72-1.21 1.305.51 1.07.42.925-.68a6.05 6.05 0 0 1 1.285-.73l1.09-.43.164-1.13L9.283 2h1.429l.195 1.35.164 1.13 1.09.43c.442.18.854.41 1.265.71l.935.7 1.09-.43 1.306-.51.72 1.21-1.1.85-.916.7.144 1.13ZM10.002 6C7.73 6 5.89 7.79 5.89 10s1.84 4 4.112 4c2.272 0 4.112-1.79 4.112-4s-1.84-4-4.112-4Zm0 6c-1.13 0-2.056-.9-2.056-2s.925-2 2.056-2 2.056.9 2.056 2-.925 2-2.056 2Z" fill="#444"/></g><defs><clipPath id="settings__a"><path fill="#fff" d="M0 0h20v20H0z"/></clipPath></defs></svg>

package/src/stories/CardsTableList.stories.ts

@@ -64,7 +64,8 @@ export const WithSorting: Story = {
           name: 'Metal Gear Solid 5: The Phantom Pain',
           address:
             'Konami Digital Entertainment Co., Ltd. 1-11-1, Ginza, Chuo-ku, Tokyo, 104-0061 Japan',
-          email: 'konami@fakemail.com',
+          email:
+            'konami@fakemailreallyreallyreallyreallyreallyreallyreallyreallyreallylongemail.com',
         },
       },
       {

package/src/stories/Changelog.stories.mdx

@@ -3,6 +3,12 @@ import { Meta } from "@storybook/addon-docs";
 <Meta title="Changelog" />
 # Changelog
 
+## 0.16.1
+- Updated Oultined Button background color
+- Added new icons
+- Added fix to Alert component button
+- Fixed responsive glitch bug on CardsTable components
+
 ## 0.16.0
 - Added new shape for FloatingButton component