@gooddata/sdk-ui-ext 10.18.0-alpha.1 → 10.18.0-alpha.11

package/src/notificationsPanel/Notification/DefaultNotification.scss

@@ -0,0 +1,134 @@
+// (C) 2024 GoodData Corporation
+
+.gd-ui-ext-notification {
+    $root: &;
+
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    align-self: stretch;
+
+    border-radius: 3px;
+    border: 1px solid var(--gd-palette-complementary-3);
+
+    padding: 10px;
+    height: 52px;
+    gap: 10px;
+
+    font-size: 12px;
+    line-height: 14px;
+
+    cursor: pointer;
+
+    transition: var(--gd-transition-all);
+
+    &:hover {
+        &:not(#{$root}--isUnsupported) {
+            background: var(--gd-palette-complementary-2);
+        }
+
+        &:not(#{$root}--isRead) {
+            #{$root}__mark-as-read-button {
+                display: flex;
+            }
+
+            #{$root}__time {
+                display: none;
+            }
+        }
+    }
+
+    &__unsupported {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-shrink: 1;
+
+        width: 100%;
+        height: 100%;
+        cursor: default;
+    }
+
+    &__icon {
+        width: 27px;
+        height: 27px;
+        border-radius: 51%;
+
+        background-color: var(--gd-palette-complementary-2);
+
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-shrink: 0;
+
+        position: relative;
+    }
+
+    &__unread-status {
+        width: 7px;
+        height: 7px;
+        border-radius: 51%;
+        background-color: var(--gd-palette-primary-base);
+        position: absolute;
+        top: 0;
+        right: 0;
+        border: 1.4px solid var(--gd-palette-complementary-0);
+        box-sizing: content-box;
+    }
+
+    &__details {
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        flex-shrink: 1;
+
+        width: 100%;
+        height: 100%;
+
+        overflow: hidden;
+    }
+
+    &__title {
+        font-weight: 600;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        color: var(--gd-palette-complementary-8);
+        flex-shrink: 0;
+
+        &--isRead {
+            font-weight: 400;
+        }
+    }
+
+    &__time {
+        text-align: right;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+
+        font-size: 12px;
+        font-style: normal;
+        font-weight: 400;
+        line-height: normal;
+
+        height: 100%;
+        color: var(--gd-palette-complementary-7);
+
+        flex-shrink: 0;
+    }
+
+    &__mark-as-read-button {
+        display: none;
+        align-items: flex-start;
+        justify-content: flex-start;
+
+        height: 100%;
+    }
+
+    &__links {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+    }
+}

package/src/notificationsPanel/NotificationFiltersDetail/NotificationFiltersDetailDialog.scss

@@ -0,0 +1,29 @@
+// (C) 2024 GoodData Corporation
+
+.gd-ui-ext-notification-filters-detail-dialog {
+    padding: 5px 0;
+    gap: 10px;
+    display: flex;
+    flex-direction: column;
+
+    &__item {
+        display: flex;
+        flex-direction: column;
+    }
+
+    &__values {
+        color: var(--gd-palette-complementary-8);
+
+        font-size: 12px;
+        font-weight: 700;
+        line-height: normal;
+    }
+
+    &__label {
+        color: var(--gd-palette-complementary-7);
+
+        font-size: 12px;
+        font-weight: 400;
+        line-height: normal;
+    }
+}

package/src/notificationsPanel/NotificationTriggersDetail/NotificationTriggersDetailDialog.scss

@@ -0,0 +1,72 @@
+// (C) 2024 GoodData Corporation
+
+.gd-ui-ext-notification-triggers-detail-dialog {
+    padding: 5px 0;
+
+    &__header {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: space-between;
+    }
+
+    &__header-title {
+        color: var(--gd-palette-complementary-7);
+
+        font-size: 12px;
+        font-style: normal;
+        font-weight: 400;
+
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+
+        text-align: right;
+
+        width: 50%;
+    }
+
+    &__table {
+        display: flex;
+        flex-direction: row;
+
+        color: var(--gd-palette-complementary-8);
+
+        font-size: 12px;
+        font-style: normal;
+        font-weight: 700;
+        line-height: normal;
+
+        text-align: right;
+    }
+
+    &__values-labels,
+    &__values {
+        display: flex;
+        flex-direction: column;
+
+        color: var(--gd-palette-complementary-8);
+
+        font-size: 12px;
+        font-style: normal;
+        font-weight: 700;
+        line-height: normal;
+
+        width: 50%;
+
+        text-align: left;
+    }
+
+    &__values-label {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+
+    &__values-value {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        text-align: right;
+    }
+}

package/src/notificationsPanel/NotificationsList/DefaultNotificationsList.scss

@@ -0,0 +1,7 @@
+// (C) 2024 GoodData Corporation
+
+.gd-ui-ext-notifications-list {
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+}

package/src/notificationsPanel/NotificationsList/DefaultNotificationsListEmptyState.scss

@@ -0,0 +1,21 @@
+// (C) 2024 GoodData Corporation
+
+.gd-ui-ext-notifications-list-empty-state {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    align-self: stretch;
+    gap: 10px;
+
+    min-height: 124px;
+    width: 100%;
+
+    color: var(--gd-palette-complementary-6);
+
+    text-overflow: ellipsis;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 20px;
+}

package/src/notificationsPanel/NotificationsList/DefaultNotificationsListErrorState.scss

@@ -0,0 +1,21 @@
+// (C) 2024 GoodData Corporation
+
+.gd-ui-ext-notifications-list-error-state {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    align-self: stretch;
+    gap: 10px;
+
+    min-height: 124px;
+    width: 100%;
+
+    color: var(--gd-palette-error-base);
+
+    text-overflow: ellipsis;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 20px;
+}

package/src/notificationsPanel/NotificationsPanel/DefaultNotificationsPanel.scss

@@ -0,0 +1,18 @@
+// (C) 2024 GoodData Corporation
+
+.gd-ui-ext-notifications-panel {
+    font-family: var(--gd-font-family);
+    background-color: var(--gd-palette-complementary-0);
+
+    box-shadow: 0 2px 10px 0 var(--gd-shadow-color);
+
+    display: flex;
+    flex-direction: column;
+
+    padding-top: 15px;
+
+    width: 370px;
+    max-height: 560px;
+
+    overflow: hidden;
+}

package/src/notificationsPanel/NotificationsPanel/DefaultNotificationsPanelHeader.scss

@@ -0,0 +1,28 @@
+// (C) 2024 GoodData Corporation
+
+.gd-ui-ext-notifications-panel-header {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    padding-left: 15px;
+    padding-right: 15px;
+
+    width: 100%;
+
+    &__tabs {
+        width: 100%;
+        height: 28px;
+
+        display: flex;
+        flex-direction: column;
+        align-items: stretch;
+        justify-content: flex-end;
+    }
+
+    &__mark-all-as-read-button {
+        height: 28px;
+        white-space: nowrap;
+        border-bottom: 1px solid var(--gd-palette-complementary-3);
+    }
+}

package/src/notificationsPanel/NotificationsPanel/DefaultOpenNotificationsPanelButton.scss

@@ -0,0 +1,34 @@
+// (C) 2024 GoodData Corporation
+
+.gd-ui-ext-open-notifications-button {
+    color: inherit;
+    padding: 0 10px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    &:hover,
+    &--isOpen {
+        background: rgba(255, 255, 255, 0.3);
+    }
+
+    &__icon {
+        opacity: 0.8;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        position: relative;
+    }
+
+    &__unread-status {
+        width: 7px;
+        height: 7px;
+        border-radius: 51%;
+        background-color: var(--gd-palette-primary-base);
+        position: absolute;
+        top: -3px;
+        right: -4px;
+        z-index: 1;
+        box-sizing: content-box;
+    }
+}

package/src/notificationsPanel/components/DetailsDialog.scss

@@ -0,0 +1,51 @@
+// (C) 2024 GoodData Corporation
+
+.gd-ui-ext-notification-details-dialog {
+    width: 245px;
+    box-shadow: 0 2px 10px 0 var(--gd-shadow-color);
+    border-radius: 3px;
+    border: 1px solid var(--gd-palette-complementary-3);
+    background-color: var(--gd-palette-complementary-0);
+    font-family: var(--gd-font-family);
+
+    &__header {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: space-between;
+        padding: 10px;
+        background: var(--gd-palette-complementary-2);
+        height: 35px;
+    }
+
+    &__header-title {
+        color: var(--gd-palette-complementary-6);
+        font-size: 11px;
+        font-style: normal;
+        font-weight: 700;
+        line-height: normal;
+        text-transform: uppercase;
+    }
+
+    &__header-close-button {
+        cursor: pointer;
+        opacity: 1;
+        transition: opacity 0.2s ease-in-out;
+
+        &:hover {
+            opacity: 0.7;
+        }
+    }
+
+    &__content {
+        padding: 10px;
+    }
+
+    &__footer {
+        border-top: 1px solid var(--gd-palette-complementary-3);
+        padding: 10px;
+        display: flex;
+        flex-direction: row;
+        justify-content: flex-end;
+    }
+}

package/src/notificationsPanel/components/Skeleton.scss

@@ -0,0 +1,25 @@
+// (C) 2024 GoodData Corporation
+
+@use "@gooddata/sdk-ui-kit/styles/scss/variables" as kit-variables;
+@use "react-loading-skeleton/dist/skeleton.css";
+
+.gd-ui-ext-skeleton {
+    height: 100%;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+
+    &__item {
+        border-radius: 3px;
+    }
+
+    .react-loading-skeleton {
+        --base-color: var(--gd-palette-complementary-2);
+        --highlight-color: var(--gd-palette-complementary-0);
+    }
+
+    span {
+        line-height: 0;
+        font-size: 0;
+    }
+}

package/src/notificationsPanel/components/VirtualList.scss

@@ -0,0 +1,26 @@
+// (C) 2024 GoodData Corporation
+
+.gd-ui-ext-virtual-list {
+    height: 100%;
+    width: 100%;
+
+    &--hasScroll {
+        padding-right: 4px;
+    }
+
+    &__scroll-container {
+        overflow: auto;
+        overflow-x: hidden;
+
+        &::-webkit-scrollbar {
+            -webkit-appearance: none;
+            appearance: none;
+            width: 6px;
+        }
+
+        &::-webkit-scrollbar-thumb {
+            background-color: var(--gd-palette-complementary-2);
+            border-radius: 3px;
+        }
+    }
+}

package/src/notificationsPanel/notificationPanel.scss

@@ -0,0 +1,19 @@
+// (C) 2024 GoodData Corporation
+
+@use "./components/DetailsDialog.scss";
+@use "./components/Skeleton.scss";
+@use "./components/VirtualList.scss";
+// Panel
+@use "./NotificationsPanel/DefaultNotificationsPanel.scss";
+@use "./NotificationsPanel/DefaultNotificationsPanelHeader.scss";
+@use "./NotificationsPanel/DefaultOpenNotificationsPanelButton.scss";
+// List
+@use "./NotificationsList/DefaultNotificationsList.scss";
+@use "./NotificationsList/DefaultNotificationsListEmptyState.scss";
+@use "./NotificationsList/DefaultNotificationsListErrorState.scss";
+// Notification
+@use "./Notification/DefaultNotification.scss";
+// Notification filters detail
+@use "./NotificationFiltersDetail/NotificationFiltersDetailDialog.scss";
+// Notification triggers detail
+@use "./NotificationTriggersDetail/NotificationTriggersDetailDialog.scss";