@startinblox/components-ds4go 3.3.8 → 4.1.0

package/src/styles/cards/ds4go-card-dataspace-catalog.scss

@@ -19,197 +19,54 @@ article {
   width: 100%;
   display: flex;
   font-family: var(--font-family-body);
-  &.vertical {
-    min-width: 295px;
-    .card-content {
-      max-height: 180px;
-      tems-division {
-        max-height: 180px;
-      }
-    }
-  }
-  &.horizontal,
-  &.billImage {
-    header {
-      width: auto;
-      border-radius: var(--border-radius-lg) 0 0 var(--border-radius-lg);
-    }
-    header.image {
-      flex-shrink: 0;
-      width: 33%;
-      height: 100%;
-    }
-    main {
-      flex-grow: 1;
-      .card-content {
-        max-height: 78px;
-        tems-division {
-          max-height: 78px;
-        }
-      }
-    }
-  }
-  &.billImage {
-    header.image {
-      width: 50%;
-    }
-    .card-content {
-      max-height: 206px;
-      tems-division {
-        max-height: 206px;
-      }
-    }
-  }
+  min-width: 295px;
+  flex-direction: column;
+
   header {
     display: flex;
     background-repeat: no-repeat;
-    background-size: cover;
+    background-size: contain;
     background-position: center center;
     box-sizing: border-box;
+    padding: var(--scale-400);
     width: 100%;
-    padding: 16px;
+    border-bottom: var(--border-width-sm) solid var(--color-border-primary);
+    border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0;
+    height: 167px;
+  }
+
+  .card-content {
+    max-height: 180px;
+    tems-division {
+      max-height: 180px;
+    }
   }
+
   main {
     display: flex;
     flex-direction: column;
     gap: var(--scale-400);
     flex: 1;
+    padding: var(--scale-600);
+    padding-bottom: var(--scale-800);
+
     .content {
       flex: 1;
     }
-    .orgLogo {
-      background-repeat: no-repeat;
-      background-size: contain;
-      background-position: center center;
-      width: 48px;
-      height: 48px;
-    }
+
     .card-content {
       flex-grow: 1;
       overflow: hidden;
       text-overflow: ellipsis;
       width: 100%;
     }
-    .address-line {
-      display: flex;
-      flex-direction: row;
-      justify-content: space-between;
-      align-items: end;
-      width: 100%;
-      > div:first-child {
-        flex: 1;
-        display: flex;
-        gap: 16px;
-        flex-direction: column;
-      }
-    }
-    .lang-date {
-      width: fit-content;
-      display: flex;
-      gap: 24px;
-      flex-direction: row;
-      color: var(--color-text-disabled-on);
-      font-size: var(--typography-size-body-sm);
-
-      font-weight: var(--font-weight-regular);
-      line-height: var(--line-height-body-sm);
-      text-transform: uppercase;
-    }
-    .address,
-    .source-logo {
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-      gap: var(--scale-200);
-      color: var(--color-text-information);
-      font-size: var(--typography-size-body-sm);
-      font-style: normal;
-      font-weight: var(--font-weight-regular);
-      line-height: var(--line-height-body-sm);
-      text-decoration: underline;
-      a {
-        color: var(--color-text-information);
-      }
-      svg {
-        color: var(--color-text-information);
-        width: var(--icon-size-sm);
-        height: var(--icon-size-sm);
-        display: flex;
-      }
-      .source,
-      .logo {
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        gap: var(--scale-200);
-      }
-      // logo image in source block
-      .logo {
-        margin-left: auto;
-        background-repeat: no-repeat;
-        background-size: contain;
-        background-position: center center;
-        width: 76px;
-        height: 24px;
-      }
-    }
   }
-  .tags,
-  .action {
+
+  .tags {
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
     align-items: flex-start;
     gap: var(--scale-200);
   }
-  .action ::slotted(*) {
-    width: 100%;
-    padding: var(--scale-400);
-    border-top: var(--border-width-sm) solid var(--color-border-primary);
-  }
-  .action slot:not(:has-slotted) {
-    display: none;
-  }
-
-  &.vertical {
-    flex-direction: column;
-    header {
-      width: 100%;
-      border-bottom: var(--border-width-sm) solid var(--color-border-primary);
-      border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0;
-      &.image {
-        height: 167px;
-      }
-    }
-    main {
-      padding: var(--scale-600);
-      padding-bottom: var(--scale-800);
-    }
-    
-  }
-
-  &.vertical,
-  &.billImage {
-    .lang-date {
-      width: 100%;
-      justify-content: space-between;
-    }
-  }
-
-  &.horizontal,
-  &.billImage {
-    
-    main {
-      padding: var(--scale-600);
-      padding-bottom: var(--scale-800);
-      
-
-      .source-logo .logo {
-        margin-left: 0px;
-      }
-    }
-  }
-  div:has(slot:not(:has-slotted)) {
-    display: none;
-  }
 }

package/src/styles/cards/ds4go-card-fact.scss

@@ -0,0 +1,112 @@
+@mixin card-content-max-height($height) {
+  max-height: $height;
+  tems-division {
+    max-height: $height;
+  }
+}
+
+:host {
+  box-sizing: border-box;
+  display: flex;
+  width: 100%;
+  max-width: 100%;
+  height: fit-content;
+}
+
+article {
+  border-radius: var(--border-radius-lg);
+  border: var(--border-width-sm) solid var(--color-border-primary);
+  width: 100%;
+  display: flex;
+  font-family: var(--font-family-body);
+  min-width: 295px;
+  flex-direction: column;
+  cursor: pointer;
+  transition: box-shadow 0.2s ease-in-out;
+
+  &:hover {
+    box-shadow: var(--shadow-md);
+  }
+
+  header {
+    display: flex;
+    background-repeat: no-repeat;
+    background-size: cover;
+    background-position: center center;
+    box-sizing: border-box;
+    padding: var(--scale-400);
+    width: 100%;
+    border-bottom: var(--border-width-sm) solid var(--color-border-primary);
+    border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0;
+    height: 167px;
+  }
+
+  main {
+    display: flex;
+    flex-direction: column;
+    gap: var(--scale-400);
+    flex: 1;
+    padding: var(--scale-600);
+    padding-bottom: var(--scale-800);
+
+    .meta-info {
+      display: flex;
+      flex-direction: column;
+      justify-items: center;
+      gap: var(--scale-200);
+      font-size: var(--typography-size-body-sm);
+      color: var(--color-text-disabled-on);
+      font-weight: var(--font-weight-regular);
+      line-height: var(--line-height-body-sm);
+
+      .author {
+        color: var(--color-text-primary);
+      }
+
+      .separator {
+        color: var(--color-border-primary);
+      }
+
+      .date {
+        color: var(--color-text-disabled-on);
+      }
+    }
+
+    .content {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      gap: var(--scale-200);
+    }
+
+    .card-header {
+      tems-division {
+        font-weight: var(--font-weight-semibold);
+      }
+    }
+
+    .card-content {
+      max-height: 180px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      width: 100%;
+
+      tems-division {
+        max-height: 180px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: -webkit-box;
+        -webkit-line-clamp: 4;
+        -webkit-box-orient: vertical;
+      }
+    }
+  }
+
+  .tags {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-items: flex-start;
+    gap: var(--scale-200);
+  }
+}

package/src/styles/index.scss

@@ -12,3 +12,45 @@
   --color-heading: #181d27;
   font-family: var(--font-family);
 }
+
+.swal2-container {
+  display: grid;
+
+  .swal2-modal {
+    box-shadow: none;
+    border: 1px solid var(--color-border-primary);
+  }
+}
+
+.swal2-html-container,
+.swal2-title {
+  white-space: break-spaces;
+  text-align: center;
+  line-height: initial;
+}
+
+.swal2-container {
+  button {
+    &.swal2-styled.swal2-confirm {
+      border: var(--border-width-sm) solid var(--color-surface-action-solid) !important;
+      background-color: var(--color-surface-action-solid) !important;
+      color: var(--color-text-action-on) !important;
+
+      &:hover {
+        background-color: var(--color-surface-action-solid-hover) !important;
+      }
+    }
+
+    &.swal2-styled.swal2-cancel {
+      background-color: inherit !important;
+      border: var(--border-width-sm) solid var(--color-border-secondary) !important;
+      color: var(--color-text-action) !important;
+
+      &:hover {
+        background-color: var(--color-surface-action-solid-hover-light) !important;
+        border-color: var(--color-border-action-hover) !important;
+      color: var(--color-text-action-hover) !important;
+      }
+    }
+  }
+}

package/src/styles/modal/ds4go-catalog-modal.scss

@@ -38,7 +38,7 @@ svg {
     flex-direction: row;
     gap: var(--scale-400);
 
-    tems-button:nth-child(2) {
+    catalog-modal-negotiation-button {
       margin-left: auto;
     }
   }

package/src/styles/modal/ds4go-fact-modal.scss

@@ -0,0 +1,161 @@
+@use "sass:meta";
+
+@include meta.load-css("../_helpers/flex");
+
+.modal {
+  width: 90vw;
+  height: 90vh;
+  border-radius: var(--border-radius-lg);
+  background-color: var(--color-surface-primary);
+  border: var(--border-width-sm) solid var(--color-border-primary);
+  display: flex;
+  flex-direction: column;
+  gap: var(--scale-600);
+  padding: var(--scale-600) var(--scale-900);
+
+  color: var(--color-text-body);
+  font-family: var(--font-family-body);
+  font-size: var(--typography-size-body-md);
+  font-style: normal;
+  font-weight: var(--font-weight-regular);
+  line-height: var(--line-height-body-md);
+  letter-spacing: var(--font-letter-spacing-default);
+
+  .topbar {
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    gap: var(--scale-400);
+
+    tems-button:nth-child(2) {
+      margin-left: auto;
+    }
+  }
+
+  .modal-content-wrapper {
+    overflow: hidden;
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+
+    .modal-box {
+      flex: 1;
+      display: flex;
+      overflow-y: scroll;
+      overflow-x: hidden;
+    }
+
+    .modal-content {
+      display: flex;
+      flex-direction: column;
+      gap: var(--scale-400);
+      height: fit-content;
+      width: 100%;
+    }
+
+    .cover-image {
+      width: 100%;
+      height: 300px;
+      overflow: hidden;
+      border-radius: var(--border-radius-md);
+      margin-bottom: var(--scale-200);
+
+      img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+        display: block;
+      }
+    }
+
+    tems-division {
+      width: fit-content;
+      div {
+        display: block;
+        height: auto;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+
+      &[type="h3"] {
+        margin-top: var(--scale-300);
+        margin-bottom: var(--scale-500);
+      }
+
+      &[type="h4"] {
+        margin-top: var(--scale-500);
+        margin-bottom: var(--scale-200);
+      }
+    }
+
+    .author-section {
+      text-align: center;
+      width: 100%;
+      margin-top: var(--scale-200);
+      margin-bottom: var(--scale-200);
+
+      div {
+        display: block;
+        height: auto;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+    }
+
+    .categories-list {
+      display: flex;
+      flex-direction: row;
+      flex-wrap: wrap;
+      gap: var(--scale-200);
+    }
+
+    .medias-gallery {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+      gap: var(--scale-300);
+
+      .media-item {
+        aspect-ratio: 1;
+        overflow: hidden;
+        border-radius: var(--border-radius-md);
+        cursor: pointer;
+        transition:
+          transform var(--transition-duration-fast) ease,
+          box-shadow var(--transition-duration-fast) ease;
+
+        &:hover {
+          transform: scale(1.05);
+          box-shadow: var(--shadow-md);
+        }
+
+        img {
+          width: 100%;
+          height: 100%;
+          object-fit: cover;
+          display: block;
+        }
+      }
+    }
+  }
+}
+
+@media screen and (min-width: 1100px) {
+  div.modal {
+    width: fit-content;
+    max-width: 80vw;
+    height: fit-content;
+    max-height: 80vh;
+    min-width: 50vw;
+    min-height: 50vh;
+
+    .modal-content-wrapper {
+      .cover-image {
+        height: 400px;
+      }
+
+      .medias-gallery {
+        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+      }
+    }
+  }
+}