Merge remote-tracking branch 'origin/staging' into develop

frontend/src/app/main/ui/dashboard/team.cljs

@@ -279,27 +279,30 @@
         is-you           (= (:id profile) (:id member))
 
         can-change-rol   (or is-owner is-admin)
-        not-superior     (or is-admin (and can-change-rol (or member-is-admin member-is-editor member-is-viewer)))
+        not-superior     (or (and (not member-is-owner) is-admin) (and can-change-rol (or member-is-admin member-is-editor member-is-viewer)))
 
         role             (cond
                            member-is-owner  "labels.owner"
                            member-is-admin  "labels.admin"
                            member-is-editor "labels.editor"
-                           :else             "labels.viewer")
-
+                           :else            "labels.viewer")
         on-show          (mf/use-fn #(reset! show? true))
         on-hide          (mf/use-fn #(reset! show? false))]
     [:*
      (if (and can-change-rol not-superior (not (and is-you is-owner)))
        [:div {:class (stl/css :rol-selector :has-priv)
+              :role "combobox"
+              :aria-labelledby "role-label-id"
               :on-click on-show}
-        [:span {:class (stl/css :rol-label)} (tr role)]
+        [:span {:class (stl/css :rol-label)
+                :id "role-label-id"} (tr role)]
         arrow-icon]
        [:div {:class (stl/css :rol-selector)}
         [:span {:class (stl/css :rol-label)} (tr role)]])
 
      [:& dropdown {:show @show? :on-close on-hide}
-      [:ul {:class (stl/css :roles-dropdown)}
+      [:ul {:class (stl/css :roles-dropdown)
+            :role "listbox"}
        [:li {:on-click on-set-viewer
              :class (stl/css :rol-dropdown-item)}
         (tr "labels.viewer")]

frontend/src/app/main/ui/workspace/right_header.cljs

@@ -244,8 +244,8 @@
      (when-not ^boolean read-only?
        [:div {:class (stl/css :history-section)}
         [:button
-         {:title (tr "workspace.sidebar.history" (sc/get-tooltip :toggle-history))
-          :aria-label (tr "workspace.sidebar.history" (sc/get-tooltip :toggle-history))
+         {:title (tr "workspace.sidebar.history")
+          :aria-label (tr "workspace.sidebar.history")
           :class (stl/css-case :selected (contains? layout :document-history)
                                :history-button true)
           :on-click toggle-history}

frontend/src/app/main/ui/workspace/sidebar/assets.cljs

@@ -8,6 +8,7 @@
   (:require-macros [app.main.style :as stl])
   (:require
    [app.common.data.macros :as dm]
+   [app.config :as cf]
    [app.main.data.modal :as modal]
    [app.main.data.workspace :as dw]
    [app.main.data.workspace.assets :as dwa]
@@ -87,6 +88,7 @@
         section        (:section filters)
         ordering       (:ordering filters)
         reverse-sort?  (= :desc ordering)
+        num-libs       (count (mf/deref refs/workspace-libraries))
 
         toggle-ordering
         (mf/use-fn
@@ -156,12 +158,18 @@
     [:article  {:class (stl/css :assets-bar)}
      [:div {:class (stl/css :assets-header)}
       (when-not ^boolean read-only?
-        [:button {:class (stl/css :libraries-button)
-                  :on-click show-libraries-dialog
-                  :data-testid "libraries"}
-         [:span {:class (stl/css :libraries-icon)}
-          i/library]
-         (tr "workspace.assets.libraries")])
+        (if (and (cf/external-feature-flag "templates-02" "test")
+                 (zero? num-libs))
+          [:button {:class (stl/css :add-library-button)
+                    :on-click show-libraries-dialog
+                    :data-testid "libraries"}
+           (tr "workspace.assets.add-library")]
+          [:button {:class (stl/css :libraries-button)
+                    :on-click show-libraries-dialog
+                    :data-testid "libraries"}
+           [:span {:class (stl/css :libraries-icon)}
+            i/library]
+           (tr "workspace.assets.libraries")]))
 
       [:div {:class (stl/css :search-wrapper)}
        [:& search-bar {:on-change on-search-term-change

frontend/src/app/main/ui/workspace/sidebar/assets.scss

@@ -25,34 +25,50 @@
   width: 100%;
   margin-bottom: $s-4;
   border-radius: $s-8;
+
   .libraries-icon {
     @include flexCenter;
     width: $s-24;
     height: 100%;
+
     svg {
       @include flexCenter;
       @extend .button-icon;
       stroke: var(--icon-foreground);
     }
   }
+
   &:hover {
     background-color: var(--button-secondary-background-color-hover);
     color: var(--button-secondary-foreground-color-hover);
     border: $s-1 solid var(--button-secondary-border-color-hover);
+
     svg {
       stroke: var(--button-secondary-foreground-color-hover);
     }
   }
+
   &:focus {
     background-color: var(--button-secondary-background-color-focus);
     color: var(--button-secondary-foreground-color-focus);
     border: $s-1 solid var(--button-secondary-border-color-focus);
+
     svg {
       stroke: var(--button-secondary-foreground-color-focus);
     }
   }
 }
 
+.add-library-button {
+  @extend .button-primary;
+  text-transform: uppercase;
+  gap: $s-2;
+  height: $s-32;
+  width: 100%;
+  margin-bottom: $s-4;
+  border-radius: $s-8;
+}
+
 .section-button {
   @include flexCenter;
   @include buttonStyle;
@@ -62,32 +78,39 @@
   border: $s-1 solid var(--input-border-color-rest);
   border-radius: $br-8 $br-2 $br-2 $br-8;
   background-color: var(--input-background-color-rest);
+
   svg {
     height: $s-16;
     width: $s-16;
     stroke: var(--icon-foreground);
   }
+
   &:focus {
     border: $s-1 solid var(--input-border-color-focus);
     outline: 0;
     background-color: var(--input-background-color-focus);
     color: var(--input-foreground-color-focus);
+
     svg {
       background-color: var(--input-background-color-focus);
     }
   }
+
   &:hover {
     border: $s-1 solid var(--input-border-color-hover);
     background-color: var(--input-background-color-hover);
+
     svg {
       background-color: var(--input-background-color-hover);
       stroke: var(--button-foreground-hover);
     }
+
     &:focus {
       border: $s-1 solid var(--input-border-color-focus);
       outline: 0;
       background-color: var(--input-background-color-focus);
       color: var(--input-foreground-color-focus);
+
       svg {
         background-color: var(--input-background-color-focus);
       }

frontend/src/app/main/ui/workspace/sidebar/versions.cljs

@@ -31,6 +31,8 @@
 (def versions
   (l/derived :workspace-versions st/state))
 
+(def versions-stored-days 7)
+
 (defn group-snapshots
   [data]
   (->> (concat
@@ -381,4 +383,14 @@
                                    :on-restore-snapshot handle-restore-version-snapshot
                                    :on-pin-snapshot handle-pin-version}]
 
-               nil))])])]))
+               nil))])
+
+        [:div {:class (stl/css :autosave-warning)}
+         [:div {:class (stl/css :autosave-warning-text)}
+          (tr "workspace.versions.warning.text" versions-stored-days)]
+
+         [:div {:class (stl/css :autosave-warning-subtext)}
+          [:> i18n/tr-html*
+           {:tag-name "div"
+            :content (tr "workspace.versions.warning.subtext"
+                         "mailto:support@penpot.app")}]]]])]))

frontend/src/app/main/ui/workspace/sidebar/versions.scss

@@ -230,3 +230,24 @@
 .version-snapshot-menu-btn {
   visibility: hidden;
 }
+
+.autosave-warning {
+  display: flex;
+  flex-direction: column;
+  gap: $s-8;
+  padding: $s-16;
+}
+
+.autosave-warning-text {
+  color: var(--color-foreground-primary);
+  font-size: $fs-12;
+  text-transform: uppercase;
+}
+
+.autosave-warning-subtext {
+  color: var(--color-foreground-secondary);
+  font-size: $fs-12;
+  a {
+    color: var(--color-accent-primary);
+  }
+}