@useblu/ocean-core 1.132.0 → 1.133.0

package/CHANGELOG.md

@@ -3,6 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.133.0](https://github.com/ocean-ds/ocean-web/compare/v1.132.0...v1.133.0) (2026-03-05)
+
+### Features
+
+- create TransactionListExpandable ([#1228](https://github.com/ocean-ds/ocean-web/issues/1228)) ([2bb4832](https://github.com/ocean-ds/ocean-web/commit/2bb48326df10a830d940990d7881070ddde1d805))
+
 # [1.132.0](https://github.com/ocean-ds/ocean-web/compare/v1.131.0...v1.132.0) (2026-03-03)
 
 ### Features

package/ocean.css

@@ -6210,6 +6210,59 @@
   text-decoration: line-through;
 }
 
+.ods-amount-details {
+  align-items: flex-end;
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+  gap: 4px;
+}
+.ods-amount-details__main {
+  align-items: flex-end;
+  display: flex;
+  flex-direction: column;
+}
+.ods-amount-details__amount {
+  color: #67697a;
+  font-family: "Nunito Sans";
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 1.5;
+  margin: 0;
+  text-align: right;
+  white-space: nowrap;
+}
+.ods-amount-details__amount--positive {
+  color: #2da94f;
+}
+.ods-amount-details__amount-row {
+  align-items: center;
+  display: flex;
+  flex-direction: row;
+  gap: 4px;
+  justify-content: flex-end;
+}
+.ods-amount-details__amount-sign {
+  color: #67697a;
+  font-family: "Nunito Sans";
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 1.5;
+}
+.ods-amount-details__caption {
+  text-align: right;
+  white-space: nowrap;
+}
+.ods-amount-details__indicator {
+  display: flex;
+}
+.ods-amount-details__indicator--medium .ods-tag {
+  font-size: 12px;
+  font-weight: 600;
+  line-height: 12px;
+  padding: 4px 8px;
+}
+
 .ods-list-action {
   align-items: center;
   background-color: white;
@@ -6244,7 +6297,6 @@
   border-radius: 0;
 }
 .ods-list-action__divider {
-  border-bottom: 1px solid #e0e2ee;
   margin: 0 16px;
 }
 .ods-list-action:hover:not(.ods-list-action--disabled):not(.ods-list-action--loading):not(.ods-list-action--swipe-open) {
@@ -6257,6 +6309,23 @@
 .ods-list-action:active:not(.ods-list-action--disabled):not(.ods-list-action--loading):not(.ods-list-action--swipe-open) {
   background-color: #ced1e1;
 }
+.ods-list-action__position {
+  align-items: center;
+  align-self: stretch;
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+  margin-bottom: -16px;
+  margin-top: -16px;
+  width: 24px;
+}
+.ods-list-action__position-line {
+  flex: 1;
+  width: 1px;
+}
+.ods-list-action__position-line--visible {
+  background-color: #e0e2ee;
+}
 .ods-list-action__icon {
   align-items: center;
   color: #5872f5;
@@ -6459,6 +6528,65 @@
   border: 0;
   border-radius: 0;
 }
+.ods-list-expandable--transaction .ods-list-expandable__icon {
+  color: #aaadc0;
+}
+.ods-list-expandable--transaction .ods-list-expandable__transaction-content {
+  align-items: center;
+  display: flex;
+  flex: 1;
+  gap: 12px;
+  min-width: 0;
+}
+.ods-list-expandable--transaction .ods-list-expandable__transaction-content .ods-content-list {
+  flex: 1;
+  min-width: 0;
+}
+.ods-list-expandable--transaction .ods-list-expandable__transaction-content .ods-amount-details {
+  flex-shrink: 0;
+}
+.ods-list-expandable--transaction .ods-list-expandable__transaction-content .ods-amount-details__amount:not(.ods-amount-details__amount--positive),
+.ods-list-expandable--transaction .ods-list-expandable__transaction-content .ods-amount-details__amount-sign {
+  color: #393b47;
+}
+.ods-list-expandable--transaction .ods-list-expandable__transaction-content .ods-amount-details__amount,
+.ods-list-expandable--transaction .ods-list-expandable__transaction-content .ods-amount-details__amount-sign {
+  font-size: 16px;
+}
+.ods-list-expandable--transaction .ods-list-expandable__content--transaction .ods-list-action {
+  padding: 12px 8px 12px 16px;
+}
+.ods-list-expandable--transaction .ods-list-expandable__content--transaction .ods-list-action__icon {
+  padding: 4px;
+}
+.ods-list-expandable--transaction .ods-list-expandable__content--transaction .ods-typography__paragraph {
+  font-size: 14px;
+}
+.ods-list-expandable--transaction .ods-list-expandable__content--transaction .ods-typography__description {
+  font-size: 12px;
+}
+.ods-list-expandable--transaction .ods-list-expandable__skeleton.ods-list-expandable__transaction-content {
+  flex-direction: row;
+  gap: 12px;
+}
+.ods-list-expandable--transaction .ods-list-expandable__skeleton.ods-list-expandable__transaction-content .ods-skeleton-bar {
+  width: auto;
+}
+.ods-list-expandable--transaction .ods-list-expandable__skeleton-list {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  gap: 8px;
+  min-width: 0;
+}
+.ods-list-expandable--transaction .ods-list-expandable__skeleton-amount {
+  align-items: flex-end;
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+  gap: 8px;
+  width: 86px;
+}
 .ods-list-expandable__main {
   align-items: center;
   background-color: transparent;
@@ -6472,7 +6600,7 @@
   transition: background-color 0.2s ease;
   width: 100%;
 }
-.ods-list-expandable__main:hover:not(.ods-card-list-expandable--loading .ods-list-expandable__main) {
+.ods-list-expandable__main:hover:not(.ods-list-expandable--loading .ods-list-expandable__main) {
   background-color: #f3f5fe;
 }
 .ods-list-expandable__main:focus-visible {
@@ -6515,6 +6643,20 @@
   width: 100%;
   word-wrap: break-word;
 }
+.ods-list-expandable__footer {
+  align-items: center;
+  color: #aaadc0;
+  display: flex;
+  flex-direction: column;
+  font-family: "Nunito Sans";
+  font-size: 12px;
+  font-weight: 600;
+  justify-content: center;
+  line-height: 1.5;
+  padding: 12px 0 24px;
+  text-align: center;
+  width: 100%;
+}
 .ods-list-expandable__skeleton {
   box-sizing: border-box;
   display: flex;
@@ -6531,11 +6673,15 @@
   box-sizing: border-box;
   cursor: default;
   overflow: hidden;
+  padding: 16px;
   pointer-events: none;
 }
 .ods-list-expandable--expanded .ods-list-expandable__main:hover {
   background-color: #f3f5fe;
 }
+.ods-list-expandable--show-hover .ods-list-expandable__main {
+  background-color: #f3f5fe;
+}
 
 .ods-list-selectable__indicator {
   margin-left: 12px;